In this website:
http://theoew.uuuq.com/portfolios/Idea/
I use Cufon to style the text for the the main navigation. I have use this html code for it.
<ul id="mainnav" class="alignright">
<li class="active">
<a href="#">
<span>Home</span>
<small class="active">main page</small>
</a>
</li>
<li>
<a href="#">
<span>About</span>
<small class="active">my bio</small>
</a>
</li>
</ul>
I have one problem with it however.
When I hover over the #mainnav li span and then immediately move the mouse down so its hovering over the #mainnav li small text beneath it the #mainnav li span thinks the mouse is still on top of it and stays in its hover state. This does not happen when I don't hover over the #mainnav li small after hovering over the #mainnav li span.
I'm using this code with Cufon:
Cufon.replace('#mainnav li a span', {
hover: true,
hoverables: { span: true, small: true }
});
Its really essential that I get this fixed so I would really appreciate any help.
Note: The site is by no means finished.
hey. I did not runt the code but you could try to add the small tag into you cufon replace .....
<script type="text/javascript">
$(document).ready(function() {
Cufon.replace('h1, #mainnav li a span, #mainnav li a small', {
hover: true,
hoverables: { span: true, small: true }
});
});
</script>
Related
I really hope I'm not repeating an old question - I'm new to selectors so my terminology might be lacking.
I'm working on a tabbed single-page webpage based around this Default :target with CSS solution. I would like the current tab to have its link highlighted or altered in some way, to indicate the current location.
HTML:
<ul id="tabnav">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<a id="tab1"></a>
<a id="tab2"></a>
<div class="tab tab1 default-tab">This is text you should see as you load the page</div>
<div class="tab tab2">This is text that will appear after you click on tab 2</div>
CSS:
.tab {
display:none
}
.default-tab {
display:block
}
:target ~ .default-tab {display:none}
#tab1:target ~ .tab1,
#tab2:target ~ .tab2 {
display: block
}
ul#tabnav a:hover {
background: red;
}
ul#tabnav a:target{
border-width: thick;
border-color: black;
}
It seems like my last element (a:target) doesn't do anything, even though clicking on tabs does bring me to new anchors and change the displayed content. Any suggestions?
:target is the selector for the element on the page that has the id or name of the anchor name in the URL. So ul#tabnav a:target won't match anything, but if you change the selector to a:target, it will style the 2 links you have in the middle of the page, <a id="tab1"></a><a id="tab2"></a>
To style the "active" link in your navigation you'll need to use javascript to add a class on click, then style that class.
var $links = $('#tabnav a');
$links.on('click',function(e) {
e.preventDefault();
$links.removeClass('active');
$(this).addClass('active');
})
.tab {display:none}
.default-tab {display:block}
:target ~ .default-tab {display:none}
#tab1:target ~ .tab1,
#tab2:target ~ .tab2 {
display: block
}
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<ul id="tabnav">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<a id="tab1"></a>
<a id="tab2"></a>
<div class="tab tab1 default-tab">
This is text you should see as you load the page
</div>
<div class="tab tab2">
This is text that will appear after you click on tab 2
</div>
You can use the bootstrap tabs it will solve you problem and works fine.
Please check the demo here
Hope this will solve you problem.
Happy Coding :)
I have a basic navigation bar,
How can I hide a css class on hover of the li element.
<li>
<span class="span-line"></span>
<a href="{node_url}" >
<span class="glyphicon glyphicon-home"></span>
Title
</a>
</li>
Any help would be great :)
You'd use:
li:hover > .span-line {
display:none;
}
to achieve this.
jsFiddle
You can use the CSS selector:
li:hover .span-line{
display:none;
}
JS Fiddle: http://jsfiddle.net/rsX4D/
<div class="actions-wrapper">
<ul>
<li>
<a class="" href="#answer-form">
<img src="images/icons/answer.gif" class="answer-icon icon"/>
</a>
<a class="" href="">
Action1
</a>
</li>
<li>
<a class="" href="">
<img src="images/icons/answer.gif" class="answer-icon icon"/>
</a>
<a class="" href="">
Action2
</a>
</li>
</ul>
</div>
Hello, I have the previous code.
My div has a max size, and i want to display the li inline, but at the end of the line, i dont want the containing the icon to be separated from its text within the same li.
In my css i have the following :
.actions-wrapper ul { line-height: 25px;padding: 0; margin:0; list-style-position: outside; list-style-type: none;display: block; }
.actions-wrapper ul li { display:inline; margin-right: 12px;padding:3px 0;}
I have tried to put : white-space: nowrap; to the li, but it doesnt work in IE.
Here's a jsfiddle of my code : http://jsfiddle.net/wSTQy/1/
In this example the "Another action" is not on the same line of its icon.
If i add the white-space : nowrap; it wont work anymore in IE6
does adding the text-alignment to the ul achieve what you want?
.actions-wrapper ul {
text-align: right;
}
Updated after new information
changing the display of the li to inline-block instead of inline (needs a hack for IE7 and below) seems to work, even without the white-space: nowrap;
Updated fiddle (with hack included) : here
By looking at your markup, seems you want the icon and the text to make the same action.
Why not use css to add the icon next to the text, like so:
<li>
<a href="#answer-form" id="icon-label">
Action1
</a>
</li>
With the CSS:
#icon-label {
background: transparent url(path/to/image) no-repeat x y;
}
You can do this by removing all the whitespace from between the anchors, and separating them with a .
I think the easiest solution would be to change display:inline to float:left. That way the icons and the text never get separated.
Go HERE, and you will notice that the "Audio" tile's player can be seen on both tiles when I need it only to be seen on the tile that says Audio. When it slides, I mean. I tried setting a width to the UL element that the tiles are in but that screws it up. I'm at a loss. I have tried everything I can think of. Any input?
CSS
#audioTile {
padding:5px;
}
#audioTile ul, #audioTile li {
width:115px;
height:105px;
margin:0px;
padding:0px;
list-style:none;
}
JS
$(document).ready(function(){
$("#audioTile").easySlider({
auto: true,
continuous: true,
controlsShow: false
});
});
HTML
<div class="trigger" id="audioTile"> <ul>
<li> <h5>Audio</h5>
{MonthNumber} {DayOfMonth} {Year}
<br>
{block:NoteCount}{NoteCount} <img
src="http://static.tumblr.com/ux4v5bf/2Z0lf9580/heart.png">{/block:NoteCount}
<div class="player1">{AudioPlayerWhite}</div>
</li>
<li> hey big fat weirdo loL!
</li> </ul>
</div>
your problem is that you didn't set overflow:hidden on your ul and you are scrolling with your js... since you set list-style:none, and explicitly set the li 's width.( by default, overflow is allowed)
ps, firebug suggests to me that you have included two players in the same tile... not sure if that's what you want...
Is this menu:
<div class="navigation">
<ul id="nav-menu">
<li class="active">
<div class="sifr-r active"><span class="blue-small">01.</span><br />HOME</div>
<div class="blue-line"></div>
</li>
<li>
<div class="sifr-r"><span class="blue-small">02.</span><br />PROPERTY<br />MANAGEMENT</div>
<div class="blue-line"></div>
<ul>
<li>Rental returns</li>
<li class="last">Resources</li>
</ul>
</li>
</ul>
and sIFR:
sIFR.replace(conduititc_light, {
selector: '.sifr-r',
css: [
'a {color: #3c4a4b; text-decoration: none; margin-left: 4}',
'a .blue-small {color: #00bbd6; font-size: 8}',
'a:hover {color: #ffffff}',
'a:hover .blue-small {color: #00bbd6}',
'a.hover {color: #ffffff}'
],
wmode: 'transparent'
});
How save hover effect in sIFR while mouse point on li? Whithout sIFR it has been made with js (mootools):
var nav = $('nav-menu');
nav.getElements('.sifr-r').each(function(item) {
item.getParent().addEvents({
'mouseover': function() {
if (!item.getParent().hasClass('hover')) {
item.getParent().addClass('hover');
}
},
'mouseout': function() {
if (item.getParent().hasClass('hover')) {
item.removeClass('hover');
}
}
});
});
and CSS:
.navigation ul li.hover a.top-link {color: white}
You would need to create the hover effect in your sIFR flash file. sIFR replaces the HMTL element in the page with a Flash SWF. This SWF is not affected by CSS classes at all.
You need to replace the parent element of the <a>, such that the link itself is replaced, rather than the content of the <a> element.
That said, Flash CSS isn't very good with styling elements nested within links, and you're complicating with linebreaks and such. Perhaps a good idea not to use sIFR here.