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>
Related
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>
I am looking for a fairly simple solution to show and hide lang="" specified DIV's (a switcher between the two).
This must not be too hard, but I am a beginner in Javascript, and I couldn't find any proper resources. Does anyone have a suggestion?
:lang(eng) {
display: block;
}
:lang(de) {
display: none;
}
button {
width:100px;
height: 50px;
background-color: blue;
}
button: active{
background-color: green;
}
#example :lang(eng){
width: 100vw;
text-align: center;
height: 50vh;
background-color: yellow;
}
#example :lang(de){
width: 100vw;
text-align: center;
height: 50vh;
background-color: red;
}
<button onclick="myFunction()">English</button>
<button onclick="myFunction()">German</button>
<div id="example" lang="eng">
<p>DIV with English text</p>
</div>
<div id="example" lang="de">
<p>DIV with German text</p>
</div>
You need to select the HTML Element and set the specific attribute and insert the text:
const texts = {
"de": 'deutscher text',
"en-us": 'english text'
}
function selectLanguage(lang) {
const element = document.getElementById('example')
element.setAttribute("lang", lang)
element.innerHTML = texts[lang]
console.log(document.getElementById('example'))
}
<button onclick="selectLanguage('de')">German</button>
<button onclick="selectLanguage('en-us')">English</button>
<div id="example">
<p>Text</p>
</div>
Note that I store the texts in a simple object here. The usual way to store texts which should be available in multiple languages is to make use of a database like mysql or MongoDb.
I would also not use stylesheets to implement the language switchig feature. I have not much experience with multi language platform development but imho the styles should not have an effect to the websites logic.
If you have got any questions feel free to ask.
Edit:
Generally you should not mix contents, logic and styles. You should always use the most practicle way to develop your website. If you intend to provide your content in multiple languages you should think about your architecture first. There are several different ways to achieve this kind of stuff. The internet is full of tutorials and guidelines :) Happy Coding!
I am new to JavaScript. Currently, I am working on a small toggle for my website.
The goal is to have three buttons that open up different sections with information. I have this working on my website. Now, what I want to achieve is to make other divs close when the others are opened up. Furthermore, I would like the first div to be open when the page is loaded, including an indicator (for example orange image) on the button. Can you please help me with this?
For some reason, the script works on my website, but not on the JSfiddle:
https://jsfiddle.net/q7evaLsn/1/
Current code:
$('.button1').click(function(){
$('.product').slideToggle('slow');
});
$('.button2').click(function(){
$('.lockedin').slideToggle('slow');
});
$('.button3').click(function(){
$('.developers').slideToggle('slow');
});
.button2
{
padding-top: 10px;
}
.button3
{
padding-top: 15px;
}
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/product-holder.png" class="button1" alt="Expand"/>
</h3>
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/lockedin-holder.png" class="button2" alt="Expand"/>
</h3>
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/developers-holder.png" class="button3" alt="Expand"/>
</h3>
<div class="product">
Testdiv1
</div>
<div class="lockedin">
Testdiv2
</div>
<div class="developers">
Testdiv3
</div>
Your help is greatly appreciated!
You can simply slide up everything before you start toggling.
For ex
$('.button3').click(function(){
$('.product').slideUp();
$('.lockedin').slideUp();
$('.developers').slideToggle('slow');
});
Your JSfiddle isn't working because you haven't included the jQuery library required for some of your functions. For future reference, jQuery is a popular javascript library which simplifies and extends some basic javascript functions, you can use both interchangeably however if you do want the extra features of jQuery then you'll have to include it like so in your HTML:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
As mentioned by #SURESH you'll likely want to slide the other areas up where you are toggling the target area:
$('.example-button').click(function(){
$('.section-to-hide-1').slideUp();
$('.section-to-hide-2').slideUp();
$('.section-to-toggle-1').slideToggle();
});
Just as further formatting advice, you have your images (that are acting as buttons) within header tags.
It's generally bad practice to use these header tags for anything
other than headings/titles
I'd recommend using A tags or even BUTTON tags to do the same job
I'd try not to use IMG tags as essentially text buttons, you will be able to style a button similarly like so:
<button class="button1">Products</button>
<style>
.button1 { text-align: center; padding: 10px; text-transform: uppercase: border-radius: 100%; border: 3px solid orange; background: white; color: #000; }
</style>
This will allow search engines/screen readers to read your button element, and you can make hover effects etc.
I'm working on Angular 2 now. In my template I'm using the following to show the data I get from the APIs
<div class="blocks">
<div router-active class="block" *ngFor="let item of items">
<div class="inblock">
<p class="title">{{ item.name }}:</p>
</div>
</div>
</div>
Everything is working fine but if one of the div height was higher than the others it would look something like the image below
I want to have a nice row with three divs only and after three you start a new block, I know how to do it normally but I can't figure out how to do it with Angular 2!
UPDATE : I don't want a fixed height because the content can be as long as the user wants! so adding a fixed height with CSS will not solve the issue
You will find a solution using css. Take this code:
.block {
float: left;
width: 150px;
margin: 10px;
border: 3px solid #73AD21;
}
.block:nth-child(3n+4){
border: 1px solid red;
clear: both;
}
The above code is using float to make the blocks inline. Using nth-child you can tell it to clear each 3rd block.
Why don't you create a 'css' associated to your template and pass it to styleUrls property. In that CSS you can defile a class and set the div properties whatever you like and pass that class name to the elements.
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