jQuery Image Slider Cover Image Positioning Issue - javascript

I'm currently making a jquery image slider of 2 images where you can slide left or right to see the before and after photos. I have everything i want set except for the position of the cover image. About 40% of the cover image seems to shift off to the right of the border but the 2nd image is position perfected inside the border. Please advise on how I can put my cover image inside the border perfectly like my 2nd image.
HTML:
<div class="con">
<img src="warming1.jpg" class="imageOne">
<div class="coverImage"></div>
<div class="handle"></div>
<script type="text/javascript">
$(".handle").draggable({
axis: "x",
containment: "parent",
drag: function () {
var position = $(this).position();
var positionExtra = position.left + 6;
$(".coverImage").width(positionExtra + "px");
}
});
</script>
</div>
CSS:
.con {
top:2140px;
left:10px;
width: 280px;
height: 230px;
border: 2px solid;
position: absolute;
z-index:1
}
.con img {
height: 100%;
position: absolute;
}
.coverImage {
position: absolute;
background: url("warming2.jpg");
background-size: auto 100%;
width: 100%;
height: 100%;
}
.handle {
width: 0px;
height: 100%;
border-left: 12px solid #fff;
position: absolute;
left: 50%;
}
.handle:after {
content: "DRAG";
display: block;
width: 60px;
height: 60px;
border: 2px solid #eee;
border-radius: 50%;
color: #999;
line-height: 60px;
font-weight: 300;
text-align: center;
background: #fff;
position: absolute;
left: -36px; top: 0; bottom: 0;
margin: auto;
}

Positioning Picture 1 within the Element containing the border:
Obtain width of element with the border
Obtain width of 2nd picture
Set pic1.width = borderElement.width - pic2.width
Position pic1 at borderElement.right - pic1.width

Related

Avoid div overflowing

I have a piece of code that when user hover the slider bar, a box will appear. Everything works as expected but when the user move the mouse to the beginning or to the end of the slider, the box overflow the content.
I'm looking for a way that keep the box inside the blue area
Here is my code =>
var left = document.getElementById('core').getBoundingClientRect().left - document.documentElement.getBoundingClientRect().left;
window.onmousemove = function (e) {
let x = ((e.clientX + window.pageXOffset) - left);
document.getElementById("thumbnail").style.left = (x + "px");
}
body {
overflow: hidden;
}
.container {
width: 100%;
max-width: 800px;
position: relative;
background-color: blue;
height: 200px;
overflow: hidden;
}
.core {
margin: 0;
display: flex;
position: absolute;
bottom: 4px;
width: 100%;
flex-wrap: nowrap;
background-color: red;
height: auto;
}
.range {
width: 90%;
margin: 0 auto;
}
.range:hover + .thumbnail {
display: block;
}
.thumbnail {
display: none;
z-index: 1;
position: absolute;
bottom: 30px;
right: auto;
margin: 0;
width: 12em;
height: 7em;
background: rgb(200, 200, 200);
pointer-events: none;
padding: 2px 2px;
transform: translateX(-50%);
left: 50%;
}
.thumbnail::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
border: 8px solid transparent;
border-top: 8px solid rgb(200, 200, 200);
transform: translateY(-19%);
}
<div class="container">
<div id="core" class="core">
<input id="progress" class="range" type='range' min="0" max="100" step="0.01" value="0">
<div id="thumbnail" class="thumbnail"></div>
</div>
</div>
[ If you want jsfiddle => https://jsfiddle.net/ram9wc65/ ]
Here is a image that show +- the expected output =>
image (I cannot embed images yet)
How can I fix this? How can I keep the box inside of blue area? I spent many hours working on it but no success.
Thank you.
In your onMouseMove function, you need to get the width of the thumbnail and divide that by 2, to get the minimum left position and calculate the maximum right position (width - minimum).
Then make sure you set the left property of the thumbnail no smaller than the minimum and no larger than the calculated maximum.

Inherit padding width without position absolute? Is it possible?

Not sure, but I am currently not able to figure out. I'm trying to center the inner div (blue transparent one) from the parent (with the red background) inside the background. As an example, they're technically in each other perfectly at the first example in the snippet.
At the second example however I've added padding: 5px; to both of them to the red and blue one. To the blue one because I wanted to inherit the width some how.
https://jsfiddle.net/L8enbcy3/
.box-1-1 {
width: 50px;
height: 50px;
background: red;
position: relative;
display: block;
}
.box-1-2 {
width: 50px;
height: 50px;
background: #0000ffb0;
position: relative;
}
.box1 {
width: 50px;
height: 50px;
background: red;
padding: 5px;
position: relative;
display: block;
}
.box2 {
width: 50px;
height: 50px;
background: #0000ffb0;
padding: 5px;
}
<div class="box-1-1">
<div class="box-1-2"></div>
</div>
<pre>
</pre>
<div class="box1">
<div class="box2"></div>
</div>
What I'm trying is to get "box2" centered into "box1" like example 1 but with its padding, so that's covered by blue. without having to position: absolute it, if possible. What I'm thinking I have to do is to create and invisibile box absolute it, "center it with top: 0 and left: 0 when the parent has position: relative. Then as I mentioned with it being absolute it would go to the corners of the parents padding too and then in the absolute box, I would create a relative one with display: table and put in all the content.
My question now though is, is there another way to do that?
Solution 1: transform: translate()
You could use transform: translate() with variables to achieve what you want, without weird margins (next solution). Here's some MDN about translate().
:root {
--padding: 5px;
}
.box1 {
height: 50px;
width: 50px;
background-color: red;
padding: var(--padding);
}
.box2 {
height: calc(50px + var(--padding)*2);
width: calc(50px + var(--padding)*2);
background-color: #0000ffb0;
transform: translate(calc(0px - var(--padding)), calc(0px - var(--padding)))
}
<div class="box1">
<div class="box2"></div>
</div>
As you can see, the box is brought up and left with translate, and the height is lengthened by adding the needed padding to it. Thisachieves the desired cover effect.
Solution 2: Positive padding, negative margin
You could also use positive paddings and negative margins. Info below code snippet.
:root {
--padding: 5px;
}
.box1 {
height: 50px;
width: 50px;
background-color: red;
padding: var(--padding);
position: relative;
display: block;
}
.box2 {
height: 50px;
width: 50px;
background-color: #0000ffb0;
padding: var(--padding);
margin: calc(0px - var(--padding));
}
<div class="box1">
<div class="box2"></div>
</div>
What's happening here is following the CSS box model, found on MDN and w3schools. We're simply pushing out with margin and sucking in with padding.
Then, as per request in the comments, --padding is a CSS variable that stores the amount of padding that you want.
Hope I helped!
Cheers, Bobbay
You can add a negative margin if you insist on keeping the padding in place.
.box-1-1 {
width: 50px;
height: 50px;
background: red;
position: relative;
display: block;
}
.box-1-2 {
width: 50px;
height: 50px;
background: #0000ffb0;
position: relative;
}
.box1 {
width: 50px;
height: 50px;
background: red;
padding: 5px;
position: relative;
display: block;
}
.box2 {
width: 50px;
height: 50px;
background: #0000ffb0;
padding: 5px;
margin: -5px;
}
<div class="box-1-1">
<div class="box-1-2"></div>
</div>
<pre>
</pre>
<div class="box1">
<div class="box2"></div>
</div>
To center box2 within box1 without absolute position, you can use following css:
.box1 {
display: flex;
align-items: center;
justify-content: center;
}
Edit: example 2 illustrate your need. just remove padding from both boxes and settop: 0; and 'left: 0' with position: relative on box 2. I hope this is the required solution
to center box 2 you need to make its dimension less than box 1. consider the extra pixels added with padding. so the inner box width and height should be 10px less than the outer box.
Example:
.box1 {
width: 50px;
height: 50px;
background: red;
padding: 5px;
position: relative;
display: block;
}
.box2 {
width: 40px;
height: 40px;
background: #0000ffb0;
padding: 5px;
}
.box1-1 {
border: 2px solid yellow;
width: 50px;
height: 50px;
background: red;
position: relative;
display: block;
}
.box2-2 {
position:relative;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
background: #0000ffb0;
}
<div class="box1">
<div class="box2"></div>
</div>
<br>
<div class="box1-1">
<div class="box2-2"></div>
</div>

Scrollbar handles not visible

The scroll-bar handles aren't visible in my page. I've tried setting overflow-x to auto and scroll for both the #cust1 and #cust2 div's.
I also need five div's to have their horizontal scrolling controlled from just one scroll-bar at the bottom of the page. (Div's #one, #two, #three, #four and #custTimeline)I don't want scroll-bars for each customer div.
Please help. https://jsfiddle.net/c71ytuxz/1/
var c = document.getElementById("custTimeline");
var ctx = c.getContext("2d");
ctx.font = "20px Georgia";
ctx.save();
ctx.rotate(-90*Math.PI/180);
var baseLoc = 130;
var hours = ["5AM","6AM", "7AM","8AM","9AM","10AM","11AM","12 NOON","1PM","2PM","3PM","4PM","5PM","6PM", "7PM", "8PM", "9PM", "10PM", "11PM", "12PM"];
for(i = 0; i < hours.length; i++) {
if (i == 0) {
ctx.fillText(hours[i], -120, baseLoc);
}
else {
baseLoc += 90;
ctx.fillText(hours[i], -120, baseLoc);
}
}
ctx.restore();
#header {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
background: lightgrey;
}
#cust1 {
position: fixed;
left: 0px;
top: 160px;
width: 1500px;
height: 150px;
background: lightgrey;
overflow-x: scroll;
overflow-y: hidden;
margin-bottom: 10px;
}
#one {
width: 8%;
height: 150px;
background: darkgrey;
float: left;
text-align: center;
}
#two {
margin-left: 25%;
width: 35px;
height: 150px;
background: green;
}
#cust2 {
position: fixed;
top: 320px;
left: 0px;
width: 1500px;
height: 150px;
background: lightgrey;
overflow-x: scroll;
overflow-y: hidden;
}
#three {
width: 8%;
height: 150px;
background: darkgrey;
float: left;
text-align: center;
}
#four {
margin-left: 15%;
width: 35px;
height: 150px;
background: green;
}
<canvas id="custTimeline"
width = "1900"
height = "130"
style = "border:3px solid #aaaaaa;">
</canvas>
<div id="cust1">
<div id="one"><p>
Customer 1
</p></div>
<div id="two"></div>
</div>
<div id="cust2">
<div id="three"><p>
Customer 2
</p></div>
<div id="four"></div>
</div>
Since the #cust1 has a width of 1500px, the scroll will only appear when its content gets wider than that, and at the moment it is only 8% (#one) + 25% + 35px (#two) in total.
If you want it to scroll, change this
#cust1 {
position: fixed;
left: 0px;
top: 160px;
width: 100vw; /* changed property */
height: 150px;
background: lightgrey;
overflow-x: scroll;
overflow-y: hidden;
margin-bottom: 10px;
}
#two {
margin-left: 25%;
width: 1000px; /* changed property */
height: 150px;
background: green;
}
Updated fiddle
Updated based on a comment
To have one scroll update another, here is one way, using jQuery.
$(document).ready(function(){
$( window ).scroll(function(){
var position = $( this ).scrollLeft();
$("#first").scrollLeft(position);
$("#second").scrollLeft(position);
});
});

Positioning z-index does not work as expected

I cannot position info-pop-title on top of bar-header as you can see from my current code the text "TEST----" is visible but under the bar-header element.
http://jsfiddle.net/uvh4ymh9/
Could you point me out what am I doing wrong and how to fix it
PS: I cannot change structure for the HTML, only CSS solution
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.bar-header, .bar-footer {
position: fixed;
left: 0px;
width: 1280px;
z-index: 1;
background-color: rgba(50,50,50,0.5);
text-align: center;
}
.bar-header {
top: 0px;
height: 60px; /* safearea top 25 + content 20 + space bottom 15*/
}
.bar-header h1 {
position: fixed;
top: 25px; /* safearea top 25 */
left: 25px; /* safearea left */
font-size: 20px; /* content */
}
.bar-footer {
top: 670px;
height: 50px; /* safearea bottom 20 + content 20 + space top 10 */
font-size: 20px; /* content */
}
.bar-footer > ul {
position: fixed;
top: 680px; /* footer top 670 + space top 10*/
left: 1150px;
}
.bar-footer > ul li {
float: left;
}
.bar-footer li:nth-child(1) span {
color: blue;
}
#scene-main {
position: fixed;
top: 0px;
left: 0px;
width: 1280px;
height: 720px;
/*background: #ffffff url("/auth/assets/tv-safearea-transparent.png") no-repeat left;*/
background-color: darkgrey;
}
#btn-up, #btn-down {
position: fixed;
left: 1230px;
width: 50px;
height: 50px;
background-color: yellow;
outline: 1px solid black;
z-index: 200;
}
#btn-up {
top: 0px;
}
#btn-down {
top: 50px;
}
#content {
position: fixed;
top: 0px; /* header */
}
.content-section:first-child {
margin-top: 60px; /* header height content does not go under header */
}
.content-section {
background-color: lightgray;
outline: 1px solid black;
width: 1280px;
}
/* Content sizes */
.content-snippet {
height: 360px; /* 1 slots */
width: 1280px;
background-color: lightblue;
outline: 1px solid green;
}
.content-snippet:nth-child(even) {
background-color: lightcoral;
}
.content-section h2 {
position: relative;
top: 30px; /**avoid to go under the header bar*/
}
.active {
background-color: violet !important;
}
.snippet-pop-info {
position: fixed;
top: 640px; /*430 = final position as visible / 670 = final position as not visible */
width: 1280px;
height: 240px;
background-color: darkblue;
opacity: 1;
color: white;
}
.snippet-pop-info ul {
position: absolute;
top: 0px;
left: 1155px;
width: 100px;
}
.snippet-pop-info ul li {
width: 100px;
}
.snippet-pop-info .rating {
position: absolute;
top: 65px;
left: 25px;
unicode-bidi: bidi-override;
direction: rtl;
}
.snippet-pop-info .rating > span {
display: inline-block;
position: relative;
width: 20px;
}
.snippet-pop-info .rating > span:hover:before,
.snippet-pop-info .rating > span:hover ~ span:before {
content: "\2605";
position: absolute;
}
#info-pop-title {
position: fixed;
top: 0px;
left: 250px;
z-index: 1;
font-size: 30px;
color: white;
font-weight: bold;
}
#info-pop-description {
position: absolute;
overflow: hidden; /* hide content that does not fit in the columns*/
top: 25px;
left: 300px; /* TEST */
height: 80px;
width: 800px;
font-size: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
}
</style>
</head>
<body>
<div id="viewport">
<div id="scene-main" class="scene" style="">
<div class="bar-header"><h1>ChannelLive logo</h1></div>
<div id="page">
<div id="content">
<div id="snippet-cnt-0" class="content-snippet">
0
<div class="snippet-pop-info" style="top: 720px;">
<h1 id="info-pop-title" style="word-wrap: break-word;">TEST-----------------</h1>
<div class="rating"><span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span></div>
<div id="info-pop-description" style="word-wrap: break-word;">null</div>
<ul>
<li class="focusable" data-href="movie-play">Play</li>
<li class="focusable" data-href="movie-details">Details</li>
</ul>
</div>
</div>
</div>
</body>
</html>
It's not clear what you're trying to accomplish, but I can make Chrome work like Firefox by getting rid of the
position: fixed;
style from #content. Whether that will work in the larger context of your layout, I don't know, but the problem is that the way z-index works is weird and complicated, and involves not just individual fixed elements but also any fixed parents they might have.
edit — oh also, set the z-index of .snippet-pop-info to 2. Here is an updated version of your fiddle.
Make your
.bar-header, .bar-footer{
z-index:0;
}
This will do the trick. Since your z-index for .bar-header and .info-pop-title are the same.
Add z-index in your content div
#content
{
position:fixed;
top:0;
z-index:1;
}
I'm afraid you can't make it work with the way your html is nested.
The element you want to pull on top to cover the rest is located in the main container while your second element is isolated in the header. If you want to bring your info-pop-title there you'll have to change the z-index of your #page element, which will cover everything.
The only thing I see you can achieve with this structure would be to position your diverse containers relatively and change the css of your info-pop-title with a negative margin, position absolutely this time.

Centring a div horizontally inside another div with absolute position state

I am trying to centre a div horizontally inside another div. The div that I am trying to centre is a scroll-down button that uses jQuery and has a custom icon font made by me and default width/height. I want to centre this div inside my main div and keep the original size as I want to keep using it as a button. For example:
I want to make something like the white arrow that is pointing down in the centre but without messing with my width.
This is my code:
HTML
<div id="intro-tab"> <!-- First/Intro Tab -->
<div id="introtab-godownbtn">Q</div>
</div>
CSS
#intro-tab {
width: auto;
height: 100%;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
background-color: red;
box-shadow: 0px 1px 3px #000;
}
#introtab-godownbtn {
font-family: iconFont;
font-size: 50px;
position: absolute;
bottom: 25px;
width: 60px;
height: 30px;
left: 50%;
margin-left: 30px;
background-color: #FFF;
}
#introtab-godownbtn:hover {
cursor: pointer;
}
jQuery
$('#introtab-godownbtn').click(function(){
$("html, body").animate({
scrollTop: (screen.height - 90)
}, 600);
return false;
});
I have tried many ways to centre the button introtab-godownbtn but it doesn't work or it just messes up my buttons size and clicking location. Any solution to my problem?
From what I understand, you're trying to horizontally center an HTML element. Generally, one would use the margin: 0 auto; approach where a fixed width is set on the element it's being applied to. Here's an example of such: http://jsfiddle.net/5XTq2/
Can you provide a mockup/screenshot of the layout you're trying to achieve, if this answer doesn't help? I can happily update the answer to accommodate your need.
EDIT:
As per your Spotify example, if you inspect the page and select the down arrow, it will have the follow styles.
.scroller-arrow {
width: 60px;
height: 60px;
background-image: url(../i/_global/arrow-big.png);
cursor: pointer;
display: block;
margin: 0 auto;
position: relative;
-webkit-tap-highlight-color: transparent;
}
To get the inner absolutely positioned div to be horizontally and vertically centered:
http://jsfiddle.net/7P4n5/
http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
HTML:
<div id="intro-tab">
<div id="introtab-godownbtn">Q</div>
</div>
CSS:
body { margin: 0; }
#intro-tab {
width: 100%;
height: 100%;
position: absolute;
background-color: red;
box-shadow: 0px 1px 3px #000;
}
#introtab-godownbtn {
background-color: #FFF;
font-family: iconFont;
font-size: 20px;
width: 60px;
/* this does the centering */
height: 30px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#introtab-godownbtn:hover { cursor: pointer; }

Categories