I'm currently building a website for myself and having some trouble styling it. By default the re are pagination buttons underneath the slider and a previous and next arrow. I managed to remove the pagination buttons, but am unable to position the next and previous button on top of the slider, these buttons should be vertical centered with the height of the containing images. I'm also having trouble with the height of the slider. The height should be the height of the images. The green part on my website is to much height.
I hope someone can help me!
Thanks a lot for in the advance!
http://test.epicconcepts.nl
<style>
/* Prevents slides from flashing */
#slides {
display:none;
}
#slides .slidesjs-container {
margin-bottom:0px;
}
.slidesjs-pagination {
display: none;
}
.slidesjs-previous.slidesjs-navigation {
/* Styles for the Previous nav button */
width: 32px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
z-index: 99;
background-image: url("..//img/prev.png");
}
.slidesjs-next.slidesjs-navigation {
/* Styles for the Next nav button */
width: 32px;
height: 100px;
background-color: red;
position: absolute;
right: 0;
z-index: 99;
background-image: url("..//img/next.png");
}
.slidesjs-control {
background: orange;
max-height: 0px;
}
.slidesjs-container {
width: 100%;
background: green;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery.slides.min.js"></script>
<script>
$(function(){
$("#slides").slidesjs({
width: 940,
height: 700,
autoHeight: true
});
});
</script>
I guess you since removed the slidesjs code from that URL, but I was having the exact same problem 10 minutes ago, so this is how I fixed it:
<div id="slides" class="slides">
<img src="images/1.jpg">
<img src="images/2.jpg">
<a href="#" class="slidesjs-previous slidesjs-navigation slides-button left">
<img src="images/arrow-left.png" /></a>
</div>
I just put 2 images and one navigation button for the sake of simplicity.
Then the CSS:
.slides { position: relative; } /* so the buttons are placed absolutety within this div */
.slides-button {
position: absolute;
top: 120px; /* the exact position over the slides, from slide's (0,0) */
}
Remember, the navigation buttons have to be <a class="slidesjs-previous slidesjs-navigation"> directly inside <div id="slides"> or they won't work, don't put Divs in the middle.
Related
I'd like to make an element sticky such that it "sticks" to both the top of the page if the user scrolls past it, and to the bottom of the page before the user scrolls to it.
I understand how to make it sticky in one way, but not both
I found the answer myself by slightly augmenting this solution
HTML (unchanged):
BEFORE
<div class="hold">
<div class="item">
THING
</div>
</div>
AFTER
CSS:
.hold {
position: relative;
margin-top: -2000px;
margin-bottom: -2000px; /* Added this line */
pointer-events: none;
}
.hold:before {
content: "";
display: block;
height: 2000px;
}
/* Added the following block */
.hold:after {
content: "";
display: block;
height: 2000px;
}
.item {
pointer-events: initial;
position: sticky;
top:0; /* Made this addition */
bottom: 0;
z-index: 100;
}
I have this image appended to a div JSFiddle
and my Div is inside a modal. I'v tried to display by default the bottom left quarter (like filling the div) and to allow the user to scroll horizontally and vertically to see the rest of the image but it seems that I have some blue areas and I cannot scroll till the end of the image.
imgUrl = "nerdist.com/wp-content/uploads/2018/02/year-or-the-tank-girl-header.jpg"
$('.img-wrapper').append($('<img id="theImg">').attr({
'src': 'https://' + imgUrl ,
'alt': 'test image'
})
)
.img-wrapper {
overflow: hidden;
height: 400px;
background-color: blue;
position: relative;
overflow-x:auto;
overflow-y:auto;
}
.img-wrapper > img {
display: inline-block;
height: 150%;
width: 150%;
position: relative;
top: -50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv" class="img-wrapper">
</div>
Is there a way to display, when the modal is open, just the bottom left quarter of the image and allow the user to scroll XY to see the rest of it?
I'm new in HTML programming so please be gentle :)
https://jsfiddle.net/2mLbhmuL/61/
CSS:
.img-wrapper {
overflow: auto; /* adds scrollbars */
height: 400px;
background-color: blue;
position: relative;
}
.img-wrapper > img {
height: 200%; /* probably looks neater if auto */
width: 200%; /* double width image to show only first quarter */
vertical-align: bottom; /* moves image to true text bottom */
}
JQuery
Add the following ScrollTop(9999) to the end of your existing JQ to jump the div to the bottom.
.scrollTop(99999)
It's a bit nasty hard-coding a large number but it saves getting a handle to the element (which would allow you to use its real height).
Note:
The vertical-align: bottom is needed for the image to display without showing your blue area underneath. The reason for that is an image is naturally positioned on the baseline of text, so the blue area you were seeing is the space for hanging letters.
The solution is quite simple:
Don't use display: inline-block; as it will place the image will be placed inline and with some margin down. Instead use display: block
The top: -50%; is also moving the picture 50% up leaving it's original position blank
You make this simple:
.img-wrapper {
height: 400px;
width:400px;
background-color: blue;
position: relative;
overflow-x:auto;
overflow-y:auto;
}
.img-wrapper > img {
position: relative;
}
<div id="myDiv" class="img-wrapper">
<img src="https://nerdist.com/wp-content/uploads/2018/02/year-or-the-tank-girl-header.jpg" id="theImg"/>
</div>
Try this: (Assumption - You will adjust for your image size and containing div size as required)
html
<div id="myDiv" class="img-wrapper">
<img src="http://nerdist.com/wp-content/uploads/2018/02/year-or-the-tank-girl-header.jpg">
</div>
JS:
var d = $('#myDiv');
d.scrollTop(d.prop("scrollHeight"));
CSS:
.img-wrapper {
height: 400px;
background-color: blue;
position: relative;
overflow-x:auto;
overflow-y:auto;
}
.img-wrapper > img {
display: inline-block;
position: relative;
border:1px solid red
}
I am trying to build a full width image slider using slick.
The thing is, all the images are 1920px wide and they have max-width set to 100%. So they are responsive for smaller screen.
Below is the sample fiddle I have implemented.
https://jsfiddle.net/wjjLyq3s/4/
$(document).ready(function() {
$(".single-item").slick({
dots: false,
arrows: false
});
});
.container {
margin: 0;
padding: 0px;
width: 100%;
background: #419be0;
}
.slick-slide {
text-align: center;
color: #419be0;
background: white;
}
h3.red {
width: 1920px;
height: 300px;
background-color: red;
color: #fff;
}
h3.green {
width: 1920px;
height: 300px;
background-color: green;
color: #fff;
}
h3.blue {
width: 1920px;
height: 300px;
background-color: blue;
color: #fff;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class='container'>
<div class='single-item'>
<div>
<h3 class="red">1</h3>
</div>
<div>
<h3 class="green">2</h3>
</div>
<div>
<h3 class="blue">3</h3>
</div>
</div>
</div>
I haven't added any image here but the issue is appearing same here. If you load for the first time, the slide on the right side is visible slightly. But once you move to next slide, everything is full width without any issues.
So the fix is needed so the slide on right side is not visible at the first load.
Please note that I have used the divs with 1920px width here in fiddle but in my real slider code, I am not assigning any width to the images as those are alreaday 1920px and I have made their max-width to 100% to work responsively.
Please use jsfiddle link to test this as the code integrated here will not show this issue.
I assume that this is happening because of the window scroll.
We can set a height to the slider, so that there us no scroll when the items are stacked one under another ( before the slider starts ):
.slick-slider {
max-height: 300px;
overflow: hidden;
}
I want to have two fixed nav bars one on top and other at some center of the page. When scroll reach to second nav first should hide (or become relative) &
second should become fixed bar. And when we move up the second nav now become relative (not hide) and fist one will again start showing again.
fiddle
<div id="nav01">
</div>
<div class="content"></div>
<div id="nav02">
</div>
<div class="content"></div>
#nav01
{
height: 100px;
background: red;
width: 100%;
position: fixed;
top: 0;
}
#nav02
{
height: 100px;
background: blue;
width: 100%;
}
.content
{
height: 2000px;
background: #ccc;
width: 100%;
}
I have seen many jquery plugins but not found them useful - I am not good in scripting so need your help thanks in advance.
You have to add the below code
$(document).ready(function(){
$(window).scroll(function() {
if($(window).scrollTop()>2000){
$("#nav02").css("position", "fixed");
$("#nav02").css("top", 0);
$("#nav01").hide();
} else {
$("#nav02").css("position", "relative");
$("#nav01").show();
}
});
});
See this fiddle http://jsfiddle.net/P8Hzx/1/
When the page is first loaded, and the image is hovered over for the first time, the sliding panel slides down from the top to the bottom. But ever time you hover over it after that, it slides up from the bottom - which is what I want. I don't want it to slide down from the top the first time it's hovered over. Is there any way to make it just slide up every time it's hovered over? I'm sure there's some simple solution but I'm not very familiar with javascript.
<div class="boxgrid captionfull">
<img src="http://s17.postimage.org/arxuilf9r/jareck.jpg"/>
<div class="cover boxcaption">
<h3>Jarek Kubicki</h3>
<p>Artist<br/>http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/" target="_BLANK">More Work</a></p>
</div>
.boxgrid{
width: 325px;
height: 260px;
margin:10px;
float:left;
background:#161613;
border: solid 2px #8399AF;
overflow: hidden;
position: relative;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.boxcaption{
float: left;
position: absolute;
background: #000;
height: 100px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.captionfull .boxcaption {
top: 260;
left: 0;
}
$(document).ready(function(){
$('.cover').hide();
$('.boxgrid.captionfull').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160}).show();
}, function() {
$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
});
});
http://jsfiddle.net/scottm29/NUpfz/1/
Define a startup css to your element:
Here is jsFiddle.
.boxcaption{
...
top:260px;
}