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.
Related
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
I've tried looking at the documentation for addThis and it seems like it's being updated or something because all the links these help posts link to don't even mention the API bits they describe.
Anyway,
I just need to be able to programmatically click an addThis button. However, I can't seem to do it via console before I implement it in my code.
I read that this has something to do with how the addThis listeners are added only when the document is done loading. This doesn't make sense to me because even if I manually try to trigger a click in console, it still does nothing but return the html of the link I'm trying to trigger. For example:
`$('.at-svc-facebook').click();`
OR `$('.at-svc-facebook').trigger('click');`
OR `$('.at-share-btn.at-svc-facebook').click();`
I mean, by the time I open console the dom is ready. So then what else might be preventing me from clicking these buttons via jQuery?
I've tried adding a listener to an element myself, and then clicking it programmatically, and it works. So something is different about the way addThis listens for a click. I may update this question with something I find after inspecting their js.
===================
This is what is in the DOM which addThis populates and listens to:
<div class="addthis_sharing_toolbox"></div>
This is what ^ that code is turned in to from addThis:
<div class="addthis_sharing_toolbox" data-url="http://localhost:8001/halloween/" data-title="33 Halloween Costume Ideas">
<div id="atstbx" class="at-share-tbx-element addthis_32x32_style addthis-smartlayers addthis-animated at4-show">
<a class="at-share-btn at-svc-facebook">
<span class="at4-icon aticon-facebook" title="Facebook"></span>
</a>
<a class="at-share-btn at-svc-twitter">
<span class="at4-icon aticon-twitter" title="Twitter"></span>
</a>
<a class="at-share-btn at-svc-google_plusone_share">
<span class="at4-icon aticon-google_plusone_share" title="Google+"></span>
</a>
</div>
</div>
Now, you can see the jQuery I'm using to click the buttons and the code it's trying to click.
The issue is that addThis was putting a second link with the exact same class in the DOM for some reason. It generates some HTML and appends it to body.
So what I needed to do to select the button and trigger a click was to specify the 2nd element in the array of elements and call click on that one. Like so:
$('.at-svc-facebook')[1].click();
Now, the next problem I face is chrome block a programatic popup, but that's beyond the scope of this question. :(
change the
var class_name = $(this)[0].className;
as below,
var class_name = $(this)[0].attr('class');
and it'll work. :)
I've been trying every single tutorial I found online and none seems to work for me.
I've got these buttons:
<a href='faq.php'><div class='button'>
<div class='button_top'>
</div>
<div class='button_bot'>
FAQ
</div></a>
http://jsfiddle.net/6G8bk/
and I'd like that the top of the button would stay highlighted if the page url is same as href of the button.
Ty for any answers in advance!
Here's the fixed jsfiddle with jquery I tried but still won't work: http://jsfiddle.net/6G8bk/4/
A few things:
In your jQuery, you're trying to select all <a> elements that have a parent class of button, and according to your HTML you do not have (the button class is a child of the <a> element).
The page's URL won't work in JSFiddle because it will get the JSFiddle link, which will be different from the one on your website.
Since you want button_top to be visible on hover, you'll need to use JavaScript. As fas as I know, you can't manipulate another element on hover with pure CSS.
Here is a working Fiddle of what I think you want. I've left comments in the code that might help you.
http://jsfiddle.net/6G8bk/6/
You can retrieve the current url page by using $_SERVER["SCRIPT_NAME"] and comparing it to each element of the menu.
If it match, you put another class in the menu element with CSS rules to have the layout you want.
As you may know, the Twitter bootstrap tooltips are not accessible (I.E. they are not being read by screen readers). To make that happen, the following things should be done:
Upon calling the tooltip() function, the generated text element (the one that contains the text of the tooltip) should get a new attribute added to it: aria-hidden="true".
The original element (the one tooltip() has been called on) should get an attribute added to it: aria-describedby="#<tooltip-id>", where tooltip-id refers to the id of the new element that was just created above.
Since the way the Javascript currently works is selecting all the elements with the .tooltip class and applying the tooltip() function to it, I'm wondering how I can do this without modifying the source code of the tooltip() function.
Here is an example of the code for a button:
<span role="button" rel="tooltip" title="Add Youtube Video" class="fancyPostButton span1" tabindex="0" style="-webkit-user-select: none;padding-top: 10px">
<div id="fancyPostVideoPicker" class="fancyPostAttachment videoAttachment glyphicons film centerMe">
<i></i>
</div>
</span>
From the looks of the main example in the Bootstrap docs they are keyboard accessible (i.e. show to keyboard-only users) when used on natively-focusable elements, and they use text-content for the buttons.
So the default Bootstrap examples aren't too bad, if the tooltip text were needed to understand the button (like your example) that is when they create an accessibility issue.
So the main thing is that the button has no content, so a screen reader won't know what it is to start with. (NB: Some screen readers might fall back to the title if it were a native link or button, but you shouldn't rely on that.)
To do a button that shows a font-icon, you need content and the icon, so two elements:
<a href="target.html">
<span class="icon-home" aria-hidden="true"></span>
<span class="alt">Add YouTube Video</span>
</a>
Then use CSS to hide the text offscreen. The ARIA-hidden means that the font character won't be read out.
I would also recommend actually using a button or link, rather than span or div, as then you don't need to use javascript to simulate onclick etc. In this case, you've also got an inline element (span) wrapped around a block element (div) which isn't valid HTML either.
If you use the technique above screen reader users will hear the content of the item anyway, I don't think there is any other text to read out?
If you can't add the hidden text in the source, you could loop through the tooltip elements adding it dynamically.
I'm having a problem simulating a click on a nested link within a nested div using jQuery. Can anyone help with the following? How would I simulate a click on the link with id=video2 in the code below?
<div id=tS2 class=outer>
<div class=middle>
<div class=inner>
<a href="#" id=video2 class=trigger><img src="imgs/thumbs/thumb_02.jpg" ></a>
</div>
</div>
</div>
Try: $("#video2").trigger("click"); if you have a click function attached using jQuery.
If you don't have a jQuery click event attached, and you just want to simulate a click and get the default behaviour. Use: document.getElementById("video2").click();, but with your current setup, doing this would just send you to the same page again, as you only have a # in your href attribute.
Even though things will work without them in this case, you should add double quotes around you HTML attributes to make your HTML valid.