I'm using a zencart with a css flyout header menu and I also want use the jquery slider widget as one of the options in this menu but when I put it in there the little sliders don't appear correctly, it's like they've collapsed.
I've put together a fiddle which although it has all the code doesn't seem to be working, it's hopefully something stupid I'm not doing coz all the code is there as far as I can see.
can anyone help me out please
http://jsfiddle.net/4VU8D/
EDIT: here's a slightly better but still not working fiddle
You've only included the jQuery Framework, but not the jQuery UI.
Related
First of all, it's my first post and I'm still kinda newbie but I'm keen on learning more and more.
I checked out this before I decided to ask here because I kinda got stucked.
So here is example of the code:
http://www.bootply.com/C1Xu5M0RnP
It works how I wanted it to do so but if I put it into my code and trying to test it locally I got some problems. Switching tabs by clicking on tabs work perfect, but when I try to click on the link which should move me to another tab it doesn't do so. I see the link + '#profile' or '#home' but tab and content don't show.
I don't have any errors at console debug. I included scripts in a way, a lot of people suggested here - jquery first, bootstrap after.
The question is what am I doing wrong or what libraries are preloaded on bootply?
I would be really grateful for any advices.
Seems like it works now. The problem was that I was using my own script first, then I was loading jquery and bootstrap.
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 am having an issue with foundation 4 section tabs. I copy pasted the example code to my local and tested it and it doesnt show up.
I also modified it and added some height elements to make it display properly but still I can only view on tab and clicking it doesnt actually open up the content.
I have included jquery foundation.css and foundation.min.js and also zepto.js without any luck.
If anyone could tell me what i might be doing wrong or if there is an issue with the framework that would be great.
Thanks.
Please close this.
I fixed the problem by adding a foundation at document load. :)
Cheers hope this helps someone in need.
$(document).foundation(); Thats the code I added right at the start of document.ready.
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/
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/