I'm trying to highlight the background of the slider using the low track (left background of slider) and right track (right side of slider) using bootstrap-slider.
I would like my slider to only reveal a yellow background when the slider moves to the left or right. Similar to how this slider example reveals a black background:
https://jsfiddle.net/leongersen/9hyfv0bw/11/
So far the code below is what I have:
https://jsfiddle.net/jimmyt1001/96zj2wnf/9/
#slider12a .slider-track-high, #slider12c .slider-track-high {
background: green;
}
#slider12c .slider-selection {
background: yellow;
}
<input id="ex12c" type="text"/><br/>
$("#ex12c").slider({
id: "slider12c",
min: 0,
max: 40,
range: false,
value: 20 });
Let's do more or less like the example you posted.
You can create a div (let's call its class middleTrack) with two elements (.left and .right) absolutely positioned inside it that will have the yellow background.
Then, position them and create a function called using the method .on(slide, middleTrackFunction) that will apply a calculated width relative to the tracker situation. Run it once to apply from the beginning. Also, hide .slider-selection element somehow to prevent it from invading the new trackers.
jQuery:
$("#ex12c").slider({
id: "slider12c",
min: 0,
max: 40,
range: false,
alue: 20
}).on('slide', middleTrackFunction);
$(".slider-track").prepend("<div class='middleTrack'><div class='left'></div><div class='right'></div>");
function middleTrackFunction() { // call whenever slide happens
var halfWidth = $('.middleTrack').width() / 2;
var leftWidth = $('.slider-selection').width();
var rightWidth = $('.slider-track-high').width();
$('.middleTrack .right').width(leftWidth - halfWidth);
$('.middleTrack .left').width(rightWidth - halfWidth);
}
middleTrackFunction(); // run at least once
CSS:
#slider12a .slider-track-high, #slider12c .slider-track-high {
background: transparent;
}
.middleTrack div {
position: absolute;
height: 100%;
top: 0;
background: yellow;
}
.middleTrack .left {
right: 50%;
}
.middleTrack .right {
left: 50%;
}
.slider-selection {
z-index: -1;
}
Related
I'm trying to make a fake/duplicated scroll element that is synced with the actual x-scroll of a div in native javaScript. The use case for me is on a long table to have the x-scroll be present on screen when you're not at the bottom of the table.
This solves the situation of having a really wide table with a min-width that exceeds the current page/view-port width, causing the table to side/x-scroll. However, if the table is very long, the scroll can only be set on top or bottom of the table. That means if people are mid-way down the table and want to scroll across to see all of the columns, they would have difficulty in doing it there.
See image:
Yep, it's been done to death IN JQUERY. According to my research, no one on SO knows or has been interested in doing this in native javaScript (esp 2020). My version for reference is also in jQuery, it needs to be converted.
$dupScroll.scroll(function () {
if (scrolling) {
scrolling = false;
return true;
}
scrolling = true;
$tableParent.scrollLeft($dupScroll.scrollLeft());
});
$tableParent.scroll(function () {
if (scrolling) {
scrolling = false;
return true;
}
scrolling = true;
$dupScroll.scrollLeft($tableParent.scrollLeft());
});
All the jQuery solutions:
How to Scroll two div's at the same time?
synchronizing scrolling between 2 divs
synchronizing scrolling between 2 divs with different text size
How to sync the scroll of two divs by ID
synchronise scrolling of two divs
Help is appreciated and will be useful for all the people needing to do the same post-jQuery. I'm currently working on this myself but running into snags here and there, the 1st being attaching a scroll event onto an element. If I make something that works, I'll post it here. Thanks.
Here's the simple way to keep two divs aligned. Javascript doesn't dispatch event on actions from scripts by default, so there's no need to keep track of which div is being scrolled.
const divs = document.querySelectorAll( 'div' );
divs.forEach(div => div.addEventListener( 'scroll', e => {
divs.forEach(d => {
d.scrollTop = div.scrollTop;
d.scrollLeft = div.scrollLeft;
});
}) );
html, body {
height: 100%;
}
body {
display: flex;
padding: 0;
margin: 0;
}
div {
width: 50%;
height: 100%;
overflow: scroll;
}
span {
width: 200vw;
height: 300vh;
display: block;
background: linear-gradient(90deg, transparent, yellow), linear-gradient( 0deg, red, blue, green );
}
#div2 {
margin-top: 30px;
}
<div id="div1"><span></span></div>
<div id="div2"><span></span></div>
With Relative Scroll in Different Sized Containers
If you want to accomplish this with differently sized containers and relative scroll, just normalize the scroll value and multiply it again:
const divs = document.querySelectorAll( 'div' );
divs.forEach(div => div.addEventListener( 'scroll', e => {
const offsetTop = div.scrollTop / (div.scrollHeight - div.clientHeight);
const offsetLeft = div.scrollLeft / (div.scrollWidth - div.clientWidth);
divs.forEach(d => {
d.scrollTop = offsetTop * (d.scrollHeight - d.clientHeight);
d.scrollLeft = offsetLeft * (d.scrollWidth - d.clientWidth);
});
}) );
html, body {
height: 100%;
}
body {
display: flex;
padding: 0;
margin: 0;
}
div {
width: 50%;
height: 100%;
overflow: scroll;
}
span {
width: 200vw;
height: 300vh;
display: block;
background: linear-gradient(90deg, transparent, yellow), linear-gradient( 0deg, red, blue, green );
}
#div2 span {
height: 500vh;
width: 500vw;
}
<div id="div1"><span></span></div>
<div id="div2"><span></span></div>
I am attempting to use waypoints for two specific functions.
To identify if a user is scrolling up or down and the container comes into view. This is not working.
The second thing I am trying to figure out how to do doesn't necessarily have to do with waypoints. I want the image you see in the snippet to progressively transform: translateX based on the scroll progression. I am not sure how to do this. I put translate in the snippet to show the movement.
If you go to this site and scroll down a little to the "Nike and Snapchat" section, you will see a phone image of Lebron. As you progressively scroll up or down, the image moves accordingly. This is what I am trying to replicate.
Does anyone know what I can do to achieve this?
var homeMainSec = $('#homeMainSec');
homeMainSec.waypoint(function(direction) {
if (direction === 'down') {
$('#homeBoxGridRight img').addClass('slideLeftDisplay');
console.log('Left Slide');
}
}, {
offset: '25%'
});
homeMainSec.waypoint(function(direction) {
if (direction === 'up') {
$('#homeBoxGridRight img').addClass('slideRightDisplay');
console.log('Right Slide');
}
}, {
offset: '25%'
});
#homeMainSec {
width: 100%;
height: 95vh;
position: relative;
margin-top: 70px;
}
.homeMainBlock {
height: 100%;
width: 50%;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
}
/*- HomeBoxGridRight Section -*/
#homeBoxGridRight img {
display: block;
width: 40%;
height: auto;
margin-left: 50%;
}
.slideLeftDisplay {
transform: translateX(-100px);-webkit-transform: translateX(-100px);
transition: 1s;-webkit-transition: 1s;
opacity: 1;
}
.slideRightDisplay {
transform: translateX(100px);-webkit-transform: translateX(100px);
transition: 1s;-webkit-transition: 1s;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<section id="homeMainSec">
<div class="homeMainBlock" id="homeBoxGridLeft">
</div><div class="homeMainBlock" id="homeBoxGridRight">
<img src="https://slidesjs.com/examples/standard/img/example-slide-1.jpg" alt="Image">
</div>
</section>
<br><br><Br><br><br><br><br><br>
This gives you page scroll position for vertical scroll
window.pageYOffset
This gives you total scroll height for body
document.querySelector("body").scrollHeight
You need to subtract the height of scrollbar element that is given by
document.scrollingElement.offsetHeight
You can translate with respect to ratio of vertical scroll position and body height
window.pageYOffset/(document.querySelector("body").scrollHeight - document.scrollingElement.offsetHeight)
This will give you, ratio of current position to max scrollable position.
Manipulate it as you like to translate the elements wrt their initial position.
I have build sidebar with css and jquery. It's working fine but i want that when sidebar opens then whole screen except sidebar should get semi-black or disabled.
Here is my working
jsFiddle
How can i make whole screen semi-black or disabled on sidebar open?
You can use a box-shadow on the sidebar:
#sidebar{
box-shadow:0 0 0 10000px rgba(0,0,0,.50);
}
This is black, at .50 opacity. It's set to 10000px to cover the full screen.
Or change rgba(0,0,0,.50) to a solid color like #5a5a5a.
In your case add to your css:
#slide-out.visible:not(.close){
box-shadow:0 0 0 10000px #666666;
}
The general concept to achieve this is fairly straightforward:
Modify the javascript to add a class to the body when the nav is open (I called it nav-open.)
Modify the CSS so that the "overlay" element (you already had one in place) is displayed when the body has the class nav-open
Adjust your overlay element CSS to cause it to show properly (for some reason, it had opacity: 0 on it, which meant it was there, but was not visible).
Here's the relevant CSS:
#sidenav-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100vw;
height: 100vh;
// removed opacity: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 997;
// set display to none by default
display: none;
}
// when the body has the class nav-open, display the overlay
.nav-open #sidenav-overlay {
display: block;
}
Here's the relevant changes to your javascript:
// no-conflict-safe document ready function
jQuery(function($) {
$('#show-hide-menu').click(function() {
if ($('#slide-out').hasClass('visible')) {
// $('#slide-out').removeClass('visible');
$('#slide-out').toggleClass('close');
} else {
$('#slide-out').addClass('visible');
}
// check if the nav is "open"
var open = !$('#slide-out').hasClass('close');
// for simplicity, always first remove the nav-open from the body
$('body').removeClass('nav-open');
// if the nav is open, add the 'nav-open' class to the body
if (open) {
$('body').addClass('nav-open');
}
});
// modify to use "on", is best-practice
// $(document).click(function(e) {
$(document).on('click', function(e) {
var sidebar = $(".sidenav, #show-hide-menu");
if (!sidebar.is(e.target) && sidebar.has(e.target).length === 0) {
$('#slide-out').toggleClass('close');
// be sure the nav-open class is removed when the sidebar is dismissed
$('body').removeClass('nav-open');
}
});
});
Here is a link to your fiddle, modified with these changes to do what you want: http://jsfiddle.net/cale_b/hThGb/8849/
Make a content div below your nav. Something like:
<div id="maincontent" class="">
<p>Lorem.</p>
</div>
Add some styling so it has min-height, etc.
#maincontent {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
min-height: 400px;
}
Add some JS so when the nav menu button is clicked, it toggles on and off a new style class for this area.
$('#show-hide-menu').click(function () {
if ($("div#maincontent").hasClass("overlayed")) {
$("div#maincontent").removeClass("overlayed");
}
else {
$("div#maincontent").addClass("overlayed");
}
});
Define the overlayed class in the CSS.
.overlayed {
background-color: rgba(0,0,0,.8);
}
I have a menu <div> with a shorter handle <div> to the right of it (see below). This loads off to the left of the screen minus a 5px sliver of the menu <div> and the whole handle <div>. I want the whole container to slide onto the screen when the mouse hovers either portion, and off the screen when it leaves both portions.
This works except when the mouse goes from the handle to the menu. There is a brief moment where the mouseleave from the handle and the mouseenter from the menu fire. I have tried to .stop(true) the current animation on the container, but there is still a hesitation in the animation.
#slideout-nav contains both elements (and transparent space below the handle, which I do not want to trigger the animation).
#slideout-menu-container is the left portion.
#slideout-handle is the right portion.
$('#slideout-menu-container').addClass('slideout-hover');
$('#slideout-handle').addClass('slideout-hover');
var slideIn = function () {
$('#slideout-nav').stop(true);
$('#slideout-nav').animate({
left: '0px'
});
};
var slideOut = function () {
$('#slideout-nav').stop(true);
$('#slideout-nav').animate({
left: distance * -1 + 'px'
});
};
$('.slideout-hover').hoverIntent(slideIn, slideOut);
Is there a more elegant way to accomplish this?
Update
HTML:
<div id="slideout-nav">
<div id="slideout-handle">+</div>
<div id="slideout-menu-container">
<ul>
<li><a>Home</a></li>
<li><a>Models</a></li>
</ul>
</div>
</div>
CSS:
#slideout-nav {
z-index: 99;
position: absolute;
top: 0;
width: 225px;
}
#slideout-handle {
float: right;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
}
#slideout-menu-container {
overflow: hidden;
background: rgba(0, 0, 0, 0.8);
padding: 10px;
}
Ok, I think I got you problem. I made some changes in your css (maybe it just fits the jsFiddle needs) :
#slideout-nav {
z-index: 99;
position: absolute;
top: 0;
left: -200px; /* Here */
width: 225px;
}
And in the JS :
$('#slideout-menu-container').addClass('slideout-hover');
$('#slideout-handle').addClass('slideout-hover');
var isAnimated = false;
var mouserOverHandle = false;
var slideIn = function () {
if (!isAnimated) {
isAnimated = true;
$('#slideout-nav').animate({
left: '0px'
}, function () {isAnimated = false;});
}
};
var slideOut = function () {
setTimeout(function () {
if (!isAnimated && !mouseOverHandle) {
isAnimated = true;
$('#slideout-nav').animate({
left: '-200px'
}, function () {isAnimated = false;});
}
}, 10);
};
$('#slideout-handle').hover(function () {mouseOverHandle = true;}, function () {mouseOverHandle = false;});
$('.slideout-hover').hover(slideIn, slideOut);
I added a lock (isAnimated) to prevent the menu from sliding in other direction when it is already sliding.
And, the tricky part I think it can be improved, I added a timer to the slideOut function, because we have to know (when leaving the menu-container div) if we are over the handle or no. So the timer is just here to "wait" the event hover over the handle to be fired.
Without the timer (and the mouseOverHandle var) the menu slides out when your mouse goes over the handle from the menu-container. Feel free to remove it if it is not a matter for you.
See the jsFiddle here.
I came up with a solution to this based on an answer to another question.
I set the containing <div> to have a height and width of 0 with overflow: visible. Then I gave the containing <div> the hover event. This ensures that the event is only triggered when the mouse enters or leaves its children (my menu and handle <div>s).
Here is a JSFiddle for posterity.
HTML:
<div id="container">
<div id="menu">Menu</div>
<div id="handle">+</div>
</div>
JS:
var slideIn = function () {
$('#container').stop(true);
$('#container').animate({
left: '0px'
}, 'fast');
};
var slideOut = function () {
$('#container').stop(true);
$('#container').animate({
left: '-190px'
}, 'fast');
};
$('#container').hover(slideIn, slideOut);
CSS:
#container {
width:0;
height:0;
overflow:visible;
position:absolute;
left:-190px;
}
#handle {
padding:10px;
width:auto;
height:auto;
background: rgba(0, 0, 0, 0.8);
font-size:18px;
color:#FFF;
display:inline-block;
border-bottom-right-radius:3px;
}
#menu {
background: rgba(0, 0, 0, 0.8);
width:195px;
height:300px;
float:left;
display:inline-block;
border-bottom-right-radius:3px;
}
I have several images that I applied jQuery tooltip effect on..it works, but the problem is that irrespective of the image i click the tooltip only displays at the top of the page.
Is there a way I can make the tooltip appear beside each image that is clicked.
The jQuery I have so far looks like this :
$('.image').hover(function () {
$('.tooltip').fadeIn(1000);
}, function () {
$('.tooltip').fadeOut(1000);
});
$('.tooltip').css({
top: e.pageY,
left: e.pageX
})
CSS
.tooltip {
display: none;
height: auto;
position: absolute;
background-color: #D1C585;
color: black;
border: 2px solid rgba(128, 0, 32, 0.3);
padding: 5px;
border-radius: 5px;
font-family: actor;
}
HTML
<img src="image.jpg" class="image">
It needs to have position: absolute and its parent has to be position: relative. Inside the hover function do:
$('.tooltip').css({
top: e.pageY,
left: e.pageX
})
It all depends on where the location of the tooltip node is located. However, you can get the fixed position of the image by grabbing and adding all the offsetLeft/offsetTop of all the element and it's parents. For example.
$('.image').hover(function() {
var e = this,top=0,left=0;
while(e){
top+=e.offsetTop;
left+=e.offsetLeft;
e=$(e).parent();
}
$(this).css({position:'fixed',top:top+"px",left:left:left+"px"});
$('.tooltip').fadeIn(1000);
}, function() {
$('.tooltip').fadeOut(1000);
});
I did not test this code. However, I hope this points you in the right direction. You can then use the size of the image(offsetHeight and offsetWidth) to position the tooltip around the image.
Here is an example using jquery ui, see jquery ui tooltip for documentation
HTML
<img src="http://img262.imageshack.us/img262/68/sahara4rs.jpg" title="tyre">
Javascript
$(document).tooltip({
track: true,
show: {
effect: "fade",
delay: 1000
},
hide: {
effect: "explode",
delay: 250
}
});
On jsfiddle