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/
Related
This is the layout I am trying to achieve: https://jsfiddle.net/h0oa3Lps/ All keys are the same size.
In my application I have this code. The js is at the bottom of my jade file:
$('.keyboard')
.keyboard({
layout: 'custom',
customLayout: {
'default' : [
'1 2 3 {c}',
'4 5 6 {b}',
'7 8 9 {dec}',
'{left} {right} 0 {a}'
]
},
maxLength : 6,
restrictInput : true,
useCombos : false,
acceptValid : true,
validate : function(keyboard, value, isClosing){
// only make valid if input is between 0 and 100 inclusive
return value >= 0.0 && value <= 100.0;
}
})
.addTyping();
When using css/keyboard.min.css, the left arrow, right arrow and backspace keys are slightly larger than the other keys. Also the text positioning is off. Image:
If I switch to css/keyboard-basic.min.css the arrow keys are the same size as regular keys but the esc, backspace, and accept keys are twice the size as the regular keys. Also this takes up half of the screen (since it's not using the jquery-ui positioning). Image:
How do I enforce uniform key size?
If it makes any difference I am using Node, Express and Foundation v5.5.3 plus I have just updated to the latest versions of jQuery, jQuery-ui and jQuery.keyboard.
To fix this issue I copied the unminified css of keyboard.css to a keyboard-butchered.css. I then started experimenting with the styles in keyboard-basic.css and eventually came up with the following that partially answered my question:
.ui-keyboard {
/* adjust overall keyboard size using "font-size" */
font-size: 28px; /* increase button size for small screen */
text-align: center;
background: #fefefe;
border: 1px solid #aaa;
padding: 4px;
/* include the following setting to place the
keyboard at the bottom of the browser window */
left: 0px;
top: auto;
/*position: fixed;*/
position: absolute;
white-space: nowrap;
overflow-x: auto;
/* see issue #484 */
-ms-touch-action: manipulation;
touch-action: manipulation;
}
I then mixed in the style for the keyboard button. This gives the correct style as seen in the jsfiddle demo (but jumbo sized).
.ui-keyboard-button {
border: 1px solid #aaa;
padding: 0 0.5em;
margin: 1px;
min-width: 3em;
height: 3em;
line-height: 3em;
vertical-align: top;
font-family: Helvetica, Arial, sans-serif;
color: #333;
text-align: center;
border-radius: 5px;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
background: white;
background-image: -webkit-linear-gradient(-90deg, white 0%, #e3e3e3 100%);
background-image: linear-gradient(-90deg, white 0%, #e3e3e3 100%);
cursor: pointer;
overflow: hidden;
-moz-user-focus: ignore;
}
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');
I have a button. On click on this button, i want to show a div to the right side of the button, just like tooltip.
This button can be anywhere on the screen. How to show it on the right & make it responsive?
DEMO
CSS
.tooltip {
background-color: red;
background-color:#EDEDED;
/*background color of tooltip*/
border:1px solid black;
position:absolute;
top:50px;
z-index:100;
line-height:1.3em;
padding:8px;
width:200px;
/*default width of tooltip*/
border-radius:8px;
/*CSS3 border radius*/
-moz-border-radius:8px;
-webkit-border-radius:8px;
box-shadow:0 0 10px #888888;
/*CSS3 shadow*/
-moz-box-shadow:0 0 10px #888888;
-webkit-box-shadow:0 0 10px #888888;
}
Reponsive is a little more tricky, but this will position your tooltip to the left of your button (as dynamically as possible for now):
Fiddle Demo
$('#tooltip').click(function () {
var objButton = $(this);
var objTooltip = objButton.next();
var objPosition = objButton.position();
// Left adds width + padding + offset
$(".tooltip").css({"top" : objPosition.top, "left" : (objButton.width() + 26) + 'px'}).toggle();
});
As Alex mentioned, making it responsive will be tricky. But as an alternative, according to the size of the device, you could either place the tool-tip on right or bottom. So to display it on right, you could use as follows:
.tooltip {
background-color:#EDEDED;
border:1px solid black;
border-radius: 3px 3px 3px 3px;
margin-left: 8px;
padding: 1px 6px;
z-index: 999;
position: absolute;
display: none;
}
DEMO
With the above example, even if you add text before the button, the tool tip aligns properly.
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
I am using jquery .animate() to change the width of an <li> tag. I have text in the <li> encased in <p> tags so that I can center it, however, when the animation happens the text is moved down by 50% of the <li> element, i do not know if the 50% is releated or just coincidence.
my HTML:
<div id="about_nav">
<ul>
<li id="button_welcome"<p>Welcome</p></li>
<li id="button_services"><p>Services</p></li>
<li id="button_naming"><p>Naming</p></li>
<li id="button_creating"><p>Creating Brands</p></li>
<li id="button_bizam"><p>Bizam What?</p></li>
</ul>
</div>
my jquery code is:
$('#button_welcome').click(function(){
if($(this)!=previous){ //checks if it was clicked last
if(previous!=null){ //checks if the previous element exists
previous.animate({width: 130},150); //resets previous
}
$(this).animate({width: 163},150); //animates current
previous = $(this); //assigns current to previous
$('#about_content').children().hide(); //resets tabs window
$('#tab_welcome').show(); //displays correct tab
}
});
And my css:
#about_nav{
float:left;
display:block;
margin-left:0px;
overflow:hidden;
padding-right:10px;
}
#about_nav ul{
list-style:none;
padding:0;
}
#about_nav li{
height:48px;
width:130px;
background: #613675; /* old browsers */
background: -moz-linear-gradient(top, #613675 0%, #9145B5 50%, #613675 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#613675), color-stop(50%,#9145B5), color-stop(100%,#613675)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#613675', endColorstr='#613675',GradientType=0 ); /* ie */
background: -o-linear-gradient(top, #613675 0%,#9145B5 50%,#613675 100%); /* opera */
text-align:middle;
margin-bottom:15px;
-moz-border-radius-bottomright: 6px 4px;
bottom-right-border-radius: 6px 4px;
-webkit-border-bottom-right-radius: 6px 4px;
-moz-border-radius-topright: 6px 4px;
top-right-border-radius: 6px 4px;
-webkit-border-top-right-radius: 6px 4px;
-moz-box-shadow: 0px 3px 8px 3px #444;
-webkit-box-shadow: 0px 3px 8px 3px #444;
box-shadow: 0px 3px 8px 3px #444;
}
#about_nav li p{
padding-top:19px;
padding-bottom:19px;
text-align:right;
margin-right:10px;
vertical-align:middle;
}
Also, my comparison of $(this)!=previous does not seem to work.
So, how can i stop my text moving and keep it centered in the <li> and can you help my with my comparison?
Cheers,
Fraser
P tags are rendered inline, whereas divs are rendered as blocks. Try settings the style of the p tags to display:block; and it should work.
First: close this li tag as others have said above.
<li id="button_welcome"><p>Welcome</p></li>
Second: change your p css to this.
#about_nav li p{
padding: 0;
margin: 0 10px 0 0;
height: 100%;
padding-top: 15px; /* change this to adjust height of the p tag */
text-align: right;
}
Also, with the code given you are not defining 'previous'. I would need to see the rest of your code to see why that is not working.
JsFiddle : http://jsfiddle.net/nXgSa/
One line easy fix:
$('#myDiv > p').css('display','block');
Also, I noticed in your example you put :
<li id="button_welcome"<p>Welcome</p></li>
You might have also forgot to close your < li > tag.
Ultimate fix :
Looking at the element in the development tools during the animation, it turns out that jQuery apply a style overflow: hidden; to the element during the whole transformation.
To fix this, just add the overflow: visible property to your .animate() function :
if(previous!=null) { //checks if the previous element exists
previous.animate({
overflow: 'visible',
width: 130
}, 150);
}
$(this).animate({
overflow: 'visible',
width: 163
}, 150); //animates current
Here is the JSFiddle to test that the <p> tags are not going down anymore : http://jsfiddle.net/jpreynat/28fmw4vy/1/