Page 1 of 3 123 LastLast
Results 1 to 10 of 22

Thread: Marquee Script

  1. #1
    Join Date
    Aug 2011
    Location
    Rep Of Ireland
    Posts
    126
    Thanks
    24
    Thanked 3 Times in 1 Post

    Default Marquee Script

    1) Script Title: Cross browser Marquee script-

    2) Script URL (on DD):

    3) Describe problem: No Problem. Just wondering if this script can drag an image across the screen?

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    Have you tried putting an <img> tag in the contents?
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Aug 2011
    Location
    Rep Of Ireland
    Posts
    126
    Thanks
    24
    Thanked 3 Times in 1 Post

    Default

    Quote Originally Posted by djr33 View Post
    Have you tried putting an <img> tag in the contents?
    Yes, I have now got it working in the main content area of the page. The image is a train with carriages moving across the screen. It is in .gif format thus everything else around the image has been removed by means of using a transparent image. Likewise the windows are transparent.

    What I seek to do now is have the train move across the header image in the banner by using the marquee. Can this be made to work?

    The banner code is as per the following:

    HTML Code:
    <div id="banner">
                <img src="album/hills.jpg" alt="Header Image" width="950"/>			
            </div>

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,998
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    12

    Default

    I think you've answered your own question. You've got it working in the content area so it will work in a header position too - all you've got to do is put it there (think absolute positioning and z-index in the CSS to keep it in the foreground).
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. #5
    Join Date
    Aug 2011
    Location
    Rep Of Ireland
    Posts
    126
    Thanks
    24
    Thanked 3 Times in 1 Post

    Default

    Quote Originally Posted by Beverleyh View Post
    I think you've answered your own question. You've got it working in the content area so it will work in a header position too - all you've got to do is put it there (think absolute positioning and z-index in the CSS to keep it in the foreground).
    Thanks for responding. I have tried this in some different ways but without success.

    The Marquee is controlled in the Dynamic Drive Script by the following:

    Code:
    var marqueewidth="600px"
    var marqueeheight="65px"
    var marqueespeed=2
    var marqueebgcolor=""
    var pauseit=1
    var marqueecontent='<img src="album/marquee.gif"/>'
    and its position on the page is a s follows:



    HTML Code:
    <div id="banner">
                <img src="album/hills.jpg" alt="Header Image" width="950"/>	
    
    			<script src="my_js/cross_marq.js" type="text/javascript">
    /*Cross browser Marquee script- (c) Dynamic Drive (www.dynamicdrive.com)
    For full source code, 100's more DHTML scripts, and Terms Of Use, visit http://www.dynamicdrive.com
    Credit MUST stay intact*/
    </script>
    </div>
    I am not getting where the positioning and the z-index is to be installed.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Do you mean something like this:

    http://www.dynamicdrive.com/dynamicindex4/flyimage.htm

    ?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,807
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #marquee {
     position:absolute;visibility:hidden;left:100px;top:100px;width:800px;height:100px;border:solid red 1px;
    }
    
    #marquee DIV {
     visibility:visible;
    }
    
    #marquee2 {
     position:absolute;left:100px;top:200px;width:100px;height:500px;border:solid red 1px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <div id="marquee" onmouseover="zxcMarquee('marquee',0);" onmouseout="zxcMarquee('marquee',-1);" >
     <div><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" width="100" /><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="image" width="100" /></div>
    </div>
    
    <div id="marquee2" onmouseover="zxcMarquee('marquee2',0);" onmouseout="zxcMarquee('marquee2',2);" >
     <div><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" width="100" /><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="image" width="100" /></div>
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Simple Marquee (09-November-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    function zxcMarquee(id,spd,mde){
     var o=zxcMarquee['zxc'+id],obj=document.getElementById(id),spd=typeof(spd)=='number'?spd:0;
     if (obj&&!o){
      var s=obj.getElementsByTagName('DIV')[0],clds=s.childNodes,lst=clds[clds.length-1],mde=mde=='top'?['top','offsetTop','offsetHeight']:['left','offsetLeft','offsetWidth'];
      if (lst.nodeType!=1){
       lst=lst.previousSibling;
      }
      obj.style.overflow='hidden';
      s.style.position='absolute';
      if (mde[0]=='left'){
       s.style.width='30000px';
      }
      o=zxcMarquee['zxc'+id]={
       mde:mde[0],
       s:s,
       sz:lst[mde[1]]+lst[mde[2]],
       lft:s[mde[1]],
       w:obj[mde[2]]
      }
     }
     if (o){
      o.lft+=spd;
      if ((spd>0&&o.lft>o.w)||(spd<0&&o.lft<-o.sz)){
       o.lft+=(o.w+o.sz)*(spd<0?1:-1);
      }
      o.s.style[o.mde]=o.lft+'px';
      clearTimeout(o.to);
      o.to=setTimeout(function(){ zxcMarquee(id,spd); },30);
     }
    }
    
    zxcMarquee('marquee',-1);
    zxcMarquee('marquee2',2,'top');
    
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    or maybe

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #marquee {
     position:absolute;visibility:hidden;left:20px;top:100px;width:800px;height:100px;border:solid red 1px;
    }
    
    #marquee DIV {
     visibility:visible;
    }
    
    #marquee2 {
     position:absolute;left:20px;top:300px;width:800px;height:100px;border:solid red 1px;
    }
    
    #marquee3 {
     position:absolute;left:850px;top:20px;width:100px;height:500px;border:solid red 1px;
    }
    
    #marquee4 {
     position:absolute;left:960px;top:20px;width:100px;height:500px;border:solid red 1px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <div id="marquee" onmouseover="zxcMarquee('marquee',0);" onmouseout="zxcMarquee('marquee',-1);" >
     <div><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" width="100" /><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="image" width="100" /></div>
    </div>
    
    <div id="marquee2" onmouseover="zxcMarquee('marquee2',0);" onmouseout="zxcMarquee('marquee2',-1);" >
     <div><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" width="100" /><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="image" width="100" /></div>
    </div>
    
    <div id="marquee3" onmouseover="zxcMarquee('marquee3',0);" onmouseout="zxcMarquee('marquee3',2);" >
     <div><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" width="100" /><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="image" width="100" /></div>
    </div>
    
    <div id="marquee4" onmouseover="zxcMarquee('marquee4',0);" onmouseout="zxcMarquee('marquee4',2);" >
     <div><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" width="100" /><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="image" width="100" /></div>
    </div>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Simple Marquee (09-November-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    function zxcMarquee(id,spd,mde,fill){
     var o=zxcMarquee['zxc'+id],obj=document.getElementById(id),spd=typeof(spd)=='number'?spd:0;
     if (obj&&!o){
      var s=obj.getElementsByTagName('DIV')[0],clds=s.childNodes,lst=clds[clds.length-1],mde=mde=='top'?['top','offsetTop','offsetHeight','left']:['left','offsetLeft','offsetWidth','top'],sz,fill=fill===true,nu,c,z0=1;
      if (lst.nodeType!=1){
       lst=lst.previousSibling;
      }
      obj.style.overflow='hidden';
      s.style.position='absolute';
      if (mde[0]=='left'){
       s.style.width='30000px';
      }
      sz=lst[mde[1]]+lst[mde[2]];
      if (fill){
       nu=Math.ceil(obj[mde[2]]/sz)+1;
       c=s.cloneNode(true);
       for (;z0<nu;z0++){
        c=c.cloneNode(true);
        c.style[mde[0]]=sz*z0+'px';
        c.style[mde[3]]='0px';
        s.appendChild(c);
       }
      }
      o=zxcMarquee['zxc'+id]={
       mde:mde[0],
       s:s,
       sz:sz,
       lft:s[mde[1]],
       w:obj[mde[2]],
       fill:fill
      }
     }
     if (o){
      o.lft+=spd;
      if ((spd>0&&o.lft>(o.fill?0:o.w))||(spd<0&&o.lft<-o.sz)){
       o.lft+=(o.fill?o.sz:(o.w+o.sz))*(spd<0?1:-1);
      }
      o.s.style[o.mde]=o.lft+'px';
      clearTimeout(o.to);
      o.to=setTimeout(function(){ zxcMarquee(id,spd); },30);
     }
    }
    
    zxcMarquee('marquee',-1);
    zxcMarquee('marquee2',1,'left',true);
    zxcMarquee('marquee3',2,'top');
    zxcMarquee('marquee4',-2,'top',true);
    
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    Last edited by vwphillips; 11-09-2012 at 10:44 AM. Reason: added vertical scroll + oops + continious
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  8. #8
    Join Date
    Aug 2011
    Location
    Rep Of Ireland
    Posts
    126
    Thanks
    24
    Thanked 3 Times in 1 Post

    Default

    Quote Originally Posted by jscheuer1 View Post
    I am seeking to have the Dynamic Drive marquee code drive the train in the header space just on top of the navigation at this position.

  9. #9
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    596
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    Is this more or less what you are trying to do:
    http://www.web-user.info/test/marquee/index.html


    If it is just grab my files-css, myStyle.css and the, cross_marq.js file
    Thanks,

    Bud

  10. #10
    Join Date
    Aug 2011
    Location
    Rep Of Ireland
    Posts
    126
    Thanks
    24
    Thanked 3 Times in 1 Post

    Default

    Quote Originally Posted by ajfmrf View Post
    Is this more or less what you are trying to do:
    http://www.web-user.info/test/marquee/index.html


    If it is just grab my files-css, myStyle.css and the, cross_marq.js file
    Yes, that is the result that I required. Have changed myStyle.css and index.html as required. When I click on cross_marq.js I get the following 404 page:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <title>404 - File or directory not found.</title>
    <style type="text/css">
    <!--
    body{margin:0;font-size:.7em;font-family:Verdana, Arial, Helvetica, sans-serif;background:#EEEEEE;}
    fieldset{padding:0 15px 10px 15px;} 
    h1{font-size:2.4em;margin:0;color:#FFF;}
    h2{font-size:1.7em;margin:0;color:#CC0000;} 
    h3{font-size:1.2em;margin:10px 0 0 0;color:#000000;} 
    #header{width:96%;margin:0 0 0 0;padding:6px 2% 6px 2%;font-family:"trebuchet MS", Verdana, sans-serif;color:#FFF;
    background-color:#555555;}
    #content{margin:0 0 0 2%;position:relative;}
    .content-container{background:#FFF;width:96%;margin-top:8px;padding:10px;position:relative;}
    -->
    </style>
    </head>
    <body>
    <div id="header"><h1>Server Error</h1></div>
    <div id="content">
     <div class="content-container"><fieldset>
      <h2>404 - File or directory not found.</h2>
      <h3>The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable.</h3>
     </fieldset></div>
    </div>
    </body>
    </html>
    I assume that some changes have been made to the cross_marq.js file but it will not present!

    Is it the system or am i doing something incorrectly?

Similar Threads

  1. Trouble Adding Image Script into Continuous Marquee Script - please help!
    By tronicuk in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 08-17-2008, 10:26 AM
  2. MARQUEE script problem... HELP!!!
    By oyster in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-25-2006, 08:54 AM
  3. rss marquee / scroller script?
    By vannquish in forum PHP
    Replies: 3
    Last Post: 07-21-2006, 07:55 AM
  4. Looking for a marquee script ...
    By diogenese58 in forum Graphics
    Replies: 4
    Last Post: 01-23-2006, 07:46 PM
  5. Cross browser marquee script
    By warrior11 in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 10-08-2005, 10:22 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •