So I have a snippet that I'm using to build some buttons.
<font color=white><button class="button"><span>Register</span></button></font>
<button class="button" onclick="window.location='http://www.google.com';"><span>SP Training</span></button>
<button class="button"><span>Assistance</span></button>
<button class="button"><span>Orders</span></button>
<button class="button"><span>KM Milsuite</span></button>
<button class="button"><span>TMT</span></button>
As you can see I have tried wrapping the whole thing in href, I have tried wrapping the span in href, I have tried wrapping just the font in href, all failed
Ok so I trekked down the java world and tried some on click (numerous variations I have found on this site) none of which work! Every button is a clickable but EVERY button simply links back to the page i'm currently working on. By no means am I an expert at all this but I expected a little give on this!
Any suggestions?
The purpose of a button is to either:
Submit a form (type="submit", the default)
Allow JavaScript to be triggered (type="button")
As you can see I have tried wrapping the whole thing in href
The HTML specification forbids that.
I have tried wrapping the span in href
The span appears to serve no purpose
Every button is a clickable but EVERY button simply links back to the page i'm currently working on
If clicking the button is reloading the current page, then it is probably a submit button inside a form with an action attribute that resolves to the current page (or no action attribute).
If you want a link then use a link and do not use a button.
If you want your link to look like a button, then use CSS to style it that way. Note that the :active pseudo-class is useful for achieving the 3d depressed effect when the link is clicked.
The span tag inside your button is catching the click action. You must take the span out of the "bubbling" chain.
The easiest way is to apply CSS and add the class to your span tags.
span.nonclickable {
pointer-events: none;
}
After that you can catch the button clicks.
A more detailed explanation can be found here: Use CSS to make a span not clickable
It is not quite clear what you want these buttons to do. Use a-tags to link to other pages and use buttons to refer to an action in javascript or a form submit.
You could try this :
<input type="button" onclick="myF()" />
<script>
function myF() {
window.open('http://www.google.com', '_blank', 'resizable=yes');
}
</script>
Hope it helps
Related
This question Close Button for Twitter Bootstrap3 Tabs shows how to create a Bootstrap3 tab with a close button in it:
<li class="active">Tab 1 <button><i class="fa fa-times"></i></button>
This works for me (I'm using glyphicons instead of font awesome) but then i read here Can I nest a <button> element inside an <a> using HTML5? that it's not acceptable to have a <button> inside of an <a> tag.
What is the right way to add a button to a bootstrap tab if it's not allowed to be inside the <a> element?
This JSFiddle (not mine) http://jsfiddle.net/vinodlouis/pb6EM/1/ shows the functionality I am going for with the little x button on the tabs.
If you want to insert a button in an anchor, the answer is you cannot (or rather you should not). The following two examples show how to get an html button to behave as a link; either by styling an anchor to look like a button (example 1), or using the onclick event of a button to trigger a JavaScript redirection as an anchor would (example 2).
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<!-- Styling the anchor as a button -->
An anchor that looks like a button<br/>
<!-- Letting JavaScript do the redirection -->
<button type="button" class="btn btn-default" onclick="javascript:location.href='#'">A button with onclick JS redirection</button>
</body>
</html>
Edit: Your latest edit and comment make it clearer what you are after, but I don't understand why you would phrase it as "having a button in an anchor". Bootstrap tabs are neither anchors nor buttons, so I would say the OP is really not well formulated. And being able to close a tab does not require either.
Specifically to answer you question now, you should put the cross-icon into a span with left padding and use the onclick event to trigger the tab's deletion with JavaScript.
What is the right way to add a button to a bootstrap tab if it's not allowed to be inside the element?
Simply substitute it for an element that is allowed at that position …?
From (taken from the jsfiddle example you linked to)
<li><button class="close closeTab" type="button">×</button>Sent
to
<li><span class="close closeTab">×</span>Sent
and done.
That might still give you unexpected results when the user interacts with it, of course – after all, when they click that “button”, they are clicking the link as well. So whatever scripting gets attached to the close button, will have to take that into account, and stop event propagation or something like that.
The real proper way to do this would of course be to not nest those elements, that are supposed to have completely different functionality, in the first place, but make them separate, independent elements. Overlying one on top of the other is a matter of formatting.
i am using bootstrap to change the button color when clicked, but i think i am doing something wrong and the button is not changing it's color when i am clicking the button.
this is my button code -
<td>
<a class="mylink" href="#"><button class="btn btn-default btn-xs">{% trans %}Allow{% endtrans %}</button></a>
</td>
this is my javascript code ---
<script type="text/javascript">
$(document).ready(function() {
if (localStorage.getItem('isCliked'){
$("#mylink").addClass('btn-success');
$("#mylink").removeClass('btn-default');
}
$('#mylink').on('click', function() {
$(this).addClass('btn-success');
$(this).removeClass('btn-default');
// set the value upon clicking
localStorage.setItem('isCliked', true)
});
i need to change the button color when clicked and when the page is called again it should check whether it is activated or not.
Can anyone help me to solve this problem.
Probably the problem is here.
$("#mylink")
This selects the element with the id="mylink" and not the element with the class="mylink"
If you want to select a class, go for this.
$(".mylink")
CSS Selectors: w3schools
First of all, mylink is a class in your code.
<a href="#" class="mylink">
But in jQuery you're using an ID ($("#mylink")). Also, <a> is an ascendent of <button>. So correct your every bit of $("#mylink") to:
$(".mylink button")
That way you'll be targeting the <button> tag inside your <a> tag with class .mylink.
Reference: http://www.w3schools.com/jquery/jquery_ref_selectors.asp
With $('#someID') you are selecting something by it's id. But you use classes ("myLink") so you should use $(".myLink").
And despite that you make it more complicated than it needs to be. Maybe you want to try to do it just with css.
Here is an example which is very similar to your question:
Pressed <button> CSS
There are some errors in your code:
It is jQuery, not JavaScript (it's a little bit different)
You are changing the <a> class "myLink" NOT the <button> class
You are referring to a class (".myClassName") as a id ("#myIdName")
Others things (i.e. how javascript handle the DOM element)... you should read and study a little bit more.
Anyway, I've made you a working fiddle.
Subject is a problem. Well I have, for example, this html
Learn more
It doesn't work. Okay, perhaps there are some invisible elements that don't allow to click on it. Here I add onclick property:
Learn more
But now I see that "Hi" message appears (so <a> tag is clickable), but it doesn't change current page.
Well, ok. Now i'm changing javascript to:
<a onclick="window.location.href='/ru/pages/socials.aspx';return false;" href="/ru/pages/socials.aspx">Learn more</a>
and now it works as espected, but I'm looking for non-JS pure HTML solution.
Please, advice. Why <a> could be non-clickable for href, but with workable JS onclick event?
Did you add click event listeners via e.g. JQuery? Maybe you're disabling the default behaviour by something like this:
$(..).click(function(e){
e.preventDefault();
...
});
I would exclude 'wrong' markup ( like an overlapping div or something ) because you can use the link when you add an inline onclick.
The code below works fine with ONE Reveal/Hide Text process
<div class="reveal">Click Here to READ MORE...</div>
<div style="display:none;">
<div class="collapse" style="display:none;">Collapse Text</div>
However if this code is duplicated multiple times, the Collapse Text shows up and doesn't disappear and in fact conflicts with the Expand to reveal even more text instead of collapsing as it should.
In this http://jsfiddle.net/syEM3/4/ click on any of the Click Here to READ MORE...
Notice how the Collapse Text shows up at the bottom of the paragraphs and doesn't disappear. Click on the Collapse and it reveal more text.
How do I prevent this and getting to work as it should?
The two slideDown function calls are not specific to the .reveal and/or .collapse that you are currently doing. i.e.
$(".collapse").slideDown(100);
will find all the elements with the class .collapse on the page, and slide them down. irrespective of what element you just clicked.
I would change the slideDown call to be relavant to the element you just clicked i.e. something like this
$('.reveal').click(function() {
$(this).slideUp(100);
$(this).next().slideToggle();
$(this).next().next(".collapse").slideToggle(100);
});
in your code
$('.reveal').click(function() {
$(this).slideUp(100);
$(this).next().slideToggle();
$(".collapse").slideDown(100);
});
$('.collapse').click(function() {
$(this).slideUp(100);
$(this).prev().slideToggle();
$(".reveal").slideDown(100);
});
this two rows doesn’t do what you want as they act on all elements of the specified class
$(".reveal").slideDown(100);
$(".collapse").slideDown(100);
When you do $(".collapse").slideDown(100);, jQuery runs slideDown on everything with the .collapse class, not just the one that's related to your current this. To fix this, refer to the collapse based on its location to $(this).
Do do this, use something like $(this).siblings(".collapse").slideDown(100);
Note that this particular selector will only work if you enclose each text block in its own div. With each text element in its own div, like you have it now, .siblings(".collapse"), which selects all the siblings of $(this) with the collapse class, will still select both of the collapse elements.
Okay, I think you should take a different approach to your problem.
See, jQuery basically has two purposes:
Selecting one or more DOM elements from your HTML page
manipulate the selected elements in some way
This can be repeated multiple times, since jQuery functions are chainable (this means you can call function after function after function...).
If I understood your problem correctly, you are trying to build a list of blog posts and only display teasers of them.
After the user clicks the "read more" button, the complete article gets expanded.
Keep in mind: jQuery selects your elements very much like CSS would do. This makes it extremely easy to
come up with a query for certain elements, but you need to structure your HTML in a good way, like
you would do for formatting reasons.
So I suggest you should use this basic markup for each of your articles (heads up, HTML5 at work!):
<article class="article">
<section class="teaser">
Hey, I am a incredible teaser text! I just introduce you to the article.
</section>
<section class="full">
I am the articles body text. You should not see me initially.
</section>
</article>
You can replace the article and section elements with div elements if you like to.
And here is the CSS for this markup:
/* In case you want to display multiple articles underneath, separate them a bit */
.article{
margin-bottom: 50px;
}
/* we want the teaser to stand out a bit, so we format it bold */
.teaser{
font-weight: bold;
}
/* The article body should be a bit separated from the teaser */
.full{
padding-top: 10px;
}
/* This class is used to hide elements */
.hidden{
display: none;
}
The way we created the markup and CSS allows us to put multiple articles underneath.
Okay, you may have noticed: I completely omitted any "read more" or "collapse" buttons. This is done by intention.
If somebody visits the blog site with javascript disabled (maybe a search engine, or a old mobile which doesn't support JS or whatever),
the logic would be broken. Also, many text-snippets like "read more" and "collapse" are not relevant if they don't actually do anything and are not part of the article.
Initially, no article body is hidden, since we didn't apply the hidden css class anywhere. If we would
have embedded it in the HTML and someone really has no JavaScript, he would be unable to read anything.
Adding some jQuery magic
At the bottom of the page, we are embedding the jQuery library from the google CDN.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
This is a best practice and will normally speed up your page loading time. Since MANY websites are embedding
jQuery through this URL, chances are high that its already in the visitors browser cache and doesn't have
to be downloaded another time.
Notice that the http: at the beginning of the URL is omitted. This causes browsers to use the pages current protocol,
may it be http or https. If you would try and embed the jQuery lib via http protocol on a https website, some browsers will refuse to download the file from a unsecure connection.
After you included jQuery into the page, we are going to add our logic into a script tag. Normally we would
save the logic into a separate file (again caching and what not all), but this time a script block will do fine.
Finally some JavaScript
At first, we want to hide all elements with the css-class full, since only teasers should remain displayed. This is very easy with jQuery:
$('.full').hide();
The beginning of the script $('.full') tells jQuery: I need all elements with the CSS-class full. Then we call a function on that result, namingly hide() which purpose should be clear.
Okay, in the next step, we want to add some "read more" buttons, next to every teaser. Thats an easy task, too:
$('.teaser').after('<button class="more">Read more</button>');
We now select every element with the css-class teaser and append some HTML code after() each element - a button with the css-class more.
In the next step, we tell jQuery to observe clicks on every one of this freshly created buttons. When a user has clicked, we want to expand the next element with the css-class full after the clicked button.
$('.more').on('click', function(){
//"this" is a reference to the button element!
$(this).slideUp().next('.full').slideDown();
});
Phew, what did we do here?
First, we told jQuery that we wanted to manipulate this, which is a reference to the clicked button. Then we told
jQuery to hide that button (since its not needed anymore) slowly with slideUp().
We immediately continued telling jQuery what to do: Now take the next() element (with the css-class full) and make it visible by sliding it down with slideDown().
Thats the power of jQuerys chaining!
Hiding again
But wait, you wanted to be able to collapse the articles again! So we need a "collapse" button, too and
some more JavaScript:
$('.full').append('<button class="collapse">Collapse text</button>');
Note: we didn't use the after() function to add this button, but the append() function to place the button
INSIDE every element with the css-class full, rather than next to it. This is because we want the
collapse buttons to be hidden with the full texts, too.
Now we need to have some action when the user clicks one of those buttons, too:
$('.collapse').on('click', function(){
$(this).parent().slideUp().prev('.more').slideDown();
});
Now, this was easy: We start with the button element, move the focus to its parent() (which is the element that contains the full text) and tell jQuery to hide that element by sliding it up with slideUp().
Then we move the focus from the full-text container to its previous element with the css-class more, which is its expanding button that has been hidden when expanding the text. We slowly show that button again by calling slideDown().
Thats it :)
I've uploaded my example on jsBin.
I tried this:
<div style="display:block;">
LOTS OF STUFF HERE
<input type="button" onclick="runsomething();return false;">
</div>
But it doesn't work. It does click to follow the anchor...but the button also follows anchor, which I don't want.
Edit:The button won't even click. It won't press down! It's like the Anchor completely covered it.
You can cause the event to cease propagation from the button on up so it never arrives at the DIV.
$(".myDiv input").click(function(e){
e.stopPropagation();
});
For more information on event.stopPropagation, see http://api.jquery.com/event.stopPropagation/
For some reason, you have your anchor taking up the entire size of the parent container. Why? This will cover up your button, likely making it unclckable. I understand that you would like to make the entire DIV clickable, but this is the wrong approach. Consider the following:
$(".myDiv").click(function(){
window.location = $("a:first", this).attr("href");
});
This would cause a click on this DIV to send the user to wherever its link would have sent them. Best thing is you don't need to add any CSS to your link, or DIV. Javascript will go and find the link within the div, get its href value, and send the user off in that direction.