I'm working on a search area and have decided to use the dropdown feature of bootstrap's framework.
What I aim to achieve is this:
A user types something, then another function parses the results.
I call a function or something that triggers that dropdown events.
If I just trigger the class responsible for the dropdown menu visibility, the rest of the functionality doesn't work (for instance, the keyboard navigation on the dropdown list items).
On the other hand, if I follow the documentation, and add: data-toggle="dropdown" to the input element
Then each click / focus on the input shows the dropdown, which is not what I want, I want to trigger it on my own.
Here's the HTML (couldn't create a working fiddle):
<div id="search-field" class="custom-dropdown">
<input class="form-control input-sm" id="global-search-input" data-toggle="dropdown" maxlength="255" name="top-search" placeholder="Global Search" tabindex="1" />
<ul class="dropdown-menu" role="menu" aria-labelledby="global-search-input">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
</ul>
</div>
Maybe you want something like Typehead.js, that display dropdown for actions check the
Typehead example
Related
I have an index page that records the number of Usecases(1-4), records no. of scenes(1-x) for each Usecase and every scene has set of same input fields.
Considering that I have the above numbers in javascript variables how do I dynamically load the second page based on the values given in the index page.
Index page where we define use cases and no. of scenes.
Second page which has loaded the page according to the number of use cases and scenes from index page
Use case tab :
<ul role="tablist" class="ibm-tabs" aria-label="Tab navigation">
<li role="presentation"><a role="tab" href="#">Usecase 1</a></li>
<li role="presentation"><a role="tab" href="#">Usecase 2</a></li>
<li role="presentation"><a role="tab" href="#">Usecase 3</a></li>
<li role="presentation"><a role="tab" href="#">Usecase 4</a></li>
</ul>
Scenes :
<li><a aria-selected="true" role="tab" href="#example2b-tab1">Intro Page</a></li>
<li><a role="tab" href="#example2b-tab2">Scene 1</a></li>
<li><a role="tab" href="#example2b-tab3">Scene 2</a></li>
<li><a role="tab" href="#example2b-tab4">Scene 3</a></li>
<li><a role="tab" href="#example2b-tab5">Scene 4</a></li>
</ul>
</div>
</div>
<!-- Tabs content body with tab contents divs inside a 4-3: -->
<div class="ibm-col-4-3 ibm-col-medium-5-3">
<div id="example2b-tab1" class="ibm-tabs-content">
<label for="__REPLACE_ME_1__" class="ibm-textcolor-green-60">Use case description<span class="ibm-required">*</span></label>
<span>
<input type="text" value="" size="70" id="first_name" name="first_name" required>
</span>
If you are working just for a demo and want to use only frontend then you have to use javascript variables to store the values in the index page and then generate the page with a loop all on front-end.
see this example
But for real functionality...
It can be easily done from the server-side.
In the index page where one can actually set values.
One can fetch those values using POST requests.
With the values, received generate the next page at the server using a for loop or something and then return the page.
You might also want to store these values as session variables for a particular client at the server-side.
see this example for doing the loop thing on server side using jinja and flask
I've seen several posts similar to this, but none of the solutions worked. I have a drop-down menu on my navigation. The nav looks like this
<ul>
<li role="presentation" class="dropdown">
Insurance <span class="caret"></span>
<ul class="dropdown-menu">
<li>Insurance</li>
<li>Home</li>
<li>Boat</li>
<li>Health</li>
</ul>
</li>
<li class="navdivider"></li>
<li role="presentation">
Customer Service
</li>
<li class="navdivider"></li>
<li role="presentation">
Claims
</li>
</ul>
When I click on the drop-down menu it shows up fine. When I click out of it or click the 'Insurance' link on the navigation the option on the navigation disappears. I get
<li role="presentation" class="dropdown" style="display: none;">
<a href="insurance.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
I've seen this same error posted elsewhere and I'm aware that it is a conflict with jquery & bootstrap, but I can't seem to fix it using the suggested fixes. I am not trained in javascript, so I'm unsure if I implemented incorrectly. Thank you.
When I try to make a dropdown for some odd reason when its clicked the dropdown menu displays off the page and I cant even see it in my actual website but JSFIDDLE shows it off the screen. Here is the JSFIDDLE where I was testing.
Click here for JSFIDDLE
Here is what I am currently doing.
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" href="#">Applications<b class="caret"></b></button>
<ul class="dropdown-menu">
<li>My Applications</li>
<li>Staff Dashboard</li>
<li>Apply</li>
</ul>
Thanks for the help in advance.
There are some problems in your code.Like missing div, tabindex etc.I fixed it up and check whether it helps you-
<div class="dropdown">
<button class="btn btn-default dropdown-toggle"
type="button" id="menu1" data-toggle="dropdown">Applications
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">
My Apllications</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">
Staff Board</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Apply
</a>
</li>
</ul>
</div>
Working fiddle- http://jsfiddle.net/vashuStrPro/6p0ux8st/
You need a parent element with the position property not set to static, i.e. to either relative, absolute, or fixed. The dropdown is using an absolute position with top:100%, so if there is no parent item with a position set, then it will use the window element as its reference, hence why it opens at the bottom of the page. Just set the immediate parent of the <ul> to have the position set.
Check out the updated jsfiddle.
I am trying to replicate the "tabs" section as explained in this tutorial: Google material Design. Everthing works fine except when I insert a date which uses a datepicker widget from this url: Datepicker. As soon as I select the date all the tabs in Megamenu become unresponsive
HTML code for the tabs:
<ul class="nav nav-tabs" style="margin-bottom: 15px;">
<li class="active">Home</li>
<li>Reminder</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="bootstrap-elements.html" data-target="#">
Reports <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Insurance History Between Dates</li>
<li class="divider"></li>
<li>Insurance history of Account</li>
<li class="divider"></li>
<li>Insurance Amount between dates</li>
</ul>
</li>
<li>Bulletin Board</li>
<p class="user" data-toggle="tab">Welcome Wasim(1117004017)</p>
</ul>
Script for datepicker:
$("#dtBox").DateTimePicker();
This renders Megamenu like this:
One more strange thing I came across is that as soon as tabs become unresponsive and I click on "Reports" tab I get this:
It was the fault of the DatePicker plugin. This line of code
$(document).unbind('click')
stopped bootstrap's propagation of the menu.
In my Application one of div has scroll property.Inside div,I templated table with more than 100 rows.user can add/delete rows with contextMenu
contextMenu has 4 options names are AddTop,AddBottom,Delete and Edit.The thing is here If user right click on any row,contextMenu should be stick to that row even If user scroll the table.Right now It's not happening.
I written following code for contextMenu.
<div id="contextMenu" class="dropdown clearfix">
<ul class="dropdown-menu-r" role="menu" aria-labelledby="dropdownMenu">
<li id="addTop"><a tabindex="-1" href="#"> <span class="new-icons new-icons-add-top"></span> Add Top</a></li>
<li id="addBottom"><a tabindex="-1" href="#"> <span class="new-icons new-icons-add-bottom"></span> Add Bottom</a></li>
<li id="delete"><a tabindex="-1" href="#"><span class="new-icons new-icons-delete"></span> Delete</a></li>
<li id="edit"><a tabindex="-1" href="#"><span class="new-icons new-icons-edit2"></span> Edit</a></li>
</ul>
</div>
once user rightclick on any row of the table.following function will run.
var domEle=document.getElementById("contextMenu"),
xPosition=event.pageX,
yPosition=event.pageY;
domEle.style.display="block";
domEle.style.left=xPosition+"px";
domEle.style.top=yPosition+"px";
After completion of the following function,contextMenu coming untill it's fine.The problem is If I scroll contextMenu not sticking to that particular position.
I hope,you guys understand What I am trying to explaining.
can anyone help me.
Thanks.
Try implement your code with something like that:
http://www.pixelbind.com/make-a-div-stick-when-you-scroll/