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.
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
Following is my code which I am using to load contents dynamically. The issues which I am facing are the following:
Following code has now disabled CTRL+CLICK shortcode to open a url in a new tab. The new CSS and JS are not applying if they are not already exist in the previous page. Kindly let me know how can I resolve above mentioned issues?
$(document.body).on("click", "nav a", function () {
topen = $(this).attr("href");
window.location.hash = $(this).attr("href");
$("#main_wrapper").load( topen +" #main_wrapper > *");
return false;
});
What you want to do is modify the handler to use prevent default instead of returning false. Then you can check how the user activated the button and can act accordingly.
$(document).ready(function() {
$('a').on('click', function(e) {
if(e.ctrlKey || e.button === 1) {
return;
}
e.preventDefault();
// Do the stuff when the anchor is just clicked.
});
});
You can examine the Fiddle
In terms of the JS and CSS not applying we would need a working example of this to be of more assistance.
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')
I tried with this code but, didn´t worked.
<a href="http://altodesign.pt/#portfolio" onClick="loadintoIframe('myframe,'portfolio/mmteam.html');">
you can try something like this
a href="javavcipt:document.getElementById('myframe').src = 'portfolio/mmteam.html';"
I would never use javascript ...
I have had a look into your webpage (plenty to learn, like add scripts to the end of the page, create a global javascript object to hold all website actions, etc ... but that's not the question)
I could see that, even thought you jump to #CONTACTOS you are not making the use of the hash at all... and you should!
using the hash would let you do things like:
http://altodesign.pt/#portfolio-cooptaxis
and that would jump to portfolio anchor and load the cooptaxis.html into the iframe and you stoped using javascript:loadintoIframe('myframe', 'portfolio/mmteam.html') at all, as that will cause Google Analytics and Crawlers not to follow up your links for example ...
your method could be something simple like
$(function() {
// let's see if we have an hash on the page
var hash = document.location.hash;
if(hash.length > 0) {
if(hash.instr('-') >= 0) {
// supposing will have only one char '-'
var img = hash.split('-')[1];
// let's remove the frame info from the hash
hash = hash.split('-')[0];
// there's a call to load into the iframe, let's load it
$("#myframe").attr("src", "portfolio/" + img + ".html")
}
// let's fly
jumpTo(hash);
}
// let's disable the anchor links by default and use the hash
$("a[href^=#]").click(function() {
// for all links that start with the hash, let's...
document.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function() {
// everytime the hash changes let's fly
jumpTo(document.location.hash);
});
});
function jumpTo(anchor) {
var a = $("a[name='" + anchor.replace('#','') + "']"),
pos = 0;
if(a.length > 0) {
// we have found the anchor, let's grab it's top position
pos = a.position().top;
}
// if we got here and pos === 0, we did not found the anchor
// for the given hash... maybe the user is playing around ...
// and we shall fly
$('body,html').animate({
scrollTop: pos
}, 800);
}
justthis will allow you to avoid using javascript to jump your links, as all they now have to have is simple: Portfolio
Let we say that you have page1.html in-which a link to page2.html you want it to be opened in an iframe in page1.html
in page1.html
link
<iframe name="iframe-name"></iframe>
Then you are able to add any anchor you want. It is just a matter of naming your iframe and then targeting it in the link!
I am currently using jQuery-Smooth-Scroll to smoothly scroll up and down to various anchor positions on one of my pages (Page 1). However, what I would also like to be able to do is, from another page (Page 2), link to Page1 (appending #bookmark to the url) and have jQuery-Smooth-Scroll pick up on the fact I am calling the page with a #bookmark and have it smoothly scroll down to the relevant position once the page has completed loading. I don't know if this is a possibility or not?
This is the version of Smooth-Scroll that I'm using:
https://github.com/kswedberg/jquery-smooth-scroll
I'm still relatively new to jQuery so I may be overlooking something obvious.
Ajma's answer should be sufficient, but for completeness:
alert(location.hash)
Edit: a more complete example:
// on document.ready {
if (location.hash != '') {
var a = $("a[name=" + location.hash.substring(1) + "]");
// note that according to w3c specs, the url hash can also refer to the id
// of an element. if so, the above statement becomes
// var a = $(location.hash);
if (a.length) {
$('html,body').animate({
scrollTop: $(a).offset().top
}, 'slow');
}
}
// }
It's possible, you want to put a call into the smooth scroll function when the page is finished loading. in jQuery, it's using $(document).ready(function () { your code } );
You'll need to put something in to parse your url to extract the #bookmark and then call the smooth scroll.