Render Background based on Tumblr tag - javascript

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; }

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...

Replacing string within page with jQuery/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;");

Changing backgroundColor with javascript affects CSS's :hover

I have set of 6 divs, and when I click on each of them, a certain div changes its innerHTML, like some kind of menu. When user hovers over those "buttons" (actually divs), they highlight with CSS's property :hover. There's also :active, when a user is clicking on a "button".
Since the "information" div changes when clicked, I'd like to have the current selected div constantly highlighted, in a whole different color than when on hover. So I used javascript for this. I call a function that changes background color of all of the "buttons" (so I don't have to "remember" which one was clicked), and then changes this div's backgroundColor to appropriate color.
However, now I lost my :hover and :active styles. How to handle this?
Here are code snippets as requested:
function ofarbajSveU999() {
document.getElementById("menubutton1").style.backgroundColor = "#999";
...
document.getElementById("menubutton6").style.backgroundColor = "#999";
}
function showMeaning() {
document.getElementById("information").innerHTML = meaning;
ofarbajSveU999();
document.getElementById("menubutton1").style.backgroundColor = "#ccc";
}
meaning is a string, menubuttonX are 6 div's that act like buttons.
#kotd .menubutton {
float: left;
background-color: #999;
width: 120px;
padding: 2px 0px;
cursor: pointer;
}
#kotd .menubutton:hover {
background-color: #aaa;
}
#kotd .menubutton:active {
background-color: #bbb;
}
instead of changing the color with javascript, use javascript to add and remove a class (for example .current) to the active "button" and then style the .current class accordingly in CSS. jQuery would be the most elegant solution to do that using the addClass(),removeClass() or toggleClass() functions.
To explain the idea a bit further:
When you click on a button, you add a class to its class attribute instead of adding inline style properties. This allows to style them via your CSS stylesheet.
In jQuery it is really easy. You can do something like this:
$(".menubutton").click(function () {
$(".menubutton").removeClass("current");
$(this).addClass("current");
});
Step-by-step:
you first look for all DOM elements with class menubutton by calling $(".menubutton"). Then by using .click() you trigger an event if one of the menubutton elements gets clicked. The function(){} includes the functions that get executed on click. First
$(".menubutton").removeClass("current");
again gets all objects with class menubutton and removes the class current from any of them that have it. Second
$(this).addClass("current");
adds class current ti "this" ... meaning the clicked object.
This will make the clicked object in the DOM look something like this:
<div class="menubutton current">
In your CSS you can now style the objects that has the additional current class:
.currnet {
background-color:blue;
color:white;
}
DEMO
In pure JavaScript this will be a bit more tricky. Maybe this thread can give you some more insight into that:
How to add/remove a class in JavaScript?
You should be using jquery's .hover() function extensively.
Check out http://api.jquery.com/hover/ & http://api.jquery.com/click/
The samples and you can easily do this.
To be exact, you should be using the following two built-in functions :
$(selector).hover(handlerIn, handlerOut);
$(selector).click(event);
Cheers

javascript how to change the color of links onmouseover table cell?

I am making a navigation bar and would like the link to change color after mousover of the table cell, not the link. Is there a quick way for this? Or to get an element by its tag? (GetElementByTag("a"))
As #Stuart said, add the following to your css, and make sure your css is included in your html.
td:hover a {
color: blue
}

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