PDA

View Full Version : Cross Browser Marquee II --- Horizontal?



andrewpike2000
12-29-2005, 07:10 PM
RE: http://www.dynamicdrive.com/dynamicindex2/cmarquee2.htm

I am looking to implement the "Cross Browser Marquee II" script into a dynamic webpage. I have manually reconfigured the script to scroll horizontally, but the content within the DIV (a series of images) is "wrapping" to the next line of the scroller and becomes invisible to the visitor - even though there are no breaks in the string of code to be displayed. I am guessing this has something to do with "overflow" or just the fact that the script was meant to handle up & down content as opposed to side-to-side content. What can I do to tweak this script and make it work similar to the original "Cross Browser Marquee" (horizontal scrolling) but still using the content expressed in a seperate DIV??? I need this so that my PHP variables (expressed on the fly) can generate the content.

Sample Page: http://waynedennon.com/v3/show.php?s=121&p=13.jpg

Any help or suggestions for this fix would be greatly appreciated. Thank you, in advance.

jscheuer1
12-30-2005, 07:31 AM
I saw no attempt to use any marquee script on the page that the link you provided brought up in my browser. I can give you a few tips, if you are going for a horizontal marquee, use no <p>, <div>. <br> or any other block level tags in the content. Replace the containing division for the content with a <span> tag followed by a <nobr> tag:


<span><nobr> content without block level tags goes or will be inserted here </nobr></span>

These measures may not be sufficient but, they will be a start.

andrewpike2000
12-30-2005, 03:21 PM
Script: Cross Browser Marquee II
URL: http://www.dynamicdrive.com/dynamicindex2/cmarquee2.htm

Sorry, John. You must have visited the page while I was trying to tweak it... it's available for viewing now: http://waynedennon.com/v3/show.php?s=121&p=13.jpg

Your suggestion fixed the issue I was having with content breaking to the next line. Thanks.

Can the content of the scroll be set to be continually scrolled in a loop, without a blank space in the scroll content? As you know, when the srolled content reaches it's end, there is a blank space that srolls behind it until all of the scroll content has passed. Then it reloads.

jscheuer1
12-30-2005, 04:33 PM
Well, the key to having a continuous scrolling feature is to create two identical mobile elements that follow each other. As soon as one scrolls out of view, it is repositioned, offscreen, to follow the one that is currently visible. To that end, using your version of this script, you could put this directly after the content area:


<span id="vmarquee2" style="position: absolute; width: 98%;"></span>

Then for the initialization function you could do this:


function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee2=document.getElementById("vmarquee2")
cross_marquee.style.left=0
marqueewidth=document.getElementById("marqueecontainer").offsetWidth
actualwidth=cross_marquee.offsetWidth
cross_marquee2.style.left=actualwidth+4+'px'
cross_marquee2.innerHTML=cross_marquee.innerHTML
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.width=marqueewidth+"px"
cross_marquee.style.overflowX="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

and for the scrollmarquee function:


function scrollmarquee(){
if (parseInt(cross_marquee.style.left)<(actualwidth*(-1)+4))
cross_marquee.style.left=(parseInt(cross_marquee2.style.left)+actualwidth+4)+"px"
if (parseInt(cross_marquee2.style.left)<(actualwidth*(-1)+4))
cross_marquee2.style.left=(parseInt(cross_marquee.style.left)+actualwidth+4)+"px"
cross_marquee2.style.left=parseInt(cross_marquee2.style.left)-copyspeed+"px"
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
}

jscheuer1
12-30-2005, 05:19 PM
There are a few more things that should be done to make the implementation cross browser. For the initialization function:


function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee2=document.getElementById("vmarquee2")
cross_marquee.style.left=0
marqueewidth=document.getElementById("marqueecontainer").offsetWidth
actualwidth=cross_marquee.firstChild.offsetWidth
cross_marquee2.style.left=actualwidth+4+'px'
cross_marquee2.innerHTML=cross_marquee.innerHTML
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

Once this is done, we need to wrap everything in an additional div with overflow set to hidden and assure that the nobr tag follows immediately after (without even a new line) the span tag:


<div style="overflow:hidden"><div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">

<span id="vmarquee" style="position: absolute; width: 98%;"><nobr>
<!--SCROLL CONTENT HERE-->

Don't forget to close the added div tag:


</nobr>
</span><span id="vmarquee2" style="position: absolute; width: 98%;"></span></div>
</div>

Now the style needs just a little tweaking and we are done (additions red):


<style type="text/css">

#marqueecontainer{
position: relative;
width: 500px; /*marquee width */
height: 120px; /*marquee width */
background-color: black;
overflow: hidden;
border: 0px solid orange;
padding: 2px;
padding-left: 4px;
text-align:left;
}

#marqueecontainer img {
border-width:2px;
border-style:solid;
}

</style>

lizlee00
02-04-2006, 11:40 PM
Hello,

I too am trying to make the marquee II script work horizontally. I have tried to follow what you have done here, but I have run into a problem. At first it seems to scroll just fine, but once it is about to get to the end of one set, it wraps around- but much faster than the previous set and it overlaps. Here is an example of what I am talking about: http://www.lizleeweb.com/portfoliotest.htm.

I am attempting to have the images scroll through continuously in a loop- with no breaks and no overlaps. Any help you can give would be much appreciated! And thank you John for your previous posts, they helped me to get at least this far.

Thanks!
Liz Lee

jscheuer1
02-05-2006, 04:13 AM
I had a little trouble following it myself and I wrote it! But, it wasn't too bad. Here is a working demo:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

#marqueecontainer{
position: relative;
width: 500px; /*marquee width */
height: 20px; /*marquee height */
background-color:lightyellow;
color:black;
overflow: hidden;
border: 1px solid orange;
padding: 2px;
padding-left: 4px;
text-align:left;
}

#marqueecontainer img {
border-width:2px;
border-style:solid;
}

</style>

<script type="text/javascript">

/***********************************************
* Cross browser Marquee II- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=2 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

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

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.left)<(actualwidth*(-1)+4))
cross_marquee.style.left=(parseInt(cross_marquee2.style.left)+actualwidth+4)+"px"
if (parseInt(cross_marquee2.style.left)<(actualwidth*(-1)+4))
cross_marquee2.style.left=(parseInt(cross_marquee.style.left)+actualwidth+4)+"px"
cross_marquee2.style.left=parseInt(cross_marquee2.style.left)-copyspeed+"px"
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee2=document.getElementById("vmarquee2")
cross_marquee.style.left=0
marqueewidth=document.getElementById("marqueecontainer").offsetWidth
actualwidth=cross_marquee.firstChild.offsetWidth
cross_marquee2.style.left=actualwidth+4+'px'
cross_marquee2.innerHTML=cross_marquee.innerHTML
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee


</script>
</head>
<body>
<div style="overflow:hidden">
<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"> <span id="vmarquee" style="position: absolute; width: 98%;"><nobr>
<!--SCROLL CONTENT HERE-->

<h4 style="display:inline;">Your scroller contents:</h4>&nbsp;&nbsp;
<b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">Iframe &amp;
Ajax category added</a></b>&nbsp;&nbsp;
The Dynamic Content category has just been branched out with a new
<a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">sub category</a>
to better organize its scripts.<b>&nbsp;&nbsp;<a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></b>&nbsp;
We're excited to introduce our latest web tool- Gradient Image Maker!&nbsp;&nbsp;<b><a href="http://www.dynamicdrive.com/forums/">DD Help Forum</a></b>
Check out our new forums for help on our scripts and coding in general.&nbsp;&nbsp;<b><a href="http://www.dynamicdrive.com/notice.htm">Terms of
Usage update</a></b>
Please review our updated usage terms regarding putting our scripts in an
external .js file.&nbsp;&nbsp;


</nobr> </span><span id="vmarquee2" style="position: absolute; width: 98%;"></span></div> </div>
</body>
</html>

lizlee00
02-05-2006, 04:28 AM
Thanks a million! It feels so good to finally have everything working!!

bobjimwilly
05-30-2007, 10:40 AM
hi. I know this post is old but if anyone is still interested in helping me, I was wondering does anyone know of a quick fix to make this work properly in firefox and opera :confused:

thanks.

Dark-Wolf
02-20-2008, 08:17 PM
Hi!
I have successfully used this javascript to create a block with mkportal on my site.
Work perfectly with all browser except opera.
I have changed code from:

if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
to:

// if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){
// cross_marquee.style.height=marqueeheight+"px"
// cross_marquee.style.overflow="scroll"
// return
// }
and now work perfectly also with opera.
You can test in my site: http://darkwolf.altervista.org :)
PS sorry for my bad english :p

sotherls
05-02-2008, 02:23 PM
Would like to know if it is possible to use an external text file as the scroll content rather than editing the source file?

sotherls
05-02-2008, 02:25 PM
Is it possible to make this work with an external text file rather than editing the source page?

jscheuer1
05-02-2008, 02:42 PM
All scripts can be made external. Here are some guidelines:


Use a text editor to save the script, call it 'file_name.js' where 'file_name' can be any valid file name of your choosing. Substitute the name of your external .js file for some.js in the below:


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

Common problems arise when:

1 ) The script file is not in the directory specified. In the above example it must be in the same directory as the page(s) that use it. Below, it can be in the scripts directory off of the root of a domain:


<script src="http://www.somedomain.com/scripts/some.js" type="text/javascript"></script>

2 ) Opening, closing and/or 'hiding' tags are left in the external file. This means that you must strip:
<script>
<!--and
//-->
</script>and any of their many variations from the beginning and end of the external file.

3 ) The external call (<script src="some.js" type="text/javascript"></script>) is not inserted into the page at the correct spot. The external call must be inserted at the same place on the page where the script was/would have been.

4 ) Paths to other files (if) used by the script are no longer valid due to its location. This is only a problem if the external script is kept in a different directory than the page it was working on when it was an internal script. To correct this, use absolute paths inside the script. Absolute path examples:


http://www.somedomain.com/images/button.gif

http://www.somedomain.com/~mysitename/index.html

5 ) Inappropriately combining two or more scripts into one external file. Usually external scripts can be combined if one knows enough about scripting to do so properly. Even then it is possible to overlook something.

A rule of thumb when testing is, if it won't work on the page, it won't work as an external file either.

One other thing, if this is a DD script or any script that requires the credit remain for legal use, include the credit in the on page call, ex:


<script src="some.js" type="text/javascript">
/***********************************************
* IFrame SSI script II- Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>

Make sure to retain all the 'decorations', as these include begin and end javascript comment delimiters, without which the script won't function.

There is also info here:

http://www.javascriptkit.com/javatutors/external.shtml

sotherls
05-02-2008, 04:04 PM
John, thanks for the quick reply.

I guess I didn't ask my question correctly. What I wanted to know is how to have the content of the scrolled message be contained in an external file.

I want to use this on a web page but don't want the admins to edit the actual web page (where the content currently lies) but to edit an external text file that they will have access to.

Make sense?

jscheuer1
05-02-2008, 05:13 PM
You can still do it as an external script, two external scripts, in fact if you really want to break it down to just the content, or not much more than the content in one of the files.

What script are you using?

sotherls
05-05-2008, 01:10 PM
John,

This is going into a master page.
The code I am using is
HEAD
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

#marqueecontainer{
position: relative;
width: 99%; /*marquee width */
height: 20px; /*marquee height */
background-color:lightyellow;
color:black;
overflow: hidden;
border: 1px solid orange;
padding: 2px;
padding-left: 4px;
text-align:left;
}

#marqueecontainer img {
border-width:2px;
border-style:solid;
}

</style>

<script type="text/javascript">

/***********************************************
* Cross browser Marquee II- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=2 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

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

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.left)<(actualwidth*(-1)+4))
cross_marquee.style.left=(parseInt(cross_marquee2.style.left)+actualwidth+4)+"px"
if (parseInt(cross_marquee2.style.left)<(actualwidth*(-1)+4))
cross_marquee2.style.left=(parseInt(cross_marquee.style.left)+actualwidth+4)+"px"
cross_marquee2.style.left=parseInt(cross_marquee2.style.left)-copyspeed+"px"
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee2=document.getElementById("vmarquee2")
cross_marquee.style.left=0
marqueewidth=document.getElementById("marqueecontainer").offsetWidth
actualwidth=cross_marquee.firstChild.offsetWidth
cross_marquee2.style.left=actualwidth+4+'px'
cross_marquee2.innerHTML=cross_marquee.innerHTML
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee
</script>

......
In the BODY

<div style="overflow:hidden">
<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<span id="vmarquee" style="position: absolute; width: 98%;"><nobr>
<!--SCROLL CONTENT HERE-->

This is a test. // There is a scheduled outage 04/04/08. // HelpDesk is aware of the issue.//
</nobr> </span><span id="vmarquee2" style="position: absolute; width: 98%;"></span></div> </div>
.....

What I would like is to have the text under <!--SCROLL CONTENT HERE --> come from an external source file - "notes.txt".

Possible?

jscheuer1
05-05-2008, 02:27 PM
There are various ways. The simplest, if it is available to you would be a server side include. The two most popular server side languages that can do this are PHP and asp. There are others. Does your host support one?

The external file might need to have an extension other than .txt though.

xml can do this too, but is more complicated. Any of these methods aren't really much to do with this script. If you need to learn another language, which essentially you would need to if you don't know any of these, you should do so, at least the basics required for an include. Help for those languages is available in their respective sub-forums on this and other boards.

Unfortunately, javascript itself doesn't have a method for this. AJAX is the closest, but the timing of getting your content to the page in time for the script to use it properly is often difficult or impossible to achieve. This often is no problem on a local computer, but becomes one, once the page is live.

An external script can be made up that will contain the content and one or more methods (usually document.write) to write it to the page, but at that point, editing it would be at least as complex as editing the page itself, if not more so.

sotherls
05-05-2008, 02:52 PM
Ok, so I want to have a cross browser banner to scroll from right to left with it's contents coming from an external file using ASP.

jscheuer1
05-05-2008, 03:27 PM
Make up the content.asp page and use an asp include for it on the 'top' page which would also need to have the .asp extension. I'm not familiar with the asp include syntax, but it is simple. You would put it on the 'top' page right where the content would have been.

Here's a pretty basic explanation:

http://www.w3schools.com/asp/asp_incfiles.asp

In it the included files have .inc extensions, so they probably could have any extension. But the safest extension to use is one that the server will see as the desired mime-type, usually .asp or even .htm then if HTML tags are in the external file.

sotherls
05-06-2008, 11:41 AM
John,

Thank you! Thank you! Thank you!

You are a genius.... that worked.

If it was in my power I would say take the day off!

Scott

jvd
05-12-2008, 08:28 AM
How can I use RSS file/Ticker as external source file in this horizontal banner?

acn89
07-17-2008, 02:11 AM
I'm having the following problem, I can not fit the table with SELECT in PHP within my scroll.

Code:


<head>

<style type="text/css">

#marqueecontainer{
position: relative;
width: 100%; /*marquee width */
height: 200px; /*marquee height */
color:black;
overflow: hidden;
padding: 2px;
padding-left: 4px;
text-align:left;
}

#marqueecontainer img {
border-width:2px;
border-style:solid;
}

</style>

<script type="text/javascript">

/***********************************************
* Cross browser Marquee II- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=2 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

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

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.left)<(actualwidth*(-1)+4))
cross_marquee.style.left=(parseInt(cross_marquee2.style.left)+actualwidth+4)+"px"
if (parseInt(cross_marquee2.style.left)<(actualwidth*(-1)+4))
cross_marquee2.style.left=(parseInt(cross_marquee.style.left)+actualwidth+4)+"px"
cross_marquee2.style.left=parseInt(cross_marquee2.style.left)-copyspeed+"px"
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee2=document.getElementById("vmarquee2")
cross_marquee.style.left=0
marqueewidth=document.getElementById("marqueecontainer").offsetWidth
actualwidth=cross_marquee.firstChild.offsetWidth
cross_marquee2.style.left=actualwidth+4+'px'
cross_marquee2.innerHTML=cross_marquee.innerHTML
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee


</script>
</head>

<div style="overflow:hidden">
<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"> <span id="vmarquee" style="position: absolute; "><nobr>
<!--SCROLL CONTENT HERE-->

<? if ($layout['hpfeat_nb']) { ?>
<?=$featured_auctions_header;?>
<table width="100%" border="0" cellpadding="0" cellspacing="3" >
<?
$counter = 0;
for ($i=0; $i<$featured_columns; $i++) { ?>
<tr>
<?
for ($j=0; $j<$layout['hpfeat_nb']; $j++) {
$width = 100/$layout['hpfeat_nb'] . '%'; ?>
<td width="<?=$width;?>" align="center" valign="top" class="borderfeat">
<?
if (!empty($item_details[$counter]['name'])) {
$main_image = $feat_db->get_sql_field("SELECT media_url FROM " . DB_PREFIX . "auction_media WHERE
auction_id='" . $item_details[$counter]['auction_id'] . "' AND media_type=1 AND upload_in_progress=0 ORDER BY media_id ASC LIMIT 0,1", 'media_url');

$auction_link = process_link('auction_details', array('name' => $item_details[$counter]['name'], 'auction_id' => $item_details[$counter]['auction_id']));?>
<table width="100%" border="0" cellspacing="1" cellpadding="3">
<tr>
<td class="c1feat"><a style="color: #ffffff;" href="<?=$auction_link;?>">&raquo; <?=title_resize($item_details[$counter]['name']);?></a></td>
</tr>
<tr height="<?=$layout['hpfeat_width']+12;?>">
<td align="center"><a href="<?=$auction_link;?>"><img src="<? echo ((!empty($main_image)) ? 'thumbnail.php?pic=' . $main_image . '&w=' . $layout['hpfeat_width'] . '&sq=Y' : 'themes/' . $setts['default_theme'] . '/img/system/noimg.gif');?>" border="0" alt="<?=$item_details[$counter]['name'];?>"></a></td>
</tr>
<tr class="c2">
<td>
<b><?=MSG_START_BID;?>:</b> <? echo $feat_fees->display_amount($item_details[$counter]['start_price'], $item_details[$counter]['currency']);?> <br>
<b><?=MSG_CURRENT_BID;?>:</b> <? echo $feat_fees->display_amount($item_details[$counter]['max_bid'], $item_details[$counter]['currency']);?> <br>
<b><?=MSG_ENDS;?>:</b> <? echo show_date($item_details[$counter]['end_time']); ?>
</td>
</tr>
</table>
<? $counter++;
} ?></td>
<? } ?>
</tr>
<? } ?>
</table>
<div><img src="themes/<?=$setts['default_theme'];?>/img/pixel.gif" width="1" height="5"></div>
<? } ?>

</nobr> </span><span id="vmarquee2" style="position: absolute; width: 98%;"></span></div> </div>