SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    hovers not working

    I just can't seem to get this right!!!!

    As far as I'm aware I have all the html and css in place but I've tried pplaceing the following code in numerous places, in the head, in the body etc etc and it just won't work.
    What Am I doing wrong still?

    Code:
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,700' rel='stylesheet' type='text/css' />
    		<script type="text/javascript" src="http://www.sakeenaheducationcentre.com/wp-content/themes/StyleShop/js/modernizr.custom.79639.js"></script>
    the page is here: Home school education

  2. #2
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,335
    Mentioned
    192 Post(s)
    Tagged
    4 Thread(s)
    Can you be more specific about what is not working?
    How does the Javascript and Stylesheet relate? You can get 'hover' simply with CSS.

    Your problem is unclear.
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  3. #3
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    this is exactly how it should be:

    http://tympanus.net/Tutorials/Circle...ts/index5.html

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    hantaah, We could use a better description of the problem than "hovers not working". Are your images supposed to present one of the animated effects that are shown on the other page http://tympanus.net/Tutorials/Circle...ts/index5.html ? If so, which effect? FYI, the bottom image on your page is not loading.

    Cheers.

  5. #5
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    have I not?

    My page is here looking like this: http://www.sakeenaheducationcentre.com/games/
    they should be doing this: http://tympanus.net/Tutorials/Circle...ts/index5.html

    so on my page nothing happens when you hover over the circles. On the other page you can see the hover effect, that is what i'm trying to get

  6. #6
    SitePoint Addict bronze trophy
    Join Date
    Mar 2013
    Location
    Oneonta, NY
    Posts
    307
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hantaah,

    The CSS file you are referencing in your supplied code is not the CSS that the effect on your example page is using. Those demo pages are using CSS documents that are on their server and not provided by the Google API. They are common.css and demo.css.

    If you are trying to reverse engineer the page, make sure you take note of all documents that are used to render it. Inspect all CSS, JS and other linked documents to be sure you are using the right ones. For example when I click on the Google API CSS document I get this,

    @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/...80lGh-uXM.woff) format('woff');
    }
    @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/...80lGh-uXM.woff) format('woff');
    }


    Nowhere in this code are the hooks for the divs that your images are contained in. I’m not sure if you just didn’t supply the code in your OP or if you didn’t take it from the demo site.

    Hope that helps,

    Shawn

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    There are two versions of jQuery on the page, also two versions of easing.js. That usually causes trouble. It would be better to gather all your scripts together at the bottom of the page and only add things in that you don't already have.

  8. #8
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I placed all the css in their tutorial in my style.css so all the css is there. I think it is what Ralph is mentioning. I always have an issue with this. I see what i can find but wordpress stops me from seeing what is there. It's not easy to find it to delete it

    arrrrgh!!!

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by hantaah View Post
    wordpress stops me from seeing what is there. It's not easy to find it to delete it
    I'm not sure how you're adding these scripts in, but the ideal would be to work out what file they should go in (footer.php?) and place them manually. I haven't used WP in ages, so can't remember, but I wouldn't use anything that inserts code automatically, if that's what's happening.

  10. #10
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I think that is what is happening. I think perhaps widgets or plugins but also I think perhaps some functions or php code that I cannot see maybe. I'll try and get my head around it. I did get it to work on my othr pages tho such as here:

    http://www.sakeenaheducationcentre.com/who-we-are/

    so it makes me wonder why they work on there and not here:

    http://www.sakeenaheducationcentre.com/games/

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hm, and they both use the same scripts? That's odd ... Maybe it's not the scripts then. But it would be worth making up a test page that has just what you need for it to work.

  12. #12
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hm, and they both use the same scripts? That's odd ... Maybe it's not the scripts then. But it would be worth making up a test page that has just what you need for it to work.
    I'm not sure, I've not found where exactly I'm just thinking that's what it might be. There's also an intergration part where you can add code to the head, body or bottom of body. I might try doing as you say and gather it all and put it in the body in the intergration part. So can I confirm if I have a link to say an older version of Jquery and a newer version, I can just use the new link and that will cover all codes which require jquey?

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by hantaah View Post
    I can just use the new link and that will cover all codes which require jquey?
    Hopefully, yes. The only rider is that jQuery does change over time, and some scripts written for an older version might not work with a newer one, so you need to test that.


Bookmarks

Posting Permissions

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