I have this code
/* Themes.css */
:root {
--headerBG: #222;
--headerColor: #fff;
--codeBoxBG: #333;
--codeBoxColor: #fff;
--codeHeaderBG: #121212;
--codeColor: #fff;
--bodyBG: #ccc;
--bodyColor: #000;
--linkColor: #ccc;
--linkHover: #000;
}
/* Styles.css */
#import url('https://fonts.googleapis.com/css2?family=Georama:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; transition: all .2s ease-in-out; }
body { font-family: 'Georama', sans-serif; width: 100%; background: var(--bodyBG); color: var(--bodyColor); }
header {
background-color: var(--headerBG);
min-height: 300px; min-width: 100vw;
color: var(--headerColor);
display: block;
margin-left: auto;
margin-right: auto;
text-align: left;
padding: 80px 180px 50px 180px;
}
article { padding: 80px 180px 50px 180px; }
header h1 { font-size: 2.2em; margin-bottom: 10px; }
header h2 { font-size: 1.2em; margin-bottom: 30px; }
header a, nav a { color: #ccc; text-decoration: none; }
a:hover { color: #00aeff; }
p { margin-bottom: 8px; }
img { max-width: 100%; display: block; margin: 20px auto; }
article a { color: var(--linkColor); text-decoration: none; }
article a:hover { color: var(--linkHover); }
nav {
height: 50px; padding: 15px;
width: 100%; color: #fff;
background-color: #535353;
align-items: center;
}
nav a { margin: auto 3px; }
nav .items { float: right; }
.heading { margin-bottom: 10px; }
.heading2 { margin-top: 20px; margin-bottom: 10px; }
hr { margin: 30px auto; }
hr.hr1{ border-top: 3px solid #8c8b8b; }
hr.hr2 { border-top: 5px solid #8c8b8b; }
.codebox {
padding: 10px;
font-size: 1em;
line-height: 1.3;
color: var(--codeBoxColor);
background-color: var(--codeBoxBG);
border-radius: 0px 0px 6px 6px;
margin-bottom: 10px;
overflow: auto;
}
code { font-size: 1em; line-height: 1.3; }
.codeheader {
padding: 5px 5px 5px 10px;
font-size: 1.1em;
color: var(--codeColor);
border-radius: 6px 6px 0px 0px;
user-select: none;
background: var(--codeHeaderBG);
border-bottom: 2px solid #00aeff;
}
.codeheader div {
margin-top: 3px;
height: .6em; width: .6em;
background: #fff;
border-radius: 50%;
display: inline-block;
}
.codeheader div:first-child { background: #ff4a4a; }
.codeheader div:nth-child(2) { background: #ffc64a; }
.codeheader div:last-child { margin-right: 6px; background: #59ff4a; }
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<link rel="stylesheet" href="themes.css">
<link rel="stylesheet" href="styles.css">
<nav>
<span class="brand">
MyBlog.com
</span>
<div class="items">
<a class="active" href="#">Home</a>
About
Contact
</div>
</nav>
<header>
<h1>Man must explore, and this is exploration at its greatest</h1>
<h2 class="subheading">Problems look mighty small from 150 miles up</h2>
<span class="meta">
Posted by
Start Bootstrap
on August 24, 2021
</span>
</header>
<article>
<h2 class="heading">The Lorem and Ipsum</h2>
<p>Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman's earth, if free men make it, will be truly round: a globe in practice, not in theory.</p>
<p>Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
<p>What was most significant about the lunar voyage was not that man set foot on the Moon but that they set eye on the earth.</p>
<p>A Chinese tale tells of some men sent to harm a young girl who, upon seeing her beauty, become her protectors rather than her violators. That's how I felt seeing the Earth for the first time. I could not help but love and cherish her.</p>
<p>For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us.</p>
<div class="codeheader">
<div></div>
<div></div>
<div></div>
css
</div>
<div class="codebox">
<pre><code>.somecssclass {
padding: 15px;
font-family: Courier, sans-serif;
font-size: 12px;
color: #fff;
background-color: #3d3d3d;
margin-bottom: 10px;
-webkit-border-radius: 0px 0px 6px 6px;
-moz-border-radius: 0px 0px 6px 6px;
border-radius: 0px 0px 6px 6px;
}</code></pre>
</div>
<hr class="hr1">
<h2 class="heading2">The Final Frontier</h2>
<p>There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.</p>
<p>There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.</p>
<blockquote class="blockquote">The dreams of yesterday are the hopes of today and the reality of tomorrow. Science has not yet mastered prophecy. We predict too much for the next year and yet far too little for the next ten.</blockquote>
<p>Spaceflights cannot be stopped. This is not the work of any one man or even a group of men. It is a historical process which mankind is carrying out in accordance with the natural laws of human development.</p>
<hr class="hr2">
<h2 class="heading2">Reaching for the Stars</h2>
<p>As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. That beautiful, warm, living object looked so fragile, so delicate, that if you touched it with a finger it would crumble and fall apart. Seeing this has to change a man.</p>
<img class="img-fluid" src="assets/img/post-sample-image.jpg" alt="..." />
<span class="caption text-muted">To go places and do things that have never been done before – that’s what living is all about.</span>
<p>Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before.</p>
<p>As I stand out here in the wonders of the unknown at Hadley, I sort of realize there’s a fundamental truth to our nature, Man must explore, and this is exploration at its greatest.</p>
<p>Placeholder text by Space Ipsum · Images by NASA on The Commons</p>
</article>
Where i have a file named styles.css where i have all the code and also i have a file named themes.css in themes.css file i have all the colors defined in that file but is there any way that i can change that color using javascript so that i can change the theme ?
For example when i have Light Theme I Use these colors
:root {
--headerBG: #222;
--headerColor: #fff;
--codeBoxBG: #333;
--codeBoxColor: #fff;
--codeHeaderBG: #121212;
--codeColor: #fff;
--bodyBG: #ccc;
--bodyColor: #000;
--linkColor: #ccc;
--linkHover: #000;
}
And when i have Dark theme selected the colors should be
:root {
--headerBG: #222;
--headerColor: #fff;
--codeBoxBG: #222;
--codeBoxColor: #fff;
--codeHeaderBG: #121212;
--codeColor: #fff;
--bodyBG: #333;
--bodyColor: #fff;
--linkColor: #e7e7e7;
--linkHover: #fff;
}
Define a class, like
.myroot {
--headerBG: yellow;
}
and apply this class where you needed, via
class="myroot"
See:
/* Themes.css */
:root {
--headerBG: #222;
--headerColor: #fff;
--codeBoxBG: #333;
--codeBoxColor: #fff;
--codeHeaderBG: #121212;
--codeColor: #fff;
--bodyBG: #ccc;
--bodyColor: #000;
--linkColor: #ccc;
--linkHover: #000;
}
.myroot {
--headerBG: yellow;
}
/* Styles.css */
#import url('https://fonts.googleapis.com/css2?family=Georama:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; transition: all .2s ease-in-out; }
body { font-family: 'Georama', sans-serif; width: 100%; background: var(--bodyBG); color: var(--bodyColor); }
header {
background-color: var(--headerBG);
min-height: 300px; min-width: 100vw;
color: var(--headerColor);
display: block;
margin-left: auto;
margin-right: auto;
text-align: left;
padding: 80px 180px 50px 180px;
}
article { padding: 80px 180px 50px 180px; }
header h1 { font-size: 2.2em; margin-bottom: 10px; }
header h2 { font-size: 1.2em; margin-bottom: 30px; }
header a, nav a { color: #ccc; text-decoration: none; }
a:hover { color: #00aeff; }
p { margin-bottom: 8px; }
img { max-width: 100%; display: block; margin: 20px auto; }
article a { color: var(--linkColor); text-decoration: none; }
article a:hover { color: var(--linkHover); }
nav {
height: 50px; padding: 15px;
width: 100%; color: #fff;
background-color: #535353;
align-items: center;
}
nav a { margin: auto 3px; }
nav .items { float: right; }
.heading { margin-bottom: 10px; }
.heading2 { margin-top: 20px; margin-bottom: 10px; }
hr { margin: 30px auto; }
hr.hr1{ border-top: 3px solid #8c8b8b; }
hr.hr2 { border-top: 5px solid #8c8b8b; }
.codebox {
padding: 10px;
font-size: 1em;
line-height: 1.3;
color: var(--codeBoxColor);
background-color: var(--codeBoxBG);
border-radius: 0px 0px 6px 6px;
margin-bottom: 10px;
overflow: auto;
}
code { font-size: 1em; line-height: 1.3; }
.codeheader {
padding: 5px 5px 5px 10px;
font-size: 1.1em;
color: var(--codeColor);
border-radius: 6px 6px 0px 0px;
user-select: none;
background: var(--codeHeaderBG);
border-bottom: 2px solid #00aeff;
}
.codeheader div {
margin-top: 3px;
height: .6em; width: .6em;
background: #fff;
border-radius: 50%;
display: inline-block;
}
.codeheader div:first-child { background: #ff4a4a; }
.codeheader div:nth-child(2) { background: #ffc64a; }
.codeheader div:last-child { margin-right: 6px; background: #59ff4a; }
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<link rel="stylesheet" href="themes.css">
<link rel="stylesheet" href="styles.css">
<nav>
<span class="brand">
MyBlog.com
</span>
<div class="items">
<a class="active" href="#">Home</a>
About
Contact
</div>
</nav>
<header class="myroot">
<h1>Man must explore, and this is exploration at its greatest</h1>
<h2 class="subheading">Problems look mighty small from 150 miles up</h2>
<span class="meta">
Posted by
Start Bootstrap
on August 24, 2021
</span>
</header>
<article>
<h2 class="heading">The Lorem and Ipsum</h2>
<p>Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman's earth, if free men make it, will be truly round: a globe in practice, not in theory.</p>
<p>Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
<p>What was most significant about the lunar voyage was not that man set foot on the Moon but that they set eye on the earth.</p>
<p>A Chinese tale tells of some men sent to harm a young girl who, upon seeing her beauty, become her protectors rather than her violators. That's how I felt seeing the Earth for the first time. I could not help but love and cherish her.</p>
<p>For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us.</p>
<div class="codeheader">
<div></div>
<div></div>
<div></div>
css
</div>
<div class="codebox">
<pre><code>.somecssclass {
padding: 15px;
font-family: Courier, sans-serif;
font-size: 12px;
color: #fff;
background-color: #3d3d3d;
margin-bottom: 10px;
-webkit-border-radius: 0px 0px 6px 6px;
-moz-border-radius: 0px 0px 6px 6px;
border-radius: 0px 0px 6px 6px;
}</code></pre>
</div>
<hr class="hr1">
<h2 class="heading2">The Final Frontier</h2>
<p>There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.</p>
<p>There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.</p>
<blockquote class="blockquote">The dreams of yesterday are the hopes of today and the reality of tomorrow. Science has not yet mastered prophecy. We predict too much for the next year and yet far too little for the next ten.</blockquote>
<p>Spaceflights cannot be stopped. This is not the work of any one man or even a group of men. It is a historical process which mankind is carrying out in accordance with the natural laws of human development.</p>
<hr class="hr2">
<h2 class="heading2">Reaching for the Stars</h2>
<p>As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. That beautiful, warm, living object looked so fragile, so delicate, that if you touched it with a finger it would crumble and fall apart. Seeing this has to change a man.</p>
<img class="img-fluid" src="assets/img/post-sample-image.jpg" alt="..." />
<span class="caption text-muted">To go places and do things that have never been done before – that’s what living is all about.</span>
<p>Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before.</p>
<p>As I stand out here in the wonders of the unknown at Hadley, I sort of realize there’s a fundamental truth to our nature, Man must explore, and this is exploration at its greatest.</p>
<p>Placeholder text by Space Ipsum · Images by NASA on The Commons</p>
</article>
Single Line code convert light theme to dark. Try it
<style>
body
{
filter: invert(1);
}
</style>
Related
/*
Project Name: Monthly Resolutions
Client: One Month
Author: Christopher Castig | #castig
*/
* {
-moz-box-sizing: border-box; /* Firexfox */
-webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
box-sizing: border-box; /* IE */
font-family: 'Lato', sans-serif;
}
html {
margin: 0px 0px 0px 0px;
}
.clear {
clear: both;
}
h1 {
padding: 0px 0px 0px 0px;
font-size: 60px;
margin-bottom: 0%;
letter-spacing: -4px;
margin-left: 100px;
line-height: 1;
margin-top: 100px;
}
h6 {
font-size: 17.5px;
margin-top: 0%;
margin-left: 100px;
}
body {
background: url(/Users/harshfernandes/Desktop/Coding/fourth-code-resources/images/notebook.png); /* add a fallback color of #d6d6d6 */
color: #000000;
font-family: 'Lato', sans-serif;
font-size: 100%;
width: 1200px;
}
#rheading {
font-size: 40px;
margin-top: 30px ;
margin-bottom: 2px;
}
#container {
width: 1200px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#caption {
color: rgb(88, 88, 88);
font-size: 15px;
margin-bottom: 70px;
}
#content {
background: white;
float: left;
width: 680px;
padding-left: 30px;
padding-right: 30px;
margin-left: 100px;
}
#sidebar {
float: left;
background: white;
width: 310px;
border: 3px;
border-style: solid;
border-top: none;
border-right: none;
border-color:rgb(192, 192, 192);
margin-left: 10px;
padding: 15px 15px 15px 15px;
margin-right: 100px;
}
#footer {
margin-top: 30px;
margin-bottom: 20px;
margin-left: 100px;
}
a {
color: orange;
text-decoration: none;
}
.image {
border-radius: 50%;
margin-left: auto;
margin-right: auto;
display: block;
}
blockquote {
font-style: italic;
border-left: 4px solid gray;
padding-left: 20px;
margin-left: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Chris Castiglione, and the One Month team">
<title>Monthly Resolutions by Harsh Fernandes</title>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="fourth-code-resources/css/style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>Monthly Resolutions</h1>
<h6>Dreaming Aloud. 30 days at a time.</h6>
</div>
<!--header-->
<div id="content">
<p id="rheading"> Learn to Surf </p>
<img src="fourth-code-resources/images/surfing.jpg" alt="surf image" class="aligncenter" width="620px">
<p> This april I will travel to the Carribean and take surfing lessons.</p>
<hr>
<p id="caption">My April Resolution by Harsh Fernandes</p>
<p id="rheading">Read Everyday</p>
<img src="fourth-code-resources/images/book.jpg" alt="book" class="aligncenter" width="620px">
<p>This Month I will read at least 50 pages everyday, including weekends.</p>
<hr>
<p id="caption">My March Resolution by Harsh Fernandes</p>
<p id="rheading">Meditate</p>
<img src="fourth-code-resources/images/meditate-girl.jpg" alt="Meditate" class="aligncenter" width="620px">
<p>I will take a meditation class and practice meditating at least 20 minutes everyday for the month. Hopefully I won't fall asleep every time I meditate.</p>
<hr>
<p id="caption">My February Resolution by Harsh Fernandes</p>
</div>
<!--content-->
<div id="sidebar">
<img class="image" src="fourth-code-resources/images/chris-castiglione.jpg" alt="Chris">
<p>This blog was made by Harsh Fernades (I don't look like that)</p>
<h3>Follow Me</h3>
<ul>
<li>Twitter</li>
<li>Instagram</li>
<li>Facebook</li>
</ul>
<h3>Quote of the Day</h3>
<blockquote>
<p>"We are what we repeatedly do. Excellence, then, is not an act, but a habit."</p>- Aristotle</blockquote>
</div>
<!--sidebar-->
<div class="clear"></div>
<div id="footer">
Made with the help of One Month HTML by Chris Castglione
</div>
<!--footer-->
</div>
<!--container-->
</body>
</html>
strong text
I am learning to code through this website and for my first proper project, we had to build a static website which has to look as similar to the screenshot. I got everything right except for the margin on the right. I even tried using inspect element and it appears to be coming from my body but even after setting my body's margin to 0, nothing changed. Since this is for beginners, it shouldnt be that difficult but I am REALLY struggling with this for hours. Please help me.
This is what it is supposed to look like
This is what it looks like at 100% zoom
It does look pretty close but here are the main issues:
Margin: 0 is All around the body element and the .container class, and in terms of default that means everything is pushed to the left, there is not default centering.
With a static 100px margin and a float: left on your #content it does give a close approximation of what the image is, but again this is based on your screen size. If your screen were widened it would look incorrect from left to right.
SOLUTION: The simplest solution for things like content and containers, or simply body elements, is
{ margin-left: auto; margin-right: auto; }
As you did with the images.
If you want to do it in shorthand you can declare multiple margin attributes in one line, such as Top & bottom being 0 margin and left and right being auto would be
{ margin: 0 auto;}
Source for shorthand
https://developer.mozilla.org/en-US/docs/Web/CSS/margin
This will help you, change your style (body & #container) like this :
body {
background: url(/Users/harshfernandes/Desktop/Coding/fourth-code-resources/images/notebook.png); /* add a fallback color of #d6d6d6 */
color: #000000;
font-family: 'Lato', sans-serif;
font-size: 100%;
width: 100%;
overflow-x: hidden;
}
#container {
display: table;
margin: 0 auto;
}
I started off with some text over a background image for the home page on my website. I wanted to make the letters more legible so I added an opaque box using the class "transbox" and setting it's opacity. I'm not too concerned about the text being transparent, but now the navigation bar that I have set up sits behind the "transbox" and will not let me click the links when I scroll over the "transbox" since it is sitting over the navigation bar.
I have already tried setting the z-index appropriately and even went through changing the classes and css code to make it simply a transparent container with some text, however the problem persists and new issues arise regarding container/text placement.
All I want is the navbar to be over everything so it is not covered and unusable in any situation as the user scrolls through the page. I'm curious if this is a bug with opacity, if I am using the wrong type of class, or if it is something entirely different.
$(window).on('scroll', function(){
if($(window).scrollTop()){
$('nav').addClass('black');
$('header').addClass('black');
$('header .logo img').addClass('black');
$('header ul').addClass('black');
$('header a').addClass('black');
}
else
{
$('nav').removeClass('black');
$('header').removeClass('black');
$('header .logo img').removeClass('black');
$('header ul').removeClass('black');
$('header a').removeClass('black');
}
})
header{
background: #35424a;
color: #ffffff;
z-index: 999;
}
header.black{
z-index: 999;
}
header a{
color: #5ff5a3;
text-decoration: none;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
text-transform: uppercase;
padding: 5px 20px;
font-size: 16px;
transition: .5s;
}
header a.black{
color: #ffffff;
font-size: 14px;
}
header ul{
float: right;
padding: 68px 50px 0 10px;
display: flex;
transition: .5s;
}
header ul.black{
padding: 40px 10px 0 10px;
}
header li{
float: left;
display: inline-block;
box-sizing: border-box;
padding: 1px;
transition: .5s;
}
header nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
transition: .5s;
}
header nav.black{
background: rgba(0,0,0,.8);
color: #000000;
}
header .current a, header a:hover{
color: #ffffff;
background: #000000;
font-weight: bold;
border: 1px solid #ffffff;
transition: .5s;
}
header .logo img
{
width: 500px;
padding: 0px 50px;
height: auto;
float: left;
transition: .5s;
}
header .logo img.black
{
width: 300px;
padding: 0px 20px;
}
#showcase{
min-height: 1000px;
background: url(../img/showcaseimg.jpg) no-repeat 0 -200px;
background-size: cover;
background-position: center;
text-align: center;
color: #ffffff;
}
#showcase h1{
font-size: 55px;
color: #ffffff;
padding: 0px 20px;
}
#showcase p{
font-size: 20px;
color: #ffffff;
padding: 0px 20px 20px;
}
#showcase .transbox{
margin-top: 700px;
margin-bottom: 10px;
background-color: #000000;
opacity: 0.6;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="container">
<nav>
<div class="logo">
<img src="./img/creativecs_logo.png">
</div>
<ul>
<li class="current">HOME</li>
<li>SERVICES</li>
<li>PRODUCTS</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li>NEWS</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<div class="transbox">
<h1>Custom PC solutions for anyone and everyone.</h1>
<p>Designed by engineers. Tested by enthusiasts. Check out what CreativeCS has to offer you.</p>
</div>
</div>
</section>
It work fine for me.
That being said, for z-index to work you need your elements with z-index to be positionned (MDN).
header {
position:relative;
z-index: 999;}
#showcase {
position:relative;
z-index: 1;
}
You might need to read about the stacking context.
Here header and #showcase exist in the stacking context of the root element (html) so it will work fine. Other times you might want to create a stacking context that is not as high as the root element.
Everything seams to be fine, anchors do fire as expected, you can add this script to see wich element is selected..
var x = document.getElementsByTagName("*")
for(var i = 0; i< x.length; i++){
x[i].addEventListener("click", function(e){
alert(e.target.tagName)
})
}
What I Am Making
On my site, the navigation bar does not start at the top of the page, instead it is a little way down the page, under the header/banner. When the user scrolls down past the nav bar, I change it's position to fixed so that it now stays visible at the top of the page as they scroll through the rest of the content.
I want this to look really seamless, so, when the navbar becomes fixed, I add some padding to the main content to stop it from jumping up into the space where the navbar was. I'm doing all this in my javascript, using jQuery to add classes ands styles to particular elements.
The Problem
In Safari, my code is working perfectly! The problem I have is that on Chrome and Firefox it seems like I need to add more padding than I do on Safari. On Chrome and Firefox the content is still jumping up slightly after the navbar becomes fixed. Whilst trying different values, I discovered that on those browsers, I need exactly 20 extra padding to make the transition seamless, but then the content jumps up too far on Safari!
Why is this extra padding needed on some browsers but not Safari?
If anyone can help I would be truly grateful because this is really bugging me! I have no idea why this is behaving differently in different browsers.
Here is a code snippet. I've tried to minimise the amount of code needed to recreate the issue but the CSS is a bit verbose because I thought I'd better include it all in case there's something there that is causing the issue.
----- EDIT -----
OK I discovered that the element which is causing the problem is my .navbar-button which I didn't include in my original snippet. I have added it in now. This is the thing which is behaving differently in different browsers.
I had to add margin to this element because it was not positioning correctly in Chrome or Firefox without it, whereas in Safari it was positioned just fine.
This extra margin is what is causing the issue.
$(document).ready(function() {
var $navBar = $(".navbar");
$(window).scroll(handleScroll);
function handleScroll() {
fixNavbarToTopIfNecessary();
}
function fixNavbarToTopIfNecessary() {
var bannerHeight = $("#banner").outerHeight();
//When user scrolled past the initial position of the navbar
if ($(window).scrollTop() > bannerHeight) {
$navBar.addClass("navbar-fixed");
$("#content").css("padding-top", $navBar.outerHeight() + "px"); // So that the content doesn't jump underneath the fixed nav.
} else {
$navBar.removeClass("navbar-fixed");
$("#content").removeAttr("style");
}
}
});
* {
box-sizing: border-box;
}
html {
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-weight: normal;
color: #888;
-webkit-text-size-adjust: 100%;
/* Prevent font scaling in landscape while allowing user zoom */
}
body {
line-height: 1.5;
font-size: 14px;
}
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
p,
img {
margin: 0;
padding: 0;
font-weight: normal;
}
button {
border: none;
cursor: pointer;
}
.row::before,
.row::after {
display: table;
content: " ";
}
.row::after {
clear: both;
}
.row {
margin-left: -15px;
margin-right: -15px;
}
.column {
display: block;
float: left;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.s12 {
width: 100%;
}
p {
margin-top: 10px;
margin-bottom: 20px;
}
a {
text-decoration: none;
color: inherit;
}
section {
padding: 50px 0;
}
.container {
width: 970px;
}
#banner {
background-color: #794f29;
width: 100%;
height: 600px;
padding: 150px 0;
position: relative;
text-align: center;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.banner-intro {
width: 50%;
float: right;
right: 5%;
top: 50%;
margin: 0 auto;
position: relative;
transform: translateY(-50%);
}
.banner-intro-heading {
color: white;
font-size: 60px;
text-shadow: 0 0 5px #ffecb0;
margin-bottom: 10px;
}
.banner-intro-lead {
color: white;
font-size: 24px;
}
.btn {
background-color: #a16fff;
border: 1px solid #8748ff;
color: #fff;
display: inline-block;
border-radius: 5px;
padding: 15px 30px;
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
overflow: hidden;
transition: .3s;
cursor: pointer;
}
.btn:hover {
background-color: #a16fff;
color: white;
border-color: #8748ff;
}
.banner-intro-button {
margin-top: 30px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: -2px 3px 10px rgba(0, 0, 0, 0.3);
}
.navbar {
-webkit-font-smoothing: subpixel-antialiased;
/* this stopped the font weight from changing when the navbar is fixed */
width: 100%;
height: 60px;
background: rgba(255, 236, 176, 0.97);
line-height: 60px;
display: block;
position: relative;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
z-index: 99;
transform: translateZ(0);
/* hack to make sure the navbar is repainted when it's set to a fixed-navbar on iOS */
}
.navbar-fixed {
position: fixed;
top: 0;
}
.navbar-brand {
font-family: "Merienda", cursive;
display: inline-block;
padding: 0 15px;
font-size: 18px;
float: left;
}
.navbar-items {
float: right;
}
nav ul {
list-style: none;
text-align: center;
}
nav li {
display: block;
float: left;
}
nav a {
position: relative;
display: block;
font-size: 16px;
font-weight: 500;
color: #794f29;
transition: .3s;
padding: 0 25px;
}
.navbar-button {
background-color: #a16fff;
border-color: #8748ff;
padding: 8px 10px;
margin: 10px 15px;
line-height: normal;
box-shadow: -2px 3px 7px rgba(0, 0, 0, 0.2);
}
.featured {
text-align: center;
}
.featured-title {
font-size: 40px;
margin-bottom: 1.5rem;
color: #ccaa8c;
}
.featured-subtitle {
font-size: 22px;
margin-bottom: 1.5rem;
color: #666;
}
.featured .lead {
line-height: 2;
font-size: 16px;
margin-bottom: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<section id="banner">
<div class="banner-intro">
<h1 class="banner-intro-heading">Grand Title!</h1>
<p class="banner-intro-lead">Lorem ipsum lorum ipsum sausage rat cake mammoth hair.</p>
<a class="btn banner-intro-button" href="#">Call to Action</a>
</div>
</section>
<nav class="navbar"> <!-- This is what I add the navbar-fixed class to -->
<div class="container">
Brand
<div class="navbar-items">
<ul>
<li>Link1
</li>
<li>Link2
</li>
<li>Link3
</li>
<li>Link4
<li><a class="btn navbar-button" href="#">Button</a></li>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main id="content"> <!-- This is what I add the padding to -->
<div class="container">
<div class="row">
<div class="column s12">
<section class="featured">
<h2 class="featured-title">Featured Title</h2>
<h3 class="featured-subtitle">Featured Subtitle</h3>
<p class="lead">Lots of info about said feature that rambles on forever and forever.</p>
<p class="lead">Even more info blablablablalblablabla.</p>
</section>
</div>
<div class="column s12">
<section class="featured">
<h2 class="featured-title">Featured Title</h2>
<h3 class="featured-subtitle">Featured Subtitle</h3>
<p class="lead">Lots of info about said feature that rambles on forever and forever.</p>
<p class="lead">Even more info blablablablalblablabla.</p>
</section>
</div>
<div class="column s12">
<section class="featured">
<h2 class="featured-title">Featured Title</h2>
<h3 class="featured-subtitle">Featured Subtitle</h3>
<p class="lead">Lots of info about said feature that rambles on forever and forever.</p>
<p class="lead">Even more info blablablablalblablabla.</p>
</section>
</div>
<div class="column s12">
<section class="featured">
<h2 class="featured-title">Featured Title</h2>
<h3 class="featured-subtitle">Featured Subtitle</h3>
<p class="lead">Lots of info about said feature that rambles on forever and forever.</p>
<p class="lead">Even more info blablablablalblablabla.</p>
</section>
</div>
</div>
</div>
</main>
I found two solution for your problem (use each of them is enough).
Method 1) Change margin-top and margin-bottom of .navbar-button to 0 (to prevent vertical margin collapsing...) , and use vertical-align: middle; for center it vertically:
.navbar-button {
background-color: #a16fff;
border-color: #8748ff;
padding: 8px 10px;
margin: 0 15px; /* *** margin top & bottom are changed to zero! */
vertical-align: middle; /* *** this is new! */
line-height: normal;
box-shadow: -2px 3px 7px rgba(0, 0, 0, 0.2);
}
Method 2) remove display: inline-block from .btn class:
.btn {
background-color: #a16fff;
border: 1px solid #8748ff;
color: #fff;
/* display: inline-block; */ /* *** this is removed! */
...
}
it is obvious that if you don't want to change default styles of .btn, you can add display: block to your navbar button manually as an inline style (style="display: block;") or using a new css class (eg: .block) for it.
<li>
<a class="btn navbar-button" href="#" style="display: block;">Button</a>
</li>
I am having a sparkle effect in jquery but the sparkle is working on background is there anyway i can get those sparkle on image and not on background.
Here is my code:
(function () {
var sparkle = new Sparkle();
sparkle.init('.summs');
})();
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
a{background:transparent}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
img{border:0}
svg:not(:root){overflow:hidden}
code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}
b,strong,optgroup{font-weight:700}
pre,textarea{overflow:auto}
html {
height: 100%;
}
body {
color: #AAA;
background-color: #000;
line-height: 1.4;
margin: 50px;
}
h1 {
color: #FFF;
}
h2 {
padding: 10px 0;
border-bottom: 1px solid #444;
}
a {
color: inherit;
}
em {
font-family: monospace;
font-size: 16px;
font-style: normal;
background-color: #333;
border-radius: 3px;
padding: 3px 5px;
}
pre {
color: #FFF;
background-color: #444;
padding: 0 25px;
border-radius: 3px;
}
#wrapper {
width: 20%;
margin: auto;
border:red solid 1px
}
div.summs {
background: rgba(0, 0, 0, 0) url("https://custom.cvent.com/9BC2D0988F874B5C8C15E9D14B6E2F3B/pix/21abaeaeb5d94c73b6814e90cf55d240.jpg") no-repeat scroll center top;
height: 516px;
margin: 0 auto;
position: relative;
text-align: center;
top: -40px;
width: 1000px;
}
<script src="https://s3-us-west-1.amazonaws.com/creative-event/sparkle-effect/sparkle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="summs">
<div class="onslide2">
<h1 class="bold"><strong>Sparkling Beauty Sparkling Service</strong></h1>
<br>
<br>
<h1 class="l2">GALA DINNER<br>
Sparkling Dior Ambassadress</h1>
<h1 class="l3">26<sup>th</sup> May 2016<br>
JW Marriott Hotel, Macau</h1>
<h1 class="l4">Dress Code: Rose Gold and Champagne </h1>
<h2>Remember to bring your sparkling outfit.<br>
There will be a prize for best-dressed.</h2>
</div>
</div>
Fiddle
I am sorry I don't know how make it a link here. Request you to please copy the url and paste.
need help
I created this myself. Would be nice if you gave me credits somewhere if you use this. But hey, you do what you want.
https://jsfiddle.net/virginieLGB/mL6uf3xm/5/
Only thing you need to change is
mySparkle.init( $( ".summs" ) , 150 );
I guess you'll want to keep the element here, but you can change '150' with any number of stars you want.
Have fun
I am creating an application where i am using divs to show information and and using some jQuery to manipulate them.In my application i want to give box shadow to my div and trying to make a professional look.I have created box shadow to my div but it does not look that professional.I am using this link to prepare my application.
Refence UI
Now i want to create my personal information div exactly same as the Summary div in that application. I am also posting my code what i have done so far in a fiddle
#personalInformation{
font-size: 1em;
border-bottom: 3px solid #98AFC7;
border-top: 3px solid #98AFC7;
border-left: 3px solid #98AFC7;
border-right: 3px solid #98AFC7;
box-shadow: 10px 10px 5px;
line-height: 0;
width: 45%;
}
My sample code
Now can anyone help me to make my div exactly same as that application ?? or if not possible then how to make the box shadow in bottom only?? Somebody please help .
I've created exactly same box with background like that application. Hope it may help you.
html {
font-size: 10px;
}
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 100%;
font-weight: 400;
line-height: 1.42857143;
background-color: #f4f4f4;
color: #404040;
}
.content {
float: left;
width: 870px;
}
.content::after {
content: "";
clear: both;
display: table;
}
.box {
padding: 5px 15px;
background: #fff;
box-shadow: 0 1px 2px #c9c9c9;
-moz-box-shadow: 0 1px 2px #c9c9c9;
-webkit-box-shadow: 0 1px 2px #c9c9c9;
border-radius: 2px;
margin-bottom: 15px;
}
.box:hover {
box-shadow: 0 2px 2px #bababa;
-moz-box-shadow: 0 2px 2px #bababa;
-webkit-box-shadow: 0 2px 2px #bababa;
}
.box h5 {
font-size: 1.4rem;
margin-top: 10px;
margin-bottom: 10px;
line-height: 1.1;
}
.box p {
font-size: 1.4rem;
font-weight: 400;
line-height: 1.5;
margin: 0 0 10px;
}
<div class="content">
<div id="your-id" class="box">
<div class="box-content">
<h5>Caption</h5>
<p id="your-id">Not Mentioned</p>
<h5>Skills/Competencies</h5>
<p id="your-id">Layout ,CSS ,JavaScript ,jQuery ,HTML5 ,WordPress ,Web Design ,Web Development ,HTML ,PHP ,AJAX ,Cross-browser Compatibility ,CSS3 ,UI/UX ,Expert Frontend Developer ,Responsive Web Design ,Website Development ,Web 2.0 ,Dreamweaver ,Web Applications ,Image Manipulation ,Drupal ,MySQL ,Web Application Design ,Web Interface Design ,SVG ,Front-end Development </p>
<h5>Resumes</h5>
<p id="your-id">not mentioned</p>
</div>
</div><!-- .box -->
</div>
I have provided an example here using HAML and SCSS. Please hit the compiled button to retrieve the rendered content. Its a very simple illusion. The background shadow is a soft black color. Let me know if you any more questions
HAML:
#my-box Hello World!
SCSS:
$background: #3D6CAD;
$soft-black-shadow: rgba(0,0,0,0.29);
html, body { width: 100%; height: 100%; background: $background; }
#my-box {
float: none;
height: 50px;
width: 300px;
margin: 0 auto;
margin-top: 50px;
padding-top: 20px;
text-align: center;
background: white;
box-shadow: 0 2px 3px 1px $soft-black-shadow;
}
http://codepen.io/Stephn_R/pen/pJwdzB
And the edits applied to your JSFiddle