I have been trying to build a multi-level vertical tabs with hidden content which gets visible by some jquery. It is working fine but with it has one problem.
Because of this code:
$(this).nextUntil("li.tabsclose").slideToggle();
When page loads for the first time, all the parent categories are shown but if you click on a category with some sub-categories, jquery hides everything until the next item with "tabsclose" class. Which is a problem because I have some Parent categories towards the end of the list.
Here is the jsfiddle: https://jsfiddle.net/ebf6cdpe/
Thank you very much for your help in advance!
SOLUTION:
After spending some considerable time on searching web, I have used if/else statement to be able to close parent tabs on re-click.
https://jsfiddle.net/ebf6cdpe/5/
This particular piece is causing all the Parent categories without subcategories to be hidden:
$('.subtabs').not(this).nextUntil(".subtabs").slideUp();
If you remove that, all the Parents without subcategories won't disappear permanently. However, there is still an issue with them temporarily disappearing when opening the subcategory.
You need to have a class that is applied to all your parents that you can use as a selector in this loop:
$(this).nextUntil("li.tabsclose").slideToggle();
I'm still not 100% sure this is the exact functionality you want, but here is an updated version:
https://jsfiddle.net/ebf6cdpe/1/
Whatever the case, you may be better off using nested lists for your subcategories. https://www.w3.org/wiki/HTML_lists
Related
Here's a link to my page:
http://2plygraphics.com/im-here/
I have custom select menus and form elements using the :before and :after pseudo tags. There is also a lot of javascript making things hide/show etc.
If you view the page in Chrome you will notice that on the first click of any select menu in the page, the contents of the menu get cut off at the bottom. Once you have clicked once, all menus work as designed. It also appears to be a compounding issue, in that, if a menu has 11 items it is cut off more than one with 2 items. Once the page is refreshed the issue happens again...
I have tried changing or removing line heights, padding, margins, the overflow method etc. Starting to lose perspective...any help would be appreciated.
OK, here is an image of it in action:
http://i59.tinypic.com/33ljm35.png
I have tested this in windows 7 using Chrome Version 33.0.1750.154 m
Update
Does anyone have any suggestions for working around this? I'm thinking maybe faking a click on one of the select menus to get it to "activate" after the page has loaded...
I had the same problem in Chrome/Win8.1 and i could solve that by removing the font-family setting on the select-element in my css. Without that everything was working like it should.
I am working on a pre-existing website, now this website need to work for partially visible people as well. The requirement is the Active Navigation menu Items should be highlighted on each active page.
The problem is that there is no id's for div and Ul/li tags for the navigation menu.
If there were any ID's i could have created a css and called those to selected. Also I can not modify any HTML code of any page.
Could you please suggest any way to make this work out.
Looking forward for your answer.
Regards,
S
The easiest solution may be looping through all <a>s and comparing window.location.href to the value of their href if you're able to modify the Javascript.
Something like this should work for you: http://jsfiddle.net/a7C8a/3/
I'm using the jQuery plugin Quicksand to list some documents for my users to access, I have several hundred documents so I only show a few of them from the beginning.
The list (ul) is built to show about 20 document titles at a time, and the rest is hidden. Like this. At the bottom of the list you have a link to Show more, and when you press it more titles are loaded. Instead of expanding the height of the list the parent div has the property overflow with value auto.
The list is built by a javascript, it loads the documents from a MySQL database and hides all documents but a specified number. When you press "Show more" ("Visa fler" in Swedish, as showed in the pictures) it reloads the documents and excludes some additional documents form the hide function.
The problem is this: When I press Show more it loads more titles but the list ignores overflow: auto and the list expands over the entire page, like this. After a second or so, when it has finished loading, the overflow-property is applied and everything is as it should be, but it doesn't look very good when loading.
Do you have any ideas how to solve this?
Do you need to know anything else?
Thanks in advance!
I found one solution. I added atomic: true, I lost some animation, but it doesn't flow outside of the parent div anymore.
From a quick look it seems that it might be do to plugin setting inline styles (width and height) on the container. You might want to override them after the transition ends, e.g.,
target.quicksand(source, {}, function () {
target.css('width', '');
target.css('height', '');
});
I have made a jQuery accordion menu but it doesn't seem to be acting in the default manner. Basically, when I click on a menu item the item opens as expected. However, when I click on a different menu item it also opens as expected but the first menu item remains open. The jQuery documentation states:
"An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that."
I promise it took very little effort to break this default functionality ;). Anyway, I have posted my JS, HTML and CSS on JSFiddle and am hoping someone can point me in the right direction. Other than opening and closing it works fine, even though it doesn't appear to on JSFiddle. Here's the link: JSFiddle Post
Thanks in advance.
Ken
Can You Organize your output page in the way that I at least can see the menu clearly. Its difficult to access the them in your html
I'm not entirely sure how to post this question, but here goes...
I have a web app that has a list of sortable items. I sort them ajax style using Sortable. That works like a charm. I can drag and drop the items till my heart is content.
At the same time, there is a button that allows for the creation of new items on my list. This is also ajaxified and works for the most part. The new item appears on my list anyway, and firebug shows that the code being rendered is exactly the same as the other list items. Oh and it is contained in the correct list.
The problem is that the new item is not draggable/sortable/whatever. I can't do anything with it unless I refresh the page. Any ideas why this is the case or how I can get around it? I'd really like to solve this.
I tried to paste code in here, but couldn't quite make it work, so I went with pastie. Anyway, here is the code for a page with 2 sortable items. This is a fresh load and everything works as expected.
http://pastie.org/432585
In this one, I have clicked the button that creates a new section, but not refreshed. So the first 2 sections are DnD-able, but the new one is not...
http://pastie.org/432591
I'm using ruby and rails to do the ajaxing here and admittedly, I'm not very familiar with how it should work. But I believe this behavior comes from prototype.js and maybe dragdrop.js.
On completion of the ajax call that causes the new element to be injected into the page, the new element, I imagine, needs to be bound to the DOM, and delared as a Sortable.
Would be great if you could show us some code, or at least let us know which library(s) you are using for ajax and Sortable elements.