I have set up tabs on a site using jquery, so that 4 pages of data can be shown without refreshing the page.
This works fine but there is one quirk which I want rid of! If ive scrolled down the first page a bit, and then click on another tab, the 2nd tab appears but is no longer scrolled down (ie it appears and the page moves back up to the top). This makes the page 'look' as though its reloading even though its not. Is there a way to prevent the page moving, ie locking the scrollbar in its current position?
This is the script for creating the tabs and loading the different sections into view:
<script>
//add the tabs
$(document).ready(function() {
$('.tabs a').click(function() {
var $this = $(this);
$('.panel').hide();
$('.tabs a.active').removeClass('active');
$this.addClass('active').blur();
var panel = $this.attr('href');
$(panel).fadeIn(250);
return false;
}); //end click
$('.tabs li:first a').click();
}); //end ready
</script>
Try to use e.preventDefault():
$('.tabs a').click(function(e) {
e.preventDefault();
Use event.preventDefault(); You can restrict the default behavior using this function and code accordingly to your requirement.
$( ".tabs a" ).click(function( event ) {
event.preventDefault();
});
Related
I have a very difficult client that is demanding that a jquery toggle closes when a user scrolls down the page, rather than automatically staying open / closing when a user collapses it...
would that be possible? My jquery is pretty simple...
$(document).ready(function() {
$('.nav-toggle2').click(function() {
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function() {
if ($(this).css('display') == 'none') {
//change the button label to be 'Show'
toggle_switch.html('Contact Us');
} else {
//change the button label to be 'Hide'
toggle_switch.html('Contact Us <');
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tag href="#contactus" class="nav-toggle2">Contact Us <</tag>
<div id="contactus">some content that hides/shows here</div>
I can get around in jquery but am a little naive when it somes to integrating new effects into it.... would it be possible to have toggle_switch.html on scroll so when a user gets maybe 1/3 the page down, it hides?
Based on your comments you said you haven't tried listening to the scroll event. Can you try that?
It will be something like this (code not tested):
$(window).on("scroll", function(){
// you can replace this with your hiding toggle logic
$('.nav-toggle2').toggle('false');
});
You may want to unbind the event from the window later to avoid memory leak.
Reference about scroll: Jquery scroll api
I am using jQuery UI tabs and I want to load tab content only when it's clicked. I am trying to prevent loading content of non active tabs to reduce page load time.
I tried many things but I cant make this work.
JSFIDDLE
$('.tabs .tab-links a').on('click', function (e) {
var currentAttrValue = jQuery(this).attr('href');
$('.tabs ' + currentAttrValue).fadeIn(1800).siblings().hide();
$(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
Thank you
Hy there,
I noticed several pages with a pretty sweet page transition (one example: semplice)
if you click the navigation the page fades out, reloads and fades back in. Now I tried to create something on my own. I created the effects for the fadeIn and the fadeOut. Then I created something like this:
$(function(){
fadeInbody();
$('ul#navi li a').click(function(e) {
e.preventDefault();
newLocation = this.href;
fadeInbody(function(){
window.location = newLocation;
});
});
});
Actually that works quite good for the normal left-click.
But now I have a mousebutton that opens the link automatically in a new tab. I use this button quite a lot. In this case because of the e.preventDefault(); it breaks this behaviour and opens the page the same tab.
Is there a better to create something like this without breaking the default behaviour? (In the semplice-example the new tab mousebutton works)
You can check which button the user has clicked in the event's which property.
So, your code would look like this:
$(function(){
fadeInbody();
$('ul#navi li a').click(function(e) {
if (e.which == 1) {
e.preventDefault();
newLocation = this.href;
fadeInbody(function(){
window.location = newLocation;
});
}
});
});
You basically run your fade logic when the user clicks with the left button.
See comments below the question for cross-browser compatibility info.
I want to prevent scrolling of the body or html when user is scrolling inside the menu. However, I DON'T WANT to set $('html').css('overflow','hidden'); because this makes the entire document shift right. I just want to disable the HTML scroll when scrolling or swiping inside the menu. I tried to search this topic a lot, but nothing I found really worked for me.
FIDDLE
Set this when the menu is open:
var thisHeight = $(window).scrollTop();
$(window).on('scroll', function() {
$('html,body').scrollTop(thisHeight);
});
$('.noScroll').on('touchstart' , function(e) { e.preventDefault(); })
$('.noScroll').on('touchmove' , function(e) { e.preventDefault(); })
And this when it closes:
$(window).off('scroll');
$('.noScroll').off('touchstart');
$('.noScroll').off('touchmove');
$('.noScroll').on('touchstart' , function(){ return true; });
$('.noScroll').on('touchmove' , function(){ return true; });
You need to add a class="noScroll" in the text div for it, check FIDDLE.
iOS solution based on:
How to unbind a listener that is calling event.preventDefault() (using jQuery)?
JSFIDDLE: http://jsfiddle.net/m2ga2ygo/4/.
Uploaded test: https://liebdich.biz/develop/iosMobile.html.
I am have an issue with the page reloading. I have written a simple jQuery script that will tab through content. You can see it in action here: http://www.jonathanmaloy.com/tabstack/
The problem is that the page reloads and starts back at the top. I want to be able to have it stay in the same position so when you click on the next tab you wont have to scroll down the page back to it.
preventDefault() and return false do not fix the problem.
If there is anything else you need let me know but with the above link you can see everything.
Here is my current jQuery code:
$(document).ready(function() {
$('#tabnav li').click(function() {
$(this).not('.active').each(function() {
$('.tab').hide();
$('#tabnav li.active').removeClass('active');
});
$(this).addClass('active');
$($(this).attr('title')).fadeIn(450);
});
$('#tabnav li:first').click();
});
Thanks in advance for any help!
Edit: Updated answer based on properly reading the question :-)
As discussed in the comments the problem arises when a new tab is shown and a previously shown tab is hidden. The DOM removal of the previous tab shrinks the page which causes the browser to jump to the top of the page which looks like a page reload, when actually it is not.
The following JavaScript stores the visible tab first and removes it once the new tab has begun to fade in. I also made a few changes to speed up the function by storing some jQuery objects so save re-querying the DOM each time. Also note that you did not need the each() as the same result can be achieved with a different selector, plus in your original code you were effectively hiding all .tab class elements multiple times.
$(function() {
var tabItems = $('#tabnav li'); // save looking this up multiple times
$('.tab').hide(); // hide all initially
$('#tabnav li').click(function() {
// remove active class from all and store the visible tab
tabItems.removeClass('active');
var visibleTab = $('.tab:visible');
// add class to selected list item
$(this).addClass('active');
$(this.title).fadeIn(450); // show new tab
visibleTab.hide(); // hide old one (DOM already has new tab in so page height will not shrink)
});
$('#tabnav li:first').click();
});
You want to either call event.preventDefault() or add a return false; (you don't need the event for this one) to the end of the function.
By default the browser would execute any click functions bound to the element being clicked on and then follow the link (which I assume is href="#" or similar) that causes the browser to reload the page. Since you are binding a function to the click event you are need to stop the click event from continuing and the browser will not continue execution and follow the href.
JavaScript
$('#tabnav li').click(function(event) { // <-- added the eventData map
$(this).not('.active').each(function() {
$('.tab').hide();
$('#tabnav li.active').removeClass('active');
});
$(this).addClass('active');
$($(this).attr('title')).fadeIn(450);
event.preventDefault(); // or return false;
});