jquery show hide div on hover and retain visibility until mouseout - javascript

I have select language drop down menu.
When the Flag is hovered it should display the language options and remain showed. When the mouse leaves the language options or when the flag is hovered again the language options should be hidden. I tried but it is showing and hiding instantly.
Html:
<img src="images/english.jpg" alt="en" id="langflag">
<div class="select-lang" style="display:none;">
<h2>In Your Language</h2>
<ul>
<li><img src="images/in_14.png" alt="in"> हिन्दी </li>
<li><img src="images/es_14.png" alt="es"> Español</li>
<li><img src="images/fr_14.png" alt="fr"> Français</li>
<li><img src="images/de_14.png" alt="de"> Deutsch</li>
<li><img src="images/ro_14.png" alt="ro"> Română</li>
<li><img src="images/br_14.png" alt="br"> Brasil</li>
<li><img src="images/tr_14.png" alt="tr"> Türkçe</li>
<li><img src="images/pl_14.png" alt="pl"> Polski</li>
<li><img src="images/pt_14.png" alt="pt"> Português</li>
<li><img src="images/ru_14.png" alt="ru"> Русский</li>
<li><img src="images/jp_14.png" alt="jp"> 日本語</li>
<li><img src="images/it_14.png" alt="it"> Italiano</li>
<li><img src="images/hu_14.png" alt="hu"> Magyar</li>
<li><img src="images/se_14.png" alt="se"> Svenska</li>
<li><img src="images/kr_14.png" alt="kr"> 한국어</li>
<li><img src="images/cn_14.png" alt="cn"> 中文</li>
</ul>
<p>More Languages ›</p>
</div>
jQuery
$(document).ready(function() {
$( "#langflag" ).hover(function() {
$( ".select-lang" ).slideToggle( 400, function() {
// Animation complete.
});
});
});
Fiddle here.


$( "#langflag" ).on('mouseenter', function() {
$( ".select-lang" ).slideToggle( 400, function() {
// Animation complete.
});
});
//keep it open if mouse is within #langflag, hide if mouse leaves both
$( ".select-lang, #langflag" ).on('mouseleave', function() {
if ($(this).attr('id') != 'langflag') {
$( ".select-lang" ).slideToggle( 400, function() {
// Animation complete.
});
}
});

Related

JQuery bxslider wrong calculation after scale container for horizontal mode

Hi I have a bxslider which is in a transformed/scaled container. How can I correct the calculation of the slide position. It seems like a normal reload doesn't affect the calculation when its container is scaled.
//EDIT: I found out that this problem effects not the fade mode of the bxslider, so this could be a workaround...
How can the horizontal mode of the bxslider be fix, when the whole container got scaled down?
See my example: http://jsfiddle.net/wittich/umgwrh3b/
HTML
<div class="container">
<ul class="bxslider">
<li><img src="http://bxslider.com/images/730_200/hill_road.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
</ul>
<ul class="bxslider">
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/hill_road.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/trees.jpg" /></li>
</ul>
</div>
<p>Click to reload slider</p>
JS
jQuery(document).ready(function(){
var sliders = [];
jQuery('.bxslider').each(function(i,item){
var slider = $(this);
slider.bxSlider({
auto: true,
mode: 'horizontal'
});
sliders[i] = slider;
});
$('.container').css('transform', 'scale(0.8)');
$(sliders).each(function(){
this.reloadSlider();
});
$('#reload-slider').click(function(e){
e.preventDefault();
$(sliders).each(function(){
this.reloadSlider();
});
});
});

Jquery Auto Slider with buttons

Can anyone recommend any good product auto slider with buttons. I am new to jquery so any good easy jquery slider would be fine. I am looking to build this kind of slider
.And when click on the image then it should open the clicked image with description like this . Any help of how can i make this slider would be appreciated thanks in the advance.

popup: colorbox
slider: elastislide-responsive-carousel
http://jsfiddle.net/ckraoftt/1/
HTML:
<div class="column">
<ul id="carousel" class="elastislide-list">
<li><img src="img44" alt="image04" /></li>
<li><img src="img33" alt="image03" /></li>
<li><img src="img22" alt="image02" /></li>
<li><img src="img11" alt="image01" /></li>
</ul>
</div>
JQ:
$( '#carousel' ).elastislide( {
orientation : 'vertical'
} );
$('#carousel a').colorbox({photo :true});
EDIT2:
http://jsfiddle.net/ckraoftt/7/
for all a tag add 2 attr:
data-txt="image 4 4000$" //text after image
data-button-url="http://test.com/shop/4" //url for button Shop
JQ
$( '#carousel' ).elastislide( {
orientation : 'vertical'
} );
$('#carousel a').colorbox({
html:function(){
var src=$(this).attr('href');
var txt=$(this).attr('data-txt');
var url=$(this).attr('data-button-url');
var img='<img src="'+src+'">';
var text= '<div class="pp_txt">'+txt+'</div>';
var btn='<a class="pp_btn" href="'+url+'">SHOP</a>';
var html='<div class="popup">'+img+text+btn+'</div>';
return html;
}

jQuery - If left <= 0, set css to X amount

I've created a scrolling script but i need it to loop when a set div gets to so many pixels to the left, here's my script to do it all but there's no such luck in getting it to work.
var scrollerwidth = 0;
$(window).load(function () {
$('.scroller ul li').each(function() {
scrollerwidth += ($(this).width() + 40);
});
$(".scrollerTwo").css({left: scrollerwidth});
ulScrolls();
});
function ulScrolls(){
$(".scroller, .scrollerTwo").animate({'left': '-=10px'}, 100);
ulScrolls();
}
$(document).ready(function() {
var scrollertwoleft = $(".scrollerTwo").offset().left;
scrollertwoleft = parseInt(scrollertwoleft, 10);
scrollerwidth = parseInt(scrollerwidth, 10);
if(scrollertwoleft <= 100){
$(".scroller").css({left: scrollerwidth});
alert("derp");
}else{
alert(scrollertwoleft);
}
});
Also here's the html that it's putting out(note that the jQuery generates the left positions
<div id="homeSponsorsContent">
<div class="scroller" style="left: -990px;">
<ul>
<li><img src="images/abplogo.png"></li>
<li><img src="images/ansellogo.png"></li>
<li><img src="images/balfourlogo.png"></li>
<li><img src="images/beallogo.png"></li>
<li><img src="images/nhslogo.png"></li>
<li><img src="images/consortlogo.png"></li>
<li><img src="images/brocklesbylogo.png"></li>
<li><img src="images/bupalogo.png"></li>
<li><img src="images/greenergylogo.png"></li>
<li><img src="images/hullcitylogo.png"></li>
<li><img src="images/wittlogo.png"></li>
<li><img src="images/outredlogo.png"></li>
<li><img src="images/omglogo.png"></li>
<li><img src="images/manchesterlogo.png"></li>
<li><img src="images/northumbrialogo.png"></li>
<li><img src="images/mimaslogo.png"></li>
</ul>
</div>
<div class="scrollerTwo" style="left: 2164px;">
<ul>
<li><img src="images/abplogo.png"></li>
<li><img src="images/ansellogo.png"></li>
<li><img src="images/balfourlogo.png"></li>
<li><img src="images/beallogo.png"></li>
<li><img src="images/nhslogo.png"></li>
<li><img src="images/consortlogo.png"></li>
<li><img src="images/brocklesbylogo.png"></li>
<li><img src="images/bupalogo.png"></li>
<li><img src="images/greenergylogo.png"></li>
<li><img src="images/hullcitylogo.png"></li>
<li><img src="images/wittlogo.png"></li>
<li><img src="images/outredlogo.png"></li>
<li><img src="images/omglogo.png"></li>
<li><img src="images/manchesterlogo.png"></li>
<li><img src="images/northumbrialogo.png"></li>
<li><img src="images/mimaslogo.png"></li>
</ul>
</div>
</div>
live Demo
I'd appreciate any help on the matter, thank you

repeated call of ulScrolls should something like
setTimeout(function() { ulScrolls() }, 120);
to prevent call stack exceeding and to give time for animation to work.
checking for .scroller and .scrollerTwo CSS left value should be in ulScrolls.
li width set to "45px" for testing.
Fiddle
So in total code should look like:
var scrollerwidth = 0;
$(document).ready(function()
{
$('.scroller ul li').each(function()
{
scrollerwidth += $(this).width() + 40;
});
$(".scrollerTwo").css({left: scrollerwidth});
ulScrolls();
});
function ulScrolls()
{
var scrollertwoleft = parseInt($(".scrollerTwo").css('left'));
if (scrollertwoleft <= -scrollerwidth)
{
$(".scrollerTwo").css({left: scrollerwidth});
}
else
{
var scrolleroneleft = parseInt($(".scroller").css('left'));
if (scrolleroneleft <= -scrollerwidth)
{
$(".scroller").css({left: scrollerwidth});
}
}
$(".scroller, .scrollerTwo").animate({'left': '-=10px'}, 100);
setTimeout(function() { ulScrolls(); }, 120);
}

Window.load works only after browser tab change

I am using flex slider with multiple instance, the first slider works fine, but other slides are only showing correctly after changed browser tab and get back, but second slide's thumbnails show after only changed browser tab again.
How can I make them work same time, I mean they should be working when page loads first time.
Here is my code
<script>
$(window).load(function() {
// The slider being synced must be initialized first
$('#carousel').flexslider({
animation : "slide",
controlNav : false,
animationLoop : false,
slideshow : false,
itemWidth : 220,
itemMargin : 5,
asNavFor : '#slider'
});
$('#slider').flexslider({
animation : "slide",
controlNav : false,
animationLoop : false,
slideshow : false,
sync : "#carousel"
});
$('#slider2').flexslider({
animation : "slide",
controlNav : false,
animationLoop : false,
slideshow : false
});
$('#carousel2').flexslider({
animation : "slide",
controlNav : false,
animationLoop : false,
slideshow : false,
itemWidth : 220,
itemMargin : 5,
asNavFor : '#slider2'
});
</script>
<html>
<div id="slider" class="flexslider">
<ul class="slides">
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_caramel.jpg"
style="height: 580px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_cheesecake_brownie.jpg"
style="height: 580px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_donut.jpg"
style="height: 580px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_lemon.jpg"
style="height: 580px;" /></li>
<!-- items mirrored twice, total of 12 -->
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_caramel.jpg"
style="height: 580px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_cheesecake_brownie.jpg"
style="height: 580px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_donut.jpg"
style="height: 580px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_lemon.jpg"
style="height: 580px;" /></li>
</ul>
</div>
<div id="carousel" class="flexslider flex_carousel">
<div class="carousel_icon"></div>
<ul class="slides pull-left">
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_caramel.jpg"
style="height: 80px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_cheesecake_brownie.jpg"
style="height: 80px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_donut.jpg"
style="height: 80px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_lemon.jpg"
style="height: 80px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_caramel.jpg"
style="height: 80px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_cheesecake_brownie.jpg"
style="height: 80px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_donut.jpg"
style="height: 80px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_lemon.jpg"
style="height: 80px;" /></li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
</html>
********* EDITED **********
You can see it online here http://goo.gl/cHMaBq
First tab (one star) works perfect.
There is no image on second tab, please go to another browser tab and return , you will see the slider works, but no thumbnail. Please go to another browser tab again and return, thumbnails will be shown.
Thanks

I've fixed it, pictures were rendered, but don't show until I resize browser.
So , this problem has been fixed this issue.
$('a[data-toggle="tab"]').click(function() {
setTimeout(function() {
$(window).trigger('resize');
}, 0);
setTimeout(function() {
$(window).trigger('resize');
}, 2)
});

Image Gallery carousel from right to left direction not working when changing css properties

I am working on an image gallery and it works fine for the English version but i need to replicate same for the other version of the website and need to make it work in RTL direction. When i css 'direction:rtl' it breaks the thumbnail script and next | prev navigation doesn't work anymore.
I tried to change many a thing but none seems to work i even made some minor changes to the gallery.js but that didn't even fix the issue.
I am not sure how to create a make everything work for thumbnail carousel when direction:rtl.
I need this for Arbic version of website and Arabic is RTL not like English which is LTR.
Fiddle Link http://jsfiddle.net/f4XDj/
Updated Link http://jsfiddle.net/f4XDj/1/
Actual gallery sample link http://tympanus.net/Tutorials/ResponsiveImageGallery/
Partial HTML Code
<div id="rg-gallery" class="rg-gallery">
<div class="rg-thumbs">
<!-- Elastislide Carousel Thumbnail Viewer -->
<div class="es-carousel-wrapper">
<div class="es-nav">
<span class="es-nav-prev">Previous</span>
<span class="es-nav-next">Next</span>
</div>
<div class="es-carousel">
<ul>
<li><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></li>
<li><img src="images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale" /></li>
<li><img src="images/thumbs/3.jpg" data-large="images/3.jpg" alt="image03" data-description="A plaintful story from a sistering vale" /></li>
<li><img src="images/thumbs/4.jpg" data-large="images/4.jpg" alt="image04" data-description="My spirits to attend this double voice accorded" /></li>
<li><img src="images/thumbs/5.jpg" data-large="images/5.jpg" alt="image05" data-description="And down I laid to list the sad-tuned tale" /></li>
<li><img src="images/thumbs/6.jpg" data-large="images/6.jpg" alt="image06" data-description="Ere long espied a fickle maid full pale" /></li>
<li><img src="images/thumbs/7.jpg" data-large="images/7.jpg" alt="image07" data-description="Tearing of papers, breaking rings a-twain" /></li>
<li><img src="images/thumbs/8.jpg" data-large="images/8.jpg" alt="image08" data-description="Storming her world with sorrow's wind and rain" /></li>
<li><img src="images/thumbs/9.jpg" data-large="images/9.jpg" alt="image09" data-description="Upon her head a platted hive of straw" /></li>
<li><img src="images/thumbs/10.jpg" data-large="images/10.jpg" alt="image10" data-description="Which fortified her visage from the sun" /></li>
<li><img src="images/thumbs/11.jpg" data-large="images/11.jpg" alt="image11" data-description="Whereon the thought might think sometime it saw" /></li>
<li><img src="images/thumbs/12.jpg" data-large="images/12.jpg" alt="image12" data-description="The carcass of beauty spent and done" /></li>
<li><img src="images/thumbs/13.jpg" data-large="images/13.jpg" alt="image13" data-description="Time had not scythed all that youth begun" /></li>
<li><img src="images/thumbs/14.jpg" data-large="images/14.jpg" alt="image14" data-description="Nor youth all quit; but, spite of heaven's fell rage" /></li>
<li><img src="images/thumbs/15.jpg" data-large="images/15.jpg" alt="image15" data-description="Some beauty peep'd through lattice of sear'd age" /></li>
<li><img src="images/thumbs/16.jpg" data-large="images/16.jpg" alt="image16" data-description="Oft did she heave her napkin to her eyne" /></li>
<li><img src="images/thumbs/17.jpg" data-large="images/17.jpg" alt="image17" data-description="Which on it had conceited characters" /></li>
<li><img src="images/thumbs/18.jpg" data-large="images/18.jpg" alt="image18" data-description="Laundering the silken figures in the brine" /></li>
<li><img src="images/thumbs/19.jpg" data-large="images/19.jpg" alt="image19" data-description="That season'd woe had pelleted in tears" /></li>
<li><img src="images/thumbs/20.jpg" data-large="images/20.jpg" alt="image20" data-description="And often reading what contents it bears" /></li>
<li><img src="images/thumbs/21.jpg" data-large="images/21.jpg" alt="image21" data-description="As often shrieking undistinguish'd woe" /></li>
<li><img src="images/thumbs/22.jpg" data-large="images/22.jpg" alt="image22" data-description="In clamours of all size, both high and low" /></li>
<li><img src="images/thumbs/23.jpg" data-large="images/23.jpg" alt="image23" data-description="Sometimes her levell'd eyes their carriage ride" /></li>
<li><img src="images/thumbs/24.jpg" data-large="images/24.jpg" alt="image24" data-description="As they did battery to the spheres intend" /></li>
</ul>
</div>
</div>
<!-- End Elastislide Carousel Thumbnail Viewer -->
</div><!-- rg-thumbs -->
</div><!-- rg-gallery -->

I write new rule for a your example from tympanus and for me working:
.rg-caption p {
direction: rtl;
}
and I delete this rule:
.rg-caption{
text-align: center;
}
so if you would change a direction in carousel you must change this part:
$navPrev.bind('click.rgGallery', function( event ) {
_navigate( 'left' );
return false;
});
$navNext.bind('click.rgGallery', function( event ) {
_navigate( 'right' );
return false;
});
// add touchwipe events on the large image wrapper
$imgWrapper.touchwipe({
wipeLeft : function() {
_navigate( 'right' );
},
wipeRight : function() {
_navigate( 'left' );
},
preventDefaultEvents: false
});
$(document).bind('keyup.rgGallery', function( event ) {
if (event.keyCode == 39)
_navigate( 'right' );
else if (event.keyCode == 37)
_navigate( 'left' );
});
}
},
_navigate = function( dir ) {
// navigate through the large images
if( anim ) return false;
anim = true;
if( dir === 'right' ) {
if( current + 1 >= itemsCount )
current = 0;
else
++current;
}
else if( dir === 'left' ) {
if( current - 1 < 0 )
current = itemsCount - 1;
else
--current;
}

Categories

Resources