I use bootstrap tabs
http://getbootstrap.com/javascript/#tabs
and I create hide button like this
<li role="presentation"> Options <span onclick="$('#tab_6').hide();" class="tab_hide_btn">X</span></li>
If I clicking the hide span, tab is opened and hidden at the same time, because both onclick action are on the same layer
You can add a listner in your Javascript to hide tab:
$('li a[role="tab"] span').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$(this).parents('li').hide();
});
Moreover Bootstrap provides an helper class to display a close button, so your html could be:
<li role="presentation">
<a href="#tab_content_6" id="tab_6" aria-controls="tab_content_6" role="tab" data-toggle="tab">
Options
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</a>
</li>
Try doing something like this in a <script> tag:
$('span').on('click', function(e) {
$(this).parents('li').hide();
});
jsbin: http://jsbin.com/pekoduwusi/edit?html,js,output
I've updated jsbin with the functionality you're looking for. Its quick and dirty but does the trick. The concept is you want to get the href of the parent span then find the content with that id striping away the # character. Then, hide that content.
jsbin: http://jsbin.com/cutiwibora/edit?html,js,output
Related
I have a bootstrap list-group-item with a badge as follows:
<a class="list-group-item list-group-item-action" href="#" revision="211147" id="commit0">
<span class="badge collapsed" id="badge0" data-toggle="collapse" data-target="#ul0" >
changed files:1
</span>
<ul class="list-group changed-files-list collapse" id="ul0" aria-expanded="false" style="height: 0px;">
<li class="list-group-item changed-file">
release.groovy
</li>
</ul>
</a>
It contains a collapsed ul that is targeted by the badge.
At the same time, when clicked, the a element is selected(as it is part of a list-group with multiple selection possible).
I try to insert this bit of code:
$('.badge').on('click', function(e){
//$('#'+this.id).click();
e.stopPropagation();
});
so that when clicking on the badge the a element is not selected.
If I use this code the ul element is not being shown. I guess bootstrap uses the on click function and so it has something to do with my function overriding the bootstrap one.
How can I stop propagation while keeping the collapse behavior?
I found the solution by using bootstrap's collapse function:
$('.badge').click( function(e){
$('#ul'+this.id.substring(5)).collapse("toggle");
e.stopPropagation();
});
I have a side-menu on my bootstrap webpage which is open by default.
If the screen is too small there is a button placed behind it to open the menu again.
When a user clicks on a link I would like the menu to close automatically.
The button I already have opens the menu perfectly, but I have no way of closing it?
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"><img src="/content/img/AAA.png" width="27px" />Menu</li>
<li data-ng-hide="!authentication.isAuth">Welcome {{authentication.userName}}</li>
<li data-ng-hide="!authentication.isAuth">Page1</li>
<li data-ng-hide="!authentication.isAuth">Logout</li>
<li data-ng-hide="authentication.isAuth"><span class="glyphicon glyphicon-user"></span> Login</li>
<li data-ng-hide="authentication.isAuth"><span class="glyphicon glyphicon-log-in"></span> Sign Up</li>
</ul>
</div>
</div>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">
Menu
</a>
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
You could add in another event handler for the a elements.
$(".sidebar-nav li a").click(function() {
$("#wrapper").removeClass("toggled");
});
Here are a few things that you could do:
You could use hide/show with jQuery(I can see you are already using it).
Instead of makeing a "toggled" class, Bootstrap has a built in "hidden" class that you could use.
You could also toggle it's css "display" value.
You could use the "animate" class to slide the menu on and off the screen.
You could have a variable to store the state of the menu("true" for out, "false" for in), and change it when the toggle button is clicked.
I had a similar issue, and I placed a close button on the menu, and added a seperate click handler that would close the menu. The close button would then hide with the menu, leaving just the button to open the menu again.
Any ideas how to fix? This applies to the "Animations" and "Education" links. Click these should open a new page, but bootstrap.min just adds the .open class.
HTML
<li class="dropdown cases videos">
<a class="dropdown-toggle" href="videos.html" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="main-nav">Animations</a>
<ul class="dropdown-menu cases-body videos-drop">
<p style="padding-top:15px;" class="category-cases">Building a Park Out of Waste</p>
<p class="category-cases">Designing for Active Living</li>
<p class="category-cases">Designing Neighborhoods for People and Wildlife</p>
<p class="category-cases">The Edible City</li>
<p class="category-cases">Energy Efficient Home Landscapes</p>
<p class="category-cases">From Industrial Wasteland to Community Park</p>
<p class="category-cases">Infrastructure for All</p>
<p class="category-cases">Leveraging the Landscape to Manage Water</p>
<p class="category-cases">Revitalizing Communities with Parks</p>
<p class="category-cases">Urban Forests = Cleaner, Cooler Air</p>
</ul>
</li>
<li class="dropdown cases educations">
<a class="dropdown-toggle" href="education.html" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="main-nav">Education</a>
<ul style="padding-right:0;" class="dropdown-menu cases-body educations-drop">
<p style="padding-top:15px; " class="category-cases">Brownfield Restoration / Ecosystem Rehabilitation</p>
<p class="category-cases">Design for Active Living</p>
<p class="category-cases">Designing for Biodiversity</p>
<p class="category-cases">Energy Efficiency</p>
<p class="category-cases">Green Infrastructure</p>
<p class="category-cases">Incorporating Sustainable Materials</p>
<p class="category-cases">Transforming Transportation Infrastructure</p>
<p class="category-cases">Urban Agriculture</p>
<p class="category-cases">Urban Forestry</p>
<p class="category-cases">Urban Parks</p>
</ul>
</li>
I tried this script but it didnt work.
$('.dropdown .dropdown-toggle a').on('click', function(e) {
e.preventDefault();
window.location.href = $(this).attr('href');
})
Any ideas?
Site is here
Your selector is incorrect
You have:
$('.dropdown .dropdown-toggle a')
which is looking for a tags inside of .dropdown-toggle class elements, but it is actually your a tag that has the class.
You want:
$('.dropdown a.dropdown-toggle')
to select a elements with the .dropdown-toggle class
Just remove "data-toggle="dropdown"", But as say gwar9 in the comment that will prevent dropdown opening on mobile. So if you want that work for both you need detect if the device is mobile or not if it is not you erase the data toggle attribute.
I've created a jsfiddle to demonstrate how you could meet your requirements.
http://jsfiddle.net/DarrenS/pcav6v1g/
As you explained, you have a UX requirement to allow the following;
On Hover of the main menu, expand the menu to show sub menu items.
On Click of the main menu, follow the main menu link.
I explained that this is not default Bootstrap behaviour and the limitation of hover on touch devices.
To implement this solution I am using Modernizr to detect touch and then adding some custom jQuery to attach hover() and click() events to the menu.
I've implemented it this way because I still wanted to allow larger touch devices (such as a tablet) to access the sub menu. Which they wouldn't be able to do if you simply added a click event handler to the main menu.
//Non-Touch devices
//Hover expands menu (non default Bootstrap behaviour)
$('html.no-touch div.btn-group').hover(function(e) {
$(this).toggleClass('open');
});
//Non-Touch devices
//Click follows main link (non default Bootstrap behaviour)
$('html.no-touch div.btn-group a.dropdown-toggle').on('click', function(e) {
e.preventDefault();
window.location.href = $(this).attr('href');
})
//Touch devices
//Touch (click) expands menu (default Bootstrap behaviour)
//Touch devices
//Allow touch (click) to follows main link when menu open (non default Bootstrap behaviour)
$('html.touch div.btn-group.open a.dropdown-toggle').on('click', function(e) {
e.preventDefault();
window.location.href = $(this).attr('href');
})
.dropdown-menu{
margin-top: 0;
}
<div class="btn-group">
<a href="/page.html" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Google <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Facebook</li>
<li>Twitter</li>
<li>LinkedIn</li>
</ul>
</div>
I encountered this issue too, but realised that changing the behaviour would make the site harder to use for mobile users (who don't have a mouse to hover over controls). So, instead I inserted an "Overview" entry to the drop-down menu that links to the parent page. This makes the parent page clickable on all device types.
Details here: https://keasigmadelta.co.nz/blog/the-bootstrap-drop-down-menu-solution
The question has not yet been answered with a solution but it still not working for me.
The problem is that I want do disable links if a save button is not clicked (trying to override the onbeforeunload function).
My page structure looks like this :
<ul class="nav">
<li><a class="noclic" href="..."></a>
</li>
<li><a class="noclic" href="..."></a>
</li>
<li><a class="noclic" href="..."></a>
</li>
</ul>
<button type="button" class="save">Save</button>
<form>...</form>
<button type="button" class="save">Save</button>
And here's my jQuery:
$(document).ready(function () {
$('.noclic').on('click', function (e) {
//(I also display a confirm modal)
e.preventDefault();
var $this = $(this);
console.log("locked");
});
$('.save').click(function () {
$('.noclic').off('click');
console.log("unlocked");
});
});
When I click on the nav links, the console shows the "locked" message.
But when the button is clicked, the "unlocked" console shows quickly before vanishing, and the event.preventDefault is still running.
What am I doing wrong ?!
Two issues
1) Your buttons are "submit" buttons, thus, when you click, the page is reloaded. You have to change them to
<button type="button">
2) Your buttons have class "save" but you use $( "#save" ) instead of $( ".save" ) to reference them
I have a list of links generated dynamically, where the elements look like this:
<li id="nod1">
<span>
<a onclick="javascript:getNodeProperties('1');">Element 1</a>
</span>
</li>
<li id="nod2">
<span>
<a onclick="javascript:getNodeProperties('2');">Element 2</a>
</span>
</li>
getNodeProperties() doesn't do anything currently.
I'm trying to make a jquery (or js function), so that when I click an element, a button will appear on it's right side and the button from the previously clicked element will disappear.
I made this jsfiddle to better explain. How can I do it?
Check this, if you want to display button in right side of <a> tag,and if you click on other <a> tag, the all other button should be hidden
window.getNodeProperties = function(nod_id){
$("li").find(".buttonClass").remove();
$("<input type='button'class='buttonClass'>").appendTo("#nod"+nod_id);
}
Since you have told elements are dynamically added you have to use .on(), I would recommend to give a class name to those anchor tags.
$(document).on("click","a",function(){
$("input.active").remove();
$(this).html($(this).html() + "<input class='active' type='button' value='Click me'/>");
});
js
window.getNodeProperties = function(nod_id){
$("#nod"+nod_id).find("span").remove();
$("<input type='button'>").appendTo("#nod"+nod_id);
}
fiddle
You should try and avoid setting the event handlers in your HTML. You can setup an event delegate for the <a> elements so that i will handle the event even if you add more elements, without attaching new event handlers.
DEMO
$(".tree.well").on("click", "li span", function() {
var but = $("<button>");
but.text("New button");
$(this).parent().append(but);
$(this).remove();
});
HTML
<div class="tree well">
<ul>
<li id="nod1">
<span>
<a>Element 1</a>
</span>
</li>
<li id="nod2">
<span>
<a>Element 2</a>
</span>
</li>
<li id="nod3">
<span>
<a>Element 3</a>
</span>
</li>
</ul>
</div>