We Keep Coding

Is there any way to fit a slide Nav in splitter?

I am trying to fit a slide nav on the right side of the splitter, which is able to split when dragging the separator based on the width of the right side. https://jsfiddle.net/74bewsdu/
I tried modifying the width to auto as well as the z-index, it still doesn't work well.
index
<div class="splitter">
<div id="first">
<iframe src="{{ route('child') }}" style="width:100%; height:100%" frameBorder="0">
Your browser isn't compatible
</iframe>
</div>
<div id="separator"></div>
<div id="second">
<div id="mySidenav" class="sidenav"></div>
<div style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</div>
</div>
</div>
</div>
javascript
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
css
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}

You could get the offsetWidth of the right side div (#second) plus the offsetWidth of the separator, and set the sliding nav width to that value. If you don't want to completely overlap the menu button, you could subtract it by the width of the menu button (or some arbitrary constant).
Example (see comments in lines between /* added */ and /* end added */ areas in the snippet below). Update: I also added code to check to see if the slider nav is open. Now, if you drag the slider when the side nav is open, it should be dynamically resized.
let navIsOpen = false; // variable to keep track of if the slider nav is open
function openNav() {
/* added */
// calculate width of right side div + separator
let width = second.offsetWidth + separator.offsetWidth;
// uncomment below line to subtract a value so the slider doesn't obscure the menu button/text
//width = width - 95;
document.getElementById("mySidenav").style.width = width + "px";
navIsOpen = true; // slider nav is open
/* end added */
}
// function is used for dragging and moving
function dragElement(element, direction) {
var md; // remember mouse down info
const first = document.getElementById("first");
const second = document.getElementById("second");
element.onmousedown = onMouseDown;
element.onmousedown = onMouseDown;
function onMouseDown(e) {
//console.log("mouse down: " + e.clientX);
md = {
e,
offsetLeft: element.offsetLeft,
offsetTop: element.offsetTop,
firstWidth: first.offsetWidth,
secondWidth: second.offsetWidth
};
first.style.pointerEvents = 'none';
document.onmousemove = onMouseMove;
document.onmouseup = () => {
//console.log("mouse up");
document.onmousemove = document.onmouseup = null;
}
}
function onMouseMove(e) {
//console.log("mouse move: " + e.clientX);
var delta = {
x: e.clientX - md.e.clientX,
y: e.clientY - md.e.clientY
};
if (direction === "H") // Horizontal
{
// prevent negative-sized elements
delta.x = Math.min(Math.max(delta.x, -md.firstWidth),
md.secondWidth);
element.style.left = md.offsetLeft + delta.x + "px";
first.style.width = (md.firstWidth + delta.x) + "px";
second.style.width = (md.secondWidth - delta.x) + "px";
}
/* added */
if (navIsOpen) { // check if slider nav is open, if so resize
openNav();
}
/* end added */
}
}
dragElement(document.getElementById("separator"), "H");
.splitter {
width: 100%;
height: 300px;
display: flex;
}
#separator {
cursor: col-resize;
background-color: #aaa;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='30'><path d='M2 0 v30 M5 0 v30 M8 0 v30' fill='none' stroke='black'/></svg>");
background-repeat: no-repeat;
background-position: center;
width: 10px;
height: 100%;
/* prevent browser's built-in drag from interfering */
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#first {
background-color: #dde;
width: 20%;
height: 100%;
min-width: 10px;
}
#second {
background-color: #eee;
width: 80%;
height: 100%;
min-width: 10px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
<div class="splitter">
<div id="first">
<iframe src="{{ route('child') }}" style="width:100%; height:100%" frameBorder="0">
Your browser isn't compatible
</iframe>
</div>
<div id="separator"></div>
<div id="second">
<div id="mySidenav" class="sidenav"></div>
<div style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</div>
</div>
</div>

How to make info text appear and follow the cursor when hovering over image?

For my portfolio website, I want to include info text that becomes visible when hovering over the according image and I want the text to follow along the cursor.
I'm by no means a coding expert, so I tried to achieve the effect by replacing the default cursor with an image of the text on white background via css and the cursor-property.
However, this left me with weird gray edged around the image that the image originally doesn't have.
So I figured that this was a sloppy approach anyway and that I should rather try solving it via javascript... which left me with the following code:
$(document).bind('mousemove', function(e){
$('#tail').css({
left: e.clientX + 20,
top: e.clientY + document.body.scrollTop
});
});
#tail {
position: absolute;
background-color: #ffffff;
padding: 5px;
opacity: 0;
}
#tail p {
margin: 0px;
}
.project-01:hover > #tail {
opacity: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="project-01">
<a href="project-site-01.html">
<img src="images/project-cover-01.png" alt="Project description">
</a>
<div id="tail">
<p>Project description</p>
</div>
</div>
I am now left with text that appears when hovering over the image and it follows the cursor properly, even if the cursor position changes due to scrolling (which it didn't do properly at first, which is why I added the 'document.body.scrollTop').
The only problem: The info text is way to far away from the cursor. I tried adjusting the offset, adding '- 900' after 'document.body.scrollTop' but that only makes it look right with my specific browser height – if I switch to a smaller or bigger screen, the '- 900' of course doesn't fit anymore.
Is there anyone who can explain what I'm doing wrong on a dummy level or even better – tell me how to fix the problem? I've been trying to get that hover text effect working for literally the past two days. HELP!
PS: You can see the effect I want to create on https://playgroundparis.com

I hope this can help you!
Edit: Technically this is a duplicated. I realized the problem with scrolling that you talking about. I've found a solution in this post and I readaptated it for
your specific case.
var mouseX = 0, mouseY = 0, limitX, limitY, containerWidth;
window.onload = function(e) {
var containerObjStyle = window.getComputedStyle(document.querySelectorAll(".project-01")[0]);
containerWidth = parseFloat(containerObjStyle.width).toFixed(0);
containerHeight = parseFloat(containerObjStyle.height).toFixed(0);
var follower = document.querySelector('#tail');
var xp = 0, yp = 0;
limitX = containerWidth;
limitY = containerHeight;
var loop = setInterval(function(){
//Change the value 5 in both axis to set the distance between cursor and text.
xp = (mouseX == limitX) ? limitX : mouseX + 5;
xp = (xp < 0) ? 0 : xp;
yp = (mouseY == limitY) ? limitY : mouseY + 5;
yp = (yp < 0) ? 0 : yp;
follower.style.left = xp + 'px';
follower.style.top = yp + 'px';
}, 15);
window.onresize = function(e) {
limitX = parseFloat(window.getComputedStyle(document.querySelectorAll(".project-01")[0]).width).toFixed(0);
}
document.onmousemove = function(e) {
mouseX = Math.min(e.pageX, limitX);
mouseY = Math.min(e.pageY, limitY);
}
};
//Change the 100 value to set the fade time (ms).
$(".project-01").hover(function () {
$(this).find('#tail').fadeIn(100);
},
function () {
$(this).find('#tail').fadeOut(100);
});
#tail {
position: absolute;
background-color: #ffffff;
padding: 5px;
overflow: hidden;
}
#debug {
position: absolute;
right: 0;
top: 100px;
width: 100px;
height:100px;
background-color: red;
color: black;
}
#tail p {
margin: 0px;
}
.project-01 {
width: 300px;
overflow: hidden;
}
.project-01 img {
height: 100%;
width: 100%;
}
.project-01 a {
height: 100%;
width: 100%;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="project-01">
<a href="project-site-01.html">
<img src="https://picsum.photos/200/300" alt="Project description">
</a>
<div id="tail">
<p>Project descriptions</p>
</div>
</div>

You can use the below code's
.description {
display: none;
position: absolute;
z-index: 2000 !important;
color: black;
padding: 15px;
margin-left: 32px;
margin-top: -200px;
top: auto;
height: auto;
width: 500px;
}
.image {
height: 200px;
width: 200px;
}
.my-image:hover + .description {
display: block;
position: absolute;
background-color: black;
color: white;
}
.description:hover {
display: block;
background-color: black;
color: white;
}
<div class="project-01">
<a href="project-site-01.html" class="my-image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/monarch.png" alt="Project description" class="image">
</a>
<div id="tail" class="description">
Butterflies are insects in the macrolepidopteran clade Rhopalocera from the order Lepidoptera, which also includes moths. Adult butterflies have large, often brightly coloured wings, and conspicuous, fluttering flight.
</div>
</div>

I hope this helps i recenty made one myselff for my website a few days ago
No info cursor:
.info:hover .tooltip {
color: red;
visibility: visible;
opacity: 1;
transition: opacity 1s
}
.tooltip {
visibility: hidden;
opacity: 0;
transition: opacity 1s
}
}
.tootip:hover {
visibility: visible
}
<span class="info"><img src="https://google.com/favicon.ico">Hover Me</img> <span class="tooltip">Welcome</span></a></span>
With info cursor:
.info:hover .tooltip {
color: red;
visibility: visible;
opacity: 1;
transition: opacity 1s
}
.tooltip {
visibility: hidden;
opacity: 0;
transition: opacity 1s
}
}
.tootip:hover {
visibility: visible
}
.info {
cursor: help
}
<span class="info"><img src="https://google.com/favicon.ico">Hover Me</img> <span class="tooltip">Welcome</span></a></span>

How to put scroll bar in vertical position and also how to move images with up and down arrows?

I am having difficulty to put the scroll bar in a vertical position instead of horizontal. Also, I want to slide images with up
and down arrow key of the keyboard. Please help me I have an
assignment due. I'll appreciate your help.
For more information please check my code into jsfiddle https://jsfiddle.net/mgj7hb0k/
The code below is from HTML file
<div class="slider-wrap">
<div class="slider" id="slider">
<div class="holder">
<div class="slide" id="slide-0"><span class="temp">74°</span></div>
<div class="slide" id="slide-1"><span class="temp">64°</span></div>
<div class="slide" id="slide-2"><span class="temp">82°</span></div>
</div>
</div>
<nav class="slider-nav">
Slide 0
Slide 1
Slide 2
</nav>
</div>
CSS file. I have added some styles into separate css file.The "slider" (visual container) and the slides need to have explicity the same size. We'll use pixels here but you could make it work with anything.
#import url(https://fonts.googleapis.com/css?family=Josefin+Slab:100);
.slider-wrap {
width: 300px;
height: 500px;
margin: 20px auto;
}
.slider {
overflow-x: scroll;
}
.holder {
width: 300%;
}
.slide {
float: left;
width: 300px;
height: 500px;
position: relative;
background-position: -100px 0;
}
.temp {
position: absolute;
color: white;
font-size: 100px;
bottom: 15px;
left: 15px;
font-family: 'Josefin Slab', serif;
font-weight: 100;
}
#slide-0 {
background-image: url(http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg);
}
#slide-1 {
background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);
}
#slide-2 {
background-image: url(http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg);
}
.slide:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40%;
background: linear-gradient(transparent, black);
}
.slider-nav {
text-align: center;
margin: 10px 0 0 0;
}
.slider-nav a {
width: 10px;
height: 10px;
display: inline-block;
background: #ddd;
overflow: hidden;
text-indent: -9999px;
border-radius: 50%;
}
.slider-nav a.active {
background: #999;
}
We're going to use jQuery here because we love life. Our goal is the adjust the background-position of the slides as we scroll. We can set background-position in percentages in CSS, but that alone doesn't do the cool hide/reveal more effect we're looking for. Based the amount scrolled (which we can measure in JavaScript), we'll adjust the background-position. Alone, that would look something like this:
Js file
var slider = {
// Not sure if keeping element collections like this
// together is useful or not.
el: {
slider: $("#slider"),
allSlides: $(".slide"),
sliderNav: $(".slider-nav"),
allNavButtons: $(".slider-nav > a")
},
timing: 800,
slideWidth: 300, // could measure this
// In this simple example, might just move the
// binding here to the init function
init: function() {
this.bindUIEvents();
},
bindUIEvents: function() {
// You can either manually scroll...
this.el.slider.on("scroll", function(event) {
slider.moveSlidePosition(event);
});
// ... or click a thing
this.el.sliderNav.on("click", "a", function(event) {
slider.handleNavClick(event, this);
});
// What would be cool is if it had touch
// events where you could swipe but it
// also kinda snapped into place.
},
moveSlidePosition: function(event) {
// Magic Numbers =(
this.el.allSlides.css({
"background-position": $(event.target).scrollLeft()/6-100+ "px 0"
});
},
handleNavClick: function(event, el) {
event.preventDefault();
var position = $(el).attr("href").split("-").pop();
this.el.slider.animate({
scrollLeft: position * this.slideWidth
}, this.timing);
this.changeActiveNav(el);
},
changeActiveNav: function(el) {
this.el.allNavButtons.removeClass("active");
$(el).addClass("active");
}
};
slider.init();

Show vertical tracking line on hover over multiple elements

I want to show a vertical line that will appear as and of my charts are hovered over and will disappear when the mouse exits the chart elements. Weirdly, the mouseleave and mouseout events seem to fire when the mouse is not moving or when it is moving up and down (rather than side-to-side), see the code snippet below. I don't want the line to disappear when the mouse pauses and I want it to track the mouse wherever it goes.
I've tried firing the code on hover, mouseenter and mouseover but mousemove (see below code) is the only event that continuously fires as the position of the cursor changes.
//$(document).ready(function() {
function showVerticalLine(e) {
var topBarHeight = 56;
var bottomHeight = 100;
var posX = $(this).offset().left;
var x = e.pageX;
var y = $(window).innerHeight();
//Change line so that it appears at the position of the cursor
$('.verticalTrackerLine').css({
'opacity': '1',
'left': x,
'top': topBarHeight,
'height': y - topBarHeight - bottomHeight + "px",
'transition': 'left 0.1s'
});
//Update string to show when the charts are being hovered over
$("#testSTRING").html('you are moving/hovering');
};
function hideVerticalLine(){
//Hide the line
$('.verticalTrackerLine').css({
'opacity': '0'
});
//Update string to show when the charts are being hovered over
$("#testSTRING").html('you have left');
}
$("#chart1").add("#chart2").mousemove(showVerticalLine);
$("#chart1").add("#chart2").mouseout(hideVerticalLine);
//})
.chart {
margin-top: 30px;
width: 100px;
height: 30px;
border: 1px solid black;
background-color: red;
}
.verticalTrackerLine {
border-left: 2px dashed RGB(68,74,79);
position: fixed;
z-index: 1;
opacity: 0;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<SPAN id="testSTRING"></SPAN>
<SPAN class="verticalTrackerLine"></SPAN>
<DIV id="chart1" class="chart">Chart 1</DIV>
<DIV id="chart2" class="chart">Chart 2</DIV>
</head>
Any help/suggestions would be gratefully received.

Your guess is right, when you hover over the actual line that interferes with hovering over the buttons. So, just adding pointer-events: none; to the .verticalTrackerLine selector will fix this so that the mouse has no interaction with the line at all.
I also did some minor JS cleanup on your code, nothing too major. The CSS rule transition: left 0.1s doesn't need to be re-applied every time the mouse moves, so that has now been set in the CSS instead.
$(function() {
var topBarHeight = 56;
var bottomHeight = 100;
var $line = $('.verticalTrackerLine');
var $charts = $("#chart1, #chart2");
var $test = $("#testSTRING");
function showVerticalLine(e) {
var posX = $(this).offset().left;
var x = e.pageX;
var y = $(window).innerHeight();
//Change line so that it appears at the position of the cursor
$line.css({
'opacity': 1,
'left': x,
'top': topBarHeight,
'height': y - topBarHeight - bottomHeight + "px"
});
//Update string to show when the charts are being hovered over
$test.html('you are moving/hovering');
};
function hideVerticalLine() {
//Hide the line
$line.css('opacity', 0);
//Update string to show when the charts are being hovered over
$test.html('you have left');
}
$charts
.mousemove(showVerticalLine)
.mouseout(hideVerticalLine);
});
.chart {
margin-top: 30px;
width: 100px;
height: 30px;
border: 1px solid black;
background-color: red;
}
.verticalTrackerLine {
border-left: 2px dashed RGB(68, 74, 79);
position: fixed;
z-index: 1;
opacity: 0;
transition: left 0.1s;/* <------ this was moved from JS */
pointer-events: none; /* <------ this was added */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<output id="testSTRING">nothing has happened yet...</output>
<span class="verticalTrackerLine"></span>
<div id="chart1" class="chart">Chart 1</div>
<div id="chart2" class="chart">Chart 2</div>

You can simplify it further:
move the tracking line into an :after pseudo element inside each chart element and position it absolutely within the chart
position it 10px more to the top and bottom using:
top: -10px;
bottom: -10px;
set opacity: 0 to the tracking line and on :hover set it to one - now you'll have the line on hover - see demo below:
.chart {
margin-top: 30px;
width: 100px;
height: 30px;
border: 1px solid black;
background-color: red;
position: relative;
box-sizing: border-box;
}
.chart:after {
content: '';
border-left: 2px dashed rgb(68, 74, 79);
position: absolute;
z-index: 1;
opacity: 0;
top: -10px;
bottom: -10px;
}
.chart:hover:after {
opacity: 1;
}
<div id="chart1" class="chart">Chart 1</div>
<div id="chart2" class="chart">Chart 2</div>
Now comes the javascript part - we can modify the left property to show the line moving with the mouse:
first add a CSS variable (say --left) that can be adjusted from JS
now in a mousemove listener you can use e.pageX - this.offsetLeft to get the relative position (left value) of the mouse inside the box.
update the --left CSS variable using document.documentElement.style.setProperty('--left', ...
Note that I've made a maximum value for the left value to be on the safe side to this.offsetWidth - 2.
See demo below:
$(".chart").mousemove(function (e) {
document.documentElement.style.setProperty('--left', Math.min(e.pageX - this.offsetLeft, this.offsetWidth - 2) + 'px');
});
:root {
--left: 0;
}
.chart {
margin-top: 30px;
width: 100px;
height: 30px;
border: 1px solid black;
background-color: red;
position: relative;
box-sizing: border-box;
}
.chart:after {
content: '';
border-left: 2px dashed rgb(68, 74, 79);
position: absolute;
z-index: 1;
opacity: 0;
top: -10px;
bottom: -10px;
left: var(--left);
}
.chart:hover:after {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart1" class="chart">Chart 1</div>
<div id="chart2" class="chart">Chart 2</div>

Add pointer-events: none; to .verticalTrackerLine
//$(document).ready(function() {
function showVerticalLine(e) {
var topBarHeight = 56;
var bottomHeight = 100;
var posX = $(this).offset().left;
var x = e.pageX;
var y = $(window).innerHeight();
//Change line so that it appears at the position of the cursor
$('.verticalTrackerLine').css({
'opacity': '1',
'left': x,
'top': topBarHeight,
'height': y - topBarHeight - bottomHeight + "px",
'transition': 'left 0.1s'
});
//Update string to show when the charts are being hovered over
$("#testSTRING").html('you are moving/hovering');
};
function hideVerticalLine(){
//Hide the line
$('.verticalTrackerLine').css({
'opacity': '0'
});
//Update string to show when the charts are being hovered over
$("#testSTRING").html('you have left');
}
$("#chart1").add("#chart2").mousemove(showVerticalLine);
$("#chart1").add("#chart2").mouseout(hideVerticalLine);
//})
.chart {
margin-top: 30px;
width: 100px;
height: 30px;
border: 1px solid black;
background-color: red;
}
.verticalTrackerLine {
border-left: 2px dashed RGB(68,74,79);
position: fixed;
z-index: 1;
opacity: 0;
pointer-events: none;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<SPAN id="testSTRING"></SPAN>
<SPAN class="verticalTrackerLine"></SPAN>
<DIV id="chart1" class="chart">Chart 1</DIV>
<DIV id="chart2" class="chart">Chart 2</DIV>
</head>

changing color of text when div is scrolled above certain point

I would like that the text changes color when the pink colored div is scrolled FULLY above the bottom egde of the browser window. When the pink colored div is scrolled partially below the bottom edge of the browser window again the text should be white again.
$(document).ready(function(){
$(window).on('scroll' , function(){
var WindowScrollTop = $(this).scrollTop(),
Div_one_top = $('#one').offset().top,
Div_one_height = $('#one').outerHeight(true),
Window_height = $(this).outerHeight(true);
if(WindowScrollTop >= (Div_one_top + Div_one_height) - WindowScrollTop){
$('#text1').css('color' , 'black');
}else{
$('#text1').css('color' , 'white');
}
}).scroll();
});
#one {
height: 120vw;
width: 100%;
top: 0px;
background-color: pink;
}
#text1 {
width: 100%;
font-size: 9em;
margin-top: 100vw;
position: absolute;
color:white;
}
#two {
height: 50vw;
width: 100%;
top: 0px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one">
<div id="text1">
this is my text
</div>
</div>
<div id="two">
</div>

Need to compare sum of Window_height and WindowScrollTop:
$(document).ready(function(){
$(window).on('scroll' , function(){
var WindowScrollTop = $(this).scrollTop(),
Div_one_top = $('#one').offset().top,
Div_one_height = $('#one').outerHeight(true),
Window_height = $(this).outerHeight(true);
if(WindowScrollTop+Window_height >= (Div_one_top + Div_one_height) ){
$('#text1').css('color' , 'black');
}else{
$('#text1').css('color' , 'white');
}
}).scroll();
});
#one {
height: 120vw;
width: 100%;
top: 0px;
background-color: pink;
}
#text1 {
width: 100%;
font-size: 9em;
margin-top: 100vw;
position: absolute;
color:white;
}
#two {
height: 50vw;
width: 100%;
top: 0px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one">
<div id="text1">
this is my text
</div>
</div>
<div id="two">
</div>