twitter bootstrap dynamically add dropdown - javascript

I'm implementing a user notification system. When the page is loaded an AJAX request is made and if notifications exist, they are rendered into a <ul> which is hidden but should show up if the notification item is clicked.
I have a couple of working dropdowns with Bootstrap on my page, so that's not the problem.
The loading and creating of the elements works fine. They appear in the DOM if i check with Firebug.
// this is in the top bar
<a id="notifications" href="/user/profile/notifications" data-toggle="notifications-alert">Benachrichtigungen</a>
// and this appended to the end of body
<ul id="notifications-alert" class="notifications dropdown-menu" style="display: none;">
<li class="event_new">[..]</li>
<li class="event_new">[..]</li>
</ul>
I also initialize the dropdown() when i append set the data-toggle attribute. Like this:
$notifications.addAttr('data.toggle', 'notifications-alert')
.dropdown();
I also tried with a manual trigger but still doesent work.
$notifications.addAttr('data.toggle', 'notifications-alert')
.click(function(e) { e.preventDefault(); $(this).dropdown('toggle'); })
.dropdown();
Any ideas why it is not working?
#EDIT: my mistake, solved. See my answer for details.

All examples in twitter bootstrap shows both the link [tag a] and the dropdown [tag ul] together with the same parent. Maybe the easy solution is that you should add the ul after the a instead of adding the ul in the end of the body $('a selector').after(ul)

Related

Not able to open sub menus in html

I am working on a HTML website. In Website menus are working properly on desktop screen. But In mobile version Parent menus are opening properly as a dropdown. but when I trying to open sub menus it is not opening. If I click on icon , it is redirecting to a page which is linked to parent menu.
I just want to open sub menu dropdown when I click on a icon. But Parent menu link should be there.
I am very new to javascript. Please help me to solve my problem.
Here is my html code
<nav class="navigation">
<ul>
<li> HOME
</li>
<li> <span>WHO WE ARE </span>
<i class="ion-ios-plus-empty visible-xs"></i>
<ul class="sub-nav">
<li>
Vision
</li>
</ul>
</li>
</ul>
</nav>
and hrere is my js
$('.sub-menu >a').on('click', function() {
if ($(window).width() <= 767) {
$('.sub-menu').removeClass('on');
$('.sub-menu> ul').slideUp('normal');
if ($(this).next().next('ul').is(':hidden') == true) {
$(this).parent('li').addClass('on');
$(this).next().next('ul').slideDown('normal');
}
}
});
please help
Your code is very messy, so first I'll answer the question generally: If you want an event to occur when clicking a link without the link actually opening, you must stop the event from firing. There are 3 ways to do that (I included a link in the bottom of my answer regarding which does what), here I chose e.preventDefault():
document.getElementById("myspeciallink").addEventListener("click", function(e) {
alert("A different action!");
e.preventDefault(); //return false / stopPropagation could've also worked here
});
I'm a link!
Regarding your code:
You're trying to bind an event to sub-menu, which doesn't exist in your code.
The sub-menu > a selector only applies to direct children, so for your selector and the following example code only example B would apply to the selector. Perhaps sub-menu a would be better suited here:
$(".sub-menu > a").click(() => alert("Clicked"))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sub-menu">
<li>
Example A
</li>
</ul>
<br/>
<ul class="sub-menu">
Example B (Which is what you did but not what you want)
</ul>
Animations based on screen size (a.k.a Responsive Web Design) shouldn't be done like this unless you don't have a choice, and you do. It is preferred you use CSS to achieve what you're trying to accomplish with transistions. I recommend reading more on this subject.
I highly recommend learning CSS, JS and HTML better in order to have a better understanding of what's going on and of good & bad practices.
See also:
What's the difference between event.stopPropagation and event.preventDefault?
Couple of things here.
First of all you apply jQuery code for element $('.sub-menu >a') which means that it will applay to all a elements which are direct children of .sub-menu element.
But you don't have element wih class .sub-menu. You should add it to direct parent of an a element to which it should be applied.
Secondly, if you don't want the a tag to redirect you, then you shiuld add event.preventDeault() where event is an event variable which you can get in .on() function like this $('.sub-menu >a').on('click', function(event) {...
Lastly, this code
$('.sub-menu').removeClass('on');
$('.sub-menu> ul').slideUp('normal');
if ($(this).next().next('ul').is(':hidden') == true) {
$(this).parent('li').addClass('on');
$(this).next().next('ul').slideDown('normal');
}
works that way that firstly it hides all dropdowns and then opens teh one you clicked. If it is desired behavior, then ignore this. But I don't think it is.
Why? Because right now when you click on visible dropdown a tag (the one that opens it) you would expect the dropdown to hide. And in your case it will hide and show again. But if you want it to work that way, then no problem. The code is correct.

Can't get JS to target specific li

I'm not a programmer. I can read and understand some code, and I can google for answers. But this one escapes me. I built a test page to try my hand at coding for mobile devices - http://www.stovebolt.com/testing2.html
At 800 pixels, the navigation stack on the left is hidden and replaced with a dropdown menu that uses a list structure with a hover function. This will work on mobile devices if the href for the parent li is #. However, you have to reload the page to get it to close the menu.
So I cast about for a solution and came across this: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly
I'm using his DoubleTapToGo javascript, and it works, but it applies to all the elements not just the parent li. According to his page you just need to use the following to only have the parent require a double tap:
$( '#nav li:has(ul)' ).doubleTapToGo();
I'm not using the id #nav. I'm using the class .mobile, so I replaced #nav with .moblie. But you have to double tap ALL the links, not just the dropdown.
I've tried negating the function, but that didn't work. I tried changing to li:hasClass() and created a new class for that one li. Didn't work. How can I get the doubleclick to only work on the parent li? The code li:has(ul) should work, because there's only one sublist. But it doesn't.
I can't help but think I'm missing something very simple. Here's the code on my page, which I copied directly from the source of his webpage:
<script>
$( function()
{
$( '.mobile li:hasClass('mobileParent')').DoubleTapToGo();
});
This is the html for the mobile list:
<div class="mobile" role="navigation">
<ul>
<li>Around the 'Bolt...
<ul>
<li>Home</li>
<li>Search</li>
<li>Discussion Forums</li>
<li>Gallery</li>
<li>Tech Tips</li>
<li>Links</li>
<li>Events</li>
<li>Swap Meet</li>
<li>FAQs</li>
<li>Features</li>
<li>Stovebolt Hoo-ya</li>
<li>Stovebolt Office</li>
</ul>
</li>
</ul>
</div>
Please try this
$( function()
{
$( '.mobile li.mobileParent').DoubleTapToGo();
});
But in you html there is no li with the class mobileParent. So $( '.mobile li.mobileParent').DoubleTapToGo(); wont work. Add that calss and then use this code.
This is how I solved the problem. I ripped out all the double-click stuff (since it was giving me errors), changed the link in the primary LI to "#" and added another LI to the dropdown menu to close it:
<li>Around the 'Bolt...
<ul>
<li>Close this Menu</li>
That just left one problem. Apparently Apple tries to emulate the hover event, so it requires a double click on dropdown menu items. So I added this script to over come that: http://cssmenumaker.com/blog/solving-the-double-tap-issue-on-ios-devices

slideToggle() is not sliding my list item

I want to have the list item with the id "#greenHome" slide in when the list item with the id "#home" is being hovered over. It is not working for me and I can't figure out why.
HTML:
<ul id="nav_animations">
<li id="greenHome"></li>
</ul>
<ul id="navlist">
<li id="home">Home</li>
</ul>
JavaScript:
$('#home').hover(function(){
('#greenHome').slideToggle('slow');
});
CSS:
#greenHome {
display:none;
}
https://jsfiddle.net/JoshuaHurlburt/etehjeaq/
PS: This is not my full code, I can post it though if need be.
First of all, you have missed the jQuery function name $ from your call to slideToggle. It's correctly like this:
$('#greenHome').slideToggle('slow');
Also, you have completely messed up the jsFiddle, I've corrected it and at the link below you can see the updated, working sample. In the fiddle you shouldn't use <head> tag, and you should select inclusion of jQuery at the left settings panel.
Also, I've changed the order of your lists for demo purposes, because hover event was firing multiple times when the hovered item was pushed down by the toggling element above it.
And finally as others have pointed out in the comments, I filled the text "Green home" to the corresponding <li> because if it remained empty you of course wouldn't see any effect.
Working Demo

Im looking to create a specific drop down menu (example included)

I'm looking to understand how to code drop down navigation bar similar to the reference site included below. Their solution works perfectly between pc/mac/iphone and android and it would be awesome if someone can show me the same. If you are looking at this site via your pc or mac adjust the size of the browser to activate the drop down version of the navigation. Thanks alot!
http://treadsack.com/
p.s Im new to asking these questions online so if you need me to be more specific please comment and I will comment back.
Thanks again!
Just use bootstrap, http://getbootstrap.com Its allready cross browser compliant, and uses that type of menu
There are a number of ways to show the dropdown like that, assuming that's what you're asking. In this case, observe what they've done using the browser's tools.
In Chrome:
Minimize the browser, so you can see the dropdown style of the page.
Click on the "NAV" link to see the dropdown menu.
Right-click on any of those menu items, and click Inspect Element.
You'll see the Developer Tools open up below, showing the HTML. You'll notice that the element that you wanted to inspect, is a <a> inside <li> inside <ul> inside a <div> of class dropdown
4.1 When the Nav is closed, this div is as below:
<div class="dropdown" id="nav-dropdown" style="display: none;">
<!-- bunch of ul, li elements follow here -->
</div>
Now click on the Nav link, and observe the change in HTML of that div alone. You'll notice it as below:
<div class="dropdown" id="nav-dropdown" style="display: block;">
<!-- bunch of ul, li elements follow here -->
</div>
They just changed the display property of the div, from none to block materializing all those menu items.
And that can be done using jquery as below:
$( "#nav-trigger" ).click(function() {
$('#dropdown').css("display", "block");
});
nav-trigger is the id of the NAV element.
Update:
The HTML is structured like this:
<div class="main-container">
<span class="navigation" id="nav-trigger"/>
<div class="dropdown" display="none">
<!-- menu items as <ul><li> here -->
</div>
</div>
That's the main structure (names changed). Initially, only the <span> element is visible. When this span element is clicked, the div below it is displayed. So we associate a click handler to the span element in jQuery, as I've shown above. That's how they are "connected"
The animation:
Again, there are a lot of ways to do that. There are jQuery plugins that you can directly use in your project (easiest). Alternatively, you can use jQuery.slideDown() and jQuery.slideUp() to toggle the menu items down or up. Links: slideUp() and slideDown()
You'll notice that there is a sequence to the animation. Not all menu items are dropped down at once.
$( "#nav-trigger" ).click(function() {
var menuitems = $("#dropdown").children(); //since the items are hierarchically , children of the dropdown div.
for(var i=0; i<6; i++){
menuitems.eq(i).slideDown(200); //200 is the speed.
}
});
That's a very crude code, but it gives you the picture. Hope that helps.
Basically, You can make sites mobile friendly by using percentages instead of set widths and heights... Typically developers will make separate styling sheets depending on device resolution... so at different resolutions content will scale accordingly.
see this example
This way you can control different styling so it displays correctly

Hide several divs, show 1 by default, and switch (show/hide) between them based on link click?

I know the show/hide thing has been covered to death on stack, but I just can't find a solution that works for me, sorry. I've tried several JS/jQuery solutions that I found and can't quite get one to behave the way I'd like.
I have many divs that are very similar in content (content changes slightly based on version selected), and all have the exact same style.
Desired behavior
I'd like one div to show by default with all others hidden. Then, based on a link click, a different version div is displayed and all other content divs are hidden.
Basic HTML
<div class="container">
<h1>Header</h1>
<p>Basic info about page</p>
<ul>
<li>Version 1</li>
<li>Version 2</li>
// More links to other divs
</ul>
<div class="content" id="ver1"> // I'd like this div to be the default
Content here // when the page loads. All other divs
</div> // are hidden until a link is clicked.
<div class="content" id="ver2">
Content here
</div>
// More content divs
</div>
I'll have up to a dozen different versions of these content divs.
JS or jQuery is fine, but jQuery is preferred because I'll probably add some kind of show/hide effect. I don't care that greatly about the naming structure of the divs or links.
$("div.containter ul li").each(function(){
$(this).onclick(function(){
$("div.content").hide();
$("div" + $(this).attr("href")).show();
});
});
Wrap that in a $(document).ready or whereever and you should be good to go my friend. Learn the code, so that in the future, you are gosu.
How about adding some more RESTful behaviour.
$(function(){
// get the location hash
var hash = window.location.hash;
// hide all
$('div.content').hide();
if(hash){
// show the div if hash exist
$(hash).show();
}else{
// show default
$("#ver1").show();
}
$("div.containter ul li a").click(function(){
// hide all
$('div.content').hide();
$($(this).attr("href")).show();
});
});
I suggest you to use on() jquery function with selector. And also you can show the default div using css. Here is the complete code.

Categories

Resources