Change background of div from url (mysite.com/#mydiv) using Javascript

[inchecksolution]

Hi guys,

My website has a share feature which includes a hash in the URL so when people click on the link the browser will take them to the proper div on the page. ex. http://www.mysite.com/#2553

What I want to do is use javascript/jquery to change the background colour of the div 2553 so that it is highlighted when the page loads, then have it slowly fade out. Is this possible??

(The highlighted div won't always be 2553 - I just used it for an example.)

[VIPStephan]

If you are using jQuery then you need jQuery UI for its highlight effect. You then read the hash out of the address (window.location.hash) and use that as ID selector to address the element to be highlighted.

[inchecksolution]

Hi VIPStephan,

Thanks a lot for getting back to me!!

Yes just before I read your message I tried all that, but I'm stuck. I figured out the window.location.hash and it returns "#2553" with the pound sign included in the string. Should this be there? or no?

Then I used the exact jquery page you linked to...but that uses an onclick event. I want it to load with the highlight already there, then fade out for a 5 second duration. It doesn't seem to be working. How should I modify the following code?

var hash = window.location.hash;


$(hash).click(function () {
	$(this).effect("highlight", {}, 5000);
});

THANK YOU VERY MUCH!~!!

[VIPStephan]

Yeah, you need to fire that right on page load, of course. Something like:

$(function() { // that’s the usual “DOM ready” function
  …
  var id = window.location.hash;
  $(id).effect("highlight", {}, 5000);
});

Edit: Oh and it just occurred to me: an ID must not start with a number, it can only start with a letter a–z or A–Z.

[inchecksolution]

Originally Posted by VIPStephan

Edit: Oh and it just occurred to me: an ID must not start with a number, it can only start with a letter a–z or A–Z.

Wow...thanks for including that edit! That saved me a huuuge headache. I was trying to hardcode a style for the id that was just a number and nothing was coming up. I was SO confused.

OK so now the id's are in the format 'deal2553', but the highlight effect isn't working. I should probably still state the obvious that I have the jquery library installed already. Here is my code...still no highlights though (i used the substring to get rid of the # sign:

$(function() { 
  var hash = window.location.hash.substring(1);
  	alert(hash); // outputs 'deal2553' with no # sign
  $(hash).effect("highlight", {}, 5000);
});

[VIPStephan]

Originally Posted by inchecksolution

used the substring to get rid of the # sign:

$(function() { 
  var hash = window.location.hash.substring(1);
  	alert(hash); // outputs 'deal2553' with no # sign
  $(hash).effect("highlight", {}, 5000);
});

Well, you need that ‘#’ character, though, to address the ID. Currently your selector/variable $(hash) would translate to $('deal2553') but you need $('#deal2553'), indeed. Anyway, if that’s still not working then your entire code or a link will help to analyze the problem.

[inchecksolution]

Ok I removed the substring, still not working.

I have a good friend looking over the code. I will post my results here.

Thank's for all your help so far VIPStephan!!!!

[inchecksolution]

hmmm....still not getting anything. It is definitely selecting the right id though as the following code works:

$(function() { 
  var hash = window.location.hash;
  $(hash).css("background-color","yellow");
});

It must be something related to the highlight function. Here is my earlier syntax:

$(function() { 
  var hash = window.location.hash;
  $(hash).effect("highlight", {}, 5000);
});

I have the following file linked: jquery.js. I looked up the highlight feature more and saw some conflicting views. Some say the jquery library supports the highlight function, while other's say you have to use some colours library as well.

Any thoughts?

[VIPStephan]

Did you include the JQuery UI library, too, along with the jQuery core library? These are two separate scripts, you know?