How do you assign a class dynamically to a paragraph (via javascript/CSS) IF the paragraph contains the wording "Time Recorded:"?
You'll notice that I have manually assigned the paragraph with class class="dyncontent".
However, I'd like to dynamically assign this class to any paragraph tag which contain the words "Time Recorded:".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript">
if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">')
document.write('.dyncontent{display:none;}')
document.write('</style>')
}
</script>
<div class="right">
<ul>
<li class="say agent public">
<p>Description line 1</p>
<p class="dyncontent">Time Recorded: 5MIN(S)</p>
<p>Another description line</p>
</li>
</ul>
</div>
</body>
</html>
You could use jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(function(){
$("p:contains('Time Recorded:')").addClass('dyncontents');
});
</script>
$("p").each(function(ele) {if (this.html().indexOf('TimeRecorded') > 1) {$(this).addClass('dyncontent'))}});
I'd do indexOf because it will match easier than innerText
var allP = document.getElementsByTagName('p'),
pLength = allP.length;
while(pLength--){
if(allP[pLength].innerHTML.indexOf('Time Recorded') != -1){
allP[pLength].addClass('dycontents');
}
}
To explain: first you get all the <p> in the document. Then you loop through them. If any of them contain text of Time Recorded you add your class to it.
The following is solution without Jquery
o = document.getElementsByTagName('p');
for (i = 0; i < o.length; i++) {
if (o[i].innerText.indexOf('Time Recorded:') != -1) {
o[i].className = 'theClassYouWant';
}
}
Related
You have a html like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>
</title>
</head>
<body>
<div>
<div>
How are you?
</div>
<div>
<div>
<div>
<p>
Hello
</p>
</div>
</div>
</div>
</div>
<div>
</div>
</body>
</html>
How do you set only the content of the "nestedmost" div to '' in a userscript that works with most pages? In this context, How are you stays but <p>Hello</p> is removed.
Context: the goal is to automatically filter forum posts(ie the smallest unit) or articles that contain certain keywords but not the whole page because somewhere nested there are keywords.
It's not entirely clear to me what you are looking for, but here's a function that function that finds the most deep div in the document body tree:
function find_deepest_div() {
var deepest_div;
var deepest_div_depth = -1;
function search(current, depth) {
if (current.tagName === "DIV" && depth > deepest_div_depth) {
deepest_div = current;
deepest_div_depth = depth;
}
for (var i = 0, len = current.children.length; i < len; i++)
search(current.children[i], depth + 1);
}
search(document.body, 0);
return deepest_div;
}
You can use it to delete the contents of the deepest div like so:
var deepest_div = find_deepest_div();
if (deepest_div) deepest_div.innerHTML = "";
I'm making a header for my site, and I want to have it like a slideshow.
The problem is that the images won't change. It shows only 1 images, and the rest won't show up.
Code:
//Array with the paths to the images
var image = new Array("img/header/header1.png", "img/header/header2.png", "img/header/header3.png");
//imageNumber to change the image, and imageLenght for the array lenght - 1
var imageNumber = 0;
var imageLength = image.length -1;
//Call changeImage()
changeImage();
//Function to change the image
function changeImage() {
//use strict because I use dreamweaver and it needs that(I don't know why)
"use strict";
//Add 1 to imageNumber for choosing a image(in "document.slideshow.src = image[imageNumber];")
imageNumber++;
//Check if image number is not below 0 or above the array index
if(imageNumber < 0) {
imageNumber = imageLength;
} else if(imageNumber > imageLength) {
imageNumber = 0;
}
//Change the image
document.header.src = image[imageNumber];
//recalling every second
setTimeout(changeImage, 1000);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tommie's HOME</title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script type="text/javascript" src="js/header_slideshow.js"></script>
</head>
<body>
<div id="big_wrapper">
<nav>
<ul id="n1">
<li><img src="img/logo.png" width="100px"/></li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<ul id="n2">
<li>About</li>
<li>Shop</li>
</ul>
</nav>
<div id="content">
<header>
<img src="img/header/header1.png" name="header" />
</header>
</div>
</div>
</body>
</html>
If you know the problem, feel free to reply.
Kind regards,
Tom
I am pretty new to css + html and am coding my first website. I have a navigation menu setup inside a div, but I want to change the font-weight of the clicked text from lighter to bold when the user clicks on an item in it (text). Please can you tell me how to do this?
Here is my code so far:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>...</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" />
</head>
<body>
<div id="background" />
<div id="navigation" class="navigationPlaceholder">
<div id="navigationText">
<ul>
iOS
Blog
About
Contact
</ul>
</div>
</div>
</body>
</html>
You need to add a click event listener each navigation item and change its font-weight style.
First, start by using an unordered list for your nav
<div id="navigationText">
<ul>
<li>iOS</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
Then, place this script block just before the closing </body> tag
<script type="text/javascript">
var nav = document.getElementById('navigationText');
var navItems = nav.getElementsByTagName('li');
for (var i = 0; i < navItems.length; i++) {
navItems[i].addEventListener('click', function() {
this.style.fontWeight = 'bold';
}, false);
}
</script>
</body>
here you have an example, you should do the same wih your div:
<html>
<head>
<script type="text/javascript">
function displayResult()
{
document.getElementById("p1").style.fontWeight="900";
}
</script>
</head>
<body>
<p id="p1">This is some text.</p>
<br />
<button type="button" onclick="displayResult()">Change font weight</button>
</body>
</html>
I have just written my first app in phonegap that simply replaces a text string on the screen each time you activate a link.
The original string stays where it is and the new string is written over the top. If you then activate the link again the second string is replaced with a new one but still over the top of the first string.
I have tried clearing the variable to fix this but no luck.
Is this a platform limitation or am i doing something wrong?
Code is below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body onload="newIdea()">
<h1 class="h1">First Love</h1>
<p>Have you ever? </p>
<h3><div id="ideaDiv">Nothing</div></h3>
Let's Do it
No Thanks
<script type="text/javascript">
var ideas=new Array(); // regular array (add an optional integer
ideas[0]="Kissed someone in the rain"; // argument to control array's size)
ideas[1]="Eaten peking duck";
ideas[2]="Stood naked in the open";
function newIdea(){
var idea = "";
var idea = ideas[Math.floor(Math.random()*ideas.length)];
var ideaSpace = document.getElementById("ideaDiv");
ideaSpace.innerHTML=idea;
var ideaLink=document.getElementById("ideaLink");
var linkCreate="http://www.google.com/calendar/event?action=TEMPLATE&text=" + idea + "&dates=20120101/20120102&details=&location=&trp=false&sprop=&sprop=name:";
ideaLink.href=linkCreate;
}
</script>
</body>
</html>
Thanks
Simon
I have no experience with phonegap, but in the past I found some problems trying to set innerHTML in xhtml documents, it don't check if the string you are using causes the document to still a valid xml and just throws an error, to achieve the same effect try:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body onload="newIdea()">
<h1 class="h1">First Love</h1>
<p>Have you ever? </p>
<h3><div id="ideaDiv">Nothing</div></h3>
Let's Do it
No Thanks
<script type="text/javascript">
var ideas=new Array(); // regular array (add an optional integer
ideas[0]="Kissed someone in the rain"; // argument to control array's size)
ideas[1]="Eaten peking duck";
ideas[2]="Stood naked in the open";
function newIdea(){
var idea = "";
var idea = ideas[Math.floor(Math.random()*ideas.length)];
var ideaSpace = document.getElementById("ideaDiv");
//ideaSpace.innerHTML=idea;
ideaSpace.removeChild(ideaSpace.firstChild);
ideaSpace.appendChild(document.createTextNode(idea));
var ideaLink=document.getElementById("ideaLink");
var linkCreate="http://www.google.com/calendar/event?action=TEMPLATE&text=" + idea + "&dates=20120101/20120102&details=&location=&trp=false&sprop=&sprop=name:";
ideaLink.href=linkCreate;
}
</script>
</body>
</html>
I want to expand hidden text on a webpage and after some (re)search on google i came across the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script type="text/javascript">
function Expand(node)
{
// Change the image (if there is an image)
if (node.childNodes.length > 0)
{
if (node.firstChild.tagName == "IMG")
{
node.firstChild.src = "minus.gif";
}
}
node.nextSibling.style.display = '';
}
function Collapse(node)
{
// Change the image (if there is an image)
if (node.childNodes.length > 0)
{
if (node.firstChild.tagName == "IMG")
{
node.firstChild.src = "plus.gif";
}
}
node.nextSibling.style.display = 'none';
}
function Toggle(node)
{
// Unfold the branch if it isn't visible
if (node.nextSibling.style.display == 'none')
{
Expand(node);
}
// Collapse the branch if it IS visible
else
{
Collapse(node);
}
node.childNodes[1].nodeValue = (node.nextSibling.style.display == 'none')? 'More...' : 'Less...';
}
</script>
</head>
<body>
<a onclick="Toggle(this)" style="cursor:pointer;"><img src="plus.gif" alt="Expand/Collapse" /> More...</a><p style="display:none;">This is a sample of the expanded text that will show up when "+ More..." is clicked</p>
</body>
</html>
Now the script displays a .gif image of a plus sign(expand) with 'More...' beside it and when the .gif file or the 'More...' is clicked the hidden text appears and the plus.gif is replaced with a minus.gif and 'More...' changes to 'Less...'
but i want to implement it in another way, i want that once the expand (plus.gif) is clicked, no other .gif should appear again, i dont know how to modify the code to do it, so friends please help me out
i am a newbie in javascript so such a dumb doubt had to come
Thanx :)
Just change your code to this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script type="text/javascript">
function ExpandDelete(node)
{
if (node.nextSibling.style.display == 'none')
{
node.nextSibling.style.display = '';
node.parentNode.removeChild(node);
}
}
</script>
</head>
<body>
<a onclick="ExpandDelete(this);" style="cursor:pointer;"><img src="plus.gif" alt="Expand" /> More...</a><p style="display:none;">This is a sample of the expanded text that will show up when "+ More..." is clicked</p>
</body>
</html>