[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Adding css style to javescript menu

Posted on 2007-10-15
3
Medium Priority
?
338 Views
Last Modified: 2013-11-19
Hi,
I am working with the switch content menu from http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm

Instead of using the colors in the "bobexample.setColor('darkred', 'black')" I would like it to reference a style sheet.

The javascript function is
switchcontent.prototype.setColor=function(openColor, closeColor){
      this.colorOpen=openColor
      this.colorClosed=closeColor
}

so I need it say something like this -
switchcontent.prototype.setColor=function(openColor, closeColor){ //PUBLIC: Set open/ closing color of switch header. Optional
      this.colorOpen= cssClassOpen
      this.colorClosed=cssClassClosed
}

Thx
0
Comment
Question by:ipavlo
3 Comments
 
LVL 41

Expert Comment

by:HonorGod
ID: 20082417
Instead of referencing this.colorOpen and this.colorClosed what you need to use is:

  this.className = openColorClass;

0
 
LVL 16

Accepted Solution

by:
gnoon earned 2000 total points
ID: 20082623
Try this in the web page

<script type="text/javascript">

// PUBLIC: Set open/ closing css name of switch header. Optional
switchcontent.prototype.setCss=function(openCss, closeCss){
      this.cssOpen=openCss
      this.cssClosed=closeCss
}
// PRIVATE: toggle header css style
switchcontent.prototype.togglecss=function(header, css){
      if (typeof this.cssOpen!="undefined")
            header.className=css
}
// PRIVATE: overrides old implement
switchcontent.prototype.oldcontractcontentimp=switchcontent.prototype.contractcontent;
switchcontent.prototype.oldexpandcontentimp=switchcontent.prototype.expandcontent;
switchcontent.prototype.contractcontent=function(header){
      this.oldcontractcontentimp(header)
      this.togglecss(header, this.cssClosed)
}
switchcontent.prototype.expandcontent=function(header){
      this.oldexpandcontentimp(header)
      this.togglecss(header, this.cssOpen)
}

// change code below to your adapt with your page

var bobexample=new switchcontent("switchgroup1", "div")
bobexample.setStatus('<img src="open.png" /> ', '<img src="close.png" /> ')
bobexample.setCss('CssOpen', 'CssClose')
bobexample.setPersist(true)
bobexample.collapsePrevious(true) //Only one content open at any given time
bobexample.init()

</script>

Warning: changing the whole style of element may cause improper working
0
 

Author Comment

by:ipavlo
ID: 20085233
Thank you so much  - this is awesome :-)
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question