We Keep Coding

CSS:hover:after overlay breaks jquery on click for me

I have a jQuery lightbox setup with a number of 300x300px images that on click open the lightbox. I would like to be able to overlay an semi-opaque background and text information with the video titles on the CSS :hover:after. The overlay works correctly and the lightbox works without the overlay code in place. But as soon as I combine the two the hover works but blocks the on click. Here is my HTML code:
<div class="screenShot" id="video1">
<a href="#"data-videoid="21183190" videosite="vimeo">
<img src="http://www.gorillacreativemedia.com/wp-content/themes/gorillashifter/img.php?mw=300&mh=300&src=library/images/noimage.png" />
</a>
</div>
And here is the CSS:
.screenShot{
display:inline-block;
position:relative;
margin:20px;
}
.ScreenShot img {
max-width: 100%;
height: auto;
}
#video1:hover:after {
content: '\A';
position: absolute;
width:300px;
height:300px;
background:rgba(255,0,0,0.6);
top:0;
left:0;
padding:100px auto;
text-align:center;
vertical-align:middle;
}
I don't know if I should be trying to trigger this off of a Javascript function instead or if I'm missing something simple with the formatting.

Use z-index:
CSS:
#video1:hover:after {
content:'\A';
position: absolute;
width:300px;
height:300px;
background:rgba(255, 0, 0, 0.6);
top:0;
left:0;
padding:100px auto;
text-align:center;
vertical-align:middle;
z-index:-1 //Generally lower than the element's z-index
}
Demo: http://jsfiddle.net/GCu2D/843/

I figured it out. The tag has to wrap around the element that you're putting the hover event on. I changed the HTML to this:
<div class="screenShot">
<a href="#" data-videoid="21183190" data-videosite="vimeo">
<div id="video1">
<img src="http://www.gorillacreativemedia.com/wp-content/themes/gorillashifter/img.php?mw=300&mh=300&src=library/images/noimage.png" />
</div>
</a>
</div>
Kept the CSS the same and it appears to work as intended now.

How could I use the html a tag to change div width and height?

<div class="panel">
<a href onclick="manipulate()">Show Quick Admin (↑)</a>
<div class="hidden">
<ul>
<li>
Panel
</li>
</ul>
</div>
</div>
so i am tying to make a "quick admin bar", for the site i'm making. this is the code i am using, don't mind the fact it's bad. i tried to make it check the height and width of the div "panel", and if it was 20px, change the "a" tag's innerHTML, show the "hidden" div, and make it so that if you click the "a" tag again it will set the div height back from 300px to 20px, change the a tag's innerHTML again, and hide the "hidden" div from viewing. how would i do this?
javascript:
function manipulate() {
if ($("#panel").height() == "20") {
document.getElementsByClassName("panel").style.height= "300px";
document.getElementsByClassName("hidden").style = "";
}
}
css:
.panel {
padding:10px;
background:#fffdbb;
position:fixed;
bottom:15px;
width:225px;
height:20px; /* 300px */
right:15px;
border:10;
border-style:solid;
border-width:2px;
border-color:red;
}
.hidden {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
right now it just doesn't do anything when Show Quick Admin is clicked. how can i fix this?

you should use [0]
document.getElementsByClassName("panel")[0].style.height= "300px"
Why dont you use this if you are using jquery?
$(".panel").css("height","300px");
I would suggest you to use id instead of class
<div class="panel">
vs
<div id="panel">
The proper way of Using
http://jsfiddle.net/sb3fY/1/
<div id="panel">
<span class="link1">Show Quick Admin (↑)</span>
<div class="hidden">
<ul>
<li>
Panel
</li>
</ul>
</div>
</div>
Javascript
$(".link1").on("click",function(){
$("#panel").toggleClass("open");
$("#hidden").toggle();
});
CSS
#panel {
padding:10px;
background:#fffdbb;
position:fixed;
bottom:15px;
width:225px;
height:20px; /* 300px */
right:15px;
border:10;
border-style:solid;
border-width:2px;
border-color:red;
}
.hidden {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
#panel.open {
height: 300px;
}

How to add div's within my div's that change with my slideshow

I have the current code and I am trying to put tabs on the side of my slideshow that change as the images change. and so the current image we are at is shown by the tab the active tab while still displaying the other tabs but in another color. The attached code is what I have come up with so far, but I can't seem to understand what comes next. I also tried to have my text vertical. I am also having trouble changing the height parameter of the tab div's, I changed the html but they wont get taller.
I just started learning I hope some one can help me out. Thanks.
Here's my HTML code:
<div id="content_transparent">
<div id="slideshow">
<div>
<div>
<div id="barChart_div" style="width: 60px; height: 50px;float:left;background-color: blue;"><p class="css-vertical-text">tab1</p></div>
<div id="stats_div" style="width: 60px; height: 50px; float:left;background-color: green; margin-top:50px;margin-left:-60px">tab2</div>
<div id="lineChart_div" style="clear:left; width: 60px; height: 50px;background-color: red;">tab3</div>
<div id="cdfChart_div" style="width: 60px; height: 50px;background-color: orange;">tab4</div>
</div>
<div class="fadein">
<div><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"></div>
<div><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"></div>
<div><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"></div>
</div>
</div>
Here's my css:
p.css-vertical-text {
writing-mode:tb-rl;
-webkit-transform:rotate(90deg);
white-space:nowrap;
display:block;
bottom:0;
font-family:‘Trebuchet MS’, Helvetica, sans-serif;
font-size:24px;
font-weight:normal;
}
.fadein {
position:relative;
height:572px;
width:100%;
left:0;
}
.fadein img {
position:absolute;
top:0;
width:95%;
height:572px;
left:60px;
}
.fadein div {
position:absolute;
height:100%;
width:100%;
}
#content_transparent {
z-index:2;
color:#FFFFFF;
text-align:center;
background:rgba(0, 0, 0, 0.5);
border:3px solid black;
height:1600px;
width:80%;
margin-left:10%;
margin-right:10%;
margin-top:30px;
}
#slideshow{
width:100%;
height:575px;
background-color:black;
}

You might be looking for jQuery Tabs.
It offers easy to use tab-functionality and is used to following way:
1) You include the jQuery and jQuery UI javascripts in your HTML document and include the jQuery UI CSS file
2) You define the tabs and their content as follows
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tabs-1"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"></div>
<div id="tabs-2"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"></div>
<div id="tabs-3"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"></div>
</div>
3) You create a javascript block to initiate the tabbing functionality as follows
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
4) That's it.

Scroll 2 DIV contents + main content with browser's main scrollbar

I can't figure out, on how to go around this problem for moving content within two pages + outside content.
I have following layout:
header + footer
book
pages with fixed width and height.
I want to scroll pages content from the main scrollbar without any page scroll bar (like gmail compose example)
The main problem is. book will show after header and if user is using smaller screen resolution, it will show scrollbar to scroll down to see book properly.
Then we have two pages, which content are different from each other and each page can be longer then the other one. so we want to scroll through all the data, before we continue scrolling back to footer again.
jsFiddle Example: http://jsfiddle.net/7vqzF/2/
It would be awesome to solve this from css only.
Layout Structure: (solution should have only one main browser scrollbar, to control the pages and outside book content from it.)

If I got your question right you are looking for the CSS attribute fixed. Here is some HTML including CSS that might do exactly what your are after:
<html>
<head>
<style>
body {
margin-top: 150px;
}
.header {
width: 100%;
position: fixed;
top: 0;
background-color: white;
border-bottom: 2px solid lightblue
}
.footer {
width: 100%;
position: fixed;
bottom: 0;
background-color: white;
border-top: 2px solid lightblue
}
.book table td {
vertical-align: top;
}
.page1, .page2 {
border: solid 1px red;
width: 400px;
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
<ul>
<li>home</li>
<li>contact us</li>
</ul>
</div>
<div class="book">
<table>
<tr>
<td>
<div class="page1">
<h2>Page1</h2>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
...
</div>
</td>
<td>
<div class="page2">
<h2>Page2</h2>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
...
</div>
</td>
</tr>
</table>
</div>
<div class="footer">
My Footer
</div>
</body>
</html>
Here is a screenshot from my browser showing the above HTML:
The Browser-Scrollbar scrolls only the page1/page2 <div> elemtents but not the header and footer elements.
And finally here is the jsFiddle Link for the online-demo.

Put your header part which needs to be in fixed in separate div and apply these styles.
<div class="fix">
<h1> Header</h1>
<menu><ul><li>home</li><li>contact us</li></ul></menu>
</div>
.fix{
position:fixed;
top:0px;
left:0px;
background:#FFF;
width:100%;
border-bottom:1px solid black;
}
for space add another div to bottom of the header
<div class="space"></div>
.space{
width:100%;
height:150px;
}
Here is the jsfiddle.

You can use the following approach with pure CSS and no tables.
See online demo here.
Result:
It means however that you need to change the document structure a little (I am using HTML5 elements but this can easily be changed into normal divs if required) - as you can see the structure is fairly simple:
<header>Header
<nav>Menu</nav>
</header>
<main>
<div class="page">
<h3>Page 1</h3>
scroll from main scrollbar
....
</div>
<div class="page">
<h3>Page 2</h3>
scroll from main scrollbar
....
</div>
</main>
<footer>Footer</footer>
Now it's just a matter of styling this so that you can use main scroll-bar to scroll "both" pages. The essential class in this context is:
.page {
float:left;
margin:70px 10px 50px 10px;
border:1px solid #000;
width:45%;
}
The important part with the page class is that its top and bottom margin is set to match header and footer. This is what makes the two pages visible even if the header and footer are fixed.
The rest of the CSS is just for example:
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
header {
position:fixed;
top:0;
width:100%;
height:70px;
font:32px sans-serif;
color:#fff;
background:#555;
}
nav {
position:absolute;
bottom:0;
font:12px sans-serif;
}
footer {
position:fixed;
width:100%;
bottom:0;
height:50px;
background:#555;
}

How do I achieve this layout without using Javascript?

I want a basic full width layout with a 250px sidebar on the right. Here's roughly what I want:
<-------Content-------><--250px sidebar-->
<---------------100% width--------------->
Is this possible without Javascript or tables?

Yes, of course:
see http://jsfiddle.net/whTwg/4/
HTML:
<div id="wrapper">
<div id="sidebar-wrapper">
<div id="sidebar">Sidebar</div>
</div>
<div id="main-wrapper">
<div id="main">Main</div>
</div>
</div>
CSS:
#wrapper{
overflow:hidden;
}
#main-wrapper{
overflow:hidden;
}
#sidebar-wrapper{
float:right;
width:250px;
max-width:50%;/* You should set a max-width */
}
/*Here you can add borders, paddings and margins */
#main{
background:#aaf;
border:10px solid blue;
}
#sidebar{
background:#faa;
border:10px solid red;
}
Note: instead of #wrapper{overflow:hidden} (or something different than visible), you could add <div style="clear:both"></div> after main-wrapper.
Edit:
You are right, I forgot to add #main-wrapper{overflow:hidden;}. I have fixed the link and the code.

<div style="float: left">
..... content ......
<div>
<div style="float: right; width: 250px;">
..... sidebar .....
</div>
<div class="clear"></div>
... other content
This is the CSS for the class="clear":
div.clear {
clear:both;
}
You can set the first div width when you see how much space you have.
Is this helpful?