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')
Related
I'm actually new to JQuery, and i am trying to trigger a quick view from the css framework Bulma, you can get documentation on the quickview here:
https://wikiki.github.io/components/quickview/
The quickview is set like this:
<div id="quickviewDefault" class="quickview">
<header class="quickview-header">
<p class="title">Quickview title</p>
<span class="delete" data-dismiss="quickview"></span>
</header>
<div class="quickview-body">
<div class="quickview-block">
...
</div>
</div>
<footer class="quickview-footer">
</footer>
</div>
And i can call it with this button (as saw on the wiki):
<button class="button is-primary" data-show="quickview" data-target="quickviewDefault">Show quickview</button>
So far its working, but i want to create a second button that ll call the quickview with JQuery, how can i do it ?
So far i've tried to click on the button who work great with JQuery when i click on my second button.
<!-- First button, work great -->
<button class="button is-primary" data-show="quickview" data-target="quickviewDefault">Show quickview</button>
<!-- Second button, doesn't work yet -->
<button class="clickmeplz">></button>
The first button is working well, and the second one should call the same quickview as the first one but with JQuery.
This is the code i've tried so far with my second button.
$(document).ready(function(){
$(".clickmeplz").click(function(){
$('button[data-target="quickviewDefault"]').click();
});
});
Unfortunately, it seem that the method click() cannot trigger the event of my first button like this.
Hello !
Let's try this:
$(document).ready(function(){
$(".clickmeplz").click(function(){
if($('div#quickviewDefault.is-active').length) { //If the quickview is showed
$('div#quickviewDefault.is-active').removeClass('is-active'); //Remove the class to hide
}else {
$('div#quickviewDefault').addClass('is-active'); //Add the class to show
}
});
});
When I click on the following button, I would like to be redirected to the route specified in the href. However it doesn't work:
<button href="/auth"> Google+ </button>
I am not sure if it matters but I am running a node app.
How can I navigate to a route on button click?
Buttons were not initially designed for the purpose of redirecting to a new page. Instead, what you are looking for is the a tag. From reading the comments, however, it is clear that you would like to keep the button element and add the same functionality for redirecting without the use of JavaScript, so I will provide a couple of solutions:
With JavaScript
var button = document.getElementById('myButton');
button.onclick = function() {
location.assign('https://stackoverflow.com/questions/52229901/navigate-to-route-on-button-click/');
}
<button id="myButton">Visit Website</button>
Without JavaScript
<form action="https://stackoverflow.com/questions/52229901/navigate-to-route-on-button-click/">
<input type="submit" value="Visit Website"/>
</form>
You can use the following solution to navigate to the route on a button click:
<button onclick="clickFun()"> Google+ </button>
<script>
clickFun() {
window.location = '/auth';
}
</script>
Buttons need an onClick handler. The href attribute is for links (anchor tags, more specifically).
<button onClick='someFunction'>Google</button>
<script>
someFunction() {
window.location = 'some-url';
}
</script>
You can use an a element instead:
Google+
The best way to rout some different page: we have native javascript method
location.asign('here your link');
For example
var btn = document.getElementById('btn');
btn.onclick = function() {
location.assign('https://stackoverflow.com/questions/52229901/navigate-to-route-on-button-click');
}
<button id="btn">
click
</button>
Its very simple you can't use link inside the button tag but you can add tag outside the button tag
for example
<a href='www.google.com'><button>Click me</button></a>
rest depends on your css skills
You can put the link inside the button and give the link href property , style the href class as per need
<button class="button is-success" onclick={submit}>
<a href="/auth" class="href">
Save changes and Submit
</a>
</button>
You can nest your button inside the anchor tag
<a href="/auth">
<button> Google+ </button>
</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;
}
The green "Blog" button on the top points to the right location, but when clicked, there is no response. It seems it's not a z-index issue. It seems to be a conflict with the jQuery nav, but the solution here is very unclear.
Here is the JS: http://pastebin.com/JuJwKdSZ
and JS #2: http://pastebin.com/VDpViTqP
Here is the HTML: http://pastebin.com/BYuehZnU
I think I may have found the answer. It is to do with the plugin you are using: OnePageNav
This handles all clicks on links on the page. There is a filter ability on that plugin though, when you initialize the instance of one page, you can include a filter of a class name and add that class name to your external link like so:
html
<a id="blog" class="btn button navbar-btn white external" href="/blog"><i class="fa fa-pencil"></i> Blog</a>
Change this in the first js file (line 44)
filter: '',
to this
filter: 'external',