I managed to make it so that when I click on a button, a div shows/hides, thanks to this simple script:
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
Now I'd like to do the same thing for multiple divs in the same page, but if I use that same script, it will show every hidden div in my page, not just the one below the clicked button. Can anyone help me understand how to modify it?
Here's My DEMO you can clearly see the problem.
EDIT : The left square is supposed to show an image, but I haven't uploaded one yet.
You should use $(this) to refer to the current clicked div, and since you have the same class on the both of button you should check which one of them is clicked the perform the operation related with it :
$('.show_hide').click(function(){
if($(this).text()=='Close') //Close Case
$(this).closest('.slidingDiv').slideToggle();
else //More Case
$(this).closest('.news_button').next('.slidingDiv').slideToggle();
});
Hope this helps.
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
if($(this).text()=='Close') //Close Case
$(this).closest('.slidingDiv').slideToggle();
else //More Case
$(this).closest('.news_button').next('.slidingDiv').slideToggle();
});
});
.news_div_blue{
background-color: #000000;
color: #ffffff;
margin: auto;
margin-top: 10px;
width: 1050px;
height: 210px;
}
.news_div_blue a{
color: #ffffff;
margin-top: 0px;
}
.title_div_blue{
z-index: 90;
background-color: #000000;
width: 1050px;
height: 210px;
margin-bottom: 0px;
}
.news_p_blue{
margin-left: 10px;
margin-top: 5px;
width: 98%;
color: #ffffff;
font-family:"Myriad Pro","Trebuchet MS", sans-serif;
color:#404040;
font-size: 16px;
text-align: justify;
}
/* HIDE - SHOW */
.slidingDiv {
height: auto;
width: 1048px;
background-color: #E8f1fd;
margin: auto;
margin-top: 0px;
z-index: 100;
border: 1px solid #0E4186;
}
.show_hide {
display:none;
}
/*******/
.news_image{
float: left;
width: 23%;
border: 1px solid white;
height: 150px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.news_title_blue{
font-family:"Myriad Pro","Trebuchet MS", sans-serif;
color: #ffffff;
float: right;
width: 73%;
border: 1px solid white;
height: 150px;
text-align: justify;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.news_button{
float: right;
margin-right: 10px;
margin-top: -40px;
}
/* Button Graphic */
.button_news {
border-top: 1px solid #ffffff;
background: #3663a3;
background: -webkit-gradient(linear, left top, left bottom, from(#0e4086), to(#3663a3));
background: -webkit-linear-gradient(top, #0e4086, #3663a3);
background: -moz-linear-gradient(top, #0e4086, #3663a3);
background: -ms-linear-gradient(top, #0e4086, #3663a3);
background: -o-linear-gradient(top, #0e4086, #3663a3);
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
border-radius: 24px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #ffffff;
font-size: 15px;
font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
text-decoration: none;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news_div_blue">
<div class="title_div_blue">
<div class="news_image"><img src=""/></div>
<div class="news_title_blue">Title</div>
</div> <!-- END title_div_blue -->
<div class="news_button"><button class="button_news">More</button></div>
<div class="slidingDiv">
<p class="news_p_blue">
This is the first hidden text
<br/>
<br/>
<br/>
...
</p>
<div class="news_button"><button class="button_news">Close</button></div>
</div> <!-- END slidingDiv -->
<div class="title_div_blue">
<div class="news_image"><img src=""/></div>
<div class="news_title_blue">Title2</div>
</div> <!-- END title_div_blue -->
<div class="news_button"><button class="button_news">More</button></div>
<div class="slidingDiv">
<p class="news_p_blue">
This is the second hidden text
<br/>
<br/>
<br/>
...
</p>
<div class="news_button"><button class="button_news">Close</button></div>
</div> <!-- END slidingDiv -->
</div> <!-- END news_div_blue -->
Related
So my problem may sound banal but it is quite annoying. When I click on the css icons in the css accordion, I have to click on the letters URL so that a link is copied into the clipboard. So far the code works fine.
But I want the whole thing to work also when I click on the white border of the css icon (so above and below the URL letters).
What would I need to change to include the entire css icon to be part of the JS onclick process?
```
<!DOCTYPE html>
<html>
<head>
<title>My example Website</title>
<style>
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
.whitepaper {
cursor: pointer;
text-align: center;
background-color: white;
border: 2px solid black;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.blackframe {
text-align: center;
background-color: black;
cursor: pointer;
font-family: Tahoma, Geneva, sans-serif;
font-size:12px;
font-weight:bold;
margin: 12px 0 12px 0;
color: white;
width: 30px;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background-color: black;
border: 2px solid white;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper" onclick="myFunction(event)">
<div class="blackframe"><span class="tooltiptext">Copy link 1 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title1" id="myInput">
</div>
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper" onclick="myFunction(event)">
<div class="blackframe"><span class="tooltiptext">Copy link 2 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title2" id="myInput">
</div>
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper" onclick="myFunction(event)">
<div class="blackframe"><span class="tooltiptext">Copy link 3 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title3" id="myInput">
</div>
</div>
<script>
function myFunction(event) {
/* Get the text field */
var copyText = event.target.parentNode.nextSibling.nextSibling.value
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText);
/* Alert the copied text */
alert("Copied: " + copyText);
}
</script>
</body>
</html>
```
I have now solved the problem. Someone here on Stackoverflow helped me to combine the two DIV elements into one by using a linear gradient. Now the code works perfectly on both fields because it is now a single div. So in a nutshell, I had to improve the CSS code a bit and the problem was solved. Nevertheless, thanks to all who took the time to help me, but the solution came this time nevertheless differently than expected at first.
Here is the finished example of how it works:
```
<!DOCTYPE html>
<html>
<head>
<title>My example Website</title>
<style>
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
.whitepaper {
align-items: center;
cursor: pointer;
text-align: center;
background: linear-gradient(to top, white 12px, black 12px, black 28px, white 28px);
border: 2px solid black;
border-radius: 3px;
color: white;
display: flex;
justify-content: center;
font-size:12px;
font-weight:bold;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background: linear-gradient(to top, black 12px, white 12px, white 28px, black 28px);
border: 2px solid white;
border-radius: 3px;
color: black;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper" onclick="myFunction(event)">
<span class="tooltiptext">Copy link 1 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title1" id="myInput">
</div>
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper" onclick="myFunction(event)">
<span class="tooltiptext">Copy link 2 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title2" id="myInput">
</div>
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper" onclick="myFunction(event)">
<span class="tooltiptext">Copy link 3 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title3" id="myInput">
</div>
</div>
<script>
function myFunction(event) {
/* Get the text field */
var copyText = event.target.parentNode.nextSibling.nextSibling.value
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText);
/* Alert the copied text */
alert("Kopiert: " + copyText);
}
</script>
</body>
</html>
```
Ditch the onclick, declare your tooltip with your whitepaper class(s), then use a function with a click eventlistener
let tooltip = document.querySelectorAll(".whitepaper");
for (let i = 0; i < tooltip.length; i++) {
tooltip[i].addEventListener("click", function() {
var copyText = event.target.nextSibling.nextSibling.value
navigator.clipboard.writeText(copyText);
alert("Copied: " + copyText);
});
}
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color: black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked+label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input+label+.content {
display: none;
}
input:checked+label+.content {
display: block;
}
.whitepaper {
cursor: pointer;
text-align: center;
background-color: white;
border: 2px solid black;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.blackframe {
text-align: center;
background-color: black;
cursor: pointer;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 12px 0 12px 0;
color: white;
width: 30px;
pointer-events: none;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background-color: black;
border: 2px solid white;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<!DOCTYPE html>
<html>
<head>
<title>My example Website</title>
</head>
<body>
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper">
<div class="blackframe"><span class="tooltiptext">Copy link 1 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title1" id="myInput">
</div>
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper">
<div class="blackframe"><span class="tooltiptext">Copy link 2 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title2" id="myInput">
</div>
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper">
<div class="blackframe"><span class="tooltiptext">Copy link 3 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title3" id="myInput">
</div>
</div>
</body>
</html>
```
This will not open you alert when clicking below or above, but it won't show an error as well.
Just put onClick event inside "blackFrame" div.
```
<!DOCTYPE html>
<html>
<head>
<title>My example Website</title>
<style>
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
.whitepaper {
cursor: pointer;
text-align: center;
background-color: white;
border: 2px solid black;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.blackframe {
text-align: center;
background-color: black;
cursor: pointer;
font-family: Tahoma, Geneva, sans-serif;
font-size:12px;
font-weight:bold;
margin: 12px 0 12px 0;
color: white;
width: 30px;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background-color: black;
border: 2px solid white;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper">
<div class="blackframe" onclick="myFunction(event)"><span class="tooltiptext">Copy link 1 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title1" id="myInput">
</div>
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper">
<div class="blackframe" onclick="myFunction(event)"><span class="tooltiptext">Copy link 2 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title2" id="myInput">
</div>
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
<div class="tooltip">
<div class="whitepaper">
<div class="blackframe" onclick="myFunction(event)"><span class="tooltiptext">Copy link 3 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title3" id="myInput">
</div>
</div>
<script>
function myFunction(event) {
/* Get the text field */
var copyText = event.target.parentNode.nextSibling.nextSibling.value
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText);
/* Alert the copied text */
alert("Copied: " + copyText);
}
</script>
</body>
</html>
```
As far as I know, and based on this documentation https://www.w3schools.com/tags/tag_span.asp, I think that you can't do what you wish using Span tag.
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;
}
My div tag named 2nd-bar won't show up below navigation bar and also won't show bottom border and due to that also my list elements won't come inside it.
I am new to HTML and CSS so would be glad to get some help, thank you here is my code.
<htmL>
<head>
<title>Lawyer Up</title>
</head>
<link rel="shortcut icon" type="image/png" href="file:
/User/rahul%20saini/Desktop/Testproject1/index.png"/>
<link href="https://fonts.googleapis.com/css?family=Oxygen"
rel="stylesheet">
<style type = "text/css">
body{
/* background-color:#F8B195; */
}
#navibar{
position: relative;
width: 100%;
height: 45px;
/* background-color: #355C7D; */
padding: 0px;
margin: 0px;
}
#logo{
width:45px;
height: 45px;
float: left;
padding-right:4px;
}
.give-border{
border-bottom-color: darkgrey;
border-bottom-style: inset;
border-bottom-width: medium;
width: 1px;
height: 2px;
}
#searchlogo{
float:right;
width: 25px;
height: 25px;
position: absolute;
top: 2px;
left: 160px;
}
.border{
float:right;
position: absolute;
top: 0px;
left: 154px;
border-left-color:darkslategrey;
border-left-style: solid;
height: 30px;
border-left-width: thin;
}
#loginlogo{
float:right;
position: relative;
top:-24px;
left: -10px;
border-left-color: darkslategray;
border-left-style: dotted;
}
.bordertop{
float: left;
border: 1px;
border-left-color: #302929;
border-left-style: solid;
height: 45px;
padding-left: 4px;
}
#thename{
font-size: 2em;
font-weight: bolder;
font-family: 'oxygen',sans-serif;
color: #000033;
padding-left: 3px;
}
#2ndbar{
float: left
margin: 0px;
width: 20px;
height: 20px;
background-color: antiquewhite;
border-bottom-color: dimgrey;
border-bottom-style: double;
border-bottom-width: thin;
}
#navibar a{
float:right;
font-size: 150%;
color:#F67280;
padding: 5px 10px 5px 10px;
text-decoration: none;
}
a:hover{
font-size: 150%;
text-decoration: underline;
color: wheat;
background-color: skyblue;
background-size: contain;
transition-property: background;
transition-duration: 0.8s;
}
body{
margin: 0px;
padding: 0px;
}
h1{
text-align: center;
font-size: 50px;
font-weight: 100;
font-family: sans-serif;
color: brown;
}
.input{
position:relative;
left: 1100px;
width: 185px;
height: 30px;
top:6px;
}
.input input{
position: relative;
height: 30px;
width: 150px;
top:-45px;
background-color: #E9E9E9;
}
ul{
list-style-type: none;
}
.list{
float:left;
padding-right: 10px;
border-right-style: solid;
border: 1px;
border-right-width: thin;
border-right-color: aqua;
}
</style>
<body>
<div id="fullpage">
<div id="navibar" class="give-border">
<img id="logo" src="logo.png">
<div id="thename" >
<span class="bordertop" >Lawyer Up</span>
</div>
<div class="input">
<form>
<input type="search" placeholder="Search">
</form>
<div class="border">
</div>
<img id="searchlogo" src="search.png">
</div>
<div id="loginlogo">
<a href="login.html">
<img src="login.png">
</a>
</div>
</div>
<div id="2ndbar">
<ul>
<li class ="list">name</li>
<li class="list">another name</li>
<li class="list">one more name</li>
</ul>
</div>
<!-- <h1> Welcome </h1> -->
</div> <! div=fullpage >
</body>
</htmL
the problem is the the 2nd bar which isn't working Idk why, I have made some changes but I still can't get it why, I think it might be due to the positions I gave for divs, but I tried that too so it would be a great help if anyone can help me or tell me what am I doing wrong here.
In HTML you cannot begin an id with a number. Try changing the id from 2ndbar to bar2 and your styles should affect it from that point.
I have this JAVA script at the moment.
/* ******************************************************************** */
/* Generated by: http://csscreator.com */
/* ******************************************************************** */
html,
body {
margin: 0;
padding: 0;
text-align: center;
BACKGROUND: #fff;
font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
}
a {
color: #fff;
text-decoration: none;
white-spaces: nobreak
}
li {
color: #fff;
}
body {
color: #BAC6DE
}
#pagewidth {
width: 1395px;
text-align: left;
margin: 0px auto;
}
#header {
position: relative;
height: 100px;
width: 1395px;
display: block;
overflow: none;
padding: 0px 0px 0px 0px;
}
#header h2 {
color: #fff;
padding: 0px 0px 0px 60px;
}
#header p {
color: #fff;
padding: 10px 0px 0px 60px;
}
#maincol {
background-color: #BAC6DE;
position: relative;
width: 1395px;
height: 800px;
padding: 0px 0px 0px 0px;
Margin: 0px 0px 0px 0px;
}
#widgetcontainer {
background-color: #00386B;
position: relative;
width: 1175px;
height: 100%;
Margin: 0px 0px 0px 0px;
Padding: 0px 0px 0px 10px;
Overflow: auto;
}
.widget {
background-color: #BAC6DE;
float: left;
width: 200px;
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
}
#result p {
color: #000;
}
#footer h2 {
color: fff;
padding: 0px 0px 0px 0px;
}
#footer p {
color: fff;
padding: 0px 50px 0px 60px;
font-family: 'Monotype Corsiva', 'Apple Chancery', 'ITC Zapf Chancery', 'URW Chancery L', cursive;
font-size: 120%;
margin-right: 2px;
margin-top: 8px;
}
/* ******************************************************************** */
/* Clearfix: http://csscreator.com/attributes/containedfloat.php */
/* ******************************************************************** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility;
hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
/* ******************************************************************** */
/* Styling for widgets hover */
/* ******************************************************************** */
.current {
color: #00386B;
display: block;
}
.imgHover {
display: inline;
position: relative;
}
.imgHover .hover {
display: none;
position: absolute;
z-index: 1;
}
.hover {
height: 575px;
width: 200px;
background: #BAC6DE;
}
.hover a {
display: block;
padding: 2px;
font-size: 80%;
padding-left: 5px;
}
.hover a:link {
/* Applies to all unvisited links */
text-decoration: none;
font-weight: none;
background-color: #BAC6DE;
color: #fff;
}
.hover a:hover {
/* Applies to links under the pointer */
text-decoration: none;
font-weight: bold;
background-color: #BAC6DE;
color: #fff;
}
.input {
border: 2px inset #fff;
background: #eee;
height: 30px;
margin-bottom: 40px;
}
.input:hover {
border: 2px solid #f00;
background: #ff6;
}
.button {
display: none;
}
label {
display: block;
width: 150px;
float: left;
margin: 2px 4px 6px 4px;
text-align: right;
}
br {
clear: left;
}
/* ******************************************************************** */
/* Styling for console panel */
/* ******************************************************************** */
a:focus {
outline: none;
}
a.trigger {
position: absolute;
background: #9E00F8 url(../images/plus.png) 6% 55% no-repeat;
text-decoration: none;
font-size: 16px;
letter-spacing: -1px;
font-family: verdana, helvetica, arial, sans-serif;
color: #fff;
padding: 4px 12px 6px 30px;
font-weight: bold;
z-index: 2;
}
a.trigger.left {
left: 0;
border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
}
a.trigger.right {
right: 0;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
}
a.trigger:hover {
background-color: #59B;
}
a.active.trigger {
background: #666 url(../images/minus.png) 6% 55% no-repeat;
}
.panel {
color: #CCC;
position: absolute;
display: none;
background: #9E00F8;
height: 800px;
width: 800px;
z-index: 1;
}
.panel.left {
left: 0;
padding: 26px 0px;
border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-bottom-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.panel p {
font-size: 11px;
}
<!doctype html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title>Hub Page</title>
<meta charset="utf-8" />
<meta generator="csscreator.com" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/+sfgRmluamFuX1R5cGU9amF2YV9zY3JpcHQmRmluamFuX0xhbmc9SmF2YVNjcmlwdA==+/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.slidePanel.min.js"></script>
<script>
$(function() {
$(".imgHover").hover(function() {
$(this).children("img").fadeTo(200, 0.1).end().children(".hover").show();
}, function() {
$(this).children("img").fadeTo(200, 1).end().children(".hover").hide();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
// default settings
// $('.panel').slidePanel();
// custom settings
$('#panel2').slidePanel({
triggerName: '#trigger1',
triggerTopPos: '0px',
panelTopPos: '0px'
});
});
</script>
<SCRIPT LANGUAGE="JavaScript">
function ClipBoard() {
holdtext.innerText = copytext.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("RemoveFormat");
Copied.execCommand("Copy");
alert("Template Copied");
}
</SCRIPT>
<!-- Please link back to http://csscreator.com -->
<link rel="stylesheet" href="style/homepage.css" type="text/css" />
</head>
<body>
<div id="pagewidth">
<div id="header">
<IMG SRC="images/header.jpg" align=right>
</a>
<TEXTAREA ID="holdtext" STYLE="display:none;">
</TEXTAREA>
<SPAN ID="copytext" STYLE="height:150;width:162;display:none;">
http://kana.ifdsgroup.co.uk/attachments/attach/uk/</SPAN>
</P>
</div>
<div id="wrapper" class="clearfix">
<div id="maincol">
<div class="widget">
<div class="hover">
<!----------START NAVIGATION PANEL----------->
TEAM HOME
KANA IQ
EMAIL DRAFT
TEAM DOCUMENTS
<!----------END NAVIGATION PANEL----------->
</div>
</div>
<div id="widgetcontainer">
<!----------Start Team Home Links----------->
<font size=5><strong><p>Bulletin Board. . .</p></strong></font>
<P>Please Enter Your First Bulletin Here . . .</P>
<!----------End Team Home Links----------->
</div>
<br clear=all>
</div>
</div>
</div>
</div>
</body>
</html>
Please can someone tell me why the text in the right hand DIV (Dark blue) is lower than the text in the left DIV (light blue)?
I have changed the padding, the margins but i cant get it to line up correctly.
You have to take note that browsers have their own pre-defiend styles for elements.
As "Bulletin Board..." is a p tag, browsers will add their own margins to that element. Most developers will use a reset stylesheet to avoid these issues. You could also just add margin: 0px; to the p tag and it would solve the issue.
<p> has a margin of 1em. Just inspect the the code using dev console.
p{
margin :0;
}
This will fix it. But please use normalize.css to fix browser specific default values.
Try this: your problem is margin of p tag. it have default margin. so, you can reset the margin of p tag by following code
Add p{margin:0;}code in css
This is because most browsers by default add some margins and paddings to the paragraph tags. You can either use a css reset file or just remove the margins yourself.
#widgetcontainer p{
margin: 0px;
}
I have a notification block at the lower right end of my webpage which is fixed. I have designed it using HTML and CSS. Here is the link.. http://jsfiddle.net/wp5Lfjwq/
Now if the user click's on 'X', I want the notification to get resized (say for example, height: 50px and width: 50px) and only show the 'Some Title' and do not want the whole notification box to disappear.
By using toggle in java-script I can make it disappear but how do I resize it?
Here is the HTML:
<div class="notification">
<span class="notificationtitle">
<strong>Some Title</strong>
<span style="float: right">X</span>
</span>
</div>
Here is the CSS:
.notification {
border-image: none;
border-style: solid solid none;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-width: 2px 2px medium;
padding: 10px;
position: fixed;
background-color: #ffffff;
border-color: #666;
right: 10px;
bottom: 0;
z-index: 1;
margin: 0 auto;
width: 300px;
float: left;
height: 190px;
text-align: center;
}
.notificationtitle {
display: block;
font-size: 22px;
font-weight: normal;
line-height: 26px;
font: "HelveticaNeueLTStd65Medium";
color: #4d4d4d;
}
Any help would be appreciated...
Your Answer is ...
$(document).ready(function() {
$(".show span").click(function() {
$(".show").css( 'display' , 'none' );
$(".hide").css( 'display' , 'block' );
});
$(".hide strong").click(function() {
$(".hide").css( 'display' , 'none' );
$(".show").css( 'display' , 'block' );
});
});
.notification {
border-image: none;
border-style: solid solid none;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-width: 2px 2px medium;
padding: 10px;
position: fixed;
background-color: #ffffff;
border-color: #666;
right: 10px;
bottom: 0;
z-index: 1;
margin: 0 auto;
width: 300px;
float: left;
height: 190px;
text-align: center;
}
.show{
display:block;
}
.hide{
display:none;
width:150px;
height:30px;
cursor:pointer;
}
.notificationtitle {
display: block;
font-size: 22px;
font-weight: normal;
line-height: 26px;
font: "HelveticaNeueLTStd65Medium";
color: #4d4d4d;
}
.notificationtitle span{
float:right;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="notification show">
<span class="notificationtitle"><strong>Some Title</strong><span>X</span></span>
</div>
<div class="notification hide">
<span class="notificationtitle"><strong>Some Title</strong></span>
</div>
Use animate()
$('.notificationtitle').on('click',function(){
$('.notification').animate({width:'50px',height:'46px'});
})
Updated Demo
Try this :
$('.notificationtitle span').click(function(){
$(this).closest('.notification').css({width:'50px',height:'50px'});
});
DEMO
demo - http://jsfiddle.net/wp5Lfjwq/11/
toggle a class with width and height
$('.notificationtitle').on('click', function () {
$('.notification').toggleClass('hide');
})
.notification {
border-image: none;
border-style: solid solid none;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-width: 2px 2px medium;
padding: 10px;
position: fixed;
background-color: #ffffff;
border-color: #666;
right: 10px;
bottom: 0;
z-index: 1;
margin: 0 auto;
width: 300px;
float: left;
height: 190px;
text-align: center;
transition: all .5s linear;
}
.notificationtitle {
display: block;
font-size: 22px;
font-weight: normal;
line-height: 26px;
font:"HelveticaNeueLTStd65Medium";
color: #4d4d4d;
}
.hide {
width:50px;
height:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="notification"> <span class="notificationtitle"><strong>Some Title</strong><span style="float: right">X</span></span>
</div>