Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Moving DIV on click

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • July 16, 2014 at 8:47 am #175570
    cutty382
    Participant

    Hi I am creating a simple application for a homepage. It has three buttons 1|2|3 that you will be able to use to choose a video.

    What I have at the moment is a DIV Holder that has the overflow hidden. Then the video DIV which has three videos embedded from YouTube. What I want to happen is have the video DIV move left or right based on which button you choose.

    I was trying to work from a piece of code I used for a hover state of a button so I know this code is way off at the moment. But I am thinking there is a quick way to fix this, I just can’t find it.

    <style type=”text/css”>

    #holder {
    width: 320px;
    height: 180px;
    overflow:hidden;

    }

    #vid{
    display:block;
    width:320px;
    height:180px;
    }

    #vid:hover {
    position:relative;
    left: -320px;

    }

    </style>

    </head>

    <body>

    Patient Testimonials 1|2|3
    <iframe width=”320″ height=”180″ src=”//www.youtube.com/embed/Ms5HNwJWVRU?rel=0″ frameborder=”0″ allowfullscreen></iframe><iframe width=”320″ height=”180″ src=”//www.youtube.com/embed/Bt0qUX5YoHM?rel=0″ frameborder=”0″ allowfullscreen></iframe><iframe width=”320″ height=”180″ src=”//www.youtube.com/embed/elkOTaFCHJE?rel=0″ frameborder=”0″ allowfullscreen></iframe>

    </body>

    July 16, 2014 at 9:21 am #175572
    bearhead
    Participant

    I think the most straight forward way to do this is just to create a slide show with the three videos embedded in it.

    look into using either:
    the anythingslider
    or
    the flexslider

    then you can just embed the videos into the slider like so:

    <div class="yoursliderclass">
          <ul class="slideclass">
            <li>
<embed width="x" height="x"
src="viedo1"
type="application/x-shockwave-flash">
</li>
                <li>
<embed width="x" height="x"
src="viedo2"
type="application/x-shockwave-flash">
                </li>
                <li>
<embed width="x" height="x"
src="viedo3"
type="application/x-shockwave-flash">
</li>
            
          </ul>
        </div>

    Hope that helps!

    July 16, 2014 at 9:32 am #175574
    Senff
    Participant

    I see what you’re trying to do here but you may want to use a little bit of JavaScript.

    (If anything, just to avoid having multiple videos playing at once when you switch in the middle of a video.)

    This maybe? http://codepen.io/senff/pen/qjigw

    July 16, 2014 at 10:23 am #175579
    cutty382
    Participant

    Thanks bearhead I am still looking into using a slider.

    July 16, 2014 at 10:24 am #175580
    cutty382
    Participant

    Thanks Senff I like what the code you wrote is trying to do but I can’t get any of the videos to load. Am I missing something? Here is my implementation of your code…

    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
&lt;title&gt;&lt;/title&gt;
&lt;script type="text/javascript"&gt;
$('.switch').on('click', function(e){
  theurl = $(this).attr('data-uri');
  $('.player').attr('src',theurl);
  e.preventDefault();
});
&lt;/script&gt;

&lt;style type="text/css"&gt;

.player {
  width:320px;
  height:180px;
  background:#c0c0c0;
  float:none;
}

ul, li {
  list-style-type:none;
  margin:0;
  padding:0;
}

li {
  float:left;
  margin-left:10px;
  padding-left:10px;
  border-left:solid 1px #000;
}

li:first-child {
  border-left:0;
  margin-left:0;
  padding-left:0;
}

&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;iframe class="player" width="320" height="180"  src="" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;</div>

<ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
</ul>

&lt;/body&gt;
    July 16, 2014 at 12:56 pm #175593
    Senff
    Participant

    You’ve missed some code in the 1-2-3 links. You have:

    <ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
</ul>

    You should have:

    <ul>
  <li><a class="switch" href="#" data-uri="//www.youtube.com/embed/Ms5HNwJWVRU?rel=0&autoplay=1">1</a></li>
  <li><a class="switch" href="#" data-uri="//www.youtube.com/embed/Bt0qUX5YoHM?rel=0&autoplay=1">2</a></li>
  <li><a class="switch" href="#" data-uri="//www.youtube.com/embed/elkOTaFCHJE?rel=0&autoplay=1">3</a></li>
</ul>
    July 16, 2014 at 1:24 pm #175606
    cutty382
    Participant

    Thanks for your quick reply. I still can’t seem to get it to work. Here is the live site I am using to test.

    http://www.aicdheart.com/test.html

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.