Use classList.toggle on external CSS - javascript

So I've been messing around with JS, and I wanted to make a dark theme toggle button as seen here.
However, that tutorial only shows how to make it work with the <style> tag in HTML, not using an external CSS file.
How could I make it toggle the class .d_theme from an external CSS file?

No difference between external and internal CSS when you use JS to toggle
document.getElementById("chk").addEventListener("change",function() {
document.getElementById("x").classList.toggle("mystyle",this.checked)
})
/* This can be in an external file */
.mystyle {
width: 100%;
padding: 25px;
background-color: coral;
color: white;
font-size: 25px;
box-sizing: border-box;
}
<label><input type="checkbox" id="chk">Change theme</label>
<div id="x">Here is some text</div>

Related

Replacing static background image with simple j Query slideshow

I'm busy building a website and have a banner in it. The banner consists out of a static background image with static text overlay.
Now I want to keep the banner with the text overlay, but replace the static background image with a simple slideshow. The images should be replaced every 3 seconds. It should be a continuous loop, triggered on page load event. This function should utilize jQuery.
This is the html code for the banner as it is at the moment:
<!--BANNER HTML-->
<div class="banner">
<div class="banner-text">
<h1>LONG LAYOVER?</h1>
<h1>Is Amsterdam Schiphol your transfer hub?</h1>
<h4>Make the most of your layover by doing some sightseeing!<br>Tailored according to the length of your layover</h4>
</div>
</div>
This is the CSS:
.banner h1, .banner h1, .banner h4 {
margin: 0;
text-shadow: 2px 2px 6px #000;
text-align: center;
}
.banner {
color: white;
background: url(images/bannerimage.png) top left/cover no-repeat;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
Does anybody have a smart solution to my problem?
The simpliest answer comes to my mind is defining functions and call them in timeout functions as shown in the DEMO here
You can also use togglaClass instead of .css() function. I would prefer toggleClass but just did this was is quicker for me.

Not sure how to specify a style from a copied HTML5, CSS, JS

I have been slowly pulling apart an HTML5 template and have copy pasted a parallax section below several times on the same page As I have copied this 3 times for the parallax effect I also have the same background image as defined in the main.css
/* ==========================================================================
Counter Section Style
========================================================================== */
.counters {
background: url(../img/bg1.jpg) fixed;
position: relative;
}
.counters .facts-item {
text-align: center;
color: #fff;
}
.counters .facts-item .icon {
margin-bottom: 20px;
}
.counters .facts-item .icon i {
font-size: 50px;
color: #fff;
}
.counters .facts-item .fact-count h3 {
font-size: 35px;
color: #fff;
margin-bottom: 15px;
}
.counters .facts-item .fact-count h4 {
font-size: 20px;
color: #fff;
<div class="counters section" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 col-lg-3">
<div class="item-boxes wow fadeInDown" data-wow-delay="0.2s">
<!-- <div class="icon">
<i class="lnr lnr-pencil"></i>
</div> -->
<a class="nav-link" href="#video-area">
<h4>SaaS Assurance</h4></a>
<p></p>
</div>
</div>
The problem I have is that even though I have copied them, I would still like them to be their own sections with different backgrounds and with my limited experience on Web Dev I am not sure how class .counters from CSS which is defining the image I want to change is being picked up by the code which says counter section
Thanks all
In CSS, Classes can be used more than once, so if you copy the parallax section three times, then there should be three parallax section with the same background as declared by .counters which is used by every of your parallax section.
To make sure that every of those 3 parallax section won't use the same background, try to use ID instead as ID's can be only used once and must have a unique name.
When an ID and classes is used together, the ID attributes should override any declarations made by any classes used in the element. In this case, you can give an ID that contain an individual background property for every of your parallax section ( something like #parallax-section1, 2, and more ), so .counters's background declaration will override.
Further reading :
CSS Selectors by MDN Web Docs.
Override Class Declarations by Styling ID Attributes by FreeCodeCamp.
Note: When copy pasting an HTML element, make sure you do select from the starting bracket till the closing ones.
thanks for all the responses. I found the issue that the class .counters was actually calling the image from class counters section from the code above, it must have just been ignoring the space and the section confused me :)

set style for above IE8 only

I have one ASP.NET file upload control.Giving custom style to Browse button of file upload control I am write the below code:
label.choose:before {
background: #f07222 none repeat scroll 0 0;
border: 0 none;
border-radius: 5px;
color: #fff;
cursor: pointer;
font-weight: bold;
padding: 4.5px 12px;
text-transform: uppercase;
content: 'Browse';
position: absolute;
-webkit-margin-before: -2px;
-webkit-padding-start: 19px;
-webkit-padding-end: 19px;
}
<label class="choose">
<asp:FileUpload ID="FileUpload_DataFile" runat="server" />
</label>
It's work fine in FireFox and Chrome.But in IE browse button display right side of input text.Where in FF and Chrome it's display at left side.So my code is not working in IE.
If I add
margin-left:141px;
only for IE than works but How to add this property only for IE browsers?
I have IE11.And I want to do this for above IE8.When I R&D about that I found conditional style for IE but it's not work in above IE9.
Is it possible to apply custom style only File upload button ?If yes than please give me code example for this?
Any solution for add style only for IE?
Or any alternative way to do this?
I got answer for my question!!!
Only write following code for set css style for IE.
_:-ms-input-placeholder, :root .choose:before {
margin-left: 141px;
}
And This is working fine for IE11..!!

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

Categories