Databases
StackOverflow2013
Postsdbo
POJQuery UI Different CSS for Tab Page and Progress Bar on Same Page
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery UI Different CSS for Tab Page and Progress Bar on Same Page
    text
    copied!<p>I am trying to add a JQueryUI Progress Bar to a page that already has a JQueryUI Tab styled on it. The look of the tab pane and tabs has been already set via the CSS. One of the CSS values <strong>.ui-widget-header</strong> is also used for the Progress Bar. </p> <p>How can I make the Progress Bar use a different definition of this CSS style than the one already defined to get teh Tabs to look correctly?</p> <p>It is specifically the border property I think I need to modify in the .ui-widget-header style. It seems like I could do something with CSS for ID specific tags but I'm not sure how to accomplish this.</p> <p>Below is an example HTML file that shows the issue. I want the tabs styled the way they are currently, but want to have the Progress Bar styled differently (full border, solid progress meter).</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /&gt; &lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" /&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"&gt;&lt;/script&gt; &lt;title&gt;Test&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;script type="text/javascript" language="javascript"&gt; &lt;!-- //Tabs $(function(){ $('#tabs').tabs(); $("#progressbar").progressbar({ value: 0 }); setTimeout(updateProgress, 500); }); function updateProgress() { var progress; progress = $("#progressbar") .progressbar("option","value"); if (progress &lt; 100) { $("#progressbar") .progressbar("option", "value", progress + 1); setTimeout(updateProgress, 500); } } // --&gt; &lt;/script&gt; &lt;style type="text/css"&gt; .ui-widget { font-family: Arial, sans-serif; font-size: 1.1em; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Arial, sans-serif; font-size: 1em; } .ui-widget-content { border: 1px solid #ffffff; background: #ffffff} .ui-widget-content a { color: #333333; } .ui-widget-header { border: 1px solid #FFFFFF; border-bottom:solid 1px #056B2E; background:none; font-weight:normal;} &lt;/style&gt; &lt;div id="bodycontent"&gt; &lt;!-- Tabs --&gt; &lt;div id="tabs"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#tabs-1"&gt;test 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tabs-2"&gt;test 2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="tabs-1"&gt; Test 1 Content &lt;/div&gt; &lt;div id="tabs-2"&gt; Test 2 Content &lt;/div&gt; &lt;/div&gt; &lt;br/&gt; &lt;br/&gt; &lt;div id="progressbar"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload