PDA

View Full Version : How to get DHTML box to appear?



zeropsi
08-05-2006, 12:03 AM
Like on this page: http://finance.google.com/finance, once you enter in a search query, it will have a little DHTML box that appears with some info, how can I duplicate this?

TIA!

mburt
08-05-2006, 01:00 AM
You could use an Iframe:



<a href="http://www.mamma.com/" target="win">Open</a>
<br><iframe name="win"></iframe>

zeropsi
08-05-2006, 04:01 PM
You could use an Iframe:



<a href="http://www.mamma.com/" target="win">Open</a>
<br><iframe name="win"></iframe>


Any ideas on how I can get it to appear like on another layer. Like a popup box.

shachi
08-05-2006, 04:09 PM
If you are talking about the auto suggest then that's AJAX not DHTML, Simple DHTML cannot send data back and forth the server(except using the hidden iframe technique). Try reading this: http://www.dynamicajax.com/fr/AJAX_Suggest_Tutorial-271_290_312.html

mburt
08-05-2006, 04:28 PM
Try this:


<html>
<head>
<script>
//er... this is a combination of Twey and jscheuer1's script
function getFile(filename)
{ oxmlhttp = null;
try
{ oxmlhttp = new XMLHttpRequest();
oxmlhttp.overrideMimeType("text/xml");
}
catch(e)
{ try
{ oxmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{ return null;
}
}
if(!oxmlhttp) return null;
try
{ oxmlhttp.open("GET",filename,false);
oxmlhttp.send(null);
}
catch(e)
{ return null;
}
return oxmlhttp.responseText;
}

function getData(file){
return getFile(file)
}
</script>
</head>
<body>
<div style="border:1px solid black;width:200px;height:200px;overflow:scroll">
<script>document.write(getData('http://www.mamma.com'))</script>
</div>
</body>
</html>

shachi
08-05-2006, 04:50 PM
mburt: First thing: that will not work because:

1) it does not have a server side page to make the HTTP query,
2) document.write just overrides the whole page, use innerHTML instead,
3) to make queries over domains you need cross domain ajax(you cannot simply use http://mamma.com/ until it is your domain).

That code will not work believe me. And by the way that code is not correct. mburt: you better read this: Hello World in AJAX (http://www.dynamicajax.com/fr/AJAX_Hello_World-271_290_322.html)

mburt
08-05-2006, 04:55 PM
document.write just overrides the whole page, use innerHTML instead

document.write doesn't override the whole page within the <body>. it simply adds whatever is necessary. I will take into account what you have said though.

shachi
08-05-2006, 05:00 PM
That link I included could be useful for you.:)

mburt
08-05-2006, 05:04 PM
Okay, thanks. :)

zeropsi
08-05-2006, 05:58 PM
Thanks for all of the feedback!

I already have my AJAX framework in place, and its sending the data back and forth, however, I was unable to get the box or window to appear and "float" over my page, like the Google page had shown.

shachi
08-05-2006, 06:00 PM
It depends on frameworks. Which framework are you using?? And could you provide us a demo page or something??

zeropsi
08-05-2006, 06:04 PM
This website is currently being developed, so be gentle. :o
http://www.investchallenge.com/stocks.php <-- Website

Username: demo
Password: demo

Once you are logged in, you will be redirected to a page, and click on the "Purchase Stocks" tab.

Enter a few queries in the Ticker Symbol field, and you should see a list of related stocks appear at the bottom.

Here is the related AJAX and JS: http://www.investchallenge.com/templates/functions.js

shachi
08-05-2006, 06:10 PM
Change



Ticker Symbol</td><td><div style="display:inline; width:200px;"><input type="text" name="symbol" onChange="javascript:sendRequest('search', this.value); ">


To



Ticker Symbol</td><td><div style="display:inline; width:200px;"><input type="text" name="symbol" onkeyup="javascript:sendRequest('search', this.value); ">

zeropsi
08-05-2006, 06:14 PM
Change



Ticker Symbol</td><td><div style="display:inline; width:200px;"><input type="text" name="symbol" onChange="javascript:sendRequest('search', this.value); ">


To



Ticker Symbol</td><td><div style="display:inline; width:200px;"><input type="text" name="symbol" onkeyup="javascript:sendRequest('search', this.value); ">



I have tried that, it doesn't seem to like that inline event handler, at least not in FF.

shachi
08-05-2006, 06:15 PM
replace it and let me see if it works or not(we must try every possibility).:)

zeropsi
08-05-2006, 06:16 PM
replace it and let me see if it works or not(we must try every possibility).:)

It's currently on that page.

shachi
08-05-2006, 06:17 PM
EDIT: Oops, sorry, try replacing onkeyup with onkeydown.

zeropsi
08-05-2006, 06:18 PM
Oops, sorry, try replacing onkeyup with onkeyup.

still nothing in FF.

shachi
08-05-2006, 06:22 PM
Actually it works type a character and wait some time.

zeropsi
08-05-2006, 06:28 PM
Actually it works type a character and wait some time.

Yea, I see that now.

I think I am going to stick with onchange for the sake or quickness and cross browser compatibility.

Any ideas on how to get that search_results <div> to float above the page. Maybe I am just spending too much time on something that really is worthless. :rolleyes:

shachi
08-05-2006, 06:31 PM
It is getting slow because : Before one request can come back to the client another request is sent so the action is not performed quickly. If you want to make it really quick then either you have to make the request in an array and push another request or delete the old request and create a new one after the job has been done.



Any ideas on how to get that search_results <div> to float above the page. Maybe I am just spending too much time on something that really is worthless.


I couldn't get what you meant.

zeropsi
08-05-2006, 07:05 PM
I couldn't get what you meant.

Just referring back to the original question, how to get the box to appear to float above the page, similair to the http://finance.google.com/ page.

shachi
08-05-2006, 07:14 PM
try position:absolute for the div.

mburt
08-05-2006, 07:19 PM
Specifiy left and top too in the css.

shachi
08-05-2006, 07:24 PM
Yep, forgot about that.;)

zeropsi
08-05-2006, 07:52 PM
Also, since some of you may have played around with the site, any other feedback?

shachi
08-05-2006, 07:59 PM
Nope, I haven't gone out of the subject.(I didn't play around except for the puchase stocks tab). But I must say that you make great websites and RIAs.:)

zeropsi
08-05-2006, 11:47 PM
Nope, I haven't gone out of the subject.(I didn't play around except for the puchase stocks tab). But I must say that you make great websites and RIAs.:)

Thanks! :cool:

RyanSmith345
09-06-2006, 11:50 PM
I just wanted to say, that's a nice clean looking site you have there. Good graphic designe for pleasant, professional feel.