jQuery: absolute pathname before hash - javascript

I'm currently experiencing some conflict between a hashchange function I have set up and jQuery mobile (used for sliding page transitions).
To demonstrate here's an isolated demo on my server: http://nealfletcher.co.uk/transition/
Click on transition click which slides the relevant page in, as it should and appends the url accordingly: /transition/news.
This is where the problem lies, click on news hash click and this will fire my hashchange function and load in the relevant div, BUT instead of the url being like so: /transition/news/#news-01 the url is being rendered like so /transition/#news-01 which causes problems when navigating to the url.
Is there anyway to force the /news/ to be added before the hash, so I get /transition/news/#news-01 instead of /transition/#news-01?
The relevant jQuery is below, is it at all possible to append /news/ before the hash?
Any suggestions would be greatly appreciated!
jQuery:
$(document).ready(function () {
$(window).hashchange(function () {
var hash = location.hash;
if (hash) {
var element = $('.click-block[data-hook="' + hash.substring(1) + '"]');
if (element) showDetail(element);
}
});
$(document).ready(function () {
$(document).hashchange();
var $container = $('#main-grid, #news-grid');
$(function () {
$container.imagesLoaded(function () {
$container.isotope({
itemSelector: '.grid-block, .grid-break, .hidden',
animationEngine: 'best-available',
filter: '*:not(.hidden), .grid-block',
masonry: {
columnWidth: 8,
gutterWidth: 25
}
});
});
});
$(".click-block").click(function () {
document.location.hash = $(this).attr('data-hook');
});
});
function showDetail(element) {
var newHeight = $('#post-' + element.attr('data-hook')).height();
$('#post-' + element.attr('data-hook')).removeClass('hidden').addClass('grid-break').delay(300).fadeIn('slow');
newHeight = (Math.floor((newHeight + 10) / 230) + 1) * 230 - 10;
$('#post-' + element.attr('data-hook')).css('height', newHeight);
element.children('.up-arrow').fadeIn('slow');
setTimeout(function () {
$('html, body').animate({
scrollTop: $('#post-' + element.attr('data-hook')).offset().top - 90
}, "slow");
}, 1500);
$('#main-grid').isotope();
$('#news-grid').isotope();
}

Just add the section in your data-hook attribute. So for your news links they will be prefixed by news/ like so data-hook="news/news-01"
Now, I would reccomend you to consider using something like http://backbonejs.org/#Router for what you'r doing. Or atleast take a look at https://github.com/browserstate/history.js/

Related

jQuery scrollTop jumping on FF and Safari

I have a jQuery scrollTop function that is activated on a button click, i also have a scrollView function that is activated on scroll.
The intention is that the landing image is either clicked or the user scrolls down, the landing image is hidden by the jQuery and the navigation menu shows.
This is working well in Chrome, but in FF and Safari, the page jumps further down the page and you have to scroll back up to see the top of the page.
Also, using the Divi WP theme.
Any help would be most appreciated!
Code below is what i have used, apologies new to Jquery so have put things together from different places, i'm sure this can be made simpler!
//click-scroll-hide
(function($) {
$(document).ready(function() {
$(".cf_news_link").click(function() {
$("html,body").animate({
scrollTop: $("#news").offset().top
}, 1000, function() {
$("#cf_my-header").hide();
$("#main-header").slideDown("slow");
});
return false;
});
});
})(jQuery);
//scroll-hide
jQuery(function($) {
$.fn.scrollView = function() {
return this.each(function() {
$('html,body').animate({
scrollTop: $(this).offset().top
});
});
}
var $header = $('#cf_my-header');
var $win = $(window);
var winH = $win.height();
$win.on("scroll", function() {
if ($(this).scrollTop() > winH) {
$header.addClass("hide");
$('#news').scrollTop();
$('#main-header').slideDown("slow");
}
}).on("resize", function() {
winH = $(this).height();
});
});

jQuery single page scrolling with links to other pages

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

Get div height befor the div content is fully loaded

I've got a button, that when I click executes a js code. Like this.
jQuery( ".button" ).on('click', function(){
var page = jQuery(this).attr('data-href');//Get data-href with permalink.
jQuery('#ajax_div').load(page,
function(){
var newHeight = jQuery('#content_loaded').height()+200;
var el = jQuery('#div_containing_ajax_div_and_content_loaded');
el.css({'height': newHeight + 'px'});
});
});
The first time it loads the page works wrong, but after have the images, etc, in cache it works ok. How can I wait that the content is fully rendered to execute the height calc?
All of this without use delay functions and with out use a plugin. There is a function like $(windows).ready().
I'm using wordpress, and with jquery load() it gets the height before the image is fully render and the height is less than the real height of the content in the div.
Thanks.
You could check that all images added are loaded using following snippet:
jQuery(".button").on('click', function () {
var page = jQuery(this).attr('data-href'); //Get data-href with permalink.
jQuery('#ajax_div').load(page, function () {
var $self = $(this),
$contentImages = $(this).find('img');
$contentImages.one('load', function () {
$(this).addClass('loaded');
if ($self.find('img.loaded').length === $contentImages.length) {
var newHeight = jQuery('#content_loaded').height() + 200;
var el = jQuery('#div_containing_ajax_div_and_content_loaded');
el.css({
'height': newHeight + 'px'
});
}
}).each(function () {
if (this.complete) $(this).triggerHandler('load');
});
});
});
maybe I should say that you have 2 ways to do that .. one I'm not tested it and another I tested it
1st: untested way .promise().done();
jQuery('#ajax_div').load(page).promise().done(function(){
// var newHeight ......
});
2nd: tested way in .load callback function loop through images and check if loaded or not using Image.error(function() {});
$('img').each(function(){
var Image = $(this);
var GetSrc = $(this).attr('src');
Image.error(function() {
// newHeight ......
});
});
DEMO

scroll till active tab

This question is based on my last question.
show or make visible active tab
there were some issues that I have to fix so I have fixed. but still I can't make it work properly.
Like I want to scroll left and right active/clicked tabs to show. please have look to jsfiddle example. such as: when I click on overflowed tab 5 and it should show visible. then from 1 till 4 will be overflowed (hidden) so now If I click on 2 (2 click) then it should scroll to right and show it visible. In reality, there will be N number of list(li) elements.
I just found don't know why but jsfiddle example doesn't work on IE.
Thank you...
Jsfiddle
$(document).on('click', '.liClicked', function () {
var idValue = ($(this).attr('id'));
console.log(idValue);
var idValues = ($(".element ul li#" + idValue));
console.log(idValues);
// $(idValues).css('left','-50px');
$('.element').animate({
"left": "-=50px",
}, "slow")
});
$("#right").click(function () {
var calcs = ($('ul li#tab1').width());
$(".element").animate({
"left": "+=" + calcs,
}, "slow");
});
$("#left").click(function () {
$(".element").animate({
"left": "-=50px"
}, "slow");
});
Try this:
$(document).on('click', '.liClicked', function() {
var idValue = ($(this).attr('id'));
console.log(idValue);
var idValues = ($(".element ul li#" + idValue));
console.log(idValues);
// $(idValues).css('left','-50px');
var me = $(this);
$('.element').animate({
"left": $('li#' + me.prop('id')).position().left * -1 ,
}, "slow")
});
Also, it isn't recommended to have two elements with the same ID

Combining masonry, imagesLoaded with ajax functionality

I'm making a site where all internal links make the current page fade out and the new page fade in. This works great for me now. The problem is that I'm trying to combine it with the great masonry plugin. On the first pageload masonry does work, but I can't seem to figure out how to re-fire masonry on the newly loaded content via ajax. I should add that all the items from the current masonry get deleted, and then replaced by new ones.
The masonry code is like this:
$container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item',
transitionDuration: 0
});
});
And the ajax load code is like this:
var newHash = "",
$mainContent = $("#ajaxcontainer"),
$ajaxSpinner = $("#loader"),
$el;
$('.internal').each(function() {
$(this).attr("href", "#" + this.pathname);
});
$(document).on('click', '.internal', function() {
window.location.hash = $(this).attr("href");
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent.fadeOut(500, function() {
$ajaxSpinner.fadeIn();
$mainContent.load(newHash + " #container", function() {
$ajaxSpinner.fadeOut( function() {
$mainContent.fadeIn(1000);
});
$('.internal').each(function() {
$(this).attr("href", "#" + this.pathname);
});
});
});
};
});
$(window).trigger('hashchange');
Does anyone have any input as to how to achieve this? Thank you very much.
I finally managed to get it to work!
I hope other people will find this helpful so I'm posting it here for future reference.
One of the problems I had, seems to be that I hid the container while the data was loading. I hid it with fadeOut and fadeIn which seems to cause problems with masonry. Insted of hiding it per se, I now animate the opacity to 0 and back to 1 once the data is loaded. The script is as follows:
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$('#ajaxcontainer').fadeTo(500, 0, function() {
$ajaxSpinner.fadeIn();
$mainContent.empty();
$.get(newHash, function(data){
var $data = $(data).find("#container > *");
$container.prepend($data).imagesLoaded(function(){
$container.masonry( 'prepended', $data, true );
});
$ajaxSpinner.fadeOut( function() {
$('#ajaxcontainer').fadeTo(1000, 1);
});
});
});
};
});

Categories

Resources