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!
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' : '' );
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'});
I am developing a website wherein I want to use the facebook comment plugin, and I want to customize comments' CSS. I am using ASP.NET MVC architecture and my page requires that I send the href for the fb:comments via ViewData. Due to this I am adding my facebook comments tag using javascript to a div in my page.
I am trying to Customize the CSS by referring
http://www.daddydesign.com/wordpress/how-to-customize-the-facebook-comments-social-plugin-on-a-static-fbml-tab/
but it seems by CSS is not being applied to my facebook comments section.
The Code is as follows:
<script type="text/javascript">
$(function () {
Url = '<%=ViewData["Url"] %>';
Xid = '<%=ViewData["Xid"] %>';
document.getElementById('fb_comments')
.innerHTML = "<fb:comments href="
+ Url
+"num_posts=\"4\" xid="
+ Xid + " width=\"350\"></fb:comments>";
});
</script>
<style type="text/css">
#fb_comments {
width: 350px;
float: left;
font-family: Arial, Helvetica, sans-serif;
color: #909090;
min-height:850px;
height:100%;
background-color: #E8E8E8;
}
#fb_comments a {
color: #909090;
}
</style>
</head>
<body style="width:350px;">
<div>
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
</script>
<div id="fb_comments">
</div>
</div>
</body>
</html>
Can someone please help!
Thanks!
See the comment by the post's author at the bottom.
HI, to our knowledge, you cannot style the regular facebook comments anymore. If anyone knows how to, please share here.
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);
};