I have inherited some code which uses horizontal lists in a form:
<ul>
<li>...</li>
<li>...</li>
</ul>
Where <li> is inline-block. I need to populate those lists with ng-repeat:
<ul>
<li ng-repeat="item in items">...</li>
</ul>
To avoid (well-known) gaps between inline-block elements they have to be written either:
<li>...</li><li>
...</li>
Or:
<li>...</li><!--
--><li>...</li>
But I have no idea how to achieve that with ng-repeat!
Anyone? :)
P.S.: I read this. I wonder if there's an elegant "angular specific" solution.
You can manage them by applying css rule:
li{
display: inline-block;
margin-right: -4px;
}
Or, if you don't want to use negative margin, then you can use float: left; instead of inline-block.
However, this would be costlier. Another solution I think is using ng-repeat-start and ng-repeat-end like below:
<ul>
<li ng-repeat="item in items">...</li><!--
<myDir ng-repeat-end>--></myDir>
</ul>
May be you need to use > instead of > and so on.
And with the compile function remove the element so that there would remain just --> using element.unwrap()
I'm not sure the above method would work fine as you're requiring. You could try this once in your project and let me inform.
If we want to muck around with css options...
ul {
font-size:0;
}
li {
display:inline-block;
font-size:12pt;
}
Related
This is my pen: http://codepen.io/anon/pen/IszKj
What I want to do is how it so when I click on either any status or any date I open up a hidden div which gives a list of options.
My question is, how do I approach this in the best way?
Do I have two different divs and then open the one which is relevant to the list item which was clicked:
<div id="status" style="display: hidden">Option 1 Option 2</div>
<div id="date" style="display: hidden">Option 1 Option 2</div>
Do I have one div and only show the content inside it which is relevant to that button?
<div style="hidden">
<span id="status">...</span>
<span id="date">...</span>
</div>
In addition to this, should I be using toggle or the traditional open / close function.
It would be nice for it to be degradable if JS is disabled.
Created a Fiddle for you:
http://jsfiddle.net/e4mQD/1/
HTML:
<div style="display: block;
height: 40px;">
<ul id="filter">
<li>
<span>Any status▾</span>
<ul class="options">
<li>Option1</li>
<li>Option2</li>
</ul>
</li>
<li>
<span>Any date▾</span>
<ul class="options">
<li>OptionA</li>
<li>OptionB</li>
</ul>
</li>
</ul>
CSS:
#filter, .options {
list-style-type: none;
}
.options {
display:none;
}
.options li {
cursor: pointer;
}
JavaScript:
$('#filter li').click(function(){
$(this).find('.options').toggle();
});
display:hidden
is not valid css rule. You need to use display:none
My question is, how do I approach this in the best way?
In your particular use-case, it is better that you use different blocks for each of those options.
In fact, as #mh-itc pointed out, it is better if you use nested list i.e. ul instead of div inside those lis.
Also, you may use a instead of span.
It would be nice for it to be degradable if JS is disabled.
This can be achieved by deferring the display:none; until the JavaScript is loaded and run.
Demo: http://jsfiddle.net/abhitalks/928Dj/
Markup:
<div>
<ul id="filter">
<li>
Any status ▾
<ul class="opt">
<li><label><input type="checkbox" />Status 1</label></li>
<li><label><input type="checkbox" />Status 2</label></li>
</ul>
</li>
<li>
Any date ▾
<ul class="opt">
<li><label><input type="checkbox" />Date 1</label></li>
<li><label><input type="checkbox" />Date 2</label></li>
</ul>
</li>
</ul>
</div>
CSS:
ul {
margin: 0; padding: 0;
list-style: none;
}
#filter {
display: inline-block;
}
#filter > li {
display: inline-block;
margin-bottom: 12px;
padding-right: 12px;
vertical-align: top;
}
ul.opt.hidden {
display: none;
}
jQuery Code:
// comment out to see how it degrades without javascript
$("ul.opt").addClass("hidden");
$('#filter > li > a').on("click", function(e) {
$(this).next('ul').toggle();
});
Note: In the demo, un-comment the JavaScript code to see how it will behave when JavaScript is available. And comment out to see how it degrades when JavaScript isn't available.
If you want to keep accessibility in mind change the hidden status when loading the site with javascript, if you do that user that have add-ons like NoScript active get to see every option without loosing functionality.
People who use NoScript tend to dislike sites that force them to deactivate NS to use it properly.
For your solution I suggest to use two separate divs, with this you have the option to show both boxes at the same time and have a styled version that makes clear, that these are separate.
Add a class like "optionbox" to these and throw your css rules in there instead of making a rule with #date, #status
I copied this menu:
http://50.112.96.159/wordpress/html/facebook_dropdown.html
It works fine, but i have question.
I want to have more than one menu, like:
<dl style="" class="dropdown">
<dt><a id="linkglobal" style="cursor:pointer;"></a></dt>
<dd>
<ul id="ulglobal">
<li>Everyone</li>
<li>Friends</li>
<li>Only Me</li>
<li>Customize</li>
</ul>
</dd>
</dl>
<dl style="" class="dropdown">
<dt><a id="linkglobal" style="cursor:pointer;"></a></dt>
<dd>
<ul id="ulglobal">
<li>Everyone</li>
<li>Friends</li>
<li>Only Me</li>
<li>Customize</li>
</ul>
</dd>
</dl>
When i set #id to <dt>, menu doesnt work, i think its because of javascript.
Can someone help me with this?
Thanks!
The example URL you provided contains A and UL elements with unique IDs, but yours are the same for both menus. Browsers will allow duplicate IDs within a document, but it should be avoided for a few reasons - but one of which is that JavaScript will work as expected (with multiple IDs, which element is returned by getElementById() is not guaranteed).
Ok - so if you are trying to set up two different images - I assume you are talking about privacyOff & privacyOn images you need to change your html as others suggested by firstly having unique ids, and then change your css to give the image you want to those ids, so something like:
html:
`<dt><a id="linkglobal" style="cursor:pointer;"></a> ...</dt>`
becomes
`<dt><a id="linkglobalOne" style="cursor:pointer;"></a> ...</dt>`
And css:
.dropdown dt a {background:#EEEEEE url(/wordpress/images/privacyOff.png) no-repeat scroll right center;
display:block; width:40px; height:22px; cursor:pointer;}
becomes:
#linkglobalOne {background:#EEEEEE url(<IMAGE YOU WANT>.png) no-repeat scroll right center;
display:block; width:40px; height:22px; cursor:pointer;}
Due to Intellectual Property issues with the client I just can't discuss any code.
There is a line or space between two LI tags in IE7 which are not present in Firefox or Chrome.
I tried very hard to detect where is the problem. I think after 6 hourse of try. So any fresh ideas would be helpful.
First, try to integrate a good CSS Reset (good one you can found on www.html5boilerplate.com ).
Second, I can only suppose menu CSS/HTML code (why you don't publish here the code? When is online, EVERY person can read your css/js/html code!):
HTML:
<div class="menu">
<ul>
<li>menu item</li>
<li>menu with subitem
<ul>
<li>sub menu item</li>
...
</ul>
</li>
...
CSS:
.menu ul {
...
}
I can suggest this kind of reset:
.menu ul, .menu li {
margin: 0 !important;
padding: 0 !important;
display: block;
list-style: none;
}
and try to obtain other padding/spacing with sub elements (span, a, ecc.).
<div id="menu">
<ul><li>SocialSpot</li>
<li>Profile</li>
<li>Latest</li>
<li>Settings</li>
<li>Logout</li>
</div>
</ul>
I have this in a webpage. I have css aligning them. However I want the logout button to be aligned to the right but on the same bar. How can I do this without having them all aligned to the right?
CSS:
ul { overflow:auto; }
li { float:left; }
li:last-child { float:right; }
Live demo: http://jsfiddle.net/simevidas/Rs4Sa/
Btw the :last-child pseudo-class does not work in IE8 (and below). If you want it to work in those browsers, you will have to assign a class (e.g. right) to the Logout LI item, and then:
li.right { float:right; }
Live demo: http://jsfiddle.net/simevidas/Rs4Sa/1/
You might want float: right on the css for the logout link.
Like this? http://jsfiddle.net/QAjkP/
You can use an id tag to specify the css properties for that one <li> item
I'm coding a tab system for my website that must be entirely CSS/HTML/JS (without using any images). Problem is, I keep hacking the code until when I'm finished its just a mess. I don't know whether to use positioning, or float the tabs or what. Basically one of the big problems is that after I take away the bottom-border CSS of the selected tab, I need to move it down 1px so it seamlessly blends with the sorting headers - I don't know whether to use margin: -1px or position: relative/absolute etc. I'd love some advice on a good way to code a tab system like this, so that it can be reused across the website!
Here's an example with CSS that makes it work:
HTML:
<body>
<div class="tabs">
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
</ul>
<div class="tabInner">
<div id="item1">
bla1
</div>
<div id="item2">
bla2
</div>
<div id="item3">
bla3
</div>
</div>
</div>
</body>
CSS:
.tabs ul {
list-style: none;
}
.tabs ul li {
float: left;
background: #eee;
border: 1px #aaa solid;
border-bottom: none;
margin-right: 10px;
padding: 5px;
}
.tabs ul li.active {
margin-bottom: -1px;
padding-bottom: 6px;
}
.tabInner {
clear: both;
border: 1px solid #aaa;
height: 200px;
overflow: hidden;
background: #eee;
}
.tabInner div {
height: 200px;
padding: 10px;
}
It even works without JS (to some degree). You'll still need some JS to move the 'active' class arround and also if you want fancy transitions.
See it in action here: http://jsfiddle.net/V8CK4/
I would use divs nested inside a list.
<ul>
<li>Tab1
<div> Content for Tab1</div>
</li>
<li>Tab2
<div> Content for Tab2</div>
</li>
<li>Tab3
<div> Content for Tab3</div>
</li>
</ul>
Then with css style ul li div to not show. I would use jQuery to show the child divs upon click of the parent li.
EDIT: Thanks to the comment... Note the li's would have to be styled inline so they do not break line after every one. Also set the li list-style to none.
In my opinion I would write it like this:
<div class="tabContainer">
<ul class="tabList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<em class="tabMessage">This is the message on the right.</em>
<div class="tabInnerContainer">
<div id="item1">
bla
</div>
<div id="item2">
bla
</div>
<div id="item3">
bla
</div>
</div>
</div>
This way will allow you to make it function al least to some extent without Javascipt, degrading nicely in browsers with JS turned off. Some of the classes could be removed if using CSS3 sleectors.
I assume the problem is to make the tab and the bar below it seem like one piece without using too much code.
What I have done before is to make the two elements I want to join overlap slightly (or not at all) and then put a third element (in the same color as both other elements) where the overlap is. This acts as a kind of patch.
Like this:
I. without patch
_________________
| |
| tab |
__|_________________|________________________________
| |
| menu bar |
|_____________________________________________________|
II. with patch
_________________
| tab |
|- - - - - - - - -|
___| patch |_______________________________
| - - - - - - - - - |
| menu bar |
|_____________________________________________________|
You will only need to use z-indexes to make this work properly. The patch may extend over the tab div it is contained in by using position: absolute and an adequately high value for top.
Update: demonstration
http://jsfiddle.net/7GJaW/
Like #Otis mentioned, nesting is a pretty good technique. I usually nest ul's
Link 1
Link 1 Item 1
Link 1 Item 2
However, if you are not trying to attempt to do a dropdown...