Is there are any custom implementation of ComboBox element (i.e. drop-down list) without tag? May be some div with CSS or JavaScript?
you can try my code, only use html, css and jquery :
create html :
<div class='dropdown'>
<b>My Dropdown</b>
<span>▼</span>
</div>
<ul class='option'>
<li><a href='#'>Dropdown 1</a></li>
<li><a href='#'>Dropdown 2</a></li>
<li><a href='#'>Dropdown 3</a></li>
</ul>
for complete code visit : http://jsfiddle.net/g6jrt8ey/
Happy Coding.
Related
I am currently working on a global search page. A user puts in a search, All results are displayed. But then I want the user to be able to click on certain tabs to display the results as well. It is currently bootstrapped. The all tabs is the only one that is currently working because it is the class is set to active. The all tab also wraps the other tabs. I will try to give an example if I wanted to display Events
I first have the nav tab section set like this...
<div class="search-tab">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#all">All</a></li>
<li><a data-toggle="pill" href="#events_tab">Events</a></li>
<li><a data-toggle="pill" href="#appointments_tab">Appointment</a></li>
<li><a data-toggle="pill" href="#phonecalls_tab">Phone Calls</a></li>
<li><a data-toggle="pill" href="#vendors_tab">Vendors</a></li>
</ul>
</div>
And then the data I want to retrieve is wrapped inside the all div tab like the events_tab here.
<div id="all" class="tab-pane fade in active">
<div class="list-panel table-sort" id="events_tab">
this will display the events related to the search...
</div>
</div>
I am fairly new to using bootstrap. Any advice/tips would be a huge help. Thanks in advance!
Its a little unclear as to whether you want All to have nested tabs or not. However, regarding Bootstraps tab HTML markup pattern, you'll want to wrap your .tab-pane in a .tab-content wrapper. Also, be sure you're including jQuery as well as Bootstraps JS bundle (after jQuery) so the data- attributes can be used.
Updated HTML for non-nested tabs and tab panes
<div class="search-tab">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="tab" href="#all">All</a></li>
<li><a data-toggle="pill" href="#events_tab">Events</a></li>
<li><a data-toggle="pill" href="#appointments_tab">Appointment</a></li>
<li><a data-toggle="pill" href="#phonecalls_tab">Phone Calls</a></li>
<li><a data-toggle="pill" href="#vendors_tab">Vendors</a></li>
</ul>
</div>
<div class='tab-content'>
<div id="all" class="tab-pane fade show active">
all area
</div>
<div id='events_tab' class='tab-pane fade'>
events area
</div>
</div>
Here is a fiddle showing the updated markup without nested tabs:
https://jsfiddle.net/onuj90dz/
If you're wanting to show the search results in addition to these other categories (events, appointments, calls, vendors), you could put the results in a non-tab container. A crude example in this fiddle: https://jsfiddle.net/onuj90dz/1/
I have been on a project to build a website to help students with revision.
I decided to make use of a cool navbar I found online in the website as I am not much of a professional myself. However, the navbar elements (the navbar is a unordered list which has been styled) don't show when i put any sort of background picture in the 'top' div. When it doesn't have a background picture (like in the fiddle) it is impossible to use the navbar properly.
This is the navbar I used:
http://cssmenumaker.com/menu/responsive-flat-menu#
I have fiddled about the position on the cssmenu div, tried putting it in the nav id and classes (both have styles set in the CSS).
Here is the fiddle
https://jsfiddle.net/jgs5uqxr/
It says I need to attach some code with the fiddle so here is the formating of my navbar
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li class='active'><a href='#'>Products</a>
<ul>
<li><a href='#'>Product 1</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
<li><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
I would have expected my chnages to make a working multi-level navbar which I can work with so I can add links to the educational material for students.
Thanks in advance.
I am trying to create a simple title spacer for my html code so that I don't have to type " " a lot and so the code looks more eat. However I have created this:
$(function() {
var subSpace = document.getElementById("subSpace");
var titleName = document.getElementById("subSpace").value;
subSpace.innerHTML = " " + titleName;
return false;
});
but it only runs against this code once:
<li><a href="#" id="subSpace" value="Start Menu" ></a></li>
<li><a href="#" id="subSpace" value="Tiles" ></a></li>
<li><a href="#" id="subSpace" value="Action Center" ></a></li>
<li><a href="#" id="subSpace" value="Settings" ></a></li>
<li></li>
<li></li>
<li></li>
So it runs Start Menu and properly spaces it the way I want but doesn't run tiles, action center, etc. Is there a way to fix this? Am I missing something? I could be way off as I am still learning.
Thank you in advance!
You should use a class instead of an ID as IDs are supposed to be unique. Other than that, you could be using CSS to add padding to the left:
.subspace {
padding-left:10px;
}
<li>Start Menu</li>
<li>Tiles</li>
<li>Action Center</li>
<li>Settings</li>
<li>Customizations</li>
<li>Windows Search</li>
<li>Microsoft Edge</li>
That's because you have multiple elements with an id of subSpace. You should use an id only once. If you have multiple elements with the same id, the first element will only be matched.
Also, on a side-note, you should really use CSS to style your page (i.e adding spacers/margins/paddings).
You have duplicates ids. Use class if you need to select multiple elements. You can select them using JQuery
<a href="#" id="subSpace" value="Start Menu" class="subSpace">
In your js:
$('.subSpace').html(' ');
I see another answer here which suggests a better way to do this only using CSS. You should consider that too.
I have a menu which is included in file A and B. I don't want any of my tabs to be active at first but after clicking on them I want to set the correct list item's class="active". I thought that the code below would do it. What do I need to add or change?
<ul id="navbar_menu" class="nav nav-tabs">
<li><a data-toggle="tab" href="#">A</a></li>
<li><a data-toggle="tab" href="#">B</a></li>
</ul>
FYI: I have included the following for the HTML page (do I need anything more than this):
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
http://getbootstrap.com/javascript/#tabs
According to Bootstrap's documentation (under the title "Markup"), you are still missing some HTML.
So this is mostly right, except we need the a link's href to point to an id of your actual tab, and not just a hash mark #.
<ul id="navbar_menu" class="nav nav-tabs">
<li><a data-toggle="tab" href="#tab1">A</a></li>
<li><a data-toggle="tab" href="#tab2">B</a></li>
</ul>
And then we need the actual tabs to be created.
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="tab1">...</div>
<div role="tabpanel" class="tab-pane" id="tab2">...</div>
</div>
Hope it helps!
I have to convert user entered unordered lists in a content management system into a bootstrap menu (navbar) using jquery.
80% there apart from one challenge that I can't figure out a nice solution for - ie one that uses selectors rather than string manipulation or regex. After all, we all know that we never parse html with regex :)
So, using the limited UI tools at the user's disposal, they generate a list, usually a two level nested list something like this
<ul>
<li>Blah1
<ul>
<li><a href='http://xxxx'>Blah1a</a></li>
<li><a href='http://yyyy'>Blah1b</a></li>
<li>Blah1c</li>
<li><a href='http://zzzz'>Blah1d</a></li>
</ul>
</li>
<li><a href='http://aaaa'>Blah2</a></li>
<li>Blah3
<ul>
<li><a href='http://xxxx'>Blah2a</a></li>
<li><a href='http://yyyy'>Blah2b</a></li>
</ul>
</li>
</ul>
And so on... The important thing is that some of their list items are links, some are just text.
I need to select each block of text contained in an <li> that is not already wrapped in an <a> and wrap it in an <a href="#"> so that the above would be transformed into:
<ul>
<li><a href='#'>Blah1</a>
<ul>
<li><a href='http://xxxx'>Blah1a</a></li>
<li><a href='http://yyyy'>Blah1b</a></li>
<li><a href='#'>Blah1c</a></li>
<li><a href='http://zzzz'>Blah1d</a></li>
</ul>
</li>
<li><a href='http://aaaa'>Blah2</a></li>
<li><a href='#'>Blah3</a>
<ul>
<li><a href='http://xxxx'>Blah2a</a></li>
<li><a href='http://yyyy'>Blah2b</a></li>
</ul>
</li>
</ul>
Shouldn't be that difficult I'm sure, but after an hour of playing I'm getting nowhere.
Try
$('li').contents().filter(function(){
return this.nodeType == 3 && $.trim($(this).text()).length > 0
}).wrap('<a href="#" />')
Demo: Fiddle
One line of code here:
$("li").not(":has(>a)").wrapInner('<a href="#" />');
jsFiddle
So, if you want to just get the text nodes than, yeah, use .contents(), which will get all nodes, including text nodes. Here are 2 methods you can use below for this:
$("li").not(":has(>a)").contents().filter(function(){
return this.nodeType == 3 && $.trim($(this).text()).length > 0
}).wrap('<a href="#" />');
jsFiddle
And here is another approach, just for the sake of something different:
$("li").not(":has(>a)").each(function(){
var $contents = $(this).contents();
if ($contents.length)
$contents.eq(0).wrap('<a href="#" />');
});
jsFiddle