I am trying to make a div slide into the left of the screen using .animate(). It works initially, but then it doesn't slide back. Only in. Any suggestions as to why it's not working or better solutions would be awesome :)
EDIT: Right now the function below is being called onclick.
$(function() {
toggleMobileMenu = function() {
var menu = $('#mobile-side-menu');
if( menu.css('left', -250) ) {
menu.animate({left: 0}, 400, function(){
positionValue = 0;
});
} else {
menu.animate({'left': '-250'},400);
}
}
});
You are using .css() method as a setter which returns a jQuery object and an object is a truthy value in JavaScript, so your code doesn't reach to the else part. It should be:
if ( menu.css('left') === '-250px' ) {
// ...
}
Below is another way to do the animation if I correctly understand what you want.
See this fiddle: http://jsfiddle.net/ZEH5b/
Mainly this bit...
$(function() {
var block = $("#block");
var slid = false;
block.click(toggleMobileMenu);
function toggleMobileMenu() {
if (slid) {
block.animate({left: "+=250"}, 400, function () { slid = false; });
}
else {
block.animate({left: "-=250"}, 400, function() { slid = true; });
}
}
});
I think the animation, triggered by a button can be made to apply to a menu relatively easily.
CSS
#mobile-side-menu{position:relative;left:-250;display:block;}
HTML
<ul id="mobile-side-menu">
<li>Home</li>
<li>Stuff</li>
<li>Stuff</li>
<li>Stuff</li>
<li>Stuff</li>
<li>Stuff</li>
</ul>
<button id="mobile-menu-move">Show Menu</button>
<button id="mobile-menu-back">Remove Menu</button>
jQuery
$(function () {
var $menu = $('#mobile-side-menu');
var $slideButton = $('#mobile-menu-move');
var $backButton = $('#mobile-menu-back');
$slideButton.on('click', function () {
$menu.animate({
left: "0"
}, 400, function () {});
});
$backButton.on('click', function () {
$menu.animate({
left: "-250"
}, 400, function () {});
});
});
jsFiddle
isnt this easyer done with just css and a onclick event changing the id tag of the div:
#itemclicked{
transition:0.5s; /*also do transitions specific for webkit, moz etc...search google for css transitions*/
margin-left:-250px;
/*and the rest of the css*/
}
and the onclick
onclick="javascript:document.getElementById('item').value='itemclicked'"
Related
I have this almost working but not quite. I just want to be able to keep switching between two unordered list items on a button click fading the first item out as the second fades in. Then do it the opposite way on another click. On the first click it works, as does the second, but I'm not sure where to go after that. The first li item is just a bg image that will change to some text on click, then back to the image on another click. Thanks in advance. T
$(document).ready(function() {
$('#myButton').click( function() {
$('.contentOne').fadeOut( 'slow', function() {
$('.contentTwo').fadeIn('slow', function() {
$('#myButton').click(function() {
$('.contentTwo').fadeOut( 'slow', function() {
$('.contentOne').fadeIn('slow');
});
});
});
});
return false;
});
});
Maybe this can help you:
html
<button id="changeToText">
Change
</button>
<div class="gizBrainButton">
first class
</div>
<div class="gizBrainButton">
first class
</div>
<div class="showGizText" style="display:none;">
Second class
</div>
<div class="showGizText" style="display:none;">
Second class
</div>
js
$('#changeToText').click(function() {
if ($('.gizBrainButton').is(':visible')) {
$('.gizBrainButton').fadeToggle(1000).promise().done(function() {
$('.showGizText').fadeToggle(1000);
});
} else if($('.showGizText').is(':visible')) {
$('.showGizText').fadeToggle(1000).promise().done(function() {
$('.gizBrainButton').fadeToggle(1000);
});
}
});
You could store the state of one of the content parts and toggle visibilty based on that. For example:
$(document).ready(function () {
/** #var boolean */
var isContentOneVisible = true;
/** #var string */
var fadeSpeed = 'slow';
$('#myButton').click(function () {
if (isContentOneVisible) {
$('.contentOne').fadeOut(fadeSpeed);
$('.contentTwo').fadeIn(fadeSpeed);
isContentOneVisible = false;
return;
}
$('.contentOne').fadeIn(fadeSpeed);
$('.contentTwo').fadeOut(fadeSpeed);
isContentOneVisible = true;
});
});
jQuery provides fadeToggle aswell. It would ease implementing your use case as it keeps track of state itself.
I would prefer a lightweight vanilla solution. For example, you could toggle a classname on an element wrapping the elements you want to show and hide. Use CSS to toggle their visibility, possibly using transitions to mimic the effect jQuery implemented.
Below some example code to get you going.
HTML:
<button class='contentToggler'>Show secondary content</button>
<ul class='toggleableContent'>
<li class='toggleableContent__item toggleableContent__item--first'><!-- content --></li>
<li class='toggleableContent__item toggleableContent__item--second'><!-- content --></li>
</ul>
CSS:
.toggleableContent__item {
opacity: 1;
transition: opacity .5s ease;
}
.toggleableContent--isToggled .toggleableContent__item--first,
.toggleableContent__item--second {
opacity: 0;
}
.toggleableContent--isToggled .toggleableContent__item--second {
opacity: 1;
}
Javascript:
document.addEventListener('DOMContentLoaded', function (event) {
var toggler = document.querySelector('.contentToggler');
var toggleableContent = document.querySelector('.toggleableContent');
if (!toggler || !toggleableContent) {
return;
}
toggler.addEventListener('click', function (event) {
toggleableContent.classList.toggle('toggleableContent--isToggled');
});
});
I have the following code in my JS file:
jQuery("document").ready(function (e) {
var menu = e(".menu-container");
var button = e(".menu-functions");
e(window).scroll(function () {
if (e(this)
.scrollTop() > 150) {
menu.addClass("f-nav");
button.addClass("collapse-expand");
button.addClass('collapse');
} else {
menu.removeClass("f-nav");
button.removeClass("collapse");
button.removeClass("expand");
button.removeClass("collapse-expand");
}
});
//problem area
$('#menu-functions').click(function(){
if(button.hasClass('collapse'))
{
button.addClass('expand');
button.removeClass('collapse');
}
if(button.hasClass('expand'))
{
button.addClass('collapse');
button.removeClass('expand');
}
});
});
Now I need to make it so that the part under the // problem area starts to work. I reckon there's a toggleClass in jQuery, right? Some advanced conditions could do the trick, however I'm still learning and I need some help. I also need to find a way to animate() the .menu-container div whether the button state is expand or collapse:
If the button was clicked while it had the expand class
animate the menu from bottom to top with 98px;
If the button was clicked while it had the collapse class
animate the menu from top to bottom with 98px.
EDIT - JSFIDDLE:
jsfiddle.net/rcdhnh7L
Try it like this instead. Don't use e as the var for jQuery, that's just strange. And I simplified the problem area to directly grab the elements you want instead of iterating an existing collection.
jQuery("document").ready(function ($) {
var menu = $(".menu-container");
var button = $(".menu-functions");
$(window).scroll(function () {
if ($(this)
.scrollTop() > 150) {
menu.addClass("f-nav");
button.addClass("collapse-expand");
button.addClass('collapse');
} else {
menu.removeClass("f-nav");
button.removeClass("collapse");
button.removeClass("expand");
button.removeClass("collapse-expand");
}
});
//problem area
$('#menu-functions').click(function () {
$('.menu-functions.collapse').addClass('expand').removeClass('collapse');
$('.menu-functions.expand').addClass('collapse').removeClass('expand');
});
});
Or this should work as well:
//problem area
$('#menu-functions').click(function () {
$('.menu-functions.collapse, .menu-functions.expand').toggleClass('expand collapse');
});
I use mouseenter to input a new html. I face a challenge that I need to return the original style when mouse leave? When mouseleave, I need to remove the new html and use the original html What is the best way to do that?
var eye_disease1 = $('#eye_disease1');
eye_disease1.mouseenter(function () {
eye_disease1.html('<span class="show_li">symptoms</span><span class="show_li_2">diseases</span>').hide().fadeIn();
eye_disease1.css('border', 'none');
}).mouseleave(function () {
// what should I put here to return the original
});
Get the original HTML of eye_disease1 before changing and after mouse leave update HTML.
var eye_disease1 = $('#eye_disease1'),
diseaseHtml = '';
eye_disease1.mouseenter(function () {
if (!diseaseHtml) {
diseaseHtml = eye_disease1.html();
}
eye_disease1.html('<span class="show_li">symptoms</span><span class="show_li_2">diseases</span>').hide().fadeIn();
eye_disease1.css('border', 'none');
}).mouseleave(function () {
diseaseHtml = '';
eye_disease1.html(diseaseHtml);
});
You can all use the addClass
`$("selector").mouseenter(function(){
$(this).addClass("active");
})
$("selector").mouseleave(function(){
$(this).removeClass("active");
})`
var eye_disease1=$('#eye_disease1');
var eye_disease1_html;
eye_disease1.hover(
function() {
eye_disease_1_html = eye_disease1.html();
eye_disease1.html('<span class="show_li">symptoms</span><span class="show_li_2">diseases</span>')
.fadeOut(0)
.css('border','none')
.fadeIn(400);
}, function() {
eye_disease1.find('span.show_li, span.show_li_2')
.fadeOut(400)
.delay(400)
.html(eye_disease1_html)
.fadeIn(0);
}
);
But yeah I would prefer to have all the content inside (original, and the hovered content) there the whole time.
HTML:
<div id="eye_disease1">
<div class="original-content">
Original Content
</div>
<div class="hovered-content">
<span class="show_li">symptoms</span>
<span class="show_li_2">diseases</span>
</div>
</div>
CSS:
.hovered-content {
display: none;
}
.hovered {
border: none;
}
JS:
$('#eye_disease1').hover(
function() {
$(this).addClass("hovered");
$(this).find(".original-content").fadeOut();
$(this).find(".hovered-content").fadeIn();
}, function() {
$(this).removeClass("hovered");
$(this).find(".hovered-content").fadeOut();
$(this).find(".original-content").fadeIn();
}
);
You can see it here: https://jsfiddle.net/waga7Lu1/3/
The transition effect is a bit clumsy but I'm not really sure what you're after.
Is it possible to target the last visible div/container after a js function has worked, in this case mixitup plugin. You click to filter your results, this adds display: none or display: inline-block to the appropriate containers.
Using this code from another stack question
$(function () {
var $items = $($(".partners_list.container article.mix").get().reverse());
$items.each(function () {
if ($(this).css("display") != "none") {
$(this).addClass("red");
return false;
}
});
});
It works but only when the page first loads, after you active the mixitup and filter some results it doesn’t add the class red to the last ‘visible’ container i assume because its already loaded and done its job..
The mix it function is as follows..
$(function(){
var $filterSelect = $('#FilterSelect'),
$container = $('#partner_container');
$container.mixItUp({
animation: {
enable: false
}
});
$filterSelect.on('change', function(){
$container.mixItUp('filter', this.value);
});
});
So essentially need it to fire based on when the display: none and display:inline-block appears and disappears on the page.
So I think if you wrap the code you want to fire again in a function you can then set it to fire on callback from the mixItUp and on first load.
So you'd have a function like this:
function updateDisplay() {
var $items = $($(".partners_list.container article.mix").get().reverse());
$items.each(function () {
if ($(this).css("display") != "none") {
$(this).addClass("red");
return false;
}
});
}
And then call it on first load like this:
$(function () {
updateDisplay();
});
And then edit your mixItUp declaration to call this function also on callback of mixItUp having finished:
$container.mixItUp({
animation: {
enable: false
},
callbacks: {
onMixEnd: function(){
alert('No items were found matching the selected filters.');
}
}
});
Hope that helps.
Thanks to shodaburp i’ve managed to figure it out with the callback function, god knows how must be a fluke.
The full code i have now and seems to work...
$(function(){
var $filterSelect = $('#FilterSelect'),
$container = $('#partner_container');
$container.mixItUp({
animation: {
enable: false
},
callbacks: {
onMixEnd: function(state){
var $items = $($(".partners_list.container article.mix").get().reverse());
$items.each(function () {
if ($(this).css("display") != "none") {
$(this).addClass("red");
return false;
}
});
}
}
});
$filterSelect.on('change', function(){
$container.mixItUp('filter', this.value);
});
});
I have this function:
$(".insidediv").hide();
$(".floater").mouseenter(function(){
$(".hideimg").fadeOut(function(){
$(".insidediv").fadeIn();
});
});
$(".floater").mouseleave(function(){
$(".insidediv").fadeOut(function(){
$(".hideimg").fadeIn();
});
});
the function built to make a little animation, when you 'mouseenter' the div the picture I have there is hidden and than a few text show up.
it works fine if i move the mouse slowly. but if i move my mouse fast over the div the function getting confused or something and it shows me both '.insidediv and .hideimg,
how can i fixed that little problem so it wont show me both? thanks!
You need to reset the opacity, because fadeIn and fadeOut uses this css property for animation. Just stopping the animation is not enough.
This should work:
var inside = $(".insidediv"),
img = $(".hideimg");
duration = 500;
inside.hide();
$(".floater").mouseenter(function () {
if (inside.is(":visible"))
inside.stop().animate({ opacity: 1 }, duration);
img.stop().fadeOut(duration, function () {
inside.fadeIn(duration);
});
});
$(".floater").mouseleave(function () {
if (img.is(":visible"))
img.stop().animate({ opacity: 1 }, duration);
inside.stop().fadeOut(duration, function () {
img.fadeIn(duration);
});
});
I just introduced the duration variable to get animations of equal length.
Here is a working fiddle: http://jsfiddle.net/eau7M/1/ (modification from previous comment on other post)
try this:
var $insideDiv = $(".insidediv");
var $hideImg = $(".hideimg");
$insideDiv.hide();
$(".floater").mouseenter(function(){
$hideImg.finish().fadeOut(function(){
$insideDiv.fadeIn();
});
}).mouseleave(function(){
$insideDiv.finish().fadeOut(function(){
$hideImg.fadeIn();
});
});
This will solve your issue:
var inside = $(".insidediv"),
img = $(".hideimg");
inside.hide();
$(".floater").hover(function () {
img.stop(true).fadeOut('fast',function () {
inside.stop(true).fadeIn('fast');
});
},function () {
inside.stop(true).fadeOut('fast',function () {
img.stop(true).fadeIn('fast');
});
});
Updated Fiddle
You need to set the 'mouseleave' function when the mouse is still inside the
'floater' div.
Try this (i have tried it on the jsfiddle you setup and it works):
.....
<div class="floater">Float</div>
<div class="insidediv">inside</div>
<div class="hideimg">img</div>
var inside = $('.insidediv'),
img = $('.hideimg');
inside.hide();
$('.floater').mouseenter( function() {
img.stop().hide();
inside.show( function() {
$('.floater').mouseleave( function() {
inside.hide();
img.fadeIn();
inside.stop(); // inside doesn't show when you hover the div many times fast
});
});
});
.....