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.
Related
I have been trying to code a Portfolio Gallery with Filtering on my website using HTML, CSS, and Javascript. I have looked at multiple tutorials (w3Schools, Geeks for Geeks) and followed them exactly, but neither worked out. With w3Schools, I was left with a completely empty body content area, and with Geeks for Geeks, I had images in my body content area, but my sidebar and navigation bar were both totally trashed even though the changes in the code didn't relate to them.
So, here's what I'm trying to do: I have a webpage that looks like this, and I want to filter out the blocks by their color when I click on the buttons in the navigation bar. So if I were to click yellow, the result would look like this. (The actual grid of images is 3x3, and there are two yellow blocks in it.) I want them to sort properly into three columns as much as possible.
EDIT: Here is my original bugged code, solutions are in the comments:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Mozart Armstrong Portfolio Graphic Design</title>
<style>
#font-face {
font-family: Klik;
src: url(klik-light-webfont.woff);
}
#font-face {
font-family: theBoldFont;
src: url(theboldfont.ttf);
}
.main {
margin-left: 200px;
padding: 105px 10px;
font-size: 16px;
font-family: CaviarDreams;
color: #000000;
display: block;
column-count: 3;
column-width: 32%
column-gap: 1%;
}
.main p {
font-size: 24px;
font-family: CaviarDreams;
color: #000000;
}
.sidebar {
height: 100%;
width: 200px;
position: fixed;
z-index: 3;
top: 0;
left: 0;
background-color: #000000;
overflow-x: hidden;
padding-top: 20px;
}
.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 16px;
font-family: CaviarDreams;
color: #ffffff;
display: block;
}
.sidebar a:hover {
color: #808080;
}
.sidebar b {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-family: theBoldFont;
font-size: 28px;
color: #ffffff;
display: block;
}
.sidebar c {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 13px;
font-family: Klik;
color: #ffffff;
display: block;
}
.navbar {
position: absolute;
padding: 10px 0px 10px 10px;
height: 100px;
width: 100%;
right: 0;
top: 0;
z-index: 2;
overflow-x: hidden;
background-color: #808080;
}
.navbar a {
padding: 20px 8px 16px 16px;
text-decoration: none;
font-size: 16px;
font-family: Klik;
color: #ffffff;
}
.navbar b {
padding: 0px 0px 0px 0px;
width: 225px;
text-decoration: none;
font-size: 16px;
font-family: Klik;
color: #ffffff;
display: inline-block;
}
.navbar c {
padding: 25px 225px 0px 245px;
width: 100%;
height: 30px;
text-decoration: none;
font-size: 26px;
font-family: theBoldFont;
color: #000000;
display: inline-block;
}
.navbar button {
background-color: #000000;
border: none;
color: #ffffff;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Klik;
}
.navbar button:hover {
background-color: #ffffff;
border: none;
color: #000000;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Klik;
}
</style>
</head>
<body>
<div class="sidebar">
<b>Mozart</b>
<b>Armstrong</b>
<c>design • marketing • branding</c>
<b></b>
<b></b>
<b></b>
Graphic Design
Illustration
Animations
Photography
Writing
Fashion Design
<b></b>
<b></b>
About
</div>
<div class="navbar">
<c>Graphic Design</c>
<b></b>
<button onclick="">All</button>
<button onclick="">Red</button>
<button onclick="">Yellow</button>
<button onclick="">Green</button>
<button onclick="">Blue</button>
<button onclick="">Pink</button>
</div>
<div class="main">
<p></p><img src="Block2.png" width=100%></img><p></p><img src="Block.png" width=100%></img><p></p><img src="Block3.png" width=100%></img><nextcol>
<p></p><img src="Block4.png" width=100%></img><p></p><img src="Block.png" width=100%></img><p></p><img src="Block2.png" width=100%></img><nextcol>
<p></p><img src="Block5.png" width=100%><p></p><img src="Block3.png" width=100%></img><p></p><img src="Block.png" width=100%></img></img>
</div>
</body>
</html>
Solution with JavaScript:
const button = document.querySelectorAll('.navbar button');
const img = document.querySelectorAll('img');
button.forEach(btn => btn.addEventListener('click', displayCard));
function displayCard(e) {
for (let i =0; i < button.length; i++){
if (e.target === button[i]) {
if (button[i].textContent === 'All') {
for (let i = 0; i < img.length; i++){
img[i].style.display = 'block';
}
} else if (button[i].textContent === 'Red'){
for (let i = 0; i < img.length; i++){
if (img[i].getAttribute('data-index') ==='2'){
img[i].style.display = 'block';
} else {
img[i].style.display = 'none';
}
}
} else if (button[i].textContent === 'Yellow'){
for (let i = 0; i < img.length; i++){
if (img[i].getAttribute('data-index') ==='3'){
img[i].style.display = 'block';
} else {
img[i].style.display = 'none';
}
}
} else if (button[i].textContent === 'Green'){
for (let i = 0; i < img.length; i++){
if (img[i].getAttribute('data-index') ==='4'){
img[i].style.display = 'block';
} else {
img[i].style.display = 'none';
}
}
} else if (button[i].textContent === 'Blue'){
for (let i = 0; i < img.length; i++){
if (img[i].getAttribute('data-index') ==='5'){
img[i].style.display = 'block';
} else {
img[i].style.display = 'none';
}
}
} else if (button[i].textContent === 'Pink'){
for (let i = 0; i < img.length; i++){
if (img[i].getAttribute('data-index') ==='1'){
img[i].style.display = 'block';
} else {
img[i].style.display = 'none';
}
}
}
}
}
}
img{
height: 400px;
width: 300px;
}
img[src="Block2.png"]{
background-color: red;
}
img[src="Block3.png"]{
background-color: yellow;
}
img[src="Block4.png"]{
background-color: green;
}
img[src="Block5.png"]{
background-color: blue;
}
img[src="Block.png"]{
background-color: pink;
}
<head>
<meta charset="UTF-8">
<title>Mozart Armstrong Portfolio Graphic Design</title>
<style>
#font-face {
font-family: Klik;
src: url(klik-light-webfont.woff);
}
#font-face {
font-family: theBoldFont;
src: url(theboldfont.ttf);
}
.main {
margin-left: 200px;
padding: 105px 10px;
font-size: 16px;
font-family: CaviarDreams;
color: #000000;
display: block;
column-count: 3;
column-width: 32%
column-gap: 1%;
}
.main p {
font-size: 24px;
font-family: CaviarDreams;
color: #000000;
}
.sidebar {
height: 100%;
width: 200px;
position: fixed;
z-index: 3;
top: 0;
left: 0;
background-color: #000000;
overflow-x: hidden;
padding-top: 20px;
}
.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 16px;
font-family: CaviarDreams;
color: #ffffff;
display: block;
}
.sidebar a:hover {
color: #808080;
}
.sidebar b {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-family: theBoldFont;
font-size: 28px;
color: #ffffff;
display: block;
}
.sidebar c {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 13px;
font-family: Klik;
color: #ffffff;
display: block;
}
.navbar {
position: absolute;
padding: 10px 0px 10px 10px;
height: 100px;
width: 100%;
right: 0;
top: 0;
z-index: 2;
overflow-x: hidden;
background-color: #808080;
}
.navbar a {
padding: 20px 8px 16px 16px;
text-decoration: none;
font-size: 16px;
font-family: Klik;
color: #ffffff;
}
.navbar b {
padding: 0px 0px 0px 0px;
width: 225px;
text-decoration: none;
font-size: 16px;
font-family: Klik;
color: #ffffff;
display: inline-block;
}
.navbar c {
padding: 25px 225px 0px 245px;
width: 100%;
height: 30px;
text-decoration: none;
font-size: 26px;
font-family: theBoldFont;
color: #000000;
display: inline-block;
}
.navbar button {
background-color: #000000;
border: none;
color: #ffffff;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Klik;
}
.navbar button:hover {
background-color: #ffffff;
border: none;
color: #000000;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Klik;
}
</style>
</head>
<body>
<div class="sidebar">
<b>Mozart</b>
<b>Armstrong</b>
<c>design • marketing • branding</c>
<b></b>
<b></b>
<b></b>
Graphic Design
Illustration
Animations
Photography
Writing
Fashion Design
<b></b>
<b></b>
About
</div>
<div class="navbar">
<c>Graphic Design</c>
<b></b>
<button>All</button>
<button>Red</button>
<button>Yellow</button>
<button>Green</button>
<button>Blue</button>
<button>Pink</button>
</div>
<div class="main">
<p></p><img src="Block2.png" data-index='2' width=100%></img><p></p><img src="Block.png" data-index="1" width=100%></img><p></p><img src="Block3.png" data-index='3' width=100%></img><nextcol>
<p></p><img src="Block4.png" data-index="4" width=100%></img><p></p><img src="Block.png" data-index='1' width=100%></img><p></p><img src="Block2.png" data-index='2' width=100%></img><nextcol>
<p></p><img src="Block5.png" data-index='5' width=100%><p></p><img src="Block3.png" data-index='3' width=100%></img><p></p><img data-index='1' src="Block.png" width=100%></img></img>
</div>
</body>
</html>
This can be easily done, for example, with the Isotope jQuery library:
// external js: isotope.pkgd.js
// init Isotope
var $grid = $('.main').isotope({
itemSelector: '.img-block',
layoutMode: 'fitRows'
});
// bind filter button click
$('#filters').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
$grid.isotope({ filter: filterValue });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
#font-face {
font-family: Klik;
src: url(klik-light-webfont.woff);
}
#font-face {
font-family: theBoldFont;
src: url(theboldfont.ttf);
}
body{
padding: 0;
margin: 0;
}
.main {
margin-left: 200px;
padding: 105px 10px;
font-size: 16px;
font-family: CaviarDreams;
color: #000000;
display: block;
column-count: 3;
column-width: 32%
column-gap: 1%;
}
.main p {
font-size: 24px;
font-family: CaviarDreams;
color: #000000;
}
.sidebar {
height: 100%;
width: 200px;
position: fixed;
z-index: 3;
top: 0;
left: 0;
background-color: #000000;
overflow-x: hidden;
padding-top: 20px;
}
.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 16px;
font-family: CaviarDreams;
color: #ffffff;
display: block;
}
.sidebar a:hover {
color: #808080;
}
.sidebar b {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-family: theBoldFont;
font-size: 28px;
color: #ffffff;
display: block;
}
.sidebar c {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 13px;
font-family: Klik;
color: #ffffff;
display: block;
}
.navbar {
padding: 10px 0px 10px 10px;
right: 0;
margin-left: 200px;
top: 0;
z-index: 2;
overflow-x: hidden;
background-color: #808080;
}
.navbar a {
padding: 20px 8px 16px 16px;
text-decoration: none;
font-size: 16px;
font-family: Klik;
color: #ffffff;
}
.navbar b {
padding: 0px 0px 0px 0px;
width: 225px;
text-decoration: none;
font-size: 16px;
font-family: Klik;
color: #ffffff;
display: inline-block;
}
.navbar c {
padding: 25px 225px 0px 245px;
width: 100%;
height: 30px;
text-decoration: none;
font-size: 26px;
font-family: theBoldFont;
color: #000000;
display: inline-block;
}
.navbar button {
background-color: #000000;
border: none;
color: #ffffff;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Klik;
}
.navbar button:hover {
background-color: #ffffff;
border: none;
color: #000000;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Klik;
}
.img-block{
margin: 10px;
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Mozart Armstrong Portfolio Graphic Design</title>
</head>
<body>
<div class="sidebar">
<b>Mozart</b>
<b>Armstrong</b>
<c>design • marketing • branding</c>
<b></b>
<b></b>
<b></b>
Graphic Design
Illustration
Animations
Photography
Writing
Fashion Design
<b></b>
<b></b>
About
</div>
<div class="navbar">
<c>Graphic Design</c>
<b></b>
<div id="filters" class="button-group">
<button data-filter="*">All</button>
<button data-filter=".img-red">Red</button>
<button data-filter=".img-yellow">Yellow</button>
<button data-filter=".img-green">Green</button>
<button data-filter=".img-blue">Blue</button>
<button data-filter=".img-pink">Pink</button>
</div>
</div>
<div class="main">
<div class="img-block img-red" >
<img src="https://dummyimage.com/300x400/ff0000/fff" width="100%" />
</div>
<div class="img-block img-yellow">
<img src="https://dummyimage.com/300x400/ffff00/000000" width="100%" />
</div>
<div class="img-block img-green">
<img src="https://dummyimage.com/300x400/25b825/000000" width="100%" />
</div>
<div class="img-block img-blue">
<img src="https://dummyimage.com/300x400/2a31eb/ffffff" width="100%" />
</div>
<div class="img-block img-pink">
<img src="https://dummyimage.com/300x400/db2aeb/ffffff" width="100%" />
</div>
<div class="img-block img-green">
<img src="https://dummyimage.com/300x400/25b825/000000" width="100%" />
</div>
<div class="img-block img-green">
<img src="https://dummyimage.com/300x400/25b825/000000" width="100%" />
</div>
<div class="img-block img-red">
<img src="https://dummyimage.com/300x400/ff0000/fff" width="100%" />
</div>
<div class="img-block img-red">
<img src="https://dummyimage.com/300x400/ff0000/fff" width="100%" />
</div>
<div class="img-block img-yellow">
<img src="https://dummyimage.com/300x400/ffff00/000000" width="100%" />
</div>
<div class="img-block img-yellow">
<img src="https://dummyimage.com/300x400/ffff00/000000" width="100%" />
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://npmcdn.com/isotope-layout#3/dist/isotope.pkgd.js"></script>
</body>
</html>
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 have a button that when clicked opens a new tab with a URL stated in the javascript. However, once I put this button inside a figcaption it's clickable, but the javascript doesn't work. Here's the code:
<div class="container-top-pics">
<div class="row-top-pics">
<div class="column-left-pic">
<div class="col-inner">
<img src="Images/sf-downtown.jpg">
<figcaption>
WELCOME TO THE<br />
<h1>DEAL GUIDE</h1><br />
</figcaption>
</div>
</div>
<div class="column-right-pic">
<div class="col-inner">
<img src="Images/sf-ad.jpg">
<figcaption>
SPECIAL DEALS<br />
<h1>GET THEM</h1>
<h2>NOW</h2>
<button type="button" id="button-ad" class="button-ad" onclick="OpenInNewTab()">RESERVE NOW</button>
</figcaption>
</div>
</div>
</div>
</div>
CSS:
.container-top-pics {
width: 80%;
margin: 0 auto;
max-width:1140px;
}
img {
max-width:100%;
}
.column-right-pic {
float:left;
width:29%;
position: relative;
}
.column-right-pic figcaption {
font-family: "Avenir";
letter-spacing: 1px;
color: #FFF;
font-size: 1vw;
font-weight: 100;
text-align: center;
position: absolute;
z-index: 1000;
height: 100%;
width: 100%;
top: 0;
padding: 0 0 0 0;
line-height: 5em;
}
.column-right-pic h1 {
font-family: "Avenir";
letter-spacing: 4px;
color: #FFF;
font-style: normal;
font-weight: 100;
text-align: center;
font-size: 2vw;
width: 100%;
padding: 0% 0 0 0 ;
line-height: 0;
}
.column-right-pic h2 {
font-family: "Avenir";
letter-spacing: 4px;
color: #FFF;
font-style: normal;
font-weight: 100;
text-align: center;
font-size: 2vw;
width: 100%;
padding: 0% 0 0 0 ;
line-height: 1.7em;
}
.column-right-pic .button-ad {
font-family: "Helvetica Neue";
letter-spacing: 1px;
color: #FFF;
font-style: normal;
font-weight: 500;
text-align: center;
font-size: .8vw;
width: 45%;
height: 10%;
padding: 0% 0 0 0 ;
line-height: 1.7em;
background-image: url(../Images/button-reserve.jpg);
border:none;
}
.button-ad:hover {
background-image: url(../Images/button-reserve-hover.jpg);
cursor: pointer; cursor: hand;
}
.button-ad:active {
background-image: url(../Images/button-reserve-click.jpg)
}
Javascript:
document.getElementById('button-ad').onclick = function OpenInNewTab(url) {
var win = window.open('http://www.example.org');
win.focus();
}
Mike, the problem is not the location of the button itself but the styles you are applying, yo can actually click the button, but you gave the button a 10% height, so you don't have enough area to click it, try removing the height property or at least give it a greater area to click, cheers
btw, it works fine in Chrome, but because Chrome treats the overflow "the text" as part of the button, Firefox and probably others don't
.column-right-pic .button-ad {
font-family: "Helvetica Neue";
letter-spacing: 1px;
color: #FFF;
font-style: normal;
font-weight: 500;
text-align: center;
font-size: .8vw;
width: 45%;
border-style: none;
border-top: 2px solid #ffffff;
/*height: 10%;*/
padding: 0% 0 0 0 ;
line-height: 1.7em;
background-image: url(../Images/button-reserve.jpg);
/*background-color: #ff0000;*/
background-color: transparent;
}
i made a simple chat room. i want the comment to have different parts so i use this code to set an id and class to a div
$('<div id="fullBox">'+inpx+'</div>').addClass('showMessage').appendTo('#mainbox');
i use #fullBox to say you have a div that has larger space and i use .showMessage to say to it you have smaller space to hold the text.
therefor i can use that larger space to add some element later.
style of my id and class
#fullBox{
width:1100px;
margin:5px;
background-color:#fff;
}
and my class
.showMessage{
width :1000 px;
background-color:#03C;
word-wrap:break-word;
line-height :1.3 em;
font-size :24 px;
}
my id has larger space and i expect that my class with smaller space hold my text but my text follow my id i don't know how to solve it.
i use two different background color to see both of them if i can see both of them i get my answer.
link code :jsfiddle
and i want to know how can i have auto scrollbar to automatic show new post.
To fill all the space you have to set width:100% as presented below.
$(document).ready(function() {
$('.btn').on('click', function() {
var inpx = $('.inBox').val();
$('.inBox').val("");
$('<div id="fullBox">' + inpx + '</div>').addClass('showMessage').appendTo('#mainbox');
});
});
#mainbox {
margin-top: 10px;
float: left;
width: 500px;
height: 200px;
margin-left: 9px;
background: url(../img/dash.png);
box-shadow: -1px 2px 1px #DCDCDC;
border: 1px solid #c9c9c9;
border-radius: 5px;
border-left: 0.5em solid #06F;
z-index: 900;
overflow-y: auto;
}
#bottombox {
margin-top: 10px;
float: left;
width: 500px;
height: 100px;
margin-left: 9px;
background: url(../img/dash.png);
box-shadow: -1px 2px 1px #DCDCDC;
border: 1px solid #c9c9c9;
border-radius: 5px;
border-left: 0.5em solid #06F;
}
.inBox {
margin-top: 30px;
width: 400px;
height: 30px;
margin-left: 5px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
resize: none;
}
.btn {
position: relative;
top: -18px;
margin-left: 5px;
width: 60px;
height: 65px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
}
#fullBox {
width: 100%;
margin: 5px;
background-color: #ccc;
}
.showMessage {
width: 100%;
background-color: #000;
word-wrap: break-word;
line-height: 1.3em;
font-size: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainbox"></div>
<div id="bottombox">
<form>
<textarea class="inBox"></textarea>
<input type="button" class="btn" value="Send">
</form>
</div>
Or even better you can remove the width from that elements (fullBox and showMessage) and will be inherited from parent.
$(document).ready(function() {
$('.btn').on('click', function() {
var inpx = $('.inBox').val();
$('.inBox').val("");
$('<div id="fullBox">' + inpx + '</div>').addClass('showMessage').appendTo('#mainbox');
});
});
#mainbox {
margin-top: 10px;
float: left;
width: 500px;
height: 200px;
margin-left: 9px;
background: url(../img/dash.png);
box-shadow: -1px 2px 1px #DCDCDC;
border: 1px solid #c9c9c9;
border-radius: 5px;
border-left: 0.5em solid #06F;
z-index: 900;
overflow-y: auto;
}
#bottombox {
margin-top: 10px;
float: left;
width: 500px;
height: 100px;
margin-left: 9px;
background: url(../img/dash.png);
box-shadow: -1px 2px 1px #DCDCDC;
border: 1px solid #c9c9c9;
border-radius: 5px;
border-left: 0.5em solid #06F;
}
.inBox {
margin-top: 30px;
width: 400px;
height: 30px;
margin-left: 5px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
resize: none;
}
.btn {
position: relative;
top: -18px;
margin-left: 5px;
width: 60px;
height: 65px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
}
#fullBox {
margin: 5px;
background-color: #ccc;
}
.showMessage {
background-color: #000;
word-wrap: break-word;
line-height: 1.3em;
font-size: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainbox"></div>
<div id="bottombox">
<form>
<textarea class="inBox"></textarea>
<input type="button" class="btn" value="Send">
</form>
</div>
And to see the last message, you can use scrollTop to set the vertical position of the scrollbar.
$(document).ready(function() {
$('.btn').on('click', function() {
var inpx = $('.inBox').val();
$('.inBox').val("");
$('<div id="fullBox">' + inpx + '</div>').addClass('showMessage').appendTo('#mainbox');
$('#mainbox').scrollTop($('#mainbox').height());
});
});
#mainbox {
margin-top: 10px;
float: left;
width: 500px;
height: 200px;
margin-left: 9px;
background: url(../img/dash.png);
box-shadow: -1px 2px 1px #DCDCDC;
border: 1px solid #c9c9c9;
border-radius: 5px;
border-left: 0.5em solid #06F;
z-index: 900;
overflow-y: auto;
}
#bottombox {
margin-top: 10px;
float: left;
width: 500px;
height: 100px;
margin-left: 9px;
background: url(../img/dash.png);
box-shadow: -1px 2px 1px #DCDCDC;
border: 1px solid #c9c9c9;
border-radius: 5px;
border-left: 0.5em solid #06F;
}
.inBox {
margin-top: 30px;
width: 400px;
height: 30px;
margin-left: 5px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
resize: none;
}
.btn {
position: relative;
top: -18px;
margin-left: 5px;
width: 60px;
height: 65px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
}
#fullBox {
margin: 5px;
background-color: #ccc;
}
.showMessage {
background-color: #000;
word-wrap: break-word;
line-height: 1.3em;
font-size: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainbox"></div>
<div id="bottombox">
<form>
<textarea class="inBox"></textarea>
<input type="button" class="btn" value="Send">
</form>
</div>
You can just add a effect to scroll to the bottom of the div, on each click. Just add this code to your on.("click", function() { after the append function.
$('#mainbox').animate({ scrollTop: $("#mainbox").height() }, "fast");
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.