PDA

View Full Version : Resolved Navigation Problem-Cross Browser Marqueell times out before all content is scrolled?



printman55
08-08-2012, 09:21 PM
1) Script Title: Cross Browser marquee II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/cmarquee2.htm

3) Describe problem: Scroll stops before scrolling all content and then reopens in bottom of scroll window. Is it possible to make the scroll continuous without the breaks? Thanks

jscheuer1
08-08-2012, 09:55 PM
http://home.comcast.net/~jscheuer1/side/marquee.htm

Use your browser's "View Source" to get the code.

printman55
08-09-2012, 11:55 AM
John,
I tried the continuous scroll code in my existing page with not much success:
http://www..com/index-new-scroll-test-8-9-12.htm
here is the way it was before:
http://www..com/index-old-version8-9-12.htm
Please take a look.
Thanks!

jscheuer1
08-09-2012, 12:30 PM
Take the old script off the page, it's causing an error. Also, your marqueecontent has a backspace character (hex 09) in it. That's breaking the new script. It might also have been why your last marquee was so jumpy. Had you put that in intentionally to try to get rid of the gap? In any case it has to come out. Try this (same code with the backspace removed):


var marqueecontent='<h3 align="center">Financial News</h3><script type="text/javascript"src="http://www.freshcontent.net/financial_news_feed.php"><\/script>Free content by <a href="http://www.freshcontent.net/directory/news/financial_news.html">Fresh Content.net</a><h3 align="center"><img src="Images/shim.gif" width="25" height="25"></h3> <h3 align="center">Join us at Bay Hill!</h3><p align="center"><strong>October 18-19, 2012<br><br>EWING<br>COMMUNITY BANKERS<br>CONFERENCE</strong><br><br><img src="Images/bay-hill-club-220-w.jpg" width="220" height="127"></p><h3 align="center"><img src="Images/shim.gif" width="25" height="10"></h3>'

But now I see that you have a script in there too. That may or may not be a problem. We shall see. At the very least it needs its closing slash escaped. I've added that in the above as well.

printman55
08-09-2012, 01:16 PM
Thanks, John.
Made the changes, much better still not perfect. Don't know what is causing the white background.
http://www..com/index-new-scroll-test-8-9-12.htm

jscheuer1
08-09-2012, 03:06 PM
It's in the script. Near the end get rid of the highlighted in this section:


if (iedom||document.layers){
with (document){
if (iedom){
write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:0px;width:100%;">')
write('</div><div id="iemarquee2" style="position:absolute;left:0px;top:0px;width:100%;z-index:100;background:white;">')
write('</div></div>')

}

Or, to be on the safe side, change it to the parent element's background color - #707070:


if (iedom||document.layers){
with (document){
if (iedom){
write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:0px;width:100%;">')
write('</div><div id="iemarquee2" style="position:absolute;left:0px;top:0px;width:100%;z-index:100;background:#707070;">')
write('</div></div>')

}

printman55
08-09-2012, 04:19 PM
That got rid of the white background, Thanks!
Now if you could get the javascript news feed to work as that was one of the main reasons for having the scroll.

jscheuer1
08-09-2012, 05:50 PM
Use this customized version of the script:


<script type="text/javascript">
/*
Cross browser Marquee II- Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and TOS, visit http://www.dynamicdrive.com
Modified by jscheuer1 for continuous content. Credit MUST stay intact for use
*/

//Specify the marquee's width (in pixels)
var marqueewidth="240px"
//Specify the marquee's height
var marqueeheight="700px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=1
//Specify initial pause before scrolling in milliseconds
var initPause=1000
//Specify start with Full(1)or Empty(0) Marquee
var full=1
//Pause marquee onMousever (0=no. 1=yes)?
var pauseit=1
//Specify Break characters for IE as the two iterations
//of the marquee, if text, will be too close together in IE
var iebreak='<p></p>'

//Specify the marquee's content
//Keep all content on ONE line, and backslash any single quotations (ie: that\'s great):

var marqueecontent='<h3 align="center">Financial News</h3><div class="feeddest"></div>Free content by <a href="http://www.freshcontent.net/directory/news/financial_news.html">Fresh Content.net</a><h3 align="center"><img src="Images/shim.gif" width="25" height="20"></h3><h3 align="center">Join us at Bay Hill!</h3><p align="center"><strong>October 18-19, 2012<br><br>EWING<br>COMMUNITY BANKERS<br>CONFERENCE</strong><br><br><img src="Images/bay-hill-club-220-w.jpg" width="220" height="127"></p><br>'



////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var iedom=document.all||document.getElementById
var actualheight=''
var cross_marquee, cross_marquee2, ns_marquee

function populate(){
if (iedom){
var lb=document.getElementById&&!document.all? '' : iebreak
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee2=document.getElementById? document.getElementById("iemarquee2") : document.all.iemarquee2
cross_marquee.style.top=(full==1)? '8px' : parseInt(marqueeheight)+8+"px"
cross_marquee2.innerHTML=cross_marquee.innerHTML=marqueecontent+lb
cross_marquee.getElementsByTagName('div')[0].appendChild(document.getElementById('tempfeed').cloneNode(true));
cross_marquee2.getElementsByTagName('div')[0].appendChild(document.getElementById('tempfeed').cloneNode(true));

actualheight=cross_marquee.offsetHeight
cross_marquee2.style.top=(parseInt(cross_marquee.style.top)+actualheight+8)+"px" //indicates following #1
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.top=parseInt(marqueeheight)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualheight=ns_marquee.document.height
}
setTimeout('lefttime=setInterval("scrollmarquee()",20)',initPause)
}
window.onload=populate

function scrollmarquee(){

if (iedom){
if (parseInt(cross_marquee.style.top)<(actualheight*(-1)+8))
cross_marquee.style.top=(parseInt(cross_marquee2.style.top)+actualheight+8)+"px"
if (parseInt(cross_marquee2.style.top)<(actualheight*(-1)+8))
cross_marquee2.style.top=(parseInt(cross_marquee.style.top)+actualheight+8)+"px"
cross_marquee2.style.top=parseInt(cross_marquee2.style.top)-copyspeed+"px"
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
}

else if (document.layers){
if (ns_marquee.top>(actualheight*(-1)+8))
ns_marquee.top-=copyspeed
else
ns_marquee.top=parseInt(marqueeheight)+8
}
}

if (iedom||document.layers){
with (document){
if (iedom){
write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:0px;width:100%;">')
write('</div><div id="iemarquee2" style="position:absolute;left:0px;top:0px;width:100%;z-index:100;background:#707070;">')
write('</div></div>')

}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee">')
write('<layer name="ns_marquee2" width='+marqueewidth+' height='+marqueeheight+' left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
}
}
</script>

And at the end of the page add the highlighted as shown:


. . . nd Graphics and WebSite Maintenance by RSP Web Site
Design, Charlotte, NC</a><br>


</td>
</tr>
</table>
<div style="display:none;"><div id="tempfeed"><script type="text/javascript"src="http://www.freshcontent.net/financial_news_feed.php"></script></div></div>

</body>
</html>

printman55
08-09-2012, 06:06 PM
John,
That is so great, thank you!!!

printman55
08-13-2012, 10:35 PM
John, A new problem has emerged with IE8 on XP sp3.
http://www./index-new-scroll-test-8-13-12.htm
In IE8 xp you get a "tab has been recovered" and then a page pops up saying unable to open page.
Would you please take a look?
Thanks

jscheuer1
08-13-2012, 11:36 PM
In the updated version of the script change:


cross_marquee.getElementsByTagName('div')[0].appendChild(document.getElementById('tempfeed').cloneNode(true));
cross_marquee2.getElementsByTagName('div')[0].appendChild(document.getElementById('tempfeed').cloneNode(true));

to:


cross_marquee.getElementsByTagName('div')[0].innerHTML = document.getElementById('tempfeed').innerHTML;
cross_marquee2.getElementsByTagName('div')[0].innerHTML = document.getElementById('tempfeed').innerHTML;

Important Note: I had to close the browser and then using Control Panel open up Internet Options and delete the Temporary Internet Files and the History before IE 8 would see the changes.

I mention this because usually just clearing the cache and/or refreshing the page is enough. But apparently, once IE 8 decides it can't load a page in a case like this, it has to be completely flushed from the browser before it will even try again.

printman55
08-14-2012, 01:13 AM
Thanks again for the quick solution!!! Posted the change and works great!

printman55
08-17-2012, 07:58 PM
John,
The scroll is working well. But something is causing the navigation drop down not to work. If you click on one of the tabs without a drop down those page's navigation works OK. Any thoughts?
http://www.allenewing.com/index-new-scroll-test-8-13-12.htm

jscheuer1
08-26-2012, 01:40 PM
Use this version:


<script type="text/javascript">
/*
Cross browser Marquee II- Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and TOS, visit http://www.dynamicdrive.com
Modified by jscheuer1 for continuous content. Credit MUST stay intact for use
Custom modifications 8/26/12 for allenewing.com by jscheuer1
*/

//Specify the marquee's width (in pixels)
var marqueewidth="240px"
//Specify the marquee's height
var marqueeheight="700px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=1
//Specify initial pause before scrolling in milliseconds
var initPause=1000
//Specify start with Full(1)or Empty(0) Marquee
var full=1
//Pause marquee onMousever (0=no. 1=yes)?
var pauseit=1
//Specify Break characters for IE as the two iterations
//of the marquee, if text, will be too close together in IE
var iebreak='<p></p>'

//Specify the marquee's content
//Keep all content on ONE line, and backslash any single quotations (ie: that\'s great):

var marqueecontent='<h3 align="center">Financial News</h3><div class="feeddest"></div>Free content by <a href="http://www.freshcontent.net/directory/news/financial_news.html">Fresh Content.net</a><h3 align="center"><img src="Images/shim.gif" width="25" height="20"></h3><h3 align="center">Join us at Bay Hill!</h3><p align="center"><strong>October 18-19, 2012<br><br>EWING<br>COMMUNITY BANKERS<br>CONFERENCE</strong><br><br><img src="Images/bay-hill-club-220-w.jpg" width="220" height="127"></p><br><h3 align="center"><img src="Images/shim.gif" width="25" height="10"></h3><h3>Review of the Florida Bank and Thrift Industry Update : 1st Qtr. 2012</h3><p>Since 1990, Ewing has published an annual review of the Florida banking industry. This research is distributed to Florida’s leading bankers at the Florida Bankers Association’s Annual Convention, and to fund managers and other individuals and institutions that follow the industry. Our most recent report analyzes the demographics of the State of Florida; deposit, loan and earnings growth of Florida based banks; statistics for Florida bank stocks and pricing ratios for announced Florida bank acquisitions.<a href="Florida-Banking-PDFs/Florida-Banking-Update-Q1-2012.pdf" target="_blank"> Please download our “Florida Bank and Thrift Industry Update : 1st Qtr. 2012” and have a look for yourself.</a></p><h3 align="center"><img src="Images/shim.gif" width="25" height="10"></h3>'
////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var iedom=document.all||document.getElementById
var actualheight=''
var cross_marquee, cross_marquee2, ns_marquee

function populate(){
if (iedom){
var lb=document.getElementById&&!document.all? '' : iebreak
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee2=document.getElementById? document.getElementById("iemarquee2") : document.all.iemarquee2
cross_marquee.style.top=(full==1)? '8px' : parseInt(marqueeheight)+8+"px"
cross_marquee2.innerHTML=cross_marquee.innerHTML=marqueecontent+lb
cross_marquee.getElementsByTagName('div')[0].innerHTML = document.getElementById('tempfeed').innerHTML;
cross_marquee2.getElementsByTagName('div')[0].innerHTML = document.getElementById('tempfeed').innerHTML;

actualheight=cross_marquee.offsetHeight
cross_marquee2.style.top=(parseInt(cross_marquee.style.top)+actualheight+8)+"px" //indicates following #1
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.top=parseInt(marqueeheight)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualheight=ns_marquee.document.height
}
setTimeout('lefttime=setInterval("scrollmarquee()",20)',initPause)
}
if (window.addEventListener){
window.addEventListener('load', populate, false);
}
else if (window.attachEvent){
window.attachEvent('onload', populate);
}

function scrollmarquee(){

if (iedom){
if (parseInt(cross_marquee.style.top)<(actualheight*(-1)+8))
cross_marquee.style.top=(parseInt(cross_marquee2.style.top)+actualheight+8)+"px"
if (parseInt(cross_marquee2.style.top)<(actualheight*(-1)+8))
cross_marquee2.style.top=(parseInt(cross_marquee.style.top)+actualheight+8)+"px"
cross_marquee2.style.top=parseInt(cross_marquee2.style.top)-copyspeed+"px"
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
}

else if (document.layers){
if (ns_marquee.top>(actualheight*(-1)+8))
ns_marquee.top-=copyspeed
else
ns_marquee.top=parseInt(marqueeheight)+8
}
}

if (iedom||document.layers){
with (document){
if (iedom){
write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:0px;width:100%;">')
write('</div><div id="iemarquee2" style="position:absolute;left:0px;top:0px;width:100%;z-index:49;background:#707070;">')
write('</div></div>')

}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee">')
write('<layer name="ns_marquee2" width='+marqueewidth+' height='+marqueeheight+' left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
}
}
</script>

printman55
08-27-2012, 01:11 PM
John,
The changes you made worked great!!
Many thanks!!