I'm using this fade in and out JQuery/Javascript effect on my site to have each page fade in and out when a link is clicked. It's working great when the link that is clicked leads to a different page, but it is causing problems when the link leads to a different part of the page (such as my back to top link), when a mailto link is clicked, and when a link that is suppose to open up in a new page or tab is clicked. When these type of links are clicked they just lead to a blank white page because they don't lead to a new page. Here is the script:
$(document).ready(function() {
//Fades body
$("body").fadeIn(1500);
//Applies to every link
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
//Redirects page
function redirectPage() {
window.location = linkLocation;
}
});
Because of this I'm trying to figure out if there is a way where I can exclude this fade in/out function from certain links (such as the back to top link), but I don't know how to do it. I know that rather than set all the links to fade in/out I can set the fade in/out effect to a specific class that way it doesn't effect every link. However because the site is rather large, it would be extremely tedious and difficult to add that class to every link. So rather than do that I'm wondering if theres a way to define a no-fade class that would exclude this fade in/out function? That way I could apply that class to these few links that are having problems and make those links behave normally.
It seems like a simple thing to do, but because I'm still not very fluent in javascript/jquery I don't know how to do it. Any help would be much appreciated!
*EDIT: Here is the solution incase anybody else has a similar issue. Thanks to David for the missing piece!
$(document).ready(function() {
//Fades body
$("body").fadeIn(1500);
//Applies to every link EXCEPT .no-fade class
$("a").not(".no-fade").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
//Redirects page
function redirectPage() {
window.location = linkLocation;
}
});
Yup, you could indeed define a class that when applied to an anchor would exclude it from performaing your fade out and redirect.
So if you had an anchor you wanted your default fade-out behaviour to apply to then simply leave it as is.If you didn't want this behaviour then you could apply a class (we'll call it *no-fade") to the anchor.
HTML
Another page
Back to top
jQuery
<script type="text/javascript>
$(document).ready(function() {
$("body").fadeIn(1500);
$("a").not(".no-fade").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
// Redirects page
function redirectPage() {
window.location = linkLocation;
}
});
</script>
The only thing I've edited from your code is the selection of the anchors which I changed from:
$("a")
to
$("a").not(".no-fade")
The unobtrusive way would be to look for the hash symbol (#) or mailto:, etc. to prevent those types of links from fading out:
working fiddle
$("a").click(function (event) {
event.preventDefault();
linkLocation = $(this).attr('href');
if(linkLocation.indexOf('#') != -1 || linkLocation.indexOf('mailto:') != -1)
{redirectPage();}
else if($(this).attr('target') && $(this).attr('target').indexOf('_') != -1) window.open(linkLocation);
else $("body").fadeOut(1000, redirectPage);
});
Also, linkLocation = this.href should be linkLocation = $(this).attr('href')
Related
I don't want the browser to jump to an given id in :
Learning diagnosis
Few links direct to another page so i need the anchor tag. But in the same page i have written a code to scroll to a proper location.
I have tried:
e.preventDefault();
return false;
e.preventPropogation();
none of the above works.
Basically when on same page i want to override the default scrolling. I have written scrollTop but it doesn't work since the default scrolling take place
Try to find out # in attr of a tag:
$("a").on("click", function(e) {
var hasUrl = $(this).attr('href').split('#')[0];
alert(hasUrl == "")
if(hasUrl == "") {
return false;
} else {
alert('redirect');
}
})
Here is updated fiddle
I have seen this effect here - the page fades in on load and fades out on links... I have found code snips to do this.
The code I have so far:
$(document).ready(function() {
// the body is already set to display none!
$("body").delay(500).fadeIn(500);
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(500, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
... but what I can not figure out is how the page fades out and back in when you refresh the page in the OneUp theme example above???
Might it be ajax??
Check this out
http://api.jquery.com/unload/
I think it may be what you are looking for. Just make a function that fades out the page and you can call it when someone clicks away or refreshes.
This is the correct answer... Go to the link, refresh the entire page. Watch the text.
http://jsfiddle.net/xom89ne6/2/
body{
display: none;
}
$(function(){
$("body").delay(500).fadeIn(1000);
$(window).on('beforeunload', function(){
$("body").fadeOut(1000);
});
});
So I am developing this site from scratch (first time ever) and I've made the general layout from the psd I made and everything is great, so I am now at the point where I want to refine the site a bit with some javascript effects-functions.
When I am at the index page, you have a banner, sidebar and content (articles). When I press the articles it goes to the article (obviously) but I want to make a custom loading page like this at 0:22:
https://www.youtube.com/watch?v=k1q6Y_snURw#t=20
I've got to make or find a gif but say I've done that, how would I add this to the site?
The articles are all in a class by themselves although I guess I would have to use the ID for each specific article to get it to go to the respective article.
EDIT: Pop this in a file and add a reference to it in every page that has a link:
function loadXMLDoc(name) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.addEventListener("load", transferComplete, false);
xmlhttp.open("GET", name, true);
document.getElementById("Loading").style.display = "block";
xmlhttp.send();
function transferComplete() {
document.write(xmlhttp.responseText);
history.replaceState(null, null, name);
}
}
function AJAXcallback(e) {
var e = window.e || e;
var href = e.target.getAttribute("href");
if (e.target.tagName !== 'A' || href[0] == "#" || href.substring(0, 11).toUpperCase() == "JAVASCRIPT:" || e.target.class == "noloadpage")
return;
e.preventDefault();
loadXMLDoc(href);
}
if (document.addEventListener)
document.addEventListener('click', AJAXcallback, false);
else
document.attachEvent('onclick', AJAXcallback);
And something to show when the next page is loading
(be sure to add the id "Loading") like this:
<div id="Loading" style="display:none">Loading</div>
This makes every link that isn't an anchor(#id) or function(javascript:whatever) and doesn't have the "noloadpage" class load with AJAX and show the Loading div while loading.
If i understand properly you want a smooth scrolling to the article. You can achieve this with using animate and scrollTop.
Is it possible to animate scrollTop with jQuery?
Now you need to select your article with a selector.
http://api.jquery.com/category/selectors/
Your saying that your article has is proper class. So the code will look like this :
$("sidebar").click(function () {
// "." is the selector for class and i assume the value of the sidebar match the class of article
$("html, body").animate({ scrollTop: $("." + $(this).val()).position().top });
});
Hope this help.
Looking into solution of how to completely disable prettyPhoto poup overlay in case the clicked link has a specific class. So far, no matter what it keeps ignoring my if condition.
Here is the code:
(function(){
var targetLink = $('.popup');
targetLink.click(function(){
if($(this).hasClass('mobile')){
//do my stuff and then
} else {
$("a[rel^='prettyPhoto']").prettyPhoto({
deeplinking:false,
social_tools:false
});
}
return false;
});
})();
Any idead would be apreciated.
thak you.
This should stop prettyPhoto being applied to links where the element has a class of mobile.
$("a[rel^='prettyPhoto']:not(.mobile)").prettyPhoto({
deeplinking:false,
social_tools:false
});
I want to separate these functions. They should both work separately on click events:
FIRST FUNCTION
$("ul.nav li").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
ACTION A
});
$(window).trigger('hashchange');
});
SECOND FUNCTION
$("ul.subnav li").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
ACTION B
});
$(window).trigger('hashchange');
});
This is what happend in ACTION A:
$mainContent
.find(".maincontent")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " .maincontent", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$(".nav a").removeClass("active");
$(".nav a[href="+newHash+"]").addClass("active");
});
});
The Problem is that if I click the Link of the Second function always the the first function fires.
Details of what I'm trying to do:
First, I build my site on .php to serve poeple without JavaScript. Now I want to load the "maincontent" dynamically. So I found this script I'm using:
http://css-tricks.com/6336-dynamic-page-replacing-content/
It does do a great job if you only want to load "maincontents".
But my site has sub-navigation on some pages where I want to load the sub-content. In .php these sites use includes. So I get my content by: href="page2.php?page=sub1"
So, when I click on the sub-links now they load also dynamically but the script also on the whole maincontent loading area. So it doesn't really load content by .load() but the sub-content of the includes do appear.
So what I thought was just to separate this function. The first to simply load the maincontents and a second one for the sub-navigation to refresh only the sub-content area. I don't even understand how this script loads the include content dynamically since the link is the straight page2.php?page=sub1 link. All dynamic loaded content usually looks like "#index", without the ending ".php".
Some quick history:
I'm trying to get the best page structure. Deliver .php for non JavaScript user and then put some dynamic loading stuff over it. Always with the goal to keep the browser navigation and the browser links (for sharing) for each page in tact.
I'm not an jQuery expert. All I have learned so far was by trial and error and some logical thinking. But of course, I have a lack of fundamental knowledge in JavaScript.
So my "logical" question:
How can I tell the "nav" links to perform only their "$(window).bind"-Event and to tell the "subnav" links only to perfom their "$(window).bin"-event.
Is this the right thinking?
Since I've already been trying to solve it for nearly the last 18h, I'll appreciate any kind of help.
Thank you.
IMPORTANT:
With the first function I not just only load the maincontent but also I'm changing a div on the page with every link. So for any solution that might want to put it together in one, it won't work, cause they should do different things on different areas on the page. That's why I really need to call on the window.bind with each nav/subnav click.
Can anyone show me how?
Melros,
In your second function, you are binding to the event hashchange2, which is incorrect. Instead, you STILL want to bind to hashchange. Instead of:
$(window).bind('hashchange2', function() {
...
});
Try:
$(window).bind('hashchange', function() {
...
});
If you want to namespace your event subscriptions, you can suffix the ending of the event you are binding to with a period (.) and then the namespace:
$("#test").bind("click.namespace1", function() { });
$("#test").bind("click.namespace2", function() { });
Ok, it seems that you want to execute action A when a link inside .nav is clicked, and action B when a link inside .subnav is clicked.
You can just put these actions inside the event handlers. Furthermor, if .subnav is nested inside .nav, you have to restrict your selector:
// consider only direct children
$("ul.nav > li").delegate("a", "click", function() {
var href = $(this).attr("href");
if(window.location.hash !== href) {
Action A
window.location.hash = $(this).attr("href");
}
return false;
});
// consider only direct children
$("ul.subnav > li").delegate("a", "click", function() {
var href = $(this).attr("href");
if(window.location.hash !== href) {
Action B
window.location.hash = $(this).attr("href");
}
return false;
});
I don't think listening to the hashchange event will help you here, as this event is triggered in both cases and you cannot know which element was responsible (you probably can somehow, but why make it overly complicated?).
Here's by the way the solution I came to:
After understanding that the haschange-event doesn't have to do anything with it (as long as you don't want to make the subcontent bookmarkable too) I just added a new load function for the subcontent:
$(function(){
$("ul.linkbox li a").live('click', function (e) {
newLink = $(this).attr("href");
e.preventDefault();
$(".textbox").find(".subcontent").fadeTo(200,0, function() {
$(".textbox").load(newLink + " .subcontent" , function() {
$(".subcontent").fadeTo(200,1, function() {
});
});
$("#wrapper").css("height","auto");
$("ul.linkbox li a").removeClass("activesub");
$("ul.linkbox li a[href='"+newLink+"']").addClass("activesub");
});
});
});