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);
};
Related
I want to remove a property which was applied to a class by ionic.
.bar {
border: none;
}
I don't want ionic to apply this border property to bar class. I tried jquery like
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/jquery/src/jquery.js"></script>
<script src="lib/angular-translate/angular-translate.js"></script>
before the closing body tag
<script type="application/javascript">
$('.bar').removeProp('border');
</script>
</body>
but it failed to recognize $ (jquery).
In the lastest CSS style you try to puy:
.bar {
border: none !important;
}
nothing elese :-)
You can remove it by:
$(".bar").css( 'border' : '' );
I have an accordion menu that I have tweaked to suit my needs. My last stumbling block is that I have an image (see attached image) of a FedEx Courier that I need to lay on top of the menu and yet still allow users to click through it to activate (access) the accordion menu. The image is a separate image that is set to the desired alpha as created in Photoshop. The file is merely a snapshot of how it would look if it was the way I wanted it.
If this is even possible, what code would I use and exactly where would I place it? If in the CSS file, where does it go and between which lines?
Original full size Image file
You can apply the css:
pointer-events: none;
to the image above the links.
See fiddle https://jsfiddle.net/4zgcrkyz/
pointer-events: none; is a suitable solution if you do not need to care about IE < 11. More info on compatibility here.
Alternatively you can use elementFromPoint() which has compatibility IE > 5.5
The following trick allow you to select under your cover image without using pointer-events: none;
https://jsbin.com/tuhotagize/edit?html,output
Explanation:
At click on cover image.
Hide cover image temporary.
Get mouse coordinates.
Get HTML element under that mouse coordinates (so you know what under the cover).
Trigger click event on that HTML element.
Show cover image again.
Another alternative solution to your problem, which does not include any JS is:
Trim your image in PhotoShop as should appear inside the menu. Use CSS background-image property on it
Use the courier FedEx image only as CSS background-image the body of your page.
You can achieve the same visual effect using only CSS.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
img {
position: absolute;
top: 0;
left: 0;
opacity: 0.4;
}
a {
display: block;
width: 300px;
height: 20px;
background-color: greenyellow;
}
a:hover {
background-color: #FF0000;
}
</style>
<script>
window.app = {
show: function () {
document.getElementById('cover').style.display = '';
},
hide: function () {
document.getElementById('cover').style.display = 'none';
},
event: null,
start: function () {
document.getElementById('cover').addEventListener('click', function (event) {
this.hide();
this.event = event;
var target = document.elementFromPoint(event.pageX, event.pageY);
this.show();
target.click();
}.bind(this));
var links = document.querySelectorAll('a');
for (var i = 0, len = links.length; i < len; i++) {
links[i].addEventListener('click', function (event) {
alert('click on ' + event.target.id);
}.bind(this));
}
}
};
</script>
</head>
<body onload="window.app.start();">
<img id="cover" src="http://placehold.it/200x200" />
<a id="a1">link</a>
<a id="a2">link</a>
<a id="a3">link</a>
<a id="a4">link</a>
<a id="a4">link</a>
<a id="a6">link</a>
</body>
</html>
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 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'});