Basic Setting Of CSS Properties/innerHTML
Jun 29, 2009
I'm trying to create a script which allows multiple different tables to be shown on mouseover of an area (in this case, a table cell). However, I want the tables to appear in a long list for those who have JS disabled. For obvious reasons I don't want two copies of the tables in my html, and obviously only want the mouseover section to appear for those with JS enabled.
The basic problems I have so far is that I can't get the div "plaintables" (which contains all the tables) to be hidden when JS is enabled, and when I mouseover (activating scim()), I get the message [object HTMLTableElement] rather than the actual table.
Pretty much just starting out with Javascript, so this is probably something really simple I have done wrong.
Just incase it matters, I don't have access to the contents of the <head> tag (This is for a site with an existing template) - it would be easier if everything could be done in the <body> section.
View 6 Replies
ADVERTISEMENT
Mar 21, 2010
I am dynamically building a part of my HTML page by setting the innerHTML of a DIV element. Immediately after I do that I try to retrieve the clientHeight and clientWidth of the DIV element in order to determine what height and width the element actually ended up being. But I always get 0 as both the height and width. The contents of the DIV, i.e. the HTML code that I inserted into it via the innerHTML, does indeed get displayed on the page. But I suspect that the browser doesn't actually update the page until AFTER my JavaScript code has completed and "returns control" to the browser.
Does that make sense? Is there any way I can force the browser to update the page BEFORE my code completes its processing, so that I can properly retrieve the width and height of the element I just inserted into the page?
View 2 Replies
View Related
Jul 14, 2011
Whenever I try to compile a script I wrote, I get the error, "class, interface, or enum expected" and it points to a spot in my script that I don't think should create an error. code...
View 7 Replies
View Related
Sep 15, 2006
I'm trying to use variables in the following way in javascript:
var prop;
prop = 'innerHTML'
alert(document.getElementById(id).prop;
I've tried it that way, and it doesn't work, but is there a way to reference a variable in a property like that?
View 1 Replies
View Related
Jul 23, 2005
I know that I can read/write custom properties of an object by using
the following:
Setting:
document.all['Control'].customProp = "this";
Getting:
document.all['Control'].customProp;
Is there a way I can run code when this custom property is set. Or
perhaps there is a way to create a custom method?
Example:
<span id="MySpan"><input type="text"></span>
I'd the property:
document.all['MySpan'].enabled = true;
To automatically do this:
document.all['MySpan'].controls[0].disabled = !thevalue;
OR the method
document.all['MySpan'].enable();
To do this:
document.all['MySpan'].disabled = false;
View 5 Replies
View Related
Sep 22, 2006
Subject line would seem to say it all:
How does one trigger the execution of a method within an object or any
other code/function with the setting of an object property?
More elaboration for those who want it:
Suppose we have anObjectType, with a property .description, whose value
can be a string, and the value of .description actually describes the
structure of anObjectType as a string. (The details are not important
about how the structure is described, but if you want something concrete,
think of 'anObjectType' as a DOM Node of type NODE_ELEMENT, and
..description as the property .innerHTML.)
When an instance of anObjectType is created, the value of description is
created with the instance. Indeed, the value of description may not be
set with the construction of anObjectType, but it might be added to the
prototype of anObjectType.
But the property .description is not merely read-only. Fetching the value
of .description returns the string which describes the structure of the
object in a meaningful way.
When .description is set with a value of type string, the string is
checked to see if it properly describes a legally formed structured for
anObjectType, and the instance (and only that instance) of anObjectType is
completely re-built: it might possibly be destructed and then re-
constructed, or all properties (but not methods) which involve descendant
objects are changed to conform to the described structure.
The question is, the setting of a string value of the property
..description of object anObjectType does not automatically trigger a
method/methods (or an exception??) for doing something (such as
restructing the object) as a result of the setting of an object property.
View 3 Replies
View Related
Mar 29, 2010
I want to set opacity parameter value before calling: $('x').animate({opacity:1},v1);
of course, other than setting a switch case line for each possible expected value.
View 2 Replies
View Related
Jun 25, 2006
I have some column headings whose widths are set via styles:
<TR>
<TD style="visibility:hidden;width:0px"> </TD>
<TD style="visibility:hidden;width:0px"> </TD>
<TD style="visibility:hidden;width:0px"> </TD>
<TD class="head1" style="WIDTH: 120px">Stage</TD>
<TD class="head1" style="WIDTH: 90px">Est. Hours</TD>
<TD class="head1" style="WIDTH: 90px">Est. Delivery</TD>
<TD class="head1" style="WIDTH: 90px">Est. Cost</TD>
<TD class="head1" style="WIDTH: 200px">Comment</TD>
</TR>
When I set the value of a span in a cell using javascript
<TD><Span class="head1" id="TotalHours"
style="width:60px;text-align:right"></span></TD>
idTotal = document.getElementById("TotalHours");
idTotal.innerHTML = total;
all of the table columns shrink to the minimum size for the content,
ignoring the style width settings. Any suggestion as to why this might
be the case?
View 5 Replies
View Related
Jun 23, 2011
I have the non-standard element
<testele></testele>
In every browser except IE, this bit of JavaScript will successfully change the content of the above element:
document.getElementsByTagName("testele")[0].innerHTML = 'hi';
However, if I change the <testele> to just a <span> (in the HTML and the JavaScript), it now successfully changes the content of the element in every browser, including IE.
View 5 Replies
View Related
Jan 22, 2011
I've got resizable divs:
$(document).ready(function() {
$
(".draggit").resizable({
[code]....
View 3 Replies
View Related
Nov 13, 2009
how to add extra properties to html elements as I was storing data in html attributes. After looking at some others code including Raphael and this addEvent code. [URL] They seem to treat objects just like an array. obj[property] = value; This would have been extremely helpful to know previously as I have needed to be able to include variables in property names - but have resorted to making the whole thing a string and calling exec() on it.
View 2 Replies
View Related
Apr 5, 2006
Ive got a really simple problem but I can't figure it out. I've got a
form named bob with one text box name bobtext with a default value of
"http://". When I add onload="document.bob.bobtext.focus()" it focuses
on the text box, but at the beginning. Is it possible to focus on the
text box, but at the end of "http://"? This seems like something easy
so I'm probably making some stupid mistake.
View 1 Replies
View Related
Jul 20, 2005
Suppose I have a page, call in parent.html . Inside, there is an iframe,
call it child.html . I want it so that in response to a keyboard event
in either parent or child, child.html will respond in a particular way.
Do I need to use a different set of code for each html page, or can I
reuse the same code?
If the code is different, what are the fundamental differences in code?
How do I make one frame respond to events in a different frame as a
general rule?
View 2 Replies
View Related
Dec 6, 2003
I know there is a million of them but here's a little calculator script I made just for kicks. Feedback is always appreciated, good or bad.
I think I did a pretty good job of mirroring the windows calculator functionality.
Basic keys are mapped (optionally) to the keyboard.
<html>
<head>
<title>Web Calculator</title>
<style type="text/css">
table
{
text-align:center;
background-color:#e5e5c5;
}
.button
{
width:55px;
font-weight:bold;
background-color:lightblue;
color:#333399;
}
.functbut
{
width:55px;
font-weight:bold;
background-color:lightblue;
color:red;
}
.back
{
width:115px;
font-weight:bold;
background-color:lightblue;
color:red;
}
.header
{
color:#333399;
}
#display
{
text-align:right;
}
</style>
<script type="text/javascript">
var find=document.getElementById;
var temp=0;
var total=0;
var which=0;
var m=0;
function Mplus()
{
m=parseFloat(find('display').value) + m;
find('memory1').value="M+*";
}
function Mclear()
{
m=0;
find('memory1').value="M+";
}
function Mrecall()
{
find('display').value=m;
}
function Mreplace()
{
m=find('display').value;
}
function showMe(num)
{
if(temp==0)
{
find('display').value=num;
temp=1;
}
else
{
find('display').value+=num;
}
}
function calcEm(num)
{
str=parseFloat(find('display').value);
if(which==0)
{
total=find('display').value;
temp=0;
which=num;
}
else if(which==1)
{
find('display').value=parseFloat(total)+ str;
total=find('display').value;
which=num;
temp=0;
}
else if(which==2)
{
find('display').value=parseFloat(total) * str;
total=find('display').value;
which=num;
temp=0;
}
else if(which==3)
{
find('display').value=parseFloat(total) / str;
total=find('display').value;
which=num;
temp=0;
}
else if(which==4)
{
find('display').value=parseFloat(total) - str;
total=find('display').value;
which=num;
temp=0;
}
}
function clearAll()
{
find('display').value=0;
which=0;
temp=0;
total=0;
}
function clearDisplay()
{
find('display').value="0"
temp=0;
}
function fractIt()
{
find('display').value=(1) / str;
}
function getPerc()
{
var d=find('display').value=str / 100;
calcEm(0);
}
function backSpace()
{
find('display').value=find('display').value.substring("0",find('display').value.length-1);
}
function getRoot()
{
find('display').value=Math.sqrt(find('display').value);
}
function invertIt()
{
var w=find('display').value.indexOf("-");
if(w==-1)
{
find('display').value="-" + find('display').value
}
else
{
find('display').value=find('display').value.substring("1",find('display').value.length);
}
}
function keyHandler()
{
keys=new Array();
keys[97]=("1");
keys[98]=("2");
keys[99]=("3");
keys[100]=("4");
keys[101]=("5");
keys[102]=("6");
keys[103]=("7");
keys[104]=("8");
keys[105]=("9");
keys[96]=("0");
keys[13]=("equal");
keys[107]=("plus");
keys[110]=("dot");
keys[109]=("minus");
keys[106]=("times");
keys[111]=("divide");
keys[110]=("dot");
keys[8]=("back");
keys[27]=("clear");
kc=window.event.keyCode;
if(keys[kc]!=undefined)
{
cColor('#333399');
setTimeout('cColor("lightblue")',100);
find(keys[kc]).click();
}
return false;
}
function cColor(bcolor)
{
find(keys[kc]).style.background=bcolor;
}
function keyOnOff()
{
var b=find('keychoice').checked
if(b==true)
{
document.onkeydown=keyHandler;
}
else
{
document.onkeydown="";
}
}
function checkHandler()
{
var e=find('keychoice').checked
if(e==false)
{
e=true;
}
else
{
e=false;
}
keyOnOff();
}
</script>
</head>
<body>
<table cellspacing="0" border="1">
<thead>
<th colspan="6" class="header">Web Calculator</th>
</thead>
<tr>
<td colspan="6"><input type="text" size="43" id="display" value="0."></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="Backspace" id="back" class="back" onclick="backSpace()"></td>
<td colspan="2"><input type="button" id="ce" value="CE" class="back" onclick="clearDisplay()"></td>
<td colspan="2"><input type="button" id="clear" value="C" class="back" onclick="clearAll()"></td>
</tr>
<tr>
<td><input type="button" class="functbut" value="MC" onclick="Mclear();"></td>
<td><input type="button" class="button" id="7" value="7" onclick="showMe(ƍ')"></td>
<td><input type="button" class="button" id="8" value="8" onclick="showMe(Ǝ')"></td>
<td><input type="button" class="button" id="9" value="9" onclick="showMe(Ə')"></td>
<td><input type="button" class="functbut" id="divide" value="/" onclick="calcEm(3)"></td>
<td><input type="button" class="button" id="sqrt" value="sqrt" onclick="getRoot();"></td>
</tr>
<tr>
<td><input type="button" class="functbut" value="MR" onclick="Mrecall();"></td>
<td><input type="button" class="button" id="4" value="4" onclick="showMe(Ɗ')"></td>
<td><input type="button" class="button" id="5" value="5" onclick="showMe(Ƌ')"></td>
<td><input type="button" class="button" id="6" value="6" onclick="showMe(ƌ')"></td>
<td><input type="button" class="functbut" id="times" value="*" onclick="calcEm(2)"></td>
<td><input type="button" class="button" id="perc" value="%" onclick="getPerc()"></td>
</tr>
<tr>
<td><input type="button" class="functbut" value="MS" onclick="Mreplace();"></td>
<td><input type="button" class="button" id="1" value="1" onclick="showMe(Ƈ')"></td>
<td><input type="button" class="button" id="2" value="2" onclick="showMe(ƈ')"></td>
<td><input type="button" class="button" id="3" value="3" onclick="showMe(Ɖ')"></td>
<td><input type="button" class="functbut" id="minus" value="-" onclick="calcEm(4)"></td>
<td><input type="button" class="button" id="x" value="1/x" onclick="fractIt()"></td>
</tr>
<tr>
<td><input type="button" class="functbut" value="M+" id="memory1" onclick="Mplus();"></td>
<td><input type="button" class="button" id="0" value="0" onclick="showMe(Ɔ')"></td>
<td><input type="button" class="button" id="flop" value="+/-" onclick="invertIt()"></td>
<td><input type="button" class="button" id="dot" value="." onclick="showMe(this.value)"></td>
<td><input type="button" class="functbut" id="plus" value="+" onclick="calcEm(1)"></td>
<td><input type="button" class="functbut" id="equal" value="=" onclick="calcEm(0)"></td>
</tr>
<tr>
<td colspan="6" class="header">Num Pad On:<input type="checkbox"
id="keychoice" onclick="checkHandler();keyOnOff();"></td>
</tr>
</table>
</body>
</html>
Happy Calculating...
View 3 Replies
View Related
Feb 17, 2010
I'm using XHR to make some REST requests. Right now I need to handle HTTP 401 responses.When a resource is requested such as a Javascript file or CSS file the browser will popup a prompt for username and password, which is normal behaviour.When I make an XHR request for POST,GET or PUT I get an XHR response which includes a status of 401 and no popup from the browser, this is also normal.The problem is when I make a DELETE request, I get the expected XHR response AND also the browser still pops up the username and password prompt.
View 1 Replies
View Related
Jul 6, 2006
Does anyone know of a basic Javascript Rich Text Editor that dosen't have too many features. I don't want smily faces or the ability to insert images, only the basic text formatting. All the ones i found on google are packed full of extras i don't need.
View 1 Replies
View Related
Aug 3, 2007
im need to create s simple CMS/WYSIWYG, but im not a pro on js. I found one on a website, but i dont want to resort to stealing codes.
basically, theres a textarea, where you put in text, and a button for bold, italics and underline, etc. if i highlight something on the textarea and hit the bold button, the text automatically gets surrounded by the <b></b> tags, or or whatevers convinient. when i look at the inline js code from the button, it calls a function, but id rather simplify the code, it should be something like onclick=insertstyle("b","textarea_name");
View 20 Replies
View Related
Aug 7, 2006
I have the source code to an old BASIC program that a friend of mine
would like to run online. I am a beginner at JS, but I think that it
would be a good choice for the project. My background is in C/C++ and
web development.
Any suggestions that might get me off to a good start here? I can
provide more information if needed, but I am not sure what would be
helpful. The program is 550 lines in what appears to be BASIC and is a
calendar conversion program. You give it a date and it will convert it
into one of many other date reckoning systems (Gregorian, Hebrew,
Egyptian, etc, etc).
View 10 Replies
View Related
Jan 29, 2004
Here is a very basic simulated editable combo box for quick and dirty uses.
After any text input on a form you simply add a...
<script>fancycombo("[inputid]combo","[inputid]","[option1]","[option2]","[option3]")</script>
You must give the input an id as well as a name. They don't have to be the same thing, but its recommended.
NS broke when I was cleaning up the code. Searching for the error.
View 12 Replies
View Related
Mar 17, 2010
How to do Basic authentication using Ajax
View 1 Replies
View Related
Oct 14, 2004
I have a <FORM> with several text based input controls in it, and for some reason, although I have assigned ID values to these control, when I attempt to run any JavaScript error checking on them I get JS Error messages for some reason.
To simplify where I have gone wrong, I have written a simple JS alert message as follows...
alert(document.getElementById['first_name'].value);
and the <FORM> control I have is...
<form name="paypal_send">
<input type="text" id="first_name" name="first_name2" value="hello" />
</form>
But for some reason I am getting this error message...
Error:'document.forms.paypal_send.getElementById.first_name' is null or not an object.
This is really pulling my hair out, as can be seen, the inout control has an ID??
View 9 Replies
View Related
Apr 2, 2005
I've been looking at all the various image replacement techniques..and they all seem unnecessarily complicated. I came up with:
function replaceLogo() {
document.getElementById('header').innerHTML = '<img src="/images/logo-tci.gif" />'
}
It's just replacing the layer contents at a very basic level.
This works just fine, I'm just wondering how well supported it would be across different browsers. Anyone know of a table of browsers that support innerHTML or see potential cross-browser issues with this technique?
View 2 Replies
View Related
Feb 13, 2010
How would I write this in code?
Code:
View 4 Replies
View Related
Jul 23, 2005
I would like to allow a user to browse his local directories, choose an
image (probably .jpeg) file, and upload it to the server (a servlet). The
same functionality that online datiing agencies use to let people save their
photograph with their profiles. (My application is an online Want Ads.)
I feel that this must be possible within a minimal client (without a JVM)
using nothing more than JavaScript, but I'll be damned if I can find how.
Would one of you more experienced JavaScript people please point me in the
right direction.
View 5 Replies
View Related
Jul 23, 2005
In a nutshell, I'd like to have a list of items, each of which fills out a
small table which displays some info about a particular item(the items being
a trouble ticket for a tech support ASP-built web-based app). There may be
zero, one, or many of these per ticket. Since some tickets have many of
these items (call them work items), the page can get awful long. I have this
part working already.
So my proposed solution to make the pages shorter would be to have one line
for each of these little work items. If you click the text in that one line,
it shows what had been a hidden div. If you click it again, it hides it.
See below:
View 5 Replies
View Related
Jun 14, 2006
Sorry I couldn't find appropriate group for
SVG and ECMAScript. Since SVG is in XML format
and ECMAScript is very similar to JavaScript.
What's why I post in these two groups.
In the O'Reilly SVG book, in chapter 11
Animating and Scripting SVG. It mentions
some very basic functions like
var circle = event.getTarget();
var obj = svgDocument.getElementById("idName");
I got error message said these are no a function
in Firefox and batik-squiggle.jar
When I used SVGView plug-in (made by Adobe) for IE .
I typed:
var svgObject = evt.target;
var svgDoc = svgObject.getOwnerDocument();
var svgElement = svgDoc.getElementById(idName);
var svgStyle = svgElement.getStyle();
svgStyle.setProperty('stroke-width', 3);
These lines are working fine for SVGViwe Plug-in by
not work for Firefox and batik.
They complained that getOwnerDocument is not a function.
I tried to change getSVGDocument but no luck.
Is that O'Reilly book too old? Its first editoin is 2002.
How can I make getElementById() working in Firefox and Batik?
Is there some examles or some documents?
View 1 Replies
View Related
