PDA

View Full Version : Window widget 1.03 z-index refresh



Samuell
10-15-2007, 10:46 AM
1) Script Title:
DHTML Window widget (v1.03)
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/
3) Describe problem:
Hello! Thank you a lot for this amazing script and for support!
I found 2 little things to improve, maybe a bugs.
1. When I open(create) few windows they appears in right order: new ones appears over previews according to their z-indexes. But when I close all windows they just become hidden and when I open them again in another order they become visible with old z-indexes, so some windows appears under another windows. You can try it by link above, just close default windows, then open window2, then open window4, then close window4, then close window2, then open window2 again, and finally open window4. As you can see window4 now under window2 but it should be over it.
Please, help! That great script need to be fine.
2. Windows scroll bar is not dragable in Opera 9.21, content can be scrolled by mouse scrolling though. Previews versions of opera dont scroll at all and do not load ajax but that versions isn't ipmortant. Is it possible to do something with 9x? I'm affraid no, looks like that drag problem is opera's problem and can't be fixed by js, is it?
3. And another small thing. Is it possible to make Drag Handle Line got another color when its active?

Samuell
10-16-2007, 02:09 PM
I'm still hope for help

Samuell
10-16-2007, 03:55 PM
I guess I found right string,
I change t.show=function(){dhtmlwindow.show(this)}
to >> t.show=function(){dhtmlwindow.zIndexvalue++; this.style.zIndex=dhtmlwindow.zIndexvalue; dhtmlwindow.show(this)}
But there is no effect :(
Please, anybody, how make this work?!

dhtmlwindow.js code:


// -------------------------------------------------------------------
// DHTML Window Widget- By Dynamic Drive, available at: http://www.dynamicdrive.com
// v1.0: Script created Feb 15th, 07'
// v1.01: Feb 21th, 07' (see changelog.txt)
// v1.02: March 26th, 07' (see changelog.txt)
// v1.03: May 5th, 07' (see changelog.txt)
// -------------------------------------------------------------------

var dhtmlwindow={
imagefiles:['windowfiles/min.gif', 'windowfiles/close.gif', 'windowfiles/restore.gif', 'windowfiles/resize.gif'], //Path to 4 images used by script, in that order
ajaxbustcache: true, //Bust caching when fetching a file via Ajax?

minimizeorder: 0,
tobjects: [], //object to contain references to dhtml window divs, for cleanup purposes

init:function(t){
var domwindow=document.createElement("div") //create dhtml window div
domwindow.id=t
domwindow.className="dhtmlwindow"
var domwindowdata=''
domwindowdata='<div class="drag-handle">'
domwindowdata+='DHTML Window <div class="drag-controls"><img src="'+this.imagefiles[0]+'" title="Minimize" /><img src="'+this.imagefiles[1]+'" title="Close" /></div>'
domwindowdata+='</div>'
domwindowdata+='<div class="drag-contentarea"></div>'
domwindowdata+='<div class="drag-statusarea"><div class="drag-resizearea" style="background: transparent url('+this.imagefiles[3]+') top right no-repeat;">&nbsp;</div></div>'
domwindowdata+='</div>'
domwindow.innerHTML=domwindowdata
document.getElementById("dhtmlwindowholder").appendChild(domwindow)
this.zIndexvalue=(this.zIndexvalue)? this.zIndexvalue+1 : 100 //z-index value for DHTML window: starts at 0, increments whenever a window has focus
var t=document.getElementById(t)
var divs=t.getElementsByTagName("div")
for (var i=0; i<divs.length; i++){ //go through divs inside dhtml window and extract all those with class="drag-" prefix
if (/drag-/.test(divs[i].className))
t[divs[i].className.replace(/drag-/, "")]=divs[i] //take out the "drag-" prefix for shorter access by name
}
t.style.zIndex=this.zIndexvalue //set z-index of this dhtml window
t.handle._parent=t //store back reference to dhtml window
t.resizearea._parent=t //same
t.controls._parent=t //same
t.onclose=function(){return true} //custom event handler "onclose"
t.onmousedown=function(){dhtmlwindow.zIndexvalue++; this.style.zIndex=dhtmlwindow.zIndexvalue} //Increase z-index of window when focus is on it
t.handle.onmousedown=dhtmlwindow.setupdrag //set up drag behavior when mouse down on handle div
t.resizearea.onmousedown=dhtmlwindow.setupdrag //set up drag behavior when mouse down on resize div
t.controls.onclick=dhtmlwindow.enablecontrols
t.show=function(){dhtmlwindow.show(this)} //public function for showing dhtml window
t.hide=function(){dhtmlwindow.close(this)} //public function for hiding dhtml window
t.setSize=function(w, h){dhtmlwindow.setSize(this, w, h)} //public function for setting window dimensions
t.moveTo=function(x, y){dhtmlwindow.moveTo(this, x, y)} //public function for moving dhtml window (relative to viewpoint)
t.isResize=function(bol){dhtmlwindow.isResize(this, bol)} //public function for specifying if window is resizable
t.isScrolling=function(bol){dhtmlwindow.isScrolling(this, bol)} //public function for specifying if window content contains scrollbars
t.load=function(contenttype, contentsource, title){dhtmlwindow.load(this, contenttype, contentsource, title)} //public function for loading content into window
this.tobjects[this.tobjects.length]=t
return t //return reference to dhtml window div
},

open:function(t, contenttype, contentsource, title, attr, recalonload){
var d=dhtmlwindow //reference dhtml window object
function getValue(Name){
var config=new RegExp(Name+"=([^,]+)", "i") //get name/value config pair (ie: width=400px,)
return (config.test(attr))? parseInt(RegExp.$1) : 0 //return value portion (int), or 0 (false) if none found
}
if (document.getElementById(t)==null) //if window doesn't exist yet, create it
t=this.init(t) //return reference to dhtml window div
else
t=document.getElementById(t)
t.setSize(getValue(("width")), (getValue("height"))) //Set dimensions of window
var xpos=getValue("center")? "middle" : getValue("left") //Get x coord of window
var ypos=getValue("center")? "middle" : getValue("top") //Get y coord of window
//t.moveTo(xpos, ypos) //Position window
if (typeof recalonload!="undefined" && recalonload=="recal" && this.scroll_top==0){ //reposition window when page fully loads with updated window viewpoints?
if (window.attachEvent && !window.opera) //In IE, add another 400 milisecs on page load (viewpoint properties may return 0 b4 then)
this.addEvent(window, function(){setTimeout(function(){t.moveTo(xpos, ypos)}, 400)}, "load")
else
this.addEvent(window, function(){t.moveTo(xpos, ypos)}, "load")
}
t.isResize(getValue("resize")) //Set whether window is resizable
t.isScrolling(getValue("scrolling")) //Set whether window should contain scrollbars
t.style.visibility="visible"
t.style.display="block"
t.contentarea.style.display="block"
t.moveTo(xpos, ypos) //Position window
t.load(contenttype, contentsource, title)
if (t.state=="minimized" && t.controls.firstChild.title=="Restore"){ //If window exists and is currently minimized?
t.controls.firstChild.setAttribute("src", dhtmlwindow.imagefiles[0]) //Change "restore" icon within window interface to "minimize" icon
t.controls.firstChild.setAttribute("title", "Minimize")
t.state="fullview" //indicate the state of the window as being "fullview"
}
return t
},

setSize:function(t, w, h){ //set window size (min is 150px wide by 100px tall)
t.style.width=Math.max(parseInt(w), 150)+"px"
t.contentarea.style.height=Math.max(parseInt(h), 100)+"px"
},

moveTo:function(t, x, y){ //move window. Position includes current viewpoint of document
this.getviewpoint() //Get current viewpoint numbers
t.style.left=(x=="middle")? this.scroll_left+(this.docwidth-t.offsetWidth)/2+"px" : this.scroll_left+parseInt(x)+"px"
t.style.top=(y=="middle")? this.scroll_top+(this.docheight-t.offsetHeight)/2+"px" : this.scroll_top+parseInt(y)+"px"
},

isResize:function(t, bol){ //show or hide resize inteface (part of the status bar)
t.statusarea.style.display=(bol)? "block" : "none"
t.resizeBool=(bol)? 1 : 0
},

isScrolling:function(t, bol){ //set whether loaded content contains scrollbars
t.contentarea.style.overflow=(bol)? "auto" : "hidden"
},

load:function(t, contenttype, contentsource, title){ //loads content into window plus set its title (3 content types: "inline", "iframe", or "ajax")
var contenttype=contenttype.toLowerCase() //convert string to lower case
if (typeof title!="undefined")
t.handle.firstChild.nodeValue=title
if (contenttype=="inline")
t.contentarea.innerHTML=contentsource
else if (contenttype=="div"){
t.contentarea.innerHTML=document.getElementById(contentsource).innerHTML //Populate window with contents of specified div on page
document.getElementById(contentsource).style.display="none" //hide that div
}
else if (contenttype=="iframe"){
t.contentarea.style.overflow="hidden" //disable window scrollbars, as iframe already contains scrollbars
if (!t.contentarea.firstChild || t.contentarea.firstChild.tagName!="IFRAME") //If iframe tag doesn't exist already, create it first
t.contentarea.innerHTML='<iframe src="" style="margin:0; padding:0; width:100%; height: 100%" name="_iframe-'+t.id+'"></iframe>'
window.frames["_iframe-"+t.id].location.replace(contentsource) //set location of iframe window to specified URL
}
else if (contenttype=="ajax"){
this.ajax_connect(contentsource, t) //populate window with external contents fetched via Ajax
}
t.contentarea.datatype=contenttype //store contenttype of current window for future reference
},

setupdrag:function(e){
var d=dhtmlwindow //reference dhtml window object
var t=this._parent //reference dhtml window div
d.etarget=this //remember div mouse is currently held down on ("handle" or "resize" div)
var e=window.event || e
d.initmousex=e.clientX //store x position of mouse onmousedown
d.initmousey=e.clientY
d.initx=parseInt(t.offsetLeft) //store offset x of window div onmousedown
d.inity=parseInt(t.offsetTop)
d.width=parseInt(t.offsetWidth) //store width of window div
d.contentheight=parseInt(t.contentarea.offsetHeight) //store height of window div's content div
if (t.contentarea.datatype=="iframe"){ //if content of this window div is "iframe"
t.style.backgroundColor="#F8F8F8" //colorize and hide content div (while window is being dragged)
t.contentarea.style.visibility="hidden"
}
document.onmousemove=d.getdistance //get distance travelled by mouse as it moves
document.onmouseup=function(){
if (t.contentarea.datatype=="iframe"){ //restore color and visibility of content div onmouseup
t.contentarea.style.backgroundColor="white"
t.contentarea.style.visibility="visible"
}
d.stop()
}
return false
},

Samuell
10-16-2007, 03:56 PM
and here code continues:




getdistance:function(e){
var d=dhtmlwindow
var etarget=d.etarget
var e=window.event || e
d.distancex=e.clientX-d.initmousex //horizontal distance travelled relative to starting point
d.distancey=e.clientY-d.initmousey
if (etarget.className=="drag-handle") //if target element is "handle" div
d.move(etarget._parent, e)
else if (etarget.className=="drag-resizearea") //if target element is "resize" div
d.resize(etarget._parent, e)
return false //cancel default dragging behavior
},

getviewpoint:function(){ //get window viewpoint numbers
var ie=document.all && !window.opera
var domclientWidth=document.documentElement && parseInt(document.documentElement.clientWidth) || 100000 //Preliminary doc width in non IE browsers
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
this.scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset
this.scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset
this.docwidth=(ie)? this.standardbody.clientWidth : (/Safari/i.test(navigator.userAgent))? window.innerWidth : Math.min(domclientWidth, window.innerWidth-16)
this.docheight=(ie)? this.standardbody.clientHeight: window.innerHeight
},

rememberattrs:function(t){ //remember certain attributes of the window when it's minimized or closed, such as dimensions, position on page
this.getviewpoint() //Get current window viewpoint numbers
t.lastx=parseInt((t.style.left || t.offsetLeft))-dhtmlwindow.scroll_left //store last known x coord of window just before minimizing
t.lasty=parseInt((t.style.top || t.offsetTop))-dhtmlwindow.scroll_top
t.lastwidth=parseInt(t.style.width) //store last known width of window just before minimizing/ closing
},

move:function(t, e){
t.style.left=dhtmlwindow.distancex+dhtmlwindow.initx+"px"
t.style.top=dhtmlwindow.distancey+dhtmlwindow.inity+"px"
},

resize:function(t, e){
t.style.width=Math.max(dhtmlwindow.width+dhtmlwindow.distancex, 150)+"px"
t.contentarea.style.height=Math.max(dhtmlwindow.contentheight+dhtmlwindow.distancey, 100)+"px"
},

enablecontrols:function(e){
var d=dhtmlwindow
var sourceobj=window.event? window.event.srcElement : e.target //Get element within "handle" div mouse is currently on (the controls)
if (/Minimize/i.test(sourceobj.getAttribute("title"))) //if this is the "minimize" control
d.minimize(sourceobj, this._parent)
else if (/Restore/i.test(sourceobj.getAttribute("title"))) //if this is the "restore" control
d.restore(sourceobj, this._parent)
else if (/Close/i.test(sourceobj.getAttribute("title"))) //if this is the "close" control
d.close(this._parent)
return false
},

minimize:function(button, t){
dhtmlwindow.rememberattrs(t)
button.setAttribute("src", dhtmlwindow.imagefiles[2])
button.setAttribute("title", "Restore")
t.state="minimized" //indicate the state of the window as being "minimized"
t.contentarea.style.display="none"
t.statusarea.style.display="none"
if (typeof t.minimizeorder=="undefined"){ //stack order of minmized window on screen relative to any other minimized windows
dhtmlwindow.minimizeorder++ //increment order
t.minimizeorder=dhtmlwindow.minimizeorder
}
t.style.left="10px" //left coord of minmized window
t.style.width="200px"
var windowspacing=t.minimizeorder*10 //spacing (gap) between each minmized window(s)
t.style.top=dhtmlwindow.scroll_top+dhtmlwindow.docheight-(t.handle.offsetHeight*t.minimizeorder)-windowspacing+"px"
},

restore:function(button, t){
dhtmlwindow.getviewpoint()
button.setAttribute("src", dhtmlwindow.imagefiles[0])
button.setAttribute("title", "Minimize")
t.state="fullview" //indicate the state of the window as being "fullview"
t.style.display="block"
t.contentarea.style.display="block"
if (t.resizeBool) //if this window is resizable, enable the resize icon
t.statusarea.style.display="block"
t.style.left=parseInt(t.lastx)+dhtmlwindow.scroll_left+"px" //position window to last known x coord just before minimizing
t.style.top=parseInt(t.lasty)+dhtmlwindow.scroll_top+"px"
t.style.width=parseInt(t.lastwidth)+"px"
},


close:function(t){
try{
var closewinbol=t.onclose()
}
catch(err){ //In non IE browsers, all errors are caught, so just run the below
var closewinbol=true
}
finally{ //In IE, not all errors are caught, so check if variable isn't defined in IE in those cases
if (typeof closewinbol=="undefined"){
alert("An error has occured somwhere inside your \"onclose\" event handler")
var closewinbol=true
}
}
if (closewinbol){ //if custom event handler function returns true
if (t.state!="minimized") //if this window isn't currently minimized
dhtmlwindow.rememberattrs(t) //remember window's dimensions/position on the page before closing
t.style.display="none"
}
return closewinbol
},

show:function(t){
if (t.lastx) //If there exists previously stored information such as last x position on window attributes (meaning it's been minimized or closed)
dhtmlwindow.restore(t.controls.firstChild, t) //restore the window using that info
else
t.style.display="block"
t.state="fullview" //indicate the state of the window as being "fullview"
},

ajax_connect:function(url, t){
var page_request = false
var bustcacheparameter=""
if (window.XMLHttpRequest) // if Mozilla, IE7, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE6 or below
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){dhtmlwindow.ajax_loadpage(page_request, t)}
if (this.ajaxbustcache) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
},

ajax_loadpage:function(page_request, t){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
t.contentarea.innerHTML=page_request.responseText
}
},


stop:function(){
dhtmlwindow.etarget=null //clean up
document.onmousemove=null
document.onmouseup=null
},

addEvent:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
},

cleanup:function(){
for (var i=0; i<dhtmlwindow.tobjects.length; i++){
dhtmlwindow.tobjects[i].handle._parent=dhtmlwindow.tobjects[i].resizearea._parent=dhtmlwindow.tobjects[i].controls._parent=null
}
window.onload=null
}

} //End dhtmlwindow object

document.write('<div id="dhtmlwindowholder"><span style="display:none">.</span></div>') //container that holds all dhtml window divs on page
window.onunload=dhtmlwindow.cleanup

ddadmin
10-16-2007, 10:12 PM
Regarding the zIndex issue, try adding the line in red to the two lines inside dhtmlwindow.js:


t.isScrolling(getValue("scrolling")) //Set whether window should contain scrollbars
dhtmlwindow.zIndexvalue++; t.style.zIndex=dhtmlwindow.zIndexvalue



t.state="fullview" //indicate the state of the window as being "fullview"
dhtmlwindow.zIndexvalue++; t.style.zIndex=dhtmlwindow.zIndexvalue

On the Opera scrollbar issue, do you mean when an IFRAME is shown inside the DHTML window, you can't drag the scrollbars to scroll up and down? It works for me btw when tested (Opera 9.2)

Samuell
10-17-2007, 09:26 AM
z-indexes fixed! thank you very much!
scrollbar work ok with iframe but only with iframe, with any other type of content its not draggable in any opera. (mouse scrolling work ok though in 9x)
and what about Drag Handle Line? I try today make it highlighted in active window but again nothing work. i guess i can't get how this script work yet. that should be not difficult though, maybe another few lines of code and with that z-index fix you can release a new version of window widget. Btw I saw that feature in much less advanced scripts.

ddadmin
10-17-2007, 11:07 AM
Ah yes I'm aware of the scrollbar issue in Opera for non IFRAME based DHTML windows. I haven't had a chance to come up with a fix though. Regarding the highlighted active window title bar, I'll consider adding it as a feature the next time the script is updated.

Samuell
10-17-2007, 05:36 PM
oh, u're such a kind guy ))
then could u plz add to that future feature list another one small thing - content preload 'wait' message or something like that, i mean a kind of page preloader.
I try to add it myself . . . and what? u know it - nothing work. Seems like standart preloading scripts can't work when page loads like ajax. I first think that its mess with divs and I change div preload message to span - no effect.

Here is a code I use in page that 'Window widget' loads as ajax:



<html>
<head>
<SCRIPT TYPE="text/javascript" LANGUAGE="javascript">
function waitPreloadPage() { //DOM
if (document.getElementById){
document.getElementById('prep').style.visibility='hidden';
}else{
if (document.layers){ //NS4
document.prep.visibility = 'hidden';
}
else { //IE4
document.all.prep.style.visibility = 'hidden';
}
}
}
</SCRIPT>
</head>
<body>
<span id="prep">Loading...Please wait</span>
<?php
//long time going code here with requests to another sites for data
//trying to hide that span below
print("<script>document.all[\"prep\"].style.display = \"none\";</script>
<script>waitPreloadPage();</script>");
?>
<script>document.all["prep"].style.display = "none";</script>
<script>waitPreloadPage();</script>
</body>
</html>


Message should appears at start and disappear when everything get loaded but it appears when everything already loads and not disappear at all =(
Can U tell me plz what is ETA for new version of WinWidget?

Samuell
10-18-2007, 09:15 AM
This script definitely do not want to take any mods from me...
I'm trying to add preloader a second day with no success. I can move forward without titlebar, but I can't deal without preload message when I have ~20sec delay of ajax huge dynamic content preloading.
PLEEEASE!!! Help me with this thing! 8)

tech_support
10-18-2007, 09:29 AM
Changes are highlighted.


<html>
<head>
<SCRIPT TYPE="text/javascript" LANGUAGE="javascript">
function waitPreloadPage() { //DOM
if (document.getElementById){
document.getElementById('prep').style.visibility='hidden';
}else{
if (document.layers){ //NS4
document.prep.visibility = 'hidden';
}
else { //IE4
document.all.prep.style.visibility = 'hidden';
}
}
}
</SCRIPT>
</head>
<body>
<span id="prep">Loading...Please wait</span>
<?php
//long time going code here with requests to another sites for data
//trying to hide that span below
//print("<script>document.all[\"prep\"].style.display = \"none\";</script>
//<script>waitPreloadPage();</script>");
//Why put this when you got the code below anyway?
?>
<script>document.getElementById("prep").style.display = "none";</script>
<script>waitPreloadPage();</script>
</body>
</html>

Samuell
10-18-2007, 03:27 PM
Looks like any standart tricks can't work with ajax, I don't know why, I even try to hide 'wait' message from parent page, maybe WinWidg change ids of loading content?
Actually there is two problems that don't let make it work
- 'Wait' message do not appears at start, only when all page's content already loaded
- 'Wait' message do not dissapear at the end

Here is a demo:
3 pages (d1.php -rss feed, d2.htm -big image, d3.htm huge text) I load to index.php via Ajax
'Wait' message work great on all 3 pages when I load them directly:
http://demoftp.freehostia.com/d1.php
http://demoftp.freehostia.com/d2.htm
http://demoftp.freehostia.com/d3.htm

And here how its look through WinWidg:
http://demoftp.freehostia.com/index.php

I guess the only way to make it work correctly is add this feature in WinWidg on init stage, but this riddle definitely not for me =(

Please, anybody! How make it work???

Samuell
10-18-2007, 03:48 PM
Here is a codes:
index.php >>


<html>
<head>
<link rel="stylesheet" href="windowfiles/dhtmlwindow.css" type="text/css" />
<script type="text/javascript" src="windowfiles/dhtmlwindow.js">
/***********************************************
* DHTML Window Widget- Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<SCRIPT TYPE="text/javascript" LANGUAGE="javascript">
function waitPreloadPage() { //DOM
if (document.getElementById){
document.getElementById('prep').style.visibility='hidden';
}else{
if (document.layers){ //NS4
document.prep.visibility = 'hidden';
}
else { //IE4
document.all.prep.style.visibility = 'hidden';
}
}
}
</SCRIPT>
</head>
<body bgcolor="#2D2D2D" text="#CCCCCC" link="#CCCCCC" vlink="#CCCCCC" alink="#CCCCCC">
<p><a href="#" onClick="d1win=dhtmlwindow.open('d1box', 'ajax', 'd1.php', 'RSS Feed Ajax', 'width=600px,height=400px,left=250px,top=150px,resize=1,scrolling=1'); return false">Load RSS Feed</a></p>
<p><a href="#" onClick="d2win=dhtmlwindow.open('d2box', 'ajax', 'd2.htm', 'Big Image Ajax', 'width=600px,height=400px,left=270px,top=170px,resize=1,scrolling=1'); return false">Load Big Image</a></p>
<p><a href="#" onClick="d3win=dhtmlwindow.open('d3box', 'ajax', 'd3.htm', 'Huge text Ajax', 'width=600px,height=400px,left=290px,top=190px,resize=1,scrolling=1'); return false">Load Huge Text</a></p>
<p>&nbsp;</p>
<p> <a href="#" onClick="waitPreloadPage();">Hide 'prep'</a> (don't work even here)</p>
</body>
</html>


d1.php (rss feed) >>


<html>
<head>
<STYLE type=text/css><!--
p { font-family:Verdana; font-size:10px; }
--></STYLE>
</head>
<body bgcolor="#2D2D2D" text="#666666" link="blue" vlink="purple" alink="red">

<span id="prep" style="font-size:16pt;"><font color="#0099FF" face="Verdana">Loading
rss feed...Please wait</font></span>

<br><br>

<?php
include "./lastRSS.php";
$rss = new lastRSS;
if ($rs = $rss->get('http://www.washingtonpost.com/wp-dyn/rss/politics/index.xml')) {
// Show website logo (if presented)
if ($rs[image_url] != '') {
echo "<a href=\"$rs[image_link]\"><img src=\"$rs[image_url]\" alt=\"$rs[image_title]\" vspace=\"1\" border=\"0\" /></a><br />\n";
}
// Show clickable website title
echo "<big><b><a href=\"$rs[link]\">$rs[title]</a></b></big><br />\n";
// Show website description
echo "$rs[description]<br />\n";
// Show last published articles (title, link, description)
echo "<ul>\n";
foreach($rs['items'] as $item) {
echo "\t<li><a href=\"$item[link]\">".$item['title']."</a><br />".$item['description']."</li>\n";
}
echo "</ul>\n";
}
else {
echo "Error: It's not possible to reach RSS file...\n";
}
?>

<script>document.getElementById("prep").style.display = "none";</script>

</body>
</html>

d2.htm (Image)


<html>
<head>
<STYLE type=text/css><!--
p { font-family:Verdana; font-size:10px; }
--></STYLE>
<SCRIPT TYPE="text/javascript" LANGUAGE="javascript">
<!--

function waitPreloadPage() { //DOM
if (document.getElementById){
document.getElementById('prepage').style.visibility='hidden';
}else{
if (document.layers){ //NS4
document.prepage.visibility = 'hidden';
}
else { //IE4
document.all.prepage.style.visibility = 'hidden';
}
}
}
// End -->
</SCRIPT>

</head>
<body onLoad="waitPreloadPage();" bgcolor="#2D2D2D" text="#666666" link="blue" vlink="purple" alink="red">

<span id="prepage" style="font-size:16pt;"><font color="#0099FF" face="Verdana">Loading Big Image...Please wait</font></span>

<p><img src="car.jpg" width="960" height="720" border="0"></p>

</body>
</html>

d3.htm (huge text)


<html>
<head>
<STYLE type=text/css><!--
p { font-family:Verdana; font-size:10px; }
--></STYLE>
</head>
<body bgcolor="#2D2D2D" text="#666666" link="blue" vlink="purple" alink="red">

<span id="prep" style="font-size:16pt;"><font color="#0099FF" face="Verdana">Loading Huge Text...Please wait</font></span>

<p align="justify">500 lines text going here</p>

<script>document.getElementById("prep").style.display = "none";</script>

</body>
</html>

Samuell
10-18-2007, 06:54 PM
Regarding the highlighted active window title bar, I'll consider adding it as a feature the next time the script is updated.
Oh, man 8)
I don't know how to ask you...
I've done some investigation and I've been told that you are actually creator of Window Widget, nobody know your name though... =(
I can suppose that nobody can add that features better and faster than you. Man, I need this things now. Very much. Is there a chance to persuade you anyhow?)) Do you accept payment?))
I need this preloader and titlebar so much, tell me how I can persuade you, please :)

ddadmin
10-19-2007, 08:52 AM
I'll see what I can come up with for you this weekend. No promises though. :)

Samuell
10-19-2007, 10:12 AM
I'll see what I can come up with for you this weekend. No promises though. :)
You make me happy today http://farm3.static.flickr.com/2288/1633250278_4c477e1a3c_o.gif

ddadmin
10-22-2007, 09:47 AM
Ok, below are the modified .js and .css files for DHTML Window widget that adds the following:

-Adds "focus" to topmost DHTML window widget
-Adds "loading" text to DHTML window content fetched via Ajax

Just replace the original two files with the attached.

Samuell
10-23-2007, 09:38 AM
You forgot to attach .css :)
Anyway, everything work perfect!!!
THANK YOU SO MUCH! I sent you pm.

ddadmin
10-23-2007, 10:50 AM
Ah attached the .css file as well above. You'll need it, since it contains CSS rules that define the opacity of the window handle used in the focus/blur effect.

Samuell
10-24-2007, 01:56 PM
seems like everything not so smooth :)
focus don't want to work in IE6 yet, Mozilla and Opera are ok though
and I can't get how css opacity work, I try to change it but there is no effect. so I change opacity from js, actually from here:

setfocus:function(t){
this.setopacity(this.lastactivet.handle, 0.8)

Although, you did not respond to my pm :)
Ones again I can hope only for your help, DD, please help!)

ddadmin
10-24-2007, 11:57 PM
Ah, in IE6, the opacity only works on elements with an explicit CSS "width" value defined. Inside the .css file, try making the change below:


.drag-handle{
"
"
width: 100%;

}

In other words, replace "width: auto" to "100%" instead. Sorry about the pm, been really busy lately. One of these days. :)

Samuell
10-25-2007, 08:27 AM
Thats amazing 8) IE now works! Thank you very much!
I hope you gonna contact me when you'll have a minute. =)

Samuell
11-02-2007, 03:02 PM
Ah, in IE6, the opacity only works on elements with an explicit CSS "width" value defined. Inside the .css file, try making the change below:

.drag-handle{
width: 100%;
}
In other words, replace "width: auto" to "100%" instead. Sorry about the pm, been really busy lately. One of these days. :)
Hi, DD!
I saw your new version of WiWi :) Its cool! Especially addon - thats just amazing!
Its great to realize that I made a touch to this.
You may wanna know that width:100% works ok only in IE, sadly Opera and Gecko output oversize handle line about 15% wider than whole window. I fix it with small code inside index.php which load different .css files for different browsers. But you may wanna fix it in more elegant way with some internal solution. (I have no idea how though) I saw you still use width:auto It's work great in Opera and Gecko but you leave IE without handle line's focus =)
And another thing, very important thing. You add nice option 'empty-close' in addition to hide function, but now we have to create and open windows with different functions, but that would be very useful to do it with single function as before. Can you please add another one function which would create window at first click and open(show) this window at second click?

ddadmin
11-02-2007, 11:37 PM
Hi:
Regarding the "width:100%" requirement in IE, this seems to only apply to IE6. In other words, IE7 still gets the correct opacity effect with just "width:auto". That's why in the .css file, the new version contains:


* html .drag-handle{ /*IE6 and below CSS hack. Width must be set to 100% in order for opaque title bar to render*/
width: 100%;
}

This adds "width:100%" to apply to just IE6 and below users.

Samuell
11-05-2007, 10:04 AM
ok, you knew that ;)
but I had no prob with css, I need that double function. that was very, very nice in previous version when function that creates windows works also as showup function. but now its only creates window, each time I need to show up that window again its load all content again, that put me in trouble, couse I can't use different links to create and show windows.
Please, DD, help me ones again!)) I believe this could be useful for all users.

ddadmin
11-06-2007, 04:54 AM
In the past show() was able to revive a window that has been closed, because all the close() function did back then was hide the window, not empty its contents as well. So in that sense, the reason why things are different now is because the behavior of close() has changed, and it makes more logical sense to distinguish between show() and open() as a result.

FYI, when you call open() on a window that has been closed, the script doesn't create a whole new window instance, but uses the existing window instance and loads it with the desired content. So if you're worried about efficiency, it's not really an issue. Open() will only create a window if the window you're creating based on the unique ID passed into the function doesn't exist yet- otherwise, it just works with the existing window per the entered ID already on the page.

Samuell
11-07-2007, 01:05 PM
Thank you for explanation. I'm affraid I don't understood all the things though.

FYI, when you call open() on a window that has been closed
you mean window that has beed hidded, right?

the script doesn't create a whole new window instance, but uses the existing window instance and loads it with the desired content.
I guess this is exactly what put me in trouble. Its load content every time I click it. So it work not as show() as in the previous version.
Please take a look at this demo -
http://demoftp.freehostia.com/index.php
Click 'Load RSS Feed' link then 'Hide window' link and then 'Load RSS Feed' again. And you will see that feed loads again.
Its all another way now. Close button also not hidding window as before, it close it. So I add 'Hide window' link in demo.
I know how to redefine Close button action to make it work as hide(). I have already done it and its work. But I have no idea how to make open() function show window on second click without reloading content(to make it work as in previous version).
You made open() just to open window and close() just to close window. And you add two additional function to hide and show. So we have to use 4 different links now but I can use only two. And I need this two to be show&hide(as before) but not open&close.
I hope you understand now what I mean.
I just want previous version of script with handline focus and preloading message mods. The file you submitted in this thread have this mods and have no close function, but saddly it already have open-reload function, but I need open-show function exactly as before.
That would be very cool if you release a special version of WiWi with that two mods but with old show&hide only system. Or show me how to make open() function DO NOT reload content each time and just show already loaded window that has been hidded.
Please, DD! I need it all this time.

ddadmin
11-07-2007, 07:12 PM
Click 'Load RSS Feed' link then 'Hide window' link and then 'Load RSS Feed' again. And you will see that feed loads again.

That's actually the way it worked before as well. The open() function will always cause the content to be loaded, or if it already exists, reloaded. Instead of calling open(), the function show() should be used if you're merely reviving a hidden window.

I've attached a copy of the old dhtmlwindow.js below. Try using it to confirm the above.

Samuell
11-08-2007, 03:22 PM
It's funny :)
Seems like you forget how did your script work before...and lost files))
I have updated demo with true old version of the script(v1.03: May 5th - attached)
Please, take a look - http://demoftp.freehostia.com/index.php
Click 'Open RSS Feed' then close window and click 'Open RSS Feed' again and you will see that window do not reloads, its shows up instantly. This is what i'm talking about. I need exactly this script but with handline focus and preloading message mods.
Is it possible? 8)
I hope you understand now what I really need, I hope so, and I hope for your help, DD!))

Samuell
11-09-2007, 08:03 AM
What you think, DD? Is it possible?

ddadmin
11-09-2007, 08:19 PM
Hmm I see what you mean, but my point is, nothing has changed with the open() function from the previous version to the current- that is to say, in both versions, the script fetches the contents again (not recreate the entire window btw).

To confirm what you're describing is due to changes to the close() function in the new window, inside the most recent dhtmlwindow.js file, change the following line:


t.close=function(){dhtmlwindow.hide(this)} //public function for closing dhtml window (also empties DHTML window content)

The part in red above is the change you should make. What this does is change the latest dhtmlwindow.js's close() behavior back to the old. Let me know with that change, if the content is "reloaded" each time you call open().

Samuell
11-11-2007, 10:29 AM
Hmm I see what you mean, but my point is, nothing has changed with the open() function from the previous version to the current- that is to say, in both versions, the script fetches the contents again (not recreate the entire window btw).

To confirm what you're describing is due to changes to the close() function in the new window, inside the most recent dhtmlwindow.js file, change the following line:


t.close=function(){dhtmlwindow.hide(this)} //public function for closing dhtml window (also empties DHTML window content)

The part in red above is the change you should make. What this does is change the latest dhtmlwindow.js's close() behavior back to the old. Let me know with that change, if the content is "reloaded" each time you call open().

That was the very first thing I try to change by myself. And that do not help for sure. I upload the new demo with this change -
http://demoftp.freehostia.com/index2.php I can say this change even do not redefine function of close button in handle line but only redefine function of separate additional close links. You can click 'Close window' link and it will hide window now. After that you can click 'Load RSS Feed' link and you will see that window or content of window reloads. I believe when you click 'Load RSS Feed' [something] exactly close that window and then open it again. You can see it in Opera - when window is opened the css from script applys to index.php and each time when you click 'Load RSS Feed' styles first dissappear and when feed get loaded styles applys.
Or maybe problem is here:

open:function(t, contenttype, contentsource, title, attr, recalonload){
var d=dhtmlwindow //reference dhtml window object
function getValue(Name){
var config=new RegExp(Name+"=([^,]+)", "i") //get name/value config pair (ie: width=400px,)
return (config.test(attr))? parseInt(RegExp.$1) : 0 //return value portion (int), or 0 (false) if none found
}
if (document.getElementById(t)==null) //if window doesn't exist yet, create it
t=this.init(t) //return reference to dhtml window div
Maybe somehow process always go through this.init(t).
Old demo is also available - http://demoftp.freehostia.com/index.php
I try to find difference why it's work in different ways. Why old script reopens windows instantly and new one reload content each time. And I can't find it of course. I hoped you could find though. :)
I got idea. Maybe its more easily to take that old script from old demo and add that 2 mods?

Samuell
11-13-2007, 08:55 AM
It still reloads, DD, don't leave me alone with this fix, please!!!

ddadmin
11-13-2007, 10:31 AM
I'm still here. :) Please let me get back to you later today. Questions can take a day or two to be answered.

ddadmin
11-14-2007, 04:26 AM
I've just done a line by line comparision between the most recent dhtmlwindow.js file and v1.03 (the one you attached), and am almost ready to conclude that whatever difference in the loading behavior you're getting has something to do with the page in question, not the new dhtmlwindow.js file. But lets say the issue is due to the updated script- lets try disabling the single change in the open() function compared to v1.03, and see if that changes anything. Using the new mostrecent_dhtmlwindow.js file, comment out the two instances of the following line in the script:


//this.setfocus(t)

In other words, find the two occurrences of the above line, and add "//" in front.

Also, set the ajaxbustcache to false near the top of the script:


ajaxbustcache: false

Does that change anything?

Samuell
11-14-2007, 11:06 AM
No, that's not focus or cache. I've done a line by line comparision too right now and found the clue.
If I comment this line -
//t.contentarea.innerHTML=this.ajaxloadinghtml
window do not reloads. So the problem is in the preloader. Have you any idea why its work this way and how this can be fixed?
You can see how it work now on this page -
http://demoftp.freehostia.com/index3.php
Just click 'Open RSS Feed' then 'Hide window' link and again 'Open RSS Feed' and you will see that window appears instantly.

ddadmin
11-15-2007, 02:19 AM
I've considered the line:


//t.contentarea.innerHTML=this.ajaxloadinghtml

but didn't see how it could cause the issue in question. But basically, are you saying by commenting out that line, everything now work fine for you?

Samuell
11-15-2007, 08:41 AM
Not for me, it just work fine at all. It can work fine for you too if you check that demo index3.php. :) That line block preloading function which cause a problem. I'm sure this is a bug.
Did you see third demo? Does windows reopens instantly without reloading? There is no doubt that preloader cause reloading bug, it's obvious. Isn't it? :)

ddadmin
11-15-2007, 10:44 AM
Yep, on index3.php, opening a window, then hiding it (using the "Hide" link), then opening the window again is instant (content isn't refreshed). So again, are you saying that the problem is now basically fixed for you, by removing the "preloading" message?

The "preload" message merely sets the window's content to a textual message while the actual content is being fetched. If it is the cause of your issue, then it's most likely one to do with browser behavior, not the DHTML window script. In other words, I can think of no "fix" to it by changing the script, other then to remove that line obviously.

Samuell
11-15-2007, 11:53 AM
So you want to say there is no way to get preloader without window refresh? Its pretty funny becouse preloader use to be an option to improve windows loadings but in our case its going to be loading trouble-maker. The problem is that I can't go without preloader with really big content amount to load and I can't go with preloader which reload all that content every time.
I can't belive that there is no way to make a good one preloader. Isn't it? =(

Samuell
11-15-2007, 12:19 PM
I can give you one possible way righ now - open() function should work as show() function on second and next clicks. Then we save preloader for first click and get windows to showup instantly on next clicks.
And another one thing. How do you think is it possible to make preloader in Modal window addon style? This could be a true ass-kicker :) Plesk like style.

ddadmin
11-15-2007, 10:41 PM
There are certainly alternatives when it comes to implementing the "loading status". Since the culprit seems to be setting the .innerHTML property, which wipes the browser cache it seems, the trick is to create a loading scheme that relies on something else, perhaps an absolutely positioned DIV that appears until the content is fetched.

I'm not sure when I can get around to trying out the above, since to be honest the current scheme isn't really problematic as far as I'm concerned, and based on feedback (or lack thereof) from other people.

Samuell
11-16-2007, 12:53 PM
ok, that not too much critical for me too.
I'm trying to use js now, but again nothing work. Please take a look at this code

<script type="text/javascript">
function showfeed(){
if(document.getElementById('feedwin') != null) {
feedwin=dhtmlwindow.show()
} else {
feedwin=dhtmlwindow.open("feedbox", "ajax", "feed.php", "RSS Feed",
"width=400px,height=270px,left=550px,top=150px,resize=1,scrolling=1")
}
}
</script>
I wanna make window get to show up if it already exist and get to open if not. But again its always reloads(reopens). So what is wrong here?

Samuell
11-16-2007, 02:31 PM
or maybe this could be done by dhtml inside main script?
I try to add this

open:function(t, contenttype, contentsource, title, attr, recalonload){
if (t.isHided){
t.style.display="block"
return false } else {...original code...}
and this

hide:function(t){
t.style.display="none"
t.isHided=true
},
but it also do not work. window reloads every time as always
Please, DD, give me something I can go further with. I need this from very start.

ddadmin
11-16-2007, 11:48 PM
To either call open() or show() based on whether a DHTML window already exists, just test for it as follows:


function showfeed(){
if (typeof feedwin!="undefined")
feedwin.show()
else {
feedwin=dhtmlwindow.open("feedbox", "ajax", "feed.php", "RSS Feed",
"width=400px,height=270px,left=550px,top=150px,resize=1,scrolling=1")
}
}

Notice it's feedwin.show(), not feedwin=dhtmlwindow.show()

Samuell
11-19-2007, 09:51 AM
Ohh, yeah! Everything work perfect now!
I think I do not need anything else.
I have no idea how I can thank you, you spent so much time helping me, I guess you lil bit tired to respond all my needs)))
I would like to talk with you live. I sent you pm with my contacts. Please, contact me by one of that ways.

Samuell
11-19-2007, 09:53 AM
. .:*THANK YOU, DD! YOU ARE WONDERFUL!*:. .

ddadmin
11-19-2007, 11:04 AM
You're welcome. :) That's what the forums are for, to ask questions. Whether or not you'll always get a response (or a response that you like) is another question, but it never hurts to ask.

Samuell
11-19-2007, 11:08 AM
So . . . will you talk to me live?)

Samuell
11-19-2007, 11:09 AM
maybe right now? it will not take much your time, I just want thank you :)