1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Need Help with HTML

Discussion in 'HTML & JavaScript' started by Zoekban, Jan 28, 2015.

  1. Zoekban

    Zoekban Newbie

    Joined:
    Apr 23, 2013
    Messages:
    18
    Likes Received:
    0
    Hello, I'm having trouble with changing the command of .img command with back round, and instead to put an image,
    Can anyone please help me and explain how i can add "img src" to the ".img1" etc, Because when i try to do, I lose the image display.
    Thanks from adavance!

    <!DOCTYPE html>
    <html>
    <head>
    <script class="jsbin" src="src">



    </script>
    <meta charset=utf-8 />
    <style>
    .rotator-wrapper{
    width: 0px;
    border: 0px solid black;
    }
    ul#rotator, ul#rotator li{
    float: left;
    width: x;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    }
    ul#rotator li{
    width: 0px;
    position: relative;
    }
    .rotator-image{
    position: absolute;
    display: none;
    width: 100px;
    height: 100px;
    }
    .img1{
    background-color: red;
    }
    .img2{
    background-color: blue;
    }


    </style>
    </head>
    <body>
    <div class="rotator-wrapper">
    <ul id="rotator">
    <li>
    <div class="rotator-image img1"></div>
    <div class="rotator-image img2"></div>


    </li>
    </ul>
    </div>
    <script>$(function(){
    // time between image rotate
    var delay = 1500;

    // for each list item in
    // the rotator ul, generate
    // show a random list item
    $('#rotator > li').each(function(){
    // save images in an array
    var $imgArr = $(this).children();
    // show a random image
    $imgArr.eq(Math.floor(Math.random()*$imgArr.length)).show();
    });
    // run the changeImage function after every (delay) miliseconds
    setInterval(function(){
    changeImage();
    },delay);

    function changeImage(){
    // save list items in an array
    var $liArr = $('#rotator > li');
    // select a random list item
    var $currLi = $liArr.eq(Math.floor(Math.random()*$liArr.length));
    // get the currently visible image
    var $currImg = $('.rotator-image:visible', $currLi);
    if ($currImg.next().length == 1) {
    var $next = $currImg.next();
    } else {
    var $next = $('.rotator-image:first', $currLi);
    }
    $currImg.fadeOut();
    $next.fadeIn();
    }
    });
    </script>
    </body>
    </html>
     
  2. Mike420

    Mike420 Junior Member

    Joined:
    Apr 13, 2013
    Messages:
    139
    Likes Received:
    30
    Not sure what u are asking, but maybe...

    <div class="rotator-image img1"><img src="image.jpg" /></div>

    or

    .img1 {
    background-image: url("image.jpg");
    }
     
    • Thanks Thanks x 1
    Last edited: Jan 28, 2015
  3. Zoekban

    Zoekban Newbie

    Joined:
    Apr 23, 2013
    Messages:
    18
    Likes Received:
    0
    Yes it worked! thank you very much!
    Another question, is how i take this script, And make an output from it as a rotator image script, Not a whole html page?
     
  4. g0han

    g0han Jr. VIP Jr. VIP

    Joined:
    Jan 12, 2014
    Messages:
    442
    Likes Received:
    72
    Home Page:
    If you still need help please put it online or somewhere where it's easier to see your intentions :)
     
    • Thanks Thanks x 1
  5. Mike420

    Mike420 Junior Member

    Joined:
    Apr 13, 2013
    Messages:
    139
    Likes Received:
    30
    If i understand right then...
    Delete these:
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    </body>
    </html>

    If your file name is rotator.html then u can include this file in your index page like this:

    <!--#include virtual="rotator.html" -->
     
    • Thanks Thanks x 1
  6. Zoekban

    Zoekban Newbie

    Joined:
    Apr 23, 2013
    Messages:
    18
    Likes Received:
    0
    I got help about that topic. so thank you.
    Regarding the script i posted,
    I wonder if you can help me, With these 2 issues.
    First one, Is how I take this script, And convert it, To be a regular image output, without it being a whole page script?
    Second one, How i can convert this script to be relied on real time, so it will rotate based on that, and will not start over every refresh?
    Thanks from advance!
     
  7. Zoekban

    Zoekban Newbie

    Joined:
    Apr 23, 2013
    Messages:
    18
    Likes Received:
    0
    Ok, To explain it better,
    I'm trying to insert this code into a table, In a wordpress website, So the results on the table will be rotated.
    I Deleted thos lines you said, But the output i receive is the both images, in a column, without the rotation effect.
     
  8. Zoekban

    Zoekban Newbie

    Joined:
    Apr 23, 2013
    Messages:
    18
    Likes Received:
    0
    Hey? does anyone know why this happens?
     
  9. Mike420

    Mike420 Junior Member

    Joined:
    Apr 13, 2013
    Messages:
    139
    Likes Received:
    30
  10. Gogol

    Gogol Jr. VIP Jr. VIP

    Joined:
    Sep 10, 2010
    Messages:
    3,412
    Likes Received:
    3,059
    Gender:
    Male
    The whole post went off my head :p
    Please wrap your codes within code tags and re-frame the question so that people can understand what you are asking for :)
     
  11. Zoekban

    Zoekban Newbie

    Joined:
    Apr 23, 2013
    Messages:
    18
    Likes Received:
    0
    Code:
    <script class="jsbin" src="src">
      
    
    
    </script>
    <meta charset=utf-8 />
    <style>
      .rotator-wrapper{
        width: 0px;
        border: 0px solid black;
      }
      ul#rotator, ul#rotator li{
        float: left;
        width: x;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
      }
      ul#rotator li{
        width: 0px;
        position: relative;
      }
      .rotator-image{
        position: absolute;
        display: none;
        width: 69px;
        height: 69px;
      }
      .img1{
        background-color: red; 
      }
        .img2{
        background-color: green; 
        }
     
        
    </style>
    
    
    
    
    <div class="rotator-wrapper">
      <ul id="rotator">
        <li>
          <div class="rotator-image img1"><img src="src" /></div>
          <div class="rotator-image img2"><img src="src" /></div>
    
    
     
       
    
    
        </li>
      </ul>
    </div>
    <script>$(function(){
      // time between image rotate
      var delay = 1500;
      
      // for each list item in 
      // the rotator ul, generate
      // show a random list item
      $('#rotator > li').each(function(){
        // save images in an array
        var $imgArr = $(this).children();
        // show a random image
        $imgArr.eq(Math.floor(Math.random()*$imgArr.length)).show();
      });
      // run the changeImage function after every (delay) miliseconds
      setInterval(function(){
        changeImage();
      },delay);
      
      function changeImage(){
        // save list items in an array
        var $liArr = $('#rotator > li');
        // select a random list item
        var $currLi = $liArr.eq(Math.floor(Math.random()*$liArr.length));
        // get the currently visible image
        var $currImg = $('.rotator-image:visible', $currLi);
        if ($currImg.next().length == 1) {
          var $next = $currImg.next();
        } else {
          var $next = $('.rotator-image:first', $currLi);
        }
        $currImg.fadeOut();
        $next.fadeIn();
      }  
    });
    </script>
    
    This script, I can't make it apear as it should be in wordpress website, Beisde that, I want it to be based on real time, Not on every refresh.
     
  12. Mike420

    Mike420 Junior Member

    Joined:
    Apr 13, 2013
    Messages:
    139
    Likes Received:
    30
  13. Zoekban

    Zoekban Newbie

    Joined:
    Apr 23, 2013
    Messages:
    18
    Likes Received:
    0
    I found the plugin, But I still Can't understand how I can make the script to be based on real time clock, So it will work from the first launch and will not start over every refresh