Solved

jquery menu loads unnecessary css files

Posted on 2009-06-30
2
674 Views
Last Modified: 2012-05-07
i'am trying to use the Jquery accordion  (in a .aspx page)

however, when I run the page it tries to fetch all sorts of unnecessary css files.

please see the screen shot, plus i have attached the related
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
 
</title><link type="text/css" href="/SageEMSWeb/App_Themes/SageEMS/layout.css" rel="stylesheet" /><link type="text/css" href="/SageEMSWeb/App_Themes/SageEMS/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="/SageEMSWeb/script/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="/SageEMSWeb/script/jquery-ui-1.7.2.custom.min.js"></script> 
		<script type="text/javascript" src="/SageEMSWeb/script/ddaccordion.js"></script> 
		
 
<script type="text/javascript"> 
 
 
    ddaccordion.init({
        headerclass: "expandable", //Shared CSS class name of headers group that are expandable
        contentclass: "categoryitems", //Shared CSS class name of contents group
        revealtype: "click", //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: false, //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: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
        togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
        animatespeed: "fast", //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>
 
<style type="text/css"> 
 
.arrowlistmenu{
width: 180px; /*width of accordion menu*/
}
 
.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}
 
.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(titlebar-active.png);
}
 
.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
 
.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
 
.arrowlistmenu ul li a{
color: #A70303;
background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
 
.arrowlistmenu ul li a:visited{
color: #A70303;
}
 
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}
 
</style>
    
 
    <link type="text/css" href="/SageEMSWeb/App_Themes/SageEMS/demos.css" rel="stylesheet" />
<link href="../App_Themes/SageEMS/calendar.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/SageEMS/layout.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/SageEMS/RadControls.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/SageEMS/SQLReports.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/SageEMS/Tabs.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/SageEMS/themes/base/ui.accordion.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/SageEMS/themes/base/ui.all.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/SageEMS/themes/base/ui.base.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/SageEMS/themes/base/ui.core.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/SageEMS/themes/base/ui.theme.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/SageEMS/themes/ui-lightness/jquery-ui-1.7.2.custom.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/SageEMS/themes/ui-lightness/ui.accordion.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/SageEMS/themes/ui-lightness/ui.all.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/SageEMS/themes/ui-lightness/ui.base.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/SageEMS/themes/ui-lightness/ui.core.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/SageEMS/themes/ui-lightness/ui.datepicker.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/SageEMS/themes/ui-lightness/ui.dialog.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/SageEMS/themes/ui-lightness/ui.progressbar.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/SageEMS/themes/ui-lightness/ui.resizable.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/SageEMS/themes/ui-lightness/ui.slider.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/SageEMS/themes/ui-lightness/ui.tabs.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/SageEMS/themes/ui-lightness/ui.theme.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/SageEMS/ui-lightness/jquery-ui-1.7.2.custom.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/SageEMS/viewer.css" type="text/css" rel="stylesheet" /></head>
<body >
    <form name="aspnetForm" method="post" action="TestTopMenu.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkQPNftyMeMcEYagk+dhbMSVXy37w=" />
</div>
 
<script type="text/javascript"> 
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>
 
 
<div>
 
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLuyPp2AryA3MMDAq3X+L4NtlTBm1KsbAWFgJLmagX5HbRX3QE=" />
</div>
    <div id="pmpContainer">
        <div id="pmpTopMenuContainer">
            
 
<div id="gtmInnerContainer">
    <div id="gtmLogoAndVersion">
        <div id="gtmLogo">
            <!--<img id="ctl00_ucTopMenu_imgLogo" src="" style="border-width:0px;" />-->
            <span id="ctl00_ucTopMenu_lblEmsLogo">EMS Logo</span>
        </div>
        <div id="gtmVersion">
            <span id="ctl00_ucTopMenu_lblVersion">Version 1.0</span>
        </div>
    </div>
    <div id="gtmMenuOptions">
        <ul id="ulTopMenuList">
            <li>
                <a id="ctl00_ucTopMenu_hlHome" href="../UserControls/#">Home</a>
            </li>
            <li>
                <a id="ctl00_ucTopMenu_hlHistory" href="../UserControls/#">History</a>
            </li>
            <li>
                <a id="ctl00_ucTopMenu_hlSecurity" href="../UserControls/#">Security</a>
            </li>
            <li>
                <a id="ctl00_ucTopMenu_hlOptions" href="../UserControls/#">Options</a>
            </li>
            <li>
                <a id="ctl00_ucTopMenu_hlLink" href="../UserControls/#">Link</a>
            </li>
            <li>
                <a id="ctl00_ucTopMenu_hlHelp" href="../UserControls/#">Help</a>
            </li>
            <li>
                <a id="ctl00_ucTopMenu_hlAbout" href="../UserControls/#">About</a>
            </li>
        </ul>
    </div>
    <div id="gtmEnvironmentSearchOptions">
        <div id="gtmEnvironment">
            <span id="ctl00_ucTopMenu_lblEnvironment">Environment:</span>
        </div>
        <div id="gtmSearchBox">
            <input name="ctl00$ucTopMenu$tbSearch" type="text" id="ctl00_ucTopMenu_tbSearch" class="tbSearchBox" />
        </div>
        <div id="gtmSearchButton">
            <a id="ctl00_ucTopMenu_lbSearchButton" href="javascript:__doPostBack('ctl00$ucTopMenu$lbSearchButton','')">Search</a>
        </div>
    </div>
</div>
 
        </div>
        <div id="pmpLowerContentContainer">
            <div id="pmpSideMenuContainer">
                <div id="ctl00_pnlSideMenuAccordion1">
	
                    
 
 
 
 
<div class="arrowlistmenu">
    <h3 class="menuheader expandable">
        CSS Library</h3>
    <ul class="categoryitems">
        <li><a href="/SageEMSWeb/Pages/TestPages/TestAcc1.aspx">NMI</a></li>
        <li><a href="/SageEMSWeb/Pages/TestPages/TestAcc2.aspx">Meter</a></li>
        
    </ul>
    <h3 class="menuheader expandable">
        CSS Drive</h3>
    <ul class="categoryitems">
        <li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
        <li><a href="http://www.cssdrive.com/index.php/menudesigns/" class="subexpandable">Menu
            Gallery</a>
            <ul class="subcategoryitems" style="margin-left: 15px">
                <li><a href="http://www.cssdrive.com/index.php/main/category/C34/">Blue Color</a></li>
                <li><a href="http://www.cssdrive.com/index.php/main/category/C36/">Green Color</a></li>
                <li><a href="http://www.cssdrive.com/index.php/main/category/C37/">Orange Color</a></li>
                <li><a href="http://www.cssdrive.com/index.php/main/category/C33/">Red Color</a></li>
                <li><a href="http://www.cssdrive.com/index.php/main/category/C38/">Brown Color</a></li>
            </ul>
        </li>
        <li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li>
        <li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li>
        <li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li>
        <li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li>
    </ul>
    <h3 class="menuheader expandable">
        JavaScript Kit</h3>
    <ul class="categoryitems">
        <li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a></li>
        <li><a href="http://www.javascriptkit.com/javatutors/">JavaScript tutorials</a></li>
        <li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
        <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
        <li><a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a></li>
    </ul>
    <h3 class="menuheader" style="cursor: default">
        FeedBack</h3>
    <div>
        Regular contents here. Header does not expand or contact.
    </div>
</div>
 
                
</div>
                
            </div>
            <!-- End demo -->
            <div id="pmpContentContainer">
                
    Lorem ipsum dolor sit amet, fermentum urna, phasellus feugiat orci accumsan nullam
    purus ipsum. Volutpat risus donec eget urna dolor. Neque quis porta euismod a, hendrerit
    dui, ullamcorper sodales maecenas erat nec. Urna a posuere luctus, turpis pulvinar
    volutpat sodales venenatis, posuere eget in rutrum sit, dolor id a iaculis, ipsum
    vitae velit venenatis diam ut cras. Wisi lacinia, pede gravida nascetur sollicitudin
    tempus sem aut, in praesent veniam velit. In scelerisque molestie commodo ut tempore,
    ac ut nonummy eget quo, etiam eget suspendisse. Aliquet quis iaculis, sollicitudin
    rhoncus justo, orci quisque amet, habitasse vel duis ut auctor sed, ante dolor viverra
    a convallis ac et. Sapien leo, vivamus nulla etiam adipiscing eget augue, ultrices
    ac tincidunt euismod mi sed, ante morbi. Dolor vitae. Nec semper congue nullam tristique,
    imperdiet diam phasellus dolore ultricies. Nulla aptent, a nisl neque adipiscing
    ut aliquet, magna id interdum mattis ac ea sed, et varius facilisi a, venenatis
    rutrum ullamcorper wisi est platea qui. Varius ante elementum, risus scelerisque
    est eget quis, et et pretium justo sit. Nec consequat wisi at tellus iaculis, est
    diam, mattis nulla sed leo venenatis nec donec. Tincidunt faucibus donec voluptate.
    Consectetuer placerat tristique, lacus mauris justo magna aenean dolor. Ultricies
    proident sed nibh justo velit purus, a eu, elit sem porttitor convallis ligula luctus
    primis, etiam at potenti in wisi hendrerit. Neque adipisci magna lacus fringilla
    wisi, amet sed magna, mus vitae nullam in, eros erat in luctus luctus amet nonummy.
    Praesent dolor tellus at, neque egestas aliquam ante wisi per aenean, nam odio porta.
    Sit velit erat, diam duis eu at dictumst auctor, porttitor cras interdum. Velit
    metus, ante purus pulvinar in pellentesque pellentesque, vulputate ante ipsum sit,
    elit pharetra metus non eros vitae nec, in tempor nullam. Etiam donec nec purus
    dolor, non tristique nec, ipsum felis a ridiculus, quis metus est sit pellentesque
    turpis morbi, architecto viverra nec sagittis. Dui aliquam vel. Mi aenean dictum
    leo sit nulla, est suscipit mauris neque nec, erat a ea bibendum, ante quis. Ultrices
    magna lectus, lacus totam mattis, diam diam id interdum aliquet. Nullam sed auctor.
    Condimentum faucibus fames tortor amet viverra, elementum vitae fringilla vehicula
    laoreet rutrum. Tellus et elementum, tincidunt lectus ac eget in felis enim, sed
    vestibulum lectus. Condimentum rutrum ac erat et eget pellentesque, justo id massa,
    dolores quis cursus eget nunc, est vitae erat cras. Elementum iaculis eleifend nulla
    laoreet, nisl cum.
 
            </div>
        </div>
    </div>
 
    <script type="text/javascript">
        $(function() {
            $("#accordion").accordion({
                fillSpace: false
            });
            $("#accordion").accordion({
                collapsible: true
            });
        });
    </script>
 
    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
 
            accordionHeight = $("#accordionResizer").height(); // Get height
            mHeight = accordionHeight;
            $(".ui-accordion-content").height(mHeight);  // Set both to equal heights
        });
        
       
    </script>
 
    <script type="text/javascript" language="javascript">
 
 
        $(window).resize(function() {
            accordionHeight = $("#accordionResizer").height(); // Get height
 
            mHeight = accordionHeight - 50;
            $(".ui-accordion-content").height(mHeight);  // Set both to equal heights
            //alert("Stop it!");
 
        });
 
         
    </script>
 
    </form>
</body>
</html>

Open in new window

sample.jpg
0
Comment
Question by:manivineet
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 

Author Comment

by:manivineet
ID: 24751701
also , there is no file called ui.progressbar and no reference to it in my files (i searched the whole solution), so where is it being generated from??
0
 
LVL 19

Accepted Solution

by:
Albert Van Halen earned 500 total points
ID: 24754242
ui.all.css imports the theme and base css files
the base css file imports several css files like ui.core, ui.tabs, etc.

Just alter the files and strip out the one you don't need.

You're using asp.net as well.
Remove the files you don't need from the App_Themes folder if you can't find imports in the css files.

NB depending on what's in your custom css, some files may be needed...
ui.all.css
 
@import "ui.base.css";
@import "ui.theme.css";
 
 
ui.base.css
 
@import url("ui.core.css");
@import url("ui.accordion.css");
@import url("ui.datepicker.css");
@import url("ui.dialog.css");
@import url("ui.progressbar.css");
@import url("ui.resizable.css");
@import url("ui.slider.css");
@import url("ui.tabs.css");

Open in new window

0

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

738 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