I have a problem I need help with as I am a bit new to Jquery, what I have is a button which is half hidden at the left side of the screen and a menu which is completely hidden from view also at the left side, what I am trying to achieve is, on mobile the user would 'tap' the button which would slide from the side to reveal the full button for which then you would tap the button again which would then slide the menu out from its hidden position on the left. The problem I am having is no matter which approach I take, whenever I tap the half hidden button, it will slide out but then the menu slides out straight away without having to tab the button a second time so if any of you kind folk could point me in the right direction I would really appreciate it.
Here is my code:
$( "#catbutt" ).on("tap",function(e) {
$( "#catbutt" ).animate({left: "0px"},300,'swing');
});
$( "#catbutt" ).on("tap",function(e) {
$( "#categories" ).animate({left: "0px"});
});
Maybe something like this, where you check the #catbutt element's left position, and if it's already 0px, slide out the #categories element, otherwise, just slide out the #catbutt element (heh. catbutt.) :
$( "#catbutt" ).on("tap",function(e) {
if($(this).css('left') == '0px') {
$( "#categories" ).animate({left: "0px"});
}
else {
$(this).animate({left: "0px"}, 300, 'swing');
}
});
You're still going to have to get it to close, too. Here's a Fiddle with it having three stages... the first is the button expanding, the second is the menu expanding, and the third is both the button and menu collapsing: https://jsfiddle.net/wcvg3nby/
Here's the pertinent code from the Fiddle:
CSS
#catbutt {
width: 100px;
height: 20px;
position: fixed;
left: -80px;
background-color: red;
}
#categories {
width: 100px;
position: fixed;
left: -100px;
}
HTML
<div id='catbutt'></div>
<div id='categories'>
<div>Cat 1</div>
<div>Cat 2</div>
<div>Cat 3</div>
<div>Cat 4</div>
</div>
JS
$('#catbutt').on('click', function() {
if($(this).offset().left < 0) {
$(this).animate({'left':'0px'});
}
else if($(this).offset().left == 0) {
$(this).animate({left: '100px'});
$('#categories').animate({left: '0px'});
}
else {
$(this).animate({left: '-80px'});
$('#categories').animate({left: '-100px'});
}
});
Related
I have a subscription form that drops down on top of the navigation when the user clicks a button (#sub-header). this button is below the navigation. my navigation is fixed, so this button has a top of 60px, to keep it below the nav. however when the button is clicked and the subscription form drops down, then there is a space of 60px between the button and the navigation. i need to change the top of the button from 60px to 0px only when the subscription form is open. This is my code:
if ($('.subscription-signup').css('display') == 'none') {
$('#sub-header').css("top", "60px");
} else if ($('.subscription-signup').css('display') == 'block') {
$('#sub-header').css("top", "0px");
};
Here is my html code:
<div class="subscription-signup">
<div class="subscription-close" id="subscription-close"> </div>
<div class="email-signup">
<form></form>
</div>
</div>
And here is the code to open the form (which works):
var $subscribeContent = $('.subscription-signup');
var $subscribeClose = $('#subscription-close');
$subscribeContent.hide();
$subscribe.on('click', function(e) {
e.preventDefault();
$subscribeContent.slideToggle();
});
$subscribeClose.on('click', function(e) {
e.preventDefault();
$subscribeContent.slideToggle();
});
For some reason, when the subscription form is open and is set to display: block, the top does not change to 0px. Is there something wrong with my code? Can anyone figure out how to do this?
use
$('.subscription-signup').is(':hidden')
instead
Why not just add a class to the element?
$subscribe.on('click', function(e) {
e.preventDefault();
$('.subscription-signup').addClass('subOpen');
$subscribeContent.slideToggle();
});
$subscribeClose.on('click', function(e) {
e.preventDefault();
$('.subscription-signup').removeClass('subOpen');
$subscribeContent.slideToggle();
});
.subscription-signup {
top: 0px;
}
.subOpen {
top: 60px;
}
I am trying to make a div that expands in height when clicked on, and then goes back to its original size when clicked on again. I have tried to use .toggle but whenever I do every div (with the related class) completely vanishes. I posted a code pen below so you can easily view the codes effects.
http://codepen.io/JoshuaHurlburt/pen/JKqAPr
<div>
<div class='box' id='emailVer'>
<h2 id='payText'>PAYMENT</h2>
</div>
<div class='box' id='accCust'>
<h2 id='acText'>ACCOUNT CUSTOMIZATION</h2>
</div>
<div class='box' id='pay'>
<h2 id='evText'>EMAIL VERIFICATION</h2>
</div>
</div>
JS:
var main = function(){
$('.box').click(function() {
$(this).animate({
height: "300px"
},200 );
}
)}
$(document).ready(main);
I decided to leave out the CSS, but I will edit it in if anyone thinks it is important to the solution
There's probably a better solution than this but here is one-
Replace your script file with this
var main = function(){
$('.box').click(function() {
var el = $(this);
if (!el.hasClass('selected')) {
el.animate({
"height": "300px"
}, 200)
el.addClass("selected");
} else {
el.animate({
"height": "75px"
}, 200);
el.removeClass("selected");
}
}
)}
$(document).ready(main);
What you need is a way to track what has already been selected (and animated) and what has not. I chose to add a class (selected) and check to see if the element has that class. If it has not yet been selected, animate to 300px and add the class, else animate back to 75px and remove it.
Try .slideToggle
$( "#clickme" ).click(function() {
$( "#book" ).slideToggle( "slow", function() {
// Animation complete.
});
});
The toggle functions in jQuery toggle the visibility of an element which is why they disappear.
I believe what you are looking for is .toggleClass. See http://api.jquery.com/toggleclass/. You can then create another class with the expanded height properties. Which will be toggled on and off on click.
Adding height to your existing transition property on box will handle the animation.
CSS
.box {
width:300px;
height:75px;
margin:0 auto;
-webkit-transition:box-shadow 1s, height 1s;
transition: box-shadow 1s, height 1s;
}
.expanded {
height: 300px;
}
JS
var main = function(){
$('.box').click(function() {
$(this).toggleClass('expanded');
}
)};
$(document).ready(main);
I saw on my local news website a feature like this:
Where the left div is sticked to main div, AND on scroll AND on windows resize it stays sticked there, and on scroll it moves up/down also sticked to main div
Sorry for bad english / explanation ( but I think you understood ).
You can see what I want to get in this link:
http://rus.delfi.lv/news/daily/abroad/papa-rimskij-obratilsya-s-tradicionnym-rozhdestvenskim-poslaniem-k-pastve.d?id=43988560 if you are not using any Adblock :)
Is there any special jquery plugin or it is achieved with simple CSS?
From my website, on the left is Facebook image that scrolls with page and on mouseover (jquery) it expands and shows the plugin box:
HTML
<div id="fbwindow">
<div class="fb-like-box" data-href="http://www.facebook.com/.../" data-width="292" data-show-faces="false" data-stream="true" data-show-border="true" data-header="true"></div>
</div>
CSS
#fbwindow { position: fixed;top:50%;margin-top:-200px;left:-292px;width:323px;height: 265px;z-index: 1000;text-align: left; }
#fbwindow div.fb-like-box { background: #FFF; }
#fbwindow > a { display: block;float: right;width: 31px;height: 187px;background: url('/layout/fb-window.png') no-repeat; }
(optional / not needed rollover effect) jQuery
$('#fbwindow_a').mouseenter(function() {
$("#fbwindow").stop().animate({
left: '0'
}, 100, function() {
//$(this).removeClass("left").addClass("right");
});
});
$('#fbwindow').mouseleave(function() {
$("#fbwindow").stop().animate({
left: '-292px'
}, 50, function() {
//$(this).removeClass("right").addClass("left");
});
});
I've asked this guestion before. But now I'll try to be a bit more specific.
I've trying to make a background fade in when you mouse over a box. I've tried 2 different options.
Option 1:
Box1 is the box it mousesover, and hover1 is the new background that comes in. This actually works pretty well. However, it loads the acript, meaning, that if i just go crazy with my mouse over the box, the fadeing will continue endless, even when my mouse is standing still. Is there a way you can stop it?
Content is a text that changes in a contentbox when I mouseover. This worksfine.
$("#box1").mouseover(function(){
$("#background").switchClass("nohover", "hover1", 500);
$("#content").html(box1);
});
$("#box1").mouseout(function(){
$("#background").switchClass("hover1", "nohover", 150);
$("#content").html(content);
});
Option 2:
Here i add the class hover2 and asks it to fadeín and fadeout. But this doesn't work at all. Somtimes it even removes everything on the side when i take the mouseout of the box.
$("#box2").mouseover(function(){
$("#background").addClass("hover2").fadeIn("slow")
$("#content").html(box3);
});
$("#box2").mouseout(function(){
$("#background").removeClass("hover2").fadeOut("slow")
$("#content").html(content);
});
I Use jquery ui.
I really hope someone can help me!
You can also try to make small changes in the markup/CSS.
HTML:
<div id="box">
<div id="background"></div>
<div id="content"></div>
</div>
CSS:
#box {
position: relative;
/* ... */
}
#background {
position: absolute;
display: none;
top: 0;
left: 0;
width: inherit;
height: inherit;
background-image: url(...);
z-index: -1;
}
JavaScript:
$("#box").hover(function() {
$("#background").fadeIn();
}, function() {
$("#background").stop().fadeOut();
});
DEMO: http://jsfiddle.net/bRfMy/
Try add a variable to control the execution of the effect only when that variable has a certain value. And modify its value when the effect was executwed.
Something like this:
var goeft = 0;
$("#box1").mouseover(function(){
if(goeft == 0) {
$("#background").switchClass("nohover", "hover1", 500);
$("#content").html(box1);
goeft = 1;
}
});
$("#box1").mouseout(function(){
$("#background").switchClass("hover1", "nohover", 150);
$("#content").html(content);
// sets its value back to 0 if you want the next mouseover execute the effect again
goeft = 0;
});
I want to make a similar navigation menu like what m.facebook.com did.
but this, i want to make it nicely animated slide out from left side of the website.
Flow ::
Click a button > (Menu is hidden by default) Menu Slide out, push the main container to right a bit to fit the menu > Click again > Menu Slide in and hidden again.
I got no idea to make it with javascript or jquery or ajax while i'm new to web development and there are too much of effect scripting language. May i know to achieve this, which is perfect in smoothness ?
Something along these lines... http://jsfiddle.net/HfdXY/
HTML:
<div id="menu">Menu</div>
<button id="openMenu">Toggle menu</button>
CSS:
#menu {
height: 300px;
width: 0px;
border: 1px solid black;
display: none;
}
JS:
$("#openMenu").click(function() {
var menu = $("#menu");
if ($(menu).is(":visible")) {
$(menu).animate({width: 0}, 1000, function() {$(menu).hide();});
} else {
$(menu).show().animate({width: 100}, 1000);
}
});