Support » Fixing WordPress » jQuery Conflict – Carousel Hide/Show Div – minimalist design

  • Resolved ajm832

    (@ajm832)


    Greetings,

    First my (limited) experience – I’ll understand HTML, CSS and even PHP. jQueries look like Chinese to me (just cut & paste, I tweak only after seeing the effects). And well, I’m learning how WordPress works as I go. I _suspect_ this is a jQuery problem, possibly it loading twice.

    I’m modifying a theme – F8-Lite – its minimalist, clean and image heavy. I particularly enjoy how the images automatically change for the feature.

    However, I’m trying to insert code from an old design I did – specifically a navigation DIV. NOT a text-based drop-down menu (which I find plenty of information for). It’s a DIV that starts hidden but which is displayed once activated. To function, I insert this into the head:

    <script type="text/javascript" src="http://topicjumble.com/wp-content/uploads/2011/02/jquery.js"></script>
    		<!-- -->
    		<script type="text/javascript">
    		$(function()
    		{
    
    		$("#jslink").click(function(event) {
    		event.preventDefault();
    		$("#jsmenu").slideToggle();
    		});
    
    		$("#jsmenu p").click(function(event) {
    		event.preventDefault();
    		$("#jsmenu").slideUp();
    		});
    		});
    		</script>

    In which jslink is a piece of text – “Expand Your Options” – and jsmenu the div full of all the good stuff. Click the words and the new div drops down with images, links, etc.

    Doing so, however, invariable breaks the carousel (and not just f8-lite but any other ones I find). I can get one to work – or the other – but not both. I’m not sure how to dissect – and then merge – both sets of code (not even sure where to properly start).

    I saw a similar combination at this site. If you click on the bubbles under the image, a new div is shown. If you click on the Scuba Diver image at top, down comes a nice DIV full of useful contact info.

    So…. any advice?

    • Is there a plug-in that automatically offers such a drop-down?
    • Do I need to insert this script somewhere else?
    • Is there already a child-theme that maybe adds this in?
    • Is there an alternative way to implement an expanding div?

    Sincerest thanks in advance,
    AJM

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter ajm832

    (@ajm832)

    Oh, and for what it’s worth – I have been searching for plug-ins, forums, and other “how tos” (I usually prefer tweaking things manually to see how it works).

    I’m posting due to just a lack of success on this one feature – perhaps I’m using the wrong keywords, but I get all kinds of different answers (but none that deal with resolving 2 different jQueries – I’m guessing the functions.php might be loading one, not sure if I should just mod things there?). Oh dear. >_< Back to the vault!

    Thread Starter ajm832

    (@ajm832)

    Bump for persistence!

    Still no luck with plug-ins: every drop down menu seems to be a list, while I actually desire a div that pushed content down.

    Currently experimenting with trying to dynamically swap CSS values with PHP – not 100% sure if it’ll give the right effect, but worth a shot.

    If anyone has their own insights, tricks, tips, etc – just lemme know. And if you don’t know what I’m after, um, just check out the last link in the first post – they managed to do it I think, I’m still trying to figure out what they did different. 😀

    Woot.,

    Thread Starter ajm832

    (@ajm832)

    oh well, solved it =^_^= ! back to the Vault!

    If Amber or anyone else has figured this out, please help! I am a noob to javascript, and can’t solve this conflict!!!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘jQuery Conflict – Carousel Hide/Show Div – minimalist design’ is closed to new replies.