I have a hidden menu on the right of the screen, it shows and hide by clicking a button.
function open_menu() {
document.getElementById('slide').innerHTML = "<a href='javascript:clo_menu()'></a>";
}
function clo_menu() {
document.getElementById('slide').innerHTML = "<a href='javascript:open_menu('></a>";
}
Right now it fades and all I want is to slide from right (out of the screen). Is it doable?
JSFIDDLE — http://jsfiddle.net/th1uj5wr/
Thanks.
One possible solution would be to add overflow-x: hidden; to your body style. This will allow you to move the menu out of the screen without creating a scrollbar:
body {
overflow-x: hidden;
}
I'm using jQuery to move the menu later on:
$("#clickme").toggle(function () {
$(this).parent().animate({right:'0px'}, {queue: false, duration: 500});
}, function () {
$(this).parent().animate({right:'-100px'}, {queue: false, duration: 500});
});
Check out this JSFiddle to view my working example.
Related
This is the JavaScript code where when the user clicks on a new tab the contents on that page have a fade out effect by setting the opacity to 0. However the flaw is that all links from other pages are still clickable because it is only the opacity that has changed. What edit can I make to this code to keep the animation but hide the page content after the animation. (The same animation is when the page loads, but the opacity changes to 1.)
Code:
jQuery(document).ready(function() {
/* How to Handle Hashtags */
jQuery(window).hashchange(function(){
var hash = location.hash;
jQuery('a[href='+hash+']').trigger('click');
});
/* Main Navigation Clicks */
jQuery('.main-nav ul li a').click(function() {
var link = jQuery(this).attr('href').substr(1);
if ( !jQuery('section.content.show, section#' + link).is(':animated') ) {
jQuery('.main-nav ul li a').removeClass('active'); //remove active
jQuery('section.content.show').addClass('show').animate({'opacity' : 0}, {queue: false, duration: 1000,
complete: function() {
jQuery('a[href="#'+link+'"]').addClass('active'); // add active
jQuery('section#' + link).addClass('show').animate({'opacity' : 1}, {queue: false, duration: 1000});
}
});
}
});
});
Can you please re-paste the code with the edits as I am not the best at JS.
Can you post your css and html? It's hard to diagnosis this, but you could use .fadeOut() or .animate({"display":"none"}). I'm not sure if this is what you need, you'll have to post the rest of the code.
Simply set the display property to none in the callback (or just call hide()):
complete: function() {
jQuery(this).hide();
jQuery('a[href="#'+link+'"]').addClass('active'); // add active
jQuery('section#' + link).addClass('show').animate({'opacity' : 1}, {queue: false, duration: 1000});
}
Obviously you then have to take care to show the elements back again before animating them back in. ;-)
slides.js has virtually no documentation. I've got it set to automatically change the slide, and have the prev/next buttons hidden. Is there a way to also hide the "stop/play" button?
$(function () {
$("#slides").slidesjs({
play: {
active: false, /* this hides the stop/play button */
auto: true,
interval: 5000,
swap: true
}
});
});
use display none property of css
for example if your play button class is ".play" then put in css
.play
{
display:none;
}
jsfiddle:
http://jsfiddle.net/ZcbUW/
When you hover from the top of the blue div and dont move your mouse, the text fades in, out, then in. I have no idea why.
<html>
$("#menu, #arrow").mouseenter(function () {
$('#arrow').stop(true, false).fadeOut("fast");
$("body").children(':not(#menu)').children(':not(#arrow)').css("-webkit-filter", "blur(2px)");
$("#menu").stop().animate({
width: "300px"
}, 300, function () {
$('.text').fadeIn(200);
});
})
$("#menu").mouseleave(function () {
$("#menu").stop().animate({
width: "5px"
}, 300, function () {
$('#arrow').stop(true, false).fadeIn("slow");
});
$("body").children(':not(#menu)').css("-webkit-filter", "none");
$('.text').fadeOut(100);
});
Your selector is weird. So hover is firing on both the menu and the arrow. Try this: http://jsfiddle.net/ZcbUW/2/
Remove this line:
$('.text').fadeOut(100);
Works for me with your example.
I want a photo/caption to be toggled on a webpage.
The user clicks, the photo comes up followed by the caption.
The user clicks again, the caption goes away then the photo goes away.
The user clicks, the photo comes up followed by the caption.
On the third click, the photo rapidly appears (does not animate).
Here is my code.
(jQuery-1.8.1.min.js)
$(document).ready(function() {
$('#photo').width(0).height(0).css('opacity',0);
$('#caption').hide();
$('#box').toggle(
function() {
$('#photo').stop().show().animate(
{
width: '400px',
height: '300px',
opacity: 1
}, 500, function() {
$('#caption').stop().fadeIn(500);
}); //end animate
},
function() {
$('#caption').stop().hide(function() {
$('#photo').stop().fadeOut(500);
});
}
); // end toggle
});
Any suggestions?
Need more code?
UPDATE
In order to get the image to animate-in every time it is toggled, then the image has to animate-out.
EDIT2
updated the JSFIDDLE
EDIT:
Another problem showed up, this time with animation.
The jsFiddle works fine but when used with an actual image it does not animate after the first cycle.
I'm trying to stick with your original code (I just added .show() in between the photo's stop and animate calls), but I can't see what's wrong. It seems to work, see jsFiddle here.
UPDATE: I changed the "hide" function per poster's request & also updated the jsFiddle code to reflect this.
$(document).ready(function() {
$('#photo').width(0).height(0).css('opacity', 0);
$('#caption').hide();
$('button').toggle(
function() {
console.log("show");
$('#photo').stop().show().animate({
width: '400px',
height: '300px',
opacity: 1
}, 100, function() {
$('#caption').stop().fadeIn(1000);
}); //end animate
},
function() {
console.log("hide");
$('#caption').stop().hide(function(){
$('#photo').stop().animate({
width: '0px',
height: '0px',
opacity: 0
}, 100);
});
}
);
});
EDIT 3: updated code to work after one cycle : http://jsfiddle.net/kLEFy/17/
$(document).ready(function() {
$('#photo').width(0).height(0).css('opacity', 0);
$('#caption').hide();
$('body').toggle(
function() {
$('#photo').stop().show().animate({
width: '400px',
height: '300px',
opacity: 1
}, 1000, function() {
$('#caption').stop().fadeIn(1000);
}); //end animate
},
function() {
$('#caption').stop().hide(function(){
$('#photo').stop().fadeOut();
$('#photo').width(0).height(0).css('opacity', 0);
});
}
);
});
I have a navigation bar that slides down, very easy, and when that's complete, a small pixel sized line goes across it all to separate sub pages.
When you hover your mouse over it very quickly, it tends to stay visible. As you can see from the filter and stop functions, I don't want any jumpy things happening - it would be great for all of it to be really smooth.
Is there any way of getting this to work smoothly, regardless how retarded the user is as well as it being super responsive?
$(".menu").hover(function() {
$(".children").filter(':hidden').slideDown(300, function() {
$(".menu-line").stop(true, false).animate({ width: "903px" });
});
}, function() {
$(".menu-line").stop(true, false).animate({ width: "0px" }, function() {
$(".children").slideUp(300);
});
});
Working example: http://jsfiddle.net/varFS/
Titanium, you must use timeout for hiding your menu to get desired result:
$(".children").css("padding-top", "21px").hide();
$(".menu").hover(function() {
$(".children").filter(':hidden').slideDown(300, function() {
$(".menu-line").stop(true, false).animate({
width: "400px"
});
});
}, function() {
setTimeout(function() {
if (!$(".menu, .menu ul, .menu ul li").is(':focus')) {
$(".children").css("padding-top", "21px").hide();
}
$(".menu-line").stop(true, false).animate({
width: "0px"
}, function() {
$(".children").slideUp(300);
});
}, 400);
});
Working Example