I am trying to use jQuery to create a stylish transition between HTML pages.
however, I just need to fade in and fade out the content of the html pages.
for example:
I have two pages 1.html and 2.html
they both have a DIV called #content
I need to only fadein and fade out the div content instead of the entire html page.
I am using the code bellow:
<script type="text/javascript">
var speed = 'slow';
$('html, body').hide();
$(document).ready(function() {
$('html, body').fadeIn(speed, function() {
$('a[href], button[href]').click(function(event) {
var url = $(this).attr('href');
if (url.indexOf('#') == 0 || url.indexOf('javascript:') == 0) return;
event.preventDefault();
$('html, body').slideToggle(speed, function() {
window.location = url;
});
});
});
});
</script>
I've tried it like this as well and it didn't do anything:
<script type="text/javascript">
var speed = 'slow';
$('html, body').hide();
$(document).ready(function() {
$('html, body #content').fadeIn(speed, function() {
$('a[href], button[href]').click(function(event) {
var url = $(this).attr('href');
if (url.indexOf('#') == 0 || url.indexOf('javascript:') == 0) return;
event.preventDefault();
$('html, body').slideToggle(speed, function() {
window.location = url;
});
});
});
});
</script>
is this possible?
Thanks
Try this code
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('a[href], button[href]').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
Click Function
$('a[href], button[href]').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
Refer this fiddle
http://jsfiddle.net/fBrYp/2/
Related
I have the following HTML:
<section>
<div class="main" id="second"> </div>
</section>
<section>
<div class="main" id="third"></div>
</section>
<section>
<div class="main" id="fourth"></div>
</section>
And following jQuery code:
<script>
navlist = [];
$("#navlist a").each(function(i) {
var thisLink = $(this);
var thisId = thisLink.attr('href');
var thisTarget = $(thisId);
navlist.push({
'anchor': thisLink,
'id': thisId,
'target': thisTarget
});
thisLink.on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: thisTarget.offset().top
}, 800);
});
});
$(window).on('scroll resize', function(e) {
$.each(navlist, function(e, elem) {
var placement = elem.target[0].getBoundingClientRect();
if( placement.top<window.innerHeight && placement.bottom>0 ) {
history.pushState({}, '', elem.id);
console.log('Hash: ' + elem.id);
return false; /* Exit $.each loop */
};
});
});
</script>
The work of the script is to allow smooth scrolling between different anchors on the site and to change URL #id on click or on scroll. I want to use here conditional statements with the id grabbed from the URL.
For example:
if(grabbedhashid == "second"){
$(".phone").css('display', 'none');
}else{
//display
}
But I am not having any idea as from where I can do it. Please help me guys.
Example URL with ID: http://localhost/sites/fh/index.php#first
So basically you have it in your scroll function, use that script to hide phone only in #second, it will work for you
$(window).on('scroll resize', function(e) {
$.each(navlist, function(e, elem) {
var placement = elem.target[0].getBoundingClientRect();
if (placement.top < window.innerHeight && placement.bottom > 0) {
history.pushState({}, '', elem.id);
console.log('Hash: ' + elem.id);
if(elem.id == "#second"){
$(".phone").css('display', 'none');
}else{
$(".phone").css('display', 'block');
}
return false; /* Exit $.each loop */
};
});
});
If you want to get current browser url at the time of scroll/click, you can get them as below. Use some string filter function like(window.location.href.split("#");) if you want to filter out only #id part.
JavaScript :
//using href
var URL = window.location.href;
//using path
var URL = window.location.pathname;
Jquery :
$(location).attr('href');
Is there something wrong with this code?
Because the rest of my js code only work if I delete it.
<script>
$(document).ready(function() {
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value };
});
</script>
This code doesnt work when I use the one above.
<script>
var url1 = "http://192.168.1.157/wp/";
var url2 = "http://192.168.1.157/wp/parceiros";
var url3 = "http://192.168.1.157/wp/contato";
$(function(){
if (location.href==url2) {
$(document).ready(function(){
$('html, body').animate({ scrollTop: $("#bluecontent").offset().top }, 1500);
});
}
else {
}
if (location.href==url3) {
$(document).ready(function(){
$('html, body').animate({ scrollTop: $("#allcontentcontact").offset().top }, 1500);
});
}
else {
}
});
</script>
Thanks.
I did it.
The problem is:
<script>
$(document).ready(function() {
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value };
});
</script>
This code was on header, and for some reason it only works (without hurting the other js codes) when it's inserted on the page that contains #uploadBtn and #uploadFile.
$(function(){
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.close').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});
here are my javascript code....
jquery plugin:http://code.jquery.com/jquery-1.8.2.js
jsfiddle:http://jsfiddle.net/7QA3p/
this popup worked on pageload of every page., but i want only show at the pageload of index.html
Check if the page is index.html using the code,
var pagePathName = window.location.href;
if (pagePathName.substring(pagePathName.lastIndexOf("/") + 1) == "index.html") {}
then you can display or not display the popup, like
$(function () {
var pagePathName = window.location.href;
if (pagePathName.substring(pagePathName.lastIndexOf("/") + 1) == "index.html") {
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
}
}
You can use this condition to check:
if (document.location.pathname.substr(-11) === "/index.html") {
//your code here
}
Add a QueryString (used like an identifier) to your URL like the example below:
http://example.com/index.html?pop=1
$(function(){
//check here
var checkQString = window.location.search;
if(checkQString.startsWith('?')) {
alert("Open Pop up here");
} else {
alert("no pop up");
}
});
I have this script that opens a new page and scroll down to a id
var jump = function (e) {
if (e) {
e.preventDefault();
var target = $(this).attr("href");
} else {
var target = location.hash;
}
$('html,body').animate(
{
scrollTop: $(target).offset().top
}, 2000, function () {
location.hash = target;
});
}
$('html, body').hide();
$(document).ready(function () {
$('a[href^=#]').bind("click", jump);
if (location.hash) {
setTimeout(function () {
$('html, body').scrollTop(0).show();
jump();
}, 0);
} else {
$('html, body').show();
}
});
What I wanna do is, make it animate the scroll on the current page with internal links. How do I integrate that?
The easiest way would to just use links, like this.
It doesn't require jQuery or javascript, just some elements added to your HTML using IDs as href values
<a id='exampleTop' href='#exampleMiddle'>I'm an example! Click to go down</a>
Clicking several times on the link run several ajax-requests. That is why it is hang browser will and is run code js bad. how can to disable link after innitial click and enable when ajax-request is finished?
With respect
$('#icon a').click(function (event) {
event.preventDefault();
var id = '#' + this.id;
var title = $(id).attr('title');
$(".title").toggleClass("suject").html(title);
var url = $(id).attr('href');
$('.table_show, #num_count, #select_box, #input_search').fadeOut('slow', function () {
$('.results').load(url, function(){
$(this).hide().show();
$.getScript("http://localhost/Siran-mehdi/files/js/admin.js");
})
//.hide().show("slow")
});
});
change link to # after clicking
$("#link").click(function(){
var href = $(this).attr('href');
$(this).attr('href', '#');
var $this = $(this);
$('.results').load(url, function(){
$this.attr('href', href);
$(this).hide().show();
$.getScript("http://localhost/Siran-mehdi/files/js/admin.js");
});
});
return it after ajax is done
well you could hide it and show it back after the call has finished:
$('#icon a').click(function (event) {
event.preventDefault();
var id = '#' + this.id;
var title = $(id).attr('title');
$(".title").toggleClass("suject").html(title);
var url = $(id).attr('href');
//hide it
$(id).hide();
$('.table_show, #num_count, #select_box, #input_search').fadeOut('slow', function () {
$('.results').load(url, function(){
//show it
$(id).show();
$.getScript("http://localhost/Siran-mehdi/files/js/admin.js");
})
//.hide().show("slow")
});
});
Simply make the link disabled:
$('#icon a').click(function (event) {
event.preventDefault();
var id = '#' + this.id;
var title = $(id).attr('title');
$(".title").toggleClass("suject").html(title);
var url = $(id).attr('href');
// disable the link
$(id).removeAttr("href");
$('.table_show, #num_count, #select_box, #input_search').fadeOut('slow', function () {
$('.results').load(url, function(){
$(this).hide().show();
$.getScript("http://localhost/Siran-mehdi/files/js/admin.js");
})
});
// enable the link again
$(id).attr("href", url);
});
$('a#YourLinkId').click(function() {
// Your ajax code
return false; // Disable the link
});