I am trying to understand angularJS and have the following fiddle written, which is a very simple message ticker.
The messages are shown by changing the CSS display attribute of one of the li elements.
<div id="ngtickerMessage" class="ngtickerMessage">
<ul >
<li ng-style="{display:setVisible($index)}" data-ng-repeat="msgObj in msgs track by $index">{{msgObj.msg}}</li>
</ul>
</div>
</div>
Is it possible to (cross-) fade the contents of the li element based on ngAnimate using the ng-style attribute ?
I used opacity instead of display in the ng-style of li and added a CSS transition to it. FIDDLE. Hope it helps.
Related
My page generates two ULs of the same ID and I would like to remove the last one via CSS (display: none). I was trying with :last-child property but no luck at all. I either made both of them disappear or none of them.
Example:
<div id="content">
<ul id="some-ul">
<li>...</li>
<li>...</li>
</ul>
<ul id="some-ul">
<li>...</li>
<li>...</li>
</ul>
</div>
I would like to apply display: none only for the last ul#some-ul inside my #content.
It could be done like so:
#content ul:last-child {
display:none;
}
Note that last-child is only supported in IE9+. As mentioned by #Jop, you should set a class on the last child element to get around this for older versions of IE.
jsFiddle here.
Also, remember that ID's should always be unique.
Completely generic way to do this, that relies on no classes or ID's
div ul:last-of-type li:last-child {
display:none;
}
So basically, the div is the parent item that contains the list items - it could have a class or ID if you want.
Within that, you have your ul tags - the last-of-type does the magic, finding the last ul within the parent div. You then simply use last child on the li.
Here's the fiddle:
http://jsfiddle.net/Kx8SN/
I need to show an image once I hover over the navigation tabs. From the ruby code below you can see I am giving an id to each navigation (I could give a class too if needed):
<div class="top-container">
<nav class="navbar">
<ul>
<% Placement.all.each do |placement| %>
<li class=<%= "highlightedTopNav" if placement.id==params[:id].to_i %>> <%= link_to placement.placementname, placement_path(placement.id), :id => placement.placementname %> </li>
<%end%>
</ul>
</nav>
</div>
<div class="container">
<div style="background-image:url('images/pointingup.png');">
<img src="images/...">
</div>
</div>
Now I need to show a different image withing the 'container'div above for each of the navigation
I tried many solutions online but none work for me.
Alot could depend on the overall design of what you're trying to achieve here, but in css there needs to be some parent/sibling relationship with the element you are hovering and the element you want to effect.
For instance:
<li>
<div>Hello</div>
</li>
In your stylesheet you could: li:hover div { background: red; }
Since the div is a child of the LI element that would work, in your example the div you are effecting has no relationship in the dom with the element you are hovering. Meaning you most likely have to do this in javascript.
Alternatively you could place an empty element within the li element, <i> is generally popular for this sort of 'icon' technique and set your styles and background image on that, similar to whats going on in the product finder drop down here: http://www.havells-sylvania.com/
Like Barking Tiger mentioned, the displaying <div> would need to be a child of the one you are hovering to be able to use only css.
If you want to use Javascript or jQuery though, you could try something like this:
$("#navid").hover(
function () {
$(this).show(IMAGE);
},
function () {
$(this).hide(IMAGE);
}
);
EDIT: If you don't mind having a child image, you would probably do something like this:
If your HTML ended up like this:
You would do something along these lines to change the image on hover.
#navid
{
}
#navid:hover .hidden
{
display:block;
}
.hidden
{
display:none;
position:absolute;
z-index:999;
top:10;
left:10px;
}
Note the absolute positioning and z-index, that will keep your image in front of the nav. Without a code sample of your CSS it's hard to tell exactly how you want it styled, so just adjust it from there.
I have a menu that uses its own styling but jQuery Mobile css keeps overriding my menu styling. I wished they would limit there styling to ui-body. Is there a way to prevent jQuery Mobile css from overriding my menu styling? I have tried moving my styling before and after the jQuery Mobile include link but no help. also have tried data-role="none", no help. Thanks for your help.
Try using !important to stop JQ Mobile from overriding your styles.
EX:
font-weight:normal !important;
Ok, it would help if you supply example code but I'm assuming the following is happening.
Sample html:
<div class="my-menu">
<ul class="menu">
<li><a href="#"></li>
<li><a href="#"></li>
<li><a href="#"></li>
</ul>
</div>
jQuery mobile probably has a class set as follows:
<style>
a {color:blue;}
</style>
To override this you need to be more specific with your classes:
<style>
div.my-menu ul li a {color:red;}
</style>
When affixing a nav down the side of a page the content moves under the nav after initial scroll instead of staying along side, any ideas how to fix this?
Using:
data-spy="affix"
http://jsfiddle.net/cooltrooper/eJFaY/3/
Thanks
I think you generally have to specify it to an element that doesn't have the span* class.
It works better if you add it to the ul :
<ul class="well nav nav-list" data-spy="affix" data-offset-top="100">
or
<ul class="well nav nav-list affix">
I overcame this issue by adding CSS that applied to the element once the "affix" class is applied.
#your_element_id .affix {
top: (enter the pixel number where you want your element to stick);
}
Another option is to skip the data-spy'affix'. Attach the "affix" class inline.
Hopefully that provides some insight.
I have this problem with CSS round corners. The link to example is here: http://www.xplus.dnawrot.nazwa.pl/
As you can see at the top on the dark blue background is a dropdown menu. The problem concern hover state on the first ul li list(items: oferta, klienci, akademia) wchih has children. As you will notice if you make mouse focus on the oferta item it display round corners properly, but if you go down to second ul li list (drop down - "rozwiazania branzowe", "produkty", etc) right side of round corner disapperas. And it's logical becouse there is CSS style for li element and a element, and if the mouse leaves an a element the hover is removed. Does anyone has a solution for this problem?
If the description is not clear let me know and I'll try to explain more detailed.
Regards,
Dave
Maybe you could try to wrap "a" and "ul" in a "span" tag and then use css to control span:hover instead of a:hover.
<li class="">
<span>
<a class="sf-with-ul" title="Klienci" href="http://www.xplus.dnawrot.nazwa.pl/pl/klienci">
<ul style="display: none; visibility: hidden;">
</span>
</li>
I haven't tested it but you could give it a try.