I am looking to implement a menu that a user clicks the first level button, it has a popover effect. Then a user clicks on the second level menu, another popover shows up. I tried looking up online but there isn't much useful information. Is it doable? The mock picture has been attached below.
You need to set your popover content to support html as per
official documentation.
You need to initialise your second popover after your first popover
is triggered.
HTML:
<button id="firstpopover" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right">
Popover on left
</button>
<button id="secondpopover" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-content="test" data-placement="right"> Popover on left
</button>
JS:
var second = $('#secondpopover').remove();
var first = $('#firstpopover');
second.show();
first.data('content', second);
first.popover({html: true});
first.on('shown.bs.popover', function () {
second.popover();
})
first.on('hidden.bs.popover', function () {
second.popover('hide');
})
CSS:
#secondpopover {
display: none;
}
DEMO
Related
I am using this jquery plugin (Jquery Popup Overlay)
I have finally managed to have it working as expected, apart from the last step.
Once the pop up opens, there are 2 buttons. One is to close the window and one to progress with selected action(delete something in DB in this case).
I have this link to activate the window:
<a class="initialism basic_open btn btn-xs btn-danger" href="?page=suite-admin&action=delete-suite&id=5&site_id=1">delete suite</a></td>
This is the script to show the window:
$(document).ready(function () { $('#basic').popup({
escape: false,
blur: false, });});
What I need is , when pop up opens and i click on delete button this will progress with whatever is in .
I do not know much about Java, but i do really like this feature on my project.
Any help will be appreciated.
Thank you
Edit:
Forgot the actual pop up:
<div id="basic" class="well" style="display: none;">
<h4>Basic</h4>
<p>The dialog can be closed by pressing the <kbd>Esc</kbd> key, or by clicking on the background
<br> outside the content area, or by clicking on the Close button.</p>
<button class="basic_close btn btn-default">Close</button>
<button class="basic_close btn btn-danger">Delete Suite</button>
I think two possible answers (there are certainly more) to your problem can be found in this stackoverflow question: [How to create an HTML button that acts like a link?
To sum it up: One way would be to just use an <a> tag instead of <button>. That means you write:
<a class="basic_close btn btn-danger" href="?page=suite-admin&action=delete-suite&id=5&site_id=1">Delete Suite</a>
I have a table created in meteor that is expandable. The initial button that is pressed to expand the table has a plus icon on it. Once the table is expanded I wan't to be able to make the icon on the button change to a minus sign. Basically I want the icon to toggle between a plus and minus sign depending on if the table is expanded or collapsed.
My template for the button:
<template name="expandButton">
<button class="btn btn-default btn-xs btn-circle">
<span id="expand" class="glyphicon glyphicon-plus"></span>
</button>
</template>
The template is callled in the html and works as expected.
My most recent attemp has been trying to use an event for getting the icon to switch from the plus sign to the minus sign:
Template.expandButton.events({
'click #expand'(event) {
event.toggleClass('glyphicon-plus glyphicon-minus');
}
})
I have also tried a couple other ways, but nothing has worked. I would like to know if this is close to being a way of doing this or if this is completely wrong. And if it is the wrong way to do this, how should I go about doing it?
Thanks for any help. It is appreciated.
In Meteor you have to bind the events on right places. you want to bind the click event to button.
<template name="expandButton">
<button class="btn btn-default btn-xs btn-circle" id="expandBtn">
<span id="expand" class="glyphicon glyphicon-plus"></span>
</button>
</template>
and here is your event
Template.expandButton.events({
'click #expandBtn'(event, temp) {
temp.$('#expand').toggleClass('glyphicon-plus glyphicon-minus');
}
})
Please also note that in meteor events, the first argument is event and second is template so using temp.$ is more efficient then parsing the complete dom i.e $(#id)
I have a search bar and a submit button with text and an icon. So, I want to replace it for another text and keep the same icon on the right when I click in another button. But when I try, the icon comes first and mess the text. How can I maintain the same order and pattern?
I am doing something wrong? Please any help will be welcome.
Here goes some images to show what is happening.
Before and after replace
And my function code to replace the text.
$('#button').click(function(e) {
$("#submit").text("New Search");
$("#submit").addClass('glyphicon glyphicon-search');
});
Live Demo: https://jsfiddle.net/gheleri/mL2btnws/3/
Glyphicons aren't meant to added directly to the button as a class, but added as an inline tag such as i or span.
I changed your fiddle to insert as HTML the text with the icon tag. See here: https://jsfiddle.net/mL2btnws/5/
You can wrap the button text in a separate span in order to update its value without affecting the rest of the button.
I updated the fiddle: https://jsfiddle.net/twernt/mL2btnws/12/
Here is the modified HTML:
<button id="submit" class="btn btn-success" type="submit">
<span class="label">Search!</span>
<span class="glyphicon glyphicon-search"></span>
</button>
Here is the modified JavaScript:
$('#button').click(function(e) {
$("#submit .label").text("New Search");
});
<button
className=" delete-button glyphicon glyphicon-trash"
onClick=() =>
/>
and in you css file
.delete-button {
padding: 0;
border: none;
background: none;
}
There is some button which user clicks to be redirected to diffrent controller action. I would like to show user some nice waiting information (maybe using bootstrap?) that user knows to wait. Can you advice something? Below my curernt code:
this is part of my JS which is pasting some href url to modal bootstrap window:
...
var href = $('#details').attr('href'); // currently returns '/TransportGallery/Details/1'
href = href.slice(0, href.lastIndexOf('/') + 1) + id;
$('#details').attr('href', href);
...
this is the modal bootstrap window where above js href will be placed and will replace this one:
...
<a href="#Url.Action("Details", "TransportGallery", New With {.id = 1})" class="btn btn-primary" id="details">
Show pictures
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
</a>
<button type="button" class="btn btn-warning glyphicon glyphicon-off" data-dismiss="modal"> Close</button>
</div>
</div>
</div>
</div>
...
Now when this is done there is some operation behind which is loading pictures to gallery and on that moment i would like to show user animation. How do do that?
You can use BlockUI.JS
$(function(){
$('#details').on('click',function(){
$.blockUI();
});
});
after you redirect page to somewhere else page will be automaticly unblockui.
I am using backbone, bootstrap "collapse". I am trying to change the class when the button is clicked..
html
<button id="btnCollapse" class="btn" type="button">
<i id="accordionIcon-{{id}}" class="icon-down"></i>
</button>
js
CollapsePress : function(event) {
//change the class back and forth with every click (icon-down to icon-right)
}
You haven’t given enough information for me to be sure this is correct, but try this:
$(event.target).find('i').toggleClass('icon-down icon-right')