Display div on "mouseenter" and remove inner div on "click" - javascript

I have a mouseenter event on two elements. The mouseenter shows a div with content; And in each div is a button in which I'd like to attach a event to listen for a click or tap which would allow to remove itself i.e. the div.
This is the script in jQuery:
$(function() {
var $subnav = $('.subnav');
$("#discover #watch").on({
mouseenter: function(e) {
$subnav.show();
$(".close").on('click tap', function(e) {
if ($subnav) $subnav.hide();
else $subnav.show();
});
},
mouseleave: function() {
$subnav.hide();
}
});
$(function() {
var $subnav = $('.subnav');
$("#discover #watch").on({
mouseenter: function(e) {
$subnav.show();
$(".close").on('click tap', function(e) {
if ($subnav) $subnav.hide();
else $subnav.show();
});
},
mouseleave: function() {
$subnav.hide();
}
});
});
header nav ul:not(:hover).discover-active .discover .nav-category {
color: #ef4b4b;
}
nav ul li .nav-category {
padding: 0 15px 0 30px;
height: 58px;
position: relative;
}
nav ul:not(:hover).discover-active .discover .nav-category:before {
background-color: #ef4b4b;
content: "";
position: absolute;
left: 0;
height: 4px;
width: 100%;
}
header nav .nav-categories .nav-category-and-subnav.discover:hover .nav-category:before {
background-color: #ef4b4b;
content: "";
position: absolute;
left: 0;
height: 4px;
width: 100%;
}
header nav .nav-categories .nav-category-and-subnav.watch:hover .nav-category:before {
background-color: #e5059a;
content: "";
position: absolute;
left: 0;
height: 4px;
width: 100%;
}
.discover .subnav,
.watch .subnav,
.global-site-switch .subnav {
display: none;
}
.discover .subnav img {
width: 100%;
}
header nav .nav-categories .nav-category-and-subnav.discover:hover .subnav {
background-color: #000;
position: fixed;
display: block;
left: 0;
right: 0;
margin: 0 auto;
top: 59px;
height: 530px;
width: 635px;
}
header nav .nav-categories .nav-category-and-subnav.watch:hover .subnav {
background-color: #000;
position: fixed;
display: block;
left: 0;
right: 0;
margin: 0 auto;
top: 59px;
height: 530px;
width: 635px;
}
<nav>
<ul class="nav-categories discover-active">
<li class="nav-category-and-subnav discover">
<div id="discover" class="nav-category">
<span class="nav-category-padding">Discover</span>
<i class="fa fa-angle-down" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="1792" height="1792" viewBox="0 0 1792 1792">
<path d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10L407 759q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"></path>
</svg>
</i>
<div class="subnav">
<img src="images/thisweek.jpg">
<p class="close">X</p>
</div>
</div>
</li>
<li class="nav-category-and-subnav watch">
<div id="watch" class="nav-category">
<span class="nav-category-padding">Watch</span>
<i class="fa fa-angle-down" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="1792" height="1792" viewBox="0 0 1792 1792">
<path d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10L407 759q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"></path>
</svg>
</i>
<div class="subnav">
<div class="column">
Original Series
</div>
<div class="column">
Trending Videos
</div>
<p class="close">X</p>
</div>
</div>
</li>
</ul>
</nav>
What am I doing wrong?
UPDATE
Apparently I had to update the script because I didn't realize their was CSS code which was conflicting with the JS. As a work around I have to use the jQuery selectors to actually select the :hover states. This script works but only once.
$(document).ready(function() {
var $subnav = $('.subnav');
$(".close").on('click tap', function(e) {
if (!$subnav) {
$subnav.show();
}
$subnav.hide();
});
$('.discover:hover, .watch:hover').on({
mouseenter: function() {
if (!$subnav) {
$subnav.show();
}
$subnav.hide();
},
mouseleave: function() {
if ($subnav) {
$subnav.hide();
}
$subnav.show();
}
}

If you want to use pure JavaScript, you need to:
Make sure both your subnav divs are hidden by default by adding a display:none; css property to your subnav divs.
You can then use getComputedStyle() to retrieve that display property value and based on that retrieved value, you can go ahead and toggle the subnav display property whenever a mouseenter or mouseleave event is triggered.
Finally, you can use the parentElement() property to close the parent subnav div whenever the child X element is clicked.
You can check out a practical example of what I described above in this jsFiddle or in the Code Snippet below:
var discover = document.getElementById("discover");
var watch = document.getElementById("watch");
var close = document.querySelectorAll(".close");
function openSub(e) {
var subNav = e.target.childNodes[5];
var x = window.getComputedStyle(subNav);
if (x.display == "none") {
subNav.style.display = "block";
} else {
subNav.style.display = "none";
}
}
function closeSub(e) {
var subNav = e.target.childNodes[5];
subNav.style.display = "none";
}
discover.addEventListener("mouseenter", openSub);
watch.addEventListener("mouseenter", openSub);
discover.addEventListener("mouseleave", closeSub);
watch.addEventListener("mouseleave", closeSub);
function btnSub(e) {
e.target.parentElement.style.display = "none";
}
close.forEach(btn => {
btn.addEventListener("click", btnSub);
});
.subnav { background: green;display: none;}
<nav>
<ul>
<li>
<div id="discover" class="nav-category">
<span>Discover</span>
<p>
SVG here
</p>
<div class="subnav">
<p>
IMG here
</p>
<p class="close">X</p>
</div>
</div>
</li>
<hr>
<li>
<div id="watch" class="nav-category">
<span>Watch</span>
<p>
SVG here
</p>
<div class="subnav">
<div class="column">
Original Series
</div>
<div class="column">
Trending Videos
</div>
<p class="close">X</p>
</div>
</div>
</li>
</ul>
</nav>

Please add a comma in between the two id selectors => #discover, #watch. Wrap the code in document ready to be safe and put the close event handler outside the mouse enter / leave so it only applies it once. See code below:
$(document).ready(function () {
var $subnav = $('.subnav');
$(".close").on('click tap', function (e) {
if ($subnav) $subnav.hide();
else $subnav.show();
});
$("#discover, #watch").on({
mouseenter: function (e) {
$subnav.show();
},
mouseleave: function () {
$subnav.hide();
}
});
});

You need to find the button within the context of the clicked element:
$(e.target).find(".close").on ....

Take the .close click event listener out of the existing mouseenter listener, and target the parent element.
$(".close").on('click tap', function(e) {
$(this).parent().hide();
});
UPDATED SOLUTION
I also removed the conditional statement, as if the .close element can only be clicked if the parent is visible, so there's no need to watch for a "hidden parent"

Related

Executing a hover function based on the class of the body in jQuery

I have a hover function that shows text on hover over certain links and it works fine. However, I am trying to execute this function only if the body does not have the class user-is-touching. Is this possible at all and if so how do I go about it?
$(".o-c").hover(function() {
$('.home-o-c').show();
$('.home-i-t').hide();
}, function() {
$('.home-o-c').hide();
$('.home-i-t').show();
});
$(".c-f").hover(function() {
$('.home-c-f').show();
$('.home-i-t').hide();
}, function() {
$('.home-c-f').hide();
$('.home-i-t').show();
});
$(".i-c").hover(function() {
$('.home-i-c').show();
$('.home-i-t').hide();
}, function() {
$('.home-i-c').hide();
$('.home-i-t').show();
});
$(".c-u").hover(function() {
$('.home-c-u').show();
$('.home-i-t').hide();
}, function() {
$('.home-c-u').hide();
$('.home-i-t').show();
});
window.addEventListener('touchstart', function onFirstTouch() {
// we could use a class
document.body.classList.add('user-is-touching');
// or set some global variable
window.USER_IS_TOUCHING = true;
// or set your app's state however you normally would
// we only need to know once that a human touched the screen, so we can stop listening now
window.removeEventListener('touchstart', onFirstTouch, false);
}, false);
$(".o-c").click(function() {
if ($('body').hasClass('user-is-touching')) {
$('.home-o-c').show();
} else {
$('html, body').animate({
scrollTop: $(".our-company").offset().top
}, 2000);
}
});
$(".c-f").click(function() {
if ($('body').hasClass('user-is-touching')) {
$('.home-c-f').show();
$('.home-o-c').hide();
$('.home-i-c').hide();
$('.home-c-u').hide();
$('.home-i-t').hide();
} else {
$('html, body').animate({
scrollTop: $(".cf2").offset().top
}, 2000);
}
});
.left-fill {
background: #0000006b;
height: 100vh;
}
.right-fill {
background: pink;
height: 100vh;
}
.vc_col-sm-6 {
width: 50%;
float: left;
}
.pivot-nav {
list-style: none;
font-family: 'Montserrat';
text-align: left;
}
.pivot-nav li a {
font-size: 1.6rem;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
position: relative;
color: #fff;
text-decoration: none;
line-height: 40px;
}
.pivot-nav li a.default-underline::after,
.pivot-nav li a:hover::after {
width: 100%;
}
.pivot-nav:hover a.default-underline:not(:hover)::after {
width: 0;
}
.pivot-nav li a::after {
bottom: 0;
content: "";
display: block;
height: 4px;
position: absolute;
background: #fff;
transition: width 0.3s ease 0s;
width: 0;
}
.home-o-c,
.home-c-f,
.home-i-c,
.home-c-u {
display: none;
}
.our-company {
clear: both;
display: block;
height: 50vh;
}
.cf2 {
clear: both;
display: block;
height: 50vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div class="left-fill text-left wpb_column vc_column_container vc_col-sm-6">
<div class="wpb_wrapper">
<p class="home-i-t">TEXT One</p>
<p class="home-o-c">TEXT One</p>
<p class="home-c-f">TExt for C f.</p>
<p class="home-i-c">Some more text fo i c.</p>
<p class="home-c-u">Get in touch </p>
</div>
</div>
<div class="home-fill right-fill text-right wpb_column vc_column_container vc_col-sm-6">
<div class="wpb_wrapper">
<ul class="pivot-nav">
<li class="pivot-nav-item"><a class="o-c default-underline" href="#" data-toggle="my-scrollspy-2">O C</a></li>
<li class="pivot-nav-item"><a class="c-f" href="#" data-toggle="my-scrollspy-2">C F</a></li>
<li class="pivot-nav-item"><a class="i-c" href="#" data-toggle="my-scrollspy-2">I C</a></li>
<li class="pivot-nav-item" data-toggle="my-scrollspy-2"><a class="c-u" href="#">C U</a></li>
</ul>
</div>
</div>
<div class="our-company">
Our Company Scroll Down
</div>
<div class="cf2">
cf2 Scroll Down
</div>
</body>
You can unbind events when you are adding user-is-touching class to body.
example
$(".c-f").unbind('mouseenter').unbind('mouseleave')
OR
$(".c-f").off('mouseenter').off('mouseleave')
Update
Refer this snippet
// Replace this event listener with your hover listeners
window.addEventListener('touchstart', function onFirstTouch() {
// we could use a class
document.body.classList.add('user-is-touching');
// or set some global variable
window.USER_IS_TOUCHING = true;
// or set your app's state however you normally would
// Remove mouse-related events here
$(".o-c, .c-f, .i-c, .c-u").unbind('mouseenter').unbind('mouseleave')
// we only need to know once that a human touched the screen, so we can stop listening now
window.removeEventListener('touchstart', onFirstTouch, false);
}, false);
You need to update your html code to have data-attr property update code below
<li class="pivot-nav-item"><a data-attr="o-c" class="o-c default-underline" href="#"
data-toggle="my-scrollspy-2">O C</a></li>
<li class="pivot-nav-item"><a data-attr="c-f" class="c-f" href="#" data-toggle="my-scrollspy-2">C F</a></li>
<li class="pivot-nav-item"><a data-attr="i-c" class="i-c" href="#" data-toggle="my-scrollspy-2">I C</a></li>
<li class="pivot-nav-item" data-toggle="my-scrollspy-2"><a data-attr="c-u" class="c-u" href="#">C U</a></li>
You can use more complex selectors
$('body:not(.user-is-touching) .c-u')
Or you could add "IF" statement inside handlers
etc:
if(!$('body').hasClass('user-is-touching')) { /* do stuff */ }

animate() doesn't work all the time

I am trying to create a simple slider with jQuery.
$('.next').on('click', function() {
$('li').animate({'right': '400px'}, 300);
});
$('.back').on('click', function() {
$('li').animate({'left': 0}, 300);
});
The problem is when I click on the bottom with the class next, it only slides once and the second click doesn't work.
How can I fix this?
https://jsfiddle.net/6t1wx95f/
Simple, with $('li').animate({'left': '-=400px'}, 300); for next.
$('.next').on('click', function() {
$('li').animate({'left': '-=400px'}, 300);
});
$('.back').on('click', function() {
if(parseInt($('li').css('left')) <= 0){
if(parseInt($('li').css('left')) >= -400){
$('li').animate({'left': "0"}, 300);
} else {
$('li').animate({'left': '+=400px'}, 300);
}
}
});
.slider {
overflow: hidden;
width: 500%;
}
.slider ul {
width: 500%;
}
.slider ul li {
float: left;
list-style: none;
position: relative;
transition: all 0.65s;
}
.next,
.back {
width: 100px;
padding: 5px;
text-align: center;
background-color: skyblue;
float: left;
margin: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<ul>
<li>
<img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="" class="active">
</li>
<li>
<img src="https://www.w3schools.com/css/img_lights.jpg" alt="">
</li>
<li>
<img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" alt="">
</li>
<li>
<img src="http://images.all-free-download.com/images/graphiclarge/a_london_cityscape_515129.jpg" alt="">
</li>
<li>
<img src="https://image.jimcdn.com/app/cms/image/transf/dimension=1920x400:format=jpg/path/s86d6d6c688ca86fa/image/ie4265a3cd27b2997/version/1451246087/image.jpg" alt="">
</li>
</ul>
</div>
<div class="back">Back</div>
<div class="next">Next</div>
Your code just adds a single left: and right: style to the element. It doesn't remove/reset these values so it only ever does anything n first click:
$('.next').on('click', function() {
$('li').animate({'right': '400px'}, 300);
});
$('.back').on('click', function() {
$('li').animate({'left': 0}, 300);
});
What you need to do is only animate either the left or the right (by using positive and negative values), not both, e.g.
$('.next').on('click', function() {
$('li').animate({'right': '400px'}, 300);
});
$('.back').on('click', function() {
$('li').animate({'right': 0}, 300);
});
Of course this won't make the thing work entirely (you'll need to increment/decrement the amount you're moving by if you want to animate each slide) but hopefully it points you in the right direction.

how to detect if mouseenter or mouseleave

I am trying to achieve an effect of looping through images if a div is hovered or not.
If mouseenter div then cycle through images
if mouseleave div then stop cycling through images and remove all images (only background image will be visible).
currently I am using a setTimeout to fire itself recursively but I am having trouble with jquery on detecting if the mouse is hovering or left the object.
function logoImageLoop() {
$(".one-box .social_gallery .social_img:first").show().next(".social_img").hide().end().appendTo(".one-box .social_gallery");
};
var oneBoxIsHover = false;
$(".one-box").mouseenter(function(){
timeout();
function timeout() {
setTimeout(function(){
logoImageLoop();
timeout();
}, 100);
};
});
Here is a codepen for reference: http://codepen.io/H0BB5/pen/xEpqbv
A similar effect I am trying to achieve can be seen when hovering the cargo logo on this website: http://cargocollective.com/
You just need to clear the timer on mouseleave.
var timer = null;
$(".one-box").mouseenter(function(){
timeout();
function timeout() {
timer = setTimeout(function(){
logoImageLoop();
timeout();
}, 100);
};
}).mouseleave(function(){
clearTimeout(timer);
});
Here's a codepen: http://codepen.io/anon/pen/rrpwYJ
I would use an interval, and the JQuery .hover() functionality. Simply replacing your $(".one-box").mouseenter() with this will run the loop while you're hovered and remove it once your mouse leaves the area.
The important bit:
var imageChangeInterval;
$(".one-box").hover(function() {
imageChangeInterval = setInterval(function() {
logoImageLoop();
}, 100);
}, function() {
clearInterval(imageChangeInterval);
});
Full example:
function logoImageLoop() {
$(".one-box .social_gallery .social_img:first").show().next(".social_img").hide().end().appendTo(".one-box .social_gallery");
};
var oneBoxIsHover = false;
// New code:
var imageChangeInterval;
$(".one-box").hover(function() {
imageChangeInterval = setInterval(function() {
logoImageLoop();
}, 100);
}, function() {
clearInterval(imageChangeInterval);
});
.one-box {
position: relative;
height: 300px;
width: 300px;
}
.one-box a {
width: 100%;
}
.one-box a img {
max-width: 100%;
}
/* .social_img { display: none; } */
a#social_logo {
background-image: url(https://s3-us-west-2.amazonaws.com/staging-site-assets/one-method/instagram-logo.png);
background-repeat: no-repeat;
background-position: 0 0;
display: block;
position: absolute;
width: 73px;
height: 73px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
.one_box .social_gallery {
position: absolute;
left: 0;
top: 0;
opacity: 1;
display: none;
}
.nav_logo .social_gallery .social_img {
position: absolute;
float: none;
margin: 0;
opacity: 1;
filter: alpha(opacity=100);
overflow: hidden;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one-box nav_logo">
<a id="social_logo" href="#" alt=""></a>
<div class="social_gallery img_wall gallery">
<div class="social_img wall_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=222&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
<div class="social_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=fb2&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
<div class="social_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=777&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
<div class="social_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=fb2&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
</div>
<div>

Cycle through jQuery lightbox photos [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm having trouble knowing how to build the functionality to be able to click to scroll through my photos in the lightbox. I'm thinking a solution could be to iterate through each one and go to the next index with each click, but I'm not sure how to do it. I'm new to programming and am trying to build from scratch without a plugin. My code is below, and I've included a link so you can see the project so far.
https://abharms.github.io/Interactive_Photo_Gallery/
HTML
<body>
<div class="form-container">
<form>
<input type="text" name="search" value="Search">
</form>
</div>
<div class="photos-container">
<div class="row">
<div class="col-3 images">
<img src="photos/thumbnails/01.jpg" alt="I love hay bales. Took this snap on a drive through the countryside past some straw fields.">
<img src="photos/thumbnails/02.jpg" alt="The lake was so calm today. We had a great view of the snow on the mountains from here.">
<img src="photos/thumbnails/03.jpg" alt="I hiked to the top of the mountain and got this picture of the canyon and trees below.">
</div>
<div class="col-3 images">
<img src="photos/thumbnails/04.jpg" alt="It was amazing to see an iceberg up close, it was so cold but didn’t snow today.">
<img src="photos/thumbnails/05.jpg" alt="The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons.">
<img src="photos/thumbnails/06.jpg" alt="Fall is coming, I love when the leaves on the trees start to change color.">
</div>
<div class="col-3 images">
<img src="photos/thumbnails/07.jpg" alt="I drove past this plantation yesterday, everything is so green!">
<img src="photos/thumbnails/08.jpg" alt="My summer vacation to the Oregon Coast. I love the sandy dunes!">
<img src="photos/thumbnails/09.jpg" alt="We enjoyed a quiet stroll down this countryside lane. ">
</div>
<div class="col-3 images">
<img src="photos/thumbnails/10.jpg" alt="Sunset at the coast! The sky turned a lovely shade of orange.">
<img src="photos/thumbnails/11.jpg" alt="I did a tour of a cave today and the view of the landscape below was breathtaking.">
<img src="photos/thumbnails/12.jpg" alt="I walked through this meadow of bluebells and got a good view of the snow on the mountain before the fog came in.">
</div>
</div>
</div>
<script type="text/javascript" src="js/gallery.js"></script>
</body>
CSS
form {
text-align: center;
margin-top: 30px;
}
input[type=text] {
height: 32px;
width: 58%;
border: 2px solid lightgray;
border-radius: 4px;
}
input[type=text]:focus {
outline: none;
}
img {
display: block;
margin: 0 auto 30px auto;
}
.col-3 {
text-align: center;
}
.col-3:first-child {
margin-top: 30px;
}
#overlay {
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
}
#overlay img {
width: 50%;
margin-top: 10%;
}
.imageContainer {
max-height: 100%
width: 600px;
margin: 0 auto;
position: relative;
}
#caption {
color: white;
margin: 0 auto;
text-align: center;
max-width: 600px;
}
a.leftArrow,
a.rightArrow {
padding: 15px;
}
.leftArrow,
.rightArrow {
color: white;
font-size: 56px;
position: absolute;
top: 22%;
}
.leftArrow {
left: 12%;
}
.rightArrow {
right: 12%;
}
#media only screen and (min-width: 820px ) {
.row {
margin-top: 40px;
}
.photos-container {
width: 100%;
margin: 0 auto;
}
.col-3 {
width: 25%;
float: left;
}
.col-3:first-child {
margin-top: 0;
}
input[type=text] {
width: 460px;
}
.leftArrow,
.rightArrow {
top: 35%;
}
.leftArrow {
left: 18%;
}
.rightArrow {
right: 18%;
}
#media only screen and (min-width: 960px) {
.photos-container {
width: 980px;
}
.leftArrow,
.rightArrow {
top: 40%;
}
.leftArrow {
left: 20%;
}
.rightArrow {
right: 20%;
}
}
jQuery
var $overlay = $('<div id="overlay"></div>');
var $imageContainer = $('<div class="imageContainer"></div>')
var $caption = $('<p id="caption"></p>');
var $image = $("<img>");
var $leftArrow = $('<a href="#" class="leftArrow" onclick="prev(); return false;"><i class="fa fa-angle-left" aria-hidden="true"></i>');
var $rightArrow = $('<a href="#" class="rightArrow" onclick="next(); return false;"><i class="fa fa-angle-right" aria-hidden="true"></i>');
//Add image container to overlay
$overlay.append($imageContainer);
//Add image to overlay
$imageContainer.append($image);
//Add navigation arrows to overlay
$imageContainer.append($leftArrow);
$imageContainer.append($rightArrow);
//Add caption to image
$overlay.append($caption);
//add overlay
$("body").append($overlay);
//capture click event on a link to an image
$(".images a").click(function(event){
event.preventDefault();
var imageLocation = $(this).attr("href");
$image.attr("src", imageLocation);
$overlay.show();
//get child's alt attribute and set caption
var $captionText = $(this).children("img").attr("alt");
$caption.text($captionText);
});
$overlay.click(function(){
$overlay.hide();
})
$(".leftArrow").bind("click", function(e){
e.stopPropagation();
});
$(".rightArrow").bind("click", function(e){
e.stopPropagation();
});
function next() {
$($image).each(function(){
$(this).hide();
$($caption).hide();
$($image).next();
})
}
I updated your script with a working version. Let me know if it does what you want.
I refactored your code a bit by removing next() and prev() onclick handlers. I also move all the code to render image with alt text in a helper function. The cycling logic is exactly like what you expected.
Cheers
var $overlay = $('<div id="overlay"></div>');
var $imageContainer = $('<div class="imageContainer"></div>')
var $caption = $('<p id="caption"></p>');
var $image = $("<img>");
var $leftArrow = $('<a href="#" class="leftArrow"><i class="fa fa-angle-left" aria-hidden="true"></i>');
var $rightArrow = $('<a href="#" class="rightArrow"><i class="fa fa-angle-right" aria-hidden="true"></i>');
var $links = $(".images a");
var current_index;
//Add image container to overlay
$overlay.append($imageContainer);
//Add image to overlay
$imageContainer.append($image);
//Add navigation arrows to overlay
$imageContainer.append($leftArrow);
$imageContainer.append($rightArrow);
//Add caption to image
$overlay.append($caption);
//add overlay
$("body").append($overlay);
//capture click event on a link to an image
$(".images a").click(function(event){
event.preventDefault();
current_index = $links.index($(this));
renderImage($(this));
$overlay.show();
});
$overlay.click(function(){
$overlay.hide();
})
$(".leftArrow").bind("click", function(e){
e.stopPropagation();
var image = $(".images a").eq(--current_index);
renderImage(image);
});
$(".rightArrow").bind("click", function(e){
e.stopPropagation();
var image = $(".images a").eq(++current_index);
renderImage(image);
});
function renderImage($link) {
var imageLocation = $link.attr("href");
var $captionText = $link.children("img").attr("alt");
$caption.text($captionText);
$image.attr("src", imageLocation);
// Hide next arrow if end of images array
if (current_index >= $links.length - 1) {
$rightArrow.hide();
} else {
$rightArrow.show();
}
// Hide prev arrow if beginning of images array
if (current_index <= 0) {
$leftArrow.hide();
} else {
$leftArrow.show();
}
}

How to Animate (slide) content adjacent to content with jquery toggle()

I am setting up a page which the user can hide the side bar if they wish. I am trying to use the jqeuryui to do this with the following js code
// TOGGLE JS
$(function () {
function runEffect() {
var options = {};
$("#effect").toggle('slide', options, 500);
};
$("#button").click(function () {
runEffect();
return false;
});
});
I have this working in a JSFiddle here http://jsfiddle.net/jwg4U/
However, when you look at the JSFiddle you will notice that my main content area which is a DIV called #content does not animate, it just jumps into place when I toggle the sidebar.
I would like the content div to also slide into place seamlessly and follow the toggle as it if it attached to it.
I have looked at jquery animate, but not sure how to implement this with the slide?
A Second part I am struggling with is how to change the button text when the sidebar is closed to say "Show Sidebar" - Weather it is open or closed right now it just says "Hide Sidebar"
Looking for some help
Thanks
See this updated fiddle : http://jsfiddle.net/jwg4U/23/
HTML:
<div id="container" style="width:800px">
<div id="header">
<h1>HEADER</h1>
</div>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<div id="menu" style="background-color:#FFD700;height:300px;width:100px;float:left;">
<h3>SIDEBAR</h3>
</div>
</div>
<div id="content" style="background-color:#EEEEEE;height:300px;">Main Content goes here</div>
</div>
Hide Sidebar
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
FOOTER</div>
</div>
​
JS:
// TOGGLE JS
$(function() {
var i = 0;
function runEffect() {
var options = {};
if (i === 0) {
i = 1;
$(".toggler").animate({
left: -100
}, {
duration: 500
});
}
else {
i = 0;
$(".toggler").animate({
left: 0
}, {
duration: 500
});
}
}
$("#button").click(function() {
if (i === 0) {
$(this).html("Show Sidebar");
}
else {
$(this).html("Hide Sidebar");
}
runEffect();
return false;
});
});
// TABS JS
$(function() {
$("#tabs").tabs();
});​
CSS:
.toggler {
float: left;
position: relative;
}
#button {
padding: .5em 1em;
text-decoration: none;
}
#effect {
position: relative;
float: left;
}
#content{
position: relative;
float: left;
width: 500px;
}
#button{
float: left;
clear: both;
}
#header{
background-color: #000;
color: #FFF;
}​
The jsfiddle for the complete answer : http://jsfiddle.net/jwg4U/22/
$('#effect').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 500,
specialEasing: {
width: 'linear',
height: 'linear'
},
complete: function() {
$("#content").animate(
{ left: '+=100px' },
60,
'easeInQuad',
function ()
{
if(isOpen)
{
isOpen=false;
$("#button").html('Show Sidebar');
}
else
{
isOpen=true;
$("#button").html('Hide Sidebar');
}
});
}
});

Categories

Resources