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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I simply cannot get color animation plugin to work...please help.

    hey.

    i'm not a code expert or anything but i here's what i'm trying to do:
    i set up this blog using weebly.com: http://noamagger.weebly.com and i wanna add color animations to the post titles and some buttons and i can't seem to get it working.
    here's what i did:
    added this to the html head:
    <script type="text/javascript" src="http://www.jonathanlax.com/nmblog/js/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://www.jonathanlax.com/nmblog/js/jquery.color.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("#blog-read-more-link").hover(function() {
    $(this).stop().animate({ backgroundColor: "#53b9df"}, 800);
    },function() {
    $(this).stop().animate({ backgroundColor: "#e7e7e7" }, 800);
    });
    });
    </script>


    tried making the "read more" button's background to change colors on hover.

    it simply does not work for me.
    firebug gives me this:

    $("#blog-read-more-link") is null
    $("#blog-read-more-link").hover(function() {


    i've tried so many things already and nothing seems to work...

    please help!

    thanx

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Where is the element with ID "#blog-read-more-link" in your document?

    You should avoid hotlinking.js files as it makes your functionality dependent on the presence of another site.

  • #3
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the other site is up, it's a host i own. the thing with weebly is that you cannot store files on their servers.

    here's an image of where the color animation should happen:



    thanks for the quick reply!

  • #4
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    nevermind - got it figured out! finally. it seems like the .js files i loaded conflicted with scripts that weebly uses. i switched the $() to jQuery()
    so the script code in the head now looks like this:

    <script type="text/javascript">
    $(document).ready(function(){
    jQuery("#blog-read-more-link").hover(function() {
    jQuery(this).stop().animate({ backgroundColor: "#53b9df"}, 800);
    },function() {
    jQuery(this).stop().animate({ backgroundColor: "#e7e7e7" }, 800);
    });
    });
    </script>


    and now it works ))

    thanx again !

  • #5
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Unless I misunderstand, your script is addressing "#blog-read-more-link" but your target element is "blog-read-more-link".

  • #6
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    apparentely my excitement was premature...
    the button did in fact animate background colors but it only happened with the first button in the page. didn't work for any other "read more" buttons.

    Logic Ali - my target element is an ID element from the css which is named "blog-read-more-link". since it's an ID i think the # should be there... am i wrong? i tried it without the # and it didn't work at all.

    damn this!

  • #7
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    If you want to target several elements with your code, they must not have the same id (which is supposed to be unique). Otherwise you will only reach the first element on the page (if you are lucky).


  •  

    Posting Permissions

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