Show on Click - CSS, HTML5 - css

I've got a quick question:
I've got a quick table, in which there's something clickeable.
<table class ="tablez">
<tr>
<th>Table Title </th>
</tr>
<tr>
<td>
<a class="clickable">Click Me!</a>
<div id="showedClickable">
<p>This is showed when Click Me! is clicked.</p>
</div><!--EO showedClickable -->
</td>
</tr>
</table>
What I want to accomplish is:
#showedClickable {
position:absolute;
display:none;
width:auto;
height:auto;
}
This is the part I don't know how to 'phrase'...How do I do so that
a.clickable:focus + #showedClickable {
display:block;
}

The problem is that an a element without a href does not receive focus by default. This is why your code is not working. You should give it a tabindex to make it focusable.
<a tabindex="0" class="clickable">Click Me!</a>
jsFiddle Demo

If you want to show the div on click of a like your title indicates, you can do it by modifying the code as below:
HTML:
Click Me!
CSS:
#showedClickable:target {
display:block;
}
Fiddle
EDIT:
:target is a pseudo-class which matches an element whose id is the same as that of the fragment identifier of the URI.
URIs with fragment identifiers link to a certain element within the document, known as the target element. In this case, the target (href of anchor) is an element with id as showedClickable. Hence when the anchor is clicked, the content gets displayed.
You can find more details about :target pseudo-class here
Note: As bažmegakapa has pointed out in the comments, this method will not work in IE 8 and lower.

Related

Click & Show - Tablet/Mobile

So, Im currently trying to do this:
<table class ="tablez">
<tr>
<th>Table Title </th>
</tr>
<tr>
<td>
<a tabindex="0" class="clickable">Click Me!</a>
<div id="showedClickable">
<p>This is showed when Click Me! is clicked.</p>
</div><!--EO showedClickable -->
</td>
</tr>
</table>
Heres the class
#showedClickable {
position:absolute;
display:none;
width:auto;
height:auto;
}
Heres what happens when you click.
a.clickable:focus + #showedClickable {
display:block;
}
It works fine on chrome on a laptop but when I try this on a mobile(iPhone) this doesn't work....What's the issue here?? How can I work around this,solve this?
Thank you for your time!
I had simillar trouble to this. The problem is that the iPhone doesn't redraw siblings based on events in CSS.
Try nesting your elements like this and using a child selector rather than a sibling selector. It is also generally more semantic as the item you click is often a heading for what is shown.
Oddly enough the iPad supports hover as a click event,
<ul>
<li>Click me
<ul>
<li>This is showed when Click Me! is clicked.</li>
</ul>
</li>
li:hover ul {display: block;}

how to show div elements in one line

I have a problem in my div elements I can not show them in one line:
<div>
<table>
<tr>
<td>hellow world</td>
</tr>
</table>
<ul>
<li>hi world</li>
</ul>
</div>
the table shown above the the ul and I want the tow elements to shown in one line next to each other.
I tried to use:
div
{
display:inline;
}
or :
div
{
display:block;
}
But it did not work . any body can help me on this??
If you want to show the table and the ul side by side, those are the two elements you should target, not the container they happen to be in.
If they are the same height, simply writing
table {float:left; margin-right:40px}
will do the trick. (You will need the margin, because lists also work with margins to show the bullets, and the bullet would end up inside the table if you didn't provide for that.)
See fiddle
If the table is higher, you will also have to clear the float afterwards, else subsequent content may also end up to the right of the table:
div::after {content:''; display:block; clear:both}
See updated fiddle
Float your content:
div
{
float: left;
}
You can apply display:inline-block, but the key is making sure you apply it to the correct elements...
table, ul
{
display:inline-block;
}
Here is a working example
you can just use table,ul{display: inline-block;} demo
Try this
<div>
<table style="float: left;">
<tr>
<td width="100">
hellow world
</td>
</tr>
</table> <ul>
<li>hi world</li>
</ul>
</div>

coloring table cell descendants

I am doing this on my own personal browser, viewing a pbulic website. as such, I can't change their html. I am using chrome, and stylebot to apply the CSS style. I need a CSS solution to the following:
<tr class="bg_small_yellow">
<td class="row1" valign="middle" align="center" width="20">
<img class="icon_folder" src="/eaforum/images/transp.gif" alt="">
</td>
<td class="row1" width="100%">
<span class="topictitle">
<a href="/eaforum/posts/list/9578017.page" id="topic_link_9578017" title="SimCity Traffic">
SimCity Traffic
</a>
</span>
</td>
How can I apply color: gray; to the <a> link if and only if the <img> is class .icon_folder ?
Here is a jsFiddle page to play with. I want a solution only in the CSS pane. http://jsfiddle.net/hZr9b/
I am looking for something like this, but that actually works:
(td > img.icon_folder) + td a:link { color: gray; }
If the markup cannot be changed, then it is not possible using only CSS because the image and anchor aren't siblings, and there is no parent selector in CSS2/3 to help navigate between these two elements.
If they were siblings, it could be as easy as this:
HTML:
<img class="icon_folder" src="/eaforum/images/transp.gif" alt="">
SimCity Traffic
CSS:
img[class="icon_folder"] + a {
color:grey;
}
But as you mentioned you cannot change the markup in this instance, unfortunately you'll have to use JavaScript.

Making a css play button on video thumbnail

I have a site that generates related video's to a topic. I have 4 thumbnails and I want to add a css play button on the thumbnails, which can be done with this code: ► | It will be like this: http://i47.tinypic.com/250qis9.png
Here is a demo: http://jsfiddle.net/vtPhZ/2/
The problem is that it won't recognize the a:before tags that I gave it to. What am I doing wrong?
The HTML snippet which generates the list:
<div id="youtubeThumbs">
<ul class="ytlist">
<li>
<table cellspacing="3" cellpadding="3" border="0">
<tbody>
<tr>
<td valign="top" rowspan="2">
<a class="clip" style="cursor: pointer;">
<span>
<img src="http://i.ytimg.com/vi/1q47bOtV3-Y/hqdefault.jpg">
<em></em>
</span>
</a>
</td>
<td valign="top">
</tr>
</tbody>
</table>
</li>
And the CSS I tried to use (without success):
.ytlist li > a:before {
content: "►";
}
How can I make it work?
I can't explain why but for some reason your change of methods for declaring a child element is causing the problem. Using my first two recommendations of using the unicode entity for the content and using the pseudo element rather than the pseudo class, the CSS should work. However, it did not initially work. When I removed > from the first line the CSS worked.
Here's a demo: http://jsfiddle.net/vtPhZ/4/
Your method was strange but the fact that it didn't work was even more strange...

CSS Only Tooltip Problem

Have been using a simple CSS only tooltip.
Working Example
css:
.tip
{
position:relative;
}
.tip span.tooltip
{
display:none;
background:#ff5112;
border:1px solid #9C0;
}
.tip:hover span.tooltip
{
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #0cf;
background-color:#cff; color:#000;
text-align: center
}
html:
<span class="tip">
<table><tr>
<td>Working Tip</td><span class="tooltip">Tip</span>
</tr></table>
</span>
Not working example:
html:
<table><tr>
<span class="tip"><td>Not working TIP</td><span class="tooltip">Tip</span></span>
</tr></table>
And a Live example
Your problem is the table element - you cannot have a span that wraps <td>. Get rid of the table and everything will work.
I don't see your tooltip css class, try adding one
table within a span is not allowed, try fixing that
I think that maybe I see your question but since the question is omitted, I'll take a shot. The second example is mal-formatted if you really wanted something to that extent it should be more like:
<span class="tip">
<table>
<tr>
<td>Working Tip</td>
</tr>
</table>
<span class="tooltip">Tip</span>
</span>
If you are going to wrap the entire table the "tip" should be after the table tag.
<span class="tooltip"> needs to go inside of <td class="tip"> for your current CSS to work as expected...
<table><tr>
<td class="tip">
Working Tip
<span class="tooltip">Tip</span>
</td>
</tr></table>
The solution that worked for me:
<table><tr><td>
<a href="blah.php" class="tip">
Blah Blah Text
<span class="tooltip">Blah Blah Tip</span>
</a>
</td></tr></table>
But this looks really bad with css turned off, so the way to go will be using the title attribute and then adding mootools or such libs on the top.
Thank you guys.

Resources