My code don't show browser full height with jQuery code
link -- https://goo.gl/RG60n1
here is my html --
<div class="container contentContainer">
<div class="row">
<div class="col-md-6 col-md-offset-3" id="topRow">
<h1>Get Work. Done</h1>
</div>
</div>
</div>
here css --
.contentContainer
{
background-image:url('laptop1.jpg');
height:400px;
width:100%;
background-size:cover;
}
And jquery --
<script>
$(".contentContainer").css("height",$(window).height());
</script>
i am using jQuery 1.11.2 min version
Turn jQuery on! jsfiddle.net/ntmd7c31
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Related
I've got Bootstrap3 page, and somewhere halfway is a row with full display height. How do I center the row's content vertically?
I already tried the "vertical-align:center" css property, but that doesn't seem to work (neither does 'middle' instead of 'center').
Here's a small live demo, or as a standalone HTML example:
<!DOCTYPE html><html><head><meta charset='utf-8'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css'>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js'></script>
<style type='text/css'>
.row { color:#ff0; }
.bg1 { background:#007; }
.bg2 { background:#060; }
.special { background:#600; height:100vh; vertical-align:center; }
</style>
</head><body>
<div class="container-fluid text-center">
<div class="row bg1">Top row<br><br></div>
<div class="row bg2">Another row<br>With some content<br><br></div>
<div class="row bg1">....Bla bla bla....<br>sadf asdf adsf asdf asdf<br><br></div>
<div class="row special">
<h2>Hello</h2>
This should be vertically centered
</div>
<div class="row bg2">And here's yet another row<br><br></div>
<div class="row bg1">The bottom row<br><br></div>
</div>
</body></html>
.row has negative margins for the columns, using without inner col-X-X is going to give you odd results. Read the docs on how to use the grid system.
There are a variety of ways of vertical-align:middle (not center) http://css-tricks.com/centering-in-the-unknown/
DEMO: http://jsfiddle.net/mLopevv8/
READ ME: Make another class for .row, remove .container-fluid, convert the parent of the vertically aligned middle content to a display:table and the child is now a display:table-cell.
CSS
.special { background:#600; height:100vh; display:table;width:100%;}
.v-m {display:table-cell;vertical-align:middle}
HTML
<div class="text-center">
<div class="my-row bg1">Top row<br><br></div>
<div class="my-row bg2">Another row<br>With some content<br><br></div>
<div class="my-row bg1">....Bla bla bla....<br>sadf asdf adsf asdf asdf<br><br></div>
<div class="my-row special">
<div class="v-m">
<h1>Hello</h1>
This should be vertically centered!
</div>
</div>
<div class="my-row bg2">And here's yet another row<br><br></div>
<div class="my-row bg1">-- The bottom row --<br><br>
</div>
</div>
One way is to give the line height to the text which you want to place at the center vertically and horizontally ,but the line height should be equal to the half of the height of the div in which it is being placed.
or
U can check out this link , this might help you:
http://jsfiddle.net/jasongennaro/unfwL/1/
I am using Zurb Foundation 5 to build a site. My site has a navigation panel against the left side of the screen. When open, I want the nav area to take up 3 columns. The actual content will take up the remaining space. Here is the HTML I have thus far:
<body>
<div style="width:100%; max-width:100%; height:100%;">
<div id="navDiv" class="large-3 columns" style="background-color:#2D2D2D;height:100%;">
<!-- Nav Items Go Here -->
</div>
<div class="large-9 columns">
<!-- Main Content Goes Here -->
</div>
</div>
</body>
Each nav item has an icon and some text. I need to be able to collapse the navDiv in a way that it shrinks down so that only the icons are showing. The text goes away. At the same time, I need the main content area to grow to take up the space that was used by the nav area. I cannot figure out how to do this in the realm of zurb. From what I can tell, the grid is not dynamic. Is it possible to do what I'm trying with a grid? If so, how?
THank you!
If you want to use Foundation (with jQuery dependency) and no other add-ons, you can use a jQuery event handler to toggle the classes used by Foundation. It feels like a hack, but it works.
HTML
<body>
<button>Toggle sidebar</button>
<div class="row">
<div id="navDiv" class="small-2 medium-1 columns">
<img src="http://dummyimage.com/48"><span>Item 1</span>
</div>
<div id="content" class="small-10 medium-11 columns">
<!-- Content goes here -->
</div>
</div>
</body>
CSS
.small-2 span {
/* Hide text when sidebar is small */
display: none;
}
JavaScript + jQuery
$(function() {
$('button').click(function() {
// Resize sidebar
var navDiv = $('#navDiv');
navDiv.toggleClass('small-3');
navDiv.toggleClass('small-2');
navDiv.toggleClass('medium-2');
navDiv.toggleClass('medium-1');
// Resize content
var content = $('#content');
content.toggleClass('small-9');
content.toggleClass('small-10');
content.toggleClass('medium-10');
content.toggleClass('medium-11');
});
});
Demo on Plunker
Done this a whole bunch of times, but now it's acting out for some reason. Though I'll probably feel very dumb, after somebody points out the mistake.
Live link:
http://soloveich.com/project6
I'm trying to build a header, but getting quite a few problems at the same time
1) Background images for class header and #soc don't show
2) that image with large text does not align to center
3) I get the post on the right side of the header, while it has to be under it.
css is properly connected (tried changing body background color)
header code
<div class="header">
<header>
<div class="row-fluid">
<div class="col-lg-3"><div class="pull-right"><img src="wp-content/themes/greendream/images/logo.png"> </div></div>
<div class="col-lg-6"><div id="text"><img src="wp-content/themes/greendream/images/text.png"></div></div>
<div class="col-lg-3"><div id="soc"></div></div>
</div>
</header>
</div>
css
.header {
background-image: url(images/hdbg.jpg);
}
#text {
width: 578px;
margin:o auto;
}
#soc {
background-image: url(images/soc.png);
}
You need to start by studying how the grid system in Bootstrap 3 works.
Basically, if you want your content centered, you need to place it in a container. Then you set up your rows and columns.
Something like this:
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="wp-content/themes/greendream/images/logo.png">
</div>
<div class="col-md-6">
<img src="wp-content/themes/greendream/images/text.png">
</div>
</div>
</div>
</body>
Note: There is no row-fluid in Bootstrap 3. A lot of what you're trying to do will only work in Bootstrap 2.
This would be the main markup:
<div class="mancha">
<div class="logo"></div>
<div id="content-area" class="espacio">
<div class="eltitular">HEADER</div>
<div class="lacarta">LEFT CONTENT</div>
<div id="sidebar">RIGHT CONTENT</div>
</div>
</div>
Where (allthough there are many more rules wich can be seen in the link this are the widths)
.espacio{
margin-left: 192px;
background: transparent;
width:808px !important
}
.lacarta{
width:595px;
float:left;
}
#sidebar{
width:210px;
float:right
}
The problem is that .lacarta and #sidebar are not floating one next to other (this only happens in IE8 or lower)
It can be tested here: http://goo.gl/ksFQI (if you compare to firefox/chrome you will se that the sidebar is not in the right side of the container..)
I checked with the IE8 developer tools that the container seems to be big enough for both elements..
Any idea what I missed?
-EDIT-
Current IE:
Wanted (like in Firefox):
Actually, there is a bug in IE8 where right-floated elements seem to clear:left.
http://blogs.msdn.com/b/askie/archive/2009/03/23/right-floated-element-in-internet-explorer-8-is-positioned-differently-than-internet-explorer-7.aspx
If you don't want to add anything to your HTML at all, you can slightly restructure it for a quick fix. Put the right-floated sidebar first, ie:
<div id="content-area" class="espacio">
<div class="eltitular">HEADER</div>
<div id="sidebar">RIGHT CONTENT</div>
<div class="lacarta">LEFT CONTENT</div>
</div>
Add parent container:
<div class="mancha">
<div class="logo"></div>
<div id="content-area" class="espacio">
<div class="eltitular">HEADER</div>
<div>
<div class="lacarta">LEFT CONTENT</div>
<div id="sidebar">RIGHT CONTENT</div>
</div>
</div>
</div>
Does this jsfiddle fix it: http://jsfiddle.net/hgrHq/
.lacarta{
width:590px;
float:left;
}
Just reduced the width of .lacarta a bit.
As an aside, you might want to consider a responsive grid system for laying out your coulmns like this. For example:
http://cssgrid.net/
http://semantic.gs/
Then you won't have lining up issues like this ... and it'll respond to all screen sizes.
What exactly the Prob is...?? I just Tested the link and found those menu were not aligned .. and here the solution is .menu li{ float:left} .. for more jus put a screen shot if Possible :)
I´m having a problem with divs when I´m trying to apply background-color to #header for example so it will cover all of the header.
it dosen't show any changes that I made to the css of the #header, #maincontainer and more can you please help me I have tried so many things and nothings seems to work.
Here is the Html sample :
<div id="wrapper">
<div class="container">
<div class="span-24 showgrid">
<div id="header">
<div id="logo"><img src="logo.png" alt="Iris logo"></div>
<div id="slogan">
<h1>Íris</h1>
<h2>Ættleiðingartengd fræðsla</h2>
</div>
<div id="searchbar"><input class="text" onfocus="this.value=''" type="text" name="searchbar" value="Leita.."></div>
</div><!-- end .header -->
Here is the rest of the HTML if you prefer to see to all :
http://pastebin.com/8AyENrdn
It's hard to tell from what you have described and no CSS - Try this
#header {overflow:hidden;background:#eee;}