I have a div tag as
<div class="one two three">foo<div>
<div class="one two four">bar</div>
i am setting the css by using javascript,I can set styles as
.one.two.three{color:red;}
.one.two.four{color:blue;}
But can any one tell me how can i use $(.class).css({"color":"blue"}); for combination of class
Make sure you have loaded jQuery, as the $(selector).css(...) function you say you'd like to use is jQuery-specific.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Set the style – making sure to wait until the DOM is ready before you try manipulating the styles:
<script type="text/javascript">
$(document).ready(function() {
$(".one.two.four").css({"color":"blue"});
});
</script>
You can read all about everything I've described in the jQuery Getting Started guide.
Working demo: http://jsfiddle.net/4b2n97hq/
If something isn't working, open your browser's console and look for error messages that will help work out the problem.
same as with css selector:
$('.one.two.three').css({"color":"blue"});
will select all elements that have all 3 classes.
You can also select just by the classes they have in common:
$('.one.two').css({"color":"blue"});
check this fiddle.
Related
I have a website where each section displays as a full screen panel.
I would like to style all the other elements on the page according to what panel is displaying.
For example, if the panel with the class .style-reality-green-bg is active, I would like to style the navigation and other items to compliment the green.
Currently when you scroll, the full screen panel has a constant class called .onepage-section. When you scroll between panels, a second class is added depending on which panel is currently on screen.
This is handled by the theme, but I set the panel classes
At the moment I have a few sections which have classes such as...
.style-reality-green-bg
.style-rebel-red-bg
.style-rethink-blue-bg
I can't style all the elements I need to because they are not children of these panels so I was trying to find a way to add the same class to the body when each panel was active. So - if .onepage-section has a class of .style-reality-green-bg add the class .style-reality-green-bg to the body as well.
I have done some digging but I can mostly only find examples for 'click' actions
My latest attempt is
if ($('.onepage-section').hasClass('style-reality-green-bg')) {
$(this)body().addClass('style-reality-green-bg');
}
But it just returns an error saying
$ is not a function
****** EDIT
To clarify
What I am trying to achieve is...
If the full screen container has a class of
.onepage-section
AND a class of
.style-reality-green-bg
add
.style-reality-green-bg
to the body, and so on
I'm not sure if that was clear
The reference to body seems malformed, the code should be
if ($('.onepage-section').hasClass('style-reality-green-bg')) {
$('body').addClass('style-reality-green-bg');
}
if $ is still undefined, do you have jQuery included? https://jquery.com/
Your error means that you dont include the external Jquery Library. You can use for example a cdn to include jquery. Add this line above your closing body tag. Good would be to inlcude jquery before your Jquery command is calling.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
It looks like you're trying to use jQuery but haven't imported the library. For that, see https://jquery.com/download/
Additionally, in your code snippet you should select the body with $('body').
Alternatively, if you want to use vanilla JavaScript, you can use the following snippet:
if (document.querySelector('.onepage-section').classList.contains('style-reality-green-bg')) {
document.body.classList.add('style-reality-green-bg');
}
For information on classList, see https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
$(this)body() doesn't exists. Better write this instead:
if ($('.onepage-section').hasClass('style-reality-green-bg')) {
$('body').addClass('style-reality-green-bg');
}
And rememer to include jquery library.
I am trying to animate a color change (font) with jQuery UI when clicking the element.
I included the files of jQuery UI as descripted on their website.
<script type='text/javascript'>
$(document).ready(function() {
$('.benefits').click(function() {
$(this).animate({color:'#b22425'}, 200);
});
});
</script>
It doesn't work. Console says:
Error in parsing value for 'color'. Declaration dropped.
When I'm adding an animate width change, this works fine but the color error stays.
What am I doing wrong?
Thanks for the help :-)
EDIT
I'm figuring out what's the problem:
I'm include the navigation and the footer with PHP:
<?php
include('navigation.php');
?>
When I delete this block everything works fine. But when I'm including Navigation and Footer with PHP the parsing error occurs.
Has anybody a solution?
EDIT 2
The Navigation and Footer Documents were "Full-Document", this means they had their own html, head, style, body ... tags. I included this documents in the body-tag of my main-document and so there were 3 complete html-documents in one.
After deleting the unnecessary tags from the navigation and footer documents everything works fine.
I would have seen this earlier -.-'
Thanks anyway for the comments and answers :-)
Here is a simple way of doing it
I created a simple html only
I downloaded the jquery colors JQUERY COLORS
and added it to the html file include the jquery library
so it would be loaded like this
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.color.js"></script>
Here is a simple DEMO CREATED
Hope it helps.!
You cannot use animate to animate colors without jQuery UI.
All animated properties should be
animated to a single numeric value,
except as noted below; most properties
that are non-numeric cannot be
animated using basic jQuery
functionality. (For example, width,
height, or left can be animated but
background-color cannot be, unless the jQuery.Color plugin is used.)
and
The jQuery UI project extends the
.animate() method by allowing some
non-numeric styles such as colors to
be animated. The project also includes
mechanisms for specifying animations
through CSS classes rather than
individual attributes.
source: http://api.jquery.com/animate/
I'm trying to find a way for modify CSS while HTML is running, so far I find that is possible just with a little script like this next...
$("button").click(function(){
$("p").css("color","red");
});
As I can concern this is an effective way to modify the local CSS stylesheet refered to our HTML while webpage is running (i.e. pushing a div button).
What I'm trying to do is modify an specific .class from CSS stylesheet of an jQuery plugin for replacing the standard right-click context menu.
I didn't found any way in JS to call an specific stylesheet for modify any .class or #id
So my HTML had the following definitions:
<script src="jquery.contextmenu.js"></script>
<link rel="stylesheet" href="jquery.contextmenu.css">
<link rel="stylesheet" href="localstyle.css">
But when I try to update custom jQuery CSS with a script like this
$('#red').click(function(){
$('.contextMenuPlugin').css({'background-color': 'white'});
.contextMenuPlugin (native in jquery.contextmenu.css) isn't recognized, that script only work with a .class or a #id from my own stylesheet (localstyle.css).
I try things like using my local CSS embedded in HTML, and referencing jQuery CSS with an id but still nothing change. So there's the link of Github repo from jQuery plugin:
https://github.com/joewalnes/jquery-simple-context-menu
I try to make a live but JSfiddle dosn't work at all with this proyect, so if it helps or anyone want to check it, there's an pastebin of issue:
http://pastebin.com/u/27GRiS (4 files)
I hope someone help me clarify this, thanks in advance,
Federico.
The problem is that you think that
$('.contextMenuPlugin').css({'background-color': 'white'});
creates a stylesheet with
.contextMenuPlugin { background-color: white }
But it's not like this.
$('.contextMenuPlugin') gets all elements with class contextMenuPlugin in the moment you use it, and then, .css({'background-color': 'white'}) modifies the inline style of each element.
That means, if you create new elements with class contextMenuPlugin after that code, they won't be affected.
Then, you can:
Make sure that your target element exists when you use the code
Create a stylesheet with the desired CSS
Some time ago, I created a function which adds desired rules to an stylesheet, and allows you to reference and change/delete them. You can see it in this answer.
You should rethink your solution. Instead, add an additional class to your stylesheet that has the CSS changes you want.
Then, on clicking the button you can call addClass to add it to the appropriate elements.
Take your <script> code out of the <head> and put it at the end of the <body>.
Also you don't need this:
$(function() { ... })
if you already have this:
$(document).ready(function() { ... })
In other words, remove line 29 and line 27 (the $(function() { and });) from this file
I just started using bootstrap for my site. I love the look and I want to make some changes to a ton of different blog post to include the bootstrap style. I don't want go through hundreds of post to change the div's class element. Can I do something like this:
<div class="important_note">
this is a old note that I want to use bootstrap styling on.
</div>
css:
<style>
.important_note{
mimick(.alert)
}
</style>
alert is a bootstrap styling.
I apologize if this is a simple question, but web dev isn't much my thing. I also couldn't find any similar questions. Thanks for your help!
with css you can do the following:
.important_note, .alert{
//styling
}
this will apply the same styling to important_note and alert classes
Without "upgrading" your CSS, if it's just about adding a class to each affected element, you can use a small script:
[].forEach.call(document.getElementsByClassName('important_note'), function(node) {
node.classList.add('alert');
});
jQuery equivalent:
$('.important_note').each(function() {
$(this).addClass('alert');
}
I have a module on my website that loads quite strangely, so I want to hide the div while the page loads, then reveal it on document ready. The following (simplified) code works just fine:
<div class="slideshow" style="display:none;">
This div should be hidden during load
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').show();
});
</script>
This works as intended. But what happens to users with Javascript disabled? Will the div remain hidden to them? How can I make sure all users will see the widget?
A quite common way is, to add a class .nojs to your <body> or <html> element and remove it via Javascript e.g. onload. Like this you can simple handle the two different states via CSS:
.slideshow {
display: none;
}
html.nojs .slideshow {
display: block;
}
Might want to try http://www.modernizr.com/ in this context.
You should remove the display:none style from the div and explicitly hide it in your document.ready function. That way, without javascript it will be visible from the start.
Personally, I prefer to use CSS to my advantage for such things. I add this line of script just inside my template HTML body tag.
<script type="text/javascript">document.body.className = "JS";</script>
Then, for the scenario you describe, I would use an additional CSS class on the div, like so.
<div class="slideshow initially-hidden">
This div should be hidden during load
</div>
With a matching style accounting for the class added via JavaScript in the template.
body.JS .initially-hidden {
display: none;
}
Your elements with a class of "initially-hidden" will now only be invisible if JavaScript is enabled. If it is disabled, they will be visible.
<div class="slideshow">
This div should be hidden during load
</div>
<script type="text/javascript">
$('.slideshow').hide();
$(document).ready(function() {
$('.slideshow').show();
});
</script>
If they have javascript disabled, it won't be shown... You can make sure they all see it by not hiding it in the first place.
But what happens to users with Javascript disabled? Will the div remain hidden to them?
Since the code you have to show the div cannot run, yes it will remain hidden.
How can I make sure all users will see the widget?
Make use of <noscript> to render the div as hidden when Javascript is not enabled, or load the div as visible and hide it with Javascript some point prior to the full page being loaded.