URL hash based slider - javascript

JS Fiddle
Original Idea / Another version of this question
Attention!
The other version of this idea/the original idea has been answered so if the other version works for you, your welcome :)
This question is still open
So here is my new idea that I am having trouble with. I want to make an image slider. The slider has all the images inside of it and when the page turns to a hash like #home I want the slider to update to a new image. The slider is floating. The other thing is I don't want it to scroll passed other images. I just want it to scroll directly to that image. I also needs to scroll vertically since the images are different widths. I feel bad that I am basically making a job request so this is what I think is right. I can write the code if someone tells me what I need to do.
Here is the code on JS Fiddle. I just have the link so it can be worked on:
//This also need to execute when the hash is updated/an anchor link is clicked
window.onLoad = function hashLogo() {
var hash = window.location.hash;
//Image 1 Hashes
var image1 = [
'#image1',
'#home'
];
//Image 2 Hashes
var image2 = [
'#image2',
'#about'
];
if (image1.indexOf(hash) > -1) {
//Do jQuery Sliding
}
if (image2.indexOf(hash) > -1) {
//Do jQuery Sliding
}
};

What I think you need is an event interception on the hashchange event:
$(window).hashchange( function(){
// Do something when the hash changes
// alert( location.hash );
});
If you also use Ben Alman's fabulous hashchange plugin (0.8kb), it will also ensure the event is polyfilled into browsers that don't support it.

Related

Styles created using JavaScript are not applied until page is refreshed

I have created a script that adds the scrollTop value to the height of a DIV
var scroll = $(this).scrollTop();
console.log(scroll);
function scrollH() {
document.getElementById("overlay").style.height = scroll + 'px';
}
document.getElementById("overlay").addEventListener("scroll", scrollH());
I need this style to keep updating (I'm making a progress bar). Currently it only changes when I refresh the page.
Thanks in advance
(Sorry if I did not follow the correct question format for this site, this is my first question :L )
You want to apply styles via JavaScript after the DOM has loaded.
JQuery helps with this:
$(document).ready(function() {
//do something to css
});
https://learn.jquery.com/using-jquery-core/document-ready/
You could apply a listener to whatever event is triggering an update, and then replace or fill the progressbar with it's new value.

Chrome ignoring hashes in URL

I've spent quite a while trying to find answers for this issue, but haven't had any success. Basically I need to scroll the user to the contact portion of the website when they go to healthdollars.com/#contact. This works just fine in Safari, but in Chrome I haven't had any luck. I've tried using jQuery/Javascript to force the browser to scroll down, but I haven't been able to.
Does anyone have any ideas? It's driving me crazy - especially since it's such a simple thing to do.
Not a full answer but in Chrome if you disable Javascript I believe you get the desired behavior. This makes me believe that something in your JavaScript is preventing default browser behavior.
It looks to me like the target element doesn't exist when when page first loads. I don't have any problem if I navigate to the page and then add the hash.
if (window.location.hash.length && $(location.hash)) {
window.scrollTo(0, $(location.hash).offset().top)
}
check for a hash, find the element's page offset, and scroll there (x, y).
edit: I noticed that, in fact, the page starts at #contact, then scrolls back to the top. I agree with the other answerer that there's something on your page that's scrolling you to the top. I'd search for that before adding a hack.
You can do this with JS, for example` if you have JQuery.
$(function(){
// get the selector to scroll (#contact)
var $to = $(window.location.hash);
// jquery animate
$('html'/* or body */).animate({ scrollTop: $to.offset().top });
});
The name attribute doesn't exists in HTML 5 so chrome looks to have made the name attribute obsolete when you use the DOCTYPE html.
The other browsers have yet to catch up.
Change
<a name="contact"></a>
to
<a id="contact"></a>
Maybe this workaround with vanilla javascript can be useful:
// Get the HTMLElement that you want to scroll to.
var element = document.querySelector('#contact');
// Stories the height of element in the page.
var elementHeight = element.scrollHeight;
// Get the HTMLElement that will fire the scroll on{event}.
var trigger = document.querySelector('[href="#contact"]');
trigger.addEventListener('click', function (event) {
// Hide the hash from URL.
event.preventDefault();
// Call the scrollTo(width, height) method of window, for example.
window.scrollTo(0, elementHeight);
})

Javascript substring method assistance

So long story short im working on a web app and using AJAX within it.
I'm trying to disable the default actions of links when clicked, attach a hash value to the link and then remove the "#" from the url.
the problem im having is that, although the hash values are being attached accordingly, the substring method isnt extracting the "#", it extracts the letter after it.....
here is my code. PS, i left my comments inthere so you get where im trying to go with this
so i dont know....my logic or setup may be wrong....
$(document).ready(function(){
//app vars
var mainHash = "index";
var menuBtn = $('.leftButton');
//~~~~~~load the index page at first go.
loadPage();
//~~~~~~~~~~~~~~~~~~~~~~~~~~~menu show/hide
menuBtn.click( function(){
$('#menu').toggleClass();
});
//Menu items on click , disable link default actions.
$('#menu a').click( hijackLinks );
//~~~~~~~~~~~~~~~~~~~~~~~~~~~functions for mobile index load AND hijacking app links to AJAX links.
function loadPage(url){
if( url == undefined){
$('#contentHere').load('index.html #content', hijackLinks);
window.location.hash = mainHash;
} else {
$('#contentHere').load(url + '#content', hijackLinks );
}
}
function hijackLinks(e){
var url = e.target.href;
e.preventDefault();
loadPage(e.target.href);
window.location.hash = $(this).attr("href").substring(1);
}
});
what im wanting is to remove the "#" from the url. What am i doing wrong, what am i not seeing/understanding?
ive tried substring/substr etc and both do the same thing in that no matter what numbers i choose to insert into the substrings params, they remove EVERYTHING BUT the "#" lol....
Thanks in advanced.
Well, you don't really change the link itself, you only change the window.location.hash, and the hash always has a "#" at the beginning.
What you need to do in order to change the entire url (and remove the '#') is to manipulate the browser history.
Although you should know it works only in newer browsers (the exact browser versions are in the link), so if you target your website to older too browsers you might need to think about having a fallback using the hash. If you decide to have such a fallback, I suggest searching for a plugin which does it instead of making it all yourself.

jQuery Image Gallery stops working in IE7&8 after using for small period of time

I have the following code I am using for a photo gallery. In Internet Explorer 7 & 8 the gallery stops working. The image fades out after several clicks and the new image does not fade in. After this occurrence happens (about 6 or so clicks) the gallery does not function at all. All other browsers work flawlessly. I have also used this code in several other pages with no problems.
$("#list-image-carousel").find('a').click(function(e) {
e.preventDefault();
var src = $(this).attr("href");
$("#main-img").find('img').fadeOut(400,
function() {
$("<img/>").attr("src", src).load(function() {
$("#main-img").find('img').attr("src", this.src).fadeIn(400);
})
})
});
Any ideas are greatly appreciated. Thanks in advance!
Here's one possibility: it looks like you're establishing the "load" handler on your temporary image element after you're initializing the "src". That's a problem in IE - reverse the order of those things and see if that helps.
$("#main-img").find('img').fadeOut(400,
function() {
$("<img/>").load(function() {
$("#main-img").find('img').attr("src", this.src).fadeIn(400);
}).attr("src", src);
})
If the image is in the cache, then when you assign the "src" attribute IE will immediately ready the element. If there's no "load" handler defined at that point, it won't queue up the event at all.
Also, just as a note, the construct
$('#main-img').find("img")
could be written:
$('#main-img img')
Doing it like that is a little shorter, but in truth it may or may not actually be faster. Probably would be, I think.

Javascript to determine beginning scroll position on page?

I have a site that features a "fixed" header, the problem is that it really messes up links that link further down the page a la "http://mysite.com/#lower_div_on_the_page"
Is it even possible to use javascript to do something like
if (URL has #hashtag) {starting scroll position = normal position + (my_header_height)}
Is this even possible?
EDIT:
Thanks for all the replies... really appreciated. For reference, I am DEFINITELY using jQuery... how would I do this with jQuery?
Yes, it's possible.
Here are the steps you need to take:
Set up a DOM Loaded event handler. There's more than one way to do this and here's a link to a web page that explains how to do this. Also if you're using a javascript framework such as jQuery (see .ready()) or Prototype.js (see observe extension) it would be a lot easier.
In the DOM loaded event handler function parse the URL (window.location) for the hashtag.
var hashTag = window.location.href;
hashTag = hashTag.substr(hashTag.indexOf('#') + 1);
// now hashTag contains the portion of the URL after the hash sign
Then if you recognize the anchor tag compute the desired scroll location based on that element's location in the DOM tree or whatever logic you would like to use. Again, jQuery (see .offset()) or Prototype.js (see cumulativeScrollOffset) should be able to help with determining the correct offset to scroll to.
Set the scroll of the page. Again jQuery (see .scrollTop()) or Prototype.js (see scrollTo) both have extensions to help with this.
Here's a jQuery example:
$(document).ready(function() {
var hashTag = window.location.href;
if(hashTag.indexOf('#') > 0)
{
hashTag = hashTag.substr(hashTag.indexOf('#'));
// now get the element's offset relative to the document
var offsetTop = $(hashTag).offset().top;
// and finally, scroll the document to that offset
$(document).scrollTop(offsetTop);
}
});
Sure is, you could do something as simple as:
if(window.location.hash != ''){
elementOffset = document.getElementById(window.location.hash.substr(1)).offsetTop;
window.scrollTo(0,elementOffset + my_header_height);
}
Using jQuery it'd obviously be simpler, and you would need to get extra offset depending on containing elements and such, but that should get you started.

Categories