Member Avatar for Cravver

I need to make that when you use a color picker the hover styling would work too. So far I've only got background and border bottom working here is the code below (uses JQuery):

    var customElements2 ="#search .submit_input, .reputation.positive, .members li.positive";
    var customElements = ".maintitle, #community_app_menu > li.active > a, .ipsSideBlock h3, #sc-topbar";
    var customText = "#user_navigation a, #main_search, #search_options, #community_app_menu div  li:hover > a, #community_app_menu  li:hover > a, #community_app_menu li.click.click_active > a, #more_apps_menucontentul  li > a:hover, #community_app_menu > li.active > a";

    jQuery('#colorpicker').ColorPicker({
        onSubmit: function(hsb, hex, rgb, el) {
            jQuery(el).val(hex);
            jQuery(el).ColorPickerHide();
            jQuery(el).css("borderBottomColor", "#" + hex);
            jQuery(el).css("backgroundColor", "#" + hex);
            jQuery(customElements).css("border-bottom-color", "#" + hex);
            jQuery(customElements2).css("background-color", "#" + hex);
            jQuery(customText).css("color", "#" + hex);
            jQuery.cookie('customcolor',hex,{ expires: 365, path: '/'});
        },
        onBeforeShow: function () {
            jQuery(this).ColorPickerSetColor(this.value);
        },
        onChange: function (hsb, hex, rgb) {
            jQuery(customElements).css("border-bottom-color", "#" + hex);
            jQuery(customElements2).css("background-color", "#" + hex);
            jQuery(customText).css("color", "#" + hex);
            jQuery.cookie('customcolor',hex,{ expires: 365, path: '/'});
        }
    })
    .bind('keyup', function(){
        jQuery(this).ColorPickerSetColor(this.value);
    });

    if ( (jQuery.cookie('customcolor') != null))    {
        jQuery(customElements).css("border-bottom-color", "#" + jQuery.cookie('customcolor'));
        jQuery(customElements2).css("background-color", "#" + jQuery.cookie('customcolor'));
        jQuery(customText).css("color", "#" + jQuery.cookie('customcolor'));
        jQuery("#colorpicker").val(jQuery.cookie('customcolor'));
    }
    else{
        jQuery(customElements).css("border-bottom-color","#C42323");
        jQuery(customText).css("color","#C42323");
    }

});
  • 2 Contributors
  • 1 Reply
  • 727 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by LastMitch
Member Avatar for LastMitch

I need to make that when you use a color picker the hover styling would work too. So far I've only got background and border bottom working here is the code below (uses JQuery):

If you want to your color picker to hover with style then you need to create a function to hover.

It should look something like this (it's not tested but it will give you an idea how it works):

var customElements;
$('#community_app_menu > li.active > a').hover(function(){
    customElements= $(this).css('background-color');
    $(this).css('background-color', $(this).data('background-color'));
}, function(){
    $(this).css('background-color', customElements);
})
Edited by LastMitch because: grammer
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.