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.
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 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();
});
This chunk of code
$(document).click(function(e) {
$('#mymodal').modal('show');
});
captures a click anywhere on the page.
Unless that click is on a link, in which case the browser seems to follow the link rather than popping up the modal (at least, this is the behavior in Chrome).
How can I capture that the click, even if it's on a link?
One idea: overlaying the page with a fixed-position div that covers everything and captures the click. But maybe there is a more elegant way?
Add return false;:
$(document).on('click', function(e) {
$('#mymodal').modal('show');
return false;
});
JSFIDDLE
For more information read this thread.
You can do this :
$(document).on('click', function(e) {
$('#mymodal').modal('show');
return false; // avoids the propagation and the link default behavior
});
Currenlty when a page is posting back or something else is going on I display a big grey div over the top of the whole page so that the user can't click the same button multiple times. This works fine 99% of the time, the other 1% is on certain mobile devices where the user can scroll/zoom away from the div.
Instead of trying to perfect the CSS so that it works correctly (this will be an on going battle with new devices) I've decided to just stop the user from being able to click anything. Something like $('a').click(function(e){e.preventDefault();}); would stop people from clicking anchor tags and navigating to the link but it wouldn't stop an onclick event in the link from firing.
I want to try to avoid changing the page too radically (like removing every onclick attribute) since the page will eventually have to be changed back to its original state. What I would like to do is intercept clicks before the onclick event is executed but I don't think that this is possible. What I do instead is hide the clicked element on mouse down and show it on mouseup of the document, this stops the click event firing but doesn't look very nice. Can anyone think of a better solution? If not then will this work on every device/browser?
var catchClickHandler = function(){
var $this = $(this);
$this.attr('data-orig-display', $this.css('display'));
$this.css({display:'none'});
};
var resetClickedElems = function(){
$('[data-orig-display]').each(function(){
$(this).css({display:$(this).attr('data-orig-display')}).removeAttr('data-orig-display');
});
};
$('#btn').click(function(){
$('a,input').on('mousedown',catchClickHandler);
$(document).on('mouseup', resetClickedElems);
setTimeout(function(){
$('a,input').off('mousedown',catchClickHandler);
$(document).off('mouseup', resetClickedElems);
}, 5000);
});
JSFiddle: http://jsfiddle.net/d4wzK/2/
You could use the jQuery BlockUI Plugin
http://www.malsup.com/jquery/block/
You can do something like this to prevent all actions of the anchor tags:
jQuery('#btn').click(function(){
jQuery('a').each(function() {
jQuery(this).attr('stopClick', jQuery(this).attr('onclick'))
.removeAttr('onclick')
.click(function(e) {
e.preventDefault();
});
});
});
That renames the onclick to stopclick if you need to revert later and also stops the default behavior of following the href.
document.addListener('click',function(e){e.preventDefault()})
Modified-
Its your duty to remove the click event from the document after you are done accomplishing with your task.
Eg -
function prevent(e){
e.preventDefault()
}
//add
document.addListener('click',prevent)
//remove
document.removeListener('click',prevent)
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;
});