I'm pretty new to javascript and I'm trying to create a horizontal scrolling div :-
JSfiddle
As you can see the menu links go to each colour but I would like to put this inside a container which is 250x250px so only 1 colour is visible, then you click on whichever link and it scrolls to that colour.
Hope someone can help me with a few pointers.
Thanks!
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
event.preventDefault();
$('html,body').animate({
scrollLeft: $(this.hash).offset().left
}, 200);
});
});
.container {
white-space: nowrap;
}
.child-element {
min-width: 250px;
display: inline-block;
height: 250px;
}
.child1 {
background-color: purple;
}
.child2 {
background-color: orange;
}
.child3 {
background-color: black;
}
.child4 {
background-color: green;
}
.child5 {
background-color: blue;
}
.child6 {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
PURPLE
ORANGE
BLACK
GREEN
BLUE
RED
<div class="container">
<div id="purple" class="child-element child1"></div>
<div id="orange" class="child-element child2"></div>
<div id="black" class="child-element child3"></div>
<div id="green" class="child-element child4"></div>
<div id="blue" class="child-element child5"></div>
<div id="red" class="child-element child6"></div>
</div>
As #Script47 mentioned, you'll want to apply overflow-x as a CSS property to your element, in addition the width (to act as a viewport). Here's what your final CSS might look like:
.container {
white-space: nowrap;
overflow-x: scroll;
width: 250px;
position: relative;
}
After that, you'll need to modify your JS slightly. You'll still want to scroll to the offset of the element, but you'll also need to take into account your current scroll position.
(To clarify, if you clicked orange - which has an offset initially of 250px, post-animation, the offset for orange would be0px, and black would be250px. If you then click black, it will attempt to scroll to 250px, which is the orange element.)
Here's what the updated JS might look like:
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
var current = $('.container').scrollLeft();
var left = $(this.hash).position().left;
event.preventDefault();
$('.container').animate({
scrollLeft: current + left
}, 200);
});
});
A fiddle to demonstrate: https://jsfiddle.net/bpxkdb86/4/
For the fiddle, I removed physical white-space in the HTML (to prevent the divs from having space between them) using <!-- comments -->, and also added position: relative to the containing element (to use position)
A CSS solution, try adding this to you element in CSS,
overflow-x: scroll;
This, should do it for you.
You need two changes for this to work.
First, add height and width for the container and then set overflow in css.
width:250px;
height:250px;
overflow: auto;
Second update jquery to animate the container, now it is animating the body.
$('.single-box').animate({
JSFiddle is avaialble in the following link
https://jsfiddle.net/jym7q0Lu/
just use a css if you want your div to be scrollable..
.container {
white-space: nowrap;
overflow-x: scroll;
width: 250px;
position: relative;
}
Related
I want a slide effect on a div from left to right or from right to left as in
$('#div').show('slide', {direction:'left'}, 1000);
being my html is
<div id="div-pre">
</div>
<div id="div">
</div>
<div id="div-nex">
</div
But the problem with this approach is that we are hiding the #div initially by setting
#div{
display:none;
}
so that we cannot preserve the width of #div
I have came across another method by making the visibility: hidden as in
$("div").css("visibility", "hidden");
to preserve the width of the div
but this method does not give the sliding effect from left to right or right to left
So I want to achieve both "the effect as in .show('slide', [option], [speed]) altogether with
preserving the div width"
Having no example code to go off, I decided to write a basic example of how you could approach this. Basically, you put an overflow: hidden container around the thing that you want to slide to the left while preserving width, and you then animate a movement leftwards using animate('left':'-pixels');. Your div has to be positioned relatively for this to work. See example below.
$(document).ready(function(){
$('.slideLeft').click(function(){
$('.slider').animate(
{'left':'-600px'},
1000,
function(){
$('.slider').hide();
}
);
});
});
.slider{
height: 300px;
width: 600px;
font-size: 20px;
background-color: yellow;
position: relative;
}
.container{
border: 1px solid red;
height: 300px;
width: 600px;
background-color: silver;
overflow: hidden;
}
.slideLeft{
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="slider">
Hi, I have some content!
</div>
</div>
<button class="slideLeft">Slide me left!</button>
Good luck!
You can wrap your div in another div with overflow:hidden and than you move to right or left the div inside.
What do i want to achive?
I want to remove a div which isnt visible(for the user not the css atribute) anymore on the screen because i let the html and body scroll to a div with jquery(scrollTop). Now i want to remove the div which was visible beforr i scrolled down with jquery.
Edit: After removing the .header div, the #begining should be the top of the page and the .header div should be removed forever.
What is the problem?
After i scrolled down and removed the div with the following line of code: $('.header').css('display','none'); the scroll position changes.
Code to scroll down and remove the div.
function scrollToBegining(){
$('html, body').animate({
scrollTop: $("#begining").offset().top
}, 750);
setTimeout(function(){
$('.header').css('display','none');
},750);
}
Problem visualized:
GIF of the problem (Watch to understand better)
This is odd, but I think a better choice is to slideUp the div instead of scrolling:
function scrollToBegining(){
$('.header').slideUp(750);
}
Obviously, rename the function since it's no longer scrolling.
You can use visibility: hidden to hide the div but reserve its space. Also, sometimes the scroll position has to be changed when you use display: none.
visibility: hidden
is what you are looking for, but another solution I use with this kind of issue is instead of scrolling down to your second div, have the initial div shrink its height in a uniform animation until it is 0. This prevents the weird shuddering scroll issue you are experiencing
document.querySelector('#header h1').addEventListener('click', closeHeader)
function closeHeader(){
document.querySelector('#header').classList.add("hidden");
}
#header {
height: 300px;
width: 100%;
background: red;
text-align: center;
}
#content {
height: 1000px;
width: 100%;
background: yellow;
text-align: center;
}
.hidden {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
<div id="header">
<h1>
HEADER
</h1>
</div>
<div id="content">
CONTENT
</div>
I have a div that I want to be able to click and shrink to the top ~10% of a page. I have code similar to this where one DIV should cover everything, then the second DIV would have the content for the page:
<div id="cover">Optimized the javascript so that all code is based on jQuery.
</div>
<div id="content" style="height:300px;" class="hide" >Optimized the javascript so that all code is based on jQuery.
</div>
This is a partial example of what I want to do:
JSFiddle
The problem with this is that the slideUp() function seems to completely hide the "cover" DIV rather than shrink it to part of it's size. The other problem I have is that the background doesn't scale with the DIV. I would like the background image to shrink to a reasonable size in the cover DIV. Is this possible? In my example JSFiddle, the white space should have the "cover" DIV, and a smaller version of the background image.
jQuery slideToggle(); is actually supposed to hide or show an element completely due the fact that you're not supposed to hide or show it with the element you're hiding / showing.
So to solve your problem I've created an extra div that will hide or show the element giving it the appearence of only partly hiding the element. You can find the fiddle here:
JSFiddle
I've also scaled the background for you.
I would use jquery's animate() for this and replace background-attachment:fixed with background-size: 8em;
Tweak this part depending on the size of your divs { "height": "30%","background-size": "6em" }
$(function () {
$('#cover').click(function () {
$(this).animate({ "height": "30%","background-size": "6em" }, 400, function () {
$(this).next().show();
});
});
});
* {
margin: 0px;
padding: 0px;
}
html {
width:100%;
height:100%;
}
.hide {
display: none
}
.show {
}
#cover {
background-color: black;
width:100%;
height: 100%;
top:0;
left:0;
position:fixed;
background-size: 8em;
margin: 0 auto;
background-image: url('http://i.stack.imgur.com/JVX13.png');
background-repeat:no-repeat;
background-position:center;
}
#content {
background-color: #CCCCFF;
padding: 5px 10px;
width:100%;
height: 100%;
top:30%;
left:0;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="cover">Optimized the javascript so that all code is based on jQuery.</div>
<div id="content" class="hide">Optimized the javascript so that all code is based on jQuery.</div>
I would like to display indicators for a certain div to show that it can be scrolled right or left depending on its state. To do so I would need to know if element can be scrolled to respective positions, e.g. if there is content to be seen on the right show indicator and after scrolling show another indicator on the left to indicate that users can now scroll there as well. I have a simple setup like this one: https://jsfiddle.net/udv8u596/
(You can scroll horizontally, scrollbar is hidden intentionally)
HTML:
<div class="scroll-container">
<div class="scroll-content">
Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally
</div>
</div>
CSS:
.scroll-container {
width: 80%;
margin: 0 auto;
background: cyan;
overflow-y: hidden;
height: 36px;
}
.scroll-content {
padding: 10px 0;
height: 50px;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}
To check if an element is overflowing along the x-axis, you can simply compare its computed width, accessible via jQuery's .width() method, and its scrollWidth, a native JS function:
var $ele = $('.scroll-content'),
overflowing = $ele[0].scrollWidth > $ele.width();
You can then check the boolean value of overflowing if the element is overflowing or not. However, note that if you want this variable to be updated if the window resizes, a little more work has to be done:
var $ele = $('.scroll-content'),
overflowing = function() {
if($ele[0].scrollWidth > $ele.width()) {
return true;
} else {
return false;
}
};
console.log(overflowing());
$(window).resize(function() {
console.log(overflowing());
});
Here's a fiddle with the above logic implemented, with some slight modifications: https://jsfiddle.net/teddyrised/udv8u596/5/
Ilya basically you need to check your element right postion. On way of achieving this is to set the inner element to have absolute oistion and get right postion with jQuery
parseInt($('.scroll-content').css('right')) >= 0
I have modified you code as: https://jsfiddle.net/udv8u596/4/
In this example before animating the element it checks if the righ position is bigger than 0.
Please not that righ position is calculated based on the parent element. Left position is set to be 0 in the css but righ postion will be calculated in this example is ~-250.
I hope this gives you an idea how to solve your problem.
Here's a quick start for what you are looking for :
HTML
<div class="scroll-container">
<div class="mask">
<div class="scroll-content">
Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally
</div>
</div>
</div>
<div class="scrollRight">Scroll Right »</div>
<div class="scrollLeft">» Scroll Left </div>
CSS
.scroll-container {
width: 80%;
margin: 0 auto;
background: cyan;
overflow-y: hidden;
overflow-x: hidden;
height: 36px;
}
.mask{
position:relative;
overflow-x: hidden;
overflow-y: hidden;
height: 36px;
width: 100%;
}
.scroll-content {
position:absolute;
padding: 10px 0;
height: 50px;
white-space: nowrap;
overflow-x: visible;
width:auto;
}
.scrollRight, .scrollLeft{
font-size:10px;
display:none;
}
JS
var contentWidth = $(".scroll-content").width();
var containerWidth = $(".scroll-container").width();
if(contentWidth>containerWidth){
$(".scrollRight").show();
}
$("body").on("click", ".scrollRight", function(){
var scrollValue = contentWidth-containerWidth;
$(".scroll-content").animate({"margin-left":"-"+scrollValue+"px"});
$(".scrollRight").hide();
$(".scrollLeft").show();
})
$("body").on("click", ".scrollLeft", function(){
var scrollValue = contentWidth-containerWidth;
$(".scroll-content").animate({"margin-left":"0px"});
$(".scrollRight").show();
$(".scrollLeft").hide();
})
See Update JSFiddle
I know it seems trivial, but I'm having some trouble wrapping my head around this.
<div id="divA" style="width: 400px; height: 400px; background-color: #FF0000;">
<div id="divB" style="float: left; width: 200px; height: 200px; background-color: #FFFF00;">
<div id="divC" style="float: left; width: 100px; height: 100px; background-color: #FF00FF;">
</div>
</div>
</div>
What I need is a rule that applies to all divs, like div:hover { background-color: #000000 !important; }, that only affects the first parent div of the event (when I hover divC, I want the background color of divC to change to black, but not the background colors of divB or divA)... like the inspector does in Google Chrome.
Any ideas?
I don’t believe it is possible to do this with just CSS, but you can with JavaScript.
The key is to use event.stopPropagation() on the mouseover event.
Here is an example using jQuery: http://jsfiddle.net/K96DS/2/
$('div').on('mouseover', function(){
$(this).addClass('hovered')
// this is the key, this stops te mouover event
// from bubbling up to the parent elements
event.stopPropagation();
}).on('mouseout', function(){
$(this).removeClass('hovered')
})
Are you thinking using something like .this because of an odd behavior in :hover?
.mouseover(function(){
$(this).addClass('selected');
});
Are you looking for something like this ?
jQuery Solution:
$('div').each(function(){
$(this).on({
mouseover:function(){
$(this).css('background-color','black');
},
mouseout:function(){
$(this).css('background-color','');
}
});
});
http://jsfiddle.net/j8ebE/2/
#divC:hover #divA { background-color: #FF0000 !important; }
#divC:hover #divB { background-color: #FFFF00 !important; }
Maybe hacks... :)