I have tried the adding the Google search to my existing search bar to power it with no luck. Then I tried another bit of Javascript I found on the forums here and did place it directly after the form. Here is the existing code, but I do not have it working yet. Any suggestions would be appreciated. Thank you in advance.
<div class="navbar-collapse collapse right" id="search-not-mobile">
<button type="button" class="btn navbar-btn btn-primary" data-toggle="collapse" data-target="#search">
<span class="sr-only">Toggle search</span>
<i class="fa fa-search"></i>
</button>
</div>
</div>
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
Use a handler like this one (w/ your own selectors):
$('button').click(function(ev){
location.href="search.html?q=":$("[type=text]").val();
});
Then, create search.html with a normal Google search box.
Related
I have a button which when user click on it, phone numbers will be appear slowly.
Here is the HTML Codes:
<span id="show-phone-numbers" class="btn btn-success">
<i class="fe fe-phone-call"></i> Show Phone Number
</span>
<div class="media margin-top-20" id="phone-number-section" style="display:none">
<div class="media-body text-center">
<a href="tel:00000000">
<p class="btn btn-outline-primary">
<i class="fe fe-phone-call"></i> somephonenumber
</p>
</a>
<a href="tel:00000000">
<p class="btn btn-outline-primary">
<i class="fe fe-phone-call"></i> somephonenumber
</p>
</a>
</div>
</div>
And here is the scripts:
$("#show-phone-numbers").on("click",function(){
$("#phone-number-section").toggle("slow");
});
The problem is when I click on the "Show Phone Number" button, nothing happens, even in console I see nothing happening
I did search about the error but I couldn't find a way which help me to handle this error.
Why do you have data-bs-toggle="tab" in there, without any bootstrap tab elements? This causes the BS event handler to be registered, which throws this error, because it can't find properly setupped tabs.
I'm trying to build a beautiful form for selecting multiple files for upload in Bootstrap. The problem is that when I add a second file, the default text inside the button stops from updating. What am I missing?
<div class="control-group" id="fields">
<div class="controls">
<div class="entry input-group uploads">
<label class="file-upload btn">
Choose file from computer...<input name="fields[]" type="file" />
</label>
<span class="input-group-btn">
<button class="btn btn-upload-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
What should happen: when I click the plus button and choose a second file, the second title should also update, and not only the first one. The complete work is here: Fiddle
I'm trying to implement bootstrap-wysiwyg editor in a project, but every time I click a button in the toolbar that has a dropdown the editor loses focus, meaning that, for example, it's impossible to add links because the text is not selected, and images are always added at the beginning of the content because the caret position in the editor was lost. This happens in Firefox and Chrome.
Here is the HTML code for the insert link button for example (quite similar to the editor documentation example, but not working)
<div class="panel panel-info">
<div class="panel-heading">
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Insert Link"><i class="fa fa-link text-primary"></i></a>
<div class="dropdown-menu input-append">
<input class="form-control" type="text" data-edit="createLink" placeholder="URL" />
<button class="btn btn-success" type="button"><i class="fa fa-link"></i></button>
</div>
</div>
</div>
</div>
<div class="panel-body">
<div id="editor">
</div>
</div>
</div>
The only JS code is the editor hook:
<script>
$(document).ready(function () {
$('#editor').wysiwyg();
});
</script>
I'm using jQuery v2.1.4, Bootstrap v3.3.6, and bootstrap-wysiwyg v1.0.4
Thank you for your help.
The version of the bootstrap-wysiwyg that you are using is out of date. This bug was fixed in the most recent version. You can download it here.
The above image shows my attempt at creating my own "light-weight" Bootstrap-looking ComboBox control with ASP.NET textbox.
The input group shown above which consists of a texbox and button (with black arrow) looks funny. Has anyone experienced this before? Any ideas as to why it looks that way? Any recommendations to fix this?
I am not doing anything fancy here. The mechanism that "appends" a button to a textbox is supported by Bootstrap.
ASPX Page:
<div class="col-sm-3" id="TimesheetStep"><b>Timesheet Date</b>
<div class="input-group">
<asp:TextBox runat="server" ID="TimesheetBox" CssClass="form-control">
</asp:TextBox>
<div class="input-group-btn">
<button type="button" class="btn btn-inverse dropdown-toggle"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="demolist" class="dropdown-menu scrollable-menu pull-right"
runat="server" role="menu">
<li>11/22/2013</li>
<li>11/15/2013</li>
<li>11/08/2013</li>
</ul>
</div>
</div>
</div>
CSS:
.scrollable-menu { height: auto; max-height: 300px; overflow-x: hidden; }
I figured it out:
With this HTML:
<button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
You get:
But with the following HTML examples:
<button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
OR
<button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
Action<span class="caret"></span>
</button>
You get (respectively):
So it looks like you need to add a word (e.g., Action) OR just put an HTML space (e.g., )before <span class="caret"></span>. I hope this helps someone.
This is a common problem in Twitter Bootstrap.
The "computed" CSS height of the input field is different than that of the actual button.
Open your "developer tools" on your browser, and inspect the element styles, then find where it is overwritten | OR - fix the bootstrap CSS of the drop-down button, append: !important so it cannot be overridden.
<div >
<div>
<h3 style="display:inline-block;">Comments</h3>
<button id="add_button" style="display:inline-block;margin-left:240px;" type="button" class="btn btn-primary" onClick="$('#add_button').hide()" data-toggle="collapse" data-target="#comments">Add</button>
</div>
<div id="comments" class="collapse in">
<textarea style="resize:none;width:90%;" class="input xlarge" rows="4" id="comment-box" name="comment-box" placeholder="Type your comment here..."></textarea>
<button style="margin-right:30px;" id="submit_comment" class="btn btn-primary pull-right" name="submit_comment" type="submit" onClick="">Submit</button>
</div>
</div>
So this my code. I have a collapsable element from bootstrap and I am trying to have it start off collapsed in the page but trying multiple different methods I can't. I've used a couple of jQuery commands like hide() and collapse but none of them seem to work. Any ideas on how to get this to work?
Simply removing the in class from the id='comments' div as I've shown in this JSFiddle allows for the comments textarea to appear on clicking the add button:
http://jsfiddle.net/JHkHE/1/