How to change css html { } attribute for a single page - javascript

First time posting here. I was wondering how to change the css for the html { } attribute of a single page. I am trying to make the background color for 2 pages different. If there is a better way to do it please let me know. Thanks!
I have done this:
html {
background-color: black;
}
for one page.
I want to do the same thing with a different color for another page (so that when you scroll out of bounds of the div it does not show a different color).

Every page must to take a different css external document:
<link rel="stylesheet" href="css/page1.css">
Then, you can change the element's properties:
/* 1st page */
body{
background-color: black;
/* background: rgb(0,0,0); **You can also use this property** */
}
/* 2nd page
body{
background-color: blue;
}
*/
Saludos!

This is one solution to your code. If you do not want the white part between two pages, just using position:absolute; in CSS.
Furthermore, your CSS code is not working because you forgot a "."
.page1{
height:100%;
background:red;
}
.page2{
height:100%;
background:green;
}
<body>
<div class="page1">
<p>
Your elements
</p>
</div>
<div class="page2">
<p>
Your elements
</p>
</div>
</body>

Related

Passing a parameter to a CSS class from web page

Problem statement is, I have 2-3 web pages; and I want to have different body colors on this pages but keeping the class name unique to "myBody".
I looked for many blogs and authors but did not find any suitable answer to achieve this from a traditional CSS approaches.
Please suggest if it is possible to have a single CSS class accepting a parameter from a web page which will decide what body color should be applied using the same CSS with different parameters"
.myBody(#color)
{
background-color: #color;
font-size: 11px;
color: Black;
border: 1px solid;
}
The answer may be tricky for some folks but I really want to see if I can achieve this using CSS only.
You should split them up into different classes like this.
.myBody
{
font-size: 11px;
color: Black;
border: 1px solid;
}
.background_red
{
background: red;
}
.background_green
{
background: green;
}
Then use them like this
<div class="mybody background_red"></div>
<div class="mybody background_green"></div>
You also have the ability to overwrite css like this:
.myBody
{
background:red;
}
.overwrite_background
{
background:green;
}
<div class="myBody"></div>
<div class="myBody overwrite_background"></div>
The first div would have a background of red where the second one would have a background of green.
Here is another post you should look at. This reference a couple of options you have to handle this situation. How to pass parameters to css classes
Another option is to use Sass. Sass allows you to use a programming language to create your css. This is wonderful for changing things over a mass on the fly. If you use the same color in multiple places, or if you want to have a different configuration for each site and still carry the same css just different colors.
No, you can't do this with one class definition. There is no concept of parameters and function calls in CSS.
On the other hand, you can just about do this with minimal code duplication, but it's probably a bad idea. You say that you want to assume that there is only one classname in the class attribute. This is pretty silly, because it totally misunderstands what the class attribute is for, but we'll roll with it anyway.
We'll start by defining our classes with just the background colour:
.mybody-red {
background-color: red;
}
.mybody-blue {
background-color: blue;
}
.mybody-green {
background-color: green;
}
Then we'll define code for all the mybody-* classes with the attribute starts-with selector:
div[class^="mybody-"] {
font-size: 11px;
color: Black;
border: 1px solid;
}
This is, however, a silly idea, not least because it means that you are not separating markup from styling, and for myriad other reasons.
Maybe you can give a unique id in each page and keep the same class.What i mean is
file1.html
<html>
<body id="file1">
<div class"myBody"></div>
</body>
</html>
file2.html
<html>
<body id="file2">
<div class"myBody"></div>
</body>
</html>
file3.html
<html>
<body id="file3">
<div class"myBody"></div>
</body>
</html>
You have 3 different files.Each file has a body tag with a unique id and a div tag with the class you want
Now the css part:
.myBody
{
font-size: 11px;
color: Black;
border: 1px solid;
}/*common class for all files*/
#file1 .myBody{
background:green;
}
#file2 .myBody{
background:red;
}
#file3 .myBody{
background:grey;
}
This works fine if you have 2-3 pages.If you have more it will be a hard code to maintain
As an alternate option, since you intend to pass the color via the page, why not just set the style as an inline property using PHP? While it's better to put most of your css in a separate file, sometimes it just makes sense to travel down the hierarchy of acceptable CSS placements.
I'm not sure where you're getting the color from specifically, but there's nothing wrong with setting an inline style if that's the most efficient way to do it.
Example:
<?php $bodyColor = $_POST['bodyColor']; ?>
<div class="myBody" style="background-color:<?php echo $bodyColor; ?>">
YOUR TEXT
</div>

Including CSS, jQuery, and HTML all into one .html

I've been looking around, but I can't seem to find exactly what I'm looking for. I want to include both my jQuery and CSS into one .html page, but I cant seem to get the jQuery working. I'm not new to coding, but I am new to jQuery. Here's what I have so far:
http://jsfiddle.net/b63nLkfa/1/
<div class=aboutMe>aboutMe</div>
<style>
.bodyAmendment{
width:100px;
}
.aboutMe{
background-color: #CCCCCC;
height:250px;
width:200px;
color: white;
font-size:32px;
}
</style>
<script src="jquery-1.11.2.js"></script>
<script>
$(document).ready(function() {
$('.aboutMe').click(function() {
$(this).toggleClass('bodyAmendment');
});
});
</script>
Obviously, I want to toggle classes when clicked (simply change the width of the div).
You didn't select jquery from jsfiddle sidebar. And remove
<script src="jquery-1.11.2.js"></script>
or use
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
Here is the new link.
Both aboutMe and bodyAmendment have a width defined. toggleClass() appends the class, so you wind up with <div class="aboutMe bodyAmendment">. width: 200px "wins" so it appears the code is doing nothing. Try
.bodyAmendment{
width: 100px !important;
}
or some other combo so you're not defining the same property in both classes.
http://jsfiddle.net/b63nLkfa/1/
.aboutMe{
background-color: #CCCCCC;
height:250px;
width:200px;
color: white;
font-size:32px;
}
.bodyAmendment{
width:100px;
}
Your problem is about css priorities. Let's check my fiddle and use tool like firebug. Always.
You neglected to add in jQuery when you created your fiddle. This means your code was not firing. Also, when working with CSS, the last rule that is added takes precedence, regardless of when the class was added.
.test2 {
width: 100px;
background-color: #F00;
}
.test1 {
width: 200px;
background-color: #F00;
}
HTML
<div class="test1">This is 200px</div>
<div class="test1 test2">This is also 200px!</div>
<div class="test2">This is 100px</div>
The CSS "cascades" down the document, each rule that comes later taking precedence over the last.
http://jsfiddle.net/b63nLkfa/21/
I normally use .php, and use an
<? include "includes/js.php"; ?>
which in this one file I have all my script calls. Make it alot easier to update an entire site from one file.
try <div class="aboutMe">aboutMe</div>
sometimes the " " are important

Creating a parallax-like effect using an image that isn't the background

I'm trying to create a scrolling effect that preferably doesn't use javascript (CSS only) but I understand if it's not possible, just exploring options.
My page looks like this:
When scrolling down I want the background image to have a parallax-like effect, staying static while the body's background and frame move around it.
Here's a sample of code to work with:
http://jsfiddle.net/J8fFa/7/
HTML
<body>
<div class="border-bg">
<div class="image-bg"></div>
</div>
<div class="border-bg">
<div class="spacer">
</div>
</div>
</body>
CSS
body{
background-color:#aaa;
}
.border-bg{
width:80%;
margin:30px auto;
background-color:#fff;
padding:40px;
}
.image-bg{
background:url('http://i.imgur.com/7cM1oL6.jpg');
height:400px;
background-size:cover;
}
.spacer{
height:900px;
}
I can see how this would work if the image was the background for the body, but as this is sitting on top of the body is there any way I can manipulate it to have a similar visual effect?
change your .image-bg class to:
.image-bg{
background:url('http://i.imgur.com/7cM1oL6.jpg') fixed;
height:400px;
background-size:cover;
}
this will prevent the image from scrolling
updated fiddle: http://jsfiddle.net/J8fFa/9/

How can this effect (line breaks) be achieved with CSS and/or Javascript

Right now i am using multiple heading tags and a css class to achieve the effect shown in the image below, Is there any way to achieve this by using just a single heading/line and css?
Current Code :
<h2 class="heading">Hi guys, How can i achieve this effect using just a single</h2>
<div class="clearfix"></div>
<h2 class="heading">line of text and css. Right now i am using</h2>
<h2 class="heading">multiple <h2> tags and a css class to achieve this effect.</h2>
<h2 class="heading">Is it possible to achieve this only with css or do i have to use Javascript as well?</h2>
Expected Code
<h2 class="heading">Hi guys, How can i achieve this effect using just a single line of text and css. Right now i am using multiple <h2> tags and a css class to achieve this effect. Is it possible to achieve this only with css or do i have to use Javascript as well?</h2>
The main problem with this according to me is, I cannot make it responsive without decreasing font size, padding, etc which i don't want.
And even if i make it responsive i cannot add line breaks wherever i want without using other tags or javascript.
How did you guys get around this?
one, of the tons of solutions
<h2 class="heading">
<span>Hi guys, How can i achieve this effect using just a single</span>
<span>line of text and css. Right now i am using</span>
<span>multiple <h2> tags and a css class to achieve this effect.</span>
<span>Is it possible to achieve this only with css or do i have to use Javascript as well?</span>
<span class="clear"></span>
</h2>
with this styles in <head>
<style type="text/css">
h2.heading {
background:#0f0;
padding:2px;
float:left;
}
h2.heading span {
clear:left;
display:block;
float:left;
background:#fff;
padding:1px;
margin:1px;
}
h2.heading .clear {
clear:left;
margin:0px;
padding:0px;
float:none;
}
</style>
EDIT: second variant
<style type="text/css">
h2.heading {
background:#0f0;
padding:2px;
display:inline-block;
font-size:20px;
}
h2.heading span {
background:#fff;
padding:1px;
margin:1px;
line-height:30px;
}
</style>
with this markup
<div style="width:300px;">
<h2 class="heading">
<span>Hi guys, How can i achieve this effect using just a single line of text and css. Right now i am using multiple <h2> tags and a css class to achieve this effect. Is it possible to achieve this only with css or do i have to use Javascript as well?</span>
</h2>
</div>
No need of CSS or JavaScript, just use the <br> tag.
<h2 class="heading">
Hi guys, How can i achieve this effect using just a single
<br>
line of text and css. Right now i am using
<br>
multiple <h2> tags and a css class to achieve this effect.
<br>
Is it possible to achieve this only with css or do i have to use Javascript as well?
</h2>
Or did I misunderstand the question?
I kind of solved the problem. Take a look here http://jsfiddle.net/7nafE/ (remove the div to see the responsivness)
HTML:
<span class="heading">Hi guys, How can i achieve this effect using just a single line of text and css. Right now i am using multiple <h2> tags and a css class to achieve this effect. Is it possible to achieve this only with css or do i have to use Javascript as well?</h2>
Same as your HTML except that I used a span instead of h2
And css:
.heading {
background: white;
line-height:2em;
padding: 0.3em;;
}
body { /*not really neccessary to show, but anyway*/
background: limegreen;
font-family: verdana;
color: #999999}
Problem with that is that there are no paddings to the left and right of the text.
And also. you can't get your line breaks where you want. It is all up to which container you place it in. It is, if you asked me, just good because that makes it responsive in a way a <br /> or something like that wouldn't do.

How do I place a background image above body's background image?

I have set a background image in body and in .wrap. My question is how do I place a background above all them? It is done with CSS however I didn't figure it yet.
I place all my code in http://jsfiddle.net/7sdnU/
Thank you.
<body>
<div class="wrap">
</div>
</body>
With z-index:
http://jsfiddle.net/7sdnU/2/
The html element can also be styled, so you can shift the background layers back one element. Something like this:
html {
background:url(bottom-background.png);
}
body {
background:url(middle-background.png);
}
wrap {
background:url(top-background.png);
}
/* Make sure everything takes up the whole viewport */
html, body, .wrap{
height:100%;
width:100%;
padding:0;
margin:0;
}
Demo: http://jsfiddle.net/7sdnU/15/
You could also just add another wrapper div:
<body>
<div class="wrap">
<div class="inner">
</div>
</div>
</body>
Then apply the "top" background to .inner
However, CSS3 allows multiple backgrounds, so you may want to have a look at that - that's best solution if you can use it, but it's not fully supported.

Categories