I'm developing a web-template editor for a client, and they want it to update the changes in real-time using javascript. So, in other words, when a person selects a different background image, I use:
document.body.style.backgroundImage="url("+bgimg+")";
Well, I've run into a little problem. I can't seem to find any manual on what comes after style.*
So far, I've seen style.color, style.backgroundImage, style.backgroundRepeat, style.backgroundColor. But, I'm looking for something that can control text-decoration, font-weight and a:hover
Does anyone no where I can find a list of all properties support after style.*?
I have an application where a user can create a newsletter with a contenteditable div box and submit it to a database. The problem occurs when the user tries to edit their newsletter. The edit page looks exactly like the create page only their already created newsletter is supposed to appear in the contenteditable div box. To do this I retrieve the information from the database in the server side. Then I have the following client side script.
window.onload=doInit function doInit() { var content = "<%=sContent%>"; div.innerHTML = content; }
This seems to work in all cases except if the HTML to be displayed contains any style attributes. For example, if any of the text has background color then the HTML code will have the tag <font style="bacground-color: #000000"> and this will cause nothing to appear in the div box. Has anyone run into this problem or know how to fix it?
OK, been banging my head with this for a while. I have a dynamic sitewhere we get a list of elements from the database, we identify theseitems with id numbers and encoded get strings. So I'm trying to getstyle changes to take affect with jquery and it really just doesn'twork.I'm not sure what I'm doing wrong. Here is the source code:
given a cell from a table... function Tbl_GetCell(tbl, row, col) { var theRow = tbl.getElementsByTagName("tr")[row]; return theRow.getElementsByTagName("td")[col]; }
I can set attributes like width, height, and align, but how can I set cell style info?
cell = GetCell(tbl,row,col) these work fine... cell.align = "center"; cell.height = 22; but this doesn't... cell.style = "font-weight: bold; text-decoration: blink"
I'm having trouble with some flash players that don't abide by the style attribute of the div they're created in using Javascript. When the flash-players' source is hard-coded into the page source they render fine, but the more players, the more bloat as you can see in the source of the original page.
Example: [URL] Original Page with old code: [URL] The problem code: <script type="text/javascript"> function clv(obj){ var strst="[URL]"; var strnm=obj; .....
where you can change all of the page's background attributes..I was wondering if there was a similar one for font so that I can change the face, size, and color of all font on the page at once (when the page loads)I want this code in javascript because I want the font style and the background color in my page generated instead of fixed
if I have an html page that uses the <style> or a <link> to call a style sheet these properties aren't available to JavaScript is there a good way to access them? eg
<html> <head> <title>expandable text area</title> <style type="text/css">
I know that I can get (eg) the href attribute via $('a').attr('href') BUT I would like to do the following :
get *all* the attribute names and values without knowing anything about the attribute names and values in advance (or even how many there are) - something like a loop and $('a').(attribute name, attribute value). I suppose they would best be placed in a JavaScript object as a set of name/value pairs eg { href: 'page.htm', id: 'foo', alt: 'alt text' }
function overlay(e,num) { var targ; if (!e) var e = window.event; if (e.target) targ = e.target; else if (e.srcElement) targ = e.srcElement; if (targ.nodeType == 3) // defeat Safari bug targ = targ.parentNode; targ.src = fdot[num].src;}
Overlay is called as an onmouseover event from an image's map AREA tag, sending event and a number. FF's JS Console spits out that fdot has no properties. Ideas? Better ways to do this effect (replace the image depending on which area of the imagemap is mousover'd)?
I need a function that can return any elements attributes when clicked.
Mostly this is for getting link data. But there are a few elements in the Google Maps javascript api that I don't know what type of element they are.
Once I am able to get any clicked elements attributes, I will execute the data in ajax to log the data in my database. Once I have an idea of what needs to be and doesn't need to be tracked, I will apply filters accordingly.
When you need for a certain element (say a text input box) to remember some data, what is the best way to do this? Can you extend the input box object with jquery? Right now i've been storing it in the rel tag $('#testInput').attr('rel','extrainfo') it just seems like there should be a better way to do this.
I have a JavaScript file which Adds and Removes elements when you click a button.
Adding stuff is okay, but removing elements is more complicated.
When you add an element you also add id=x. Each time you add an element x goes up one. For example if I click "add element" 5 times it would be like this:
HTML Code:
If I wanted to remove the thrid element then I would want the following divs to replace it, for example it should look like this:
HTML Code:
I can't figure out how to do this, here is what I tried but it won't work
It works if I specify the actual background image within the function, so I know the image is there, and I know it's been properly assigned to div2, but div1's background image doesn't change.
While trying out some of the code given in the book, I found that passing CSS properties and values in the jQuery is not working somehow. Following is what I have written.
Where as if Ipass CSS properties infollowing way, it is working. But I would need to write multiple statements for that. $('#first tbody tr:even').css('color', '#873450');
function test(id) { alert(document.getElementById(id).style.backgroundColor); }
Why doesn't this work? It returns nothing, but the class, which the element uses, has a background-color value set... ?!?!?! Am i missing something... ?
I am working on a little javascript project, and I need to get an arbitrary element's style information.
For instance, I want a method that you can pass a reference to an object, and for instance, find the current css height property that applies to it, no matter where it was declared. I don't mind it returning a null value if it wasn't set anywhere, but if it's coming from some css class or some css id or some locally defined style, I want to know what is being expressed.
If I just try el.style.height, it only lets you know what the height is if it was explicitly defined in the style tag.
i am trying to have text-decoration applied on some text depending on the value of certain variable. If the value of myvar=0 text-deco =none and if it's 1 then text deco= line-trough...
Kind of the same thing that emails web apps like yahoo or gmail do with mails read or unread if it's unread then email title/subject is bold/strong but if it's read then email title is in normal font-weight...
here is some piece of code i have written to do that
the text on which i want to apply the conditionnal decoration is a table cell (cell2DisplayCell1), the text itself is inserted by the innerHTML instruction!
I tried to introduce the conditional statement with a function displaylinksLineThrough() which is defined in the second block code... Code:
Any way to remove styling on a parent element with JS (as it can't be done in CSS). In a situation like this: Code: <p><img src="image1.gif"></p> <p>Brutus aderat forti.</p> <p><img src="image2.gif"></p> <p>Caesar adsum jam.</p>
The <p> element has default padding, but I'd like to remove the padding when the <p> contains an image. This was my failed attempt to target the <p> element: Code: window.onload = paraPad; function paraPad() { var img = document.getElementsByTagName("img"); var imgpara = img.parentNode; for (i=0; i<imgpara.length; i++) { imgpara.style.padding = "0"; }}
