I am trying to make a lightbox appear when a button is pushed. Problem is, when the anchor is around the button (like in the code below), it automatically redirects to "mywebsite.com/myimage.jpg". However when the anchor is inside, only clicking the text will pop the lightbox. Here is the code:
<a href="myimage.jpg" rel="lightbox" title="Title!" style="color:white" class="lightbox">
<div>
<button class="btn btn-lg btn-block" style="background:red">Button Text!</button>
</div>
</a>
Anchors and buttons have two different intended purposes, though Bootstrap allows you to style either as a button. Pick one. Using both is just bad practice.
<a href="myimage.jpg" rel="lightbox" title="Title!"
class="lightbox btn btn-danger btn-lg btn-block my-button-class">Button Text!</a>
The .btn-danger variant gets you the white-on-red scheme you seem to be going for. See http://getbootstrap.com/css/#buttons-options.
If this doesn't solve your problem you'll need to be more clear about which lightbox plugin you're using and what properties it's looking for.
Related
I am trying to link to a page on a different site that contains three buttons in a form. When I link to the page xyz.com/form , by default the 'Highlighted' button is checked since it contains the btn-primary class. How can I create a link from my site linking to xyz.com/form with the btn-primary class selected for 'Link One' or 'Link Two' rather than 'Highlighted'?
<form>
<div class="col-xs-12">
<a class="btn btn-block btn-default btn-primary">Highlighted</a>
<a class="btn btn-block btn-default">Link One</a>
<a class="btn btn-block btn-default">Link Two</a>
</div>
</form>
You can't.
It isn't possible to make arbitrary changes to the HTML of an arbitrary site through the URL.
(If it was, you could watch as I linked to your bank's online banking service with a link that changed their login form to point to my own, malicious, site).
You would have to make the changes on the site hosting the HTML you want to change.
Ideally, you would create different pages representing each version of the page. You could do this dynamically using server-side code which (for instance) paid attention to the query string.
You could also use JavaScript (in the page) to examine the URL and modify the DOM based on it.
I am developing an MVC6 project in Visual Studio 2015. I have just added Bootstrap 3.3.6 using Bower. On a very simple html page I have referenced the CSS in the header and Bootstrap at the bottom of the body as follows:
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
I defined a button as follows:
<button class="btn btn-primary">Hello</button>
When I debug the project (IIS, IE11) the button appears and is clearly styled by Bootstrap but there is no hand cursor.
If I use the browser to navigate to an example of a Bootstrap styled button, for example here: http://www.w3schools.com/bootstrap/bootstrap_buttons.asp, the hand cursor appears as I would expect. So it's not my browser at fault.
Can anyone suggest why I am not getting a hand cursor from a simple Bootstrap styled button please?
Try add role='button' instead. I have had this problem even though the documentation on bootstrap says type='button' should do the work but mine didn't.
You need to get rid of the button tags and just use anchor tags with bootstrap classes. For example:
instead of:
<button class="btn btn-primary">Hello </button>
write:
Hello
This will make the HAND CURSOR appear when hovering over the btn bootstrap class
Try adding an href such as href="#" to the button.
<button class="btn btn-primary" href="#">Hello</button>
When you start changing native element types and roles there are other side effects, including how those elements interact with accessibility for users. See this MDN link for details on that: Button Role
You are missing the type="button".
In bootstrap source less file there are several css rules specified for the input[type="button"] rule. (Checked for version 3.3.6)
You might not have to use it, but it was intended to be used with type="button".
In both W3School and Bootstrap buttons demo page they are using type="button"
Your code:
<button class="btn btn-primary">Hello</button>
W3:
<button type="button" class="btn btn-default">Default</button>
If it is still not working after adding type="button" (or submit or reset), try looking on your element with inspector and see what overrides the "pointer: cursor" css rule.
I was looking like you for a way to add this hand over,
until I saw that hand appearing once the form was filled.
(was using
<button type="button" >
by the way )
Create new css:
.cursor-pointer { cursor: pointer; }
Apply css on button:
class="cursor-pointer"
I encountered the same issue. When hover over the button hand cursor is not shown instead mouse pointer is seen. Fixed it by using the following ways.
1st Fix:
<input type="button" id="myBtn" class="btn btn-primary" value="Hello">
2nd Fix:
<a role="button" class="btn btn-primary" href="#">Hello</a>
On my site 33hotels.com I am using Buttons, such as provided by Twitter Bootstrap, to indicate hotels' amenities.
What I need is to clearly display that an amenity is absent.
For this, I am already displaying the button in red with text crossed by horizontal line. However, from user testing feedback, this is not enough to deliver the message that the amenity is absent. So I need something more clear.
I am thinking of putting a Large cross (letter 'X' or an icon) on top of the button, of the size of the button. The cross should be thin as not to obscure the text but still clearly visible.
My questions are:
How do you put an 'X' on top of a button?
Any elegant and re-usable way to do it?
Maybe define a web component or Angular directive "crossed" that can be attached to an HTML Element?
EDIT. Made my question more clear - I need to put a large X of the size of the button.
EDIT 2: Here is the ugly version of what I'm trying to achieve. However, apart from being ugly, it fails to make the text crossed readable. So perhaps I should use a thinner version of 'X'?
EDIT 3: Here is as good as I could get, not too pretty :(
http://cl.ly/image/1H1p0n2V2200
This is How you do it >> Close button
html
<button class="btn btn-default">End Tour<div class="closebox">X</div>
css
button {
position:relative;
}
.closebox {
position:absolute;
opacity:0.5;
top:-30px;
right:0;
left:0;
font-size:5em;
}
In your case, following code will work for you
<div class="btn push ng-binding btn-default"
ng-class="feature.selected ? 'btn-primary': 'btn-default'"
ng-mousedown="toggleFeature(feature, category, $event)"
ng-bind="feature.name">
<span style="position: relative;top: -9px;float: right;right: -9px;">×</span>
Courtyard
</div>
you can do it using css dynamic content via content:"X" and placing the style on your button element utilizing pseudo-elements for placing the content....
my example is entirely too specific with sizes and positioning: i just wanted to show you how you could do it:
http://jsbin.com/hijaw/1/
Maybe you can use font-awesome or glyphicon to represent when an amenity is absent or not (ok or cross icon + amenity name). Very easy to use and you will avoid to use images or dirty CSS. check Bootstrap 3 examples in:
http://fortawesome.github.io/Font-Awesome/examples/
with bootstrap 3, you can do something like below
<button type="button" class="close">Close
<span aria-hidden="true" style="font-size: 20px">×</span>
</button>
EDIT
another example with font-aswesome
<button class="btn btn-default btn-sm" >
<i class="fa fa-times"></i> Settings
</button>
EDIT 2
to change the size
<button class="btn btn-default btn-sm" >
<i class="fa fa-times" style="font-size: 1em"></i> Settings
</button>
you can increase font size using style on tag
I basically want an image as a button, for example, see the 'recent inbox messages' thing at the top next to stack Exchange? I want to recreate that moreorless but with my own image.. How would I go about doing this, I've tried:
<button type="button" name="test">
<img src="C:/Trey/rs-logo.jpeg">
</form>
but that didn't work, could anyone help (sorry if I worded all of this badly, English [though my native language] isn't a strong point!
-Trey
You can make an image button with something like this:
<a href="#">
<img src="yourImage.png">
</a>
This creates an image element with an anchor surrounding it, so for all intents and purposes, it's an "image button." You will have to style it to your liking.
UPDATE
Your code will also work if you change it to
<button>
<img src="yourImage.png">
</button>
You have to close the button tag. This will create an ugly-looking button with an image in it, but you can use CSS to style it to your liking.
you are opening a button and closing a form which is not even opend yet
you should use in first place. how ever using an image as a button is not the best idea i guess
<button type="button" name="test">
<img src="C:/Trey/rs-logo.jpeg"/>
</button>
made you a quick fiddle to check it out: http://jsfiddle.net/T2JRt/1/
I am trying to make Disqus comment counter link in Bootstrap button, but everything I tried was unsuccessful.
The idea is that the whole button should be link.
When I am trying to do like this:
<a href="page.html#disqus_thread">
<button type="button" class="btn btn-default"></button>
</a>
the Disqus just overwriting everything about Bootstrap button CSS and just leave naked link like "1" (I left just number in disqus settings).
When I am trying this way:
<button type="button" class="btn btn-default">
</button>
the button appears, as well as comment counter link, but the button is not the link like if it was wrapped into <a> tag. So I need some help.
What you are trying is not valid HTML. Try something like this: