Search jQuery

jQuery Forum

Not displaying all the items

in Using jQuery UI • 6 years ago

I have an area (fly-out) which is closed by default, when the use clicks the menu icon there is a fly-out and the accordion should show all items and take up the div space, but it seems to be missing one, when I click the third item, it replaces it and shows the missing one, I have tried lots of suggestions with regards to refresh but none have worked - here is the code and the CSS

<asp:Content ID="dashboardcontent" ContentPlaceHolderID="sitecontent" runat="server">
    <div>
        <div id="mastersidenav" class="sidenav">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
 
            <div id="accordion">
                    <h3 class="accordionheader">HOME</h3>
                    <h3 class="accordionheader">ASSETS</h3>
                    <h3 class="accordionheader">REPORTS</h3>
                    <h3 class="accordionheader">SETTINGS</h3>
                </div>
            </div>
       <div class="mainheader">
            <span onclick="openNav()" class="menuicon" onmouseover="this.style.cursor='pointer'"></span>
        </div>
    </div>
 
 
    <script>
        $(function () {
            $("#accordion").accordion({
                fillSpace: true,
                autoHeight: 'content',
                icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' }
            });
        });
 
        $(window).resize(function () {
            $("#accordion").accordion("refresh");
        });
    </script>
 
 
</asp:Content>

.sidenav {
	height: calc(100% - 95px);
	width: 0; /* - change this with JavaScript */
	position: fixed;
	z-index: 1; /* Stay on top */
	top: 95px;
	left: 0;
	background-color: #085394;
	overflow-x: hidden;
	padding-top: 30px;
	transition: 0.9s;
}
 
.menuicon {
	background: url(../images/menu_icon.png) no-repeat;
	width: 75px;
	height: 75px;
	position: absolute;
	top: 110px;
	left: 15px;
	display: block;
}
 
.sidenav a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 25px;
	color: #ffffff;
	display: block;
	transition: 0.9s;
}
 
	.sidenav a:hover {
		color: black;
	}
 
.sidenav .closebtn {
	position: absolute;
	top: 0;
	right: 10px;
	font-size: 36px;
}

here is the JS

function openNav() {
    document.getElementById("mastersidenav").style.width = "250px";
    //    document.getElementById("main").style.marginLeft = "250px";
}
 
function closeNav() {
    document.getElementById("mastersidenav").style.width = "0";
    //    document.getElementById("main").style.marginLeft = "0";
}

Attachments

Menu.png
Size : 5.95 KB Downloads : 255 Download

Replies(16)

jakecigar

Re: Not displaying all the items

6 years ago

#1 Please post black and white instead of the pastel colors.

#2 Your accordion is missing the leaves, and therefor is invalid.

<div id="accordion">
<h3 class="accordionheader">HOME</h3><div> nothing here </div>
<h3 class="accordionheader">ASSETS</h3><div> nothing here </div>
<h3 class="accordionheader">REPORTS</h3><div> nothing here </div>
<h3 class="accordionheader">SETTINGS</h3><div> nothing here </div>
</div>

#3 when I remove fillSpace: true, it works much better.

https://jsfiddle.net/jakecigar/pht58oca/ <--

If you want fillSpace you need more CSS around the accordion, so it can know how much space to fill.

JΛ̊KE

Darren Ro..

Re: Not displaying all the items

6 years ago

Thanks, I had tried with more items but was trying to scale back, if you add 3 items to each header it starts behaving funny, is it capable of having a header and say n number of sub items?

Point noted on the colour

jakecigar

Re: Not displaying all the items

6 years ago

Accordions can have any number of header-content pairs. It just get long when there are many of them and they don’t get a chance to scroll off the page.

Can you explain what "if you add 3 items to each header" means? Each header can have one piece of content.

Update the fiddle to show me what you mean.

JΛ̊KE

Darren Ro..

Re: Not displaying all the items

6 years ago

Hi Jake,

I have managed to get it exactly how I want by just referencing the accordian.css file then overriding it.

Thanks again

Darren Ro..

Re: Not displaying all the items

6 years ago

One thing I would like to ask though is at the moment I am doing this, however when the user resizes the window the icons go, is there a way to recall the function assigned to the accordion each time it is refreshed?

           create: function (e, ui) {
            $(this).find(".ui-accordion-header").each(function (i, element) {
                var iconClass = "";
                if ($(element).text() === "HOME") {
                    iconClass = "home-icon";
                }
                if ($(element).text() === "ASSETS") {
                    iconClass = "test-icon";
                }
                $(element).find("span").addClass(iconClass);
            });
        }
 
    });
});
 
$(window).resize(function () {
    $("#accordion").accordion("refresh");
});

jakecigar

Re: Re: Not displaying all the items

6 years ago

Update the fiddle to show me what you mean.

JΛ̊KE

Darren Ro..

Re: Not displaying all the items

6 years ago

Hi Jake,

It would not let me update yours, I created one

https://jsfiddle.net/rocky050371/vem03wyt/

I have 2 issues

I. When the screen refreshes or resizes it loses the icons.

2. How I add a linkable img + button which will act as a menu option to the content area, everytime I tried it started jumping around

Darren Ro..

Re: Not displaying all the items

6 years ago

Not sure how I reference

<script type="text/javascript" src="Scripts/jquery-3.1.1.min.js"></script>
 <script type="text/javascript" src="Scripts/jquery-ui-1.12.1.min.js"></script>