I am looking for how to add a class in css which matches to a specific path (For example, the name of my path is "cities" and I would like to apply to it an other color of stroke or fill.
I try it by different ways, but no result. Is it possible?
Thanks in advance!
This is a rudimentary solution, it won't handle addition of classes, just replacements based on your path.
Create two directories, one called 'red', one called 'blue'. Create pages in each with the following in them. They will read the path and add the class into the DIV called #content.
Here's a Fiddle (note: with a hardcoded path so it works) to demonstrate.
Hope this helps.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.red {background-color:red}
.blue {background-color:blue}
.green {background-color:green}
</style>
</head>
<body>
<div id="content">this is the content</div>
<script type="text/javascript">
var locationpath = ""+window.location.pathname+"";
var options = ['red','blue','green'];
for (var i =0;i<options.length;i++) {
if (locationpath.indexOf(options[i])>0) {
document.getElementById('content').setAttribute('class',options[i]) ;
}
}
</script>
</body>
</html>
I am not Exactly sure what you are asking for, pleases post some of your code. But I think you can accomplish what you want by creating multiple classpaths in CSS like this:
#something {
width: 200px;
font-size: 12px;
}
#something.black {
color: #000000
}
#something.white {
color: #FFFFFF
}
And the HTML would be like this:
<h1 id="something" class="black">This Should Be Black</h1>
Etc.
What do you mean by "path" ?
For example, the name of my path is "cities" and I would like to
apply to it an other color of stroke or fill.
If you try to focus elements by "name" you shound use Jquery.
Example:
<input type="text" name="tiluuu"/>
And Jquery
$('input').attr('name','tiluuu').css({'color':'red'});
Related
I am building a Polymer Single Page Interface with a lot of custom elements.
Now I want my elements to have some sort of master style, which I can define in the index.html or my main content element. Think of it like this:
index.html
<style>
.classWhichWillBeUsedInCustomElements {
mainColor: #e0e0e0;
}
</style>
or
<script>
mainColor = "#e0e0e0";
</script>
my-cool-element.html
<polymer-element name="my-cool-element">
<template>
<paper-button style="color: {{mainColor}}"></paper-button>
</template>
</polymer-element>
or
<polymer-element name="my-cool-element">
<template>
<style>
.coolButton {
width: 300px;
color: {{mainColor}};
}
</style>
<paper-button class="coolButton"></paper-button>
</template>
</polymer-element>
Except that this doesn't work.
I have tried:
Creating a global variable window.defaultColor and using it like color: {{defaultColor}};
Using core-style in a parent element, without much luck
Creating a css class in my index.html and calling it in a custom element
What is the right way to achieve this? I am trying to avoid using Less
Use the following pattern in the index.html or a global stylesheet:
<style>
body /deep/ .classWhichWillBeUsedInCustomElements {
mainColor: #e0e0e0;
}
</style>
Then you could use the class within the custom element. The global style will punch the shadow boundary. You could replace body with any other element or selector under which you want to punch the shadow dom boundary.
More on deep here: https://www.polymer-project.org/0.5/articles/styling-elements.html#cat
In jQuery, I created an HTML table dynamically and at the end, I add a click function to add a class from a loaded external css file. In the Chrome javascript console, I can see the class added correctly but the style (colors) do not change. It's like the stylesheet elements do not exist. I added a body style change just to prove it is in fact loading with the HTML page.
Here is the js function that creates the table:
function processGetCallback(data) {
var tableText;
$('#KenTest').empty();
tableText = "<table cellpadding=2><tr><th>ID</th><th>text</th><th>date</th></tr>";
$.each(data, function(i, DataRow) {
tableText = tableText.concat("<tr><td>" + DataRow.IDCol + "</td><td>" + DataRow.txtCol + "</td><td>" + DataRow.dtCol + "</td></tr>");
});
tableText = tableText.concat("</table>");
$('#KenTest').append(tableText);
$('#KenTest tr').click(function () {
$(this).addClass("hightlight");
});
}
Here is the CSS:
body {
background-color: lightgray;
}
td.highlight {
background-color: red;
color: white;
}
tr.highlight {
background-color: red;
color: white;
}
li.highlight {
background-color: red;
color: white;
}
And here is the HTML page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test of jQuery Ajax</title>
<link href="stylesheet.css" rel="stylesheet" />
</head>
<body>
<h1>jQuery Ajax Test</h1>
<h2>Get Ken Test Data</h2>
<ul id="KenTest">
<li class="highlight">ID: 1, txtCol: xyz, dtCol:1/1/2015</li>
</ul>
<hr>
<button id="btnGetAll" onclick="CallGetAllAjax()">Get All Rows</button><button id="btnGet2" onclick="CallGetTwoAjax()">Get 2 Rows</button>
<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="js\main.js" type="text/javascript"></script>
</body>
</html>
The problem is that the elements to which you are binding the click event handler does not exist in DOM when the handler is registered.
Here's a similar question, and there's a good solution from Prestaul: How do you access newly appended HTML elements in jQuery
Use the click method in its delegated form.
You may rather use the .on() method like
$('#KenTest').on("click", "tr", function () {
$(this).addClass("hightlight");
});
I am not sure how long I stared at this and kept missing the typo :/ The js had the class named "hightlight" and the css had the class named "highlight". Doh!
How would I do this? For example, if I wanted to match all <p> tags which contain nothing but an empty <span>? Is this possible without modifying the DOM or using JavaScript?
It is not possible. Why? There's an :empty selector which works like in the following example:
<div>
<p></p>
<p> blah </p>
<p> blah 2 </p>
</div>
div > p:empty {
background:red;
}
-> The first p would have a red background.
But what you're looking for is something like this
div < p:empty {}
which would be some kind of parent selector. At the moment there is no way to accomplish this unfortunately.
Earlier there was a :contains selector
div:contains(p:empty) {}
but it's deprecated now.
Here's a demo of one way you could do it with JS: http://codepen.io/pageaffairs/pen/ELkJa
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.empty {background: #e7e7e7; height: 30px;}
.empty::before {content: "Paragraph with empty span!";}
</style>
</head>
<body>
<p><span>Span 1</span></p>
<p><span>Span 2</span></p>
<p><span></span></p>
<p><span>Span 4</span></p>
<script>
(function() {
var span = document.querySelectorAll('span');
for (var i = 0, ii = span.length; i < ii; i++) {
var para = span[i].parentNode;
var paraClasses = para.classList;
if (!span[i].innerHTML) {
paraClasses.add('empty');
}
}
}());
</script>
</body>
</html>
As mentioned, there's no parent selector available in CSS, and even though one is proposed, even that will only work with the support of JavaScript.
I have one element that extends another and I'm having trouble getting the styling to override the parent using the example in the documentation. For example, say I want to style the praise in the parent element:
<polymer-element name="polymer-cool">
<template>
<style>
:host #p {
color: red;
}
</style>
You are <span id='p'>{{praise}}</span> <content></content>!
</template>
...
</polymer-element>
but change that in an extension of that element:
<polymer-element name="polymer-cooler" extends="polymer-cool">
<template>
<!-- A shadow element render's the extended
element's shadow dom here. -->
<style>
#p {
color: blue;
}
</style>
<shadow></shadow> <!-- "You are cool Matt" -->
</template>
...
</polymer-element>
You can see in the JSfiddle below, that I haven't been able to change the color of the span#p. I've tried a few other things like
polymer-cooler #p {
color: blue;
}
And tried putting the style inside of the tags, but no luck. Hoping it's possible and I'm just missing something.
http://jsfiddle.net/jamstooks/tpyL9/
Well, this looks like this works. I'd love to get some clarification from someone on whether this is the best way to do this:
<polymer-element name="polymer-cooler" extends="polymer-cool">
<template>
<style>
{
:host::shadow #p
color: blue;
}
</style>
<shadow></shadow>
</template>
...
</polymer-element>
http://jsfiddle.net/jamstooks/tpyL9/4/
EDIT: 7/22/14
Per the comment from Scott below, I have updated the code above from :host /deep/ #p to :host::shadow #p
I'm working on adding content to a web-page with javascript. The problem is that the CSS in IE (7) doesn't seem apply to the dynamically added content.
Here's an example document..
<html>
<head>
<style type="text/css">
p.foo { color: #FF4400 ; background-color: #000000 }
p.bar { color: #FF0000 ; background-color: #000000 }
</style>
<script type="text/javascript">
function add() {
var node = document.createElement("p");
node.setAttribute("class", "bar");
node.appendChild(document.createTextNode("New Content"));
document.body.appendChild(node);
};
</script>
</head>
<body onload="add()">
<p class="bar">bar</p>
<p class="foo">foo</p>
</body>
</html>
In FF, the newly added 'New Content' paragraph has the style applied to it, but in IE, it doesn't. This seems like something obvious enough that it ought to be easily searchable-for, but some obvious queries gave me nothing.
So what's the trick?
Why not use a framework, such as jQuery, MooTools, extJs, Dojo, Prototype, etc., that has already solved all of these problems?
But if you insist on doing it yourself, try using:
function add() {
var node = document.createElement("p");
node.className = 'bar'; // <- use in leu of setAttribute()
node.appendChild(document.createTextNode("New Content"));
document.body.appendChild(node);
};