I have a simple jQuery website, where there are four blocks, when you press a block, another block slides out of it. It all works, for the most part, however, i was wondering how i could get the block that slides out to move the other elements below it down.
$(document).ready(function() {
var height = 145;
var speed = 600;
$("#one").animate({
width: "100%",
height: height
}, speed, function() {
$("#two").animate({
width: "100%",
height: height
}, speed, function() {
$("#three").animate({
width: "100%",
height: height
}, speed, function() {
$("#four").animate({
width: "100%",
height: height
}, speed);
});
});
});
$("#one").click(function() {
$(".dropDown").not("#oneS").slideUp();
$("#oneS").slideToggle();
});
$("#two").click(function() {
$(".dropDown").not("#twoS").slideUp();
$("#twoS").slideToggle();
});
$("#three").click(function() {
$(".dropDown").not("#threeS").slideUp();
$("#threeS").slideToggle();
});
$("#four").click(function() {
$(".dropDown").not("#fourS").slideUp();
$("#fourS").slideToggle();
});
});
#charset "utf-8";
.selectors {
position: relative;
border-radius: 30px;
}
#one {
background-color: blue;
height: 400px;
width: 100px;
margin-bottom: 10px;
}
#two {
background-color: red;
height: 400px;
width: 100px;
margin-bottom: 10px;
}
#three {
background-color: yellow;
height: 400px;
width: 100px;
margin-bottom: 10px;
}
#four {
background-color: green;
height: 400px;
width: 100px;
}
.dropDown {
background-color: #E9E9E9;
height: 300px;
width: 100%;
position: absolute;
//overflow:auto;
border-radius: 10px;
z-index: 1;
}
#oneS {
display: none;
top: 150px;
}
#twoS {
display: none;
top: 150px;
}
#threeS {
display: none;
top: 150px;
}
#fourS {
display: none;
top: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jQuery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="one" class="selectors">
<div id="oneS" class="dropDown"></div>
</div>
<div id="two" class="selectors">
<div id="twoS" class="dropDown"></div>
</div>
<div id="three" class="selectors">
<div id="threeS" class="dropDown"></div>
</div>
<div id="four" class="selectors">
<div id="fourS" class="dropDown"></div>
</div>
</body>
</html>
Four blocks:
Slid out block:
As you can see when the block is slid out, it covers over the red and yellow block. Instead i would like the sliding block to move the red and yellow block down the page, and out from under the sliding block.
There's a few things wrong.
The general issue is that you're fighting the natural behavior of the HTML since the .dropDown elements are children of the .selectors elements. You would get closer to your desired result if they were siblings.
Make them siblings and remove some troublesome CSS properties like position:absolute and top and you should get closer to your desired effect.
Here is a JSBin of a working demo: http://jsbin.com/titibununu/1/edit?html,css,js,output
Related
I have just started trying to learn JQuery event handling, and cannot seem to understand why this is happening. I read through the section on event handling in the documentation, but I am still having trouble manipulating objects on the page from the event handler. I get the basic idea of event bubbling up through the DOM, and have been successful i attaching primitive functions that operate on the specific object to which they are attached, or which can launch an alert. Below is the HTML, CSS, and Javascript, and the trouble is specifically with this handler:
$("#picTwo").click(function() {
alert("Handle for left arrow");
$("#picOne").slideDown(3000, linear, function()
{
alert("Why doesn't it work?");
});
Here is the full code
$(document).ready(function() {
$("#leftButton").click(function() {
alert("Handle for left button click()");
$(this).hide();
$("#picOne").slideDown(3000, linear, function() {
alert("Why doesn't it work?");
});
});
$("#blockRed").click(function() {
$(this).hide();
});
$("#blockBlue").click(function() {
alert("Handle for blue block");
});
$("#blockGreen").click(function() {
alert("Handle for green block");
});
$("#picOne").click(function() {
alert("Handle for right arrow");
});
$("#picTwo").click(function() {
alert("Handle for left arrow");
$("#picOne").slideDown(3000, linear, function() {
alert("Why doesn't it work?");
});
});
});
#picOne {
float: right;
margin-right: 0px;
}
#picTwo {
float: left;
}
.friendImg {
width: 250px;
height: 100px;
border: #000;
display: inline-block;
margin-right: auto;
margin-left: auto;
margin-bottom: 2%;
text-align: center;
padding-left: 25%;
}
.lightRedBox {
background-color: rgb(23, 0, 0);
width: 800px;
height: 400px;
border: #09C;
border-width: thin;
margin-top: 10%;
margin-left: 5%;
}
#blackBox {
background: black;
height: 400px;
width: 100%;
}
#blockBlue {
background: blue;
width: 75px;
height: 75px;
}
#blockRed {
background: red;
width: 75px;
height: 75px;
}
#blockGreen {
background: green;
width: 75px;
height: 75px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bonsai Exquisite - Gallery</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/galleryCSS.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="blackBox">
<div class="lightRedBox" id="firstBox">
<h4 class="boxTitle">Bonsai </h4>
<img src="images/coolFilteBonsai.jpg" alt="bonsai image" id="leftFriendImage" class="friendImg">
<p class="boxBlurb">This associatin has been assisting local bonsai associations for over fifty years, and has contributed to the larger pattern of bonsai growth globally. In the past five years, the association has been dealing with blah blah blsah blah.....</p>
<button type="button" id="leftButton" class="leftClassButton" name='leftClassName' onMouseOver="leftBotWinShine()" onMouseOut="botWinShineout()" onClick="closeLeftBox()">Close Me!</button>
</div>
</div>
<div id="vanishing">
<div id="blockBlue">
</div>
<div id="blockRed">
</div>
<div id="blockGreen">
</div>
</div>
<img src="images/images/rightPage.png" id="picOne">
<img src="images/images/leftPage.png" id="picTwo">
</body>
</html>
Thanks for your time and help, it is greatly appreciated.
slideDown() used for animate in some content which is not visible. Here your content is already visible so slideDown() seems not working although it is working but cannot be seen. To get animation you need to hide the element by changing css display:none or else add .hide() method before slideDown() like
$("#picTwo").click(function() {
$("#picOne").hide().slideDown(3000, "linear", function() {
alert("Why doesn't it work?");
});
});
I have a demo which is working fine (button click is working fine and it moves to next slide). But when I apply direction property on body it stops working fine. My button click handler is not working. My slide does not change.
function handler() {
document.querySelector(".p").scroll({
left: 100,
behavior: 'smooth'
})
}
document.getElementById("button").addEventListener("click", handler, false)
.rtl {
direction: rtl;
}
.p {
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
left: 0%;
}
.b {
width: 100px;
height: 100px;
position: absolute
}
.r {
background-color: red;
left: 0;
}
.bl {
background-color: blue;
left: 100px;
}
.g {
background-color: green;
left: 200px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body class="rtl">
case : 1
<div class="p">
<div class="b r">1</div>
<div class="b g">1</div>
<div class="b bl">1</div>
</div>
<button id="button">move</button>
<hr/>
</body>
</html>
when you comment the class rtl then button click wors. why?
When you use right-to-left, all horizontal positioning is reversed. You need to use right instead of left in all the CSS styles. And the scroll amount should be negative to scroll in the opposite direction.
function handler() {
document.querySelector(".p").scroll({
left: -100,
behavior: 'smooth'
})
}
document.getElementById("button").addEventListener("click", handler, false)
.rtl {
direction: rtl;
}
.p {
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
left: 0%;
}
.b {
width: 100px;
height: 100px;
position: absolute
}
.r {
background-color: red;
right: 0;
}
.bl {
background-color: blue;
right: 100px;
}
.g {
background-color: green;
right: 200px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body class="rtl">
case : 1
<div class="p">
<div class="b r">1</div>
<div class="b g">1</div>
<div class="b bl">1</div>
</div>
<button id="button">move</button>
<hr/>
</body>
</html>
In this JavaScript example when user clicks on 'Change colors' button, it need to swap colors of two div elements. But it doesn't.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#first
{
border-radius: 100%;
background-color: red;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
#second
{
border-radius: 100%;
background-color: green;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
</style>
</head>
<body>
<button id="color">Change colors</button>
<br />
<div id="first">Random text.</div>
<div id="second">Random text.</div>
<div id="third"></div>
<script type="text/javascript">
document.getElementById('color').onclick = function () {
var divColor = document.getElementById('first').style.backgroundColor;
document.getElementById('first').style.backgroundColor = document.getElementById('second').style.backgroundColor.toString();
document.getElementById('second').style.backgroundColor = divColor.toString();
}
</script>
</body>
</html>
But when I change it a little bit and remove 'background-color' from <style> and put it within <div> then it's working.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#first
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
#second
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
</style>
</head>
<body>
<button id="color">Change colors</button>
<br />
<div id="first" style="background-color: red;">Random text.</div>
<div id="second" style="background-color: green;">Random text.</div>
<script type="text/javascript">
document.getElementById('color').onclick = function () {
var divColor = document.getElementById('first').style.backgroundColor;
document.getElementById('first').style.backgroundColor = document.getElementById('second').style.backgroundColor.toString();
document.getElementById('second').style.backgroundColor = divColor.toString();
}
</script>
</body>
</html>
So is there any way to make it works for solution when 'background-color' is within <style> in <head>?
Element.style only applies to styles within the style attribute of the element. If you want the computed style, which factors in stylesheets and the like...
var firstElem = document.getElementById('first'),
secondElem = document.getElementById('second'),
firstBackground = window.getComputedStyle(firstElement).backgroundColor,
secondBackground = window.getComputedStyle(secondElement).backgroundColor;
firstElem.style.backgroundColor = secondBackground;
secondElem.style.backgroundColor = firstBackground;
This should swap the two colours, regardless of where they are defined.
For this case it whould be more common to use 3 classes in css. One for defining the common style of the divs. And two for defining the differences. Switching the appearance in that case whould just require switching of classes. Such a set-up is far more flexible also for example in combination with annimations.
A way to alter style using Javascript, without inline styling:
https://jsfiddle.net/6tyw211s/10/
<html>
<style>
#first
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
#second
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
.color{
background-color: red;
}
.color1{
background-color: green;
}
</style>
<body>
<input type="button" id="color" value="Change colors" />
<br />
<div id="first">Random text.</div>
<div id="second">Random text.</div>
<div id="third"></div>
</body>
<script>
var y= document.getElementById('color');
var f=document.getElementById('first');
var s=document.getElementById('second');
y.addEventListener('click', function(){
if (f.className === "color1") {
f.className = "color";
}
else {
f.className = "color1";
}
if(s.className==="color"){
s.className="color1";
}
else{
s.className="color";
}
})
</script>
</html>
You can use switchClass() in jqueryui to do it.
That way, you don't have to specify the background-color values to the divs.
$("#color").click(function myFunction() {
$(".first").switchClass("first", "second", 200, "easeInOutQuad");
$(".second").switchClass("second", "first", 200, "easeInOutQuad");
});
Here is a working version with jqueryui
http://api.jqueryui.com/switchclass/
Ok, I am creating a landing page, where what I want to happen, is the page split in half, and either side slide off of the screen, and the main page is left. I almost have it, but what the right side is doing, is whenever the window is at certain sizes, it is going below the left side. I'm not sure quite how to fix this, and everything I try doesn't really work, and there I haven't been able to find any answers online. Thanks for any help
CODE
body,
html {
min-width: 100%;
min-height: 100%;
margin: 0px;
background-color: gray;
}
#landingDiv {
min-width: 1100px;
height: 100vh;
}
#lBanText {
font-size: 50px;
}
#lBanText p {
top: 0;
bottom: 0;
position: relative;
margin: auto;
margin-top: 2px;
}
.lBan {
dispay: block;
width: 100%;
min-height: 60px;
background-color: red;
padding: 0px;
postion: relative;
float: left;
}
#leftHalf,
#rightHalf {
min-width: 50%;
position: relative;
float: left;
height: 100%;
left: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>
Name of Site
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
window.addEventListener("keydown", checkKey);
function checkKey(e) {
var key = e.keyCode;
//alert(key);
if(key === 79) {
$("#leftHalf").hide("slide", {direction: "left"}, 1000);
$("#rightHalf").hide("slide", {direction: "right"}, 1000);
}
};
});
</script>
</head>
<body>
<div id="landingDiv">
<div id="leftHalf">
<div id="lBanText" class="lBan">
<p>
Title of Website Here
</p>
</div>
</div>
<div id="rightHalf">
<div class="lBan">
</div>
</div>
</div>
</body>
</html>
I know there are a lot of questions on z-index around here, but I am using z-index for a while now and it always worked fine, but now I'm struggling on this one and I just don't understand why it isn't working because I think I did all necessary steps.
test.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js " type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.boxGrid').hover(function(){
$(".boxCaption", this).stop().animate({bottom:'0px'},{queue:false,duration:300});
}, function() {
$(".boxCaption", this).stop().animate({bottom:'-121px'},{queue:false,duration:300});
});
});
</script>
</head>
<body>
<div style="position: relative; width: 226px; height: 246px;">
<div class="boxGrid">
<div class="buttonBack blogImg">
<div class="boxCaption">
<h3>Top-Blog</h3>
</div>
</div>
</div>
</div>
</body>
</html>
style.css
.boxGrid
{
width: 226px;
height: 246px;
background-image: url(buttonBorder.png);
position: absolute;
top: 0px;
left: 0px;
z-index: 100;
}
.buttonBack
{
position: absolute;
top: 12px;
left: 13px;
border: 0px;
width: 200px;
height: 223px;
z-index: 50;
overflow: hidden;
}
.blogImg
{
background-image: url(blogButton.png);
}
.boxCaption
{
position: absolute;
background: url(caption.png);
height: 121px;
width: 100%;
bottom: -121px;
text-align: center;
}
.boxCaption h3
{
font-size: 30px;
color: #fff;
}
So I want this .boxGrid class to be above the .buttonBack class, I added position: properties to all div's that are using z-index.
JsFiddle so the red box needs to be behind the blue one.
Thanks in advance
You can't "hide" child element under its parent, because when you're setting z-index for parent, the child is also affected. Just make them siblings.
<div style="position: relative; width: 226px; height: 246px;">
<div class="boxGrid"></div>
<div class="buttonBack blogImg">
<div class="boxCaption">
<h3>Top-Blog</h3>
</div>
</div>
</div>
Look at this jsfiddle: http://jsfiddle.net/ZwC9n/
You have the div.buttonBack as a child to the div.boxGrid. You may need to reorder the HTML.
<div style="position: relative; width: 226px; height: 246px;">
<div class="buttonBack></div>
<div class="boxGrid">
<div blogImg">
<div class="boxCaption">
<h3>Top-Blog</h3>
</div>
</div>
</div>