Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Location
    Toronto, ON
    Posts
    102
    Thanks
    12
    Thanked 1 Time in 1 Post

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

    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.)

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,485
    Thanks
    6
    Thanked 981 Times in 954 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Location
    Toronto, ON
    Posts
    102
    Thanks
    12
    Thanked 1 Time in 1 Post
    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?

    Code:
    var hash = window.location.hash;
    
    
    $(hash).click(function () {
    	$(this).effect("highlight", {}, 5000);
    });
    THANK YOU VERY MUCH!~!!

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,485
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Yeah, you need to fire that right on page load, of course. Something like:
    Code:
    $(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.
    Last edited by VIPStephan; 07-26-2011 at 06:56 PM.

  • #5
    Regular Coder
    Join Date
    Jul 2011
    Location
    Toronto, ON
    Posts
    102
    Thanks
    12
    Thanked 1 Time in 1 Post
    Quote Originally Posted by VIPStephan View Post

    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:

    Code:
    $(function() { 
      var hash = window.location.hash.substring(1);
      	alert(hash); // outputs 'deal2553' with no # sign
      $(hash).effect("highlight", {}, 5000);
    });
    Last edited by inchecksolution; 07-26-2011 at 10:04 PM.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,485
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Quote Originally Posted by inchecksolution View Post
    used the substring to get rid of the # sign:

    Code:
    $(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.

  • #7
    Regular Coder
    Join Date
    Jul 2011
    Location
    Toronto, ON
    Posts
    102
    Thanks
    12
    Thanked 1 Time in 1 Post
    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!!!!

  • #8
    Regular Coder
    Join Date
    Jul 2011
    Location
    Toronto, ON
    Posts
    102
    Thanks
    12
    Thanked 1 Time in 1 Post
    hmmm....still not getting anything. It is definitely selecting the right id though as the following code works:

    Code:
    $(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:

    Code:
    $(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?

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,485
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Did you include the JQuery UI library, too, along with the jQuery core library? These are two separate scripts, you know?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •