SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2001
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamic Sizing of Frames via JavaScript

    I have a site which uses frames ( dont ask !! ).

    The following javascript is used to control the layout in that it causes tge frame set to toggle between columns of "0,*" and "200,*" ( i.e it hides and revelas the left hand column).

    [HTML]
    function frame_size(name) {
    if (name == "expand") {
    parent.document.all.parentFrame.cols = "0,*";
    } else {
    parent.document.all.parentFrame.cols = "200,*";
    }
    }
    HTML]

    The code works fine in IE but not in FireFox - anyone have any ideas why ?.

    Alternatively do you have any similar code I could use.

    Thanks,
    BB

  2. #2
    SitePoint Addict NikoB's Avatar
    Join Date
    Nov 2005
    Location
    Austria
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use this code resize a borderless frame:
    Code:
    // frame resize
    function move(e){
    	if (top.dragapproved){
    		var colleft = top.getElementById("theFrame").cols;
    		colleft = parseInt(colleft.substring(0, colleft.indexOf(',')));
    		colleft += !isIE5()? e.clientX-2: event.clientX-2;
    		top.getElementById("theFrame").cols = colleft + ',*';
    		return false;
    	}
    }
    
    function drags(e){
    	var firedobj=!isIE5()? e.target : event.srcElement;
    	var topelement=!isIE5()? "HTML" : "BODY";
    	
    	while (firedobj.tagName!=topelement&&firedobj.className!="drag"){
    		firedobj=!isIE5()? firedobj.parentNode : firedobj.parentElement;
    	}
    	
    	if (firedobj.className=="drag"){
    		top.dragapproved=true;
    		document.onmousemove=move;
    		return false;
    	}
    }
    Corinis OpenSource Community & Content Management
    http://www.corinis.org

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2001
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    NikoB - thanks for the code. It wll take me a while to get my head around it, as it is more complicated than I was expecting.

    Haver you git any sites I could look at and see this working, just to let me get a better understanding of it.

    Thanks,
    BB

  4. #4
    SitePoint Addict NikoB's Avatar
    Join Date
    Nov 2005
    Location
    Austria
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try http://demo.corinis.com - the grey bar next to the left bar with the black dots allows resizing per dragndrop...
    Corinis OpenSource Community & Content Management
    http://www.corinis.org

  5. #5
    SitePoint Addict NikoB's Avatar
    Join Date
    Nov 2005
    Location
    Austria
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what this code does it looks for an element (any tag) with class="drag" (<img src="..." class="drag">)

    the only part missing is:
    Code:
    ...
    document.onmousedown=drags;
    document.onmouseup=new Function("top.dragapproved=false");
    </head>
    <body>
    ....
    Corinis OpenSource Community & Content Management
    http://www.corinis.org

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2001
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow that's impressive - maybe a bit too rich for me.

    I just wanted a toggle function so I could set toggle the width between two values.

    Thanks,
    B

  7. #7
    SitePoint Addict NikoB's Avatar
    Join Date
    Nov 2005
    Location
    Austria
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try
    Code:
    unction frame_size(name) {
    if (name == "expand") {
    parent.document.getElementsByName("nameoftheel")[0].cols = "0,*";
    } else {
    parent.document.getElementsByName("nameoftheel")[0].cols = "200,*";
    }
    }
    document.all is IE only and wont work in gecko.. using getElementById or getElementsByName is cross browser
    Corinis OpenSource Community & Content Management
    http://www.corinis.org


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •