I am trying to create a slideUp, slideDown effect with a div. Basically the div contains the contents of a cart. When the user is looking at items the cart should be tucked away but when they tap on an img it should pop up and toggle. It looks like this ...
I have got all sorts of crazy effects and most just about always completely hide the cart when it is toggled. It should just return to the position shown in the image above.
My code at the moment.
$( ".cart" ).on( "click", function() {
if ($('.tabBox').height() > 91)
{
$('.tabBox').height('90px').slideUp();
console.log('slide up');
}
else
{
$('.tabBox').height('150px').slideDown();
console.log('slide Down');
}
});
Codepen here (no images) If you click on an item the cart will popup. You will notice also the cart does not slide up but pops up. I would like it to slide up and slide down gracefully But return to it's original position (not off the screen).
you should use the animate function instead. Also, I'm not quite sure if I got this correct, but it looks like the cart has 3 possible states:
hidden: nicely tucked away, untill somebody clicks an image
minimized: just visible, but only the cart, clicking the cart => maximize
maximized: completely visible, cart + order(?), clicking the
cart => minimize
I'd simply remove the first state, which makes the solution a bit easier, but as you can see, adjusting to accomodate for this 3rd state will not be that hard:
cartMaximized = false;
$( ".cart" ).on( "click", function() {
$('.tabBox').stop( true );
if( cartMaximized ) {
$('.tabBox').animate({ height: '90px' });
}
else
{
// You can play around with outerHeight() and so on, but that's out of scope
// $('.tabBox').animate({ height: $('.content').outerHeight()+45+'px' });
$('.tabBox').animate({ height: '150px' });
}
cartMaximized = !cartMaximized;
});
--- tested and working
But this might be "brittle" due to resizing and so on, but I bet you can figure something out :-)
Related
I'm customising a Wordpress theme and have added a background video. The page has custom links with control a slider. I'm trying to get the video to fade out if your not on the first slide (.nav-Intro) but everything I;ve tried fails!
http://www.boytoballer.com/wp/
Please help?
if ($('.nav-Intro').classList.contains("swiper__nav-active")) {
$('.btb-home-vid').fadeIn(1000);
} else {
$('.btb-home-vid').fadeOut(1000);
}
Got it working!
Had to change second ".link.f5" to (THIS)
$( ".link.f5" ).on( "hover", function() {
if ($(this).hasClass('nav-Intro')){
$('.btb-home-vid').fadeIn(1000);
} else {
$('.btb-home-vid').fadeOut(1000);
}
});
I have a header with some links. When the header gets short enough, it goes into mobile view (collapse style).
I want the dropdown to be shown initially, but can be toggled to hide and show again like normal. Basically what I want is: When the page loads/resizes and the navbar goes into mobile, toggle the dropdown so it's visible.
You can toggle a dropdown by doing:
$("#element").dropdown("toggle");
Play around with my example here: https://codepen.io/anon/pen/ZKbJJV
UPDATE:
$(document).ready(function() {
$(window).resize(function() {
if($(window).width()<=768) {
$("#element").removeClass("dropdown-menu");
}else{
$("#element").addClass("dropdown-menu");
}
});
if($(window).width()<=768) {
$("#element").removeClass("dropdown-menu");
}else{
$("#element").addClass("dropdown-menu");
}
});
Now I've tried again with remove and add classes and it works.
http://codepen.io/julianschmuckli/pen/ybYzQe
You can do execute the code, after the page was finished loading:
$(document).ready(function() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$("#element").dropdown("toggle");
}
});
To detect if it is mobile, I copied the snippet from here: What is the best way to detect a mobile device in jQuery?
Or you can also try this version to define it with a specific width of page:
$(document).ready(function() {
if($(window).width()<=768) {
$("#element").dropdown("toggle");
}
});
I have playing around with a steriotab system with the prototype.js library, everything works fine except the next DIV under the container of steriotabs is showing like a flash when turning to next tab.. I know its little bit difficult to understand.. here you can see it on their website http://stereointeractive.com/blog/code/prototype-tabs/
You can see that by changing the four tabs(features, setup, configuration, download) continuously three four times. The comment section will show up like a flash just below the navigation tabs(Features, Setup, Configuration, Download).
I think the issue was when it goes to next tab the current one is display:none and ofcourse there is nothing in the meantime(1 or 2 seconds) so the next block of html code is coming to the top just below the navigation..
this javascript may causing the issue..
activate: function(tab) {
var tabName = tab.id.replace(this.options.ids.tab,'');
this.currentPanel = this.options.ids.panel+tabName;
if (this.showPanel == this.currentPanel) {
return false;
}
if (this.showPanel) {
if (this.options.effects) {
new Effect.Fade(this.showPanel, {queue: 'front'});
} else {
$(this.currentPanel).hide();
}
}
if (this.options.effects) {
new Effect.Appear(this.currentPanel, {queue: 'end'});
} else {
$(this.showPanel).show();
}
this.tabs.invoke('removeClassName', this.options.classNames.tabActive);
tab.addClassName(this.options.classNames.tabActive);
this.showPanel = this.currentPanel;
}
you guys have any thought?
You're suspicion is correct, the reason you get the flash is the few milliseconds there is no container there holding back the content below the object. One option you could consider is while fading the container also sliding it up (look into parallel effects in scripty) that way it would not be nearly as jarring with the content disappears.
I am using the following jQuery plugin on my website. ( http://jqueryfordesigners.com/demo/plugin-slide-demo.html ). Now if you closely examine the demo slider, you will see a slight bump/bounce at the bottom every time a header element opens. Now I have the same problem on my website except the bounce is much worse.
How can I minimize/eliminate that effect? the initialization code is:
$(function () {
$('UL.drawers').accordion({
// the drawer handle
header: 'H2.drawer-handle',
// our selected class
selectedClass: 'open',
// match the Apple slide out effect
event: 'mouseover'
});
});
Also how can I change the above code so that the 'drawer' closes when I do not hover over any header element(tab).
Thank You
Its hard to say without code to test, but it could be a case of the jQuery animation jump problem.
I'm working on writing a drop-down menu with jQuery and I have a question. My menu is composed of two part span.menu_head (which is in the menu bar) and a ul.menu_body (which contains the drop-down items). I have the following jQuery code:
$("span.menu_head").hover(function(){
$(this).next().slideDown('medium');
}, function(){
});
$("ul.menu_body").hover(function(){
}, function(){
$(this).slideUp('medium');
});
So, when I hover over the span.menu_head, the ul.menu_body slides down and when I leave the ul.menu_body, it slide up. This is working as expected. However, there's one more piece I'm trying to add: When the mouse leaves the span.menu_head, I want the ul.menu_body to slideUp, UNLESS the mouse is over the ul.menu_body. Is there a way in jQuery to determine if the mouse is over a certain element? Or, is there a better way to acheive this effect?
Thanks,
Paul
I found a solution using hoverIntent (http://cherne.net/brian/resources/jquery.hoverIntent.html).
I set a flag when the mouse hovers over the ul.menu_body, so that I can check this flag before closing the menu.
var overBody = false;
function mnuOpen() {
$(this).next().slideDown('medium');
}
function mnuClose() {
if (!overBody) {
$(this).next().slideUp('medium');
}
}
var headConfig = {
over: mnuOpen,
timeout: 250,
out: mnuClose
}
$("span.menu_head").hoverIntent(config);
$("ul.menu_body").hover(function(){
overBody = true;
}, function(){
overBody = false;
$(this).slideUp('medium');
});
This is producing the desired behavior. There's one more thing I need to consider: if the mouse goes from the sub menu back to the header, we don't want to close and re-open, so this might involve setting another flag to detect this behavior.
Paul