473,702 Members | 2,450 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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.l ength;n++)
{
t=document.getE lementsByTagNam e(tag[n]);
arr_lst=new Array();
{
for(i=0;i<t.len gth;i++)
{
{
var l;
if ((t[i].attributes.alt .specified) && (t[i].alt!=0) &
(t[i].alt!="") && (t[i].alt.toLowerCas e()!=".gif") &&
(t[i].alt.toLowerCas e()!=".jpg") && (t[i].alt.toLowerCas e()!=".png") &
(t[i].alt.toLowerCas e()!="bytes") && (t[i].alt.toLowerCas e()!="kb") &
(t[i].alt.toLowerCas e()!="click here") &
(t[i].alt.toLowerCas e()!="more"))
{
l='alt=\"'+t[i].alt+'\"';
h=t[i].outerHTML;
t[i].outerHTML='<IN PUT TYPE="image" alt="Valid Alt Text
SRC="http://www.rampweb.com/toolbar/Images/alt_good.gif">< spa
style=\"color:# 91060A;font:x-small arial;backgroun d:#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='<sp an 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.toLowerCas e()==".gif" |
t[i].alt.toLowerCas e()==".jpg" || t[i].alt.toLowerCas e()==".png" |
t[i].alt.toLowerCas e()=="bytes" || t[i].alt.toLowerCas e()=="kb" |
t[i].alt.toLowerCas e()=="click here" |
t[i].alt.toLowerCas e()=="more"))
{
l='alt=\"'+t[i].alt+'\"';
h=t[i].outerHTML;
t[i].outerHTML='<IN PUT 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;backgroun d:#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='<sp an 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 13303
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.l ength;n++)
{
t=document.getE lementsByTagNam e(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.len gth;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.toLowerCas e()!=".gif") &&
(t[i].alt.toLowerCas e()!=".jpg") && (t[i].alt.toLowerCas e()!=".png") &&
(t[i].alt.toLowerCas e()!="bytes") && (t[i].alt.toLowerCas e()!="kb") &&
(t[i].alt.toLowerCas e()!="click here") &&
(t[i].alt.toLowerCas e()!="more"))
{
The above block makes 8 calls to t[i].alt.toLowerCas e(), 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='<IN PUT TYPE="image" alt="Valid Alt Text"
SRC="http://www.rampweb.com/toolbar/Images/alt_good.gif">< span
style=\"color:# 91060A;font:x-small arial;backgroun d:#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.create Element('INPUT' );
oInp.type = 'image';
oInp.alt = 'Valid Image Text';
oInp.src = tSrc;

var oSpan = document.create Element('SPAN') ;
oSpan.color = tColor;
oSpan.style.fon t = tFont;
oSpan.style.bac kgroundColor = tBG;
oSpan.style.fon tWeight = 'bold';

var oTxt = document.create TextNode('alt=" ' + tAlt + '"');
oSpan.appendChi ld(oTxt);

img.parentNode. insertBefore(oI np, img);
img.parentNode. insertBefore(oS pan, img);
}
So you can conditionally do your outerHTML stuff or use DOM:

if ( document.create Element ) {
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.paddi ng = '3px'
img.style.borde r = '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='<sp an 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.toLowerCas e()==".gif" ||
t[i].alt.toLowerCas e()==".jpg" || t[i].alt.toLowerCas e()==".png" ||
t[i].alt.toLowerCas e()=="bytes" || t[i].alt.toLowerCas e()=="kb" ||
t[i].alt.toLowerCas e()=="click here" ||
t[i].alt.toLowerCas e()=="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='<IN PUT 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#ad ef-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;backgroun d:#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='<sp an 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
10903
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. Specifically, attribute assignments that look like: height=100 width=100 in the real source, look like: height="100" width="100"
3
11267
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 any tips / ideas? var tblObj=document.body.getElementsByTagName("TD")
4
6489
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. doesn't work in Safari. my DHTML reference book says that contentWindow is only supported in NN7/IE5.5(Win). what's the DOM-friendly approach to accessing form fields within an iframe?
2
6799
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 the browser does not attempt to load the document. That document being the one that was specified in the SRC property, before it was erased. In Internet Explorer, the code appears to clear the SRC property properly. If I trace the code, the...
4
2023
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 Netscape, I have the same problem : It seems that the property MozOpacity doesn't want to update itself though I cand read its value with the same object reference. Can Anybody try to explain me why ? As a log, I sent several values on the status bar...
0
1428
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 that I can drop into the beginning of any page and it will generate HTML to display my logo, a link, and (optionally) a quote of the day, all of which will be horizontally centered at the top of the page by my default stylesheet. For the main page,...
5
5801
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 that I can drop into the beginning of any page and it will generate HTML to display my logo, a link, and (optionally) a quote of the day, all of which will be horizontally centered at the top of the page by my default stylesheet. For the main page,...
1
2598
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() { document.getElementById("txtBox").value = parent.main.document.documentElement.outerhtml ; return document.getElementById("txtBox").value;
7
10053
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 object document.getElementById('myobj').click() Do you know any cross-browser solutions to that? (must work in firefox as a minimum).
0
8738
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
1
8979
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8939
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6575
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5907
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4412
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4667
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3104
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2399
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.