How to manipulate css code line by time? - javascript

My question is, how to manipulate this line in css by time with like a javascript code, for an other image? Like a slideshow!
If it's only possible in that way, in another code language.
.header { background: url(../img.jpg); }

You can use jQuery's css function to do it:
$(".header").css("background", "../img/bg2.jpg");

You have to add background property into style attribute. because you have no chance go to css file via js

Related

Avoid double quotes in jQuery inline css

Whenever i add inline css with jQuery it will also change the format of the inline css which is already there. For example if i have a background image without any quotes in the url and i will add something like
$('.element').css('padding', '10px');
it will re-format the complete inline css.
(also for example background-color: #ffffff; transfers to -> background-color: rgb(255,255,255);
Here is a little fiddle.
https://jsfiddle.net/chickberger/ppas2zrh/1/
Iam guessing that this is just the jQuery / javscript syntax that gets applied to the inline styles. If thats the case is there any chance to avoid this? My main problem are the double quotes on the background image url.
It's not jquery, it's the browser.
Replace the code with $('.style-me')[0].style.padding = '10px' and nothing will change.
It happens in mozilla, it doesn't happen in chrome. And you can't do anything about it. Except maybe doing attributes like
$('.style-me').attr('style',
$('.style-me').attr('style') + ';padding:10px'
)
which is bad idea.
That's generally how attribute modifications happen in jQuery. It rewrites the attribute on the DOM with this format.
You can use single quotes, or escaped quotes, in your inline background CSS rule
style="background-image: url('single/quotes/around/the/path');"

Getting rid of background properties

I'm scraping this news website: http://www.nu.nl/
If you open console and type:
$('*').css('background', 'none');
You will see all the background properties being removed, except for one which is the "blue" squire in the first article. When I trace the original CSS I see it has the !important declaration assigned to it. I don't know whether this is causing its persistence. What can I try to get rid of that blue background in terms of Jquery and Javascript or CSS?
Please note I don't want to target the element itself but rather keep using the all (*) selector or some Javascript equivalent.
jQuery doesn't recognize the !important attribute in css definitions. You just need a more specific hierarchical selector here. Simply make a new class, and then use addClass.
$('head').append('<style type="text/css">html #page .noBG{ background:none !important; }</style>');
Then just add that class to everything.
$('*').addClass('noBG');
Edit
Based on comments below, you could try
$('head').append('<style type="text/css">html body#noBG *{ background:none !important; }</style>');
Then add the ID to the body
$('body').prop('id', 'noBG');
Which is a pretty specific selector. Some rules may still pass this, and you'll have to experiment with different variations depending on the scenario.

can i add css with !important , only using jquery

hi i am using jquery
i want to add css color with important property to a label
i am currently trying it by
jQuery(this).css('color','green !important')
with out using a class
like
label_class
{
background-color:#f2f2f2 !important;
}
and using like
jQuery(this).addClass('label_class');
can i use only jquery to do this , please help
Yes its not that hard, but you should try avoid using !important all the time.
$("#tabs").css("cssText", "height: 650px !important;");
Heres a link to similar question How to include !important in jquery
Hope this helps :)
You should never need to do this. The !important flag indicates that the style should take precedence. With jQuery, you are applying the style inline to the element and therefore it already has the highest precedence.
Note that if you are using !important, you are probably doing something wrong. Consider restructuring your CSS selectors to ensure you don't need it.

Overwrite CSS Using JavaScript / jQuery Permanently

Is it possible to overwrite CSS file permanently using JavaScript / jQuery?
I want to overwrite just 1 or 2 lines though.
Let's say I have this CSS file:
div#box { width:100px; height:100px; }
then, if I apply this kind of JavaScript:
var sheet = document.createElement('style')
sheet.innerHTML = "div#box {width:200px;}";
document.body.appendChild(sheet);
the div only resized as long as the JavaScript is called (dynamically changed by JavaScript)
I want the CSS file would be overwritten like this
div#box {width:100px; height:100px; }
div#box {width:200px; } //CSS added
or more nicely,
div#box {width:200px; height:100px; } //CSS overwritten
What should I do?
Thx :D
To elaborate on what has been said (And mmmshuddup and calchen are correct):
Javascript alters files on the client side until the document is closed. The changes that scripts make are entirely temporary.
However, javascript could technically use ajax to access a perl/ruby/php/python/whatever script hanging out on the server which would take arguments (What the class would be, which element it would be added to) and apply the classes permanently to your documents, or otherwise edit your style documents.
Another solution would be creating and adding classes and then saving those classes as preferences for a user; you'd create a function which looked through an associative array of element id's and their classes that need to be added upon the page being loaded. I suppose you'd use either cookies or preferably a database for this, if you have users at all. I'm just throwing hypotheticals out there.
I'm pretty sure the server-side editing idea is your best option. It would probably be pretty safe to use regex to locate id's and replace them with the new style.
edit: Upon thinking about it, I realized your style finding and replacing function would have to be pretty sophisticated if you ever wanted to do replacements of styles that involved a lot of selectors. There is probably a more elegant solution, but it's not coming to me. I think this would be a serious headache eventually.
CSS cannot be permanently overwritten using only jQuery/JavaScript.
Try below
$(document).ready (function() {
$('div#box').css( {"border": "1px solid #7F9DB9", "width": "200px", "height": "22px"} );
});
Please do needful changes.
Use something like PHP. Otherwise you can modify the css with jQuery.
// for div#box {width:200px; height:100px; }
$('div#box').css({ width: '200px', height: '100px' });
JS can't do this alone, you need the use of a server side language such as PHP, i can make one for you in PHP if you'd like.
If you want to do it on a per page basis you can use a style tag with contenteditable attribute see: http://devgrow.com/html5-contenteditable-attribute/

Removing or altering CSS pseudo class in jQuery

A simple enough question, so briefly - is it possible to remove or alter in anyway a CSS pseudo class using jQuery? Or any other Javascript method for that matter
Specifically I want to get rid of :focus on inputs. I can't alter the CSS file directly in any way.
thanks for any help
Buster
I can't alter the CSS file directly in
any way.
Assuming you can only use JavaScript to do this, I can't think of anything better than:
$('head').append('<style>input:focus{background:#fff}</style>');
You will have to individually reset each property. font-weight:normal, color:#000 - whatever you need.
See: http://jsfiddle.net/jqpAu/
Without more specific detail it's hard to answer accurately, but if you want you can just override the :focus style:
// in the CSS file
input:focus {background-color: red;}
// in your page
input:focus {background-color: inherit;} // overrides with the parent background
Demo
See this answer: Setting CSS pseudo-class rules from JavaScript
I think you are looking for a way to add CSS dynamically. Example: http://jsfiddle.net/zkMCY/
Code:
var style = '\
<style type="text/css">\
a:hover{ color: #a55; }\
</style>';
$('body').append(style);
If you want to actually prevent the user from using your input, do that via your html:
<input disabled="disabled">
you can use $(selector).removeClass(className)

Categories