How to Show hide div area with jquery
if scrollbar or overflow element active and no active
and this example code for My question
example html
$(function(){
var t = $('#container-ts-plugin-area'),
s = t.find('.container-ts-plugin-area'),
e = s.find('.ts-plugin-area'),
f = (e.outerWidth()+parseInt(e.css('margin-left'),10)+parseInt(e.css('margin-right'),10))*e.length;
s.css('width', f);
$('._ts_cont_btn_N_P button').on("click mouseenter", function() {
var role = $(this).data('role');
t.stop().animate({
scrollLeft: (role=="N")?"+=300px":"-=300px"
}, 400);
});
});
._ts_cont_btn_N_P {
overflow: hidden;
}
.plugin-area {
overflow-x:auto;
overflow-y:hidden;
}
.ts-plugin-area {
width:100px;
height:100px;
background-color:red;
display:block;
float:left;
margin:0 5px;
}
._ts_btn_prev_plugin {
float:left;
}
._ts_btn_N_plugin {
float:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="_cont_plugin_tse">
<div class="_ts_cont_btn_N_P"> <!-- auto show hide -->
<button class="_ts_btn_P_plugin" data-role="P"><<</button>
<button class="_ts_btn_N_plugin" data-role="N">>></button>
</div>
<div id="container-ts-plugin-area" class="plugin-area">
<div class="container-ts-plugin-area">
<div class="ts-plugin-area" data-position="1">1</div>
<div class="ts-plugin-area" data-position="2">2</div>
<div class="ts-plugin-area" data-position="3">3</div>
<div class="ts-plugin-area" data-position="4">4</div>
<div class="ts-plugin-area" data-position="5">5</div>
<div class="ts-plugin-area" data-position="6">6</div>
</div>
</div>
</div>
To check if element have scrollbar or overflow active or no active state you need to check if the child element is bigger than the parent element.
Also its depend on your overflow settings of your parent thats its should be auto or scroll in order to show the scrollbar.
Global example
if($('.child').width() > $('.parent').width()) {
// then do something
console.log('scrollbar is active');
}
.parent {
width: 300px;
overflow: auto;
}
.child {
width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">
// add something in here
</div>
</div>
And for your code can check if the .container-ts-plugin-area width is bigger than the #container-ts-plugin-area width and then you show the buttons
And by default to hide this buttons in css
._ts_cont_btn_N_P {
overflow: hidden;
display: none;
}
And in the jQuery to add
if(s.width() > t.width()) {
$('._ts_cont_btn_N_P').show();
}
here is the full demo of your code
https://jsfiddle.net/p2y79f7x/1/
Related
When my page loads there is an image that will appear. What I want to do is on scroll, fade out that image and fade in another image. While this animation is happening, I don't want the images to be scrolled up. It's only when the second image has faded in completely that I want to be able to scroll to the content that follows on the page.
I used this answer to come up with part of a solution.
html
<body>
<div id="container">
<div id="mainImg">
<img src="images/1.png" style="height: 100%">
</div>
<div id="brandStatement">
<img src="images/2.png" style="height: 100%">
</div>
</div>
<img src="images/map.png">
<script type="text/javascript" src="main.js"></script>
</body>
js
let locked = false,
mainImage = document.getElementById('mainImg'),
brandStatement = document.getElementById('brandStatement');
window.addEventListener('scroll', function() {
if (!locked) {
window.requestAnimationFrame(function() {
brandStatement.style.opacity = Math.min(window.scrollY / window.innerHeight, 1);
if (brandStatement.style.opacity === '1') {
// scroll to next content
}
locked = false;
});
}
locked = true;
});
css
#container {
height: 200vh;
width: 100%;
}
#mainImg {
text-align: center;
width: 100%;
height: 100%;
position: fixed;
}
#brandStatement {
text-align: center;
width: 100%;
height: 100%;
position: fixed;
opacity: 0;
}
I didn't see a possible solution to the problem by improving your code. This is a personal approach.
What I'm doing here, is changing the opacity of the element one inside the cover container as the user scrolls down the page, revealing the image below. After the opacity changes have been done, the script will change the filling container display style property from none to block. This element is just meant to fill the upper side of the cover container to prevent it from moving up when the position style property is changed from fixed to null.
And the reversed logic applies when scrolling back up.
const one = document.getElementById('one')
const cover = document.getElementById('cover')
const filling = document.getElementById('filling')
window.addEventListener('scroll', () => {
let scrollY = window.scrollY
let bottomHeight = window.innerHeight
if(scrollY / bottomHeight <= 1){
one.style.opacity = 1 - ( scrollY / bottomHeight )
cover.style.position = 'fixed'
filling.style.display = 'none'
}
else{
cover.style.position = null
filling.style.display = 'block'
}
})
*{padding:0;margin:0;border-size: border-box}
body{
height: 3500px;
}
img {
width: 100%;
height: 100vh;
}
#filling{
height:100vh;
width:100%
}
#cover{
height:100vh;
width:100%;
}
#cover > div{
height:100vh;
width:100%;
position:absolute;
}
#one{
z-index:2;
}
#two{
z-index:1;
}
<body>
<div id='filling' style='display:none'>
</div>
<div id='cover' style='position:fixed'>
<div id='one'>
<img src='https://picsum.photos/id/200/1000/1000'>
</div>
<div id='two'>
<img src='https://picsum.photos/id/201/1000/1000'>
</div>
</div>
<div>
<img src='https://picsum.photos/id/206/1000/1000'>
</div>
<div style='margin-top:-10px'>
<img src='https://picsum.photos/id/204/1000/1000'>
</div>
<div style='margin-top:-10px'>
<img src='https://picsum.photos/id/208/1000/1000'>
</div>
</body>
I am trying to make a container div change set height on click, but am having trouble getting it to work. I am not sure where I messed up and would love input as I am pretty new to Javascript.
$(function() {
$('#menu').click(function() {
$(".outer").css('height','600px ');
});
});
Here is a JS fiddle: https://jsfiddle.net/r92cc51d/2/
If you are just looking to increase the height on click then you don't need to do it in JS. You can do it in html also.
<div id="outer">
<div id="menu" onClick = "document.getElementById('outer').style.height = '600px';">
</div>
</div>
You're missing closing parenthesis for your click function:
$('#menu').on('click', function() {
$('.outer').css('height', '400px');
});
.outer {
width: 200px;
height: 200px;
background-color: #111111;
}
#menu {
height: 20px;
width: 20px;
background-color: #666666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div id="menu">
</div>
</div>
I have a fixed menu that scrolls on top of both light and dark backgrounds.
If the text is white it becomes invisible when on top of white elements. I would like to find a way where the color of the text changes dynamically as I scroll on the page.
My menu:
<div class="nav-wrapper footer-wrapper">
<nav>
<div class="column">
Previous
</div>
<div class="column links">
Next
</div>
</nav>
A working JSFiddle: https://jsfiddle.net/ua06Lbwk/5/
Any ideas?
You can use jQuery to add/remove a css class depending on the height of the divs.
Like this:
HTML:
<nav>
link
</nav>
<div id="element1">
</div>
<div id="element2">
</div>
<div id="element3">
</div>
CSS:
.wrapper {
height: 100px;
}
nav {
position: fixed;
width: 100%;
color: white;
text-align: center;
}
#element1 {
height: 50vh;
background-color: gray;
}
#element2 {
height: 20vh;
background-color: white;
}
#element3 {
height: 100vh;
background-color: black;
}
.active {
color:black;
}
jQuery:
$(document).ready(function() {
$(window).scroll(function() {
var element1height = $( "#element1" ).height();
var element2height = $( "#element2" ).height();
var total = element1height + element2height;
var st = $(this).scrollTop();
if( st > element1height ) {
$("nav").addClass("active");
}
else {
$("nav").removeClass("active");
}
if( st > total ) {
$("nav").removeClass("active");
}
});
});
You can use jQuery to get the height of the divs - if the user scrolls past the height of <div id="element1">, it will add a class to <nav> which changes the color of the text within. If the user scrolls past the sum of <div id="element1"> & <div id="element2">'s height - it will remove the class.
JSFiddle Demo
I have a side nav bar which looks like this:
.scroll-box {
overflow: hidden;
width: 128px;
}
.filler {
height: 256px;
overflow-y: auto;
}
.selector {
background-color: #369;
padding: 8px 4px;
text-align: center;
flex-grow: 1;
display: inline-block;
cursor: pointer;
box-sizing: border-box;
transition: .1s !important;
}
.bar {
height: 8px;
width: 100%;
background-color: #808080;
}
.label {
padding: 4px 8px;
background-color: #707070;
}
.active {
background-color: lightgrey;
color: #369;
}
<div class="scroll-box">
<div class="label">Dates</div>
<div class="filler">
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector active" id="today">15-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
</div>
<div class="bar"></div>
</div>
I want to get it so that when the page loads, it automatically centers the view of the side nav bar to the today id element. I've tried putting myUrl#today but that changes the entire page scroll, which I do not want. I
I only want the scroll in the side nav bar to change it's position and center on the #today bit. Does anyone know of a way to do this?
I am willing to use jQuery and JS as well.
Thank you.
I think you can use jQuery code such as
$(document).ready(function(){
// when document is ready
// first check if #today is defined in HTML
// the $('') is the jQuery selector of to select an element
// $('#today') means select an element with the ID "today"
// the .length attribute is default javascript attribute to check
// how many of elements selected has existed
if($('#today').length > 0){
// the offset() function is a jQuery function that is used for check the
// relative distance from the border of current element to its parent
var distance_to_top = $('#today').offset().top;
var top_label_height = $('.label').height();
var distance_to_scroll = distance_to_top - top_label_height - 8;
// 8 px is body margin on jsfiddle
// scrollTop() function is another jQuery function to scroll an
// overflow element
$('.filler').scrollTop(distance_to_scroll);
}
});
find the offset of the today element relative to its parent, then minus the label height because the label will cover on top of the #today. the scroll to top
The demo can be found at here
Maybe this can do. (I can't test it right now...).
Basically, we get every element of the div that doesn't have the id "today" and we add the height of those elements. When we finally reach "today", we set the scrollbar to the height of every past elements added together and go out of the loop.
$(document).ready(function(){
var height = 0;
$(".filler *").each(function () {
if($(this).is("#today"))
{
return false; //to get out of the .each
}
else
{
height += $(this).height();
}
})
$( "div.demo" ).scrollTop(height); //set the scrollbar
});
I have two DIV
one on the right the the other on the left side
I'm looking for a code that give me link and by clicking on this link both divs will expand to 100% (mean that one of them will slide down) and by click again they will return back to be side by side
I tried this:
<style>
#container {
width:100%;
height:500px;
}
#left {
width:45%;
height:500px;
float: left;
}
#right {
width:45%;
height:500px;
float: left;
}
</style>
<script type="text/javascript" src="scripts/jquery-1.8.0.min.js"></script>
<div id="container">
<div id="left">
LEFT
</div>
<div id="right">
RIGHT
</div>
</div>
<script>
$('#container').click(function(){
if (parseInt($('div#right').css('right'),10) < 0) {
// Bring right-column back onto display
$('div#right').animate({
right:'0%'
}, 1000);
$('div#left').animate({
width:'45%'
}, 600);
} else {
// Animate column off display.
$('div#right').animate({
right:'-45%'
}, 600);
$('div#left').animate({
width:'100%'
}, 1000);
}
});
</script>
You can use jQuery toggle, for your puspose.
Have a look at this Example