PDA

View Full Version : Need help with this layer positioning code. Please Help!!!!!

shivboy
11-05-2002, 05:24 AM
hi,

i have been experimenting with this code i wrote. earlier i could not create layers using a for loop which a fine person here (beetle) helped me out with. now i have two problems here.

Problem One

i wish to create an array of layers, so how do i do that? i tried it but it didnt work.

Problem Two

when i use the for loops to create layers. after layer 20 suppose i wish to put the remaining 10 layers in the next row, it doesnt work. it puts the remaining 10 layers in the next row but at the end of the first row while it should be below it from its first layer.why does this happen? (check the code with lines in red)

plz help me.


<script language="JavaScript">
<!--
/////////////////////////////////////////DETECTING BROWSER TYPE\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

function browserSniff()
{
this.ver = navigator.appVersion; //Cheking for browser version
this.agent = navigator.userAgent; //Checking for browser type
this.dom = document.getElementById?1:0; //Checking if IE5+ & NS6+
this.opera5 = this.agent.indexOf("Opera 5")>-1; //Opera detection
this.ie5 = (this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; //Checking if IE5
this.ie6 = (this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0; //Checking if IE6
this.ie4 = (document.all && !this.dom && !this.opera5)?1:0; //Checking if IE4
this.ie = this.ie4||this.ie5||this.ie6; //One common variable for IE detection
this.mac = this.agent.indexOf("Mac")>-1; //If IE for Mac
this.ns6 = (this.dom && parseInt(this.ver) >= 5) ?1:0; //If NS6
this.ns4 = (document.layers && !this.dom)?1:0; //If NS4
this.bs = (this.ie6||this.ie5||this.ie4||this.ns4||this.ns6||this.opera5); //Assigning browser sniffed to variable bs.
return this;
}

// Generating a simple browser sniffing object bs
var bs = new browserSniff();

function layerCreate(name,pos,top,left,t,r,b,l,visibility,color,z)
{
if(bs.dom)
{
this.obj = document.getElementById(name).style;
this.obj.position = pos;
this.obj.top = top;
this.obj.left = left;
this.obj.height = b;
this.obj.width = r;
//this.obj.clip = "rect("+t+"px,"+r+"px,"+b+"px,"+l+"px)";
this.obj.backgroundColor = color;
this.obj.vis = visibility;
this.obj.zIndex = z;
return this.obj;
}
else if(bs.ie4)
{
this.obj = document.all[name].style;
this.obj.position = pos;
this.obj.top = top;
this.obj.left = left;
this.obj.height = b;
this.obj.width = r;
this.obj.backgroundColor = color;
this.obj.vis = visibility;
this.obj.zIndex = z;
return this.obj;
}
else if(bs.ns4)
{
this.obj = document.layers[name];
this.obj.position = pos;
this.obj.top = top;
this.obj.left = left;
this.obj.clip.top = t;
this.obj.clip.right = r;
this.obj.clip.bottom = b;
this.obj.clip.left = l;
this.obj.bgColor = color;
this.obj.vis = visibility;
this.obj.zIndex = z;
return this.obj;
}
}

var cOff = "#5D5D5D";
var cOn = "#FF6600";
var pageW,pageH;


function pageInit()
{
if(bs.ns4||bs.ns6)
{
pageW = innerWidth;
pageH = innerHeight;
//alert(pageW+","+pageH);//1020,580 ns6=1015,574
}
else if(bs.ie4||bs.ie5||bs.ie6)
{
pageW = document.body.clientWidth;
pageH = document.body.clientHeight;
//alert(pageW+","+pageH);//1003,599
}
var posX = pageW/2-300;
var posY = pageH/2-250;
var l =3;
for(i=0;i<20;i++)
{
oDivSet = new layerCreate('div'+i,'absolute',parseInt(posY)+5,parseInt(posX)+l,0,5,5,0,'visible',cOn,2);
l += 7;
}

i=0;
for(i=21;i<30;i++)
{
oDivSet = new layerCreate('div'+i,'absolute',parseInt(posY)+12,parseInt(posX)+l,0,5,5,0,'visible',cOn,2);
l += 7;
}
}

onload=pageInit;
//--></script>
</head>
<body bgcolor="black">
<div id="div0" class="oStyle">
<span></span>
</div>
<div id="div1" class="oStyle">
<span></span>
</div>
<div id="div2" class="oStyle">
<span></span>
</div>
<div id="div3" class="oStyle">
<span></span>
</div>
<div id="div4" class="oStyle">
<span></span>
</div>
<div id="div5" class="oStyle">
<span></span>
</div>
<div id="div6" class="oStyle">
<span></span>
</div>
<div id="div7" class="oStyle">
<span></span>
</div>
<div id="div8" class="oStyle">
<span></span>
</div>
<div id="div9" class="oStyle">
<span></span>
</div>
<div id="div10" class="oStyle">
<span></span>
</div>
<div id="div11" class="oStyle">
<span></span>
</div>
<div id="div12" class="oStyle">
<span></span>
</div>
<div id="div13" class="oStyle">
<span></span>
</div>
<div id="div14" class="oStyle">
<span></span>
</div>
<div id="div15" class="oStyle">
<span></span>
</div>
<div id="div16" class="oStyle">
<span></span>
</div>
<div id="div17" class="oStyle">
<span></span>
</div>
<div id="div18" class="oStyle">
<span></span>
</div>
<div id="div19" class="oStyle">
<span></span>
</div>
<div id="div20" class="oStyle">
<span></span>
</div>
<div id="div21" class="oStyle">
<span></span>
</div>
<div id="div22" class="oStyle">
<span></span>
</div>
<div id="div23" class="oStyle">
<span></span>
</div>
<div id="div24" class="oStyle">
<span></span>
</div>
<div id="div25" class="oStyle">
<span></span>
</div>
<div id="div26" class="oStyle">
<span></span>
</div>
<div id="div27" class="oStyle">
<span></span>
</div>
<div id="div28" class="oStyle">
<span></span>
</div>
<div id="div29" class="oStyle">
<span></span>
</div>
<div id="div30" class="oStyle">
<span></span>
</div>
</body>
</html>
krycek
11-05-2002, 12:50 PM
Um... That is not really "creating" layers, is it...? You already have the layers, and all you are doing is adding properties.

Try this:


//----- CREATE AND DESTROY LAYERS ------------------------------------------------------------------------------------------------------//
function createLayer(name, nest, cssClass, position, left, top, width, height, zIndex, visibility, bgColor, content) {
var html = "<div id='" + name + "' "
if (cssClass != null) html += "class='" + cssClass + "' "
html += "style='"
if (position != null) html += "position:" + position + "; "
if (left != null) html += "left:" + left + "; "
if (top != null) html += "top:" + top + "; "
if (width != null) html += "width:" + width + "; "
if (height != null) html += "height:" + height + "; "
if (zIndex != null) html += "z-index:" + zIndex + "; "
if (visibility != null) html += "visibility:" + visibility + "; "
if (bgColor != null) html += "background-color:" + bgColor + "; "
html += "'>"
if (content != null) html += content
html += "</div>"

if (nest) {
index = nest.lastIndexOf(".")
var parent = (index != -1) ? nest.substr(index + 1) : nest
document.all[parent].insertAdjacentHTML("BeforeEnd", html)
} else {
document.body.insertAdjacentHTML("BeforeEnd", html)
}
}
function destroyLayer(name) {
document.all[name].innerHTML = ""
document.all[name].outerHTML = ""
}


That is a couple of functions that I use myself, simple pasted in out of my API :) Enjoy! :D

To create a layer, simply invoke the createLayer() function, and supply the properties, e.g.

createLayer("div_tester", "", "", "absolute", 50, 50, 25, 25, 1, "visible", "#EEEEFF", "test")

in order to specify where multiple layers will be, run a loop around that code. for instance:


for (var i = 1; i <= 20; i++) {
createLayer("div" + i, "", "", "absolute", i * 20, 20, 15, 15, 1, "visible", "#EEEEFF", "")
}


The above code will produce 20 layers in a row, each 15 by 15 pixels. :)

I hope that acheives what you are after! Feel free to modify that :D

::] krycek [::

PS - To remove a layer, invoke destroyLayer(name) where name is the name of the layer :)
krycek
11-05-2002, 12:53 PM
Um, two thoughts:

1. It is not a good idea generally to post your entire code! - but on this occasion it gave me a good idea of what you were doing :)

2. You will notice from my code snippet that my style is to tab everything out - I find it makes everything a lot easier to read, and then I parse the code later before it gets published, to remove comments, tabs, extra whitespace, and newlines.

Sorry if the code looks odd because of that, but you can always remove the tabs :)

::] krycek [::

PS - I only code for IE, so you may need to make some changes to my code for it to work cross-browser :)
shivboy
11-05-2002, 01:31 PM
hi krycek,

thanx a ton for replying to this code and for ur valuable thoughts. it was really nice of u to do that. but u didnt get my question. i used the same logic to make 20 layers in a row. what im unable to achieve is how to create multiple rows with 20 layers? see i have small images of this size which i wish to put behind these layers and one by one make them visible. (im telling u coz u already u got the idea and its nothing new that im doing...well let me know if u didnt know i planned this :) ) anyway, coming back to the point, how do i make multiple rows like:

**********************
**********************
**********************
**********************
**********************

consider each * as a layer. how do i get this kind of an effect using for loop??

thanx again,
shivboy
krycek
11-05-2002, 02:58 PM
easy! ;)

...just put the loop I wrote, inside another loop :) I was going to post this code at first, but I wasn't sure you wanted to make a grid or not...


for (var i = 1; i <= 20; i++) {
for (var j = 1; j <= 20; j++)
createLayer("div" + i + "_" + j, "", "", "absolute", j * 20, i * 20, 15, 15, 1, "visible", "#EEEEFF", "")
}
}


Notice that the name is now divi_j :) This is so you will be able to access the layers like grid coordinates.

It's funny - I did an almost identical thing just a few days ago, to see how many layers my browser could handle. I did a grid of layers each 2x2 pixels, with a 1 pixel space in between. I got up to 500,000 layers created with no trouble - the browser slowed a little and also it took forever (about 5mins I think) to create them (running IE6 on WinXP Pro on an overclocked Athlon 1.4 with 512Mb DDR RAM - decent system :p) but at least it created them all :) Just for the sake of information! :D

Hope that helps

::] krycek [::
shivboy
11-05-2002, 07:28 PM
hey krycek,

it worked finally! had to make a no. of changes here and there but it worked. :) thanx a ton for the help man! thanx a ton!

i was reading thru ur layerCreate function. can u plz explain the significance of the parameter nest ?

furthermore, shudnt there be an else condition here:

if (cssClass != null)
html += "class='" + cssClass + "' ";
an else condition here
html += "style='"

and lastly,

document.body.insertAdjacentHTML("BeforeEnd", html)

is this a DOM-based browser scripting?

thanx again,
shivboy

P.S.-> why dont ppl use ";" after end of every line and "{}" for if and else conditions?
krycek
11-05-2002, 09:27 PM
Whew! What a ton of questions! :D

nest is in case you want to create a layer inside another layer - you would put the parent layer's name there. I forgot to mention it earlier, thinking that if people saw it and understood the concepts they would understand what nest is for... sorry!

There should not be an else condition there, because for layers there are certain properties you should set for them when you build them (it is optional though). You can set a CSS class simultaneously: you may require to change the background and borders on a mouseover, and that is easiest done by simply changing the class of the layer. So, no else, because you can set both style AND class.

As for the insertAdjacentHTML, well, I suppose it is DOM-based scripting but to be honest I consider everything to be pretty much DOM-based (lol!) unless you mean specifically DOM-coded which I thought used node stuff and parent/child techniques. It may well be that my code is DOM-based like you are asking, but I am not really able to say... I would definitely call it OO (Object Oriented) though. Ask someone like beetle about the DOM bit, he seems to be quite knowledgeable in that area :)

About the syntax...

Yes, I should really end each line with ";", but I usually can't be bothered! :embarrased:

And, if your if statement is a single line, you don't have to put {}. Same goes for else, but I like to follow the following rules:

1.

if (condition) action

instead of:

if (condition) {
action
}

...coz it's shorter;

2.

if (condition) {
action
action
}

...coz it's required;

3.

if (condition) {
action
} else if (condition) {
action
} else {
action
}

instead of:

if (condition) action
elseif (condition) action
else action

...coz I find that easier to make robust code with, when you are looking through and altering it is easier to miss the second style.

4.

variable = (condition) ? value1 : value2

instead of:

if (condition) {
variable = value1
} else {
variable = value2
}

...coz it's shorter - I only use it for assigning one of two values to a variable, otherwise it gets less clear.


The rules above are simply the way I personally code - all of the techniques work and are equally valid. I am sure you will find a style you are happy with, and then you should stick to that.

btw, I am the only person I know of who tabs out all their code so that, for instance, all the variable = value lines are aligned :D I find that it makes code writing and checking a lot quicker for me... but then, I have two nice 19" Iiyama VM Pro 451s, and I run Dreamweaver MX at 1920x1440 on my main monitor, and my second varies in resolution because it is my browser monitor, for previewing. So, I have a lot of screen space and adjust my coding methods accordingly.

well I waffled a bit but there you have your explanation, lol! ;)

Glad it all worked for you :)

::] krycek [::
shivboy
11-06-2002, 06:07 AM
hey krycek,

thanx a ton for replying my posts. and above all thanx a ton for being so patient :) i wonder where u learn all these awesome stuff from. books on all this r inexistent and most of them r obsolete. hey, i wonder why ppl have stopped coding for 4.x browsers?

shivboy
krycek
11-06-2002, 10:50 AM
Thanks mate :)

I am entirely self-taught (like most good programmers I know) - I started out on the Commodore 64 10 years ago, taught myself BASIC and then Assembler... whew... I was only 11 back then, and I would not like to try Assembler again now! :eek:

Since then I taught myself VB, C, C++, Pascal, Delphi, Fortran, Logo, and a few other similar languages. I am pretty good at VB still but I don't use it or the others much anymore, well VB and C# sometimes but not the others, I have moved on to web stuff in the past few years.

Once I learned HTML (easy or what) I struggled to get to grips with the DOM in different browsers - thankfully my current work allows me to focus entirely on IE, which is the way I like it :D JavaScript was easy to learn because I know so many other languages already, but as with any new language, learning the methods of operating is not always straightforward!

I also taught myself PHP and MySQL last year, building on my ASP and MS SQL experience. Oh, and I picked up Java and bits of CGI and Perl (not much of them!) along the way :)

When I was 17/18 I left college and set up as a freelance trainer here in the UK, because I realised uni was a waste of time for me - I could start earning immediately :) I did OK and set up a company with contractors etc. but lost it all when IT contracting in the UK hit a big drop due to changes in law :(

So now I am self-employed as a freelancer again, working from home, although on one of my own projects at the moment (makes a change!)

So, there's my background - trial and error, reference bibles, and occasionally tutorials is how I learn. However it is difficult to learn from scratch I expect, as the content I can find on the web is a bit hit-and-miss, and cross-browser stuff? I hate it! :eek:

As for 4.x browsers, I currently code only for IE 5+, I know that if I stick to the DOM 2, the other browsers will fall into line (in future 7.x releases methinks) so I can forget the NN and O browsers - with my current project I can tell my client what to use, thankfully!

No worries about helping you, after all, we learn from help and from helping others, and since I joined this forum a few days ago some good people have taken the time to help me out and so it is only fair to give a little back when I have the time. :)

::] krycek [::
shivboy
11-06-2002, 07:26 PM
hey krycek,

man, u have a very strong base of porgramming i must say. i am quite intimidated to see ur profile man! so many languages!!!!! boy oh boy! i've been into DHTML stuff for the past 2 years now but have still not got my hands onto it properly. its not tough but the info to work upon it is very scarce. u do find a few tutorials here and there, yet its not enuf actually. hey if u know ASP, can u tell me if somehow i could learn how to make these forums? ive been meaning to make one of my own but i have no idea at all about it!

hey, by the way, im trying to make ur constructor x-browser, the moment i can i'll send it to u. ok?

shivboy
mordred
11-06-2002, 08:24 PM
Originally posted by krycek
[As for 4.x browsers, I currently code only for IE 5+, I know that if I stick to the DOM 2, the other browsers will fall into line (in future 7.x releases methinks)

:confused:

Huh? Do you mean you employ DOM2 techniques in IE5.0? If so, please share your secret how to do that. Or did you mean Mozilla (the only browser I know yet that provides a decent implementation of DOM2)?
krycek
11-06-2002, 08:39 PM
shivboy:

In Netscape, to add a new layer to the page you simply create a new Layer object:

document.layers[id] = new Layer(width)

For a nested layer you must call the new Layer command like this:

document.layers[parentLayer].document.layers[childLayer] = new Layer(width, document.layers[parentLayer])

After the layer is created you can then assign the properties and add the content to the layer like this:

document.layers[id] = new Layer(400)
document.layers[id].left = 40
document.layers[id].top = 100
document.layers[id].height = 300
document.layers[id].bgColor = "blue"
document.layers[id].visibility = "show"
document.layers[id].document.open()
document.layers[id].document.write("This is my content")
document.layers[id].document.close()
etc.

Once all this is done, you can use the layer as normal.

I don't think it is possible to actually delete a layer in Netscape - the only thing you can do is hide it!

document.layers[id].visibility = "hide"

So, my little function is essentially IE only... except, it uses DOM-based techniques so is a little better than the Netscape method.

As for these forums, yes I know how to make them in ASP but it is easier in PHP & MySQL, which is how they were written I believe. However, it is a long and difficult task! I will be happy to help you out on any issues you might have, but I would not like to code them myself. I have "forums" on my list for, say, 6 to 9 months time, but until then, I have little time to spare for coding them :D


modred:

What I meant was, two things: first, I only code for IE 5+ (I use IE 6), and second, I try to make sure that all my techniques are based on the DOM2 spec. That does not mean that I use unsupported stuff, I simply mean that I am trying to make all my coding methods fall into line with W3C standards :) TBH I am not very strong on "pure" DOM stuff, because as shivboy mentioned, there are not enough good articles around.

I am sorry if I gave the wrong impression! :eek:

::] krycek [::
mordred
11-06-2002, 10:42 PM
Ah! Sorry, I just got confused by your first statement. It seems like your're doing the same as I do: Programming JS for IE browsers (that's what the client demands), but at the same time striving to use all DOM 1+ compatible codes whenever possible or resorting to DOM-0 measures... I haven't touched document.all for a really long time now, and don't know if there's any relevant use for it in scenarios where you can use document.getElementByid() instead... just as an example.

Although I would like to focus primarily on Mozilla compliance, the current browser market share of IE stands in the way. That's a real pity, because addEventListener() is a really neat way to handle events.

I reckon in former times cross-browser incompatibilities meant: IE -> Netscape and now it's IE -> DOM-compatible browsers which basically boils down to IE -> Netscape/Mozilla again... arghl... anyone sees a pattern here? If Microsoft would go the standards path, things would really be much more relaxed. It's their turn now.

Sorry shivboy for distracting from your problem.... SCNR :)
shivboy
11-09-2002, 07:04 AM
hi krycek,

i bet u can help mw with this coz u have been working with DOM. i tried to make a DOM-based constructor of what i was doing earlier, but it doesn't work. im sure im doing something stupid for im new to all this. here's the code:


<html>
<head>
<title></title>
<script language="JavaScript">
<!--

function createL(id,h,w,t,l,pos,c)
{
d = document.createElement("div");
d.id = id;
d.style.height = h;
d.style.width = w;
d.style.top = t;
d.style.left = l;
d.style.position = pos;
d.style.backgroundColor = c;
}
function pageInit()
{
createL("div1",20,20,200,200,"absolute","red");
}
onload = pageInit;
//--></script>
</head>
<body>
</body>
</html>


please help me with this.

shivboy
krycek
11-10-2002, 12:01 AM
I think I see what you are trying to do... but, you are confusing two different parts of JavaScript.

Custom objects such as you are trying to make exists ONLY 'script-side', as opposed to page objects such as layers, which exist 'page-side' but are accessible through JS.

To make it clearer, if you create a layer, you can modify it with JS, but creating your own object will display nothing on the page.

I cannot see the point of what you are trying to do at the moment - unless you are trying to extend the functionality of the layer...? If so, I can talk you through that... otherwise I think I need a more detailed description of what is going on. :)

::] krycek [::
shivboy
11-10-2002, 09:02 PM
hi krycek,

see u got the idea what im trying to do. see i want to know that how well can a browser treat an object created PURELY thru JS. coz i see a lot of potential in creating objects using JS rather than using HTML. ive worked on HTML...so much that now i wanna play with JS. furthermore, with JS i can play with things more effectively and efficiently. so now u know the reason, so tell me, would like to help me work more with it?

shivboy
krycek
11-11-2002, 05:11 PM
...just to say I have read your post :) I will post some code up for you in a day or so - I have to do a re-install of all my programs tonight you see :)

::] krycek [::
shivboy
11-11-2002, 07:52 PM
ahem! krycek is gearing up for head on boys! get out of the way!!! he's reinstalling everything! :) sure buddy, just let me know when u r ready.

shivboy