Develop Reference

Overflow with CSS, need sometimes a scrollbar and sometimes not (overlay box) dynamical screenheight

i've a problem with height:auto and overflow:auto;.
I've created a overlay with dynamical content. Sometimes the content leaves the visible screen and then a scrollbar should be shown to prevent cutting the content. My bad looking solution is setting height to 100% that fills the screen with a empty white area. If the height is missing or not set all browsers arn't able to reconize that the acp_message should have a scrollbar
How to be sure that the scrollbar will be shown if height is auto?
$(document).ready(function() {
var id;
$('.order_options').on('click', 'span', function (e) {
//$('#activator').click(function(){
$('#overlay').fadeIn('fast',function(){
$('#box').animate({'top':'60px'},500);
$('#box').css('height', '100%');
//$('#box').css('height', 'auto');
$('#acp_message').css('margin-bottom', '250px');
//$('#box').css('margin-bottom', '30px');
});
set_rechnung_erstellen(e.target.id);
});
});
now the css:
.overlay {
background:transparent url(../image/overlay.png) repeat top left;
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;
}
.box {
position:fixed;
top:-200px;
left:30%;
right:30%;
background-color:#fff;
color:#7F7F7F;
padding:20px;
border:2px solid #ccc;
-moz-border-radius: 20px;
-webkit-border-radius:20px;
-khtml-border-radius:20px;
-moz-box-shadow: 0 1px 5px #333;
-webkit-box-shadow: 0 1px 5px #333;
z-index:101;
/*height:auto;*/
/*height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');*/
}
.box h1{
border-bottom: 1px dashed #7F7F7F;
margin:-20px -20px 0px -20px;
padding:10px;
background-color:#FFEFEF;
color:#EF7777;
-moz-border-radius:20px 20px 0px 0px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-khtml-border-top-left-radius: 20px;
-khtml-border-top-right-radius: 20px;
}
.
#acp_message {
overflow:auto;
}
and finally the HTML
<div class="box" id="box" style="overflow:auto;">
<a class="boxclose" id="boxclose">Schließen</a>
<h1>Rechnung erstellen</h1>
<p id="acp_message">
Rechnung erstellen
</p>
</div>

Firstly, you have a . before your rule for #acp_message. This will break that rule, so make sure that is not in your code.
Secondly, use a max-height and overflow:auto to do what you are looking for. And these have to both be applied to the same element:
.box { height: auto; max-height:100%; overflow:auto; }
If you want to get the exact height of the screen and apply it in jQuery, you can do that as well:
$('.box').css('max-height', $(window).height() + 'px');

Using TableFilter, how do you alter the text in the dropdown?

I'm using tablefilter.js to generate dropdowns at the top of an HTML table. In a couple of the table rows, I have a span that serves as a tooltip on hover, so it doesn't show unless a mouse is hovering over it.
<td>
<a class="tooltip" href="#" id="color">Red
<span>
<strong>Favorite Color</strong><br />
If this is not your favorite color,
please make changes on this page.
</span>
</a>
</td>
The problem is that the dropdown text at the top of the column is including the span, so when a user clicks on the dropdown, it says "Red Favorite Color If this is not ..." instead of simply "Red."
Is there any way to prevent the tablefilter plugin from grabbing anything after the initial anchor that says "Red?"
Here's the CSS for the tooltip:
a.tooltip {
outline:none;
text-decoration:none;
}
a.tooltip strong {
line-height:30px;
}
a.tooltip span {
display:none;
line-height:16px;
margin-left:28px;
margin-top:-30px;
padding:14px 20px;
width:240px;
z-index:10;
}
a.tooltip:hover span {
border:1px solid #DCA;
background:#fffAF0;
color:#111;
display:block;
position:absolute;
}
.callout {
border:0;
left:-12px;
position:absolute;
top:30px;
z-index:20;
}
a.tooltip span
{
border-radius:4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 5px 5px 8px #CCC;
-webkit-box-shadow: 5px 5px 8px #CCC;
box-shadow: 5px 5px 8px #CCC;
}

I typically use lists for dropdowns. It seems that the word red is outside of an element. Maybe place the word 'red' inside tags ? or a comma after hover in your css after a.tooltip:hover, span {

Javascript Push out Menu

Currently I have a menu that comes out from the side of the screen but it just overlaps the content on the page. I need it to reduce the main content size or to sqeeze/push it.
Hopefully this is enough code for you to understand. My project is huge so I cant post all the code
I want my menu to behave like the right push menu here: http://tympanus.net/Blueprints/SlidePushMenus/
My Javascript:
$(document).ready(function() {
$(".Help").click(function() {
var $body = $("#sliderMenu");
$body.animate({
right: parseInt($body.css("right"), 10) == 0 ? -($("#sliderBody").outerWidth()) : 0
});
});
});
CSS:
#sliderMenu
{
position:absolute;
top:0px;
right:-360px;
height: 100%;
z-index: 1000;
}
#sliderBody
{
float:right;
top:0px;
width:349px;
background:#333333;
border-left: 2px solid #00B463;
border-top: 2px solid #00B463;
border-bottom: 1px solid black;
padding-left: 10px;
height: 100%;
color: White ;
padding-top: 5px;
}

CSS triangle side with round on left? PART 2

This is what it should look like:
(source: kerrydeaf.com)
span.trig_italic2{color:#000000; line-height:17px;font-size:12px;font-family:opensansitalic;
width: 100px;
height: 36px;
background: #FFCC05;
position: relative;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
border-radius:5px 0 0 5px;
margin-right:50px;
padding:3px 4px 3px 4px;}
span.trig_italic2:before
{
content:"";
display:block;
position: absolute;
right: -22.5px;
top:0;
width: 0;
height: 0;
border: 11px solid transparent;
border-color: transparent transparent #FFCC05 #FFCC05;
}
Here is a jsfiddle:
http://jsfiddle.net/alma/zQKhb/2/
The problem is its hard to have rectangular box with corners to align the triangle as above?
It is for iphone app using Hybrid coding.
UPDATE: #andyb. Thank you for the update and this is what I see as below:
(source: kerrydeaf.com)
UPDATE: #andyb. It is now solved and a screen shot from iOS 6 stimulator.
(source: kerrydeaf.com)
UPDATE: Question: How do I move a yellow box down and touch the box a light blue box without leaving a gap?
(source: kerrydeaf.com)
UPDATE: Answer: It is now solved: added this margin-bottom:-8.5px on span.trig_italic2 CSS and it worked. (Image is not included)

Instead of creating a yellow triangle, how about creating a white triangle to chop off the end?
This does rely on making the <span> a bit wider, since the end will be taken up with the white triangle. So the span can be given display:inline-block in order for the width to take affect. I also had to give the height a smaller value and make the line-height equal to the font-size to keep the text vertically aligned in the middle of the block.
Edit: Since the background is a non-solid colour, an alternate approach would be to use a linear-gradient to chop off the end. The (slight) drawback to this approach is that the start of the chopping off point is hard-coded in the CSS and will not adapt to variable width content.
Updated demo (Webkit only)
span.trig_italic2 {
color:#000000;
line-height:12px;
font-size:12px;
font-family:opensansitalic;
width:136px;
display:inline-block;
height: 12px;
background: #FFCC05;
position: relative;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
border-radius:5px 0 0 5px;
margin-right:50px;
padding:3px 4px 3px 4px;
background:-webkit-linear-gradient(45deg, #FFCC05 100px, transparent 100px);
}
The original answer which works with solid colour backgrounds is left below.
Original demo (Webkit only)
span.trig_italic2 {
color:#000000;
line-height:12px;
font-size:12px;
font-family:opensansitalic;
width:136px;
display:inline-block;
height:12px;
background: #FFCC05;
position: relative;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
border-radius:5px 0 0 5px;
margin-right:50px;
padding:3px 4px 3px 4px;
}
span.trig_italic2:after {
content:"";
display:block;
position: absolute;
right:0;
top:0;
width:0;
border:12px solid transparent;
border-color:#fff #fff transparent transparent;
}
​

The problem is in padding that increases box size unless you set box-sizing to border-box.
I would do this: http://jsfiddle.net/zQKhb/9/

Having issue with css hover effect

Please take a look at this link. Hover cursor on any movie thumbnail. Have you noticed that, all li elements moving down? How can I fix that problem?
Also, click on any thumbnail, player div will slide down. there is no box shadow under #player_container even if I set it in css files
#player_container{
display:none;
height:510px;
width: 100%;
background-image: url(images/bg/bg_tile.jpg);
margin-top: -510px;
padding-top: 20px;
-moz-box-shadow: 0px 10px 5px #888;
-webkit-box-shadow: 0px 10px 5px #888;
box-shadow: 0px 10px 5px #888;
}

On video add a transparent border seems to fix it
.video {
border: 1px solid transparent;
float: left;
font-size: 11px;
height: 150px;
margin: 0 25px 25px 0;
width: 228px;
}
There is a couple off different way to fix the next part off your question. One quick way is too add another container like
<div style="display: block;" class="gradient sh" id="player_container">
<div class="jquery-youtube-tubeplayer" id="player">
<div id="tubeplayer-player-container1324082555277"><iframe width="853" height="480" frameborder="0" src="http://www.youtube.com/embed/LxBGDijiii0?autoplay=1&autohide=1&controls=1&rel=0&fs=1&wmode=transparent&showinfo=0&modestbranding=0&start=0&theme=dark&color=red&enablejsapi=1&origin=http://tural.us" title="YouTube video player" allowfullscreen=""></iframe></div></div>.
<div class="bottomSpan"></div>
</div>
and put your box shadow on this
.bottomSpan {
box-shadow: 0 10px 5px #888888;
display: block;
height: 17px;
position: absolute;
width: 100%;
}

For me changing the margin on the corresponding < li > would make more sense.

That is because on hover you are adding a border which makes the container 2px bigger
the solution to give the initial class a border
.video {
border: 1px solid #fff
float: left;
font-size: 11px;
height: 150px;
margin: 0 25px 25px 0;
width: 228px;
}
Second Problem:
To make z-index work you need to give it a position:relative property
#player_container {
display: none;
height: 510px;
width: 100%;
background-image: url(images/bg/bg_tile.jpg);
padding-top: 20px;
-moz-box-shadow: 0px 10px 5px #888;
-webkit-box-shadow: 0px 10px 5px #888;
box-shadow: 0px 10px 5px #888;
z-index: 2;
position: relative;
}

You're adding a border when the mouse hovers but not reducing the size of the element. The "height" and "width" of an element, in the W3C box model, describe the size of the contents of a block element. The padding and the border are added to that.
Some browsers allow you to switch back to the "border-box" box sizing model:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
However Internet Explorer wont, I don't think, understand that. Maybe IE9 or 10 would understand:
-ms-box-sizing: border-box;
(You'd put that on the ".video" style.)
edit — as to the problem with the shadow on the player: there's no shadow because there's no room for a shadow. If you make the player box "position: absolute", and correspondingly adjust the content somehow (maybe give the "wrapper" div a big top padding the same as the player size) then you'll see a shadow.
You really should be using something like Firebug to play with the CSS interactively.

I'm afraid your mixing things up a bit:
Your background-image is set on #player-container - if you want #player-container to have a shadow, you'll need an extra containing div for this background. Right now #player-containerdoes have shadow, but since it's 100% wide, and fills the vertical space, the shadow doesn't show.
Your player is exactly 853px x 480px, so you'll have to set #player-container to exactly these dimensions (no padding, no margin, they will be added to the width/height)
Add padding to the extra containing div, which also holds the background.
also (but not so important): #player-container has width:100% - that makes no sense - default is width:auto, so #player-container will automatically take 100% width