Preserved Topic: "div" tags (Page 1 of 1)

hello!

How much Am i suggested to put "div" tags in my html?

Actually what I'm trying to do is a fast search routine like "Display as you type" or whatever it's called something like most program does, say explorer.exe: when you type "syste" explorer automatically scrolls and highlights the first matching string.
Actually I can do that too with JavaScript and what I thought of is associating a "div" tag with each searchable element, say:

"table""tr""td" item 1"/td""/tr"
item2
item3
item4

I can associate a "div" tag like:
"table""tr""td""div id="divitem1""item1"/td""/tr"

now I associate the fast search with a text box and whenever the user types a string i scroll the page to the nearest match...
Any suggestion?

Does such thing exist before?

-lallous

You know, IE is GREAT for things like this...it uses an object called TextRange...great, very powerful stuff. Too bad Netscape can't keep up on this front. This, combined with the insertAdjacentHTML and insertAdjacentText, allows you to amend, append, delete, find, go to, move....(insert essentially any verb here)...any text in the body of your document, all via Script. All on the fly...that is, without ever refreshing the page. Very powerful stuff.
Interested?? Just say so and I'll tell you more. Just remember that this stuff is not at all workable in Netscape. There may be some complicated workaround, but this is really IE's strongpoint.

mobrul

Tell me more, please.

WARNING!! This post is loooooonnnnnnnnggggggggggggg. Very long.

OK, this is my lunch hour. I will ramble aimlessly until I have to get back to work...hopefully I'll come back some later time.
Keep up, I drive kinda fast.

We all know about document.write(). This allows us to write as the page is loading. If one loads a page, then by some JS function executes a document.write() then the original contents of the page go away and the 'new' contents (provided by the document.write() ) appear. This is great...but is NOTHING compared to the awesome power of IE.
IE allows one to Dynamically change the HTML of one's page...without ever reloading...all through some very powerful objects.

1)innerText, innerHTML, outerText, outerHTML
These objects allow one to access specific elements in an HTML page (Div, P, etc.) and change them on the fly via Script. innerText simply shows the new string as plain text. innerHTML renders the new string as HTML, outerText interprets the new string as text, and destroys the element that was originally there and outerHTML renders the new string as HTML and destroys the original element. This is kinda tough, so I shall give an example.

this is the original HTML on a page

<div id='div1' class='italics'>
<div id='div2' class='plain_text'>
Welcome to the Ozone.
</div>
</div>

This would render in a browser as:

Welcome to the Ozone.

Now, one could write a function that goes like this.

function change(){
document.all.div2.one_of_the_4_above_mentioned_objects = "Krets has <b>got</b> the pregers.";
}

Now this is how your page would look after each of the 4 funcitons has been run.

original page
Welcome to the Ozone.

innerText
Krets has <b>got</b> the pregers.

innerHTML
Krets has got the pregers.

outerText
Krets has <b>got</b> the pregers.

outerHTML
Krets has got the pregers.

Everybody get it so far?? Notice in the innerText and innerHTML, the only thing that was replaced was what was IN div2. In outerText and outerHTML the ENTIRE div2 was replaced.

That is the simple part. On to bigger and better things.
2 more objects to learn:
insertAdjacentHTML(where, what)
insertAdjacentText(where, what)

You may have noticed that, where document.write() replaces the entire page, inner/outerHTML/Text (I'll just call that IOHT from now on...) replaces the element. Kinda cool, but we always want more.

insertAdjacent....(I'll call that IAHT) allows you to ADD text or code to an already existing and populated element. The object has 2 peramaters...they are 'where' and 'what.'
The 'where' has 4 possible properties...they are:
BeforeBegin
AfterBegin
BeforeEnd
AfterEnd

The 'what' is simply what you want to add to the already existing code...I shall give more examples.

//original code
<div id='div1' class='italics'>
<div id='div2' class='plain_text'>
Welcome to the Ozone.
</div>
</div>

now we will add a similar function to the earlier one:

function change(){
document.all.div2.choose_an_object("where","Krets has <b>got</b> the pregers.")
}

original text
Welcome to the Ozone.

insertAdjacentHTML("BeforeBegin","Krets...")
Krets has got the pregers.
Welcome to the Ozone.

insertAdjacentHTML("AfterBegin","Krets...")
Krets has got the pregers.
Welcome to the Ozone.

insertAdjacentHTML("BeforeEnd","Krets...")
Welcome to the Ozone.
Krets has got the pregers.

insertAdjacentHTML("AfterEnd","Krets...")
Welcome to the Ozone.
Krets has got the pregers.

insert AdjacentText("BeforeBegin","Krets...")
Krets has <b>got</b> the pregers.
Welcome to the Ozone.

I don't think that I need to go any further...you all get the point, right? Anyway, notice that you can point at an existing element and insert either Text or HTML before that element, after that element, inside the element at the beginning or inside that element at the end.

This is some very powerful stuff indeed. Note that you can use this ONLY to write to the HTML code. One can not dynamically write Script or CSS. This is too bad, but dynamically writing HTML is cool stuff indeed.

These powerful objects, IMHO, are what is going to set IE apart from Netscape in the very near future...unless NS or Mozilla catches up soon. This ability to dynamically write HTML opens up the possibility of using browers for real applications...that is some serious shit.
Lunch is over, so to conclude I shall leave you with a small piece of this code that I wrote for our company's intranet.
Tomorrow we will cover the TextRange object...the most powerful one of them all.


function showFavs(x,y,num){
it_name = item_name[parseInt(num)];
it_icon = item_lg_icon_url[parseInt(num)];
document.all.body.insertAdjacentHTML("AfterBegin","<div id='divFavs' style='position:absolute; top:0; left:0; visibility:hidden; height:45; width:45; clip:rect(0,45,45,0); z-index:10'><img id='imgFavs'src='' alt=''></div>");
eval("document.all.divFavs.id='divFavs"+numfavs+"'");
eval("document.all.imgFavs.id='imgFavs"+numfavs+"'");
eval("document.all.imgFavs"+numfavs+".src='"+it_icon+"'");
eval("document.all.imgFavs"+numfavs+".alt='"+it_name+"'");
eval("document.all.divFavs"+numfavs+".style.left=x");
eval("document.all.divFavs"+numfavs+".style.top=y");
eval("document.all.divFavs"+numfavs+".style.visibility='visible' ");
favsicon[parseInt(numfavs)] = it_name;
numfavs = favsicon.length;
favsmem[parseInt(favsmem_length)] = it_name;
favsmem_length = favsmem.length;
initialize();

}

//*********************************************************
favsmem, numfavs, it_name, it_icon are all arrays that are kept in the script
initialize() points to the function that creates objects
Now that the new div is created, and we know it's name, it can be written to via the innerHTML or innerText
that we discussed earlier.
This can be done almost without limit...(I think arrays are limited to something like 4 trillion items)
Everytime a user does x action, a new div can be created and fed info from that action.
***********************************************************//

hope you enjoyed...see you all tomorrow

mobrul

Mozilla is also very good at this... Take a look at: http://www.pbwizard.com/Articles/Moz_Range_Object_Article.htm

Nice, mobrul, keep it coming please.

mobrul -

You should just write this up and we'll make it a tutorial over at Gurus Network.

Pat Richard
A pixel is worth a thousand words.
http://www.gurusnetwork.com
ICQ 23113317

Note that IE isn't the only browser to support this... if you replace document.all.id with document.getElementById("id") then it should work in other browsers (although it wont work in IE 4). Also note that these methods should work with *anything* that has an id, not just a DIV tag. Of course, absolutely none of this will work in NN 4.x.

Actually, Slime, innerHTML & outerHTML are implemented in Mozilla, only by popular demand (it's not part of W3C standard). It should be done differently using ranges, but that's another story...

Hey fellas...slow down.
I'll get to all of that tomorrow...just be patient
Till then...

mobrul

guys!
that wasn't what i was asking for...i'll make it more simpler:

Can i put like about 1000 DIV tag in my html file?
any sort of restrictions of bad-behaviours from the Browser side?

-=l=-

Why would you need 1000 divs, when you can have only one and dynamically change it's content using innerHTML property?

Lunch time again...and on to TextRange
lallous, hang in there. I was hoping to get to this yesterday but ran out of time...really everything yesterday was a lead up to today, TextRange. I think, if I understand what you are trying to do, this TextRange thing can really help you...and is a lot simpler too.

TextRange
The TextRange object is a range of text, with a possible length of characters being any non-negativeinteger--that is any whole number from 0 to infinity, inclusive of zero (obviously you can't really have an infinite # of characters on your page.)
You can define that range using createTextRange() and them modify that range of text in a lot of different ways--including, but not limited to, adding text to that range, erasing text, focusing on that text, hilighting that text, moving the text, etc. As you can see, this has enormous potential.

Let's start with how to create a TextRange. First, a TextRange (TR) is stored in memory, as a variable, and can encompass the content of the BODY, a BUTTON, INPUT, or TEXTAREA. To get started is easy. Define a variable in your script that points to the text range:

var george = document.body.createTextRange()

Now the entire body is a TR and can be accessed by you via the variable george.

The second step is to use the TR methods to modify that range to suit you. Some of the TR methods that are particularly helpful for lallous' problem are:
collapse()
findText()
scrollInt_o_View()

<edit>sorry I had to put the underscores in there...just pretend they aren't there...damn censored words...C*****n C*****n C*****n C*****n C*****n C*****n C*****n C*****n C*****n C*****n C*****n C*****n C*****n C*****n C*****n C*****n C*****n C*****n C*****n C*****n C*****n !!!!</edit>


There are many many more ways you can manipulate your TR and many things that you can do with it once you have it. In the interest of relative brevity I will only focus on lallous' problem.

Now that we have the TR defined as george (the TR is still the entire body...we haven't yet modified it), we can introduce a second TR. This will be the word that the user types into the search box. We will call that var fred.

So we now have a string--fred--which is the word or phrase that your user is looking for, and you have a TR--george--which is the entire body of your text.

Now it is time to manipulate your TR, to narrow it to be simply that which matches fred.

function findLalloussearch(){
if (fred && george.findText(fred)){

//then scroll it into view on the page

george.scrollInt_o_View()

<edit>AAAAAAAAAAHHHHHHHHHHHHHH!!! a second time!!!!</edit>

}
}

There you have it, you have just performed a search on your page.

Of course there are numerous other things you can do at this point...you could have manipulated the TR such that you could write <div> tags around the sentence that contains your text, then give that div a class that would change the color of the text... you could copy that text to your user's clipboard...you could rewrite the sentence, paragraph or any part of anything on the page to respond to something your user does...the options are virtually limitless. This is, by far, the most powerful dynamic tool that browsers offer.

There is one thing that i would like to amend about my post yesterday. I did a little more research after I got chastized by Slime and Mr. Max. It seems that while NN 4. doesn't support this...and neither does the W3C...and neither does IE 4. for Mac, the later browsers are supporting this or very similar to this. My sincerest apologies to those who were ill-effected by my wrong information. I shall do more research next time.
I don't do a lot of work with NN, the HTML work that I do is mostly limited to our intranet and we all run IE5.5. NN standards are virtually academic for me. I know that is not a good attitude to have but I am not primarily a web designer by trade. I do what I must to get the job done...maybe one day I'll get better.

I hope, lallous, that this has enlightened you a bit. I tried to keep today's post a bit shorter than yesterdays.

Now you all should be writing dynamic pages...updating images and creating tables all based on what your user does...and all client side with no reloading.
I just barely skimmed the surface with this TR. There are about 30 methods that one can use to modify your TR...i only touched on 2. This is really sweet stuff that i don't think is utilized near enough. hopefully soon.

mobrul

[This message has been edited by mobrul (edited 05-17-2001).]

[This message has been edited by mobrul (edited 05-17-2001).]

*applause*

Very, very useful thread!
Thanx a lot!
Dan

~glup~
err yeah... don't understand anything about it...
well yeah i will learn someday......

Do Not under estimate the power of JOHN DOE

since this was orignally intended to answer lallous' question, I must ask...

Lallous, everything doing OK?
Got your problem worked out yet?
Let's see it!

mobrul

It helped me. Thanks, man.

In fact, mobrul, I did this with it. Every DIV in the page is generated in script, then filled with content, then positioned and hidden/shown. It's the first DHTML i really wrote.