I Recently try out the div with expand and collapse. Everything works perfect. Here is the fiddle with I make the bar as fixed with expand and collapse button whenever i increase the font size of the div then the button doesn't comes with the div proportionally. Here is the fiddle what i am expect clearly.
http://jsfiddle.net/vicky081/GyG3w/1/
.btnn
{
width: auto;
height: auto;
cursor:pointer;
background-color:#02adea;
position: absolute;
border:solid;
margin-left:3%;
border-color:#ffffff;
border-top-color:#02adea;
top:36px;
text-align: center;
padding-top: 7px;
color:white;
}
You can see that button comes outside the div. Is there is a way to show the button which is attached to the div even if i change the font size.
Any suggestion would be great.
Thanks.
With a top value of 100% the button is always stuck to the container whatever the font-size.
See it live http://jsfiddle.net/LeBen/UCTgR/ (I also added a CSS Normalize)
$(document).ready(function () {
$(".text").hide();
$(".btn").click(function(e){
var txt=$(this).html();
var flag = txt==="open";
if(flag){
$(".text").show();
$(this).html("close");
}
else{
$(".text").hide();
$(this).html("open");
}
});
});
.banner{
font-size:1.2em;
position:fixed;
width:100%;
}
.text {
background:#02adea;
text-align:center;
width:100%;
}
.btn{
background:#02adea;
border:5px solid white;
border-top-color: #02adea;
color:white;
text-align:center;
width:2em;
}
http://jsfiddle.net/GyG3w/5/
I suppose this is the effect you wanted, in this you can change the fixed div's font size as much you want, the rest of the elements' will be resized accordingly and the layout will be preserved
You can use bottom: -49px; instead of top: 36px;
Related
A common way to replace a standard input is display:none the input, and then add a background-image to the label.
CSS:
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]+label {
background: url('../images/checkbox_unchecked.png') left center no-repeat;
background-size: 25px;
}
input[type="checkbox"]:checked+label {
background: url('../images/checkbox_checked.png') left center no-repeat;
background-size: 25px;
}
The problem: The HTML is broken afterwards. When i want to change the direction of the elements, I have to change it inside the CSS (background: right).
How can I change the image/style of an input field without make it display:none first, and then change the background image? It has to work in Android 2.3.
EDIT: JSFiddle.
The simple fix for your rtl issue (assuming that is the main problem here, based on your JSFiddle demo), is to also style on the dir attribute when set to "rtl":
.styles[dir="rtl"] input[type="radio"]+label {
background-position: right; /* Set the background position to the right. */
padding-left: 0; /* Reset the left padding on the label. */
padding-right: 35px; /* Give the label some right padding. */
}
JSFiddle demo.
Everything I've used above should work on Android 2.3 according to Can I Use....
You can some css that acts on the rtl attribute:
.styles[dir="rtl"] input[type="radio"]+label {
padding: 0 35px 0 0;
background-position: right center;
}
Here's your demo on jsfiddle: http://jsfiddle.net/ab0xwfcs/2/
I'm not sure about the support of this method, but you could also use the CSS :before instead of setting background positions for each direction.
.styles input[type="radio"] {
display: none;
}
.styles input[type="radio"]+label:before {
content:"";
display:inline-block;
width:25px;
height:25px;
background:red;
}
.styles input[type="radio"]:checked+label:before {
content:"";
display:inline-block;
width:25px;
height:25px;
background:pink;
}
Demo on jsfiddle
You can also use this method on the input itself, without setting it's display to none.
(This will create an extra element, that will hide the default one under.)
input[type="radio"]:after {
content:"";
display:inline-block;
width:25px;
height:25px;
background:gray;
}
input[type="radio"]:checked:after {
content:"";
display:inline-block;
width:25px;
height:25px;
background:pink;
position:relative;
}
I'm a newbie; need some help! I created a left-aligned navigation menu with a slide-out submenu. I'm happy with everything except for the sub-menu's height. How can I make the entire slide-out menu (the opaque one) go to 100% height of the entire screen? Want it to look like this: http://perezweddings.com/blog/
Here's my jsfiddle: http://jsfiddle.net/alh3168/hE6Sv/10/
Do I need to change something in here?:
div.menu ul.second li a {
width: 150px;
bottom: auto;
min-height: 100%;
background-color: #B2CC7F;
color: #00293E;
text-decoration: none;
display: block;
padding: 7px 10px 0 0;
text-align: left;
cursor: pointer;
cursor: hand;
background: #000;
background-color:rgba(0,180,180,0.3);
padding-left:20px;
font-family: Neou-Bold;
src: url('Neou-Bold.otf');
font-size:10px;
letter-spacing:1.6px ;
}
Right now the color is on the sub-menu anchors. We need to move that to the parent ul.second element, and then add CSS to make that element fixed and span from the top to the bottom.
div.menu ul.second {
background-color:rgba(0,180,180,0.3);
top:0;
position: fixed;
bottom:0;
}
Once that has been done, we need to update the anchor style to set the background color of sub-menu items to transparent by default since the background color is coming from the parent element.
div.menu ul.second li a {
background-color:transparent;
}
You'll probably want to add some padding to the div.menu ul.second element as well and there are some other things you may want to adjust, but you can quickly add this CSS to the bottom of your fiddle to see it working.
I have a div with a fixed height. When I resize my browser window and the div's width becomes smaller, the elements inside the div jump below expanding the height. How can I make the elements visible by adding a horizontal scrollbar?
I have tried all CSS scroll properties, but could't make it work:
.dhButtonToolbar{
position:absolute;
top:6px;
left:0;
bottom: 5px;
width: 60px;
background-color:yellow;
border:0px solid white;
margin-left: 5px;
margin-right:5px;
margin-top: 5px;
}
#media screen and (max-aspect-ratio: 1/1) {
.dhButtonToolbar {
height: 55px;
left:5px;
overflow-y:auto; //here my elements jump below I want to add a horizontall scrollbar
right: 5px;
}
JSFidlee: http://jsfiddle.net/x7xm3/2/
Try resizing and elements will fall below!
Just add a body and give it a min-width. Is this what you wanted?.
Hope it helps.
I change in your jsfiddle. please check this.
jsFiddle: http://jsfiddle.net/x7xm3/16/
It completely working.please check.
I have a hidden div with a buttin that I would like to appear when you hover over the div 'person-wrap'. How can I do this? Should I use CSS tricks or can it be done with JQUERY?
JSFIDDLE:
http://jsfiddle.net/ceTdA/3/
The div I would like to have appear:
#buttons {
display: none;
position:absolute;
right:10px;
top:10px;
margin: 0px 0px 0px 0px;
height: 30px;
width: 225px;
overflow: auto;
}
Given that your #buttons div is a child of #person-wrap you can do it with just CSS:
#person-wrap:hover #buttons {
display : block;
}
Demo: http://jsfiddle.net/ceTdA/4/
You should try this code:
$("#person-wrap").hover(function() {
$(this).find('#buttons').show();
}, function() {
$(this).find('#buttons').hide();
});
nnnnnn explains a pure css way which is best, but it's pretty simple with jQuery as well, all it does is call the first function while the mouse is hovering and the second when the mouse leaves.
$("#person-wrap").hover(
function () {
$("#buttons").addClass("hover");
},
function () {
$("#buttons").removeClass("hover");
});
And simple css:
.hover{
display:inline;
}
add this css:
#profile-pic:hover #buttons{
display:inline;
}
here is working jsfiddle
I am trying to use a div that is set to 100% of the initial browser window, with the Backstretch plug-in applied to it, and have it animate on a click to resize to a smaller dimension, while another div underneath it resizes as well, allowing them to share the screen. All the functionality seems to work, accept that the div will resize and the backstretch will go with it initially, but after the animate function is over, the backstretch will snap back to 100 percent of the window. Even weirder is that when the entire browser is resized by the user, the backstretch will snap into the correct position, and remain there.
I put this into a jsfiddle and the problem works exactly the same way that it does in my code. The click function resizes the div, and the backstretch snaps out of it until the browser is resized. Normally I love trying to figure this kind of thing out, however I think this might be over my head, and I have a hard and fast deadline coming up and this problem has been holding me up for 2 weeks. Any insight would be tremendously helpful.
Heres the code I'm working with:
HTML
<div id="fullbleed">
<div class="button">CLICK</div></div>
<div id="article"></div>`
CSS
html, body {
height:100%;
}
body {
margin:0;
padding:0;
}
.button{
width: 70px;
height: 30px;
background-color: fuchsia;
bottom: 190px;
position: absolute;
cursor: pointer;
font-family: 'Open Sans' sans-serif;
font-weight: bold;
text-align: center;
padding: 3px;
font-size: 21px;
left: 41px;
}
#fullbleed{
position:inherit;
top:0;
left:0;
height:100%;
width:100%;
}
#article {
height:0px;
overflow: hidden;
margin-top: 30px;
background-color:aqua;
}
JS
$("#fullbleed").backstretch("http://dl.dropbox.com/u/515046/www/coffee-light.jpg");
$(".button").click(function() {
$("#fullbleed").animate({
height: "200px",
}, 1000);
$(".button").css({
"visibility": "hidden"
});
});
$(".button").click(function() {
$("#article").animate({
height: 5000,
}, 1000);
});