jquery slider - animating timeline - javascript

I'm using the jquery slider function for a timeline
$("#content-slider").slider({
min: 0,
max: 300,
step: 1,
change: handleSliderChange,
//start: getImageWidth,
slide: handleSliderSlide
});
function handleSliderSlide(event, ui) {
$("#content-scroll").prop({scrollLeft: ui.value * (maxScroll / 300) });
if (ui.value >= 7 && ui.value <= 13) {
$('#marker_10').animate({opacity: 'hide'}, 100, function () { $(this).parent('div').animate({marginTop: '100px'}, {duration:1000, queue:false }).addClass('up').find('p').animate({opacity: 'show'} ) })
}
if (ui.value > 13 || ui.value < 7 && ($('div#container_10').hasClass('up'))) {
$('div.up').stop(true)
$('#container_10').removeClass('up').find('p').fadeOut('fast').end().animate({marginTop:'165px'}, {duration:500, complete:function() {$(this).find('img.marker').fadeIn() }, queue:false})
}
}
http://asla.dev.1over0.com/html/slider/bacardi_last.html
It animates ok when I scroll left to right but when I scroll right to left then I get some issues where elements are fading out and displaying correctly
any information would be appreciated; this is all done on the front end currently
Thank you

I don't have a solution directly, but some notes that may help.
The down animation isn't triggered until the slider is past the left edge of the active content. To the right, it's triggered immediately after the slider moves off of the vertical line.
Several of the sections have content cut off the bottom - seems like a simple height issue?
When sliding right to left, the vertical line doesn't disappear.
You may want to add a "title" to "#content-slider a" as new users may not be sure what it does at first. A simple "Slide Me" would suffice :)
One additional note, when the browser window is small (around 800px or so, didn't check exactly), the content jumps below the slider bar.
Just thinking about how I'd approach this task; I'd setup animations in a function for animating up, then one for down. After I can verify they work on button press (or some non-slider trigger) I'd work on ensuring the "active" areas are setup correct on the time line (either the vertical line or the whole "active" content box, personally I'd do something in the middle). After those pieces are setup, should be an easy task to trigger the up movement function when the slider is in the "active" area and down when it leaves, making sure they don't run at the same time.
Hope it helps!

Related

How to make carousel smooth scroll to top when next slide and use 'hand carousel'

I use carousel bootstrap 3 to use slide text. When the row#1 text is long to bottom (ex: height 300px) and the row#2 text is too short (ex:just 10px), The problem is we always must scroll to top as manually when we click next to row#2 from row#1. How to make when next slide, the system will 'smooth scrolling' to top as automatically???
In other hand, How to user can use 'hand carousel' ??? (I don't know the technology name but user just tap to right on mobile when want to next slide) when use mobile so its easy next slide without go to bottom again (find the carousel again) (this issue important when mobile ).
This is simple code
$(document).ready(function() {
$('#carousel-example-generic').carousel({
interval: false
})
});
But full code in fiddle: http://jsfiddle.net/luisan/B9FeP/1/
Thanks
You could tap into the carousels slide event and then add the jquery scroll top function
$('#carousel-example-generic').bind('slid', function () {
console.log('slid event');
$('.carousel-inner').scrollTop(0);
});
Maybe using body would be better
$('body').scrollTop(0);
You can also add in an animation that would look nicer
$('body').animate({ scrollTop: 0 }, 600);

jQuery UI Sliders - multiples slider(not range) at same position

I am trying to create a slider with 2 handlers with no dependancies to each other so it is not a range slider.
I`ve altered the css of both so that one apear above the line and one under it. When I inspect the slider at run time I can see that they overlap a bit but 3/4 of each slider does not
my problem is if I set both handler to the same value, when I try to change a value, jquery give me the control of the last one I`ve moved even if I click on the other one in a part where it dosen't overlap. seem like the slider engine give me control of this slider because in a range slider situation this will make sense(as they usualy completely overlap).
I use simple slider loading :
$( "#slider1" ).slider(
{
min: 1,
max: 11,
step: 1,
values: [5,5],
slide: function(event, ui) {
if(ui.value > 10){
return false;
}
}
}
);
anyone got any idea how I could bypass this?
here is the fiddle of it : fiddle

jQuery wave animation on row of icons

I have a row of icons on my page and i want to create a wave animation effect when user hovers over them with the cursor.
I'm using this basic code for starters:
$('#icons > li')
.hover(function() {
$(this).animate({
'top': (-1 * hover_distance)
}, hover_speed);
}, function() {
$(this).animate({
'top': 0
}, hover_speed);
})
;
And it looks OK. But there is one issue: when you move your cursor frantically over the icons, the animation queue for every icon is becoming filled with lots of actions (up, down, up, down, up, down, etc) and icons is going up and down lots of times even if you stop to interact with the icons.
I want my icons to complete only one cycle (up and down) and then stop the animation. I'm looking for a most elegant (short, simple, light) solution for this.
PS: And you can't just use stop() because it will prevent the "wave effect" (i.e. when you move your cursor with one fast stroke over the icons and they move up and down in response, like a real wave).
PPS: Here's the JS-Fiddle:
http://jsfiddle.net/nZqLy/3/
You can use .stop() before the animations to stop the current animation or .stop(true) to cancel all animations in the queue. http://jsfiddle.net/nZqLy/9/
$('#icons > li').hover(function() {
$(this).stop(true).animate({
'top': (-1 * hover_distance)
}, hover_speed);
}, function() {
$(this).animate({
'top': 0
}, hover_speed);
});
I upvoted the answer by #jimjimmy1995, but just to provide an alternative way of doing the same animation which will be faster and more efficient:
$('#icons').on({
mouseenter:function(){
$(this).stop().animate({top:(-1*hover_distance)},hover_speed);
},
mouseleave:function(){
$(this).stop().animate({top:0},hover_speed);
}
},'li');
The only differences are:
The use of .on() is more transparent, but also allows for more extensibility (you can add more on events later, like mousemove or something, if you want)
Delegation of all li from #icons rather than making #icons > li the selector means the animation binding is only applied once, rather than many times (one time for each li) - this is the most important of the three changes
Using the native DOM name rather than the string (top vs 'top') is a best practice. It makes no difference for non-hyphenated words, but when you start dealing with marginTop vs 'margin-top' it makes a difference.
UPDATE
Found the solution:
$('#icons').on({
mouseenter:function(){
if(!$(this).is(':animated')){
$(this).animate({top:(-1*hover_distance)},hover_speed);
}
},
mouseleave:function(){
$(this).animate({top:0},hover_speed);
}
},'li');
Using the :animated selector checks if the item is in progress of being animated. The if logic will only perform the animation if it is not.
jsFiddle to prove it.

jQuery - Scroll Function Keeps Triggering: Only Once Please

I have the following jQuery function which triggers aTestEvent() when the user scrolls horizontally past 500 pixels:
jQuery(document).scroll(function(){
if(jQuery(this).scrollLeft() >= 500){
aTestEvent();
}});
Here's the issue: I only want aTestEvent() to be triggered once! However, every time the user scrolls back to the beginning of the page and then again past 500 pixels, aTestEvent() is triggered again.
How can we adjust the above code so that the trigger only occurs for the first time the user scrolls past 500 pixels?
You can use on and off methods:
$(document).on('scroll', function() {
if( $(this).scrollLeft() >= 500 ) {
$(document).off('scroll');
aTestEvent();
}
});
http://jsfiddle.net/3kacd/
Please Note: This code snippet could "off" all the scroll event available on a particular page but to scroll off only intended scroll handler without disturbing other scroll handlers, we can use a namespace. Namespaces are similar to CSS classes in that they are not hierarchical; only one name needs to match.
$(document).on('name1.scroll', function() {
if( $(this).scrollLeft() >= 500 ) {
$(document).off('name1.scroll');
aTestEvent();
}
});
http://jsfiddle.net/shekhardtu/3kacd/57/

JQuery UI Tabs Causing Screen to "Jump"

I'm using the latest version of the jQuery UI tabs. I have tabs positioned toward the bottom of the page.
Every time I click a tab, the screen jumps toward the top.
How can I prevent this from happening?
Please see this example:
http://5bosses.com/examples/tabs/sample_tabs.html
If you're animating your tab transitions (ie. .tabs({ fx: { opacity: 'toggle' } });), then here's what's happening:
In most cases, the jumping isn't caused by the browser following the '#' link. The page jumps because at the midpoint of the animation between the two tab panes, both tab panes are fully transparent and hidden (as in display: none), so the effective height of the whole tabbed section becomes momentarily zero.
And if a zero-height tabbed section causes the page to be shorter, then the page will appear to jump up to compensate, when in reality it's simply resizing to fit the (momentarily) shorter content. Makes sense?
The best way to fix this is to set a fixed height for the tabbed section. If this is undesirable (because your tab content varies in height), then use this instead:
jQuery('#tabs').tabs({
fx: { opacity: 'toggle' },
select: function(event, ui) {
jQuery(this).css('height', jQuery(this).height());
jQuery(this).css('overflow', 'hidden');
},
show: function(event, ui) {
jQuery(this).css('height', 'auto');
jQuery(this).css('overflow', 'visible');
}
});
It will set the computed height of the pane before the tab transition. Once the new tab has appeared, the height is set back to 'auto'. Overflow is set to 'hidden' to prevent content from breaking out of the pane when going from a short tab to a taller one.
This is what worked for me. Hope this helps.
If you have something along these lines:
Tab 1
Try adding return false; after the tab activation command:
Tab 1
My guess is that you are animating your tab transitions? I am having the same problem, where the page scroll jumps back to the top with every click.
I found this in the jquery source:
// Show a tab, animation prevents browser scrolling to fragment,
Sure enough, if I have this:
$('.tab_container > ul').tabs();
$('.tab_container > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle', duration: 'fast' } });
my code jumps to the top and is annoying (but there's animation). If I change that to this:
$('.tab_container > ul').tabs();
//$('.tab_container > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle', duration: 'fast' } });
there is no tab animation, but switching between tabs is smooth.
I found a way to make it scroll back, but it's not a proper fix, as the browser still jumps to the top after clicking a tab. The scroll happens between the events tabsselect and tabsshow, so the following code jumps back to your tab:
var scroll_to_x = 0;
var scroll_to_y = 0;
$('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
scroll_to_x = window.pageXOffset;
scroll_to_y = window.pageYOffset;
});
$('.ui-tabs-nav').bind('tabsshow', function(event, ui) {
window.scroll(scroll_to_x, scroll_to_y);
});
I'll post any more progress I make.
I was given a solution for this...
How to stop screen from jumping up when tab is clicked:
Wrap the div that contains the tabs in a div with a fixed height.
See example here: http://5bosses.com/examples/tabs/sample_tabs.html
I had the same problem with jquery ui's menu - a preventDefault() on the anchor's click event stops the page from scrolling back to the top:
$("ul.ui-menu li a").click(function(e) {
e.preventDefault();
});
Mike's solution demonstrated the principle greatly but it has a big drawback - if the resultant page is short, the screen will jump to the top anyway! The only solution is to remember the scrollTop, and restore it after the tabs are switched. But before the restoration, enlarge the page (html tag) appropriatelly:
(edit - modified for new Jquery UI API + small improvement for large pages)
$(...).tabs({
beforeActivate: function(event, ui) {
$(this).data('scrollTop', $(window).scrollTop()); // save scrolltop
},
activate: function(event, ui) {
if (!$(this).data('scrollTop')) { // there was no scrolltop before
jQuery('html').css('height', 'auto'); // reset back to auto...
// this may not work on page where originally
// the html tag was of a fixed height...
return;
}
//console.log('activate: scrolltop pred = ' + $(this).data('scrollTop') + ', nyni = ' + $(window).scrollTop());
if ($(window).scrollTop() == $(this).data('scrollTop')) // the scrolltop was not moved
return; // nothing to be done
// scrolltop moved - we need to fix it
var min_height = $(this).data('scrollTop') + $(window).height();
// minimum height the document must have to have that scrollTop
if ($('html').outerHeight() < min_height) { // just a test to be sure
// but this test should be always true
/* be sure to use $('html').height() instead of $(document).height()
because the document height is always >= window height!
Not what you want. And to handle potential html padding, be sure
to use outerHeight instead!
Now enlarge the html tag (unfortunatelly cannot set
$(document).height()) - we want to set min_height
as html's outerHeight:
*/
$('html').height(min_height -
($('html').outerHeight() - $('html').height()));
}
$(window).scrollTop($(this).data('scrollTop')); // finally, set it back
}
});
Works with the fx effect too.
Try using event.preventDefault();. On the click event which is switching the tabs. My function looks like this:
$(function() {
var $tabs = $('#measureTabs').tabs();
$(".btn-contiue").click(function (event) {
event.preventDefault();
$( "#measureTabs" ).tabs( "option", "active", $("#measureTabs").tabs ('option', 'active')+1 );
});
});
Thanks for your help. Good suggestion, but I tried before with no luck. I think JQuery UI may be overriding my efforts.
Here is the code per tab:
<li class=""><span>Two</span></li>
I already tried this with no success:
<li class=""><span>Two</span></li>
Here is a simple example (without return false): http://5bosses.com/examples/tabs/sample_tabs.html
Any other suggestions?
Try just adding a min-height using css to each of the tab content areas ( not the tabs themselves ). That fixed it for me. :)
> var scroll_to_x = 0; var scroll_to_y =
> 0;
> $('.ui-tabs-nav').bind('tabsselect',
> function(event, ui) {
> scroll_to_x = window.pageXOffset;
> scroll_to_y = window.pageYOffset; }); $('.ui-tabs-nav').bind('tabsshow',
> function(event, ui) {
> window.scroll(scroll_to_x, scroll_to_y); });
Thanks for your help! Please let me know what else you find.
The above function works (screen doesn't move permanently)... but, the screen is very wobbly on click.
Here is a simple example showing how clicking a tabs causes the screen to jump toward the top (without the above code):
http://5bosses.com/examples/tabs/sample_tabs.html
Note that there's no animation being used.
I prefer to have an href="#" in my links that do not take the user anywhere, but you can do this as long as you add an onclick="return false;". The key, I guess, is not sending the user to "#", which depending on the browser seems to default as the top of the current page.
There is a much more simple way which I discovered from the comments on this page that is to simply remove the href="#" and it will not jump to the top any more! I verified and it works for me. Cheers
I had such a problem. My code was:
$("#tabs").tabs({
hide: {
effect: "fade",
duration: "500"
},
show: {
effect: "fade",
duration: "500"
}
});
I have simply removed show and it worked like a charm!
$("#tabs").tabs({
hide: {
effect: "fade",
duration: "500"
}
});
I had the same problem, plus mine were rotating on their own so if you were at the bottom of the page, the browser window would be scrolled up tot he top. Having a fixed height for the tab container worked for me. Kind of a weird thing still is that if you leave the window or tab and go back, it will still scroll. Not the end of the world, though.
replace the href="#" with href="javascript:void(0);" in 'a' element
works 100%
I found in my case the tab href=#example1 was causing the page to jump to the position of the id. Adding a fixed height to the tabs made no difference so I just added:
$('.nav-tabs li a').click( function(e) {
e.preventDefault();
});
Did you tryed:
fx: {opacity:'toggle', duration:100}

Categories

Resources