I got a page with video thumbs. I wonder how i can display video duration onmouseover (display the duration in a blackbox in lower left corner of image)the thumb image and hide it again onmouseout? currently as you see in demo the video duration is visiable at all time but i want to make it visiable only when user puts the mouse over the thumb image . I be happy if you guys help me do this task.Thanks in advance.
demo on fiddle :http://jsfiddle.net/shodaburp/k6yAQ/1/
<div class="ListSlideDown">
<div class="ListFadeIn">
<div class="CurrentPage">1</div>
<div class="IsLastPage">0</div>
<div class="SortColumn">latest</div>
<div class="Item ItemLeft">
<div class="Clipping">
<a class="ImageLink" href="/videos/vid1" title="video1">
<img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video 1" />
<img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
</a>
<a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid1"><span class="Text">51:57</span>
</a>
</div>
<div class="Title">
video 1
</div>
<div class="VideoAge">1 day before</div>
<div class="PlaysInfo">broadcast: 604</div>
</div>
<div class="Item ItemMiddle">
<div class="Clipping">
<a class="ImageLink" href="/videos/vid2" title="video2">
<img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video 2" />
<img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
</a>
<a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid2"><span class="Text">12:23</span>
</a>
</div>
<div class="Title">
video 2
</div>
<div class="VideoAge">1 day before</div>
<div class="PlaysInfo">broadcast: 7531</div>
</div>
<div class="Item ItemRight">
<div class="Clipping">
<a class="ImageLink" href="/videos/vid3" title="video3">
<img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video3" />
<img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
</a>
<a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid3"><span class="Text">17:36</span>
</a>
</div>
<div class="Title">
video 3
</div>
<div class="VideoAge">1 day before</div>
<div class="PlaysInfo">broadcast: 996</div>
</div>
<div class="LineSpacer3"></div>
<div class="Item ItemLeft">
<div class="Clipping">
<a class="ImageLink" href="/videos/vid4" title="video4">
<img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video 4" />
<img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
</a>
<a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid4"><span class="Text">31:57</span>
</a>
</div>
<div class="Title">
video 4
</div>
<div class="VideoAge">1 day before</div>
<div class="PlaysInfo">broadcast: 604</div>
</div>
<div class="Item ItemMiddle">
<div class="Clipping">
<a class="ImageLink" href="/video/video5" title="video5">
<img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video 5" />
<img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
</a>
<a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid5"><span class="Text">2:23</span>
</a>
</div>
<div class="Title">
video 5
</div>
<div class="VideoAge">1 day before</div>
<div class="PlaysInfo">broadcast: 2531</div>
</div>
<div class="Item ItemRight">
<div class="Clipping">
<a class="ImageLink" href="/videos/vid6" title="video6">
<img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video6" />
<img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
</a>
<a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid6"><span class="Text">12:36</span>
</a>
</div>
<div class="Title">
video 6
</div>
<div class="VideoAge">1 day before</div>
<div class="PlaysInfo">broadcast: 196</div>
</div>
<div class="LineSpacer3"></div>
<div class="BottomFix"></div>
</div>
</div>
I don't see why would you need JavaScript in this case:
http://jsfiddle.net/DerekL/habb9/
Just use CSS:
.Clipping{ /*<--Change to .Clipping*/
position: relative;
}
.DurationInfo{
position: absolute;
bottom: 5px;
right: 5px;
display: none;
}
.Item:hover .DurationInfo{
display: block;
}
And you can even add a nice transition:
http://jsfiddle.net/DerekL/habb9/2/
.DurationInfo{
opacity: 0;
right: -5px;
transition: opacity .2s ease-in-out, /*Prefix not included*/
right .2s ease-in-out;
}
.Item:hover .DurationInfo{
right: -5px;
opacity: 1;
}
just in case you want to do with jquery you can use hover and mouseleave methods.
http://jsfiddle.net/btevfik/k6yAQ/4/
Related
This is not my script. I just copy scripts and learn something of them so I can advance in HTML knowledge. This code it works only in a part. It shows ok by part of design, but when I press arrows it won't slide to new images
<div class="swiper-container swiper-container-horizontal">
<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-630px, 0px, 0px);"><div class="swiper-slide swiper-slide-duplicate swiper-slide-prev" data-swiper-slide-index="2" style="width: 600px; margin-right: 30px;">
<div id="images" style="margin-left:70px;">
<a onclick="location.href='fallout/'" href="fallout/">
<img src="ASSETS/img/fallout.png">
<div title="Hacking is now possible without vision!" class="caption">Fallout Version</div>
</a>
<a id="green" onclick="location.href='blue/'" href="blue/">
<img src="http://i.imgur.com/57C9mln.png">
<div class="caption">GeekTyper Blue</div>
</a>
<a onclick="location.href='writer/'" href="writer/">
<img src="ASSETS/img/writer.png">
<div title="Hacking is now possible without vision!" class="caption">Writer</div>
</a>
<br><br>
<a style="color:white;padding:20px;" href="mailto:geektyper#outlook.com">Suggest a theme</a>
</div>
</div>
<div class="swiper-slide swiper-slide-active" data-swiper-slide-index="0" style="width: 600px; margin-right: 30px;">
<div id="images" style="margin-left:70px;">
<a id="green" style="background:#bd0101;" onclick="location.href='tegnio/'" href="tegnio/">
<img src="ASSETS/img/main.png" title="Remembers your settings">
<div class="caption">Tegnio (Customizable)</div>
</a>
<a onclick="location.href='shield/'" href="shield/">
<img src="ASSETS/img/shield.png">
<div title="" class="caption">SHIELD Version</div>
</a>
<a id="green" onclick="location.href='scp/'" href="scp/">
<img src="http://i.imgur.com/bF2tc2V.jpg">
<div class="caption">SCP</div>
</a>
<a onclick="location.href='umbrella/'" href="umbrella/">
<img src="ASSETS/img/umbrella_thumb.png">
<div class="caption">Umbrella Corp</div>
</a>
<a onclick="location.href='aperture/'" href="aperture/">
<img src="http://i.imgur.com/Kb4o0uI.jpg">
<div class="caption">Aperture Science</div>
</a>
<a onclick="location.href='combine/'" href="combine/">
<img src="http://i.imgur.com/sxaHAoi.jpg">
<div class="caption">Combine</div>
</a>
<a onclick="location.href='blackmesa/'" href="blackmesa/">
<img src="http://i.imgur.com/T1pL2ib.jpg">
<div class="caption">Black Mesa</div>
</a>
<a onclick="location.href='plain/'" href="plain/">
<img src="http://i.imgur.com/RZG9ghe.png">
<div class="caption">Plain Terminal</div>
</a>
<a onclick="location.href='matrix/'" href="matrix/">
<img src="http://i.imgur.com/lHjKmQT.png">
<div class="caption">Matrix</div>
</a>
</div>
</div>
<div class="swiper-slide swiper-slide-next" data-swiper-slide-index="1" style="width: 600px; margin-right: 30px;">
<div id="images" style="margin-left:70px;">
<a onclick="location.href='dharma/'" href="dharma/">
<img src="http://i.imgur.com/QXMmQwN.png">
<div class="caption">Dharma</div>
</a>
<a onclick="location.href='tegnio/'" href="tegnio/">
<img src="http://i.imgur.com/DXB4jK7.png">
<div class="caption">Sliv</div>
</a>
<a onclick="location.href='pony/'" href="pony/">
<img src="http://i.imgur.com/bMwdWFF.png">
<div class="caption">MLP Typer</div>
</a>
<a onclick="location.href='word/'" href="word/">
<img src="http://i.imgur.com/8QWNpb4.png">
<div class="caption">Microsoft Word</div>
</a>
<a onclick="location.href='studio/'" href="studio/">
<img src="http://i.imgur.com/tTwtzQz.png">
<div class="caption">Visual Studio</div>
</a>
<a onclick="location.href='lolcode/'" href="lolcode/">
<img src="http://i.imgur.com/OzxnXFb.png">
<div class="caption">LOLCODE</div>
</a>
<a onclick="location.href='hey/'" href="hey/">
<img src="http://i.imgur.com/5Sqs6jO.png">
<div class="caption">HE-MAN</div>
</a>
<a onclick="location.href='braile/'" href="braile/">
<img src="http://i.imgur.com/vV4t9Jm.png">
<div title="" class="caption">Braile Version</div>
</a>
<a onclick="location.href='alien/'" href="alien/">
<img src="ASSETS/img/alien.png">
<div title="" class="caption">Alien Version</div>
</a>
</div>
</div>
<div class="swiper-slide" data-swiper-slide-index="2" style="width: 600px; margin-right: 30px;">
<div id="images" style="margin-left:70px;">
<a onclick="location.href='fallout/'" href="fallout/">
<img src="ASSETS/img/fallout.png">
<div title="Hacking is now possible without vision!" class="caption">Fallout Version</div>
</a>
<a id="green" onclick="location.href='blue/'" href="blue/">
<img src="http://i.imgur.com/57C9mln.png">
<div class="caption">GeekTyper Blue</div>
</a>
<a onclick="location.href='writer/'" href="writer/">
<img src="ASSETS/img/writer.png">
<div title="Hacking is now possible without vision!" class="caption">Writer</div>
</a>
<br><br>
<a style="color:white;padding:20px;" href="mailto:geektyper#outlook.com">Suggest a theme</a>
</div>
</div>
<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="0" style="width: 600px; margin-right: 30px;">
<div id="images" style="margin-left:70px;">
<a id="green" style="background:#bd0101;" onclick="location.href='tegnio/'" href="tegnio/">
<img src="ASSETS/img/main.png" title="Remembers your settings">
<div class="caption">Tegnio (Customizable)</div>
</a>
<a onclick="location.href='shield/'" href="shield/">
<img src="ASSETS/img/shield.png">
<div title="" class="caption">SHIELD Version</div>
</a>
<a id="green" onclick="location.href='scp/'" href="scp/">
<img src="http://i.imgur.com/bF2tc2V.jpg">
<div class="caption">SCP</div>
</a>
<a onclick="location.href='umbrella/'" href="umbrella/">
<img src="ASSETS/img/umbrella_thumb.png">
<div class="caption">Umbrella Corp</div>
</a>
<a onclick="location.href='aperture/'" href="aperture/">
<img src="http://i.imgur.com/Kb4o0uI.jpg">
<div class="caption">Aperture Science</div>
</a>
<a onclick="location.href='combine/'" href="combine/">
<img src="http://i.imgur.com/sxaHAoi.jpg">
<div class="caption">Combine</div>
</a>
<a onclick="location.href='blackmesa/'" href="blackmesa/">
<img src="http://i.imgur.com/T1pL2ib.jpg">
<div class="caption">Black Mesa</div>
</a>
<a onclick="location.href='plain/'" href="plain/">
<img src="http://i.imgur.com/RZG9ghe.png">
<div class="caption">Plain Terminal</div>
</a>
<a onclick="location.href='matrix/'" href="matrix/">
<img src="http://i.imgur.com/lHjKmQT.png">
<div class="caption">Matrix</div>
</a>
</div>
</div></div>
<div class="swiper-pagination swiper-pagination-clickable"><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
this is script
<script data-rocketsrc="swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
loop: true,
spaceBetween: 30
});
</script>
Always check the console!
[F12] on the keyboard
When you have errors, look for 404 (Not Found) on .js files first.
Then, you'll probaly see errors like Swiper is not defined dissapear too.
About ERR_BLOCKED_BY_CLIENT, this is due to the use of Ad Block. It isn't due to your code.
Using this script for accordion. But I can't find how to change the color for the accordionButton when the button is active.
JS
$(document).ready(function() {
$('.accordionButton').click(function() {
$('.accordionButton').removeClass('on');
$('.accordionContent').slideUp('normal');
if ($(this).next().is(':hidden') == true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('.accordionContent').hide();
$(".accordionContent").first().show();
});
CSS
.accordionButton {
color: #fff;
text-transform: uppercase;
font-variant: normal;
background-color: #51a429;
padding: 2px 2px 2px 5%;
cursor: pointer;
border-bottom: 5px solid #f5f5f5
}
.accordionButton:hover {
background-color: #1b3281
}
.accordionContent {
padding: 4% 5% 2% 0%
}
Thanks.
The way your accordion works is by adding the .on class to the currently open accordion tab's button. As such, I think this is what you meant:
.accordionButton.on {
background-color: yellow;
}
If you meant the moment when the button is clicked, then this will do the trick:
.accordionButton:active {
background-color: red;
}
You can see these behaviours in the snippet below.
$(document).ready(function() {
$('.accordionButton').click(function() {
$('.accordionButton').removeClass('on');
$('.accordionContent').slideUp('normal');
if ($(this).next().is(':hidden') == true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$(".accordionButton").first().addClass('on');
$('.accordionContent').hide();
$(".accordionContent").first().show()
});
.accordionButton {
color: #fff;
text-transform: uppercase;
font-variant: normal;
background-color: #51a429;
padding: 2px 2px 2px 5%;
cursor: pointer;
border-bottom: 5px solid #f5f5f5
}
.accordionButton:hover {
background-color: #1b3281
}
.accordionButton:active {
background-color: red;
}
.accordionButton.on {
background-color: yellow;
}
.accordionContent {
padding: 4% 5% 2% 0%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion-container" class="f-ms">
<div id="accordion-link-1" class="accordionButton">
<p class="f-fp f-lp">TEST</p>
</div>
<!-- end accordion-link-1 -->
<div id="accordion-1" class="accordionContent">
<div id="accordion-title-1" class="f-ms">
<h1 class="f-fp">Global deals </h1>
<p><span class="size13">Select tile for details</span>
</p>
<p class="f-lp"><span class="buttonBlue">CLICK HERE TO GO TO </span>
</p>
</div>
<!-- end accordion-title-1 -->
<div id="accordion-content-1" class="f-ms flex-container">
<a href="https://www.google.com/tombstone.png?type=thumbnail" id="102087">
<div id="accordion-1-tile-1" class="flex-grow-1 box-shadow">
<a href="">
<img id="m12" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-1-tile-1 -->
</a>
<a href="">
<div id="accordion-1-tile-2" class="flex-grow-1 box-shadow">
<a href="https://www.google.com/tombstone.png?type=thumbnail&did=101982">
<img id="m13" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-1-tile-2 -->
</a>
<a href="https://www.google.com/tombstone.png?type=thumbnail&did=101">
<div id="accordion-1-tile-3" class="flex-grow-1 box-shadow">
<a href="">
<img id="m14" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10
" alt="">
</a>
</div>
<!-- end accordion-1-tile-3 -->
</a>
</div>
<!-- end accordion-content-1 -->
</div>
<!-- end accordion-1 -->
<div id="accordion-link-2" class="accordionButton">
<p class="f-fp f-lp">TEST</p>
</div>
<!-- end accordion-link-2 -->
<div id="accordion-2" class="accordionContent">
<div id="accordion-title-2" class="f-ms">
<h1 class="f-fp">Global deals </h1>
<p><span class="size13">Select tile for details</span>
</p>
<p class="f-lp"><span class="buttonBlue">CLICK HERE TO GO TO </span>
</p>
</div>
<!-- end accordion-title-2 -->
<div id="accordion-content-2" class="f-ms flex-container">
<a href="https://www.google.com/tombstone.png?type=thumbnail" id="102087">
<div id="accordion-2-tile-1" class="flex-grow-1 box-shadow">
<a href="">
<img id="m15" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-2-tile-1 -->
</a>
<a href="">
<div id="accordion-2-tile-2" class="flex-grow-1 box-shadow">
<a href="">
<img id="m16" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-2-tile-2 -->
</a>
<a href="">
<div id="accordion-2-tile-3" class="flex-grow-1 box-shadow">
<a href="">
<img id="m17" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10
" alt="">
</a>
</div>
<!-- end accordion-2-tile-3 -->
</a>
</div>
<!-- end accordion-content-2 -->
</div>
<!-- end accordion-2 -->
<div id="accordion-link-3" class="accordionButton">
<p class="f-fp f-lp">TEST</p>
</div>
<!-- end accordion-link-3 -->
<div id="accordion-3" class="accordionContent">
<div id="accordion-title-3" class="f-ms">
<h1 class="f-fp">Global deals</h1>
<p><span class="size13">Select tile for details</span>
</p>
<p class="f-lp"><span class="buttonBlue">CLICK HERE TO GO TO </span>
</p>
</div>
<!-- end accordion-title-3 -->
<div id="accordion-content-3" class="f-ms flex-container">
<a href="">
<div id="accordion-3-tile-1" class="flex-grow-1 box-shadow">
<a href="">
<img id="m18" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-3-tile-1 -->
</a>
<a href="">
<div id="accordion-3-tile-2" class="flex-grow-1 box-shadow">
<a href="">
<img id="m19" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-3-tile-2 -->
</a>
<a href="">
<div id="accordion-3-tile-3" class="flex-grow-1 ">
<a href="">
<img id="m20" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-3-tile-3 -->
</a>
</div>
<!-- end accordion-content-3 -->
</div>
<!-- end accordion-3 -->
<div id="accordion-link-4" class="accordionButton">
<p class="f-fp f-lp">TEST</p>
</div>
<!-- end accordion-link-4 -->
<div id="accordion-4" class="accordionContent">
<div id="accordion-title-4" class="f-ms">
<h1 class="f-fp">Global deals</h1>
<p><span class="size13">Select tile for details</span>
</p>
<p class="f-lp"><span class="buttonBlue">CLICK HERE TO GO TO </span>
</p>
</div>
<!-- end accordion-title-4 -->
<div id="accordion-content-4" class="f-ms flex-container">
<a href="">
<div id="accordion-4-tile-1" class="flex-grow-1 box-shadow">
<a href="">
<img id="m21" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-4-tile-1 -->
</a>
<a href="">
<div id="accordion-4-tile-2" class="flex-grow-1 ">
<a href="">
<img id="m22" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-4-tile-2 -->
</a>
<a href="">
<div id="accordion-4-tile-3" class="flex-grow-1 box-shadow">
<a href="">
<img id="m23" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10
" alt="">
</a>
</div>
<!-- end accordion-4-tile-3 -->
</a>
</div>
<!-- end accordion-content-4 -->
</div>
<!-- end accordion-4 -->
<div id="accordion-link-5" class="accordionButton">
<p class="f-fp f-lp">TEST</p>
</div>
<!-- end accordion-link-5 -->
<div id="accordion-5" class="accordionContent">
<div id="accordion-title-5" class="f-ms">
<h1 class="f-fp">Global deals</h1>
<p><span class="size13">Select tile for details</span>
</p>
<p class="f-lp"><span class="buttonBlue">CLICK HERE TO GO TO </span>
</p>
</div>
<!-- end accordion-title-5 -->
<div id="accordion-content-5" class="f-ms flex-container">
<a href="">
<div id="accordion-5-tile-1" class="flex-grow-1 box-shadow">
<a href="">
<img id="m24" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-5-tile-1 -->
</a>
<a href="">
<div id="accordion-5-tile-2" class="flex-grow-1 box-shadow">
<a href="">
<img id="m25" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-5-tile-2 -->
</a>
<a href="">
<div id="accordion-5-tile-3" class="flex-grow-1 box-shadow">
<a href="">
<img id="m26" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-5-tile-3 -->
</a>
</div>
<!-- end accordion-content-5 -->
</div>
<!-- end accordion-5 -->
</div>
When I load the page first: Not display any of the pictures.
When I load the page second/third/etc...: All picture display.
What do I do wrong?
<br style="clear:left;">
<div style="padding-top:48px; padding-bottom:48px; background-color: #1D1626;">
<div id="gallery-container" style="width:828px; margin-left:auto; margin-right:auto;">
<div class="gallery-item">
<a rel="prettyPhoto[gallery]" href="/gallery/example/56-teszt-1.jpg">
<img src="/gallery/tgn/example/56-teszt-1.jpg" alt="" name="#capty-id-56" class="gallery-picture">
</a>
<div id="capty-id-56">Teszt1</div>
</div>
<div class="gallery-item row1">
<a rel="prettyPhoto[gallery]" href="/gallery/example/55-teszt-2.jpg">
<img src="/gallery/tgbs/example/55-teszt-2.jpg" alt="" name="#capty-id-55" class="gallery-picture">
</a>
<div id="capty-id-55">Teszt2</div>
</div>
<div class="gallery-item">
<a rel="prettyPhoto[gallery]" href="/gallery/example/54-teszt-3.jpg">
<img src="/gallery/tgn/example/54-teszt-3.jpg" alt="" name="#capty-id-54" class="gallery-picture">
</a>
<div id="capty-id-54">Teszt3</div>
</div>
</div>
</div>
<script>
$(function() {
var $container = $('#gallery-container');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector : '.gallery-item',
columnWidth : 276
});
});
});
</script>
http://masonry.desandro.com/demos/images.html#content
mansonry plugin
imagesloaded plugin
MyTest page: http://mansonry-imagesloaded-test.darkrpg.hu/
working for me see on jsfiddle http://jsfiddle.net/zYqht/
<div style="background-color:#ee6;">
<div id="gallery-container">
<div class="gallery-item">
<a rel="prettyPhoto[gallery]" href="/gallery/example/56-teszt-1.jpg">
<img src="http://lorempixel.com/226/188/?227" alt="" name="#capty-id-56" class="gallery-picture">
</a>
<div id="capty-id-56">Teszt1</div>
</div>
<div class="gallery-item row1">
<a rel="prettyPhoto[gallery]" href="/gallery/example/55-teszt-2.jpg">
<img src="http://lorempixel.com/400/188/?217" alt="" name="#capty-id-55" class="gallery-picture">
</a>
<div id="capty-id-55">Teszt2</div>
</div>
<div class="gallery-item">
<a rel="prettyPhoto[gallery]" href="/gallery/example/54-teszt-3.jpg">
<img src="http://lorempixel.com/226/188/?222" alt="" name="#capty-id-54" class="gallery-picture">
</a>
<div id="capty-id-54">Teszt3</div>
</div>
<div class="gallery-item">
<a rel="prettyPhoto[gallery]" href="/gallery/example/54-teszt-3.jpg">
<img src="http://lorempixel.com/226/100/?222" alt="" name="#capty-id-54" class="gallery-picture">
</a>
<div id="capty-id-54">Teszt3</div>
</div>
<div class="gallery-item">
<a rel="prettyPhoto[gallery]" href="/gallery/example/54-teszt-3.jpg">
<img src="http://lorempixel.com/123/188/?222" alt="" name="#capty-id-54" class="gallery-picture">
</a>
<div id="capty-id-54">Teszt3</div>
</div>
<div class="gallery-item">
<a rel="prettyPhoto[gallery]" href="/gallery/example/54-teszt-3.jpg">
<img src="http://lorempixel.com/226/321/?222" alt="" name="#capty-id-54" class="gallery-picture">
</a>
<div id="capty-id-54">Teszt3</div>
</div>
<div class="gallery-item">
<a rel="prettyPhoto[gallery]" href="/gallery/example/54-teszt-3.jpg">
<img src="http://lorempixel.com/226/188/?222" alt="" name="#capty-id-54" class="gallery-picture">
</a>
<div id="capty-id-54">Teszt3</div>
</div>
</div>
</div>
<script>
$(function() {
var $container = $('#gallery-container');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector : '.gallery-item',
});
});
});
</script>
I would like to create a feature so when the user hovers over the LI, a div crawls down using jquery easing.
JsFiddle: http://jsfiddle.net/WZvPk/2/
This is what i have so far:
HTML
<div class="sectorWrapper">
<ul class="sectors">
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors/introtosectors/examplesectorpage.aspx" target="_self">
<div class="sectorTitle">
Sector 1
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" style="width: 193px; height: 88px;" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 2
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div></div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 3
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 4
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 5
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 6
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 7
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 8
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
<br />
</div>
</div>
</li>
</ul>
</div>
CSS:
/*force the image size to be set by css*/
div.sectorImage a img
{
width:193px;
height:88px;
}
div.showMe
{
display:block;
}
.sectorGrid
{
position:relative;
}
jquery
$("ul.sectors li").hover(
function () {
$("div.sectorImage div.showme").css("display", "block");
},
function () {
$("div.sectorImage div.showme").css("display", "none");
}
);
The idea is when the user hovers over the section it will slowely drop the hidden div at the bottom allowing them to click the "view project" link.
I am having problems making this work with just one LI, if you test the jsfiddle you can see display:block seems to work but for all the LI, which is wrong.
Could you help me now that ive explained better?
If you change this
$("div.sectorImage div.showme").css("display", "block");
to this
$(this).children(".sectorImage").children(".showme").css("display", "block");
you'll be showing only one div
I have a menu made of div elements when you mouseenter the menu-item it rotates and fades the next div.container nested elements but when i add an animation to the width of the div.container the fadeIn and fadeOut stops it's just rotates them what going with that can somebody change my code so it will work properly i can't figure it out. http://jsfiddle.net/EcgTa/
here is my code
function rotateZIndex(currentMenuItem) {
var $currentContent = $('#' + $(currentMenuItem).attr('class').split(' ')[1]),
$contentContainer = $currentContent.closest('.container'),
$contentItems = $('> div', $contentContainer);
$contentItems.not($currentContent)
.css('z-index', function (i, val) { return val - 1 })
.fadeOut();
$currentContent.css('z-index', $contentItems.length).fadeIn();
}
$('.menu-item').mouseenter(function () {
$(this).closest('.container').next('.container').animate({ width: 200 });
}).mouseleave(function () {
$(this).closest('.container').next('.container').stop(false, true);
}).mouseover(function() {
rotateZIndex(this);
});
<div id="container1" class="container"
style="width:220px; position:relative; float:left">
<div class="menu-item menu-1-1">
<div class="menu-item-middle">
<a href="#"><span class="header"
style="font-family:Verdana; font-size:.95em; font-weight:bold">Technology</span>
<span class="description"
style="font-family:Arial; font-size:.7em; color:#0b83bb">Computers & Office
Supplies</span> </a>
</div>
<div class="menu-item-left">
<div class="item-corner">
</div>
<div class="item-icon">
<img alt="" height="36" src="images/spacer.gif" width="36" />
</div>
</div>
<div class="menu-item-right">
<img alt="" height="44" src="images/spacer.gif" width="26" />
</div>
</div>
<div class="menu-item menu-1-2">
<div class="menu-item-middle">
<a href="#"><span class="header"
style="font-family:Verdana; font-size:.95em; font-weight:bold">Interests</span>
<span class="description"
style="font-family:Arial; font-size:.7em; color:#0b83bb">Movies Books &
Music</span> </a>
</div>
<div class="menu-item-left">
<div class="item-corner">
</div>
<div class="item-icon">
<img alt="" height="36" src="images/spacer.gif" width="36" />
</div>
</div>
<div class="menu-item-right">
<img alt="" height="44" src="images/spacer.gif" width="26" />
</div>
</div>
<div class="menu-item menu-1-3">
<div class="menu-item-middle">
<a href="#"><span class="header"
style="font-family:Verdana; font-size:.95em; font-weight:bold">Entertainment</span>
<span class="description"
style="font-family:Arial; font-size:.7em; color:#0b83bb">Sofware & Games</span>
</a>
</div>
<div class="menu-item-left">
<div class="item-corner">
</div>
<div class="item-icon">
<img alt="" height="36" src="images/spacer.gif" width="36" />
</div>
</div>
<div class="menu-item-right">
<img alt="" height="44" src="images/spacer.gif" width="26" />
</div>
</div>
<div class="menu-item menu-1-4">
<div class="menu-item-middle">
<a href="#"><span class="header"
style="font-family:Verdana; font-size:.95em; font-weight:bold">Kids</span>
<span class="description"
style="font-family:Arial; font-size:.7em; color:#0b83bb">Toys & Games</span>
</a>
</div>
<div class="menu-item-left">
<div class="item-corner">
</div>
<div class="item-icon">
<img alt="" height="36" src="images/spacer.gif" width="36" />
</div>
</div>
<div class="menu-item-right">
<img alt="" height="44" src="images/spacer.gif" width="26" />
</div>
</div>
<div class="menu-item menu-1-5">
<div class="menu-item-middle">
<a href="#"><span class="header"
style="font-family:Verdana; font-size:.95em; font-weight:bold">Clothing</span>
<span class="description"
style="font-family:Arial; font-size:.7em; color:#0b83bb">Shoes Jewelry &
Apparel</span> </a>
</div>
<div class="menu-item-left">
<div class="item-corner">
</div>
<div class="item-icon">
<img alt="" height="36" src="images/spacer.gif" width="36" />
</div>
</div>
<div class="menu-item-right">
<img alt="" height="44" src="images/spacer.gif" width="26" />
</div>
</div>
<div class="menu-item menu-1-6">
<div class="menu-item-middle">
<a href="#"><span class="header"
style="font-family:Verdana; font-size:.95em; font-weight:bold">Pharmacy</span>
<span class="description"
style="font-family:Arial; font-size:.7em; color:#0b83bb">Health & Beauty</span>
</a>
</div>
<div class="menu-item-left">
<div class="item-corner">
</div>
<div class="item-icon">
<img alt="" height="36" src="images/spacer.gif" width="36" />
</div>
</div>
<div class="menu-item-right">
<img alt="" height="44" src="images/spacer.gif" width="26" />
</div>
</div>
<div class="menu-item menu-1-7">
<div class="menu-item-middle">
<a href="#"><span class="header"
style="font-family:Verdana; font-size:.95em; font-weight:bold">Home</span>
<span class="description"
style="font-family:Arial; font-size:.7em; color:#0b83bb">Furniture Outdoors
& Garden</span> </a>
</div>
<div class="menu-item-left">
<div class="item-corner">
</div>
<div class="item-icon">
<img alt="" height="36" src="images/spacer.gif" width="36" />
</div>
</div>
<div class="menu-item-right">
<img alt="" height="44" src="images/spacer.gif" width="26" />
</div>
</div>
</div>
<div id="container2" class="container" style="position:relative; float:left">
<div id="menu-1-1"
style="height:300px; margin-left:2px; position:absolute; background-color:Aqua; z-index:0">
Some Text</div>
<div id="menu-1-2"
style="height:280px; margin-left:2px; position:absolute; background-color:Blue; z-index:1">
Some Text</div>
<div id="menu-1-3"
style="height:260px; margin-left:2px; position:absolute; background-color:Fuchsia; z-index:2">
Some Text</div>
<div id="menu-1-4"
style="height:240px; margin-left:2px; position:absolute; background-color:Gray; z-index:3">
Some Text</div>
<div id="menu-1-5"
style="height:220px; margin-left:2px; position:absolute; background-color:Green; z-index:4">
Some Text</div>
<div id="menu-1-6"
style="height:200px; margin-left:2px; position:absolute; background-color:Lime; z-index:5">
Some Text</div>
<div id="menu-1-7"
style="height:180px; margin-left:2px; position:absolute; background-color:Maroon; z-index:6">
Some Text</div>
</div>
div.menu-item
{
padding-left:41px; padding-right: 25px; cursor:hand
}
div.menu-item-left
{
width:41px; height:44px; float:left; position:relative;right:41px; margin-left:-100%
}
div.menu-item-left .item-corner
{
width:3px; height:44px; float:left;
}
div.menu-item-left .item-corner.selected
{
background:url('images/Menu_Item_Corner.jpg') no-repeat;
}
div.menu-item-left .item-icon
{
float:right;
}
div.menu-item-left .item-icon.selected
{
background:url('images/Menu_Item_Middle.jpg') repeat-x;
}
div.menu-item-left .item-icon img
{
margin-top:3px; margin-bottom:3px; border:1px solid #969ba0
}
div.menu-item-middle
{
width:100%; height:44px; position:relative; float:left
}
div.menu-item-middle.selected
{
background:url(images/Menu_Item_Middle.jpg) repeat-x;
}
div.menu-item-middle a
{
display:block; text-decoration:none; color:#0b83bb
}
div.menu-item-middle span.header
{
display:block; margin-top:6px; margin-left:3px
}
div.menu-item-middle span.description
{
display:block; margin-left:3px
}
div.menu-item-right
{
width:26px; height:44px; float:left; position:relative; margin-right:-26px; background:url(images/Menu_Item_Arrow.jpg) no-repeat;
}
div.menu-item-right.selected
{
background:url('images/Menu_Item_Arrow_Over.jpg') no-repeat;
}
This should fix it:
.container{
overflow: visible !important
}
EDIT: a bit more research turned up this explanation:
Apparently when you animate the width, jquery sets the overlow of the item to hidden. This forces it to stay visible.
Similar to this: JQuery: Children Disappear on Parent Size Animation