I'm loading successfully external content to my div with Jquery, the only problem is that I wish to not display: "PastURL+#+NewURL" just the NewURL
For example, right now if I click in some of my links I will have: http://mydomain.com/#http://mydomain.com/loaded-content
What I want to show is just: http://mydomain.com/loaded-content
This is my code:
jQuery(document).ready(function(){
jQuery('.portfolio-item a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#contenthome').fadeOut(500).load(link + ' #content-wrapper', function(){ jQuery('#contenthome').fadeIn(500); });
$('html, body').animate({scrollTop:0}, 'slow');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
});
});
Any ideas?
Thanks in advance!
you can rewrite the url in the address bar using the following script:
Notes:
you can only write paths of the same domain
this is only supported in modern browsers (like Chrome, FF 5, etc.)
-
try {
if (window.location.search.substring(1).length == 0) { // if no query string
window.history.pushState('page', browser_title, browser_url);
}
}
catch (e) { /* browser doesn't support */ }
Related
I have a site with most of it's content in a single page style with menu links that scroll down the page using the div ID as the anchor (for example www.mydomain.com/#div-id) There are, however, some extra external pages that are also linked in the header.
The issue I'm having is that when I'm on one of the external pages (for example, www.mydomain.com/page-1) the menu links that are used to scroll down the home page don't work (they come out as www.mydomain.com/page-1/#div-id).
jQuery(document).ready(function($){
jQuery('a[href*=#]').click(function (e){
e.preventDefault();
var navHeight = jQuery('.header-site').height();
var id = jQuery(this).attr('rel');
var scrollTo = jQuery('#' + id).offset().top-navHeight;
jQuery('html,body').animate({
'scrollTop': scrollTo
}, 500);
});
});
I use the link rel attribute to add the div ID so that I don't conflict with other jQuery plugins such as tabs.
Is there a way to solve my issue, so that I can have menu items that scroll to the page, ut when I'm not on the main page, the 'scrollable' menu items link back to the front page (and to the relevant section).
As they are all on the homepage, change your hrefs to start with /:-
test
That will stop this problem - www.mydomain.com/page-1/#div-id
Then split your function out so it can be called on page load and on click, and only preventDefault if you are on the homepage, otherwise let it redirect you to the homepage with the hash.
as all hrefs will now be /# I'm using jQuery('a[href^="/#"]')
function scrollToSection(id) {
var navHeight = jQuery('.header-site').height();
var scrollTo = jQuery('#' + id).offset().top - navHeight;
jQuery('html,body').animate({
'scrollTop': scrollTo
}, 500);
}
jQuery(document).ready(function($) {
var isHomepage = window.location.pathname == '/';
if (isHomepage && window.location.hash) {
var id = window.location.hash.split('#')[1];
scrollToSection(id);
}
jQuery('a[href^="/#"]').click(function(e) {
if (isHomepage) {
e.preventDefault();
var id = $(this).attr('href').split('#')[1];
scrollToSection(id);
}
});
});
Code snippet to give an idea:
jQuery(document).ready(function($) {
jQuery('a[href*=#]').click(function(e) {
//main page found
if (document.location.pathname == "/") {
e.preventDefault();
var navHeight = jQuery('.header-site').height();
var id = jQuery(this).attr('rel');
var scrollTo = jQuery('#' + id).offset().top - navHeight;
jQuery('html,body').animate({
'scrollTop': scrollTo
}, 500);
});
}
});
I can't seem to get this functioning the way that I want. I want a user to click a link, in this case Learn More then open a tab and scroll down the page to where that tab is. I have the functionality of opening the tab working but it will not scroll. The only time I can get it to actually scroll is to copy:
jQuery(document).scrollTop( jQuery("#" + descriptionID).offset().top );
into chrome's console and activate it. Below is the code in its entirety:
jQuery(document).on("click", ".learnMore", function() {
description = jQuery("a.ui-tabs-anchor:contains('Description')").parent().index();
descriptionID = jQuery("a.ui-tabs-anchor:contains('Description')").attr('id');
jQuery(".ui-widget").tabs("option", "active", description);
jQuery(document).scrollTop( jQuery("#" + descriptionID).offset().top );
});
Here is a link to a fiddle
It's because when you click the link, it's triggering the hash change. Because there is no anchor to go to, it scrolls to top after you call scrollTop. Adding return false; to the end of your click event or adding e.preventDefault(); for more modern browsers should correct the issue.
http://jsfiddle.net/jmarikle/dL41forj/
jQuery(document).on("click", ".learnMore", function() {
...
return false;
});
or
jQuery(document).on("click", ".learnMore", function(e) {
e.preventDefault();
...
});
Setting a timeout and targeting the body also works: http://jsfiddle.net/o2whkLyu/1/
$(document).on("click", ".learnMore", function() {
description = jQuery("a.ui-tabs-anchor:contains('Description')").parent().index();
descriptionID = jQuery("a.ui-tabs-anchor:contains('Description')").attr('id');
jQuery(".ui-widget").tabs("option", "active", description);
setTimeout (function(){
$('body').scrollTop( $("#" + descriptionID).offset().top );}, 20);
});
On my homepage I have a menu with ID's, when I click it, it slides to the corresponding div and it works smoot.
But when I'm not on my homepage and I click an item I want to be able to go to the homepage and then slide to the section.
Here is the code I'm using now:
$('#mainMenu a').click(function(e){
e.preventDefault();
var div = $(this).attr('href');
if('<?=get_site_url()?>/' == '<?=get_permalink()?>')
{
$('html, body').animate({scrollTop:$(div).position().top}, 'slow');
}
else
{
window.location.href = '<?=get_site_url()?>/'+div;
}
});
This works excellent, the next part works to but I can't get it to slide to the ID.
if (window.location.hash != "") {
e.preventDefault();
$('html, body').animate({scrollTop:$(window.location.hash).position().top}, 'slow');
}
Is there a way I can prevent the browser from directly jumping to the section and instead sliding to it?
Try to scroll to top right at the start, then roll down:
if (window.location.hash != "") {
$('html, body').scrollTop(0).animate({scrollTop:$(window.location.hash).position().top}, 'slow');
}
Also, remove e.preventDefault(), since you're not defining any variable named e nor an event.
This works like a charm:
$('#mainMenu a').click(function(e){
e.preventDefault();
var div = $(this).attr('href');
if('<?=get_site_url()?>/' == '<?=get_permalink()?>')
{
$('html, body').animate({scrollTop:$(div).position().top}, 'slow');
}
else
{
localStorage.setItem("hash", div);
window.location.href = '<?=get_site_url()?>/';
}
});
if (localStorage.getItem("hash")!=null) {
$('html, body').animate({scrollTop:$(localStorage.getItem("hash")).position().top}, 'slow');
localStorage.removeItem("hash");
}
Instead of putting the hash in my url I stored it in localStorage and in my head of the page I checked if it was set.
Founded this solution just a few minutes after posting the question, thanks to those who helped me :)
So I'm using the History.js plugin to load pages in my Wordpress theme via AJAX. I've been successful in doing so and have the entire loading feature working fine. However, I have many scripts working in the same file and they of course do not get loaded on the state change.
Here's (a very brief) version of my functions.js file to explain:
(function($){})(window.jQuery);
$(document).ready(function() {
/* THIS IS CODE RELATIVE TO MY HOME PAGE ONLY */
$projects = $("#projects");
$projects.append($(".contact"));
$projects.isotope({
itemSelector : '.item',
layoutMode : 'masonry'
});
/* END PREVIOUS BLOCK */
/* BEGIN HISTORY.JS IMPLEMENTATION */
var History = window.History,
State = History.getState();
$('.nav a, .leftHold a').on('click', function(event) {
event.preventDefault();
var path = $(this).attr('href');
var title = $(this).text();
History.pushState('ajax', title, path);
});
History.Adapter.bind(window, 'statechange', function() {
load_site_ajax();
});
function load_site_ajax() {
State = History.getState();
$('body, html').animate({ scrollTop : 0 }, 250, function() {
$("#article").animate({ left : -1*$(window).width() }, 250, function() {
$(this).load(State.url + ' #article', function() {
$(".nav li").each(function() {
$(this).removeClass("current_page_item").removeClass("current_page_parent").removeClass("current_page_ancestor");
}).promise().done(function() {
$(".nav a").each(function() {
if(State.title.indexOf($(this).text()) != -1) {
$(this).parent().addClass('current_page_item');
return false;
}
});
});
}).promise().done(function() { $(this).css("left", $(window).width()).animate({ left : 0 }, 250); });
});
});
}
/* END HISTORY.JS */
});
I load this functions.js file at the end of my document, just before the closing body tag. I can tell that whenever I change browser states, the code in $(document).ready(); doesn't run again, therefore Isotope and none of my other Javascripts load again.
QUESTION:
How should I ensure that the code in functions.js runs every time the pushstate is initiated by History.js?
It sounds like you'll need to execute the ready code again. Wrap your initialization code in a function:
$(document).ready(initializePage);
function initializePage() {
/* THIS IS CODE RELATIVE TO MY HOME PAGE ONLY */
...
}
And then, when "statechange" fires, you can call initializePage() again.
You will also need to make sure the History code only runs once, so put that code in a separate function:
$(document).ready(setupHistory);
function setupHistory() {
/* BEGIN HISTORY.JS IMPLEMENTATION */
var History = window.History,
State = History.getState();
});
....
}
Currently coding a mates portfolio and not to my surprise the code isn't loading in IE!
I'm coding it using standard AJAX, here's the relevant jQuery:
//ajax shtuff
$(window).load(function() {
// Ajax Cache!
$.ajaxSetup ({
cache: false
});
var $loadW = '<div id="whiteLoader" />';
var $loadurl = $('.current').attr('href');
// Initial Page Load
$('#con').prepend($loadW);
$('#main').fadeOut('slow', function() {
$(this).load($loadurl + ' .page', function() {
$(this).parent().find('#whiteLoader').fadeOut('slow', function() {
$(this).parent().find('#main').fadeIn('slow').css({background: 'red'});
$(this).remove();
});
});
});
$('nav ul li a').each(function() {
$(this).click(function(e) {
var $loadW = '<div id="whiteLoader" />';
var $loadurl = $(this).attr('href');
// Prevent default hotlink
e.preventDefault();
// Add the current state
$('*').removeClass('current');
$(this).addClass('current');
// Load the Page
$('#main').fadeOut('slow', function() {
$('#con').prepend($loadW);
$('#main').load($loadurl + ' #main', function() {
$('#whiteLoader').fadeOut('slow', function() {
$('#main').fadeIn('slow');
$(this).remove();
});
});
});
});
});
});
Literally have no idea why this doesnt work lol, here's a link to the live page (I've put the background as red just to show you the area.)
Also the reason the initial page is using the 'this' method is because I was testing it both ways.
http://212.7.200.35/~tfbox/zee/
have you tried
$(document).ready(function() {
// Stuff to do as soon as the DOM is ready;
});
instead of window.load?
Often IE has trouble styling / selecting any of the new HTML5 elements such as section and nav. Try using something like this or simply using a div