Replacing string within page with jQuery/javascript - javascript

I'm trying to replace a string within a tag in my html page at specific position. I have to do it often and match exactly specific string. For example, if I have:
<style id="myStyle">
h1 {
background-color: red;
}
h2 {
background-color: red;
}
</style>
I have to replace h2 background-color but not h1. Do I have to rewrite every time text within style tag? Or there is some better solution that splitting, recombining the entire string and then replacing tag's content(could be very big).
JavaScript replace function is not good, it doesn't replace at specific position.

Using jQuery you can change the style of all the h1 elements currently in the DOM like so:
$('h1').css({
'background-color': 'red'
});
You cannot actually alter what is within the style tags. But you can alter the styles of elements on the page using javascript/jQuery. The above code illustrates this

You can do so with jQuery easily
$('h1').css("cssText",
"background-color: green; other-css-properties;" );
If you really want to be specific you could give an id or a class to whatever you want to change and do something like
$("#given-id").css(...) for ids and $(".given-class").css(...) for classes

Give the h2 an id of "h2" and then have whatever event you want that triggers the change execute the following line.
document.getElementsById("h2")[0].setAttribute("style","color: red; background-color: gray;");

Related

How to dynamically change css values (like color in whole app) etc

I have one question...
If you want conditional styling: you must use ng-class or ng-style construction.
But...
For example: I'm an admin, and I want to change color of my application with custom color from colorpicker. How can I change some code in css?
For example I have this line in style.css:
body{
background: #ffffff;
}
(also all tags like a, h1 etc implement some color)
and in controller I change this #ffffff to #000000.
What is the best way to change this color in css, without using ng-class or ng-style on each tag in each controller?
The best way is generate a file like color.css with all css rules with color, background-color, border-color etc. overridden. But angularjs will not be enough.
color-default.css
body {
background: #fff;
}
color.css
body {
background: #f00;
}
Full JS way
Add class on every element you want to override.
Create class for every properties like so:
.skin-color { color: {{color}}; }
.skin-background-color { background-color: {{color}}; }
.skin-border-color { border-color: {{color}}; }
etc..
Apply class on your html where you want:
<h1 class="skin-color">My title</h1>
<p>Hello I'm online!</p>
<p class="skin-background-color">No difference!</p>
<p>I'm link</p>
You can save the color variable in localStorage for example.
Démo: http://codepen.io/anon/pen/jPrabY
You could write the CSS rule in JavaScript and add it to a stylesheet dynamically. A couple of good articles on how to do that are here and here.
var myColor = '#FF00FF';
var stylesheet = /* get stylesheet element */;
stylesheet.insertRule('.dynamic-color { background-color:"' + myColor +'";}',0);
Of course, in a pure Angular way, you would create a directive that wraps the DOM/stylesheet interaction.
The easiest way I can think about is, for example, clicking on myBox changes its background-color.
html:
<div class="myBox" ng-click="changeBackgroundColor()"></div>
js:
$scope.changeBackgroundColor = function(){
angular.element('.myBox').css('background-color', '#000');
}
css:
.myBox{background-color: #fff;}
Hope I've been helpfull.
Another alternative is SASS or LESS and deal with colors using variable...

Render Background based on Tumblr tag

I want to know is it possible to render backgrounds based on tags in Tumblr?
What I mean is, I post about general life and about a Book Series I like, I want it to be that when I post a quote about life, the background colour is black and when I post a quote about the book, the background colour is blue.
Is this possible and if so, how?
You can add a custom attribute or class to the element you want to change his background with jQuery with something like this:
$(document).ready(function(){
var tag = $('select the element where your tag is').text();
/*If there are more than one tag you'll have to work with
the string to select //only the one you want, maybe with
a switch if you have a limited number of options*/
$('body').addClass(tag);
})
Then, with css you can change it with a selector like this:
body.tag{
background: #yourcolor;
}
Add to your posts the class {TagsAsClasses}. Then tag all life posts with "life" and book posts with "book".
Then you can style like this:
.life { background-color: black; }
.book { background-color: blue; }

Append a div inside a div and load the js file

I'm trying to append a div inside a div and load a JS inside it. I actually want to do what this link is doing, but here the div is already predefined and on top of that JS and CSS files are getting applied to that div, but I need to append a div ad then act it as an odometer. How can I do it?
So here is what I'm trying.
<div id="abc" class="odometer">13</div>
$("#abc").append("<div id = 'odometer' class = 'odometer'><script src='http://github.hubspot.com/odometer/odometer.js'></script> <link rel='stylesheet' href='http://github.hubspot.com/odometer/themes/odometer-theme-car.css' />")
abc.innerHTML = 222456.89;
I'm not getting the required o/p. How can I do that?
The following is written in documentation :
How To Use.
Add the js and a theme file to your page:
Any element with class name "odometer" will automatically be made into an Odometer! When you want to >update the value, simply update it the same way you normally would.
element.innerHTML = 123 // Native, or.
$('.odometer').html(123) // with jQuery
So, just create an HTML structure of your choice and add the .odometer class to the div in which you want to render the odometer it will automatically do that as these guys taking .odometer as a filter to find the source node.
You don't need to actually include the script inside the div include it anywhere inside body and you are good to go.
Here is demo fiddle
i have added borders for more clearity
.odometer {
font-size: 100px;
border: solid 4px green;
}
.outer {
border: solid 4px red;
}

Javascript - modify CSS on HTML tag?

The HTML tag on this page I'm working on is in a class that is giving it a top padding of 28px. I need this to go away temporarily when a button is clicked, but it doesn't appear that I can change the styling of the HTML tag itself.
Will I need to use position: relative; on the body tag or something similar? Is there really a way to assign CSS to the HTML tag that I don't know about?
# Comments:
Sorry, I'm in a bit of a rush here. It's something to the effect of this:
<html class='pad_my_top'>
<head>
<style type='text/css'>
.pad_my_top{
padding-top: 28px;
}
body{
background: #000000;
}
</style>
<script type='text/javascript'>
function its_gone(){
// Something here to remove padding.
alert("It's gone. Hurray!");
// Something to put it back.
}
</script>
</html>
<body>
<button onClick='its_gone()'>Click me to get rid of the top padding</button>
</body>
</html>
I really want it gone so I can print the page with Javascript, but I'd rather not use any 3rd party code because this is for a plugin for Wordpress and I don't want a billion dependencies. I only need to hide/re-display 3 divs and (re)change 2 styles.
Use this to remove the top padding:
document.documentElement.style.paddingTop = "0";
and this to set it back:
document.documentElement.style.paddingTop = "28px";
There's no reason to use getElementsByTagName and whatnot...just use document.documentElement. Also, it's better to use a class and toggle that instead of directly setting the style attribute. What if you change the 28px to 20px in your CSS? Then you have to change it somewhere else. Since you are sure you want the top-padding to be 0, then add a class that sets that. When done, remove that class. Like this:
<style type="text/css">
.no-top-padding {
padding: 0 !important;
}
</style>
document.documentElement.className += " no-top-padding";
And to "add" the padding back (by effectively removing the class):
var old_class = document.documentElement.className;
document.documentElement.className = old_class.replace(/(?:^|\s)no-top-padding(?!\S)/g, "");
Although it could be done a lot cleaner with the DOM API classList. The regex is just a safer way for making sure the className property is modified correctly to remove the "no-top-padding" class.

Dynamically change CSS rules in JavaScript or jQuery

I'm looking for a way to change the CSS rules of my stylesheet imported in the document. So I have an external stylesheet and some class and div attributes inside. I want to change one of the rules with JavaScript or jQuery.
Here is an example :
.red{
color:red;
}
So the idea is to do something in JavaScript and the HTML knows that now the color is another color like this:
.red{
color:purple;
}
But I want to have this rule for every element that I add in the future by the way of append. So if I add a span with the CSS class .red, the text has to be purple and not red.
I hope I made it clear.
You can inject style declarations into the DOM.
$("head").append('<style>.red { color: purple }</style>');
You jQuery .css() method to do that.
$('.red').css('color', 'purple');
For multiple rules:
$('.red').css({
'color': 'purple',
'font-size': '20px'
});
When you add dynamic element in future to DOM by the way of append, just give those element some class or id and write CSS rules like above after appending them and they will applied for all dynamically created element.
Working sample
Note
Add dynamic rules is not a good solution in my point of view. Instead of the you can load some external CSS file.
But if you need something like dynamic rules add method then:
$('head').append(
$('<style/>', {
id: 'mystyle',
html: '.red {color: purple }'
})
);
And for future use:
$('#mystyle').append(' .someother { color: green; font-size: 13px } ');
Working sample
If you want to add a rule, instead of editing each element's style directly, you can use CSSStyleSheet.insertRule(). It takes two parameters: the rule as a string, and where to insert the rule.
Example from the above link:
// push a new rule onto the top of my stylesheet
myStyle.insertRule("#blanc { color: white }", 0);
In this case, myStyle is the .sheet member of a style element.
As far as I can tell, the style element must be inserted into the document before you can grab its sheet, and it can't be an external sheet. You can also grab a sheet from document.styleSheets, e.g.
var myStyle = document.styleSheets[1]; // Must not be a linked sheet.
myStyle.insertRule("#blanc { color: white }", 0);
Note: The page recommends modifying elements by changing their classes, instead of modifying the rules.

Categories

Resources