I am trying to add a slider to an existing page that has a left and right side. The left side has a background image, some text and a clear fix that expands the image to the height of the right side.
When I use Slick Slider and make the left side element a slide, the clear fix no longer works and the height is dictated by the content of the left element.
Here are 2 jsfiddles that demonstrate the problem:
Without slider: http://jsfiddle.net/robmccart/15wrct6g/
With slider: http://jsfiddle.net/robmccart/yj9nerh1/
Here's the code with slider:
<div class="parent">
<section class="right-side"></section>
<section class="slider left-side">
<div class="row" style="background-image: url(http://cpaws.org/engaging-networks/images_donation/Donation-pg-Peel-Watershed.jpg);">slide1</div>
<div class="row" style="background-image: url(http://cpaws.org/engaging-networks/images_donation/Donation-pg-Peel-Watershed.jpg);">slide2</div>
<div class="row" style="background-image: url(http://cpaws.org/engaging-networks/images_donation/Donation-pg-Peel-Watershed.jpg);">slide3</div>
</section>
</div>
CSS:
$c1: #3a8999;
$c2: #e84a69;
.parent {
background: #336633;
}
.right-side {
float: right;
height: 700px;
}
.left-side {
padding-right: 450px;
}
I'm not sure if I'm using the clear fix properly, but it looks like the code injected by Slick Slider is breaking something.
Thanks
Related
So My situation is this, I have a lot of divs... A LOT (over 300) and im using them as part of an interactive background. EDIT:(they all have the same class btw)
The Problem?
Since on mobile I need more divs to fill the page than on desktop, I have too many divs on desktop, meaning you can scroll wayyyyyy more than I want to.
How can I have it so Divs Below a certain point are deleted or (more usefully) how to stop scrolling after a certain amount of pixels.
I literally have no idea how to do this, I've tried experimenting with margins, padding, overflow, position: fixed; but I haven't found a solution so don't pester my "lack of effort"
(some of my accounts have been blocked because I had no legitimate idea what to do and you "cool kids" decided to downvote me enough to get blocked (thanks for that!))
Anyway enough blabbing. Help would be appreciated! Thanks in advance.
You can do 2 things for this:
Wrap all your content in a div and set height to it and overflow-y: hidden.
.wrapper{
height: 1000px; overflow-y: hidden
}
With CSS you can hide the elements after certain number. Like if you want to hide all div after 100
.container .className:nth-child(n+101) {
display: none;
}
This will hide all the divs after 100.
Put all your divs inside a container div and use this css
.container{
max-height:900px; // Set this value to the no of pixel you want to scroll
overflow:hidden;
}
I have set the max-height to 900px cause i want to show only 9 div each div is off height 100px.
SNIPPET
.item {
width: 100%;
height: 100px;
background-color: red;
}
.item:hover {
background-color: yellow;
}
.container {
max-height: 900px;
overflow: hidden;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<!--You cant scroll after that-->
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
</div>
This is my HTML structure:
<body>
<header class="header"></header>
<div class="col-sm-4 sidebar" id="sidebar">
<div class="accordion-1"></div>
<div class="accordion-2">i want vertical scroll for this div without defining height</div>
</div>
<div class="col-sm-8 container no-padding"></div>
</body>
Image 1
Image 2
I have a tow accordian inside the sidebar. So I need a scroll bar in the last red backrounded div if the contents overflows.
Add this to the last red backrounded div it's CSS:
overflow-y: scroll;
Or if you want the scroll bar to appear only if the content overflows:
overflow-y: auto;
I'm using CarouFredSel for an image carousel, and I'm having an issue with the transitions between items.
I want to use some simple HTML in the carousel rather than plain old images, but when I do, the swipe transition doesn't work. While the old image slides out, the new image flashes in rather than sliding in and you can see the background briefly in between images.
<div id="carousel">
<div>
<img src="img/instagram1.png">
<div style="position:relative; z-index:100; bottom:20px;">Byline 1</div>
</div>
<div>
<img src="img/instagram2.png">
<div style="position:relative; z-index:100; bottom:20px;">Byline 2</div>
</div>
</div><!-- /carousel -->
As you can see from this JSFiddle, the transition effect works fine with just images, but it looks off when using HTML.
It turns out that all you have to do to fix this is apply a left float on the items like this:
#carousel div {
display: block;
float: left;
}
I two divs set within a parent div - a sidebar on the left & a content area to the right of that. I need to set the position of my content area (which has a fixed width) to always be 15px to the right of the sidebar (even as the browser window / sidebar stretches).
Setting the sidebar with position: absolute & a % width worked perfectly for the sidebar itself, but as the sidebar position is then absolute, the content doesn't recognise where the sidebar is & can't be positioned relative to it with CSS.
Here is an image of what I am trying to achieve:
Why are you using position absolute for the side bar?
I would just do it like this
<div class="container">
<div class="sidebar">
<p>This is your sidebar</p>
</div>
<div class="content">
<p>This is your content</p>
</div>
</div>
.container {width:100%; height: 1000px; background:blue;} /*didn't supply a width*/
.sidebar {width:25%; float:left; min-height:200px; background:lightblue; margin-right:15px;} /*you said sidebar has a % width*/
.content {width:250px; height:200px; background:red; float:left;} /*you said content had fixed width*/
Link to JS Fiddle to have a look
Unless I'm not understanding your question?
takes deep breath
Ok, I have a large div that acts as a background layer. This div pans from left to right based on the link you select in a typical horizontal navigation. It's a bit of a novelty thing.
The HTML structure:
<div id="scroll">
<div class="container_16">
<div id="header" class="grid_9 suffix_3 alpha omega">
<!-- the links that control animation -->
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</div> <!-- end #header --> <div class="main grid_8 alpha omega">
<div class="content grid_12 alpha">
<div id="the_content">
<!-- content is loaded in here via ajax -->
</div><!-- end the_content -->
</div><!-- end .content -->
<div class="clear"></div>
<div id="footer">
Footer stuff
</div>
</div> <!-- end .main .grid_8 .alpha .omega -->
</div> <!-- end .container_16 -->
</div> <!-- end scroll -->
A brief snippet of CSS:
#background_container {
position: absolute;
left: 0px;
top: 0px;
z-index: -1000;
width: 100%;
height: 100%;
}
#scroll {
width: 100%;
height: 100%;
overflow: auto;
}
The Javascript simply uses jQuery to animate the "left" attribute. I would include it, but there's a lot going on and I don't think it will help bring a solution.
Basically, when the background div scrolls from the first position to the last position, the content seems to "scrunch" briefly in Safari.
Video of this behavior:
[redacted]
In the video, I demo both safari and firefox. As you can see, in Safari the content scrunches/glitches during the animation. In Firefox, it does not. Safari is seemingly the only browser that does this. It even works in IE6. :)
The div that appears to "scrunch" seems to be <div id="header" class="grid_9 suffix_3 alpha omega"> but, sometimes you can see a scroll bar briefly which suggests <div id="scroll"> may be the root cause.
Is this a Safari rendering issue that's common and can be avoided? Or should I just suck it up?
Thanks in advance!
You have to set -webkit-transform: transform on the original element so that it gets hardware accelerated on load.