Please help me fix this CSS

**Divvy** · 4th Mar 2011, 02:35 AM

Hello guys,

Can someone help me fix a little issue in my CSS code?
This is my CSS code:

Code:

<style type="text/css">
    
    .urbangreymenu{
    width: 190px; /*width of menu*/
    }
    
    .urbangreymenu .headerbar{
    font: bold 13px Verdana;
    color: #FFFFFF;
    background: #6a1c30 url({THEME}/images/arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
    margin-bottom: 0; /*bottom spacing between header and rest of content*/
    padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
    }
    
    .urbangreymenu .headerbar a{
    text-decoration: none;
    color: #FFFFFF;
    display: block;
    }

    .urbangreymenu ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
    }
    
    .urbangreymenu ul li{
    padding-bottom: 2px; /*bottom spacing between menu items*/
    }
    
    .urbangreymenu ul li a{
    font: normal 12px Arial;
    color: #CCCCCC;
    display: block;
    padding: 5px 0;
    line-height: 17px;
    padding-left: 8px; /*link text is indented 8px*/
    text-decoration: none;
    }
    
    .urbangreymenu ul li a:visited{
    color: #CCCCCC;
    }
    
    .urbangreymenu ul li a:hover{ /*hover state CSS*/
    color: #eecc59;
    }
    
</style>

With this javascript:

Code:

<script type="text/javascript">
    
    ddaccordion.init({
        headerclass: "headerbar", //Shared CSS class name of headers group
        contentclass: "submenu", //Shared CSS class name of contents group
        revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
        mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
        collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
        defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
        onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
        animatedefault: false, //Should contents open by default be animated into view?
        persiststate: true, //persist state of opened contents within browser session?
        toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
        togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
        animatespeed: "normal", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
        oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
            //do nothing
        },
        onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
            //do nothing
        }
    })
    
    </script>

And this html:

Code:

<div class="urbangreymenu">
                            
                            <h3 class="headerbar"><a href="#">Portuguesas</a></h3>
                            <ul class="submenu">
                            <li><a href=#">Despidas na EGO</a></li>
                            </ul>
                            
                            <h3 class="headerbar"><a href="#">Brasileiras</a></h3>
                            <ul class="submenu">
                            <li><a href="#">Despidas em Outras</a></li>        
                            </ul>
                            
                            <h3 class="headerbar"><a href="#">Internacionais</a></h3>
                            <ul class="submenu">
                            <li><a href="#">Despidas em Outras</a></li>        
                            </ul>
                            
</div>

Everything works fine like that... this makes a vertical menu, that opens automatically when we pass the mouse cursor hover...

As you can see in the code, this adds a image next to the category title, using the class="headerbar".
As you can see the code:

Code:

.urbangreymenu .headerbar{
    font: bold 13px Verdana;
    color: #FFFFFF;
    background: #6a1c30 url({THEME}/images/arrowstop.gif) no-repeat 8px  6px; /*last 2 values are the x and y coordinates of bullet image*/
    margin-bottom: 0; /*bottom spacing between header and rest of content*/
    padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
    }

I have 3 categories that titles that uses the same image (images/arrowstop.gif) and now I want to change that, by adding a different image for each category title.

For that, I tried adding this extra CSS:

Code:

.urbangreymenu .headerbar2{
     font: bold 13px Verdana;
     color: #FFFFFF;
     background: #6a1c30 url({THEME}/images/arrowstop2.gif) no-repeat 8px  6px; /*last 2 values are the x and y coordinates of bullet image*/
     margin-bottom: 0; /*bottom spacing between header and rest of content*/
     padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
     }

Basically, I only changed .urbangreymenu .headerbar to .urbangreymenu .headerbar2

And used the class="headerbar2" in html...

And doing that, the image appeared fine in the category title where I added the class code.

But the problem is that the script stopped to work... the mouse cursor hover function don't works anymore... I pass hover with my mouse, but nothing happens...

Any ideas? Please?
Hope that you understood what Im trying to say, sorry for my poor english

DEMO: http://www.dynamicdrive.com/dynamici...menu-urban.htm

Divvy Reviewed by Divvy on 4th Mar 2011. Please help me fix this CSS Hello guys, Can someone help me fix a little issue in my CSS code? This is my CSS code: <style type="text/css"> .urbangreymenu{ width: 190px; /*width of menu*/ } Rating: 5

**Divvy** · 4th Mar 2011, 02:44 AM

hmmmm I forgot this file.js code:

Code:

//** Accordion Content script: By Dynamic Drive, at http://www.dynamicdrive.com
//** Created: Jan 7th, 08'. Last updated: June 7th, 2010 to v1.9

//Version 1.9: June 7th, 2010':
//**1) Ajax content support added, so a given header's content can be dynamically fetched from an external file and on demand.
//**2) Optimized script performance by caching header and content container references


var ddaccordion={
    ajaxloadingmsg: '<img src="loading2.gif" /><br />Loading Content...', //customize HTML to output while Ajax content is being fetched (if applicable)

    headergroup: {}, //object to store corresponding header group based on headerclass value
    contentgroup: {}, //object to store corresponding content group based on headerclass value

    preloadimages:function($images){
        $images.each(function(){
            var preloadimage=new Image()
            preloadimage.src=this.src
        })
    },

    expandone:function(headerclass, selected){ //PUBLIC function to expand a particular header
        this.toggleone(headerclass, selected, "expand")
    },

    collapseone:function(headerclass, selected){ //PUBLIC function to collapse a particular header
        this.toggleone(headerclass, selected, "collapse")
    },

    expandall:function(headerclass){ //PUBLIC function to expand all headers based on their shared CSS classname
        var $headers=this.headergroup[headerclass]
        this.contentgroup[headerclass].filter(':hidden').each(function(){
            $headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion")
        })
    },

    collapseall:function(headerclass){ //PUBLIC function to collapse all headers based on their shared CSS classname
        var $headers=this.headergroup[headerclass]
        this.contentgroup[headerclass].filter(':visible').each(function(){
            $headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion")
        })
    },

    toggleone:function(headerclass, selected, optstate){ //PUBLIC function to expand/ collapse a particular header
        var $targetHeader=this.headergroup[headerclass].eq(selected)
        var $subcontent=this.contentgroup[headerclass].eq(selected)
        if (typeof optstate=="undefined" || optstate=="expand" && $subcontent.is(":hidden") || optstate=="collapse" && $subcontent.is(":visible"))
            $targetHeader.trigger("evt_accordion")
    },

    ajaxloadcontent:function($targetHeader, $targetContent, config, callback){
        var ajaxinfo=$targetHeader.data('ajaxinfo')

        function handlecontent(content){ //nested function
            if (content){ //if ajax content has loaded
                ajaxinfo.cacheddata=content //remember ajax content 
                ajaxinfo.status="cached" //set ajax status to cached
                if ($targetContent.queue("fx").length==0){ //if this content isn't currently expanding or collapsing
                    $targetContent.hide().html(content) //hide loading message, then set sub content's HTML to ajax content
                    ajaxinfo.status="complete" //set ajax status to complete
                    callback() //execute callback function- expand this sub content
                }
            }
            if (ajaxinfo.status!="complete"){
                setTimeout(function(){handlecontent(ajaxinfo.cacheddata)}, 100) //call handlecontent() again until ajax content has loaded (ajaxinfo.cacheddata contains data)
            }
        } //end nested function

        if (ajaxinfo.status=="none"){ //ajax data hasn't been fetched yet
            $targetContent.html(this.ajaxloadingmsg)
            $targetContent.slideDown(config.animatespeed)
            ajaxinfo.status="loading" //set ajax status to "loading"
            $.ajax({
                url: ajaxinfo.url, //path to external menu file
                error:function(ajaxrequest){
                    handlecontent('Error fetching content. Server Response: '+ajaxrequest.responseText)
                },
                success:function(content){
                    content=(content=="")? " " : content //if returned content is empty, set it to "space" is content no longer returns false/empty (hasn't loaded yet)
                    handlecontent(content)
                }
            })
        }
        else if (ajaxinfo.status=="loading")
            handlecontent(ajaxinfo.cacheddata)
    },

    expandit:function($targetHeader, $targetContent, config, useractivated, directclick, skipanimation){
        var ajaxinfo=$targetHeader.data('ajaxinfo')
        if (ajaxinfo){ //if this content should be fetched via Ajax
            if (ajaxinfo.status=="none" || ajaxinfo.status=="loading")
                this.ajaxloadcontent($targetHeader, $targetContent, config, function(){ddaccordion.expandit($targetHeader, $targetContent, config, useractivated, directclick)})
            else if (ajaxinfo.status=="cached"){
                $targetContent.html(ajaxinfo.cacheddata)
                ajaxinfo.cacheddata=null
                ajaxinfo.status="complete"
            }
        }
        this.transformHeader($targetHeader, config, "expand")
        $targetContent.slideDown(skipanimation? 0 : config.animatespeed, function(){
            config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), useractivated)
            if (config.postreveal=="gotourl" && directclick){ //if revealtype is "Go to Header URL upon click", and this is a direct click on the header
                var targetLink=($targetHeader.is("a"))? $targetHeader.get(0) : $targetHeader.find('a:eq(0)').get(0)
                if (targetLink) //if this header is a link
                    setTimeout(function(){location=targetLink.href}, 200) //ignore link target, as window.open(targetLink, targetLink.target) doesn't work in FF if popup blocker enabled
            }
        })
    },

    collapseit:function($targetHeader, $targetContent, config, isuseractivated){
        this.transformHeader($targetHeader, config, "collapse")
        $targetContent.slideUp(config.animatespeed, function(){config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), isuseractivated)})
    },

    transformHeader:function($targetHeader, config, state){
        $targetHeader.addClass((state=="expand")? config.cssclass.expand : config.cssclass.collapse) //alternate btw "expand" and "collapse" CSS classes
        .removeClass((state=="expand")? config.cssclass.collapse : config.cssclass.expand)
        if (config.htmlsetting.location=='src'){ //Change header image (assuming header is an image)?
            $targetHeader=($targetHeader.is("img"))? $targetHeader : $targetHeader.find('img').eq(0) //Set target to either header itself, or first image within header
            $targetHeader.attr('src', (state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse) //change header image
        }
        else if (config.htmlsetting.location=="prefix") //if change "prefix" HTML, locate dynamically added ".accordprefix" span tag and change it
            $targetHeader.find('.accordprefix').html((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse)
        else if (config.htmlsetting.location=="suffix")
            $targetHeader.find('.accordsuffix').html((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse)
    },

    urlparamselect:function(headerclass){
        var result=window.location.search.match(new RegExp(headerclass+"=((\\d+)(,(\\d+))*)", "i")) //check for "?headerclass=2,3,4" in URL
        if (result!=null)
            result=RegExp.$1.split(',')
        return result //returns null, [index], or [index1,index2,etc], where index are the desired selected header indices
    },

    getCookie:function(Name){ 
        var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pair
        if (****************.match(re)) //if cookie found
            return ****************.match(re)[0].split("=")[1] //return its value
        return null
    },

    setCookie:function(name, value){
        **************** = name + "=" + value + "; path=/"
    },

    init:function(config){
    document.write('<style type="text/css">\n')
    document.write('.'+config.contentclass+'{display: none}\n') //generate CSS to hide contents
    document.write('a.hiddenajaxlink{display: none}\n') //CSS class to hide ajax link
    document.write('<\/style>')
    jQuery(document).ready(function($){
        ddaccordion.urlparamselect(config.headerclass)
        var persistedheaders=ddaccordion.getCookie(config.headerclass)
        ddaccordion.headergroup[config.headerclass]=$('.'+config.headerclass) //remember header group for this accordion
        ddaccordion.contentgroup[config.headerclass]=$('.'+config.contentclass) //remember content group for this accordion
        var $headers=ddaccordion.headergroup[config.headerclass]
        var $subcontents=ddaccordion.contentgroup[config.headerclass]
        config.cssclass={collapse: config.toggleclass[0], expand: config.toggleclass[1]} //store expand and contract CSS classes as object properties
        config.revealtype=config.revealtype || "click"
        config.revealtype=config.revealtype.replace(/mouseover/i, "mouseenter")
        if (config.revealtype=="clickgo"){
            config.postreveal="gotourl" //remember added action
            config.revealtype="click" //overwrite revealtype to "click" keyword
        }
        if (typeof config.togglehtml=="undefined")
            config.htmlsetting={location: "none"}
        else
            config.htmlsetting={location: config.togglehtml[0], collapse: config.togglehtml[1], expand: config.togglehtml[2]} //store HTML settings as object properties
        config.oninit=(typeof config.oninit=="undefined")? function(){} : config.oninit //attach custom "oninit" event handler
        config.onopenclose=(typeof config.onopenclose=="undefined")? function(){} : config.onopenclose //attach custom "onopenclose" event handler
        var lastexpanded={} //object to hold reference to last expanded header and content (jquery objects)
        var expandedindices=ddaccordion.urlparamselect(config.headerclass) || ((config.persiststate && persistedheaders!=null)? persistedheaders : config.defaultexpanded)
        if (typeof expandedindices=='string') //test for string value (exception is config.defaultexpanded, which is an array)
            expandedindices=expandedindices.replace(/c/ig, '').split(',') //transform string value to an array (ie: "c1,c2,c3" becomes [1,2,3]
        if (expandedindices.length==1 && expandedindices[0]=="-1") //check for expandedindices value of [-1], indicating persistence is on and no content expanded
            expandedindices=[]
        if (config["collapseprev"] && expandedindices.length>1) //only allow one content open?
            expandedindices=[expandedindices.pop()] //return last array element as an array (for sake of jQuery.inArray())
        if (config["onemustopen"] && expandedindices.length==0) //if at least one content should be open at all times and none are, open 1st header
            expandedindices=[0]
        $headers.each(function(index){ //loop through all headers
            var $header=$(this)
            if (/(prefix)|(suffix)/i.test(config.htmlsetting.location) && $header.html()!=""){ //add a SPAN element to header depending on user setting and if header is a container tag
                $('<span class="accordprefix"></span>').prependTo(this)
                $('<span class="accordsuffix"></span>').appendTo(this)
            }
            $header.attr('headerindex', index+'h') //store position of this header relative to its peers
            $subcontents.eq(index).attr('contentindex', index+'c') //store position of this content relative to its peers
            var $subcontent=$subcontents.eq(index)
            var $hiddenajaxlink=$subcontent.find('a.hiddenajaxlink:eq(0)') //see if this content should be loaded via ajax
            if ($hiddenajaxlink.length==1){
                $header.data('ajaxinfo', {url:$hiddenajaxlink.attr('href'), cacheddata:null, status:'none'}) //store info about this ajax content inside header
            }
            var needle=(typeof expandedindices[0]=="number")? index : index+'' //check for data type within expandedindices array- index should match that type
            if (jQuery.inArray(needle, expandedindices)!=-1){ //check for headers that should be expanded automatically (convert index to string first)
                ddaccordion.expandit($header, $subcontent, config, false, false, !config.animatedefault) //3rd last param sets 'isuseractivated' parameter, 2nd last sets isdirectclick, last sets skipanimation param
                lastexpanded={$header:$header, $content:$subcontent}
            }  //end check
            else{
                $subcontent.hide()
                config.onopenclose($header.get(0), parseInt($header.attr('headerindex')), $subcontent.css('display'), false) //Last Boolean value sets 'isuseractivated' parameter
                ddaccordion.transformHeader($header, config, "collapse")
            }
        })
        $headers.bind("evt_accordion", function(e, isdirectclick){ //assign CUSTOM event handler that expands/ contacts a header
                var $subcontent=$subcontents.eq(parseInt($(this).attr('headerindex'))) //get subcontent that should be expanded/collapsed
                if ($subcontent.css('display')=="none"){
                    ddaccordion.expandit($(this), $subcontent, config, true, isdirectclick) //2nd last param sets 'isuseractivated' parameter
                    if (config["collapseprev"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){ //collapse previous content?
                        ddaccordion.collapseit(lastexpanded.$header, lastexpanded.$content, config, true) //Last Boolean value sets 'isuseractivated' parameter
                    }
                    lastexpanded={$header:$(this), $content:$subcontent}
                }
                else if (!config["onemustopen"] || config["onemustopen"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){
                    ddaccordion.collapseit($(this), $subcontent, config, true) //Last Boolean value sets 'isuseractivated' parameter
                }
         })
        $headers.bind(config.revealtype, function(){
            if (config.revealtype=="mouseenter"){
                clearTimeout(config.revealdelay)
                var headerindex=parseInt($(this).attr("headerindex"))
                config.revealdelay=setTimeout(function(){ddaccordion.expandone(config["headerclass"], headerindex)}, config.mouseoverdelay || 0)
            }
            else{
                $(this).trigger("evt_accordion", [true]) //last parameter indicates this is a direct click on the header
                return false //cancel default click behavior
            }
        })
        $headers.bind("mouseleave", function(){
            clearTimeout(config.revealdelay)
        })
        config.oninit($headers.get(), expandedindices)
        $(window).bind('unload', function(){ //clean up and persist on page unload
            $headers.unbind()
            var expandedindices=[]
            $subcontents.filter(':visible').each(function(index){ //get indices of expanded headers
                expandedindices.push($(this).attr('contentindex'))
            })
            if (config.persiststate==true && $headers.length>0){ //persist state?
                expandedindices=(expandedindices.length==0)? '-1c' : expandedindices //No contents expanded, indicate that with dummy '-1c' value?
                ddaccordion.setCookie(config.headerclass, expandedindices)
            }
        })
    })
    }
}

//preload any images defined inside ajaxloadingmsg variable
ddaccordion.preloadimages(jQuery(ddaccordion.ajaxloadingmsg).filter('img'))

**Rapid4All** · 4th Mar 2011, 03:01 AM

Site url? so we can take a look with firebug

**Divvy** · 4th Mar 2011, 09:14 AM

WEBSITE: http://www.celebridadesdespidas.com

SCRIPT: http://www.dynamicdrive.com/dynamici...menu-urban.htm
Full explanation of each setting inside the script: http://www.dynamicdrive.com/dynamici...daccordion.htm

**Divvy** · 4th Mar 2011, 07:38 PM

Please, anyone?

**Lock Down** · 4th Mar 2011, 08:10 PM

Ok you could probably leave the original code and remove this:

Code:

background: #6a1c30 url({THEME}/images/arrowstop2.gif) no-repeat 8px  6px; /*last 2 values are the x and y coordinates of bullet image*/

and add it to your html like this:

Code:

<div class="urbangreymenu">
                            
                            <h3 class="headerbar" style="background: #6a1c30 url({THEME}/images/arrowstop1.gif) no-repeat 8px  6px; "><a href="#">Portuguesas</a></h3>
                            <ul class="submenu">
                            <li><a href=#">Despidas na EGO</a></li>
                            </ul>
                            
                            <h3 class="headerbar" style="background: #6a1c30 url({THEME}/images/arrowstop2.gif) no-repeat 8px  6px; "><a href="#">Brasileiras</a></h3>
                            <ul class="submenu">
                            <li><a href="#">Despidas em Outras</a></li>        
                            </ul>
                            
                            <h3 class="headerbar" style="background: #6a1c30 url({THEME}/images/arrowstop3.gif) no-repeat 8px  6px; "><a href="#">Internacionais</a></h3>
                            <ul class="submenu">
                            <li><a href="#">Despidas em Outras</a></li>        
                            </ul>
                            
</div>

See if that will work for you instead of changing the headerbar name.

**Divvy** · 4th Mar 2011, 10:34 PM

OMG, Im an idiot lol and you a genius!
Whycant this cross my mind? So simple...

Thank you my friend! Is working perfectly!

**Lock Down** · 4th Mar 2011, 10:49 PM

You are welcome.

Please help me fix this CSS

Thread Tools

Display

Please help me fix this CSS

Sponsored Links

Thread Information

Users Browsing this Thread

Tags for this Thread

Posting Permissions

themaCreator - create posts from...

themaPoster - post to forums and...

themaCreator - create posts from...

themaRegister - register to forums...

themaManager - edit and manage...