Please Help, my header not rotate

Forum Moderators: open

Message Too Old, No Replies

Please Help, my header not rotate

My header use javascript not rotate for any browser

edwinteguh

3:38 pm on Dec 1, 2009 (gmt 0)

I'm newbie at here, also at javascript or php.
So, would you help me to solve my trouble.
My new website, SNIP (sorry' i'm afraid to make error to write full url), use javascript to make header rotate and scrolling image under header. when I'm open use mozilla, internet explorer and google chrome, scrolling image is okay, but my header not rotate. But if I open use Opera, my header is okay but scrolling image not displayed even. I don't know how to repair this problem because seem my javascript is okay.

Would you help me? Please apologize to my broken english.
Thank you very much for your advance.

[edited by: Fotiman at 4:18 pm (utc) on Dec. 1, 2009]
[edit reason] No URLs please. See TOS [webmasterworld.com] [/edit]

Fotiman

4:32 pm on Dec 1, 2009 (gmt 0)

Welcome to WebmasterWorld! Without seeing a code example, it's hard to tell what is wrong. However, I've found that this problem is usually caused by having multiple pieces of code that try to set the onload event handler. For example, you might have an event handler in your HTML like this:

And then another piece of code that does this:

window.onload = doThat;

In cases like this, only one of those methods will run. The solution would be to either combine both function calls like this:


window.onload = function () {
  doThis();
  doThat();
}

Or use event listeners instead of event handlers. With event listeners, you can attach as many listeners to an event as you want without them stepping on each other. For example, with jQuery:


$(document).ready(function () { 
  doThis();
});
// ... 
$(document).ready(function () { 
  doThat();
});

edwinteguh

10:50 pm on Dec 1, 2009 (gmt 0)

Thank you very much for your warm welcome and reply.
Would you help me for more again? Below is my code to header rotate image at header.php (my cms use wordpress)

Written at head section:
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var interval = 9.0; // delay between rotating images (in seconds)
var random_display = 1; // 0 = no, 1 = yes
interval *= 1000;

and under <body> written:

For my scrolling image my code is below, at index.php

//Specify the slider's width (in pixels)
var sliderwidth="980px"
//Specify the slider's height
var sliderheight="100px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=1
//configure background color:
slidebgcolor="#f8f8f8"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''

leftrightslide[0]='<img src="http://www.example.com/wp-content/themes/classipress/images/1.jpg" />'
leftrightslide='<img src="http://www.example.com/wp-content/themes/classipress/images/2.jpg" />'
leftrightslide[2]='<img src="http://www.example.com/wp-content/themes/classipress/images/3.jpg" />'
leftrightslide[3]='<img src="http://www.example.com/wp-content/themes/classipress/images/4.jpg" />'
leftrightslide[4]='<img src="http://www.example.com/wp-content/themes/classipress/images/5.jpg" />'
leftrightslide[5]='<img src="http://www.example.com/wp-content/themes/classipress/images/6.jpg" />'
leftrightslide[6]='<img src="http://www.example.com/wp-content/themes/classipress/images/7.jpg" />'
leftrightslide[7]='<img src="http://www.example.com/wp-content/themes/classipress/images/8.jpg" />'
leftrightslide[8]='<img src="http://www.example.com/wp-content/themes/classipress/images/9.jpg" />'

//Specify gap between each image (use HTML):
var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=2

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all��document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}

if (iedom��document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
-->
</script>
</div>

I'm not found code like yours, I don't know what I must to do.
Thank you very much.

[1][edited by: Fotiman at 2:03 pm (utc) on Dec. 2, 2009]
[edit reason] Examplified URLs [/edit]

Fotiman

2:07 pm on Dec 2, 2009 (gmt 0)

The problem appears to be exactly what I described. You defined an onload handler on the body tag:

But then you also have code that defines window.onload:

window.onload=fillup

So try this.
1. Remove the onload handler from your body tag. Your body tag will then just look like this:
<body>

2. Find this line of code:
window.onload=fillup
And change it to this:


window.onload = function () {
  rotateImage('rImage');
  fillup();
};

That should solve your problem.

edwinteguh

3:41 pm on Dec 2, 2009 (gmt 0)

Dear Sir,.

Thank you very much for your advice.
You genious. Yes...now my site works with properly. Perfect.
Thank you very much for your kindness.

Best regards,
Edwin