I am making a tree control using <ul>. Clicking on an item expands or collapses the node.
List images (bullets) are not clickable, so the solution seems to be to hide them and just show my own image. The problem with this is that when an item wraps to the next line, the default wrapping indent behavior of a list item is lost.
How can I achieve what I want in CSS?
There's no need to replace your bullets with images. When you bind the onclick event of an li to some function, clicking the bullet seems to fire it as well. To bind the onclick of the bullet to a different function, wrap li text content in a span and assign a different onclick event; something like:
$("li").click(function() {
alert("I'm a bullet! Glee's awesome!");
});
$("li span").click(function(event) {
alert("I'm some text! Glee's awesome!");
event.stopPropagation(); //make sure the li onclick isn't fired
});
And a little working demo: little link.
Hope that helped!
Bullets in front of an <li> tag seem perfectly clickable to me here: http://jsfiddle.net/jfriend00/5xzNR/ so I think you can just allow your regular <li> tags to be clickable.
You can use this:
li {
padding-left: 1em;
text-indent: -1em;
}
Can also be
#myDiv {
padding-left: 1em;
text-indent: -1em;
}
This will indent after the first line of your list/div.
You may also need to add a display: block; to the element if it doesn't work out. Haven't tested it but give it a shot.
Related
I have a <button> element which has been centered into the middle of the page with an anchor tag wrapped around it like seen in this JSFiddle.
From the JSFiddle if you hover your mouse on either side of the button the link is active. I could prevent this by wrapping it around a <div> and then apply this to the <div>:
div {
display: block;
margin: 0 auto;
}
However is there a better solution to this as in my case, I have many buttons like this and it would take long to apply? Thanks.
Are you referring to the space within the button, besides the "A Button" text, because I don't see any clickable area outside of the button. If so, I think that's just a function of the button tag. When I hover over the button, it highlights blue but my cursor doesn't change, like it should when I hover over a link.
If you throw the a href tag within the button, you'll get the cursor to change when you hover over the button's text. However, the button will still highlight button when you cursor is over the empty space within the button.
Also, what are you using the links for? Instead of hyperlinking the button, you might want to use the URL attribute within the button tag, if you're trying to use the button to send information somewhere.
The best solution to this was to just wrap the button with a form like so:
<form action="link-to-page-here">
<button>Button</button>
</form>
Using this, I can still center the button using:
button {
display: block;
margin: 0 auto;
}
But avoiding the link being clickable on the row of the button.
You shouldn't put a <button> inside of an <a> tag
just use the <button></button> and use the same style you've written for the button tag, so it should be something like that:
button {
display: block;
margin: 0 auto;
}
If you have to use the wrong markup and keep the button inside the <a> tag
just wrap the a tag inside a div tag and change styles to the following
<div>
<a href="">
<button>A Button</button>
</a>
</div>
and styles:
a{
display: inline-block;
margin: 0 auto;
}
div{
text-align: center;
}
button{
}
I am trying to customize a free widget, but I dont have access to edit the html. I am only given access to the css. I want to be able to align the a tags virtually. I have tried the following css, but the tags are right on top of each other/ How do I put space between them?
HTML
<span>[×] [o] </span>
CSS
span a { position:fixed; }
JSFIddle
http://jsfiddle.net/gfvAw/58/
You can always float and clear the anchor tags:
a { float: left; clear: left; }
Here's a jsfiddle to demonstrate: http://jsfiddle.net/gfvAw/60/
a { display: block; }
This will convert the a tags into block elements, meaning they will automatically expand to fit their containers.
However, you should realize that using block elements means the user will be able to click anywhere in the block, rather than just on top of the link text. A solution to that problem would be to use jQuery to insert <br/> tags after each a tag. Or you could replace the entities with <br/> tags, as well.
Let's say we have:
<div id="view-item-hero-info">
<h2>{{name}}</h2>
<h4>{{location}}</h4>
<h3>
<span id="view-item-hero-header-score">
You scored {{userScore}}pts
</span>
</h3>
{{description}}
</div>
Is there a way I can hide the text directly inside #view-item-hero-info? I know I can use text-indent but is there another, nicer, way?
Note: I don't want to hide the element, just everything inside it.
Note 2: Hiding all the elements within #view-item-hero-info is fine, I can use #view-item-hero-info > * { display: none } but then the text directly within #view-item-hero-info is still visible. I need #view-item-hero-info to remain visible so that its background can be seen but the text inside it must be hidden.
You can try:
#view-item-hero-info {
color: transparent;
}
Using this CSS:
visibility: hidden;
hides your element, but preserves the space it would normally take. Whereas this CSS will hide an element as if it never existed:
display: none;
you can use this code if u need hide text
.text-hidden{
font-size: 0;
text-indent: -9999px;
}
to hide all direct child's
use
.hidden-nested > *{
visibility: hidden; /*or next line */
display:none ;
}
if you need all child's use last code but change class to
.hidden-nested *
Use css display property. In HTML this would look like <span style="display: none">
Using javascript: document.getElementById("view-item-hero-header-score").style.display="none"
in css:
#view-item-hero-header-score {
display: none;
}
Using CSS you can set a style:
visibility:hidden
So to hide all descendants (*) within your element:
#view-item-hero-info * { visibility: hidden }
If instead you only want to hide direct descendants ie children but not grandchildren then you use the direct child selector (>)
Rather than selecting all (*) you can select particular descendants eg divs:
#view-item-hero-info div { visibility: hidden }
Equally instead of the visibility you can use:
display:none
The display option doesn't take up space whereas if you want to reserve the space for when the element will be shown you use the visibility option
EDIT:
There isn't a selector just for a text node (ie the text without the element). See Is there a CSS selector for text nodes?. So all children of your span need to be in an element in order to have style applied.
As a hack you could just put another span directly in your main one and all content (including the standalone text) within that. Then the hiding will work.
Could you use JS to iterate though all child items in the elements DOM and then use JS to overwrite the CSS? Something like:
var items_i_want = document.getElementById("view-item-hero-header-score").elements
for(var i = 0; i < items_i_want .length; i++)
{
items_i_want [i].style.display="none"
}
I'm starting out in using struts and I'm finding difficulty in applying my css on the tags.
<html:link action="LoginLink" styleClass="loginButton"/>
Basically I'd want to apply a button image on a link which goes to a login page.
I've used this method successfully in submit buttons for forms and I thought that the same could apply to the links, however it was not displaying properly.
<html:submit styleClass="submitButton" value=" " ></html:submit>
To add, I am able to see the top part of my button image when I place some text on the link like for example:
<html:link action="LoginLink" styleClass="loginButton" >Some text here</html:link>
Are there any alternative tags that I am able to use or is there any way to set the height and width (in pixels) of the link tag so that the button can appear normally?
also here is the css for the loginButton for reference:
.loginButton {
border:none;
background:url('../images/adminbutton.png');
height: 59px;
width: 138px;
}.loginButton:hover {
background:url('../images/adminbutton2.png');
}.loginButton:active {
position:relative;
top:1px;
}
Try to add this property
display: block;
to .loginButton
Is there a way to keep dropdown's stay on to test css styling in firefox?
for example : suppose if on this page http://www.htmldog.com/articles/suckerfish/dropdowns/example/bones1.html i want to keep dropdown on just to edit and styles in firebug.
Edit: the given link is just an example
Alter the CSS styles so it displays the secondary ul without needing a :hover. Alternatively toggle classnames through JS console to do the same thing.
remove the css:
#nav li ul {
left:-999em;
}
On firebug, select the link above the <ul>. You'll see the <ul> even though it's hidden. Select it, and disable the left:-999em; rule:
alt text http://img401.imageshack.us/img401/7822/firebugdetails.png
Search for left: -999em; and change it to left: auto;.
PS: Ln 35