Here's a crude sample of what I'm dealing with: http://jsfiddle.net/dX2ux/1/
A client's in-house developed CMS dynamically creates menus using this HTML structure. It also comes with the jQuery script that is shown on the sample.
I want to edit the script so that it closes it's sibling's open menus before it toggles itself open. The show class is has to be toggled as well.
So far, I've come up with this: http://jsfiddle.net/dX2ux/2/
But if you play with it, it screws up when you click one of the sub menus.
Can anyone shed some light on how I might achieve the behavior I'm aiming for? Also, is this the best way to do it? Am I overthinking this?
Any help is appreciated. Thank you.
Not really sure if this is the "best" way per se, but with that kind of markup, this solution should work:
$('.toggle-menu').on('click',function(e){
e.preventDefault();
$(this).parent().siblings().children('.toggle-menu').removeClass('show').next().slideUp();
$(this).toggleClass('show').next().slideToggle();
});
Edited your fiddle to show the effect: http://jsfiddle.net/dX2ux/3/
Related
This is probably a very simple thing to do but its been so long since I've done anything web based I don't know where to start so thought I'd ask you helpful peoples in the hope someone might know of a good example somewhere online I can plunder for ideas.
I have a folder full of images, I want to create a html page that has a list of said images on the right and a number of panels/spaces those images can go on the left, users can then drag from the list into the panels and the images would be displayed. Users could then drag images off to remove them (a right click option would also be fine) or drag other images in to replace them.
I'm sure this kind of thing could be done in jquery but I've no clue where to start, anyone have any suggestions?
Thanks!
Are you looking for something like this? this will make it draggable in jquery. However this will be needed with plug-ins.
<script type="text/javascript">
$(function() {
$("Insert ID or CLASS").draggable();
});
</script>
However in order to prevent your draggable class or ID to be dragged everywhere you could use something like this:
$(function() { $( "ID OR CLASS" ).draggable({ containment: "window" }); });
Read the API https://api.jqueryui.com/draggable/#option-containment for more info.
This is how you can drop something in jquery:
$("ID OR CLASS").droppable();
I recommend you to use a toggle() on the classes when you dragg them to a div. So when you drop a class the image will be dropped instead of the div.
I hope this helped enough to give you a start with jquery. Although the question was very unclear and I hope you will edit the question to a bit more usefull one (So others can also benefit from it), I still wish you the best!
Having some trouble with something hoping someone may be able to help out.
Below is a link for tabs, and accordion (both work perfect separately)
Tabs
jsfiddle.net/31oftamq/6/
Accordion
jsfiddle.net/xLh6k5fm/2/
When I put the accordion in the content area for one of the tabs, the accordion does not appear whatsoever when I run it.
Anyone know what the issue could be? Help will be much appreciated.
Thank you! :)
Because you hide it with this:
$('.tabs-stage div').hide();
Change it to:
$('.tabs-stage div[id^=tab]').hide();
Check full code here: http://jsfiddle.net/31oftamq/9/
Hi Im using wordpress and i have a navigation.
I would like to use js or jq to toggle the visibility of the sub menu items when clicking on the parent item. I can do this with raw code but i dont know how to do this with wordpress menus.
Currently my wp_nav_menu is in a nav container in its own div.
Any help would be really appreciated. I need this to be totally dynamic.
I have found a plugin called Jin Menu and this seems to allow me to add onclick functions to each menu item but even then im not sure what to add...
Thanks folks
Without looking at your code it is hard to provide samples that you can use directly. jQuery can be used to accomplish this so no worries there. The simplest way without delving deep into advance jQuery selectors (I'm not sure of your background knowledge) is to give each navigation link an id and then use jQuery to hide the div. If you would provide your navigation code, or a link to your page, we could help you more.
$( "#idOfParent" ).on( "click", function () {
$(this).children().toggleClass("HideNav").toggleClass("ShowName");
}
Here is a jfiddle with a working example (though not pretty). If you needed something different, let me know.
I want to have 4 boxes that can be clicked and pop out with text and can scroll.
Similar to the projects page here: http://www.visionslighting.com
However i would like it to be in html/javascript or similar instead of flash.
i have found this: http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm
which is exactly what i want only with images.
any help is greatly appreciated.
This is easily accomplished with the jquery-ui. They have a function called dialog that you can tell to be a modal(the box that floats on the screen).
I think you're looking for a javascript lightbox. Check out this one: http://defunkt.io/facebox/
You can find even more here: http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts
So I'm looking at slickdeals.net and amazon.com, and I found something very intriguing. It's basic for most of you guys out there, but it's new to me. For slickdeals.net, when you click login, a login box pops up like so. Also for Amazon.com, when you hover over the left navigational menus, a new menu pops up! I think it's JavaScript, but how does this work? How can I do something like that?
Update:
Thanks for the answers! One more question about Amazon's website. I've been looking at it with firebug. So how are they making their sub menu appear? I was expecting the mouseover to change the sub menu from display:none; to display: block; but this isn't the case. What is it change on the mouseover to make it appear?
Looks like a combination of CSS and Javascript. Look into JQuery and JQuery UI. It's easy to use and has things that make sites like theses easier to develop.
Look into the UI stuff for the menus and drop-downs and things like that. That JQuery UI is really cool and lets you make really dynamic web pages. They have examples on the JQuery UI site that you can look at.
You can view source to find these answers for yourself. It appears slickdeals.net is using jQuery for its javascript effects.
http://jquery.com/