Results 1 to 2 of 2

Thread: HELP: Chrome CSS Drop Down Menu v2.01

  1. #1
    Join Date
    Feb 2008
    Location
    USA
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question HELP: Chrome CSS Drop Down Menu v2.01

    1) Script Title:
    Chrome CSS Drop Down Menu (v2.01)

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...rome/index.htm

    3) Describe problem:
    I was wondering if someone can help with this error message from blogger.com:
    [WXP2, FF2, Blogger.com (layouts) > My Blog=http://funtools.blogspot.com/]
    I received the error message immediately after trying to save the template changes to include the 'Chrome CSS Drop Down Menu v2.01' script.

    We were unable to save your template
    Please correct the error below, and submit your template again.

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The entity name must immediately follow the '&' in the entity reference.
    Here's the code I tried to use:

    /* start new code */

    .chromestyle{
    width: 99%;
    font-weight: bold;
    }

    .chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    .chromestyle ul{
    border: 1px solid #BBB;
    width: 100%;
    background: url(http://i47.photobucket.com/albums/f1.../chromebg3.gif) center center repeat-x; /*THEME CHANGE HERE*/
    padding: 4px 0;
    margin: 0;
    text-align: center; /*set value to "left", "center", or "right"*/
    }

    .chromestyle ul li{
    display: inline;
    }

    .chromestyle ul li a{
    color: #494949;
    padding: 4px 7px;
    margin: 0;
    text-decoration: none;
    border-right: 1px solid #DADADA;
    }

    .chromestyle ul li a:hover{
    background: url(http://i47.photobucket.com/albums/f1...mebg3-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
    }

    /*uncomment next two lines to indicate drop down marker with a 'v' see webpage*/
    /*.chromestyle ul li a[rel]:after{ -- HTML to indicate drop down link with a 'v'*/
    /*content: " v"; */
    /*content: " " url(downimage.gif); } uncomment this line to use an image instead of the 'v'*/



    /* ######### Style for Drop Down Menu ######### */

    .dropmenudiv{
    position:absolute;
    top: 0;
    border: 1px solid #BBB; /*THEME CHANGE HERE*/
    border-bottom-width: 0;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    background-color: white;
    width: 200px;
    visibility: hidden;
    filter: progidXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
    }


    .dropmenudiv a{
    width: auto;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
    padding: 2px 0;
    text-decoration: none;
    font-weight: bold;
    color: black;
    }

    * html .dropmenudiv a{ /*IE only hack*/
    width: 100%;
    }

    .dropmenudiv a:hover{ /*THEME CHANGE HERE*/
    background-color: #F0F0F0;
    }

    -->
    </style>

    <script type="text/javascript">

    //Chrome Drop Down Menu v2.01- Author: Dynamic Drive (http://www.dynamicdrive.com)
    //Last updated: November 14th 06- added iframe shim technique

    var cssdropdown={
    disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout
    disablemenuclick: true, //when user clicks on a menu item with a drop down menu, disable menu item's link?
    enableswipe: 1, //enable swipe effect? 1 for yes, 0 for no
    enableiframeshim: 1, //enable "iframe shim" technique to get drop down menus to correctly appear on top of controls such as form objects in IE5.5/IE6? 1 for yes, 0 for no

    //No need to edit beyond here////////////////////////
    dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all, swipetimer: undefined, bottomclip:0,

    getposOffset:function(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    },

    swipeeffect:function(){
    if (this.bottomclip<parseInt(this.dropmenuobj.offsetHeight)){
    this.bottomclip+=10+(this.bottomclip/10) //unclip drop down menu visibility gradually
    this.dropmenuobj.style.clip="rect(0 auto "+this.bottomclip+"px 0)"
    }
    else
    return
    this.swipetimer=setTimeout("cssdropdown.swipeeffect()", 10)
    },

    showhide:function(obj, e){
    if (this.ie || this.firefox)
    this.dropmenuobj.style.left=this.dropmenuobj.style.top="-500px"
    if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
    if (this.enableswipe==1){
    if (typeof this.swipetimer!="undefined")
    clearTimeout(this.swipetimer)
    obj.clip="rect(0 auto 0 0)" //hide menu via clipping
    this.bottomclip=0
    this.swipeeffect()
    }
    obj.visibility="visible"
    }
    else if (e.type=="click")
    obj.visibility="hidden"
    },

    iecompattest:function(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    },

    clearbrowseredge:function(obj, whichedge){
    var edgeoffset=0
    if (whichedge=="rightedge"){
    var windowedge=this.ie && !window.opera? this.iecompattest().scrollLeft+this.iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
    this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetWidth
    if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure) //move menu to the left?
    edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth
    }
    else{
    var topedge=this.ie && !window.opera? this.iecompattest().scrollTop : window.pageYOffset
    var windowedge=this.ie && !window.opera? this.iecompattest().scrollTop+this.iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
    this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetHeight
    if (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){ //move up?
    edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeight
    if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure) //up no good either?
    edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
    }
    }
    return edgeoffset
    },

    dropit:function(obj, e, dropmenuID){
    if (this.dropmenuobj!=null) //hide previous menu
    this.dropmenuobj.style.visibility="hidden" //hide menu
    this.clearhidemenu()
    if (this.ie||this.firefox){
    obj.onmouseout=function(){cssdropdown.delayhidemenu()}
    obj.onclick=function(){return !cssdropdown.disablemenuclick} //disable main menu item link onclick?
    this.dropmenuobj=document.getElementById(dropmenuID)
    this.dropmenuobj.onmouseover=function(){cssdropdown.clearhidemenu()}
    this.dropmenuobj.onmouseout=function(e){cssdropdown.dynamichide(e)}
    this.dropmenuobj.onclick=function(){cssdropdown.delayhidemenu()}
    this.showhide(this.dropmenuobj.style, e)
    this.dropmenuobj.x=this.getposOffset(obj, "left")
    this.dropmenuobj.y=this.getposOffset(obj, "top")
    this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
    this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
    this.positionshim() //call iframe shim function
    }
    },

    positionshim:function(){ //display iframe shim function
    if (this.enableiframeshim && typeof this.shimobject!="undefined"){
    if (this.dropmenuobj.style.visibility=="visible"){
    this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"
    this.shimobject.style.height=this.dropmenuobj.offsetHeight+"px"
    this.shimobject.style.left=this.dropmenuobj.style.left
    this.shimobject.style.top=this.dropmenuobj.style.top
    }
    this.shimobject.style.display=(this.dropmenuobj.style.visibility=="visible")? "block" : "none"
    }
    },

    hideshim:function(){
    if (this.enableiframeshim && typeof this.shimobject!="undefined")
    this.shimobject.style.display='none'
    },

    contains_firefox:function(a, b) {
    while (b.parentNode)
    if ((b = b.parentNode) == a)
    return true;
    return false;
    },

    dynamichide:function(e){
    var evtobj=window.event? window.event : e
    if (this.ie&&!this.dropmenuobj.contains(evtobj.toElement))
    this.delayhidemenu()
    else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))
    this.delayhidemenu()
    },

    delayhidemenu:function(){
    this.delayhide=setTimeout("cssdropdown.dropmenuobj.style.visibility='hidden'; cssdropdown.hideshim()",this.disappeardelay) //hide menu
    },

    clearhidemenu:function(){
    if (this.delayhide!="undefined")
    clearTimeout(this.delayhide)
    },

    startchrome:function(){
    for (var ids=0; ids<arguments.length; ids++){
    var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a")
    for (var i=0; i<menuitems.length; i++){
    if (menuitems[i].getAttribute("rel")){
    var relvalue=menuitems[i].getAttribute("rel")
    menuitems[i].onmouseover=function(e){
    var event=typeof e!="undefined"? e : window.event
    cssdropdown.dropit(this,event,this.getAttribute("rel"))
    }
    }
    }
    }
    if (window.createPopup && !window.XmlHttpRequest){ //if IE5.5 to IE6, create iframe for iframe shim technique
    document.write('<IFRAME id="iframeshim" src="" style="display: none; left: 0; top: 0; z-index: 90; position: absolute; filter: progidXImageTransform.Microsoft.Alpha(style=0,opacity=0)" frameBorder="0" scrolling="no"></IFRAME>')
    this.shimobject=document.getElementById("iframeshim") //reference iframe object
    }
    }

    }

    </script>

    </head>

    /* end new code */

  2. #2
    Join Date
    Aug 2004
    Posts
    9,894
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    Hmmm I don't use Blogger, but in general, it shouldn't matter. Make sure you're not pasting the entire source code of the script (like above) into your template, just the references to them in the HEAD section of demo.htm, so:

    Code:
    <link rel="stylesheet" type="text/css" href="chrometheme/chromestyle.css" />
    
    <script type="text/javascript" src="chromejs/chrome.js">
    
    /***********************************************
    * Chrome CSS Drop Down Menu-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    </script>
    Obviously you also need to upload the .js and .css files to chromejs/ as referenced above.

Bookmarks

Posting Permissions

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