var contentObj = getElementById("content");
var widthOfContent = screen.availWidth * 0.6;
var cssContObjStr = "width:" + (screen.availWidth * 0.6) + ";";
contentObj.style = cssContObjStr;
<!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>Testing</title>
</head>
<body>
<div id="content"></div>
jdhkfahsd jksahd fklhasdk fhaskdhf kalsdhf klashdfk hasdkf haskd hfasdkjfhkjasdh fkjasdkfh asjdkhf khdskf jhaskdjh fkjasdhf kjsahd fkasbdkfbsadvn iweb fnilewalnfiwa ebnkjsdbv jdbalisd df sads da s fsd afds fasdf sadf asdf adsf asdf sdf
<script type="text/javascript" src="javas.js"></script>
</body>
</html>
I've saved the javascript file as javas.js on my pc. However, I'm trying to set the width as 60% of the screen width in pixels. This isn't working.
How can I manage this? And please, don't say "set it to width:60%".
You have several syntax errors, here's a list of what's wrong:
You need to call document.getElementById()
+\ isn't needed, that's an improperly formatted literal...but isn't not needed here anyway
The width is a property on style, just set it like I have below, make sure to include "px" on the end.
Overall, it should just be:
var contentObj = document.getElementById("content");
var widthOfContent = screen.availWidth * 0.6;
contentObj.style.width = widthOfContent + "px";
<!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>Testing</title>
</head>
<body>
<div id="content"></div>
jdhkfahsd jksahd fklhasdk fhaskdhf kalsdhf klashdfk hasdkf haskd hfasdkjfhkjasdh fkjasdkfh asjdkhf khdskf jhaskdjh fkjasdhf kjsahd fkasbdkfbsadvn iweb fnilewalnfiwa ebnkjsdbv jdbalisd df sads da s fsd afds fasdf sadf asdf adsf asdf sdf
<script type="text/javascript" src="javas.js"></script>
</body>
</html>
Can you please try this?
var contentObj = document.getElementById("content");
var widthOfContent = screen.availWidth * 0.6;
var cssContObjStr = "width:" + (screen.availWidth * 0.6) + "%;";
contentObj.style.cssText = cssContObjStr;
Thanks
Related
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';
}
}
Here I have two HTML pages, First_page.html and Second_page.html,
In First_page.html I have a code that redirects to a page when a link is clicked with a certain URL parameter.
First_page.html's Code is like this.
<!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>
one<br />
two<br />
three<br />
four
</body>
</html>
And in the Second_page.html I have a code that reads the URL parameter and change the Dropdowns Menu according to it.
Second_Page.html's Code is like This
<!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>
<script type="text/javascript">
function show(choice) {
var success = -1;
for (var i=0; i < document.form1.selecoption.length; i++) {
if (document.form1.selecoption.options[i].value == choice)
success = [i];
}
document.form1.selecoption.selectedIndex=success;
}
</script>
</head>
<body onLoad="var choice = location.href.split('?')[1].split('=')[1];show(choice);">
<form name="form1">
<select name="selecoption">
<option value="1">ONE</option>
<option value="2">TWO</option>
<option value="3">THREE</option>
<option value="4">FOUR</option>
</select>
</form>
</body>
Now, what I want is that how do i select two different dropdown menu's i.e "selecoption" & "selecsecondoption" in Second_page.html using URL Parameter. Please help....
First, you have to use the correct URL format. Passing value(s) to URL needs corresponding variable name(s). So the corrected First_page.html file should be like 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>
one<br />
two<br />
three<br />
four
</body>
</html>
And here's the fixed Second_Page.html file. All script code are moved into the script code.
<!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>
<script type="text/javascript">
function getUrlVar(varName) { //returns empty string if variable name not found in URL
if (!varName) return ''; //no variable name specified. exit and return empty string
varName = varName.toLowerCase(); //convert to lowercase
var params = location.search; //get URL
if (params == '') return ''; //no variables at all. exit and return empty string
var vars = params.split('?')[1].split('&'); //get list of variable+value strings
for (var i = 0; i < vars.length; i++) { //check each variable
var varPair = vars[i].split('='); //split variable and its value
if (varPair.length > 1) { //has "=" separator
if (varPair[0].toLowerCase() == varName) { //same variable name?
return varPair[1]; //found variable. exit and return its value
} //else: check next variable, if any
} //else: is not an array. i.e.: invalid URL variable+value format. ignore it
}
return ''; //no matching variable found. exit and return empty string
}
function show() {
var value = getUrlVar('selecoption'); //get variable value
if (!value) return; //variable not found
if (parseInt(value) == NaN) return; //value is not a number
var sel = document.getElementById('form1').selecoption;
for (var i=0; i < sel.length; i++) {
if (sel.options[i].value == value) {
document.getElementById('form1').selecoption.value = value;
return;
}
}
}
</script>
</head>
<body onLoad="show();">
<form id="form1">
<select name="selecoption">
<option value="1">ONE</option>
<option value="2">TWO</option>
<option value="3">THREE</option>
<option value="4">FOUR</option>
</select>
</form>
</body>
</html>
Try this :
<script type="text/javascript">
document.getElementById('selecoption').value=String(choice);
</script>
at the end of the Second_Page.html
I have a page, where i'd like to use function. First a have a addTitle() function which is generated into a div. This is the function:
function addTitle(){
var ni = document.getElementById('div_fieldset');
var titleSpan = document.createElement("span");
ni.appendChild(titleSpan);
titleSpan.setAttribute("id","titleSpan");
titleSpan.setAttribute("class","fields");
if(titleSpan.previousSibling.nodeName=="#text"){
document.getElementById("titleSpan").style.paddingLeft="85px";
titleSpan.style.width="86.5%";
}else{
var titleSelect = document.createElement("select");
titleSelect.setAttribute("size","1");
titleSelect.setAttribute("name","titleSelect");
titleSelect.setAttribute("class","logicalOpSelect");
orOption=document.createElement("OPTION");
orText=document.createTextNode("OR");
orOption.appendChild(orText);
orOption.setAttribute("value","OR");
titleSelect.appendChild(orOption);
andOption=document.createElement("OPTION");
andText=document.createTextNode("AND");
andOption.appendChild(andText);
andOption.setAttribute("value","AND");
titleSelect.appendChild(andOption);
titleSpan.appendChild(titleSelect);
}
var titleSpanInner = document.createElement("span");
titleSpan.appendChild(titleSpanInner);
titleSpanInner.setAttribute("class","labels");
titleSpanInner.innerHTML="Title";
var titleInput = document.createElement("input");
titleSpan.appendChild(titleInput);
titleInput.setAttribute("class","input_text");
titleInput.setAttribute("type","text");
titleInput.setAttribute("name","title_input");
titleInput.setAttribute("size","50");
var removeButton = document.createElement("input");
titleSpan.appendChild(removeButton);
removeButton.setAttribute("id","removeTitle");
removeButton.setAttribute("class","removeButton");
removeButton.setAttribute("type","button");
removeButton.setAttribute("value","Delete field");
removeButton.setAttribute("onClick","remove(this.id)");
}
Then here is the html code:
<!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="X-UA-Compatible" content="IE=8"/>
<title>Search</title>
<link rel="stylesheet" href="css/search.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<script type="text/javascript">
function AddTitle(){
...
Here is the addTitle code, which is placed above
...
}
</script>
<body onload="addTitle();">
<div id="box">
<form name="search" method="post" action="search.php">
<div id="div_fieldset">
</div>
<input class="button" type="submit" value="Search">
</form>
</div>
</body>
</html>
And in internet eplorer 8 or 9 the field_set div has't any content, only the titleSpan span. But if i put the whole addTitle source into the field_set div, then the last section of the addTitle does'n appear, this one:
var removeButton = document.createElement("input");
titleSpan.appendChild(removeButton);
removeButton.setAttribute("id","removeTitle");
removeButton.setAttribute("class","removeButton");
removeButton.setAttribute("type","button");
removeButton.setAttribute("value","Delete field");
removeButton.setAttribute("onClick","remove(this.id)");
What is the problem and what is the solution? Thanks!
Here is a language translation code that google provides to detect the language in which the code is typed . This is the default code in which it translates the code from "var text=" field . I want to modify this code so as to recieve input from the user in a text box and on clicking the submit button it should display the result of language detected on the same page .
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Language API - Basic Translation</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("language", "1");
function initialize() {
var text = "¿Dónde está el baño?";
google.language.detect(text, function(result) {
if (!result.error) {
var language = 'unknown';
for (l in google.language.Languages) {
if (google.language.Languages[l] == result.language) {
language = l;
break;
}
}
var container = document.getElementById("detection");
container.innerHTML = text + " is: <b>" + language + "</b>";
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="detection"></div>
</body>
</html>
Try 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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Language API - Basic Translation</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("language", "1");
function initialize(text) {
google.language.detect(text, function(result) {
if (!result.error) {
var language = 'unknown';
for (l in google.language.Languages) {
if (google.language.Languages[l] == result.language) {
language = l;
break;
}
}
var container = document.getElementById("detection");
container.innerHTML = text + " is: <b>" + language + "</b>";
}
});
return false;
}
</script>
</head>
<body>
<form onsubmit="return initialize(this.text1.value">
<input type="text" value="" name="text1" /><input type="submit" />
</form>
<div id="detection"></div>
</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>