www.webdeveloper.com
Results 1 to 2 of 2

Thread: From mouseover to onClick

  1. #1
    Join Date
    May 2012
    Posts
    2

    From mouseover to onClick

    Hello,

    Im trying to change this script (see code below)

    This is for a mouseover drop down menu.
    But Im trying to get the menu drop downs to open onClick instead of rollover.
    And for the drop down to stay open until you klick on another parent (not child) menu point.

    I've tried to solve this myself but now Im just so frustrated on my non existing jQuery skills!


    All help is welcome!


    Code:
    jQuery.noConflict();
    (function($) {
        $(function() {
    
            // Dropdown Menu
    
            var timeout    = 100;
            var closetimer = 0;
            var ddmenuitem = 0;
    
            function jsddm_open() {
                jsddm_canceltimer();
                jsddm_close();
                ddmenuitem = $(this).find('ul').css('visibility', 'visible').parent().addClass('jsddm_hover').end();
            }
            function jsddm_close() {
                if(ddmenuitem) ddmenuitem.css('visibility', 'hidden').parent().removeClass('jsddm_hover');
            }
            function jsddm_timer() {
                closetimer = window.setTimeout(jsddm_close, timeout);
            }
            function jsddm_canceltimer() {
                if(closetimer) {
                    window.clearTimeout(closetimer);
                    closetimer = null;
                }
            }
    
            $('.jsddm > li').bind('mouseover', jsddm_open);
            $('.jsddm > li').bind('mouseout',  jsddm_timer);
            document.onclick = jsddm_close;
            
            $('.thumb img').after('<span></span>');
            $('.thumb span').css('opacity','0');
            $('.post_home a:first-child').hover(function(){
                $(this).find('span').stop().animate({opacity: 0.45}, 200);
                $(this).nextAll().find('a').css('color', '#fff18f');
            }, function(){
                $(this).find('span').stop().animate({opacity: 0}, 200);
                $(this).nextAll().find('a').removeAttr('style');
            }); 
            
            $('.thumb img, .post_content img').lazyload({ 
                effect : "fadeIn"
            });
    
            $('.l_col .post_text p:last').css('margin-bottom','0');
    
            var focus = $('.focus');
            focus.focusin(function(){
                $(this).css({
                    'color': '#fff18f',
                    'border-bottom': '1px solid #fff18f'
                });
            });
            focus.focusout(function(){
                $(this).removeAttr('style');
            });
    
            $('.sharethis').click(function(){
                $(this).next('.sharelist').slideToggle('fast');
            });
    
        });
    })(jQuery);
    
    function checkEmail() {
        var email = document.getElementById('email');
        var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
        if (!filter.test(email.value)) {
            alert('Error: please enter a valid email address.');
            email.focus
            return false;
        }
    }
    http://pastebin.com/gzWdVWac

  2. #2
    Join Date
    May 2012
    Posts
    2
    No one?

    Heres the code in jsfiddle, maybe that will help:

    http://jsfiddle.net/snoffoz/yf62u/28/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles