JavaScript - How To Create An External Js For Blogger

With Blogger you have to 'pre-install' the jQuery code into the main coding, which I already did. Installed correctly, per help of other online forums. The problem I'm having now, is the CSS & HTML is coming together beautifully, but the hover effects are not working on the two drop-down options with multiple links. It is supposed to yield this: Ardor | CSS MenuMaker

This is the proposed Javascript, that for some reason is not working.
Code:

<script type="text/javascript">
(function($){
$(document).ready(function(){

$('#cssmenu').prepend('<div id="menu-button">Menu</div>');
  $('#cssmenu #menu-button').on('click', function(){
    var menu = $(this).next('ul');
    if (menu.hasClass('open')) {
      menu.removeClass('open');
    } else {
      menu.addClass('open');
    }); });
})(jQuery); </script>

The HTML portion is:
Code:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  z-index: 999;
  width: 750px;
  font-family: 'Open Sans', Helvetica, sans-serif;
  background: #ffffff;
  background: -moz-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #ebebeb));
  background: -webkit-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
  background: -o-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
  background: -ms-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #ebebeb 100%);
}
#cssmenu > ul {
  background: url('bg.png');
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.05);
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li {
  float: left;
  display: inline-block;
}
#cssmenu.align-center > ul {
  float: none;
  text-align: center;
  font-size: 0;
}
#cssmenu.align-center > ul > li {
  float: none;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu > ul > li > a {
  padding: 18px 25px 21px 25px;
  border-right: 1px solid rgba(80, 80, 80, 0.12);
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  color: #a19393;
  text-transform: uppercase;
  letter-spacing: 1px;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a {
  color: #ffffff;
  background: #f7f7f7;
  background: rgba(0, 0, 0, 0.1);
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 45px;
}
#cssmenu > ul > li.has-sub > a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #a19393;
  right: 17px;
  top: 20.5px;
}
#cssmenu > ul > li.has-sub.active > a::after,
#cssmenu > ul > li.has-sub:hover > a {
  border-top-color: #ffffff;
}
#cssmenu ul ul {
  position: absolute;
  left: -9999px;
  top: 60px;
  z-index: 9999;
  padding-top: 6px;
  font-size: 10px;
  opacity: 0;
  -webkit-transition: top 0.2s ease, opacity 0.2s ease-in;
  -moz-transition: top 0.2s ease, opacity 0.2s ease-in;
  -ms-transition: top 0.2s ease, opacity 0.2s ease-in;
  -o-transition: top 0.2s ease, opacity 0.2s ease-in;
  transition: top 0.2s ease, opacity 0.2s ease-in;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu > ul > li > ul::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-bottom-color: #ffffff;
  top: -4px;
  left: 20px;
}
#cssmenu.align-right > ul > li > ul::after {
  left: auto;
  right: 20px;
}
#cssmenu ul ul ul::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-right-color: #ffffff;
  top: 11px;
  left: -4px;
}
#cssmenu.align-right ul ul ul::after {
  border-right-color: transparent;
  border-left-color: #ffffff;
  left: auto;
  right: -4px;
}
#cssmenu > ul > li > ul {
  top: 120px;
}
#cssmenu > ul > li:hover > ul {
  top: 49px;
  left: 0;
  opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
  left: auto;
  right: 0;
}
#cssmenu ul ul ul {
  padding-top: 0;
  padding-left: 6px;
}
#cssmenu.align-right ul ul ul {
  padding-right: 6px;
}
#cssmenu ul ul > li:hover > ul {
  left: 140px;
  top: 0;
  opacity: 1;
}
#cssmenu.align-right ul ul > li:hover > ul {
  left: auto;
  right: 100%;
  opacity: 1;
}
#cssmenu ul ul li a {
  text-decoration: none;
  font-weight: 400;
  padding: 11px 25px;
  width: 140px;
  color: #a19393;
  background: #ffffff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.1), -1px 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
  color: #ffffff;
}
#cssmenu ul ul li:first-child > a {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
#cssmenu ul ul li:last-child > a {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
#cssmenu > ul > li > ul::after {
  position: absolute;
  display: block;
}
#cssmenu ul ul li.has-sub > a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-left-color: #a19393;
  right: 17px;
  top: 14px;
  top: 12.5px;
}
#cssmenu.align-right ul ul li.has-sub > a::after {
  border-left-color: transparent;
  border-right-color: #a19393;
  right: auto;
  left: 17px;
}
#cssmenu ul ul li.has-sub.active > a::after,
#cssmenu ul ul li.has-sub:hover > a::after {
  border-left-color: #ffffff;
}
#cssmenu.align-right ul ul li.has-sub.active > a::after,
#cssmenu.align-right ul ul li.has-sub:hover > a::after {
  border-right-color: #ffffff;
  border-left-color: transparent;
}
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    background: #ffffff;
  }
  #cssmenu > ul {
    display: none;
  }
  #cssmenu > ul.open {
    display: block;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  #cssmenu.align-right > ul {
    float: none;
  }
  #cssmenu.align-center > ul {
    text-align: left;
  }
  #cssmenu > ul > li,
  #cssmenu.align-right > ul > li {
    float: none;
    display: block;
  }
  #cssmenu > ul > li > a {
    padding: 18px 25px 18px 25px;
    border-right: 0;
  }
  #cssmenu > ul > li:hover > a,
  #cssmenu > ul > li.active > a {
    background: rgba(0, 0, 0, 0.1);
  }
  #cssmenu #menu-button {
    display: block;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    color: #a19393;
    padding: 18px 25px 18px 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: url('bg.png');
    cursor: pointer;
  }
  #cssmenu ul ul,
  #cssmenu ul li:hover > ul,
  #cssmenu > ul > li > ul,
  #cssmenu ul ul ul,
  #cssmenu ul ul li:hover > ul,
  #cssmenu.align-right ul ul,
  #cssmenu.align-right ul li:hover > ul,
  #cssmenu.align-right > ul > li > ul,
  #cssmenu.align-right ul ul ul,
  #cssmenu.align-right ul ul li:hover > ul {
    left: 0;
    right: auto;
    top: auto;
    opacity: 1;
    width: 100%;
    padding: 0;
    position: relative;
    text-align: left;
  }
  #cssmenu ul ul li {
    width: 100%;
  }
  #cssmenu ul ul li a {
    width: 100%;
    box-shadow: none;
    padding-left: 35px;
  }
  #cssmenu ul ul ul li a {
    padding-left: 45px;
  }
  #cssmenu ul ul li:first-child > a,
  #cssmenu ul ul li:last-child > a {
    border-radius: 0;
  }
  #cssmenu #menu-button::after {
    display: block;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #a19393;
    border-bottom: 2px solid #a19393;
    right: 25px;
    top: 18px;
  }
  #cssmenu #menu-button::before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #a19393;
    right: 25px;
    top: 28px;
  }
  #cssmenu > ul > li.has-sub > a::after,
  #cssmenu ul ul li.has-sub > a::after {
    display: none;
  }
}

The CSS portion is:
Code:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  z-index: 999;
  width: 750px;
  font-family: 'Open Sans', Helvetica, sans-serif;
  background: #ffffff;
  background: -moz-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #ebebeb));
  background: -webkit-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
  background: -o-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
  background: -ms-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #ebebeb 100%);
}
#cssmenu > ul {
  background: url('bg.png');
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.05);
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li {
  float: left;
  display: inline-block;
}
#cssmenu.align-center > ul {
  float: none;
  text-align: center;
  font-size: 0;
}
#cssmenu.align-center > ul > li {
  float: none;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu > ul > li > a {
  padding: 18px 25px 21px 25px;
  border-right: 1px solid rgba(80, 80, 80, 0.12);
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  color: #a19393;
  text-transform: uppercase;
  letter-spacing: 1px;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a {
  color: #ffffff;
  background: #f7f7f7;
  background: rgba(0, 0, 0, 0.1);
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 45px;
}
#cssmenu > ul > li.has-sub > a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #a19393;
  right: 17px;
  top: 20.5px;
}
#cssmenu > ul > li.has-sub.active > a::after,
#cssmenu > ul > li.has-sub:hover > a {
  border-top-color: #ffffff;
}
#cssmenu ul ul {
  position: absolute;
  left: -9999px;
  top: 60px;
  z-index: 9999;
  padding-top: 6px;
  font-size: 10px;
  opacity: 0;
  -webkit-transition: top 0.2s ease, opacity 0.2s ease-in;
  -moz-transition: top 0.2s ease, opacity 0.2s ease-in;
  -ms-transition: top 0.2s ease, opacity 0.2s ease-in;
  -o-transition: top 0.2s ease, opacity 0.2s ease-in;
  transition: top 0.2s ease, opacity 0.2s ease-in;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu > ul > li > ul::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-bottom-color: #ffffff;
  top: -4px;
  left: 20px;
}
#cssmenu.align-right > ul > li > ul::after {
  left: auto;
  right: 20px;
}
#cssmenu ul ul ul::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-right-color: #ffffff;
  top: 11px;
  left: -4px;
}
#cssmenu.align-right ul ul ul::after {
  border-right-color: transparent;
  border-left-color: #ffffff;
  left: auto;
  right: -4px;
}
#cssmenu > ul > li > ul {
  top: 120px;
}
#cssmenu > ul > li:hover > ul {
  top: 49px;
  left: 0;
  opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
  left: auto;
  right: 0;
}
#cssmenu ul ul ul {
  padding-top: 0;
  padding-left: 6px;
}
#cssmenu.align-right ul ul ul {
  padding-right: 6px;
}
#cssmenu ul ul > li:hover > ul {
  left: 140px;
  top: 0;
  opacity: 1;
}
#cssmenu.align-right ul ul > li:hover > ul {
  left: auto;
  right: 100%;
  opacity: 1;
}
#cssmenu ul ul li a {
  text-decoration: none;
  font-weight: 400;
  padding: 11px 25px;
  width: 140px;
  color: #a19393;
  background: #ffffff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.1), -1px 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
  color: #ffffff;
}
#cssmenu ul ul li:first-child > a {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
#cssmenu ul ul li:last-child > a {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
#cssmenu > ul > li > ul::after {
  position: absolute;
  display: block;
}
#cssmenu ul ul li.has-sub > a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-left-color: #a19393;
  right: 17px;
  top: 14px;
  top: 12.5px;
}
#cssmenu.align-right ul ul li.has-sub > a::after {
  border-left-color: transparent;
  border-right-color: #a19393;
  right: auto;
  left: 17px;
}
#cssmenu ul ul li.has-sub.active > a::after,
#cssmenu ul ul li.has-sub:hover > a::after {
  border-left-color: #ffffff;
}
#cssmenu.align-right ul ul li.has-sub.active > a::after,
#cssmenu.align-right ul ul li.has-sub:hover > a::after {
  border-right-color: #ffffff;
  border-left-color: transparent;
}
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    background: #ffffff;
  }
  #cssmenu > ul {
    display: none;
  }
  #cssmenu > ul.open {
    display: block;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  #cssmenu.align-right > ul {
    float: none;
  }
  #cssmenu.align-center > ul {
    text-align: left;
  }
  #cssmenu > ul > li,
  #cssmenu.align-right > ul > li {
    float: none;
    display: block;
  }
  #cssmenu > ul > li > a {
    padding: 18px 25px 18px 25px;
    border-right: 0;
  }
  #cssmenu > ul > li:hover > a,
  #cssmenu > ul > li.active > a {
    background: rgba(0, 0, 0, 0.1);
  }
  #cssmenu #menu-button {
    display: block;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    color: #a19393;
    padding: 18px 25px 18px 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: url('bg.png');
    cursor: pointer;
  }
  #cssmenu ul ul,
  #cssmenu ul li:hover > ul,
  #cssmenu > ul > li > ul,
  #cssmenu ul ul ul,
  #cssmenu ul ul li:hover > ul,
  #cssmenu.align-right ul ul,
  #cssmenu.align-right ul li:hover > ul,
  #cssmenu.align-right > ul > li > ul,
  #cssmenu.align-right ul ul ul,
  #cssmenu.align-right ul ul li:hover > ul {
    left: 0;
    right: auto;
    top: auto;
    opacity: 1;
    width: 100%;
    padding: 0;
    position: relative;
    text-align: left;
  }
  #cssmenu ul ul li {
    width: 100%;
  }
  #cssmenu ul ul li a {
    width: 100%;
    box-shadow: none;
    padding-left: 35px;
  }
  #cssmenu ul ul ul li a {
    padding-left: 45px;
  }
  #cssmenu ul ul li:first-child > a,
  #cssmenu ul ul li:last-child > a {
    border-radius: 0;
  }
  #cssmenu #menu-button::after {
    display: block;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #a19393;
    border-bottom: 2px solid #a19393;
    right: 25px;
    top: 18px;
  }
  #cssmenu #menu-button::before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #a19393;
    right: 25px;
    top: 28px;
  }
  #cssmenu > ul > li.has-sub > a::after,
  #cssmenu ul ul li.has-sub > a::after {
    display: none;
  }
}

It generates into a drop-down menu that uses jQuery as part of the effects (simple fade drop-down); any help is greatly appreciated. Java is not my forte

Hi,
I hav linked external js (ext1.js) to my app.html page.
Now in the ext1.js, I have a function like
[CODE] function onwindowload(){
//Access HTML element and append external js 2 (ext2.js) here
}[CODE]
//Access HTML element and append external js 2 (ext2.js) here--->I donno how to add external JS here.
Even if i add the external JS here, the JS uses document.write fn. which replaces entire page. Please suggest a solution

Hi guys! This is the website -> http://toplistmovies.blogspot.com/.

Im having trouble about the posts below the slides.

In firefox i see this ->
http://s16.postimage.org/v4nmny4ar/fasdfalsdjf.png

In Chrome i see this ->
http://s16.postimage.org/uges505kz/fasdfasdfasdf.png

This is the code ->
Code:

<div class='Image thumb' style='overflow:hidden;'>

<b:if cond='data:post.isFirstPost'> 
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var default_thumbnail="http://3.bp.blogspot.com/-WxjumWhIM5E/TwKvb6jtXoI/AAAAAAAAEG0/hBQHJnIO5eE/s000/default.png";

if(image_url == "") image_url= default_thumbnail;
var nova = image_url.replace('s72-c', 's400', image_url);
image_tag='<img src="'+nova+'" style="width:260px;" alt="'+post_title+'"/>';

if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
</b:if>
<a expr:href='data:post.url'><script>
document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));</script>
</a>
</div>



<div class='information'> 
<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title'>
</div>
</div>
</div>

<div class='postBoxMeta'>
<div class='postDate'>
<script type='text/javascript'>
var timestamp = &quot;<data:post.dateHeader/>&quot;;
if (timestamp != '') {
var timesplit = timestamp.split(&quot;,&quot;);
var date_yyyy = timesplit[2];
var timesplit = timesplit[1].split(&quot; &quot;);
var data = timesplit[2];
var date_dd = data.replace("de", "", timesplit[2]);
var date_mmm = timesplit[1].substring(0, 3);
}
</script>
<span class='day'><script type='text/javascript'>document.write(date_dd);</script>Dia</span> <br/>
<span class='month'><script type='text/javascript'>document.write(date_mmm);</script></span>
</div>

Hi,

I'm new to JavaScript and I'm having a bit of trouble understanding something that seems relatively simple. When I make changes to CSS in JavaScript using '.style' I'm changing the attribute values of inline CSS. Can I use JavaScript to change the attribute values of rules in an external CSS file? I have no CSS in my html and would like to know if I can grab the values of attributes in an external CSS file using JavaScript.

Thank you.

Dear Forum,

I have a website of quite a few pages which also has a style sheet switcher so the user can select their own customised graphics and layout (css file)

these css files load in the graphics but only when the call is clicked... even if the page has already been opened for seconds or minutes when the graphics could have been loaded in for an instant switch.

so i implemented the following code:

Code:

<SCRIPT language="javascript">

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

</SCRIPT>


<body onLoad="MM_preloadImages('/corporate/heading.png','/creative/heading.png','/earth/heading.png','/under-the-sea/heading.png','/space-and-stars/heading.png','/classical/heading.png','/corporate/document.jpg','/space-and-stars/document.png','/creative/document.jpg','/earth/background.jpg','/under-the-sea/background.jpg','/classical/document.png','/classical/background.jpg','/under-the-sea/document.png','/corporate/home-graphics.png','/earth/content.jpg','/earth/footer.jpg','/earth/home-graphics.png','/under-the-sea/home-graphics.png','/creative/home-graphics.png','/space-and-stars/background.jpg','');">

it works fantastically - you open the page and as long as it takes to notice where you can click the styles is the same amount of time it takes to have the styles cached for the styles switch immediately and effortlessly.

however, the site has grown and is now quite a number of pages with the above in each html file. ive just added a "creative 2" style, which has caused the above to need updating........ the maintenance of this code is inefficient to edit each page.



would someone be able to point or show me how to, in principle:

Code:

<body onLoad="MM_preloadImages('/styles-code.js);">



styles-code.js?? page:

'/corporate/heading.png',
'/creative/heading.png',
'/earth/heading.png',
'/sea/heading.png',
'/classical/heading.png',

'/corporate/background.jpg',
'/creative/background.jpg',
'/earth/background.jpg',
'/sea/background.jpg',
'/classical/background.jpg',

etc

and have 1 page of this code called in by all pages in an easy to see and edit list?


would really appreciate guidance with this,

Hey all,

I'm fairly new to JavaScript. I learned PHP and now I'm creating a user registration and login system for an application I'm making and I decided I wanted to give JS a try.

I'm trying to make a form validation function that will be called when I press the submit button on the form but I want to use an external js file to store all my custom functions.

I have the OnClick event in the button with the call to my function inside of that. But where and how on the page to I reference my external file so that the button can call the function?

Thanks guys!

hi , how to load external page into div without template . Example :
I have external page using CSS & html :
<div id="header"></div>
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
<div id="sidebar"></div>
<div id="sidebar1"></div>
<div id="footer"></div>
NOTE : all javascript code load external page with all template code into div ! how to load ONLY content2 into DIV .
thanks

I've been playing with this workarouns for literally years, but I'm getting fed up with it. Can anyone here suggest a better way of dealing with the following conundrum - or at least clarify why it occurs?

When I have an external stylesheet I can't access the properties assigned therein.

I'll give an example - HTML/CSS/JS are all inseperate files - but everything is called into the HTML as you can see.

HTML:
Code:

<head>
	<script type="text/javascript" src="js.js"></script>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box" onclick="showWidth()"></div>
<body>

CSS (style.css)
Code:

#box {
 width: 200px;
}

Javascript (js.js)
Code:

function showWidth(){
	var box = document.getElementById('box');
	alert(box.style.width);
}

Now the alert fired by showWidth() is empty - meaning that javascript can't see the width of the div element 'box'

Now, if I assign width as part of the style attribute of the div javascript thus:

HTML:
Code:

<head>
	<script type="text/javascript" src="js.js"></script>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box" onclick="showWidth()" style="width: 200px;"></div>
<body>

javascript can see this and the alert fired by showWidth() shows '200px'.


So, I have two questions:

1. Why?

2. Is there a way of accessing these external style elements without having to define styles inline all the time?


Cheers!
Mike

Hello, I'm sorry if this has been asked before but I've been googling and looking in reference books for the last couple of days and just haven't been able to find an answer.
I'm new to javascript and have just completed my first fully working script to crossfade images and have clickable links to go to a specific image, the code works perfectly when the code is inside of the html document with the elements but when you remove the javascript and put it in a seperate file its unable to get the value of the elements from the html.
Is there a way to do this, give the document a alternative src to look in for the elements or something?
An example below.
Javascript snipit
[CODE]
imageId = "mainImage";
image = window.document.getElementById(imageId);
alert(image);
[CODE]
image returns null. what I want it to return is the value fro the HTMl document that this file is included in.
[CODE]
<script type="text/javascript" src="fadeFunctions.js">
</script>
</head>
<body>
<div id="imgHolder" style="position: absolute; top: 200px;">
<div id="topImage" style="position: absolute; top: 0px; left: 0px; z-index: 100;"><img id="mainImg" src="1.png" /></div>
[CODE]

Thanks for any help or suggestions that you can give.

<body>
<script type="text/javascript" src="/khk.php?klub=khk&user=w"></script>

This script works fine, but I get a error:

line: 2
character: 1
error: character illegal
code: 0
url ....

Can anybody help??

Hello everybody,

I am currently working on displaying KML-values of ElementTags within my KML File. I already integrated the KML file as an overlay to my Google Map. But how am I able to parse the GGeoXml-object or how am I able to parse external ("http://www.myexample.org/polygons.kml" instead of just "polygons.kml") XML-files?

At the moment my code for loading the geoxml file looks like this:

Code:

function initialize(kmlFile) {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setUIToDefault();
        map.setCenter(new GLatLng(53.763325,-2.579041), 9);
             // ==== Create a KML Overlay ====
      if(!(kmlFile==null)){
          //check if it doesnt start with "http://"
        if(!(kmlFile.startsWith("http://"))){
        kmlFile = "http://" + kmlFile;
        $('kmllink').value = kmlFile;
        }
        var kml = new GGeoXml(kmlFile);
        //add Overlay to the googlemaps window
        map.addOverlay(kml);
        //$('subject').value = "SUBJECT";
        //$('content').value = "CONTENT";
        kml.gotoDefaultViewport(map);
        // Store center and zoom as properties of the object kml
        var centerKML= kml.getDefaultCenter();
        var zoomKML = map.getZoom();
        map.panTo(centerKML);
        map.setZoom(zoomKML);
        }
        
      }
      
}

And for parsing local XML-files this code works already:
Code:

function loadXML()
{
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else // Internet Explorer 5/6
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
    xhttp.open("GET","test.kml",false);
    xhttp.send("");
    //xmlDoc=xhttp.responseXML;
    xmlDoc = xhttp.responseXML;
    var placemark=xmlDoc.getElementsByTagName("Placemark");
    alert(placemark[0].getElementsByTagName("name")[0].childNodes[0].nodeValue);
    ajaxLoader("http://www.zki.dlr.de/mod/ext/fireModis/yesterday_en.kml","Placemark");
}

My question: Is there any way to integrate parsing external xml files in any of these two functions?

Best regards,
TsEMaNN

I'm trying to program/modify a simple countdown timer in a .js file. I was able to get it to work when I just loaded the index.html file straight from my computer to my browser but it failed once uploaded.

Here was the code for my index.html file.
Code:

<script type="text/javascript" src="countDown2.js"></script>
<body>

<b id='itgoeshere'>timer should go here</b>	

<script language ="Javascript">

window.onload = cd()

</script>
</body>

and here is my code for my .js file
Code:

var days
var hours
var mins
var secs;


function cd() {
	var today = new Date()
	var eventDate = new Date(2012,0,28,19,19,70)
	difference = eventDate.getTime() - today.getTime()
	days = Math.floor(difference / (1000*60*60*24))
 	difference  = difference - days * (1000*60*60*24)
 	hours = Math.floor(difference / (1000*60*60))
 	difference  = difference - hours * (1000*60*60)
 	mins = Math.floor(difference / (1000*60))
 	difference  = difference - mins * (1000*60)
 	secs = Math.floor(difference / (1000))
  	redo();
}

function dis(days,hours,mins,secs) {
 	var disp;
 	disp = days + ":" + hours + ":" + mins + ":" + secs;
 	return(disp);
}

function redo() {
 	secs--;
 	if(secs == -1) {
  		secs = 59;
  		mins--;
  		if (mins == -1) {
  			mins = 59;
  			hours--;
  			if (hours == -1){
  				hours = 23;
  				days--;}}
 	}
 	document.getElementById('itgoeshere').innerHTML = dis(days,hours,mins,secs); 

 	if((days == 0) && (hours == 0) && (mins == 0) && (secs == 0)) {
  		window.alert("Chris is running."); // change timeout message as required

 	} else {
 		cd = setTimeout("redo()",1000);
 	}
}

function init() {
  cd();
}
window.onload = init;

If I were to just cut and paste my .js code between my <script> it works but I was hopping to use it over again on multiple pages and having only one file to update.

Also I'm very new at programming in general so if you see an obvious mistake not related to my question please let me know.

If multiple pages reference the same external JS sheet, does the sheet reload every time you go to a new page or does it stay in memory?

Hi Guys,
I am tiring to create an external java script which is suppose to change a div background color when mouse over.
I have a simple Html file as:

Code:

<html>
<head>
<script type="text/javascript" src="MouseJs.js"></script>
<link rel="stylesheet" type="text/css" href="MouseCSS.css">
<title>Test Mouse Over</title>
</head>
<body>
 <div class="box" id="col">
 </div>  
</body>
</html>

and a CSS file as:
Code:

.box {
    width: 20%;
    height: 100px;
    background-color: #4D7530;
    float:left;
}

and finally I have a java script file as bellow:
Code:

window.onload = function()
{
    document.getElementById('col').onmouseover = function()
    {
        document.col.background-color: #FFFFFF;
    }
}

Could you please let me know what i am doing wrong here?
Thanks

hello,
I have designed a web site. but I want to protect my external javascript(and css also) from outside people, who steal my javascript.

can anyone tell me a method to hide external javascript(and css) from these knaves...!!!


thank you