54 users online (1 members and 53 guests)  


Page 1 of 2 1 2 Last
  Results 1 to 15 of 26

Related

  1. Images in a scroll bar    Forum: HTML Forum
    Replies: 2
  2. java scroll bar script?    Forum: Website Scripts Forum
    Replies: 1
  3. Java email script & W3C.org    Forum: Javascript Forum
    Replies: 5
  1. #1
    ravindarjobs's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    scroll images using java script

    hi friends
    i want a series of images to be scrolled from right to left in the same line.
    marquee is not correct for this.
    then how should i approch for this?

    Thank you

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: scroll images using java script

    Hi there ravindarjobs,

    you can see an example here...
    http://mysite.orange.co.uk/azygous/continuous_scroll.html
    ...and the code here...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>continuous scrolling images</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    body {
         background-image:url(images/bodyBg.jpg);
         background-color:#006;
     }
    #container {
         position:relative;
         width:424px;
         height:106px;
         overflow:hidden;
         border:5px double #000;
         background-color:#fff;
         margin:100px auto 0 auto;
     }
    #div1 {
         position:absolute;
         left:0px;
         top:0px;
         width:424px;
         height:106px;
     }
    #div2 {
         position:absolute;
         left:424px;
         top:0px;
         width:424px;
         height:106px;
     }
    img {
         border:1px solid #000;
         margin:2px;
         float:left;
     }
    </style>
    
    <script type="text/javascript">
      var m=0;
      var n=424;
      var speed=20;
    function scrollPics() {
         document.getElementById('div1').style.left=m+'px';
         document.getElementById('div2').style.left=n+'px';
       m--;
       n--;
    if(m==-424) {
       m=424;
     }
    if(n==-424) {
       n=424;
     }
    setTimeout('scrollPics()',speed);
     } 
    window.onload=function() {
       scrollPics();
     }
    </script>
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="div1">
    <img src="images/anim1.gif" alt="">
    <img src="images/anim2.gif" alt="">
    <img src="images/anim3.gif" alt="">
    <img src="images/anim4.gif" alt="">
    </div>
    
    <div id="div2">
    <img src="images/anim1.gif" alt="">
    <img src="images/anim2.gif" alt="">
    <img src="images/anim3.gif" alt="">
    <img src="images/anim4.gif" alt="">
    </div>
    
    </div>
    
    </body>
    </html>
    
    Last edited by HTML; 03-09-2012 at 10:30 AM.

  3. #3
    vinyl-junkie's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    721

    Re: scroll images using java script

    http://www.houseofscripts.com/scripts/javascripts/scrollpics.htm is one script. If you don't like that one, search Google for others.
    Last edited by HTML; 03-09-2012 at 10:31 AM.
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more

  4. #4
    ravindarjobs's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    Re: scroll images using java script

    @ coot head

    i have tried your code. it ran well.
    but i could not place it in correct place.

    please have a look at my code
    Code:


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    #container {
    width:1000px;
    margin:auto;
    }
    #header {
    width:1000px;
    height:100px;
    display:block;
    }
    #links {
    list-style-type:none;
    }
    #links .menu {
    background-color:#E65B60;
    float:left;
    margin-right:0px;
    }
    #links .menu a {
    padding:3px 20px;
    color:#f7eff9;
    font-weight:bold;
    text-decoration:none;
    }
    #links #contact {
    background-color:#228d07;
    float:left;
    }
    #links #contact a {
    padding:3px 32px 3px 33px;
    color:#f7eff9;
    font-weight:bold;
    text-decoration:none;
    }
    #img_container {
    text-align:center;
    }
    </style>
    </head>
    <body bgcolor="#D7CDCC">
    <center>
    <div id="container">
    <img id="header" src="images/abc.jpg" alt="">
     
     
     
    <div id="links">
    <table>
    <tr>
    <td>
    <table height=300 width=200 border=1 align=left >
    <tr>
    <td align=left>&nbsp</a></td>
    </tr>
    </table>
    <table height=300 width=598 border=1 align=left >
    <tr>
    <td align=left>&nbsp</td>
    <td align=left>&nbsp</td>
    </tr>
    <tr>
    <td align=left>&nbsp</td></td>
    <td align=left>&nbsp</td>
    </tr>
    </table>
    <table border=1 height=300 width=190 align=left >
    <tr>
    <td align=left>&nbsp</td>
    </tr>
    </table>
    </td>
    </tr>
    <table height=100 width=1000 border=1 >
    <tr>
    <td>rolling here</td>
    </tr>
    </table>
    </table>
    </center>
     
    </div>
    </body>
    </html>

    in the final table, i tried scroll images in that area. but i could not make it.
    i have labelled the area as rolling here.
    please do have a look at it.

    i mean, images should roll. in that cell. Even if i put that table or cell some other place in the future, images must roll.
    so inorder not to face problem in future how should i place them?
    how should i approach?
    Last edited by vinyl-junkie; 11-24-2007 at 02:16 PM. Reason: Added code tags

  5. #5
    ravindarjobs's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    Re: scroll images using java script

    About my posting :
    Though i put my code in the lable
    Code:

    why it is not appering as a scroll bar window?
    whats my mistake?

  6. #6
    vinyl-junkie's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    721

    Re: scroll images using java script

    Quote Originally Posted by ravindarjobs View Post
    About my posting :
    Though i put my code in the lable
    Code:

    why it is not appering as a scroll bar window?
    whats my mistake?
    You need to use the # icon when composing your post. That will wrap your code in code tags. I edited your previous post and did that for you.
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more

  7. #7
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: scroll images using java script

    Hi there ravindarjobs,

    I see that you are still using tables for layout purposes.
    And I keep giving you layouts that don't.

    All I can suggest is that you give me all the images that you require to be scrolled and any others that you require for the layout itself.

    I will, if I get the time, redo the layout in a manner that befits the twenty first century.
    Last edited by HTML; 03-09-2012 at 06:15 PM.

  8. #8
    ravindarjobs's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    Re: scroll images using java script

    @ coot head

    Last time you have given me code for creating menus using lists.
    i am using that in ohter page.
    but now here i dont have a menu. so i thought of a table.(its my mistake)
    But yes, i faced problems with table. more over firefox is not displaying well my previous code.
    seems that i should stop building pages and take a book and read more.

    any ways if you find time, please change my layout with lists.
    you already viewed my desired layout in the previous code.
    please do change them using lists.
    also my images have to roll in a width of 1000px. so for now take a sample image and repeat in the loop multiple times.

    Also coot heed how do i attach a zip file to this post as you did last time?

  9. #9
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: scroll images using java script

    Hi there ravindarjobs,
    how do I attach a zip file to this post as you did last time?

    • click 'Post Reply'.
    • scroll down to 'Additional Options'.
    • find 'Attach Files'.
    • click 'Manage Attachments',
    • this will open a pop-up window.
    • assuming that the zip file is to be uploaded from your computer...
    • click 'Browse'.
    • locate the zip file on your computer.
    • click 'Open'.
    • click 'Upload'.
    • click 'Close this window' or the 'X'.
    • have a beer.
    ...also my images have to roll in a width of 1000px. so for now take a sample image and repeat in the loop multiple times.
    I would really need to have all the images that are required for your scroll , as the coding is dependent on their number and their dimensions.
    This will be a good opportunity for you to practice your file uploading skills.

  10. #10
    ravindarjobs's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    Re: scroll images using java script

    hi coot head, at last i could place my rolling images in the place i want.
    my problem solved.

    but as you said tables are bad for layout, i want to turn my tables into lists.
    i solved rolling images problem with your code. i have taken a container at my desired location and made images to roll in that with your code. many many thanks. now i could place images where ever i want.

    but can you change the layout in to lists please? provided if you find time.
    Thank you

  11. #11
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: scroll images using java script

    Hi there ravindarjobs,

    here is the tableless code...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    * {
        margin:0;
        padding:0;
     }
    #wrapper {
        width:1000px;
        border:1px solid #000;
        margin:auto;
     }
    #header {
        width:1000px;
        height:100px;
        display:block;
     }
    #links {
        list-style-type:none;
     }
    #links .menu {
        background-color:#228d07;
        float:left;
        margin-right:2px;
     }
    #links .menu a {
        padding:3px 22px;
        color:#f7eff9;
        font-weight:bold;
        text-decoration:none;
     }
    #links #contact {
        background-color:#228d07;
        float:left;
     }
    #links #contact a {
        padding:3px 32px 3px 33px;
        color:#f7eff9;
        font-weight:bold;
        text-decoration:none;
     }
    #left {
        width:189px;
        height:289px;
        padding:5px;
        border-right:1px solid #000;
        border-bottom:1px solid #000;
        float:left;
     }
    #left p {
        height:100%;
        background-color:#fee;
     }
    #center {
        width:600px;
        height:300px;
        float:left;
     }
    .center_boxes {
        width:289px;
        height:139px;
        padding:5px;
        border-right:1px solid #000;
        border-bottom:1px solid #000;
        float:left;
     }
    .center_boxes p {
        height:100%;
        background-color:#efe;
     }
    #right {
        width:190px;
        height:289px;
        padding:5px;
        border-bottom:1px solid #000;
        float:left;
     }
    #right p {
        height:100%;
        background-color:#eef;
     }
    #bottom {
        height:100px;
        clear:both;
     }
    </style>
    
    </head>
    <body>
    
    <div id="wrapper">
    
    <img id="header" src="images/world.gif" alt="">
    
    <ul id="links">
     <li class="menu"><a href="http://yahoo.com">Menu0</a></li>
     <li class="menu"><a href="#">Menu1</a></li>
     <li class="menu"><a href="#">Menu2</a></li>
     <li class="menu"><a href="#">Menu3</a></li>
     <li class="menu"><a href="#">Menu4</a></li>
     <li class="menu"><a href="#">Menu5</a></li>
     <li class="menu"><a href="#">Menu6</a></li>
     <li class="menu"><a href="#">Menu7</a></li>
     <li id="contact"><a href="#">Contact Us</a></li>
    </ul>
    
    <div id="left"><p>left</p></div>
    
    <div id="center">
     <div class="center_boxes"><p>center top left</p></div>
     <div class="center_boxes"><p>center top right</p></div>
     <div class="center_boxes"><p>center bottom left</p></div>
     <div class="center_boxes"><p>center bottom right</p></div>
    </div>
    
    <div id="right"><p>right</p></div>
    
    <div id="bottom">scrolling here</div>
    
    </div>
    
    </body>
    </html>

  12. #12
    ravindarjobs's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    Re: scroll images using java script

    thank you coot head.
    got it and now i am working with it.
    Thank you. i will be back after completing my page.
    Last edited by ravindarjobs; 11-25-2007 at 11:27 AM.

  13. #13
    ravindarjobs's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    Re: scroll images using java script

    ok coothead. it worked well and now i could roll images too.

    Thank you

  14. #14
    ravindarjobs's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    Re: scroll images using java script

    hi coot head,
    for simplicity i have seperated styles in to a .css file (as you said earlier)
    and i can run my page well.

    but when i also seperated my my banner(image) and the menu in to every page i am facing problem.
    image and menu are not appering
    i have used the following code
    <script language="javascript" src="js/menu.js">

    so i think the .js file has error.
    what do you say?


    Thank you

  15. #15
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: scroll images using java script

    Hi there ravindarjobs,

    The majority of browsers will not execute the javascript if there is no closing tag.

    Also, although it will not effect the running of the script, do not use language="javascript". It is a deprecated attribute.

    So your code should be...
    <script type="text/javascript" src="js/menu.js"></script>



Page 1 of 2 1 2 Last

Tags for this Thread