JQuery Sliding Div off of screen - javascript

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>

Related

How do I insert elements that repeats themselves in HTML using just Javascript DOM?

> I have this yellow box (with class="yellow-box") , and a small blue
box (with class="box-1") inside it. I need 12 times the same div in
HTML with JavascriptDOM - without hardcoding in HTML by typing 12
times the same div.
HTML code
<html>
<head>
<title>Match the box</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="boxGame.js"></script>
</head>
<body class="background-img">
<div class="yellow-box">
<div class="box-1"> </div>
</div>
</body>
</html>
.background-img {
background-image: url("fundal.jpeg");
background-repeat: no-repeat;
background-size: cover;
}
.yellow-box {
background-color: yellow;
width: 850px;
height: 600px;
margin: auto;
top: 30px;
position: relative;
}
.box-1 {
background-color: blue;
width: 160px;
height: 120px;
float: left;
position: relative;
margin: 25px;
}
Add this code to your javascript file, or inside your script tag:
let outerDiv = document.querySelector('.yellow-box');
for(let i = 0; i++; i<=12 ){
let boxDiv = document.createElement('div');
div.setAttribute('class', 'box-1');
outerDiv.appendChild(boxDiv);
}

How to move other elements on jQuery animation

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

buttons disappear after pressed

I am learning javascript, and I am practicing what I learned by making a blackjack game. I have a system that deals cards fairly, but when I press the "deal" button the value of the card comes up but the buttons disappear. Why is this happening? Any help will be much appreciated. here is my code:
<!DOCTYPE html>
<html>
<head>
<title>casino game.</title>
<input type="button" value="deal" onclick="document.write(random)" id="deal">
<input type="button" value="hit" onclick="hit" id="hit">
</head>
<body>
<script type="text/javascript">
var deck = [11,2,3,4,5,6,7,8,9,10,10,10];
var random = deck[Math.floor(Math.random()*deck.length)]
</script>
<style type="text/css">
#deal{
position: fixed;
width: 50px;
height: 40px;
top: 100px;
}
#hit{
position: fixed;
width: 50px;
height: 40px;
top: 200px;
}
body{
text-align: center;
font-size: 30px;
background: url("");
}
</style>
</body>
</html>
Move your <input> inside <body> instead of <head>, and by using document.write() you are overwriting all the content of your HTML. You might want to write the result in a <div> instead.
<!DOCTYPE html>
<html>
<head>
<title>casino game.</title>
<style type="text/css">
#deal{
position: fixed;
width: 50px;
height: 40px;
top: 100px;
}
#hit{
position: fixed;
width: 50px;
height: 40px;
top: 200px;
}
body{
text-align: center;
font-size: 30px;
background: url("");
}
</style>
</head>
<body>
<input type="button" value="deal" onclick="deal()" id="deal">
<div id="result"></div>
<input type="button" value="hit" onclick="hit" id="hit">
<script type="text/javascript">
var deck = [11,2,3,4,5,6,7,8,9,10,10,10];
function deal() {
var random = deck[Math.floor(Math.random()*deck.length)];
document.getElementById('result').innerHTML = random;
}
</script>
</body>
</html>
DEMO

Add a class and remove the current one so that a button in J Query may be re-used for a different function

I'm a fourteen year old trying to cope with a fairly new language so please bear with me. I made a quick html doc so that I can express my problem as clearly as possible.
If you run the snippet, you can see that by clicking the menu button the body is pushed 285 pixels from the left, and the menu is shifted to 0px from -285px.
I want to be able to click on the menu button again and shift the body back to 0, and the menu back to -285. Please look under the J Query to see the processes I've tried so far.
var main = function(){
$('.menu_button').click(function(){
$('.menu').animate({left: '0px'}, 200);
$('body').animate({left: '285px'}, 200);
$('.menu_button').addClass('menu_button_active').removeClass('menu_button');
});
$('.menu_button_active').click(function(){
$('.menu').animate({left: '-285px'}, 200);
$('body').animate({left: '0px'}, 200);
$('.menu_button_active').addClass('menu_button').removeClass('menu_button_active');
});
};
$(document).ready(main);
/* At first, I tried to just plug in the same class name in the second function, however I
quickly realized that by doing so the menu will automatically close since both functions
will run at the same time.
My understanding is that in order for the function to being separately, the menu button
would have to have a different class at the time of the click. So, I tried using
toggleClass to remove the menu_button class while at the same time adding the
menu_button_active class so that on click, the menu_button_active class can act as the
same button, but used for a different function (closing the menu.) Perhaps my understanding
of what the toggleClass method was used for was flawed, however here is the code anyway to
show you what I had done.
$('.menu_button').toggleClass("menu_button" "menu_button_active");
in place of
$('.menu_button').addClass('menu_button_active').removeClass('menu_button');
(this doesn't work)
So, my final method is shown above. By separately adding and removing the class I don't see
why it doesn't work after working out what the js would be doing. First the menu_button
would be clicked and the page is shifted, afterwards the menu_button would have a different
class name, so that it can be called by the menu_button_active function, which then
changes the class again so that the menu button can open again and so on.
*/
#first_row {
width: 100%;
height: 25em;
position: absolute;
top: 3em;
box-shadow: 0px 5px 5px #888888;
}
#sec2 {
background-color: #2CD148;
height: 100%;
width: 50%;
float: left;
}
body {
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}
header {
width: 100%;
height: 3em;
background-color: #404040;
position: fixed;
}
.menu {
background-color: black;
left: -285px;
height: 100%;
position: fixed;
width: 285px;
}
.menu_button {
width: 4em;
cursor: pointer;
}
.menu_button_active {
width: 4em;
cursor: pointer;
}
.menu_row {
width: 100%;
height: 0.25em;
margin-top: 0.5625em;
background-color: white;
border-bottom: 1px solid #2CD148;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
<html>
<head>
<title>Samer | Welcome</title>
<link rel="shortcut icon" href="media_items/favicon.ico" type="image/x-icon">
<link rel="icon" href="media_items/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/Interactive.js"></script>
</head>
<body>
<header>
<div class="menu"></div>
<div class = "menu_button">
<div class = "menu_row"></div>
<div class = "menu_row"></div>
<div class = "menu_row"></div>
</div>
<span></span>
</header>
<div id = first_row>
<section id = "sec1"></section>
<section id = "sec2"></section>
</div>
</body>
</html>
What's the flaw in this logic?
You define your class from javascript so you need to attach event to your class name. see http://api.jquery.com/on/
var main = function(){
$('body').on('click', '.menu_button', function(){
$('.menu').animate({left: '0px'}, 200);
$('body').animate({left: '285px'}, 200);
$(this).addClass('menu_button_active').removeClass('menu_button');
});
$('body').on('click', '.menu_button_active', function(){
$('.menu').animate({left: '-285px'}, 200);
$('body').animate({left: '0px'}, 200);
$(this).addClass('menu_button').removeClass('menu_button_active');
});
};
$(document).ready(main);
#first_row {
width: 100%;
height: 25em;
position: absolute;
top: 3em;
box-shadow: 0px 5px 5px #888888;
}
#sec2 {
background-color: #2CD148;
height: 100%;
width: 50%;
float: left;
}
body {
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}
header {
width: 100%;
height: 3em;
background-color: #404040;
position: absolute;
}
.menu {
background-color: black;
left: -285px;
height: 100%;
position: fixed;
width: 285px;
}
.menu_button {
width: 4em;
cursor: pointer;
}
.menu_button_active {
width: 4em;
cursor: pointer;
}
.menu_row {
width: 100%;
height: 0.25em;
margin-top: 0.5625em;
background-color: white;
border-bottom: 1px solid #2CD148;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
<html>
<head>
<title>Samer | Welcome</title>
<link rel="shortcut icon" href="media_items/favicon.ico" type="image/x-icon">
<link rel="icon" href="media_items/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/Interactive.js"></script>
</head>
<body>
<header>
<div class="menu"></div>
<div class = "menu_button">
<div class = "menu_row"></div>
<div class = "menu_row"></div>
<div class = "menu_row"></div>
</div>
<span></span>
</header>
<div id = first_row>
<section id = "sec1"></section>
<section id = "sec2"></section>
</div>
</body>
</html>
You lost .menu_button_active, I can't see in nowhere of the code.Your second click function never runs, because the trigger button is missing.
var main = function(){
$('body').on('click', '.menu_button', function(){
// $('.menu_button').click(function(){
$('.menu').animate({left: '0px'}, 200);
$('body').animate({left: '285px'}, 200);
$('.menu_button').addClass('menu_button_active').removeClass('menu_button');
});
$('body').on('click', '.menu_button_active', function(){
$('.menu').animate({left: '-285px'}, 200);
$('body').animate({left: '0px'}, 200);
$('.menu_button_active').addClass('menu_button').removeClass('menu_button_active');
});
};
$(document).ready(main);

Problems with z-index

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>

Categories