I'm writing a code in HTML and it has 2 buttons, say a and b. I want to pass something in my URL that will trigger the button. I know how we do it for div.
<div class="a">
<a name="a" /> This is Div A
</div>
<div class="b">
<a name="b" /> This is Div B
</div>
and I can directly pass myURL.com#a/myURL.com/#b, to go to that div. But I want to know if I can do it using buttons.
Thanks
Yes you can do it with some javascript like:
<button onclick="window.location='#a';">Go to Div A</button>
If you want either button A OR button B to be visable you can use this:
CSS
.button {
display: none;
}
.button:target {
display: block
}
HTML
<!-- link in the same page -->
go to button 1<br>
go to button 2<br>
<!-- link from external page -->
go to button A<br>
go to button B<br>
<!-- buttons will only be visable when linked to -->
<a class="button" id="A"><input type="button" value="button A"></a>
<a class="button" id="B"><input type="button" value="button B"></a>
If you just want to jump to the button you answered your own question.
Just wrap the <div id="A"> around the button.
First add the id attribute to the div. Eg; <div class="b" id="part-b">
Then just link to mypage.html#part-b, eg; <a href="mypage.html#part-b>Go to part b</a>
Related
Is there a pure HTML way to keep the collapsed panels open while the radio button triggering them is selected? Every example I find lets the opened panel close again when the same Opening Button is clicked again.
I'd like to have the collapsed panel say visible when the triggering radio button is pressed again.
Examples of the opened panel closing when clicked multiple times:
https://codepen.io/martinkrulltott/pen/waRXgw
https://www.bootply.com/U8J7eJh3O6
You can try something like this. After you get the functionality you want you can style with bootstrap components.
HTML:
<form>
Display Panel:
<input type="radio" name="portion_selection" value="button_one" /> Yes
<input type="radio" name="portion_selection" value="button_two" /> No
<div id="portion_one" style="display:none">
<div class="card">
<div class="card-body">
1. This is some text within a card body.
</div>
</div>
</div>
<div id="portion_two" style="display:none">
<div class="card">
<div class="card-body">
2. This is some text within a card body.
</div>
</div>
</div>
</form>
JS:
$("input[name='portion_selection']:radio")
.change(function() {
$("#portion_one").toggle($(this).val() == "button_one");
$("#portion_two").toggle($(this).val() == "button_two"); });
Example Codepen: https://codepen.io/brooksrelyt/pen/GzWzOv
Is it possible to place the button inside the jumbotron in the top-left-most corner rather than just above it?
Currently I have:
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">
<span class="glyphicon glyphicon-th-list"></span>
</a>
<div class="jumbotron">
<div class="container">
<div class="page-header text-center">
<h1>Title of Page</h1>
</div>
</div>
</div>
</div>
The button creates a noticable bar above the jumbotron (which looks like a rubbish navbar!)
How can I place the button in the top-left-most corner to eliminate this problem?
Here you go. Just add absolute positioning to the button and put it INSIDE your jumbotron, not above it.
.jumbotron {position:relative;}
#buttonmenu {position:absolute; top:5px; left:5px;}
Updated Fiddle: http://www.bootply.com/vmmhsyhYlU
I'm trying to figure out how to place my <h4> tag and <button tag to be side by side.
Current Behaviour - Right now they are underneath my image and I want them to put in a horizontal position.
Required Behaviour - I want the <h4> to be side by side with the image and the <button> side by side with the <h4>.
I tried floating to the right and display blocks, but the elements are still underneath the image and one another.
Codepen Link
Browsers by default typically display header elements as block. Use inline-block to not have it be in it's own line.
HTML
<h4>title</h4>
<button>button</button>
CSS
h4 {
display: inline-block;
}
DEMO: http://codepen.io/anon/pen/bVPXOK
Maybe
<h4 style="display:inline-block;">
heading
</h4>
<button> submit </button>
?
I saw your codepan the real problem was that your button was outside the right div that is why it was not aligned next to <h4>. I have edited the code (Updated Working Codepan)-
Modified CODE
<div class=" panel-body">
<div class="row-fluid">
<div class="row-fluid">
<img class="hotel-img img-responsive img-rounded" src="http://en.hotel-palaciodelmar.com/static/galerias/hotel/01-hotel-santander-sercotel-palacio-del-mar-fachada-foto.jpg" />
<h4 class="hotel-title""><span class="hotel-location"></span> Grand Master Flex</h4>
<button class="btn btn-primary" type="button" href="#more-info" data-toggle="modal"><i class="fa fa-info-circle"></i> More info</button>
</div>
</div>
</div>
instead of this (your previous code) -
<div class=" panel-body">
<div class="row-fluid">
<div class="row-fluid">
<img class="hotel-img img-responsive img-rounded" src="http://en.hotel-palaciodelmar.com/static/galerias/hotel/01-hotel-santander-sercotel-palacio-del-mar-fachada-foto.jpg" />
<h4 class="hotel-title""><span class="hotel-location"></span> Grand Master Flex</h4>
</div>
<button class="btn btn-primary" type="button" href="#more-info" data-toggle="modal"><i class="fa fa-info-circle"></i> More info</button>
</div>
</div>
and to align both <h4> and <Button> next to image you have to change your css and add display: inline-block !important; like this (Updated Codepan with image alignment) -
CSS
/* Hotel Search Panel */
.hotel-img {
display: inline-block !important;
width: 250px;
}
Another option you can use is the "float-right" class. If you nest your button in the h4, it can be accomplished like so:
<h4>Title<button class="float-right">My Button</button></h4>
Hope that helps!
I have a search bar in my website, as the image shows, I want to put that "go" image inside the "quick search" input bar. Is there any way I can do that through css?
Here's the code for that search bar part:
<div style="float:right; width:50%">
<div class="row">
<div class="col-lg-6" style="float:right">
<div class="form-group">
<div class="input-group input-group-hg input-group-rounded">
<asp:TextBox ID="searchBar" runat="server" TextMode="SingleLine" CssClass="form-control" placeholder="Quick Search" Width="200" Height="30px" AutoCompleteType="Disabled" />
<span class="input-group-btn">
<img src="images/go.png" />
</span>
</div> <br />
</div>
</div>
</div>
So, there are a couple methods to do this:
You can add a negative margin-left to the CSS of the button to move it left enough that it appears inside the box.
You can use CSS to make an outer DIV appear like a text box with a border, and then inside you have a textbox with NO border, and the button. So visually it looks like the border of the DIV is the border of the textbox when in reality it is not.
I have a table with two columns, the right one contains 3 buttons, those buttons change the content in the other column of the table. I want this table to be positioned at the center top of the page but I can't figure out how to do it.
Here is a screenshot of what I want (the image shows a header too, but it's not important for now)
If it is possible I want the buttons to don't move when the content on the other column changes, but it's not a priority.
I can also change the table with another structure if this will help.
Here is html code:
<div class='main'>
<table class="table">
<tr>
<td>
<input type="button" class="button" value="edit_menu"/><br><br>
<input type="button" class="button" value="edit_desc"/><br><br>
<input type="button" class="button" value="set_push"/>
</td>
<td>
<div id="content">
<div id="edit_menu" display="none" class="form">
here is a simple form
</div>
<div id="edit_desc" display="none" class="form">
here is a second form
</div>
<div id="set_push" display="none" class="form">
here is a third form
</div>
</div>
</td>
</tr>
</table>
</div>
The forms visibility is changed via Javascript when the buttons are pressed.
Try using the below code.
css :
body {margin:0; padding:0;}
.wrapper {width: 500px /* width of your table*/; margin:0 auto;}
html :
<div class="wrapper">
<!-- put your table here -->
</div>