472,802 Members | 1,457 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,802 software developers and data experts.

alternative for outerHTML property which is supported by Mozilla firefox browser


I am using the outerHTML property to modify the HTML of existin
elements in a web page in Internet Explorer. But same outerHTM
property is not working in firefox browser, Anybody can tell me a
alternative for outerHTML property in firefox. I am using th
following function to display an image and alternate text behind al
images of a weg page in Internet Explorer. Anybody can give solutio
for same in firefox browser.

function showimage()
{
var z=0,
tag=new Array('img');
for(n=0;n<tag.length;n++)
{
t=document.getElementsByTagName(tag[n]);
arr_lst=new Array();
{
for(i=0;i<t.length;i++)
{
{
var l;
if ((t[i].attributes.alt.specified) && (t[i].alt!=0) &
(t[i].alt!="") && (t[i].alt.toLowerCase()!=".gif") &&
(t[i].alt.toLowerCase()!=".jpg") && (t[i].alt.toLowerCase()!=".png") &
(t[i].alt.toLowerCase()!="bytes") && (t[i].alt.toLowerCase()!="kb") &
(t[i].alt.toLowerCase()!="click here") &
(t[i].alt.toLowerCase()!="more"))
{
l='alt=\"'+t[i].alt+'\"';
h=t[i].outerHTML;
t[i].outerHTML='<INPUT TYPE="image" alt="Valid Alt Text
SRC="http://www.rampweb.com/toolbar/Images/alt_good.gif"><spa
style=\"color:#91060A;font:x-small arial;background:#FFFFC0;\"><b>'+
'+l+'</b></span> '+h;
t[i].style.padding='3px',t[i].style.border='1px solid #91060A';
}
else if ((t[i].attributes.alt.specified)&&(t[i].alt==0) &
(t[i].alt==""))
{
l='<INPUT TYPE="image" alt="Empty alt text"
SRC="http://www.rampweb.com/toolbar/Images/alt_empty.gif">';
h=t[i].outerHTML;
t[i].outerHTML='<span style=\"color:#91060A;font:x-small arial;\">
+l + '</span>'+h;
t[i].style.padding='3px',t[i].style.border='1px solid #91060A';
}
else if ((t[i].attributes.alt.specified) && (t[i].alt!=0) &
(t[i].alt!="") && (t[i].alt.toLowerCase()==".gif" |
t[i].alt.toLowerCase()==".jpg" || t[i].alt.toLowerCase()==".png" |
t[i].alt.toLowerCase()=="bytes" || t[i].alt.toLowerCase()=="kb" |
t[i].alt.toLowerCase()=="click here" |
t[i].alt.toLowerCase()=="more"))
{
l='alt=\"'+t[i].alt+'\"';
h=t[i].outerHTML;
t[i].outerHTML='<INPUT TYPE="image" alt="Warning: Make sure alt i
descriptive
SRC="http://www.rampweb.com/toolbar/Images/alt_warning.gif"><spa
style=\"color:#91060A;font:x-small arial;background:#FFFFC0;\"><b>'+
'+l+'</b></span> '+h;
t[i].style.padding='3px',t[i].style.border='1px solid #91060A';
}
else
{
l='<INPUT TYPE="image" alt="Error: missing alt text
SRC="http://www.rampweb.com/toolbar/Images/alt_error.gif">';
h=t[i].outerHTML;
t[i].outerHTML='<span style=\"color:#91060A;font:x-smal
arial;\">'+l+'</span>'+h;
t[i].style.padding='3px',t[i].style.border='1px solid #91060A';
}
}
if(h!='')
z=z+1;

}
}
}
if(z==0)
alert('No Images')

--
prasaddevivar
-----------------------------------------------------------------------
prasaddevivara's Profile: http://www.highdots.com/forums/member.php?userid=9
View this thread: http://www.highdots.com/forums/showthread.php?t=134380

Jul 23 '05 #1
1 13163
prasaddevivara wrote:
I am using the outerHTML property to modify the HTML of existing
elements in a web page in Internet Explorer.
As near as I can tell, outerHTML is being using to create new input
elements and insert them just before image elements. The attributes of
the new element seem to be dependent on the contents of the alt
attribute of the image elements.

So far so good?
But same outerHTML
property is not working in firefox browser,
Firefox does not support outerHTML.
Anybody can tell me an
alternative for outerHTML property in firefox.
There is no direct alternative, however the same functionality can be
achieved using DOM methods.
I am using the
following function to display an image and alternate text behind all
images of a weg page in Internet Explorer. Anybody can give solution
for same in firefox browser.

I can offer suggestions, but I can't test your code. Please replace
tabs with 2 spaces for indenting before posting and manually wrap code
at about 70 characters to prevent auto-wrapping, otherwise syntax
errors are likely to be unnecessarily introduced.
function showimage()
{
var z=0,
tag=new Array('img');
for(n=0;n<tag.length;n++)
{
t=document.getElementsByTagName(tag[n]);
arr_lst=new Array();
arr_lst is a global variable that does not seem to ever be used. A
rather convoluted method is used to get the images collection - an
alternative is to get the collection directly using a local variable:

var t = document.images;

I presume that this is the basis for tests of a variety of HTML tags,
however why not just use an existing validator (e.g. the free W3C
validator)?
{
This brace can likely be safely omitted, it appears to have no useful
purpose.
for(i=0;i<t.length;i++)
Rather than evaluating the length of t each time, use a local variable
and keep i local too:

for( var i=0, len=t.length; i<len; i++ )
{
{
Another useless brace...
var l;
Some like to declare variables just before they use them, but it's
easier to maintain code (to me, anyway) if the ancient practice of
declaring them all at the start is followed. Opinions vary.

Since t[i] is used a lot, it is likely more efficient to use a local
variable to keep a reference to it:

var img = t[i];
if ((t[i].attributes.alt.specified) && (t[i].alt!=0) &&
(t[i].alt!="") && (t[i].alt.toLowerCase()!=".gif") &&
(t[i].alt.toLowerCase()!=".jpg") && (t[i].alt.toLowerCase()!=".png") &&
(t[i].alt.toLowerCase()!="bytes") && (t[i].alt.toLowerCase()!="kb") &&
(t[i].alt.toLowerCase()!="click here") &&
(t[i].alt.toLowerCase()!="more"))
{
The above block makes 8 calls to t[i].alt.toLowerCase(), which is very
wasteful of processor effort. Use one call, store the result in local
variable 'talt' and then test that.

var talt;
if ( img.attributes.alt.specified &&
(talt = img.attributes.alt.toLowerCase()) &&
0 != talt &&
'' != talt
) {
if ( talt != ".gif" &&
talt != ".jpg" &&
talt != ".png" &&
talt != "bytes" &&
talt != "kb" &&
talt != "click here" &&
talt != "more"
) {
So test, get value and convert to lower case once.
l='alt=\"'+t[i].alt+'\"';
h=t[i].outerHTML;
h will be global, may as well keep it local and declare it at the start
with z and l.
t[i].outerHTML='<INPUT TYPE="image" alt="Valid Alt Text"
SRC="http://www.rampweb.com/toolbar/Images/alt_good.gif"><span
style=\"color:#91060A;font:x-small arial;background:#FFFFC0;\"><b>'+'
'+l+'</b></span> '+h;
t[i].style.padding='3px',t[i].style.border='1px solid #91060A';
}
Here you effectively insert a new element before the image element
referenced by t[i]. A way to implement the DOM equivalent is to use a
function that will create the new element based on some parameters that
you pass, then insert it before t[i].

There is also a span tag applying some style stuff, so include the <b>
element in the style statement.

function addInp(img, tAlt, tSrc, tColor, tFont, tBG) {
var oInp = document.createElement('INPUT');
oInp.type = 'image';
oInp.alt = 'Valid Image Text';
oInp.src = tSrc;

var oSpan = document.createElement('SPAN');
oSpan.color = tColor;
oSpan.style.font = tFont;
oSpan.style.backgroundColor = tBG;
oSpan.style.fontWeight = 'bold';

var oTxt = document.createTextNode('alt="' + tAlt + '"');
oSpan.appendChild(oTxt);

img.parentNode.insertBefore(oInp, img);
img.parentNode.insertBefore(oSpan, img);
}
So you can conditionally do your outerHTML stuff or use DOM:

if ( document.createElement ) {
addInp( img, 'Valid Alt Text', 'a.gif',
'#333399', 'x-small arial', '#FFFFC0');

} else if ( img.outerHTML ) {
// the outerHTML stuff from above

} else {
return null;
}

img.style.padding = '3px'
img.style.border = '1px solid #91060A';
Assuming support for the style object.

I'm not sure this is an appropriate use of an input. Why not just
insert an image?
else if ((t[i].attributes.alt.specified)&&(t[i].alt==0) &&
(t[i].alt==""))
This could just be an else at the end of the outside if loop and also
use the conditional DOM method.
{
l='<INPUT TYPE="image" alt="Empty alt text"
SRC="http://www.rampweb.com/toolbar/Images/alt_empty.gif">';
h=t[i].outerHTML;
t[i].outerHTML='<span style=\"color:#91060A;font:x-small arial;\">'
+l + '</span>'+h;
t[i].style.padding='3px',t[i].style.border='1px solid #91060A';
} else if ((t[i].attributes.alt.specified) && (t[i].alt!=0) &&
(t[i].alt!="") && (t[i].alt.toLowerCase()==".gif" ||
t[i].alt.toLowerCase()==".jpg" || t[i].alt.toLowerCase()==".png" ||
t[i].alt.toLowerCase()=="bytes" || t[i].alt.toLowerCase()=="kb" ||
t[i].alt.toLowerCase()=="click here" ||
t[i].alt.toLowerCase()=="more"))
{
This block can go second so you don't have to test the first three
conditions again.

} else if (
talt == ".gif" ||
talt == ".jpg" ||
talt == ".png" ||
talt == "bytes" ||
talt == "kb" ||
talt == "click here" ||
talt == "more"
) {
l='alt=\"'+t[i].alt+'\"';
h=t[i].outerHTML;
t[i].outerHTML='<INPUT TYPE="image" alt="Warning: Make sure alt is
descriptive"
There are times when the alt attribute should be empty:

<URL:http://www.w3.org/TR/html4/struct/objects.html#adef-alt>

I also think you will have a very difficult time deciding what is
appropriate text - though what you have coded is likely a sub-set of
inappropriate text values.
SRC="http://www.rampweb.com/toolbar/Images/alt_warning.gif"><span
style=\"color:#91060A;font:x-small arial;background:#FFFFC0;\"><b>'+'
'+l+'</b></span> '+h;
t[i].style.padding='3px',t[i].style.border='1px solid #91060A';
}
else
{
l='<INPUT TYPE="image" alt="Error: missing alt text"
SRC="http://www.rampweb.com/toolbar/Images/alt_error.gif">';
h=t[i].outerHTML;
t[i].outerHTML='<span style=\"color:#91060A;font:x-small
arial;\">'+l+'</span>'+h;
t[i].style.padding='3px',t[i].style.border='1px solid #91060A';
}
}
Delete a curly brace?
if(h!='')
z=z+1;

}
}
Delete a curly brace?
}
if(z==0)
alert('No Images');

--
Rob
Jul 23 '05 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

8
by: Kyle | last post by:
I am presently making use of documentElement.innerHTML to retrieve page contents for manipulation, but I've noticed that the sting value returned is not identical to the actual page source....
3
by: Pai | last post by:
Hello there, I have the following peice of javascript which works with IE but would not work with mozilla. In IE the first for loop is entered but in mozilla i would not enter the for loop...
4
by: Jon Drukman | last post by:
i'm using the following construct to access form fields within an iframe: var x = document.getElementById('prefs_iframe').contentWindow.document.forms; works great in IE and Mozilla/Firefox. ...
2
by: Robert Oschler | last post by:
I have Javascript code that clears the SRC property of an IFRAME during the onload event of a web page, if a certain flag is set. In Mozilla/FireFox the clearing of the SRC property works fine and...
4
by: Laurent Compere | last post by:
Hi all, I try to make a logo fade in. I wrote the code below that is simple and supposed to be compatible with IE6,Firefox and Netscape. It works pretty well under IE6 but under Firefox and...
0
by: BACON | last post by:
I'm just starting the process of reorganising my modest little website and cleaning up all the HTML, and the logical place to begin was with the homepage. I made a simple little ASP.NET control...
5
by: BACON | last post by:
I'm just starting the process of reorganising my modest little website and cleaning up all the HTML, and the logical place to begin was with the homepage. I made a simple little ASP.NET control...
1
by: rishabhshrivastava | last post by:
Hey All, I want to get the OuterHtml in a TextBox and I am using following code but I am getting value as "undefined" Please let me know if I am doing anything wrong.. function GetValue() {...
7
by: =?iso-8859-1?q?Jesper_R=F8nn-Jensen?= | last post by:
Hi. I just ran into a situation where I want to emulate the IE specific obj.click() syntax on an object on the webpage. The most convenient thing for me is if I were able to just select my ...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 2 August 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: erikbower65 | last post by:
Using CodiumAI's pr-agent is simple and powerful. Follow these steps: 1. Install CodiumAI CLI: Ensure Node.js is installed, then run 'npm install -g codiumai' in the terminal. 2. Connect to...
0
linyimin
by: linyimin | last post by:
Spring Startup Analyzer generates an interactive Spring application startup report that lets you understand what contributes to the application startup time and helps to optimize it. Support for...
0
by: erikbower65 | last post by:
Here's a concise step-by-step guide for manually installing IntelliJ IDEA: 1. Download: Visit the official JetBrains website and download the IntelliJ IDEA Community or Ultimate edition based on...
0
by: kcodez | last post by:
As a H5 game development enthusiast, I recently wrote a very interesting little game - Toy Claw ((http://claw.kjeek.com/))。Here I will summarize and share the development experience here, and hope it...
0
by: Taofi | last post by:
I try to insert a new record but the error message says the number of query names and destination fields are not the same This are my field names ID, Budgeted, Actual, Status and Differences ...
14
DJRhino1175
by: DJRhino1175 | last post by:
When I run this code I get an error, its Run-time error# 424 Object required...This is my first attempt at doing something like this. I test the entire code and it worked until I added this - If...
5
by: DJRhino | last post by:
Private Sub CboDrawingID_BeforeUpdate(Cancel As Integer) If = 310029923 Or 310030138 Or 310030152 Or 310030346 Or 310030348 Or _ 310030356 Or 310030359 Or 310030362 Or...
0
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.