This is a simple loading script from nettuts and I tried to modify it to suit my needs.
But I can't get function "res," which resizes loaded elements, to happen BEFORE function shownewcontent runs. Now it resizes after it is visible, which is very bad looking.
But if I place call the function sooner, nothing happens, because the content is not yet loaded.
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#menu a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-4)){
var toLoad = hash+'.php #content';
$('#content').load(toLoad);
}
});
$('#menu a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('slow',loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
function loadContent() {
$('#content').load(toLoad,'',showNewContent());
}
function showNewContent() {
$('#content').show("0", res)
}
return false;
});
});
You have res() defined as the callback to show(), meaning it will get called after the show() function completes.
I would change your callback structure so that it contains all of the work you want to do:
$('#menu a').click(function(e) {
var toLoad = $(this).attr('href') + ' #content';
$('#content').hide('slow', function() {
var self = this;
$(self).load(toLoad, '', function() {
res();
$(self).show("0");
});
});
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
e.preventDefault();
}
Then you don't need the function definitions inside your click handler.
FYI, instead of return false;, it would be better to use e.preventDefault(); at the end of your click handler, though. You will have to define e as a parameter to the click callback function. See this for the return false; vs. e.preventDefault() debate.
Additionally, if the resizing is taking a noticeable amount of time, you might want to have the res() function take a call back in the same fashion that show() does. Then you can show the content only once it's loaded and resized.
Related
I am trying to do a nice FadeOut if you click on a Link. The following Code is perfectly working.
My question is: How can I shorten these functions? Demo: Here
$(document).ready(function () {
var newLocation = '';
$('a, .fadeLink').on('click', function(e){
e.preventDefault();
newLocation = this.href;
$('body').fadeOut(1000, changeLocation);
});
function changeLocation() {
window.location = newLocation;
}
});
Your code actually looks quite good already. You could shorten it (not necessarily better) by taking an arrow function instead of the additional function, so you can closure the link:
$(document).ready(function () {
$('a, .fadeLink').on('click', function(e){
e.preventDefault();
$('body').fadeOut(1000, () => window.location = this.href);
});
});
You can lose the $(document).ready function by placing the JavaScript code just before closing the <body> tag. Also, you don't have to define newLocation in the upper scope, you can pass it to the changeLocation function instead:
$('a, .fadeLink').on('click', function(e) {
e.preventDefault();
var location = this.href;
$('body').fadeOut(1000, function() {
changeLocation(location);
});
});
function changeLocation(location) {
window.location = location;
}
You could also get rid of the changeLocation function:
$('a, .fadeLink').on('click', function(e){
e.preventDefault();
var location = this.href;
$('body').fadeOut(1000, function() {
window.location = location;
});
});
In the end it's a matter of preference. Keep in mind that compacter code is not always better code.
The scenario is this:
Link from an RSS feed into my website http://website.com/#anchorelement
I'd like to jump/scroll to #anchorelement
However, #anchorelement is loaded using jQuery.load() after http://website.com/ is ready. As a result, using the link http://website.com/#anchorelement does not jump to #anchorelement because the element has yet to be loaded when performing the jump.
Does anyone have any suggestions on how to make this work? Is it possible to intercept the anchor jump with javascript and make it wait until the jQuery.load() call is complete?
Thanks!
$(function(){
// so this is inside your document ready function.
// you need to add a callback
$( somecontainer ).load('somecontent', function(){
// after the content has been loaded
// check if a hash is present in the location
if( window.location.hash != '' ){
// find an element with matching id
var anchor = $( location.hash ).get(0);
// if element was found scroll it into view
if( anchor ){ anchor.scrollIntoView() }
}
});
});
If you have multiple content to load, load it one per one using callback function and if you want to scroll on one of them, call function scroll on the last callback.
$(function ()
{
//Get the hash and load your content
var hash = location.hash.replace('#', '');
loadLocationContent(hash);
});
function loadLocationContent(hash)
{
$('container1').load("someContent1", function(){
$('container2').load("someContent2", function(){
$('container3').load("someContent3", function(){
$('container4').load("someContent4", scrollToHashAfterContentLoad(hash));
});
});
});
}
function scrollToHashAfterContentLoad(hash, contentId)
{
if (hash != '')
{
$('html, body').animate({ scrollTop: $('#' + hash).offset().top }, 2000);
}
}
I want to pass blank value on single click function and want to redirect on double click.
Here my code for HTML
Code for j-query
$(function () {
var clicker = $('#Nav a');
$(this).click(function () {
$(this).attr('href', '');
});
clicker.dblclick(function () {
window.location = $(this).attr("href");
});
}
kindly suggest how i can pass same attribute value for two different function or any other way to do that.
You can use e.preventDefault() to prevent redirection on single click:
$(function () {
var clicker = $('#Nav a');
clicker.click(function (e) {
e.preventDefault();
});
clicker.dblclick(function () {
window.location = $(this).attr("href");
});
})
Also, note that $(this) of your click function is not map to any element at this moment. Since you've assigned var clicker = $('#Nav a') then you can use clicker.click instead.
Fiddle Demo
How do I get the callback function on the 2nd line to redirect the user after the animation runs? I want it to redirect to the link in the href of 'nav li a'.
If I leave the callback as "" the animation works fine but does nothing (as expected). But if I put anything I think will work it fails and most of the time also breaks the first line from working at all. I'm just trying to get the page to slide in from it's starting offscreen position on load (1st line). Then slide out first then reload the page (2nd line).
$('section').animate({"left":"0px"}, 450);
$('nav li a').click(function () { $('section').animate({ "left": "1000px"}, 1000, "");
return false;
});
Prevent the anchors default action, store a reference to the anchor as the callback for animate() creates a new scope, then just redirect :
$('section').animate({"left":"0px"}, 450);
$('nav li a').on('click', function(e) {
e.preventDefault();
var self = this;
$('section').animate({ "left": "1000px"}, 1000, function() {
window.location.href = self.href;
});
});
If I get your problem correctly, this code is doing what you need:
var $section = $('section');
$section.animate({left: '0px'}, 450);
$('nav li a').click(function(e) {
var self = this;
e.stopPropagation();
e.preventDefault();
$section.animate({left: '1000px'}, 1000, function() {
window.location = self.href;
});
});
How can I stop this function from happening twice when a user clicks too fast?
$(document).ready(function() {
$(".jTscroller a").click(function(event) {
event.preventDefault();
var target = $(this).attr("href");
$("#photo").fadeTo("fast", 0, function() {
$("#photo").attr("src",target);
$("#photo").load(function() {
$("#photo").fadeTo("fast", 1);
});
});
});
});
The issue I'm having is that if a user clicks too fast the element won't fade back in, it just stays hidden.
The issue wasn't what I thought it was. When I was clicking on the same thumbnail it would try to load in the same image and stick loading forever. The .stop() answer does fix double animation so I'm accepting that answer, but my solution was to check if the last clicked item was the currently displayed item. New script:
$(document).ready(function() {
$(".jTscroller a").click(function(event) {
event.preventDefault();
var last = $("#photo").attr("src");
var target = $(this).attr("href");
if (last != target) {
$("#photo").stop().fadeTo("fast", 0, function() {
$("#photo").attr("src",target);
$("#photo").load(function() {
$("#photo").fadeTo("fast", 1);
});
});
};
});
});
Well you use the correct word in your descripton. Use stop()
$("#photo").stop().fadeTo("fast", 0, function() {
You may use a setTimeout function to make a delay between click grabs. I mean, a second click will be processed only after sometime, after the first click. It sets an interval between clicks.
$(document).ready(function() {
var loaded = true;
$(".jTscroller a").click(function(event) {
if(!loaded) return;
loaded = false;
event.preventDefault();
var target = $(this).attr("href");
$("#photo").fadeTo("fast", 0, function() {
$("#photo").attr("src",target);
$("#photo").load(function() {
$("#photo").fadeTo("fast", 1);
loaded = true;
});
});
});
});
Keep track of its state
I believe what you are looking for is .stop()
http://api.jquery.com/stop/
$("#photo").stop(false, false).fadeTo()
I would prevent it like this:
var photo = $("#photo");
if (0 == photo.queue("fx").length) {
foto.fadeTo();
}
I differs from stop as it will only fire when all animations on this element are done. Also storing the element in a variable will save you some time, because the selector has to grab the element only once.
Use on() and off() :
$(document).ready(function() {
$(".jTscroller a").on('click', changeImage);
function changeImage(e) {
e.preventDefault();
$(e.target).off('click');
$("#photo").fadeOut("fast", function() {
this.src = e.target.href;
this.onload = function() {
$(this).fadeIn("fast");
$(e.target).on('click', changeImage);
});
});
}
});