I am having difficulties creating a side-bar toolbox on my jQuery-mobile app.
I want a render like this : http://www.paultrifa.com/envato/themeforest/side/red/preview/ with a fixed left navbar.
I saw in the document that the header and footer have native "fixed" feature, but can't find something out of box for my needs.
I have tested with the Grid system (one with fixed size in PIXEL - for the toolbox) and the other part (the content of the page) in responsive but it's very buggy !
And how do i have to structure my code? The best way will be to put the sidebar HTML code outside the page container, but i have some problems.
I tried with a basic CSS:
.sidebar{
display:inline-block;
width:47px;
float:left;
height:100%;
position:fixed;
background-image:url(images/sidebar-bg.png);
}
It works but the content of the page is cropped. I have to re-size the width of the "page" container, but the size of my panel is in pixels, so there I have another problem...
If anyone has some tips, it will be great!
Edit :
Full code :
<div data-role="page" data-theme="a">
<!-- header -->
<div data-role="header">
</div> <!-- /header -->
<!-- content -->
<div data-role="content">
<div class="ui-grid-b my-breakpoint">
<div class="ui-block-a">
<div class="sidebar">
<!-- SIDEBAR CONTENT -->
</div>
</div>
<div class="ui-block-b">
{% block body %}
{% endblock %}
</div>
</div>
</div> <!-- /content -->
<!-- footer -->
<div data-role="footer">
</div><!-- /footer -->
</div><!-- /page -->
My problem here is that the toolbar is beetween the header and the footer...
Here is a fiddle I made: http://jsfiddle.net/ezanker/xTFRr/. Does that do what you want?
On pagebeforeshow, I size the content div to the height of the screen:
$('#page1').on("pagebeforeshow", function(e){
var viewport_height = $(window).height();
var content = $('#contentDiv');
var content_height = viewport_height - 5;
content_height -= (content.outerHeight() - content.height());
content.height(content_height);
});
Within the page content, I have a sidebar div and mainCont div with the following CSS:
.sidebar{
display:inline-block;
position:absolute;
top: 0; left: 0; bottom: 0;
width:47px;
background-color:#C34848;
}
.mainCont{
display:inline-block;
position:absolute;
top: 0; left: 0; bottom: 0; right: 0;
margin-left: 47px;
overflow: auto;
padding: 12px;
-webkit-overflow-scrolling: touch;
}
Absolute positioning is used to place the sidebar on the left, and then the mainCont div is absolutely positions with scrolling enabled.
I think you need to not float this, but you should absolutely position it to the left. Then you need the make the rest of your page fill around it. Without more code, or a link, I can't give an example, but you should be able to catch my drift.
Related
I'm trying to replicate a design pattern I often see on webpages. I'd like the content of my page to start after the full height of the window.
I have a header with a bunch of links which are centered both vertically and horizontally in my screen and I would like the first paragraph not to be displayed on the page (you should scroll to see it, you should only see the header when you land on the page).
I've tried to apply a margin-top:100% to my content but it is way too far in the bottom of the page since the height of the header is added to the margin.
Schematically this would be something like this
<body>
<!-- You can see this when you load the page -->
<div id="header">
blablabla
Index
Contact
...
</div>
<!-- You should scroll to see this -->
<div id="content">
<p>...</p>
</div>
</body>
In javascript this would like this :
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var hheight = document.getElementById('header').offsetHeight;
document.getElementById("content").style.marginTop = (height - hheight)+ "px";
Any hints on how to do that? I often see these kind of patterns on mobile designs but I never figured out how to do it. I can do it using javascript, but I think there might be a way of doing it with pure css ...
Use vh units. 100vh is the height of the viewport. Here's a reference - https://developer.mozilla.org/en-US/docs/Web/CSS/length
body {
margin: 0;
}
#header {
height: 100vh;
background: #eee;
}
<body>
<!-- You can see this when you load the page -->
<div id="header">
blablabla
Index
Contact
...
</div>
<!-- You should scroll to see this -->
<div id="content">
<p>...</p>
</div>
</body>
I'm creating a website and I want each section to take up the full screen. I have:
html, body {
height: 100%;
width: 100%;
margin: 0;
}
and each section has 100% height and width and relative position. Inside the second section, I want to create four divs that take up each corner. They share a class which has height and width 50% and absolute position. I tried to position them individually by selecting each id and giving them top:0 left:0, top:0 right: 0, and so on.
The problem is, the left and right positioning works, but when I try to position the top or bottom, the div will go to the top or bottom of the first section instead of the second. I think it might be an issue with having two 100% divs on top of each other, but I'm not sure. Would really appreciate any advice!
After see your fiddle, i see you wrote wrong the word "position" in class ".work", beside you can add an div clear between two divs ".hero" and ".work", it will work
<!--==== HEADER =============================================-->
<div class="header">
<div class="container">
<ul>
<li>Home</li><!--
--><li>Work</li><!--
--><li>About</li><!--
--><li>Contact</li>
</ul>
</div><!-- container -->
</div><!-- header -->
<!--===== HERO =============================================-->
<div class='hero' data-type="background" data-speed="10">
<div class='name'>
<h1>kdjfkd</h1>
<h2>fdasfdr</h2>
<h2><span >fgafd</span></h2>
</div>
</div><!-- hero -->
<div style="clear:both"></div>
<!-- ============= WORK ================== -->
<div class='work'>
<div class="same2" style="background-color:red; top:0;left:0"></div>
<div class="same2" style="background-color:yellow; top:0;right:0"></div>
<div class="same2" style="background-color:white; bottom:0;left:0"></div>
<div class="same2"style="background-color:green; bottom:0;right:0"></div>
</div>
.work{
height: 100%;
width: 100%;
position: relative;
}
Demo
Edit: not need "clear:both" at all, it still work fine
I'm trying to figure out how to stack two boxes in my view using HTML/CSS, for a mobile web application. I don't want to use JavaScript, or hardcode values anywhere within this skeleton design.
Requirements:
top box is dynamic height, contents need to be absolutely positioned and account for overflow (which is to be hidden if out of bounds)
bottom box is fixed height
http://i.imgur.com/Zun8oIi.png
I've been messing around, and came up with this here. It works in Safari and Firefox. However, what I am not sure of, is that it is valid CSS. Basically, if I deploy this web app, do I have to worry about it breaking in the future because I'm violating some arcane and obscure styling rule? If so... how can I fix the code, so that it's valid?
I'm not concerned about a browser breaking it because they farked up the rendering engine... because it'll get fixed. I'm concerned about whether or not this is valid code to begin with.
Here's the code, there's the CSS styling included in the fiddle
<!-- this is the body of the page, with padding -->
<div class="BodyContainer" >
<!-- define our table -->
<div class="table" style="padding: 0; margin: 0; width: 96vw">
<!-- row -->
<div style="display: table-row; padding: 0; margin: 0">
<!-- cell -->
<!-- this is the cell that needs to be dynamic height -->
<!-- and overflow hidden any possible content as well -->
<div class="cell" style="width: 100%">
<!-- relative inner cell -->
<div style="position:relative; height: 100%; padding: 0">
<!-- absolute hidden cell that takes up the entire space -->
<div style="position:absolute; top: 0; bottom:0; left: 0; right:0; padding: 0; background: yellow; overflow: hidden;">
This text appears on the top
<!-- fixed bottom content -->
<div style="position: absolute; bottom: 0">
This text appears on the bottom of the cell
</div>
</div>
</div>
</div>
</div>
<div style="display: table-row">
<!-- bottom row that's fixed size -->
<div class="cell" style="background-color: red; border-top: 2vw solid black;">
<!-- content that will change on page to page -->
<div style="height: 20vw !important;">
foo
</div>
</div>
</div>
</div>
</div>
Looks solid to me. It's valid CSS3 and I can't find anything to suggest support for the style here will be dropped.
I´m getting crazy here. I designed a site, scrolling from left to the right, but I can´t get the content for each ¨page¨ scrolling.
Instead the content sticks on top.
Please have a look here
The button (skull with pistons and info text) should stick on the page and move if navigation gets clicked
here is the code:
<div id="section_home" class="section_holder1"><!-- BEGIN SECTION "HOME -->
<div class="container"><!-- BEGIN CONTAINER -->
<div class="section_content"><!-- Begin Section Container -->
<div class="content_container"><!-- Begin Content -->
<div class="logo"></div>
<div class="separator"></div>
<div class="sign1">
<a class="readmore" href="#"></a>
</div>
</div><!-- End Content -->
</div><!-- End Section Container -->
</div><!-- END CONTAINER -->
</div><!-- END SECTION "HOME -->
Any idea what I´m doing wrong here?
Basically you problem is here:
.sign1 a.readmore {
display: block;
width: 65px;
height: 67px;
text-indent: -9999em;
z-index: 999999;
margin: 0 auto;
background-image: url(../img/bg-readmore.png);
position: fixed; /* --> position fixed is not what you're looking for */
top: 48%;
right: 43%;
}
Settins position:fixed does exactly what you see (fixing the element's position relative to the browser window.. it is no longer effected by page structure) you have in the middle all the buttons from all the frames on top of each other.
Try repositioning .sign1 a.readmore using position:absolute
I'm working on a project using Nivo Sliders in conjunction with Twitter Bootstrap. I'm running into a problem that may not have a fix because Nivo might not be built for it. But I'm trying to turn a current slider that uses span12 into a full-width slider. Is this possible or should I just be looking for a full-width slider to integrate? My current view is.
<div class="slider-wrapper theme-default">
<div class="row">
<div class="span12">
<div id="nslider" class="nivoSlider">
/* Nivo SLider */
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow hidden;
}
.nivoSlider img { position absolute; top:0px; left:0px; max-width:none; }
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
If you want to make the slider full width, the general approach would be to move the slider outside the span12, row and container divs.
From the code you posted, it looks like you are inside a container div, so close that first, add the slider code, then reopen a new container div for the rest of the page:
</div> <!-- NEW close open container div -->
<div class="slider-wrapper theme-default"> <!-- open full width slider-wrapper div -->
<div id="nslider" class="nivoSlider">
<!-- slider code -->
</div> <!-- close nslider -->
</div> <!-- close slider-wrapper -->
<div class="container">
<!-- continue as normal -->
Depending on the specifics of the slider code and CSS, this might need a little fine tuning.
Good luck!