I am using https://github.com/Prinzhorn/skrollr to animate the background of my site as I scroll. However I am also wanting to have my links scroll up and down the page like a normal single page site would do.
The problem is that both are working if I manually scroll the background changes, if I click the link the page scrolls to the correct place. The problem is that when I click the button the background doesn't scroll as well.
It seems like I am working with two different scroll functions and as a result they aren't working together and I need to use the same one.
Here is the code.
js - Scroll to link:
var $root = $('html, body');
$('a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
js – Skrollr init
skrollr.init({
smoothScrolling: true,
forceHeight: true
});
I will try put together a fiddle to make it more clear but hopefully the answer is really simple.
If anyone else ever faces this problem the answer lies her: https://github.com/Prinzhorn/skrollr-menu
This will allow you to scroll to you internal links along with Skrollr animations. A HUGE plus and a very simple fix, you don't even need any of your own scrolling code just this and it will work with you links.
There's a way to do this, Skrollr has some methods very useful, in console, just type the variable contains skrollr, it will show some methods that you can use, one of them is "setScrollTop(int, bool)", so just call this method with the info you need, for example:
s.setScrollTop(9000, true)
Which means that I want it to scroll to the height position 9000. It works fine, you just need to know the height position where you need to go.
I'm trying to make the window scroll to an element on click. It is working, except when the slideUp animation of one of the previous elements fires, the clicked element scrolls up way past the top.
Here's the link: http://jtwebfolio.com/mobi
NOTE: Size your browser down to mobile width to best see the issue. Also, this is taking place on the portfolio projects.
Here's the code:
$('article.project header').click(function(){
if($(this).parent().hasClass('clicked')){
// If the clicked project has already been clicked, remove the class and hide the content
$(this).parent().removeClass('clicked');
$(this).parent().find('.proj_content').slideUp('fast');
}else{
// Remove the class and slide the content up on all projects
$('article.project').removeClass('clicked');
$('article.project .proj_content').slideUp('fast');
// Add the class and show the content on the selected project
$(this).parent().addClass('clicked');
$(this).parent().find('.proj_content').slideDown('fast');
// Slide the project to the top after clicking on it
$('html, body').delay(500).animate({
scrollTop: $(this).parent().offset().top
}, 500);
}
});
If someone could help me produce the desired effect, that would be amazing. Thanks in advance!
A couple of things:
Your .slideDown()s use the speed fast, but you're only delaying by 500ms. fast is synonymous with 600ms. In general, I think it's a bad idea to use both as it's very confusing to someone reading your code what fast is.
Rather than using .delay() method, I'd use the complete argument on the slideDown or slideUps, so that once they're complete, you do your scrolling. This makes more sense, as you'd then not have to worry about conflicting timings.
My guess would be that your problem is caused by your transitions taking 600ms, but your scroll only waiting 500ms. At 500ms, it's getting the wrong offset values and scrolling to those.
Perhaps you should consider changing your markup to something like:
$(this).parent().find('.proj_content').slideDown('600', function() {
// Slide the project to the top after clicking on it
$('html, body').animate({
scrollTop: $(this).parent().offset().top
}, 500);
});
* Note: I've changed fast to 600 for clarity's sake.
try this :
$('article.project').on('click','header',function(){
_parent = $(this).parent();
if(_parent.hasClass('clicked')){
// If the clicked project has already been clicked, remove the class and hide the content
_parent.removeClass('clicked');
.find('.proj_content')
.slideUp('fast');
}else{
// Remove the class and slide the content up on all projects
$('article.project').removeClass('clicked')
.children('.proj_content')
.slideUp('fast');
// Add the class and show the content on the selected project
// Slide the project to the top after clicking on it
_parent.addClass('clicked')
.find('.proj_content')
.slideDown('fast',function(){
// callback
$('html, body').animate({ scrollTop: +(_parent.offset().top)+'px' }, 500);
});
}
});
i saw an effect in iconArchive site and i don't no how to apply it if one of you help me to get the idea with small example this will be nice.
under this link :http://www.iconarchive.com/search?q=share&page=3 if you go over the heart img then a copy of it will move to the bottom and add the icon you have selected. i have no idea how to start for that reason i don't have any code .
i think they use java script +jquery+ css to do it.
The jQuery animate function can do this neatly: http://jsfiddle.net/bX6Uk/.
$('#button').click(function() {
$('#div').animate({
top: 300,
left: 10,
}, 'slow');
});
To achieve the specific effect on your example page you should check out the jQuery UI Transfer effect.
I have some code here which works perfectly in firefox but not in chrome or IE,
my javascript is thus
`
$(document).ready(function() {
$("#clientLoginPop").show();
$("#clientLoginPop").animate({"left": "-=400px"}, "fast");
});
$("#clientLoginCloseLink").click(function () {
$("#clientLoginPop").animate({"left": "+=400px"}, "fast");
});
$("#contactUsPopLink").click(function () {
$("#contactUsPop").show();
$("#contactUsPop").animate({"left": "-=437px"}, "fast");
});
$("#contactUsClose").click(function () {
$("#contactUsPop").animate({"left": "+=474px"}, "fast");
});
});
`
and finally the css of the div looks like this, i think rather importantly it's aligned to the right of the browser: (the client login div looks similar just a different height)
`
#contactUsPop
{
width:437px;
right:-437px;
margin-top:220px;
position:fixed;
height:217px;
background-color:white;
z-index:2;
}
`
so what happens in firefox is the div animates to the left and then when it closes it moves back to the right. when in chrome the div doesn't seem to pop up at all?
the URL of the site is this:
http://clearcreativegroup.com/devcorner/clear3/
the tabs are on the right hand side of the browser, any advice would help tons, thank you!
$("#clientLoginPop").animate({"right": "+=400px"}, "fast");
I think Chrome and Firefox interpret it differently when you assign both a left and right property. Try either animating the right property instead, or removing it before animating left.
In chrome... the firs time you click the anchor it appears on the far left of the window and moves to the left.
Have you tried setting the left/right properties to a specific value instead of adding or subtracting to it?
ex:
$("#clientLoginPop").animate({"left": "-1000px"}, "fast");
paired with
$("#clientLoginPop").animate({"left": "400px"}, "fast");
I usually use CSS float, or position:absolute; to adjust the web interface.
to using CSS position:absolute effectively, use position:relative on the parent block.
this is nice reference for create login like twitter.
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}