We Keep Coding

Scroll to specific area on page load AND perform Ajax Query

Good day folks. I need to figure out how to perform an action using Ajax once I have linked to a specific section on a page. I already know how to get to the designated DOM element on the other page, but I would like to go further as to perform some action using ajax once it has taken the visitor to that point.
eg.
<nav>
<ul><li></li></ul>
</nav>
Will take me to this about.php page to the "team" div
<div>
<div><a name="team"></a></div>
</div>
But then I would like to run some Ajax automatically that would usually be executed when the user clicks on some object in the "team" div. So should the user get to this section by way of the link up above, it will take them straight to the content. Does that make sense?

I'm going to go out on a limb and assume you're using jQuery's animate() for the scrolling:
$('html, body').animate(
{ scrollTop: $("#something").offset().top },
1000,
function() {
someAjaxFunction();
}
);
var someAjaxFunction = function() {
$.ajax({
url: '/something/'
}).done(function(data) {
// Done!
});
};
We're using the callback function argument given to animate() to fire off our ajax request.

You can use jQuery's scrollTo() to scroll to the area on the page, then use the complete function to call you ajax after the scroll has finished.
Detailed Description here
$('body').scrollTo('#target', function()
{
// Do your AJAX Thaaang
});

This check can be run to determine if the user has navigated directly to the teamDiv. Running it on page load would allow you to catch it in the event that the user was deep linked to the teamDiv from another page:
if (/#team/.test(window.location.href)) { // perform Ajax query here... }
Note: In the example link, you use the id team whereas the div's ID attribute is set to teamDiv. They need to be the same for this to work.

So the code would run if the user clicks some object in the "team" div?
In that case, is this an option?
<div>
<div id="teamDiv"><a name="team"></a>some element</div>
</div>
<script type="text/javascript">
$(function() {
$("#teamDiv").click(function() {
//put what you want to happen when the user clicks something in
//teamDiv here
});
})
</script>

My suggestion would be to read the current loaded url:
$(document).ready(function () {
var location = window.location.href;
if(location.indexOf('#team' > -1) {
// do something
}
}

You can check location.hash (http://www.w3schools.com/jsref/prop_loc_hash.asp) to determine if hash existed.
If you want to do something in each variants of navigation to this div: click and scroll you can use something like this:
$(document).bind('scroll', function() {
if($(this).scrollTop() > $('.your-div').top()) {
alert('do something');
}
})

Fade page out on leaving url (as well as in on landing)

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);
});
});

Show div (preloader) only once - until cache/session is cleared

I have a preloader on a landing page I've created (normally against this type of thing buy hay-ho). The preloader works fine, it displays, animates for a second then fades out displaying the website.
What I'd like to achieve is to show this only once, when the user first visits the page and then never again until they clear their cache or at least for a lengthly timescale. To do this I'm trying to use jquery-cookie (https://github.com/carhartl/jquery-cookie) - but I just can't get it to work, it still displays every time I refresh the page. The mark-up/script I'm using is below...
HTML:
<div id="preloader">
<span></span>
</div>
Original JS (displays everytime page is visited):
jQuery(document).ready(function($) {
$(window).load(function(){
$('#preloader').delay(1200).fadeOut(800,function(){$(this).remove();});
});
});
New JS (not working) attempting to use a cookie:
$(document).ready(function($) {
if ($.cookie('noPreloader')) $('#preloader').hide();
else {
$(window).load(function(){
$('#preloader').delay(1200).fadeOut(800,function(){$(this).remove();});
});
}
});
I'd greatly appreciate if someone would shed some light on this as I'm a bit stuck!
Thanks in advance!

I fail to see where you create a cookie for your check. It suppose to be something like this:
if (!$.cookie('noPreloader')) {
// show your preloader
...
// and now we create 1 year cookie
$.cookie('noPreloader', true, {path: '/', expire: 365});
}
Please note - in my example your block suppose to be hidden on load. You show it afterwards(since you want to show it only 1st time).

Thanks a lot for the help UtherTG! Here is my final script for anyone else who is trying to achieve something similar...
$(document).ready(function($) {
if ($.cookie('noPreloader'))
{
$('#preloader').hide();
}
else
{
$(window).load(function() {
$('#preloader').delay(1200).fadeOut(800,function() {
$(this).remove();
});
});
// and now we create 1 year cookie
$.cookie('noPreloader', true, {path: '/', expire: 365});
}
});

How to hide the anchor tag element rapidly on the onclick event using jQuery?

I've two hyperlinks. I'm hiding the one hyperlink on the click of other hyperlink and vice-versa. It's working absolutely fine for me on my local machine. But the issue arises when I upload and run the same functionality from the online server.
On server, the concerned hyperlink is not hiding that much quicker as compared to local machine instance. Due to which user can click again on a hyperlink which he has already clicked and the link is expected to be hidden. It takes moment or two for hiding the concerned hyperlink. I don't want that delay. The hyperlink should get hide immediately after on click event. I tried disable/enable the hyperlink but it didn't work out for me.
My code is as below:
<script language="javascript" type="text/javascript">
$(".fixed").click(function(e) {
var action_url1 = $(this).attr('delhref');
var qid = $(this).data('q_id');
$(".fixed").colorbox({inline:true, width:666});
$("#fixedPop_url").off('click').on('click',function(event) {
event.preventDefault();
$.get(action_url1, function(data) {
//$("#fix_"+qid).bind('click', false);
$("#fix_"+qid).hide();//This portion of code I want to make fast, it's taking some time to hide and meanwhile user can click on this link. I want to avoid it.
$("#notfix_"+qid).show();
//$("#notfix_"+qid).bind('click', true);
alert("Question status updated successfully");
});
});
$(".c-btn").bind('click', function(){
$.colorbox.close();
});
});
$(".notfixed").click(function(e) {
var action_url2 = $(this).attr('delhref');
var qid = $(this).data('q_id');
$(".notfixed").colorbox({inline:true, width:666});
$("#notfixedPop_url").off('click').on('click',function(event){
event.preventDefault();
$.get(action_url2, function(data) {
//$("#notfix_"+qid).bind('click', false);
$("#notfix_"+qid).hide();//This portion of code I want to make fast, it's taking some time to hide and meanwhile user can click on this link. I want to avoid it.
$("#fix_"+qid).show();
//$("#fix_"+qid).bind('click', true);
alert("Question status updated successfully");
});
});
</script>

You dont have to write the hide part code in complete function of get request. On live it will take time to fetch the rspond.so just keep it outside get function.something like this:
$(".fixed").click(function(e) {
var action_url1 = $(this).attr('delhref');
var qid = $(this).data('q_id');
$("#fix_"+qid).hide();
//rest code......
});
$(".notfixed").click(function(e) {
var action_url2 = $(this).attr('delhref');
var qid = $(this).data('q_id');
$("#notfix_"+qid).hide();//hide it here
//rest code......
});

Using ajax javascript to load content into a div in web page

I am having a little problem using javascript-ajax here. In my page, I load in the content into one of the div with id content in an ajax manner, whenever the user clicks on links which have the class myajaxreq, and the contents are loaded into the div in a fade in manner. The javascript that I am using is this
$(document).ready(function(){
$("#content").load($('.myajaxreq:first').attr('href'));
});
$('.myajaxreq').click(function() {
var myhref=$(this).attr('href');
$('#content').hide().load(myhref).fadeIn('slow');
return false;
});
All works great on localhost, but when i put it online and then when we click on these links, then: First the same content which was initially there in the div is loaded in fade in manner. After a few seconds, the new content is loaded.
I think I am missing some sort of
if(content document is ready)
then load in a fade in manner
and so on..
Please somebody help me out here !!

call fade in after success callback... try this
var jContent = $('#content').hide();
jContent.load(
myhref,
{},
function(){
jContent.fadeIn('slow');
}
);
here the whole code (untested)
$(document).ready(function(){
var jContent = $("#content").load($('.myajaxreq:first').attr('href'));
$('.myajaxreq').click(function() {
var myhref=$(this).attr('href');
jContent
.hide()
.load(
myhref,
{},
function(){
jContent.fadeIn('slow');
}
);
return false;
});
});