jQuery function bounces element - not very smooth - javascript

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.

Related

ToggleClass not working on live site, but works on staging?

I have a Wordpress powered site, that runs a plugin called UberMenu. As part of modifications to the plugin, I have made some CSS changes to the mobile variation of the menu.
Whilst on mobile, I have set up a very basic toggleClass jQuery code, which toggles a class called "close", which in turn changes the small icon on the right, that is set by CSS:after.
This works a treat on staging:
http://tulaforlife.staging.wpengine.com/
(open site on mobile, tap 'menu', then tap 'products'. note the + sign change to a minus on tap, and back again on close).
I can't however get it working on live:
http://www.tula.com
It just won't toggle the class for the same CSS. Here's the code:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.menu-button-text').attr("onclick","return true");
jQuery('.ubermenu-target').on ('touchstart', function() {
jQuery(this).toggleClass('close');
jQuery('.ubermenu-target').not(this).removeClass('close');
});
jQuery('.ubermenu-target').hover(function () {
jQuery(this).toggleClass("close");
});
});
</script>
CSS:
span.ubermenu-target.ubermenu-item-layout-default.ubermenu-item-layout-text_only:after {
content:"\f067" !important;
}
span.ubermenu-target.ubermenu-item-layout-default.ubermenu-item-layout-text_only.close:after {
content:"\f068" !important;
}
Interestingly, if I change the target of the touchstart in the jQuery to ".ubermenu-target-title" it does toggle the class in the HTML (but only when the actual text is tapped), but it just won't do it for the .ubermenu-target, which is what I want it to do.
Any ideas where I'm going wrong, and why it works on staging but won't work on live? :(

jQuery animate element and hide

I'm building Windows 8 app in JavaScript. What I'm trying to do is to slide the html element out of the screen and then change its "display" property to "none":
var panelContainer = $('#panelContainer');
panelContainer.animate({ right: '-400px' }, 200, function () {
panelContainer.hide();
});
But this code doesn't work correctly: it just immediately hides the element without animation.
I've also tried:
var panelContainer = $('#panelContainer');
panelContainer.animate({ right: '-400px' }, 200, function () {
panelContainer.hide(200);
});
and it works, but it's a hack: I don't want to change the opacity when animating and I don't need to have additional timeout for hiding.
I've found that jQuery UI library has extended show and hide methods that do that, but I would like not to reference this library just for one call. I'm aware that there is a WinJS.UI.Flyout that performs similar operation, but it's not applicable in my case. Any ideas how this can be done?
The problem was that jQuery does not put hide animation into its animation queue by default. That's why my initial code was hiding the html element first and then animating it. The solution for that is to call hide with the parameter that explicitly specifies that hide call should be queued:
panelContainer.hide({queue: true});

Liquid Slider (Link to another page at end of scroll, rather than scroll back to first tab?) jQuery

jQuery / Javascript / PHP
I am using the Liquid Slider as a pagination mechanism on a website, how I use it is I basically have it smoothly scroll through the pages left-right & vice versa.
What I'm trying to accomplish right now is: to have the dynamic arrows link to an external page at the end of the scroll (once it detects it is at its last page/tab), rather than to have it scroll back to where it first began.
Since such option variety is not originally supported from the author website, I am wondering if anyone from here would have an idea how to accomplish this?
A snippet of my dynamic arrows with their callback functions (functions not included):
$('#slider-id').liquidSlider({
continuous:false,
dynamicArrows:true,
dynamicTabs: false,
callbackFunction: function(){ drawLines() }
});
$('.liquid-nav-right-arrow').click(function(){
simRefresh(), simRefresh2();
});
$('.liquid-nav-left-arrow').click(function(){
simRefresh(), simRefresh2();
});
You can set conditionals based on the current panel (tab).
callbackFunction: function () {
var sliderObject = $.data( $('#slider-id)[0], 'liquidSlider');
if ( (sliderObject).currentTab === 4 ) {
//turn off click event
//update link
}
Then if you want to reset the events again, you can try sliderObject.registerArrows(), although I haven't tested this out.

Javascript making text slide in from html

I am trying to make a text-slide-in effect on a web page. I am using the javascript slidesjs library because it seemed like the best fit. However, I cannot make it work when triggered by a web click.
I have a live example running at: http://107.22.173.10
Note that when you click the "GOTO" links nothing happens.
The basic code is as follows and it seems the page is supposed to automatically put '#' anchors in to trigger the slides. I can't make this work, or figure out how to debug this.
$(function(){
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#','');
}
// Initialize Slides
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
generatePagination: true,
//play: 5000,
//pause: 2500,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
});
Does anyone see what's going wrong here?
What is the best way to debug this problem?
Is there a better way or library I should be using?
Any advice is appreciated. Thanks!!
You're not following the example from slidesjs.com. See "Basic HTML structure". You're putting only one element in the #slides_container div, and assign all sorts of weird absolute positioning to it, which of course won't work with the animation code.
Copy paste the example first, then start adding your own tweaks concerning style.

determine jQuery hover status for menu

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

Categories

Resources