Resize auto refreshing?

Page: 1

Author Post
Strahan
Guest
I'm using floatbox to make a login/registration window for my website. If you click Login, it opens a 400x185 window with the login fields and it also has a register button. Clicking register is supposed to resize the window to 640x480 and move to the register function. However, the first time you click register it resizes the window but goes back to the login page. Pressing register a second time brings you to the reg page.

The site uses a form variable "mode" to know what it's doing. This is sorta what I have codewise:


<form name=data method=post action=index.php>
switch($_REQUEST["mode"]) {
case "login":
echo "username: password: etc etc";
echo "<input type=button onclick=&#039;data.submit();&#039; value=&#039;login&#039;>";
echo "<input type=button onclick=&#039;fb.resize(640, 480);data.mode.value=&#039;register&#039;;data.submit();&#039; value=&#039;login&#039;>";
break;
case "register":
echo "some text";
}
echo "<input type=hidden name=mode value=&#039;{$_REQUEST["mode"]}&#039;>";


Does doing fb.resize perhaps trigger a refresh if the window was not the specified size or something? That would explain the behavior. If that's the case, is there a way to stop it? If that's not the case, what should I be checking to fix it?

Thanks alot!
Strahan
Guest
PS, I just noticed something. I tried the site in IE to see if it acted the same, and IE must render slower than FF because I can see, for a split second, the registration page when I first click Register and it resizes. It switches to the login page after that brief glimpse.

Weird.
Administrator
Registered: Aug 2008
Posts: 3382
I assume this content is loaded as an iframe. (It should be - there are conflicts with the keyboard handler if form content is loaded as ajax or inline content.) When an iframe is resized, the src is reloaded so that it can re-render properly to the new dimensions. This reload is done by the browser, not by floatbox. So you've got two content loads happening at the click event time - one redrawing the current content and the second re-fetching index.php as a result of the post.

You may need to change your strategy a little. Perhaps instead of resizing and posting you should do it all in one action with something like:
<input type="button" onclick="parent.fb.loadAnchor('index.php?mode=register', 'sameBox:true width:640 height:480');">register</button>


Note: The above button code is just a generic sample. It probably doesn't fit exactly what you are doing because I don't understand fully what you are doing.
If you use parent.fb, you don't need to include the floatbox files inside the iframe content (unless you have other reasons for doing so).
Strahan
Guest
Actually, that example was perfect :) I plugged it in and voila, works like a champ. Exactly what I needed.

Thanks! It's cool that such a handy tool is free and over the top cool that a free product has such helpful and prompt support ;) I'll be donating for sure once I get paid next week.

Thanks again!
soll
Guest
First, hello and happy new year ;) thanks for floatbox, its is best. :D
I'm a js noob and sory me english :oops:

I need reload me form if user make error how cant do this ?
refres work perfet bat dont get submit :roll:

code is like this index.php
<div id="register" >
<a href="'/login.php?process=register" rel="floatbox" rev="type:ajax theme:custom showClose:false width:600 height:600 shadowType:none">Register</a>
</div>


and login.php
#set emtpy name
$acc['name'] ='';
#We Have Collect Info?
if (isset($_POST['name']))
{
#code for Security,backreference,mysql e.g
#if name false is do this e.g
$acc['name'] = $_POST['name'];
}
#echo form
echo'
<form action="" method="post">
<input id="input_text" type="text" name="Name" value="', $acc['name'] , '" maxlength="20" size="23"/>
<input type="Submit" onclick="parent.fb.loadAnchor(\'',$url ['sdir'],'/login.php?process=register\', \'sameBox:true type:ajax\');" value="register"/>
</form>';

Now get onli url on parent.fb.loadAnchor how can get submit info ?

and one questions off topic can i use dragonDrop in button ?
i found this :if (this.enableDrag) this.fbBox.onmousedown = this.dragonDrop();
i am not use outside of the main content area cant make button in main area
or make active drag area me div.id ?

txn for your help and agen sory for me english :oops:
your js is rial the best thanks for your work :)
Administrator
Registered: Aug 2008
Posts: 3382
I'm not sure exactly the problem or the solution, but perhaps these observations will help.

It seems you have a conflict in that you are both submitting the form and running loadAnchor. So you are making two requests for new content at once - only one of which can be satisfied. One request is the response from the form submission, and one is the javascript driven content refresh.

I would make two recommendations:

First, don't load your form via ajax, but load it as an iframe instead. (Just remove "type:ajax" from the rev attribute.) This helps with the keyboard handling, but also with the response target.

Second, don't use loadAnchor. Just do a form submission and have the response from that form submission load the content you want. Now that you have loaded your form as an iframe, the submission response will come back into that iframe and so remain rendered inside floatbox.

As for dragonDrop, you may be able to extend the area of the floatbox that dragging is enabled for by hacking the code a little bit. In the dragonDrop function definition, find the line
if (/fb(Box|Canvas|Info|Caption|Item|Control|Index)/.test((e.target || e.srcElement).id)) {
and add in "Content", something like:
if (/fb(Content|Box|Canvas|Info|Caption|Item|Control|Index)/.test((e.target || e.srcElement).id)) {
If this doesn't give you the behaviour you want, there is probably no hope. :( :)
soll
Guest
iframe works perfect Thanks!
but iframe mode needs to load again header css and js :? and this makes the site slower :|

index.php (header)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="floatbox.js"></script>
<link type="text/css" rel="stylesheet" href="floatbox.css" />
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>


and if you open the inframe box (from login.php) loads again the same on index.php
<iframe id="fbContent" class="fbContent_custom" height="600" frameborder="0" align="middle" width="600" scrolling="auto" src="login.php?process=register" style="border: 0pt none ;">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<script src="floatbox.js" type="text/javascript"></script>
<link href="floatbox.css" rel="stylesheet" type="text/css"></link>
<link href="index.css" type="text/css" rel="stylesheet"></link>
</head>


is it posible to send action and sumpit info in ajax mode?
I suppose that loading 2 times the same thing is no good for a page.

sorry for my 2 actions, it's my fault. :P
the right action is:'/login.php?process=register'


Thanks for dragonDrop, I'll look into it..
Thanks for your support. :D
« Last edit by Unknown on Fri Jan 02, 2009 3:56 pm. »
Administrator
Registered: Aug 2008
Posts: 3382
Are you sure the iframe is slower? Have you measured it or seen visibly slower loading? When the iframe loads, the js and css files should already reside locally and be fetched from cache, not re-fetched from the server.

Also, you don't need to include the floatbox js and css files in the iframe content page if you don't have floatbox-enabled links inside that iframe content. Take those js and css include lines out if you don't want them there.
soll
Guest
yes is slower I used yslow plagin for mozilla http://developer.yahoo.com/yslow/

Localhost yslow performance
Grade: D (62) (ajax mode open )
Grade: F (59) (ifram mode open)

needs js and css, i have floatbox links inside. I am try to use Floatbox like GUI (graphical user interface) for me project :) now start learning AJAX i'm a js noob :? I suppose need learn about XMLHttpRequest for submit ajax. Floatbox is not suport function for this ?
where can I get docoment for Floatbox function ?
Thanks again for your support :D and sory for me english
Administrator
Registered: Aug 2008
Posts: 3382
Quote
where can I get docoment for Floatbox function?
Hmm, maybe in the docs folder that's in the zip file you downloaded? (Or online in the floatbox pages too.)

I'm not sure what the yslow numbers are measuring, but the difference between 62 and 59 doesn't strike me as something to worry about. 3 milliseconds?
soll
Guest
admin wrote
Hmm, maybe in the docs folder that's in the zip file you downloaded? (Or online in the floatbox pages too.)

this docoment have only option and flag
not function like fb.loadAnchor - fb.end - parent.setTimeout .... and more

admin wrote
I'm not sure what the yslow numbers are measuring, but the difference between 62 and 59 doesn't strike me as something to worry about. 3 milliseconds?

i am not sure for the milliseconds. I think 5 is not standard ( and is localhost -no lag). I know, is not problem for most web site, but is substantially for me ;)

nvm I'll find a way.Thank for responses :D
Administrator
Registered: Aug 2008
Posts: 3382
options.html in the docs folder contains options and flags as you say. This is not the only document in that folder. There is also instructions.html. It is probably the "Programming active content" section in the instructions that you are looking for.

Page: 1