Making Nivo Slider full-width - html

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!

Related

CSS - positioning divs

I am using zurb foundation and I would like to make a web page that would have a structure and scroll effect like this one. I have an html structured like this:
<html lang="en">
<head>
...
</head>
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
...
</div>
<div class="off-canvas-content" data-off-canvas-content>
<div id="app">
<!-- should be below the screen height -->
<div id="drawer">
<div id="magazine-detail">
...
</div>
<div id="magazine-detail-carousel">
...
</div>
</div>
<!-- the background image of the main-section -->
<div id="bg">
</div>
<!-- should take up the screen on the page load and start going below drawer on scroll down, on the z-axis -->
<div id="main-section">
<!-- sticky fixed top-bar -->
<div id="top-bar">
...
</div>
<div id="header">
...
</div>
<div id="carousel">
...
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Since I need a zoom in effect on the background picture I have setup div #bg like this:
#bg {
background-image: url('/img/cover.png');
background-size: cover;
z-index: -1;
animation: zoom 10s;
height: 100vh;
width: 100vw;
position: static;
-webkit-animation-fill-mode: forwards;
}
#keyframes zoom {
0% { transform:scale(1,1); }
100% { transform:scale(1.1,1.1);}
}
Since I saw in the example web page, on inspect in chrome, that the main page content, which in my case will be #drawer, is pushed with margin-top down to the bottom of the screen, I tried with this:
#drawer {
margin-top: 100vh;
position: relative;
z-index: 5;
}
But that is obviously not good, since when I have it like that I can't see the content of the other divs that are above the #drawer, because the margin takes the space with its color. And the margin-top = 100vh doesn't work for one more reason, I can't use jQuery scrollTop, for the divs that are not visible.
As for the main section, which for me in this case is what the #front-slider is in the example page, it needs to be on top of the #bg div, so that the #bg divs background-image serves as the backround of the main-section. I had to make div #bg so that I could have zoomed in effect on the background image, without main-section being scaled as well, when the background image is being zoomed in.
And for the top-bar I just need to be at the top like a sticky top-bar all the time.
I am not sure how to position all that to get the same effect and structure of the page shown as an example, I have tried with every possible css positions but nothing worked.
Updated
I have managed to work it out by using this.

Why is child container affecting parent

I have created this simple tribute page, with fixed background image.
I wanted to offset the container with the text content (I created a class just for it: .main-content) a bit down with a margin-top: 130px, so it's not glued to the very top of the page.
<body> <!-- applied background-image here -->
<div class="darken"> <!-- dark overlay on the background image -->
<div class="container-fluid">
<div class="container main-content"> <!-- .main-content - has margin-top: 130px; applied -->
<div class="row">
<div class="col-lg-offset-2 col-lg-10"> <!-- Bootstrap centering -->
<h1 class="display-1">St. Pope John Paul II</h1> <!-- just another text below... -->
<h2 class="display-4">Pope of the family</h2>
</div>
</div>
<div class="row">
<div class="col-....... <!-- rest of the text -->
However - a strange thing happened - the
.main-content {
margin-top: 130px;
}
margin seems to affect the body (according to Chrome DevTools...) thus eventually affecting (applying the margin-top to) the div with .darken class!
I want to achieve two things:
Having my text offset from the top of the page
Having .darken class applied to the full viewport
How can I achieve this?
CodePen link
Please try this:
Instead of margin use padding.
.main-content {
padding-top: 130px;
}

Multiple fullscreen sections with absolute positioned divs inside

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

How to overlap sidebar on top of nav-bar

Sorry, I couldn't post images without a higher reputation, so I linked them below:
PSD:
HTML:
Okay, the PSD screenshot is of what I want the alignment to do.
And the HTML screenshot is it's current form.
As you can tell, the sidebar is currently below the orange bar (nav) and the grey bar (banner). I know there is a way to make its position absolute and overlay it on top, but seeing that this is built on a responsive grid, I think that would ruin it.
Does anyone know of anyway to overlap the sidebar like it is shown in the psd without ruining the responsiveness?
I'm open to any and all suggestions.
Thanks!
Code:
<div class="container">
<div class="row">
<header> content </header>
</div>
</div>
<nav> content </nav>
<div class="container">
<div class="row">
<div class="col-sm-9">
<section>
<!-- Services Section Content -->
</section>
<services>
<!-- Clients Section Content -->
</section>
<section>
</div>
<div class="col-sm-3">
<!-- Sidebar -->
</div>
Using position:absolute would not ruin your responsive layout if you edit your media queries to compensate.
Alternately, try a negative margin on the sidebar element and set the z-index to be higher than the top bar element. Example:
header {
width:100%;
height:100px;
background:#ccc;
z-index:100;
}
.col-sm-9 {
width:200px;
height:500px;
margin:-50px 0 0 0;
background:#000;
z-index:200;
}
Have a fiddle: http://jsfiddle.net/68ANR/
It will perfectly works.Try it because position:absolute give the position to the main div or the parent div.
.col-sm-9 {
position:absolute;
left:/*give here from left*/px;
top:/*give here from top*/px;
width:200px;
height:500px;
background:#000;
z-index:200;
}
Hope the answer !

JQuery-mobile, left sidebar/toolbox

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.