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
Related
I'm using the code below to scroll through different divs after a timed period. However, the page keeps sliding back to bottom div when manually scrolling back up.
Is there a way to use this code but override the automatic slide back, where I can manually scroll to any div without it jumping back to the bottom before I finish reading what is in that div.
<style id="compiled-css" type="text/css">
#scroller {
overflow-y:scroll;
padding:0;
margin:0
border:1px solid #eee;
width:100%;
height:500px;
}
</style>
<body>
<div id="scroller">
<div style="width:50%;height:50%;background:#ff0000"></div>
<div style="width:50%;height:50%;background:#00ff00"></div>
<div style="width:50%;height:100%;background:#0000ff"></div>
<!--div style="width:50%;height:50%;background:#ff00ff"></div>
<div style="width:50%;height:50%;background:#ffff00"></div-->
</div>
Status: <span id="status">1</span>
<script type="text/javascript">
var scrollingUp = 0;
window.setInterval(scrollit, 3000);
function scrollit() {
if(scrollingUp == 0) {
$('#scroller').delay(2000).animate({ scrollTop: $("#scroller").scrollTop() + 500 }, 'slow');
}
}
</script>
Took me a while for this to figure it out.
Basically, you make it run on a class and set a function with timeout so that after the scrolling animation, function removes that class from a div. That way when it wants to run again it doesn't have anything to run on. And scrolling stops.
Hope this helps.
var scrollingUp = 0;
window.setInterval(scrollit, 3000);
function scrollit() {
if(scrollingUp == 0) {
$('.scroller').delay(2000).animate({ scrollTop: $(".scroller").scrollTop() + 500 }, 'slow');
}
};
setInterval(function(){ $("#scroller" ).removeClass("scroller"); }, 3000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style id="compiled-css" type="text/css">
#scroller {
overflow-y:scroll;
padding:0;
margin:0
border:1px solid #eee;
width:100%;
height:500px;
}
</style>
<body>
<div id="scroller" class="scroller">
<div style="width:50%;height:50%;background:#ff0000"></div>
<div style="width:50%;height:50%;background:#00ff00"></div>
<div style="width:50%;height:100%;background:#0000ff"></div>
<!--div style="width:50%;height:50%;background:#ff00ff"></div>
<div style="width:50%;height:50%;background:#ffff00"></div-->
</div>
Status: <span id="status">1</span>
I have one horizontal div and am trying to scroll to different elements based on id on click.
JS Fiddle Demo
Here are the two main functions I tried:
function scroll1() {
/* Attempt 1 */
$('#scroll-post-1').scrollTo('#2')
}
function scroll2() {
/* Attempt2 */
$('#scroll-post-1').stop().animate({
scrollLeft: $('#3').offset().left
}, 500);
event.preventDefault();
}
See the second attempt in action here:
function scroll1() {
$('#scroll-post-1').stop().animate({
scrollLeft: $('#2').offset().left
}, 500);
event.preventDefault();
}
function scroll2() {
$('#scroll-post-1').stop().animate({
scrollLeft: $('#3').offset().left
}, 500);
event.preventDefault();
}
function scroll3() {
$('#scroll-post-1').stop().animate({
scrollLeft: $('#4').offset().left
}, 500);
event.preventDefault();
}
.scroll-post {
height: auto;
background-color: grey;
position: relative;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}
.mydiv {
position: relative;
font-size: 5em;
width: auto;
background-color: red;
display: inline-block;
padding: 2%;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
</head>
<body>
<div class="scroll-post" id="scroll-post-1">
<div class="mydiv" id="1" onclick="scroll1();">Start Here</div>
<div class="mydiv" id="2" onclick="scroll2();">Scroll Here</div>
<div class="mydiv" id="3" onclick="scroll3();">Then Here</div>
<div class="mydiv" id="4">Finally Here</div>
</div>
</body>
</html>
I've tried the $(container).scrollTo(target) method without any luck.
It works for the first element, but not any of the subsequent elements.
The problem is that the .left offset that jQuery was tracking was relative to the container, so it degraded as the element moved.
A better way would be to use the native JavaScript property for the element, offsetLeftMDN.
For example:
scrollLeft: $('#3')[0].offsetLeft
Full Demo of your code with offsetLeft: https://jsfiddle.net/5umvne08/
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/
On a webpage I have multiple sections. In one of this sections I show lots of content blocks. These blocks can be filtered via a panel that floats on the right side.
Currently this floating panel is visible on all the sections of the webpage but I want it to only be visible within the section that I assign it to.
Ideally I would want it to have it stuck in the top right corner of the section on page load. Then when the user gets to the section it needs to keep scrolling with the user until it reaches the end then it needs to stay there.
When the user is finished on the page and scrolls back upwards it needs to do the same as above only in reverse order.
What needs to be done
Make it only visible within the section (assigning a specific section)
Make it stuck in the top right corner on page load
Disallow continuing to the next section after reaching the end of the assigned section.
jsFiddle
https://jsfiddle.net/nfuL86hg/
HTML:
<div id="section-aaa"></div>
<div id="section-bbb">
<div id="content"></div>
<div id="scroller">
Hello<br>
World<br>
</div>
</div>
<div id="section-aaa"></div>
JS:
(function ($) {
$(document).ready(function() {
$(window).scroll(function(){
$("#scroller").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
});
});
})(jQuery);
CSS:
#section-aaa{
position:relative;
height:500px;
background:red;
}
#section-bbb {
position:relative;
height:1000px;
background:grey;
}
#content {
height:100%;
}
#scroller {
background-color: #fca9a9;
width: 250px;
position: absolute;
top: 50px;
right: 0;
z-index: 1;
}
Thanks everyone for helping.
PS: If you know a better title please post it in the comment area. At the moment I could not think of a better one.
here is one demo
https://jsfiddle.net/nfuL86hg/2/
(function ($) {
$(document).ready(function() {
$(window).scroll(function(e){
if(getIsInArea()){
console.log('animate');
$("#scroller").stop().animate({
"marginTop": ($(window).scrollTop()) + "px",
"marginLeft":($(window).scrollLeft()) + "px"
}, 100 );
}
});
function getIsInArea(){
var w = $(window).scrollTop();
var p = $('#section-bbb').position();
var top = p.top;
var down = top+$('#section-bbb').innerHeight();
if(w>=top && w<=down) {
return true
}
return false;
}
});
})(jQuery);
Expect goes near you need it
Another solution wihtout the animation, in case you want it simpler.
Check it on this JSFiddle.
HTML
<div id="section-aaa"></div>
<div id="section-bbb">
<div id="content"></div>
<div id="scroller">
Hello<br>
World<br>
</div>
</div>
<div id="section-aaa"></div>
CSS
body {
padding: 0;
margin: 0;
}
#section-aaa{
position:relative;
height:500px;
background:red;
}
#section-bbb {
position:relative;
height:1000px;
background:grey;
}
#content {
height:100%;
}
#scroller {
background-color: #fca9a9;
width: 250px;
position: absolute;
top: 50px;
right: 0;
z-index: 1;
}
JavaScript
(function ($) {
$(document).ready(function() {
$(window).scroll(function(){
if ($(window).scrollTop() > $('#section-bbb').offset().top) {
if ($(window).scrollTop() < $('#section-bbb').offset().top + $('#section-bbb').height() - 100 - $('#scroller').height() ){
$('#scroller').css({"position":"fixed", "top":"50px", "bottom":"auto"});
} else {
$('#scroller').css({"position":"absolute", "top":"auto", "bottom":"50px"});
}
} else {
$('#scroller').css({"position":"absolute", "top":"50px", "bottom":""});
}
});
});
})(jQuery);
In Javascript it checks if the scroll top of the window is in the section-bbb div and if it is, it changes the css of the scroller div to have position: fixed. If the scroll top of the window is below the section-bbb div, it changes back the css of the scroller div to have position: absolute and be on the bottom of the section-bbb div (top:auto, bottom:50px). If the scroll top of the window is above the section-bbb div, it changes the css of the scroller div to have position: absolute and be on the top of the section-bbb div (top:50px, bottom:auto).
I want to create horizontal responsive page navigation as illustrated by the below image :
This is what I have managed to do : DEMO
$(document).ready(function () {
var slideNum = $('.page').length,
wrapperWidth = 100 * slideNum,
slideWidth = 100/slideNum;
$('.wrapper').width(wrapperWidth + '%');
$('.page').width(slideWidth + '%');
$('a.scrollitem').click(function(){
$('a.scrollitem').removeClass('selected');
$(this).addClass('selected');
var slideNumber = $($(this).attr('href')).index('.page'),
margin = slideNumber * -100 + '%';
$('.wrapper').animate({marginLeft: margin},1000);
return false;
});
});
html, body {
height: 100%;
margin: 0;
overflow-x:hidden;
position:relative;
}
nav{
position:absolute;
top:0; left:0;
height:30px;
}
.wrapper {
height: 100%;
background: #263729;
}
.page {
float:left;
background: #992213;
min-height: 100%;
padding-top: 30px;
}
#page-1 {
background: #0C717A;
}
#page-2 {
background: #009900;
}
#page-3 {
background: #0000FF;
}
a {
color:#FFF;
}
a.selected{
color: red;
}
.simulate{
height:2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrapper">
<nav>
page 1
page 2
page 3
</nav>
<div id="page-1" class="page">
<h3>page 1</h3>
<div class="simulate">Simulated content heigher than 100%</div>
</div>
<div id="page-2" class="page">
<h3>page 2</h3>
<div class="simulate">Simulated content heigher than 100%</div>
</div>
<div id="page-3" class="page">
<h3>page 3</h3>
<div class="simulate">Simulated content heigher than 100%</div>
</div>
</div>
I have however hit a few brick walls, as mine is responsive to a certain degree, its just as you scale it needs to stick to the page its on and not reveal the others.
Also if the pages are long it shows a scroll bar which is perfect, but on the last slide there is a gap as wide as the scroll-bar.
I have the following Requirements:
Needs to be Responsive
pages need to be able to be long (800px) and still scrollable, without the gap on the last one.
needs to work on minimum ie9
Horizontal page sliding
with left-margin animation
This jQuery snippet :
Calculates the number of slides and set the width of the wrapper accordingly.
According to which link is clicked, left-margin is animated on the wrapper to show the corresponding slide with a smooth transition
Toggles the class of the clicked link for active link highlighting
Note that this solution:
Uses only one menu occurence to minimize markup and prevent content repetition.
Requires only the jQuery library
works for a dynamic number of slides
$(document).ready(function() {
var slideNum = $('.page').length,
wrapperWidth = 100 * slideNum,
slideWidth = 100 / slideNum;
$('.wrapper').width(wrapperWidth + '%');
$('.page').width(slideWidth + '%');
$('a.scrollitem').click(function() {
$('a.scrollitem').removeClass('selected');
$(this).addClass('selected');
var slideNumber = $($(this).attr('href')).index('.page'),
margin = slideNumber * -100 + '%';
$('.wrapper').animate({
marginLeft: margin
}, 1000);
return false;
});
});
html,
body {
height: 100%;
margin: 0;
overflow-x: hidden;
position: relative;
}
nav {
position: absolute;
top: 0;
left: 0;
height: 30px;
}
.wrapper {
height: 100%;
background: #263729;
}
.page {
float: left;
background: #992213;
min-height: 100%;
padding-top: 30px;
}
#page-1 {
background: #0C717A;
}
#page-2 {
background: #009900;
}
#page-3 {
background: #0000FF;
}
a {
color: #FFF;
}
a.selected {
color: red;
}
.simulate {
height: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<nav>
page 1
page 2
page 3
</nav>
<div id="page-1" class="page">
<h3>page 1</h3>
<div class="simulate">Simulated content heigher than 100%</div>
</div>
<div id="page-2" class="page">
<h3>page 2</h3>
<div class="simulate">Simulated content heigher than 100%</div>
</div>
<div id="page-3" class="page">
<h3>page 3</h3>
<div class="simulate">Simulated content heigher than 100%</div>
</div>
</div>
"as you scale it needs to stick to the page its on and not reveal the others"
To achieve this, keep a reference to the current page element and then do a no-delay scrollTo this element when the window is resized:
var currentPage; //here is where we will hold the reference
jQuery('a.scrollitem').click(function () {
var targetPage = $(jQuery(this).attr('href'));
jQuery('a.scrollitem').removeClass('selected');
jQuery(this).addClass('selected');
jQuery('.toggle').css({'display':'none'});
jQuery('.wrapper').scrollTo(targetPage, 1200, function(){
jQuery('.toggle').css({'display':'block'});
});
currentPage = targetPage; //here is where we set the reference
return false;
});
//and here we do a no-delay scrollTo
$(window).resize(function(){
if(!!currentPage){
console.log('window resized. scrolling to: ', currentPage.attr('id'));
jQuery('.wrapper').scrollTo(currentPage);
}
});
This makes it pretty responsive, in my opinion.
pages need to be able to be long (800px) and still scrollable, without the gap on the last one.
To get rid of that gap, I just make all pages a little longer than they need to be. The scrolling is not affected by this since the pages are left-justified with left:0;. I suspect that the other pages had the same gap and and that the gaps on those pages were covered by the scroll bar.
.page {
width: 110%;
}
needs to work on minimum ie9
I'm afraid I can't help in this regard; I have only IE11 installed. But hey, it works great in IE11.
Working fiddle