Button show has position: fixed property only inside the second div. When I scroll to the first or last div, button should not be fixed on them, which means the button should be visible only inside the second div, how can I do that?
.one{
height:600px;
width: 100%;
background-color: red;
}
.two{
height:600px;
width: 100%;
background-color: yellow;
}
.three{
height:600px;
width: 100%;
background-color: pink;
}
.mybutton{
width:80px;
height: 20px;
position: fixed;
right:10px;
top:100px;
}
<html>
<head>
<body>
<div class="one">
<button class="mybutton">Click</button>
</div>
<div class="two"></div>
<div class="three"></div>
</body>
</head>
</html>
Here's one way, though I don't know if it's the one you're looking for. Use position:sticky on the button, and position:relative on the container (.two)
.one {
height: 600px;
width: 100%;
background-color: red;
}
.two {
height: 600px;
width: 100%;
background-color: yellow;
position: relative;
}
.three {
height: 600px;
width: 100%;
background-color: pink;
}
.mybutton {
width: 80px;
height: 20px;
position: sticky;
right: 10px;
top: 100px;
}
<div class="one"></div>
<div class="two"><button class="mybutton">Click</button></div>
<div class="three"></div>
Position: fixed places an element relative to the view port. If you want to place an element relative to a parent element, place it inside the parent element with Position:relative
.one{
height:600px;
width: 100%;
background-color: red;
}
.two{
height:600px;
width: 100%;
background-color: yellow;
}
.three{
height:600px;
width: 100%;
background-color: pink;
}
.mybutton{
width:80px;
height: 20px;
position: relative;
right:10px;
top:100px;
}
<html>
<head>
<body>
<div class="one"></div>
<div class="two">
<button class="mybutton">Click</button>
</div>
<div class="three"></div>
</body>
</head>
</html>
You should try to use
https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll
With window.scroll() you can attach event on the scroll of the page like eg:
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$('.mybutton').css("position": "fixed");
}else if ($(window).scrollTop() > 200 || $(window).scrollTop() < 100){
$('.mybutton').css("position": "static");
}
})`
Related
I want to create a script in which i want to increase the margin-top of the image on scrolling down the page and vice-versa, but i cant understand where to put the event listener.
So,That when scrolling down the page, the image moves with the scroll and stops before the green div.
document.getElementById("body").addEventListener("scroll", myFunction);
function myFunction()
{
console.log('scrolled');
}
#body{
width:100%;
height:3000px;
}
#yellowdiv
{
width:100%;
height:1000px;
background-color: yellow;
}
#image
{
width:50%;
height:500px;
border: 10px solid black;
}
#bluediv
{
width:100%;
height:1000px;
background-color: blue;
}
#pinkdiv
{
width:100%;
height:1000px;
background-color: pink;
}
#greendiv
{
width:100%;
height:1000px;
background-color: green;
}
<div id="body">
<div id="yellowdiv">
<img id="image"src="#">
</div>
<div id="bluediv">
</div>
<div id="pinkdiv">
</div>
<div id="greendiv">
</div>
</div>
P.S - new to JS
Thanks in Advance.
You are trying to attach the event handler to the #body div but you are not scrolling the div, you are scrolling the window.
If you want to attach a scroll-event handler to the div, it must be scrollable. Below you can find an example with a wrapper div #scrollable and the event handler is attached to it.
document.getElementById("scrollable").addEventListener("scroll", myFunction);
function myFunction() {
console.log('scrolled');
}
#scrollable {
height: 100px;
overflow-y: auto;
}
#body {
width: 100%;
height: 3000px;
}
#yellowdiv {
width: 100%;
height: 1000px;
background-color: yellow;
}
#image {
width: 50%;
height: 500px;
border: 10px solid black;
}
#bluediv {
width: 100%;
height: 1000px;
background-color: blue;
}
#pinkdiv {
width: 100%;
height: 1000px;
background-color: pink;
}
#greendiv {
width: 100%;
height: 1000px;
background-color: green;
}
<div id="scrollable">
<div id="body">
<div id="yellowdiv">
<img id="image" src="#">
</div>
<div id="bluediv">
</div>
<div id="pinkdiv">
</div>
<div id="greendiv">
</div>
</div>
</div>
I have two consecutive divs in a HTML page
First div contains child span which is relative in position. That's why it comes over second div.
I have a click event associate with both divs.
When I click the part of the span which comes over second div, it triggers the first div's click event but I want here to trigger second div's click event.
Is there any way to achieve this.
function div1Clicked() {
alert('div 1 clicked');
}
function div2Clicked() {
alert('div 2 clicked');
}
#div1 {
border: 1px solid gainsboro;
height: 100px;
width: 13%;
background: red;
display: inline;
float: left;
}
#div1 span {
width: 316px;
height: 30px;
background: green;
float: left;
margin-top: 39px;
position: relative;
}
#div2 {
border: 1px solid gainsboro;
height: 100px;
width: 13%;
background: red;
display: inherit;
float: left;
}
<div onclick="div1Clicked()" id="div1">
<span>
</span>
</div>
<div onclick="div2Clicked()" id="div2">
<div>
</div>
</div>
If you don't need any hover state on the child span, you can do it like this. Keep in mind this differs a bit from your html but it can be converted to your html/css easy, I just don't have the time to do it at this moment.
What you do is add :after on the two divs with a higher z-index, that will overlay the span and work as trigger areas for you javascript. Don't mind my "strange looking css" it's BEM. You can use your javascript triggers and it will work well. You can use alert() instead of console.log() if you are not familiar with devtools in your browser of choice.
DEMO
<div class="block">
<div class="block__column block__column--left js-action-1"></div>
<div class="block__column block__column--right js-action-2"></div>
<div class="block__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, voluptas!</div>
</div>
.block {
display: flex;
position: relative;
}
.block__column {
width: 50%;
height: 20rem;
position: relative;
}
.block__column:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
.block__column:hover {
cursor: pointer;
}
.block__column--left {
background-color: deepskyblue;
}
.block__column--right {
background-color: deeppink;
}
.block__description {
position: absolute;
top: 50%;
left: 2rem;
right: 2rem;
background-color: white;
}
$('.js-action-1').on('click', function() {
console.log('clicked the left column');
});
$('.js-action-2').on('click', function() {
console.log('clicked the right column');
});
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div onclick="div1Clicked()" id="div1" style="
border: 1px solid gainsboro;
height: 100px;
width: 13%;
background: red;
display: inline;
float: left;
">
<span style="
width: 316px;
height: 30px;
background: green;
float: left;
margin-top: 39px;
position: relative;
">
</span>
</div>
<div onclick="div2Clicked()" id="div2" style="
border: 1px solid gainsboro;
height: 100px;
width: 13%;
background: red;
display: inherit;
float: left;
">
<div>
</div></div>
<script>
function div1Clicked(){
if($("div:first").width() < event.offsetX)
div2Clicked()
else
alert('div 1 clicked');
}
function div2Clicked(){
alert('div 2 clicked');
}
</script>
</body></html>
Click the span element if trigger the event parent elemnet(div1) event, so does not get the correct output. But You get the output some check the condition.Please refer below snippets
function div1Clicked(){
if($("div:first").width() < event.offsetX)
div2Clicked()
else
alert('div 1 clicked');
}
As the span lies in div1, when it gets clicked, it will fire div1 click event only, even if it is overlapping the div2. So instead if you could use on click event of the green span, it might help. It will still fire div1 click event.
<html><head></head>
<body>
<div onclick="div1Clicked()" id="div1" style="
border: 1px solid gainsboro;
height: 100px;
width: 13%;
background: red;
display: inline;
float: left;
">
<span style="
width: 316px;
height: 30px;
background: green;
float: left;
margin-top: 39px;
position: relative;
" onclick="spanClicked()">
</span>
</div>
<div onclick="div2Clicked()" id="div2" style="
border: 1px solid gainsboro;
height: 100px;
width: 13%;
background: red;
display: inherit;
float: left;
">
<div>
</div></div>
<script>
function div1Clicked(){
alert('div 1 clicked');
}
function spanClicked(){
alert('span clicked');
}
function div2Clicked(){
alert('div 2 clicked');
}
</script>
</body></html>
If click-events on the span are not necessary, you could apply pointer-events: none to the span which will ignore clicks on the span altogether.
function div1Clicked() {
alert('div 1 clicked');
}
function div2Clicked() {
alert('div 2 clicked');
}
#div1 {
border: 1px solid gainsboro;
height: 100px;
width: 13%;
background: red;
display: inline;
float: left;
}
#div1 span {
width: 316px;
height: 30px;
background: green;
float: left;
margin-top: 39px;
position: relative;
pointer-events: none; /*This will make the span click-through*/
}
#div2 {
border: 1px solid gainsboro;
height: 100px;
width: 13%;
background: red;
display: inherit;
float: left;
}
<body>
<div onclick="div1Clicked()" id="div1">
<span></span>
</div>
<div onclick="div2Clicked()" id="div2">
<div>
</div>
</div>
You can do like below Snippet...
$('.first,.second').click(function(){
alert($(this).attr('class'))
})
.first{
width:200px;
height:300px;
background-color:red;
display:inline-block;
float:left;
position:relative;
}
span{
position:absolute;
left: 30%;
top: 30%;
}
.first:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
.second:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99;
}
.second{
width:200px;
height:300px;
background-color:green;
display:inline-block;
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="first">
</div>
<div class='second'>
</div>
<span>Hello World....</span>
</body>
I'm trying to make a fixed box with 980px width and 500px height scrolling inside a div with 100% width and 1500px height, but it is not working at all.
That's what I did: https://jsfiddle.net/zjuyuhmz/2/embedded/result/
The box is moving when the page scrolls, and I want to make scroll only if the mouse is inside of the div.
Is this possible??
Html:
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
</div>
</div>
Css:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.container {
border: 1px solid green;
position: relative;
width: 100%;
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 940px;
height: 500px;
position: fixed;
left: 50%;
margin-left: -480px;
background: black;
}
You need to write javascript code, where you can get cursor position and depending on that enable scroll event.
Replace the css for .test for this:
.test {
width: 940px;
height: 500px;
position: absolute;
left: 50%;
margin-left: -480px;
background: black;
}
.test:focus {
position:fixed;
}
This means: when the element with id "test" has the focus on, make it's position fixed. If not, make it's position absolute.
My goal is to have five or so divs inside a parent div. When a div is clicked it should expand over the other divs. What confuses me is how to get said div to expand above the other divs so when the reset/back/close button is clicked all of the divs are shown once again.
When hovered, the div should expand slightly.
The parent container is 1900 by 500.
My code:
.one {
height: 100%;
width: 20%;
background-color: #ffccaa;
float: left;
}
.two {
height: 100%;
width: 20%;
background-color: #ffffcc;
float: left;
}
.three {
height: 100%;
width: 20%;
background-color: #aabbcc;
float: left;
}
.four {
height: 100%;
width: 20%;
background-color: #cccccc;
float: left;
}
.five {
height: 100%;
width: 20%;
background-color: #ff11bb;
float: left;
}
* {margin: 0; padding: 0;}
.header {height: 50vh; width: 100vw; background-color: #000;}
.navi {height: 100px; width: 100%; background-color: #fccaab; margin-top: 5px;}
.logo {height: 100%; width: 500px; background-color: #ccc; align:center; margin: auto;}
.content {height: auto; width: 100%; background-color: #ccffca; margin-top: 5px;}
.footer {height: 10vh; width: 100%; background-color: #abcdef; margin-top: 5px;}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/file.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div class="header">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</div>
<div class="navi">
<div class="logo"></div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
</body>
</html>
In this example the clicked div is given 100% width and its siblings have their width removed. The transition gives a smooth animation.
Create the hover with the :hover pseudo class on the div. In this example, the div is scaled slightly using the transform scale property like this:
body > div:hover {
transform: scale(1.05);
cursor: pointer;
}
The scale is removed when selected with .selected:hover { transform: scale(1) }
Working Example
Note: I have changed all the ids to classes and condensed all the duplicate styles into body > div; all the direct div children of body have the same width, height, transition, and are floated to the left.
$('body > div').on('click', function() {
$(this).toggleClass('selected').siblings().toggleClass('hide');
});
html,
body {
height: 100%;
margin: 0;
overflow: hidden;
}
body > div {
transition: all 0.3s;
float: left;
height: 100%;
width: 20%;
}
body > div:hover {
transform: scale(1.05);
cursor: pointer;
}
.one {
background-color: #ffccaa;
}
.two {
background-color: #ffffcc;
}
.three {
background-color: #aabbcc;
}
.four {
background-color: #cccccc;
}
.five {
background-color: #ff11bb;
}
.selected {
width: 100%;
}
.selected:hover {
transform: scale(1);
}
.hide {
width: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
Well i have the following: http://jsfiddle.net/a9VDa/12/
I am trying to make the jquery tree fill the remaining contents of the div "a" but also include a scroll if there isn't enough space.
<div class="a">
<div class="b"></div>
<div class="c" id="tree"></div>
</div>
My suggested solution: http://jsfiddle.net/Bt2sL/2/
Without orange part scrolling.
HTML
<div class="b"></div>
<div class="a">
<div class="c" id="tree"></div>
</div>
CSS
.a {
height: 60px;
background-color: red;
height: auto;
overflow: scroll;
height: 200px; // adjust this to your need
}
.b {
height: 22px;
background-color: coral;
}
.c {
background-color: lightblue;
}
Can you just make div b fixed and add some padding to a with overflow scroll set?
.a {
height: 60px;
background-color: gray;
position: relative;
overflow: scroll;
padding-top: 22px;
}
.b {
position: fixed;
top: 0;
height: 22px;
background-color: coral;
}
.c {
background-color: lightblue;
height: auto;
overflow: scroll;
}