SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Question CSS conficts (was: Javascript conflicts.)

    Hey everyone. I'm quite new to this whole javascript thing so would really appreciate your help.

    I followed a tutorial on a lava-lamp style navigation on tutsplus that you can find here:

    http://net.tutsplus.com/tutorials/ht...vigation-menu/

    I successfully have it working on my site, however, I'm now trying to get a jquery image plugin called Captify working on the site as well. However, when i follow the instructions from captify, it not only doesn't work, but seems to break my lava-lamp style navigation.

    Would there be conflicts? How do you avoid such conflicts? I'm starting to learn Javascript and this would be a huge help. Thanks.

    bo5ton

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,700
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    What is it that's breaking? Do you have a test page that we can look at so that we can advise you on it issues?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Oh! Sorry I should have included this. Anyway, here is the page with just the navigation slider on the top right...

    http://leafkit.com/example/portfolio.html

    And here is the sample of captify on it's own:

    http://leafkit.com/example/sample.html

    And here I try and follow the instructions to make some images in the content to have the captify affect:

    http://leafkit.com/example/both.html

    This time around the navigation blob is fine, however the captify javascript doesn't work correctly. I must be missing something and with my inexperience i can't seem to see it.

    Cheers.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,700
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    It looks like you have two different versions of jQuery loading.

    What's happening is that after you extend jQuery to add on the captify methods, a second version of jQuery is replacing the first.

    Try this: remove the jQuery for captify, and move the two script sections for captify to the end of the body, below the other scripts that are there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help pmw!
    Ok, so I took out the jQuery that was loading for captify(hope it's the right one?):
    Code:
    <script type="text/javascript" src="js/jquery.js"></script>
    And put the two script sections for captify to the end of the body below the other scripts:

    Code:
    <script type="text/javascript" src="js/captify.tiny.js"></script>
    
    <script type="text/javascript"> 
    $(function(){
    	$('img.captify').captify({
    		opacity:0.75
    	});
    });
    </script>
    It definately changed something but I'm not sure what. Sorry for my incompetence! Thanks heaps for your help.

    Btw, saw you're in Christchurch. Hope you're ok.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,700
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bo5ton View Post
    It definately changed something but I'm not sure what. Sorry for my incompetence! Thanks heaps for your help.
    You'll find that if you disable #wrapper img from the stylesheet that the script will be behaving properly.

    There are only a few style issues to resolve, for which I suggest that we get the CSS Forum in to end a hand.

    I'll move this thread over to the CSS Forum now, so that they can help you to resolve the CSS issues that exist between leafkit template, and the captions.

    Off Topic:

    Quote Originally Posted by bo5ton View Post
    Btw, saw you're in Christchurch. Hope you're ok.
    That's appreciated. Thanks.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Hey thanks for that! I think i figured it out. Applied the float: left to the little images on the sides of the menus instead of the wrapper div, so it seems to have worked! Now I just need to style it a little more.

    So it was the loading of the jquery twice that was the problem originally, and then there is obviously some conflicting css right? Just want to make sure i've learnt my lesson.

    If anyone wants to take a look a little more to clean up my code if you think it'll help feel free. Thanks.

  8. #8
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    It seems that there's a heap of css code in the javascript, is this normal? It seems kind of limiting. Is javascript loaded last due to it being at the end of the html page? I can't seem to force it to use my css instead of the css in the js file.

    You can see all the css implemented into the js here.


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
  •