I'm working on for a project. I have had a quick go at [coding some buttons(https://codepen.io/ryantinsley/pen/XqOBGb). I have created 2 states. A blue selected class and an outlined deselected class. I want to switch between these two classes each time I click on one of the buttons.
I have tried numerous things in jQuery and some things have worked to a point such as changing h1 text colours, but apart from that nothing seems to work for me.
In short I am looking for the best way to toggle between the two buttons on every click.
Thanks in advance for all you help
h1 {
font-family: sans-serif;
font-size: 16px;
font-weight: light;
display: inline;
}
#star {
background-image: url("https://image.ibb.co/mdSJgT/Hollow_Star.png");
width: 14px;
height: 14px;
display: inline-block;
}
#container {
padding: 8px 8px;
border: solid 1px;
display: inline-block;
}
#starselect {
background-image: url("https://image.ibb.co/hZ2Uo8/Filled_Star.png");
width: 14px;
height: 14px;
display: inline-block;
}
#containerselect {
padding: 8px 8px;
display: inline-block;
background: #006DEF;
}
#h1select {
font-family: sans-serif;
font-size: 16px;
font-weight: light;
display: inline;
color: white;
}
<div id="container">
<div id="star"></div>
<h1>Link</h1>
</div>
<div id="containerselect">
<div id="starselect"></div>
<h1 id="h1select">Link</h1>
</div>
convert your id into class and use toggleClass() of jQuery. Here is an example.
$("#button").on("click", function() {
$(this).children().toggleClass("container containerselect");
$(this).children().children().eq(0).toggleClass("star starselect");
$(this).find("h1").toggleClass(" h1select");
});
h1 {
font-family: sans-serif;
font-size: 16px;
font-weight: light;
display: inline;
}
.star {
background-image: url("https://image.ibb.co/mdSJgT/Hollow_Star.png");
width: 14px;
height: 14px;
display: inline-block;
}
.container {
padding: 8px 8px;
border: solid 1px;
display: inline-block;
}
.starselect {
background-image: url("https://image.ibb.co/hZ2Uo8/Filled_Star.png");
width: 14px;
height: 14px;
display: inline-block;
}
.containerselect {
padding: 8px 8px;
display: inline-block;
background: #006DEF;
}
.h1select {
font-family: sans-serif;
font-size: 16px;
font-weight: light;
display: inline;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button">
<div class="container">
<div class="star"></div>
<h1>Link</h1>
</div>
</div>
Firstly create css using classes.
Then you can use :
$("#starselect").click(function() {
$(this).removeClass('class2');
$(this).addClass('class1');
});
PS:
1. You can remove or add IDs using attr() function in Jquery. But that is not suggeseted. Because ID defines an element, not its styling.
You can also use toggleClass()
You can try the following solution:
https://codepen.io/anon/pen/jxdQav
jQuery
$('.divlink').on('click', function(e){
$('.divlink').not(this).removeClass('active');
$(this).addClass('active');
})
HTML
<div id="container" class="divlink">
<div id ="star"></div>
<h1>Link</h1>
</div>
<div id="container" class="divlink active">
<div id ="starselect"></div>
<h1 id ="h1select">Link</h1>
</div>
CSS
h1 {
font-family: sans-serif;
font-size: 16px;
font-weight: light;
display: inline;
}
#star {
background-image: url("https://image.ibb.co/mdSJgT/Hollow_Star.png");
width: 14px;
height: 14px;
display: inline-block;
}
#container {
padding: 8px 8px;
border: solid 1px;
display: inline-block;
}
#starselect {
background-image: url("https://image.ibb.co/hZ2Uo8/Filled_Star.png");
width: 14px;
height: 14px;
display: inline-block;
}
.active {
padding: 8px 8px;
display: inline-block;
background: #006DEF;
}
#h1select {
font-family: sans-serif;
font-size: 16px;
font-weight: light;
display: inline;
color: white;
}
Related
My submit button shows up in very different places when i'm viewing it on different screens. I understand the usage of media queries helps with this, but I just want the items to show up in generally the same area.
I've tried using percentages for my dimensions, but the problems persists. Any recommendation? I've had luck with percentages in the past, I'm not sure why they aren't working for me with this specific problem. Is there something else wrong?
Here is my code (the styling for the submit button is at the bottom of the styling sheet):
html {
font-family: 'PT Sans', Helvetica, Arial, sans-serif;
background: #f1f2f6;
}
body {
background: #f1f2f6;
margin: 0;
padding: 0;
}
.Class-Name-Bar {
position: relative;
height: 270px;
width: 75%;
background-color: #ffffff;
margin: auto;
margin-top: 35px;
border-radius: 5px;
}
.Class-Name {
position: absolute;
height: 220px;
background-image: linear-gradient(to bottom, rgba(10, 10, 25, .85), rgba(0, 0, 0, 0.85)), url(https://miro.medium.com/max/2656/1*d0Qd8OUx_TUxG7N6H991ew.jpeg);
width: 100%;
border-radius: 5px 5px 0 0;
}
.Class-Name h1 {
text-align: center;
font-size: 60px;
margin-top: 50px;
font-weight: 200;
color: #ffffff;
}
.Class-Name p {
text-align: center;
font-size: 20px;
color: #f1f2f6;
margin: -20px;
}
#navigation {
position: absolute;
}
div#navigation ul li {
display: inline-block;
margin-top: 86%;
margin-left: 25px;
color: #333333;
font-size: 20px;
list-style: none;
}
div#navigation ul li a {
text-decoration: none;
color: #000000;
}
div#navigation ul li a:hover {
text-decoration: none;
color: #ff4757;
}
.post-area-wrapper {
position: relative;
height: 120px;
background-color: #ffffff;
margin: 20px;
width: 35%;
margin-left: 52.5%;
border-radius: 5px;
}
.post-area {
position: relative;
width: 95%;
margin: 2%;
}
input[type=post] {
padding: 3%;
width: 95%;
border: none;
font-size: 18px;
background-color: #f1f2f6;
margin-top: 3%;
}
.submit {
position: absolute;
border: none;
margin-left: 83%;
padding: 5px 16px;
border-radius: 25px;
background-color: #D3D3D3;
}
<html>
<head>
<link href="~/css/ClassReview.css" rel="stylesheet">
</head>
<body>
<div class="Class-Name-Bar">
<div class="Class-Name">
<h1> Calculus</h1>
<p> MA2500</p>
</div>
<div id="navigation">
<ul>
<li>Notes</li>
<li>Tests</li>
<li>Quizlets</li>
</ul>
</div>
</div>
<div class="description">
</div>
<div class="post-area-wrapper">
<form>
<div class="post-area">
<input type="post" name="post" placeholder="Review this class, tell us how you really feel..">
</div>
<button type=submit class="submit">Submit</button>
</form>
</div>
</body>
</html>
In order for your submit button to be at the same place all the time you have to either define the exact position for it using top left right bottom or using the below code without defining the position absolute you can simply define it as a block and then give it margin-left:auto which will position it on the right side of the div and give it a small margin from the right side.
.submit {
display:block;
border: none;
margin-right:10px;
margin-left:auto;
padding: 5px 16px;
border-radius: 25px;
background-color: #D3D3D3;
}
I first set .submenu to display:none;. And then I set .recipe:hover .submenu{display:block;} . When I hover over the .recipe, I wanted to make .submenu display: block;. But it isn't working. Can you tell me why it isn't working? I can't really figure this out. Is using javascript the only way I can solve this problem? Here's my code. Thank you
<!DOCTYPE html>
<html>
<meta charset="utf-8">
</html>
<head>
<title>
TEST
</title>
<style>
body{
margin: 0px;
}
#logo{
height: 56px;
padding-top: 15px;
padding-left: 45px;
font-size: 17px;
font-weight: 500;
}
.title{
padding-left: 30px;
padding-bottom: 15px;
}
.mainmenu{
border: 1px solid rgb(155,155,155);
text-align: center;
height: 30px;
padding-top: 17px;
padding-bottom: 5px;
font-size: 17px;
font-weight: 400;
display: flex;
list-style-type: none;
margin: 0px;
padding-top: 11px;
}
a:nth-of-type(1){
flex-grow: 1;
border-right: 1px solid rgb(155,155,155);
}
a:nth-of-type(2){
flex-grow: 1;
border-right: 1px solid rgb(155,155,155);
}
a:nth-of-type(3){
flex-grow: 1;
}
.submenu{
background-color: #f2efed;
height: 190px;
font-size: 16px;
font-weight: 300;
padding-top: 10px;
padding-left: 10px;
text-decoration: underline;
position: absolute;
margin-top: 36px;
width: 100%;
display: none;
}
a{
color: black;
text-decoration: none;
}
.recipe:hover .submenu{
display: block;
}
#font-face { font-family: 'IBMPlexSansKR-Light'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07#1.0/IBMPlexSansKR-Light.woff') format('woff'); font-weight: normal; font-style: normal; }
</style>
</head>
<body>
<div id="logo">
<img width=45px src="icons8-solo-cup-100.png">
<span class="title">cafe in my home</span>
</div>
<div class="mainmenu">
home
Recipe
QNA
<div class="submenu">
coffee
</div>
</div>
</body>
I'm not the best with this, but I'd say it might have something to do with selecting the .recipe:hover and then selecting .submenu right after it:
.recipe:hover .submenu{
display: block;
}
You need to actually add the recipe class onto an element, then in your CSS, you need to add ~ to signify that the elements are on the same level in the DOM.
I have also made some modifications to the CSS in order to make sure the submenu does not disappear.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
</html>
<head>
<title>
TEST
</title>
<style>
body {
margin: 0px;
}
#logo {
height: 56px;
padding-top: 15px;
padding-left: 45px;
font-size: 17px;
font-weight: 500;
}
.title {
padding-left: 30px;
padding-bottom: 15px;
}
.mainmenu {
border: 1px solid rgb(155, 155, 155);
text-align: center;
height: 30px;
padding-bottom: 5px;
font-size: 17px;
font-weight: 400;
display: flex;
list-style-type: none;
margin: 0px;
padding-top: 11px;
}
a + a {
box-shadow: -4px -3px 0 -3px rgb(155, 155, 155);
}
.submenu {
background-color: #f2efed;
height: 190px;
font-size: 16px;
font-weight: 300;
padding-top: 10px;
padding-left: 10px;
text-decoration: underline;
position: absolute;
margin-top: 36px;
width: 100%;
display: none;
}
a {
color: black;
text-decoration: none;
flex-grow: 1;
height: 30px;
padding-bottom: 6px;
}
.recipe:hover ~ .submenu {
display: block;
}
.submenu:hover {
display: block;
}
#font-face {
font-family: 'IBMPlexSansKR-Light';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07#1.0/IBMPlexSansKR-Light.woff') format('woff');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
<div id="logo">
<img width=45px src="icons8-solo-cup-100.png">
<span class="title">cafe in my home</span>
</div>
<div class="mainmenu">
home
Recipe
QNA
<div class="submenu">
coffee
</div>
</div>
</body>
For more information on the general sibling combinator (~), please read the MDN docs.
As NoahRGB said, CSS selectors cannot have that syntax.
This:
.recipe:hover .submenu
will not work.
If you want it to select the hover of both the submenu and the recipe classes, "chain" them:
.recipe.submenu:hover
being sure not to put any spaces between .recipe and .hover.
If you wanted to set it to display: block; when the .recipe is hovered and the .submenu is not hovered, simply put display: block; in the .submenu class selector independently from the .recipe:hover selector like this:
.submenu {
...
display: block;
}
.recipe:hover {
...
display: block;
}
.recipe:hover .submenu{display:block;} implies that your .submenu element is a child of .recipe.
You need to change your markup to something like:
<a class="recipe" href="Recipe.html">
Recipe
<span class="submenu">
coffee<
</span>
</a>
Or, for a fore semantic markup, especially if your sub-menu will receive more items you could do:
<ul class="menu">
<li>
<a class"recipe" href="Recipe.html">Recipe</a>
<ul class="submenu">
<li>coffee</li>
</ul>
</li>
</ul>
and change your css to:
.menu li:hover .submenu { display:block; }
You can absolutely do this in CSS3 now using the ~ adjacent sibling selector.
triggerSelector:hover ~ targetSelector {
display: block;
}
as per the post How to change one element while hovering over another
!DOCTYPE html>
<html>
<meta charset="utf-8">
</html>
<head>
<title>
TEST
</title>
<style>
body{
margin: 0px;
}
#logo{
height: 56px;
padding-top: 15px;
padding-left: 45px;
font-size: 17px;
font-weight: 500;
}
.title{
padding-left: 30px;
padding-bottom: 15px;
}
.mainmenu{
border: 1px solid rgb(155,155,155);
text-align: center;
height: 30px;
padding-top: 17px;
padding-bottom: 5px;
font-size: 17px;
font-weight: 400;
display: flex;
list-style-type: none;
margin: 0px;
padding-top: 11px;
}
a:nth-of-type(1){
flex-grow: 1;
border-right: 1px solid rgb(155,155,155);
}
a:nth-of-type(2){
flex-grow: 1;
border-right: 1px solid rgb(155,155,155);
}
a:nth-of-type(3){
flex-grow: 1;
}
.submenu{
background-color: #f2efed;
height: 190px;
font-size: 16px;
font-weight: 300;
padding-top: 10px;
padding-left: 10px;
text-decoration: underline;
position: absolute;
margin-top: 36px;
width: 100%;
display: none;
}
a{
color: black;
text-decoration: none;
}
.recipe:hover ~ .submenu{
display: block;
}
#font-face { font-family: 'IBMPlexSansKR-Light'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07#1.0/IBMPlexSansKR-Light.woff') format('woff'); font-weight: normal; font-style: normal; }
</style>
</head>
<body>
<div id="logo">
<img width=45px src="icons8-solo-cup-100.png">
<span class="title">cafe in my home</span>
</div>
<div class="mainmenu">
home
<a class="recipe" href="Recipe.html">Recipe</a>
QNA
<div class="submenu">
coffee
</div>
</div>
</body>
</html>
You simply add ~ between selectors to adjance them together:
.recipe:hover ~ .submenu{
display: block;
}
I would say that you have to style your submenus in a structural way so that when you hover the element they would be visible when you try to hover submenus.
In your case submenu will get hidden if you try to make it visible. I have changed the structure a bit to show the submenu. You can more optimise it.
body {
margin: 0px;
}
#logo {
height: 56px;
padding-top: 15px;
padding-left: 45px;
font-size: 17px;
font-weight: 500;
}
.title {
padding-left: 30px;
padding-bottom: 15px;
}
.mainmenu {
border: 1px solid rgb(155, 155, 155);
text-align: center;
height: 30px;
padding-top: 17px;
padding-bottom: 5px;
font-size: 17px;
font-weight: 400;
display: flex;
list-style-type: none;
margin: 0px;
padding-top: 11px;
}
a:nth-of-type(1) {
flex-grow: 1;
border-right: 1px solid rgb(155, 155, 155);
}
a:nth-of-type(2) {
flex-grow: 1;
border-right: 1px solid rgb(155, 155, 155);
}
a:nth-of-type(3) {
flex-grow: 1;
}
.submenu {
position: absolute;
margin-top: 36px;
}
.submenuwrapper {
position: absolute;
background-color: #f2efed;
width: 200px;
height: 190px;
font-size: 16px;
font-weight: 300;
padding: 40px;
text-decoration: underline;
display: none;
}
a {
color: black;
text-decoration: none;
}
.recipe:hover>.submenuwrapper {
display: block;
}
#font-face {
font-family: 'IBMPlexSansKR-Light';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07#1.0/IBMPlexSansKR-Light.woff') format('woff');
font-weight: normal;
font-style: normal;
}
<div id="logo">
<img width=45px src="icons8-solo-cup-100.png">
<span class="title">cafe in my home</span>
</div>
<ul class="mainmenu">
<li>home</li>
<li class="recipe">Recipe
<div class="submenuwrapper">
<div class="submenu">
coffee
</div>
</div>
</li>
<li>QNA</li>
</ul>
You can add !important after your code to make it principal.
.recipe:hover .submenu{
display: block !important;
}
Can you upload the whole code in a codeopen.io? So you can show us exactly what you need.
I would like to make it so that when a div with the class "dropdown" is hovered over, a certain piece of text with the id "workButton" would underline. I would like to do this using jQuery, unless it is possible to make it happen in CSS. I currently have it so that when the text is hovered over it underlines and turns white, but I would like the same to happen when "dropdown" is hovered over. (the text with the id "workbutton" also has the class "menuContent")
CSS:
.menuContent:hover {
text-decoration: underline;
cursor: pointer;
color: #ffffff;
}
.menuContent {
font-family: "cicle-gordita";
text-align: center;
padding: 0px;
margin: 0px;
margin-top: 10px;
color: #b4b0b0;
text-decoration: none;
font-size: 40px;
}
.dropdown {
margin-top: 50px;
height: 50px;
width: 100%;
background: #ffffff;
position: fixed;
display: none;
}
.dropdown-menuBit {
height: 40px;
margin: 0px;
padding: 0px;
float: left;
margin-left: 20px;
}
.dropdown-menuContent {
font-family: "cicle-gordita";
text-align: center;
padding: 0px;
margin: 0px;
color: #b4b0b0;
text-decoration: none;
font-size: 30px;
padding-top: 5px;
}
.dropdown-menuContent:hover {
text-decoration: underline;
cursor: pointer;
color: #ffffff;
}
JQuery:
var main = function() {
$('.dropdown').hide(function() {
$('.main').animate({
top: "-50px"
}, 0);
});
$('#workButton').hover(function() {
$('.dropdown').fadeIn(1)
$('.main').animate({
top: "0px"
}, 100)
});
$('.main, #blogButton, #homeButton, .logo').hover(function() {
$('.dropdown').fadeOut(200)
$('.main').animate({
top: "-50px"
}, 200)
});
Just place the :hover on the parent and it should work just fine:
.dropdown:hover #workButton
I need the sidebar to not go over the footer nav. I can't figure out how to edit the css for this. Here's a preview, with html and css. So what I'm looking for is a "collision" off the footer border-top so the sidebar can interact with it.
http://codepen.io/TheGamingHideout/pen/reayx
HTML:
<html>
<head>
<title>Home - POG</title>
<link rel="shortcut icon" href="http://www.thegaminghideout.com/pog/favicon.ico">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- This Template is a WiP - Please report any bugs to the administrative team at The Gaming Hideout. Thank you. All rights reserved. -->
</head>
<body>
<div id="wrap">
<div id="header">
<h1><img src="http://www.thegaminghideout.com/pog/VexIMG/header.png" alt="Possessed Gaming" width="760" height="60"></h1>
</div>
<div id="navigation">
<div class="navlinks">
<div id="output2">
</div>
</div>
<script src="nav.js"></script>
</div>
<div id="buttons">
<img src="http://www.thegaminghideout.com/pog/VexIMG/donate.png">
</div>
<div id="body">
<center>
<h2>Welcome to Possessed Gaming DarkRP!</h2>
<h4>Owned by PossessedGaming</h4>
</center>
<p>Thanks for choosing our GMod server! You are currently playing DarkRP on PossessedGaming. Make sure to read and follow the rules below!</p>
<br>
<h3>Rules</h3>
<ul>
<li>Do NOT RDM</li>
<li>NLR 3 Minutes!</li>
<li>Respect Staff</li>
<li>Do NOT spam chat or mic</li>
<li>Have Fun!</li>
</ul>
<p>Disobeying these rules or finding loopholes around them can and will result in punishments including kicks, bans, mutes, weapon strips, and jails.</p>
<br>
<p>Click here to apply for staff!</p>
<div id="latest">
<center>
<img src="http://www.thegaminghideout.com/pog/VexIMG/Index/latest.png">
<p id="output1"></p>
<script src="latest.js"></script></center>
</div>
</div>
<div id="footer">
<div id="copyright">
Copyright © The Gaming Hideout
<br>We own no rights on any game on this site unless otherwise noted.
<br>All Rights Reserved.
</div>
<div id="footnav">
<script src="footnav.js"></script>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body {
margin: 0;
padding: 0;
}
.hidden {
display: none;
}
body {
background: url(http://www.thegaminghideout.com/pog/VexIMG/bg.png);
background-color: black;
background-size: 100%;
background-repeat: no-repeat;
font-size: 12px;
color: #666666;
}
#font-face {
font-family: 'karmatic_arcaderegular';
src: url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.eot');
src: url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.woff2') format('woff2'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.woff') format('woff'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.ttf') format('truetype'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.svg#karmatic_arcaderegular') format('svg');
font-weight: normal;
font-style: normal;
}
p, h1, h2, h3, h4, h5, h6, caption, text, font, li, ul {
color: white;
}
#wrap {
width: 760px;
margin: auto;
overflow: hidden;
}
#header {
height: 60px;
width: auto;
background: #db6d16
url(VexIMG/header.png);
}
#navigation {
width: 760px;
height: 35px;
position: absolute;
border-bottom: 2px solid #000000;
background: red;
padding: 0px;
}
#navigation .padding {
padding: 2px;
}
#navigation .navlinks {
position: absolute;
top: 1px; left: 0px;
}
#navigation .navlinks ul {
margin: 0px;
padding: 0px;
text-align: center;
list-style-type: none;
width: 760px;
height: 35px;
}
#navigation .navlinks li {
position: relative;
top: 5px;
margin: 0px 5px 0px 5px;
list-style-type: none;
display: inline;
}
#navigation .navlinks li a {
color: #000000;
padding: 5px 0px 9px 0px;
text-decoration: none;
font-size: 18px;
font-family: karmatic_arcaderegular;
padding: 5px 0px 9px 0px;
}
#navigation .navlinks li a:hover {
margin: 0px;
color: #ffffff;
background: red;
text-decoration: underline;
}
#buttons {
padding-bottom: 2000px;
margin-bottom: -2000px;
width: 155px;
border-left: 2px solid #FFA500;
border-right: 2px solid #FFA500;
float: right;
font-family: Terminal, Arial, Times New Roman;
background: linear-gradient(#700000, #250000);
}
#latest {
border: 1px ridge #FFA500;
width: 300px;
height: auto;
background: linear-gradient(#000000, #252525, #000000);
clear: left;
}
#latest p {
font-family: Times New Roman;
}
#body {
padding-top: 50px;
width: 600px;
font-family: Arial, Verdana, Terminal;
font-size: 14px;
}
#body .secret img {
width: 150px;
height: 100px;
border: 2px solid black;
}
#body .game {
padding: 3px 3px 10px 3px;
}
#body .game img {
align: center;
float: left;
width: 175px;
height: 101px;
border: 2px ridge #ff0000;
}
#body .game caption {
padding-left: 1px;
}
#body .space {
padding-top: 10px;
padding-bottom: 10px;
border-top: 4px ridge red;
border-bottom: 4px ridge red;
}
#body .game caption {
margin-top: 2px;
float: right;
font-family: Terminal, Arial, Verdana, San-Serif;
font-size: 12px;
color: #000000;
border-bottom: 2px dashed #e9e9e9;
}
#body .game a {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: #c9c9c9;
text-decoration: none;
}
#body .game a:hover {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: red;
text-decoration: underline;
}
#footer {
width: 730px;
height: 60px;
font-family: Tahoma, Arial, Terminal, San-Serif;
font-size: 10px;
color: #c9c9c9;
border-top: 1px solid #efefef;
padding: 13px 25px;
line-height: 18px;
}
#footer li {
padding: 0px 2px 0px 2px;
float: right;
display: inline;
text-align: left;
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size:; 10px;
}
#footer a {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: #c9c9c9;
text-decoration: none;
}
#footer a:hover {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: red;
text-decoration: underline;
}
#footer #footnav {
display: inline;
width: 310px;
float: right;
text-align: left;
position: relative;
bottom: 65px;
}
Adding position: relative to the wrapper and positioning #buttons with position: absolute is a way to fix this. Do keep in mind that you need to know the exact distance between the top and bottom of the #wrap and #buttons.
That said there are probably other solutions as well.
#wrap {
position: relative;
width: 760px;
margin: auto;
overflow: hidden;
}
#buttons {
position: absolute;
right: 0px;
top: 110px;
bottom: 95px;
width: 155px;
border-left: 2px solid #FFA500;
border-right: 2px solid #FFA500;
font-family: Terminal, Arial, Times New Roman;
background: linear-gradient(#700000, #250000);
}
use margin-bottom: -648px; padding-bottom: 648px; for #buttons instead of padding-bottom: 2000px; margin-bottom: -2000px; This will fix for your current view.But if you want it dynamic at every page you may need to use javascript to detect the screen height and determine the padding-bottom and margin-bottom.hope it will help you.
like this?
http://codepen.io/mmp1992/pen/bnrvw
#buttons {
height:645px;
}
and remove the padding and margin.
I am trying to created three overlap divs that have their z-Index changed dynamically with Javascript. I have the divs coming to the top of the stack when selected, but I can't click the other divs below the top div. Can someone help me out? Below is the Javascript I am using:
<script>
$(document).ready(function() {
$("div#box").click(function() {
$(this).css({'z-index' : '9999'});
} , function() {
$(this).css({'z-index' : '1'});
});
});
</script>
CSS:
#container{
display: block;
position:relative;
margin: 0px;
padding: 0px;
width: 465px;
height: 350px;
}
.redBox {
display: block;
margin: 0px;
padding: 0px;
width: 450px;
border: 1px solid #ED1F24;
z-index: 100;
position: absolute;
top: 120px;
right:0px;
background-color: #FFF;
cursor:pointer;
}
.redBox h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #FFF;
background-color: #ED1F24;
display: block;
height: 10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
}
.redBox h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFF;
background-color: #ED1F24;
display: block;
height:10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
}
.redBox ul {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000;
margin: 0px;
height: 150px;
padding: 10px 10px 0px 20px;
}
.redBox p{
margin:0px;
padding:0px;
}
.redBox .boxFooter {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
line-height: 1.1em;
color: #000;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 0px;
margin-top: 0px;
list-style-type: none;
margin-left: 5px;
}
.blueBox .footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
line-height: 1.1em;
color: #000;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 0px;
margin-top: 0px;
list-style-type: none;
margin-left: 20px;
}
.blueBox {
display: block;
margin: 0px;
padding: 0px;
width: 430px;
border: 1px solid #2B3087;
z-index: 50;
position: absolute;
top: 90px;
right:0px;
background-color: #FFF;
cursor:pointer;
}
.blueBox h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #FFF;
background-color: #2B3087;
display: block;
height: 10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
}
.blueBox h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFF;
background-color: #2B3087;
display: block;
height:10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
}
.blueBox p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.1em;
color: #000;
padding: 0px 0px 0px 20px;
margin: 5px 0px;
}
.blueBox p strong {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight:bold;
line-height: 1.1em;
color: #000;
}
.greenBox {
display: block;
margin: 0px;
padding: 0px;
width: 410px;
border: 1px solid #99CA3C;
z-index: 2;
position: absolute;
top: 60px;
right:0px;
background-color: #FFF;
cursor:pointer;
}
.greenBox h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
color: #FFF;
background-color: #99CA3C;
display: block;
height: 10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
}
.greenBox h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFF;
background-color: #99CA3C;
display: block;
height:10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
}
#hero {
display: block;
margin: 0px;
padding: 0px;
height: 315px;
width: 465px;
text-align: center;
}
HTML:
<td width="50%" rowspan="2" valign="top" style="position:relative;">
<div id="hero"><img src="images/image.jpg" alt="" width="300" height="315" border="0" />
</div>
<div id="container">
<div class="redBox" id="box">
<h1>Rewards</h1>
<ul>
<li>Text</li>
<li>Text</li>
<li>Text</li>>
<li>Text</li>
</ul>
<h2>Rewards</h2>
</div>
<div class="blueBox" id="box">
<h1>Service and Security</h1>
<p>text</p>
<p>text</p>
<p>text</p>
<<p>text</p>
<p class="footer">Text</p>
<h2>Service and Security</h2>
</div>
<div class="greenBox" id="box">
<h1>Redeem Rewards</h1>
<ul>
<li>text Here</li>
<li>text Here</li>
<li>text Here</li>
</ul>
<h2>Rewards</h2>
</div>
</div>
</td>
There are several problems with your code. First of all you're targeting an id, which should be unique and not used to identify multiple elements. Your code will only target the first instance of that id. Instead use a class name to target the different divs. Second, click takes either one argument, an event handler, or two, where the first one is event data, and the second the handler. So, your code only executes the second function in there, and only for the first div.
Try this instead:
$(document).ready(function() {
var zIndex = 9999;
$(".box").click(function() {
$(this).css({'z-index': zIndex++ });
});
});
HTML.
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
I created a fiddle with a working solution. If you need to change an element's z-index, you must set it's position attribute to anything other than 'static'. Static is the default, so you can change it to 'absolute' or 'relative'. The browser ignores z-index if you don't do this. Also, when you're trying to change CSS properties via javascript, you can't use 'z-index', javascript uses camelcase for the names.
Here's the link to the fiddle:
http://jsfiddle.net/vKeqD/
And here's the code for posterity:
$(document).ready(function() {
var zIndex = 9999;
$(".box").on('click', function() {
$(this).css({'zIndex' : zIndex++ , 'position': 'absolute'});
});
});
You'll see as well that I changed the event listener to use 'on' instead of 'click'. This is simply because you only add one event listener this way instead of attaching a different listener to every target element. In your case, you only have three targets. But, if you had say 100, you only attach one event listener instead of 100. Hope this helps.