I'm using the following script with jQuery to have a fade transition when navigating between pages:
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(200);
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(200, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
It works fine when only using links to navigate between pages, but when using the back button on the browser, the page returned to is blank.
How can I get pages to be properly displayed when navigating to them via the back button?
Using the back button returns you to the state of the previous page right before you left it (in this case, completely faded out), at least that's how I understand it. Feel free to correct me if I'm wrong though.
In any case, I think repainting the DOM would solve your problem (taken from Coderwall):
$.fn.redraw = function(){
$(document).each(function(){
var redraw = this.offsetHeight;
});
};
And to call the function: $(document).redraw();
How about try using delegate
$("a").on('click', function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(200, redirectPage);
});
Related
I am trying to open the hyper links in a new tab. For loading in a new tab I am using the following code, which will run once and adds target="_blank" in the anchor tags:
<script>
$(document).ready(function(){
alert("ready");
$("a", "#myCustomContent").each(function() {
$(this).attr('target', '_blank');
});
});
</script>
but the jQuery is executed before the contents is retrieved from the service call and I cannot open the hyperlinks in a new tab, so I tried using the below code:
$(window).bind("load", function() {
$("a", "#myCustomContent").each(function() {
$(this).attr('target', '_blank');
});
});
here it fails as some of the images or the files fails to load, or it will take more time?
I need to find a way to call the jQuery to open the "ahref" tag in a new tab.
Try this one. Maybe this will solve the problem
$(document).click(function(e){
if($(e.target).parents('#myCustomContent').size() && e.target.tagName=="A"){
e.preventDefault();
window.open(e.target.href);
}
})
Without seeing more of the code I'd have a hard time deciphering exactly what the best step would be, but it sounds like you are having images with links load after your code runs. You could always try something that would update the click handler on load:
$('body').on('click', 'a', function(){
$(this).attr('target', '_blank');
});
Or you could look into a function that checks if your images are loaded and sets a timeout until they are all set.
var changeTarget = function() {
if ($('body').find('#img')) {
//do code it's loaded
} else {
//repeat in 100 miliseconds
setTimeout(changeText,100);
}
}
changeTarget();
the below code works fine for opening the hyperlink in a new tab.
if only certain anchor tags(hyperlinks) in the page has to be opened in a new window then the below code can be used
$(document).click(function(e){
if($(e.target).parents('#myCustomContent').size() && e.target.tagName=="A"){
e.preventDefault();
window.open(e.target.href);
}
});
where "myCustomContent" is the id given to the division or the tag where the hyper link is present.
or
if all the anchor tags in a page has to be opened in a new tab then the below code can be used.
$('body').on('click', 'a', function(){
$(this).attr('target', '_blank');
});
thanks for the help, #JeremyS and #doniyor
I have a onepager site where I use scrollmagic plus all its necessary plugins/libraries (and jQuery) for different effects where animation, pinning, fading processes etc. are triggered by scroll positions.
I also use it for animated scrolling to the anchor points on the page (from the menu and from other local links) - see the according part of the script below.
The problem is that this script suppresses the default behaviour of "jumping" directly to an anchorpoint when a local link is clicked, and apparently also when the page is accessed from outside via a direct link or bookmark with an anchor appended to the URL (like http://www.example.com/index.php#part3). Altough this behaviour is desired when clicking a local link, it obviously prevents the browser from displaying the anchor position when an anchor is linked from somewhere else.
Is there any way to make the browser directly display that anchor position when a link like in the above example is clicked?
var sm_controller_1 = new ScrollMagic.Controller();
sm_controller_1.scrollTo(function(anchor_id) {
TweenMax.to(window, 2.0, {
scrollTo: {
y: anchor_id
autoKill: true
},
ease: Cubic.easeInOut
});
});
jQuery(document).on("click", "a[href^=#]", function(e) {
var id = jQuery(this).attr('href');
if(jQuery(id).length > 0) {
e.preventDefault();
sm_controller_1.scrollTo(id);
if (window.history && window.history.pushState) {
history.pushState("", document.title, id);
}
}
});
(It doesn't make sense to create a fiddle/codepen since the problem lies in calling the original URL from an external source).
Well assuming scroll magic doesnt have extra functionality that is not posted here that would get in the way of my answer you could try this:
Add a data-attribute to your links which you want to use default behavior:
<a href="example.com/index.php#part3.php" data-default="true">
Check if that data attribute exists and if it does return true in your click handler to continue with the default behavior:
var sm_controller_1 = new ScrollMagic.Controller();
sm_controller_1.scrollTo(function(anchor_id) {
TweenMax.to(window, 2.0, {
scrollTo: {
y: anchor_id
autoKill: true
},
ease: Cubic.easeInOut
});
});
jQuery(document).on("click", "a[href^=#]", function(e) {
if(e.currentTarget.dataset.default){
return true;
}
var id = jQuery(this).attr('href');
if(jQuery(id).length > 0) {
e.preventDefault();
sm_controller_1.scrollTo(id);
if (window.history && window.history.pushState) {
history.pushState("", document.title, id);
}
}
});
You can try and use this code:
jQuery(function ($) {
$(document).ready(function() {// if needed, use window.onload which fires after this event
if(window.location.hash) {
var hash = window.location.hash;
$( 'a[href=' + hash + ']' ).click();
}
});
});
It will wait till the DOM (or the page) is loaded and then simulate the user click on the nav item.
After I've read your question one more time, I am not sure anymore if you want your page loaded on the position of the element which is listed in the anchor or the scroll wasn't working when coming from an external source?
If the scroll was working but you wanted to display the page at the right place, like a jump, then I propose 2 solutions:
a) use the CSS opacity:0; on the body and after the scroll is finished, set it back to opacity:1;
b) try to jump on the proper place on the page before you load ScrollMagic
I am currently trying to create a script that makes fading transition from page to page when clicking a anchorlink. I have already made the script, but it does not seem to work.
My code look like this:
$("body").load(function() {
$(this).fadeIn(200);
});
$("a").click(function() {
$link = $(this).attr("href");
$("body").fadeOut(200);
window.location.replace($link);
});
It does not seem to make the fadeIn and fadeOut transitions. It is still the normal pageload.
First hide the body of the page on page load then
you need to place the redirecting line in the complete function of fadeOut
Try this code:
$(document).ready(function() {
$('body').hide().fadeIn(200);
$("a").click(function(e) {
e.preventDefault();
$link = $(this).attr("href");
$("body").fadeOut(200,function(){
window.location = $link;
});
});
});
You need to hide the element initially, either with .hide() or with CSS display:none;.
$(document).ready(function() {
$('body').hide().fadeIn(200);
});
You have to use setTimeout to time the window.location.replace() to execute after the current body has faded like :
$("a").click(function() {
$link = $(this).attr("href");
$("body").fadeOut(200);
setTimeout(function(){
window.location.replace($link);
},200);
return false;
});
Remember to return false at then end of the function else the default action of the link click i.e. redirection precedes any other action associated with the anchor.
But, sincerely, this will give you a smooth fading effect from the current page but not a smooth effect on the redirected page unless it's implemented by you.
This is four years later, but just in case someone needs it. I agree with Roko about the flickering, so I initially hid the body with CSS instead of putting .hide() before the fade in effect:
body {
display: none;
}
Also some have mentioned using .fadeOut(), but it doesn't work on Chrome. I switched to .show() and .hide() which seems to work great. It also animates all of the elements as it fades, which produces a need transition without a hefty jQuery plugin.
$(document).ready(function() {
$('body').show(500);
$("a").click(function() {
$link = $(this).attr("href");
setTimeout(function(){
window.location.replace($link);
},1000);
$("body").hide(500);
return false;
});
});
Lastly, I'm using this on a page that contains click-to-scroll navigation like most one-pagers, as well as opening new tabs with target="_blank", so I changed $("a") to $(".transition-link") and added class="transition-link" to the links I want to navigate from.
I'm doing page transitions with jQuery by fading out content and fading it back in when the page loads but my problem is when I click my link and call my click function and redirecting the page it loads at the the top of the page. Is there a way I can prevent this behavior? Here is my click function for my page transition, thanks in advance for any help!
LINK
jQuery
$(".content").fadeIn(750);
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$(".content").fadeOut(500, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
Good solution : Use history api with hashbangs fallback
Bad solution:
as an easy hack you can capture the current scroll position with
$(".content").fadeIn(750);
var offset = window.location.href.match(/offset=(\d+)/)
if(offset){
$(document).scrollTop(offset[1])
}
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href + "?offset="+$(document).scrollTop();//pay
//special attentions to this line will work only for a link without get parameters.
$(".content").fadeOut(500, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
event.preventDefault();
linkLocation = this.href;
Thanks to the Team,
please kindly put this above two lines after the click function start
That will help you to make the scroll off.
I'd like to load the flexslider gallery with jQuery when an anchor element is been clicked.
The gallery shall be loaded in div#slider-loader
The problem is that the HTML is loaded properly, but the Javascript seems not to affect the injected elements even though I read that in this cases I shall use .on().
$(document).on('click', '.cliccami' , function() {
var href = $(this).attr('href');
$('#slider-loader').load(href);
return false;
});
Thank you in advance!
--
use a call back function to preform action whaen the load is completed like so
Sweet! it worked! although with such solution the .on() event become useless.
Now I came up with this and it works:
$('.cliccami').click(function() {
var href = $(this).attr('href');
var gallery_height = $('.flexslider').css('height');
$('#slider-loader').hide().fadeIn('slow', 'swing').load(href , function(){
$('.flexslider').flexslider({
animation: "slide"
});
})
return false;
});
The only problem is the injection of the code is very scattering.
I would like to make the div container '#slider-loader' adjust its height according to the '.flexslider' height with a smooth animation.
What I've tried to do is:
$(document).ready(function(){
$('#slider-loader').hide();
});
$(document).on( 'click', '.cliccami', function() {
var href = $(this).attr('href');
var gallery_height = $('.flex-viewport').css('height');
$('#slider-loader').load(href , function(){
$('.flexslider').flexslider({
animation: "slide"
});
$('#slider-loader').css('height' , gallery_height);
$('#slider-loader').slideDown(10000);
});
return false;
});
The problem is that once i click the anchor element the #slider-container start to slideDown showing its content but it dosen't do it for the whole .flexslider height which I've set as variable and gave to him with the .css() method. It slideDown for few pixel and then it suddenly became of the entire .flexslider height.
use a call back function to preform action whaen the load is completed like so
$(document).on('click', '.cliccami' , function() {
var href = $(this).attr('href');
$('#slider-loader').load(href , function(){
// some thing to happen when loading is done
});
return false;
});