CODEWITHSUNDEEP
javascriptwordpressjoomla
Keith Higginbotham
Keith Higginbotham

Reputation: 53

Trying to change an event to preventDefault in Wordpress site using Joomla template

I'm coding a Wordpress site using a Joomla template (client liked the template, so I'm converting to Wordpress). The problem I am having is that I want the background image caption to not show on load, but instead only show after clicking the link button.

This is the site that is functioning the way I would like: http://livedemo00.template-help.com/joomla_33451/index.php

Here is my Wordpress version: http://gt.khcreativemedia.com/

I believe I have all of the same code in place, javascript and css.

Here is the code that I believe is handling this:

    <script type="text/javascript">
    var $j = jQuery.noConflict();

    $j(function()
    {

    $j("#link").click(function(event) {
    event.preventDefault();
    $j(this).toggleClass("link2");
    $j("#top_menu").slideToggle("slow");
    });
            })

</script>

I'm using a javascript gallery called jdgallery. Here is a reduced section of code from the image section:

<div class="jbgallery"> 
 <ul> 
   <li>
      <a title="" href="<?php bloginfo( 'template_url' ); ?>/images/background/Auburn.jpg">1</a> 
      <div class="caption">Mauris pharetra lorem in velit scelerisque hendrerit. Etiam id sapien eros. Etiam ante velit, fermentum et
      </div> 
 </ul> 
</div><!-- #jbgallery -->

Can anyone tell me what I may be doing wrong.

Thanks in advance, Keith

Upvotes: 2

Views: 578

Answers (2)

stealthyninja
stealthyninja

Reputation: 10371

You're missing a comma. Replace 

jQuery(document).ready(function(){
    jQuery(".jbgallery").jbgallery({
        menu : "numbers", 
        style: "zoom", 
        caption : true,
        slideshow : true,
        labels   : {
            info : "I"
        }
        ready : function(){
            jQuery(".jbg-caption").hide();
        }


    });
});

with 

jQuery(document).ready(function(){
    jQuery(".jbgallery").jbgallery({
        menu : "numbers", 
        style: "zoom", 
        caption : true,
        slideshow : true,
        labels   : {
            info : "I"
        },
        ready : function(){
            jQuery(".jbg-caption").hide();
        }


    });
});

Upvotes: 1

artlung
artlung

Reputation: 33833

Perhaps I'm misunderstanding, but if you want it not visible, you could add a call to hide() on the element on load, like this:

var $j = jQuery.noConflict();

$j(function(){
    // hide it first thing onload?
    $j("#top_menu").hide();

    $j("#link").bind('click', function(event) {
        $j(this).toggleClass("link2");
        $j("#top_menu").slideToggle("slow");
        event.preventDefault();
    });

});

Alternately, simply add display: none to the element's html:

<div id="top_menu" style="display: none">

Upvotes: 0

Related Questions