Grow your CSS skills. Land your dream job.

How to keep an elemet’s event to itself

  • # December 18, 2012 at 8:07 pm

    Hello World! Long time lurker, first time poster. Before the question, just wanted to say thanks for this website and the snippets; have been a huge help. Do miss the frog though post redo (think it was a frog?).

    Just as a disclaimer, I am not a real web designed by any means, so don’t assume that I have done the equivalent of turning on the power button.

    I am trying to implement the [Styled Popup Menu](http://css-tricks.com/snippets/jquery/styled-popup-menu/ “Styled Popup Menu”) on a wordpress site. The function has it’s own .js file that I call through wp_enqueue in my functions.php file.

    When I just have one of these on a page, it works like a charm (using to display links to all post categories). When I add a second implementation on the same page (to show all tags), both implementations display the list of tag links.

    Is there a way to implement this function on multiple elements on the same page with the same class names so that each implementation will show their own specific lists, or will I need to have a separate function written/wp_enqueue’d/etc… for unique class names for all elements?

    Unfortunately I am designing the site on local host so I cannot link to show it, but my code of the functions and html are below. Any advice would be greatly appreciated.

    styleddropdown.js ($ replaced by jQuery)

    (function(jQuery){
    jQuery.fn.styleddropdown = function(){
    return this.each(function(){
    obj = jQuery(this)
    obj.find(‘.field’).click(function() { //onclick event, ‘list’ fadein
    obj.find(‘.list’).fadeIn(400);

    jQuery(document).keyup(function(event) { //keypress event, fadeout on ‘escape’
    if(event.keyCode == 27) {
    obj.find(‘.list’).fadeOut(400);
    }
    });

    obj.find(‘.list’).hover(function(){ },
    function(){
    jQuery(this).fadeOut(400);
    });
    });

    obj.find(‘.list li’).click(function() { //onclick event, change field value with selected ‘list’ item and fadeout ‘list’
    obj.find(‘.field’)
    .val(jQuery(this).html())
    .css({
    ‘background':’#fff’,
    ‘color':’#333′
    });
    obj.find(‘.list’).fadeOut(400);
    });
    });
    };
    })(jQuery);

    jQuery(function(){
    jQuery(‘.size’).styleddropdown();
    });

    HTML/php in my page.php file

      < ?php
      $tags=get_tags(“hide_empty=false&get=all”);
      $html = ‘
    • ‘;
      foreach ($tags as $tag) {
      $tag_link = get_tag_link($tag->term_id);
      }
      $html .= “Tag: slug}’>”;
      $html .= “{$tag->name}
    • “;
      echo $html
      ?>

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".