How to create a site like this

**gavinv3** · 09-29-2007, 03:16 PM

I would like to know how the functionality on the foll site is done.
www.optuszoo.com.au

I understand that each is a layer and they have been given the functionality to be dragged - but what kind of a script is used to drag it and then drop the boxes in diff locations,
If some one could throw light on this trick.

**TimFA** · 09-29-2007, 03:26 PM

I've seen a script similar to that before, here. That isn't the exact same, but close.

**TimFA** · 09-29-2007, 03:38 PM

If you actually want to use t, I can search around for a different one, it appears to be old, and DHTML Central doesn't have a listing so you can't get it (taking it out of source code is usually inconvenient).

EDIT: Heres something, if you need it. Demo.

**gavinv3** · 09-29-2007, 03:45 PM

Thanks for the information - I did succeed in doing it earlier with dreamweaver by using layers an the drag layer option - I you could help me with how the boxes fit in place and also how do they expand and close
Regards
Gavin

**gavinv3** · 09-29-2007, 04:08 PM

Once long time ago I had come across a site which had small squares at the top end of the webpage with diff. colors in each box . It was like a color picker - if you click on the box it would change the background of the webpage - how does this work

Regards
Gavin

**Rockonmetal** · 09-29-2007, 04:30 PM

Tim thats a great site... thanks...

**TimFA** · 09-29-2007, 04:48 PM

Heres a change background color of page script, if you men't something different let me know.

Theres also this one, and this one. Just put the link inside one of your windows.

Tim thats a great site... thanks...

I thought the windows looked pretty "modern" whereas most look out-dated.

**gavinv3** · 09-29-2007, 05:02 PM

Thanks a lot Tim, Yes that's exactly what I wanted.

Can you help me with how to get a search box like the one in the left hand side of this page: http://widgets.yahoo.com/gallery/

I dont want anything attached to it like a search script - I just want to know how to make a textbox look so beautiful - enclosed in the graphic.

Secondly, I would like to know how to create a small copy button that uses a graphic besides it - in other words if I type anything in it - clicking on the button should copy what is in it to the clipboard

Regards
Gavin

**TimFA** · 09-29-2007, 05:18 PM

You can sue a CSS style-sheet and whenever the form is made you can add background colors to the stuff. Heres and example.

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <link rel="stylesheet" href="layout.css"
 type="text/css">
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Search</title>
</head>
<body>
<div id="container">
<form method="get" action="http://www.google.com/search"><input
 id="searchbox" name="q" size="25" maxlength="255"
 value="" type="text"><br>
  <input id="searchbutton" value="Search" type="submit"></form>
A nice pretty searchbox.
</div>
</body>
</html>

CSS

Code:

div#container
{
color: #FFFFFF;
font-family: Arial;
font-size: 10pt;
text-align: center;
margin:auto;
background-color: #000000;
height: 250px;
width: 250px;
}

#searchbox
{
font-family: Arial;
font-size: 10pt;
width: 148px;
color: #FFFFFF;
background-color: #000000;
border: #4F4F4F 1px solid;
}

#searchbutton
{
font-family: Arial;
font-size: 10pt;
color: #FFFFFF;
background-color: #000000;
border: #4F4F4F 1px solid;

Save them both to your desktop one as an HTML file other as a CSS. If you not sure how to do this, open Notepad paste in the HTML click Save, navigate to your Desktop where it says text document switch that to All Files, then in the name slot type in "Search.html", same for CSS only name it "layout.css". I believe its also possible to use images as the background. Furthermore, I don't know what they did, but the easiest way for the graphic effect would be to make a border on three (or all) sides the same color as the image.

Second thing:

I'm not good at that sorta stuff. I'd search Google for "copy clipboard to textbox".

EDIT: I see what they did, sorry I was looking at the other box :P. The easiest way to duplicate would be to put an image on each side, then put a border on top and bottom. One of the images would submit the form.

**gavinv3** · 09-29-2007, 05:55 PM

Tim, thanks for it - however it isn't what I meant.

I am creating a website for the place I work - we have web based tools where in we put the username into a text field and then get into the a/c - Now this is a different page [window] - I am creating a webpage in which you have only one text field - where you put the username - then I have a button to click it will open the a/c in the other window - its like borrowing only the text field of that window into my webpage. - is it possible to do it. I have seen someone do it but I dont know that person - All I know is he used java to do it.

Thread: How to create a site like this

Thread Tools

Search Thread

How to create a site like this

Bookmarks

Bookmarks

Posting Permissions