Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

Intro Page Photo

Started by magusbuckley , May 22 2005 10:29 AM

Please log in to reply

#1
magusbuckley

Posted 22 May 2005 - 10:29 AM

Member

Member
626 posts

Hello:

My wife and I are living in MS right now, but our friends and family are scattered across the US. So that they all could easily see our baby (now seven months old), I created a web page. I am very interested in changing the Intro Page.

The Plan: To have the following intro page (see very crude sketch below) display when visitors come to our site.

The Problem: I want the Intro Page to be displayed Full Screen no matter what the visitors screen resolution is set to. Is there a way to make a page resize itself to be full page at any screen resolution? For Example: If I design this page for 1024 x 768, visitors viewing the site at 800x 600 will have scroll bars. I don't want scroll bars. On the flip side: If I optimize the photo for users with 800 x 600, the viewers with 1024 x 768 screen resolutions will see a small scale version of the photo. I want it to be full screen at any res.

Possible? :tazz:

The link above is a very crude drawing of what I have planed for the intro page. The link to my little girls web site is as follows: http://www.babybonline.net

Any and all information will be greatly appreciated.

#2
ssone

Posted 02 June 2005 - 07:58 PM

Member

Member
301 posts

yes you can use percent instead of pixels :tazz:

#3
magusbuckley

Posted 03 June 2005 - 02:14 AM

Member

Topic Starter
Member
626 posts

I'm using FP XP. I think I'm with you so far. You think what I need to do is put the picture in table and set the table width and height to 100%?

I think I'll give that a try. Thanks a lot for the information. I can't believe I didn't think of that before. :tazz:

I'll try that out this weekend and let you know how it goes. I put the new page together on my local machine, but it doesn't look as good as I had hoped it would. I need to tweak it a bit before it goes online.

Thanks,

#4
carelwen

Posted 03 June 2005 - 05:53 AM

Member

Member
33 posts

you can set the table width to 100%,the table height is free and you can't set the table height.i have seen your website,you have a beautiful daught,cheers

i have seen your webpages code,you never use the table.

i can't find the table code in your website.

<BODY OnLoad="getwindowsize()" OnResize="getwindowsize()" bgcolor="#FFFFCC" text="#003399" link="#0000FF" vlink="#CC0000" alink="#FF9900"><font face="Comic Sans MS, Arial, Helvetica">
<div id="pic1" style="position:absolute; visibility:visible; left:0px; top:0px; z-index:1">
<map name="FPMap0">
<area href="Survey%20Form.asp" shape="polygon" coords="133, 127, 5, 126, 8, 85, 107, 17, 143, 46, 118, 94">
</map>
<img border="0" src="alien.gif" usemap="#FPMap0" width="150" height="150">
</div>
<script language="javascript">
var pic1=eval('document.'+_all+'pic1'+_style);
</script>
<h1 align="center"><font color="#3300CC">Welcome To Baby B Online</font></h1>
<p align="center">Baby B Online is the place where family and friends can check
in on our little girl, Jasmine Marie.</p>
<div align="center">
<center>
</font><table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" id="AutoNumber1">
<tr>
<td width="40%" align="center"><font face="Comic Sans MS, Arial, Helvetica">
<p align="center">Last Update <font color="#FF0000">
05/24/2005</font>: 
Six month photos are online!!  The answer to the puzzle is revealed.</p>
<p align="center">Click the crawling baby to enter this site.  Can't see the
baby?  Click <a href="Survey%20Form.asp">Here</a>.</p>
<p align="center"> </p>
<p align="center">You are visitor<b> <a href="http://www.amazingcounters.com" target="_top"><img border="0" src="http://www.amazingco...39016&c=117361" alt="Web Counter"></a></b></p>
</font></td>
<td width="60%" align="center"><font face="Comic Sans MS, Arial, Helvetica"><p align="center">
<img border="0" src="images/457122-R1-00-3.jpg" width="450" height="306"></font></td>
</tr>
</table><font face="Comic Sans MS, Arial, Helvetica">
</center>
</div>
<p align="left">
<br><small><a href="http://www.allonline...ildrens-place/" target="top"><font color="#FFFFCC">Childrens Place</font></a></small>
</p>

</font></body>

#5
ssone

Posted 03 June 2005 - 06:48 AM

Member

Member
301 posts

another way to do it: make the table 800x600 (since thats the lowest res ppl would have) and centered(align="center"), then make the bg color black (or whatever you color want) so if someone comes with a higher res., they will see the baby 800x600 centered, and a nice "frame" around it.

:tazz:

#6
Major Payne

Posted 05 June 2005 - 06:05 AM

Retired Staff

Retired Staff
5,307 posts

Or you can use JavaScript that will detect user's screen size and load the correct page. Problem with this is multiple pages for most of the common resolutions and the fact user's may have JavaScripting turned off.

Hope the use of percentages works for you, but you do need to try using tables. Need more help, let me know. I'm retired and do a lot of recoding/design for others. Mostly free of charge as I want the experience. Right now I've got a lot already to do, but glad to help a fellow Webbie. :tazz:

Ron

#7
ssone

Posted 05 June 2005 - 06:10 AM

Member

Member
301 posts

sorry, read the last post wrong, discard this reply..

Edited by ssone, 05 June 2005 - 06:13 AM.

#8
magusbuckley

Posted 05 June 2005 - 10:29 AM

Member

Topic Starter
Member
626 posts

ssone - 800 x 600 is still too big. Even if the site visitor has this screen resolution, they will still get scroll bars. You have to remember that the task bar and web browser take up some of the screen. I'm hoping to pull this off so the user has no scroll bars. I know, I'm being anal about it. It's just that, for the Intro Page, I have my mind set that I don't want scroll bars.

Major Payne: I'd love to take you up on your offer. If you get some free time, I'd love some help with this one page. I'm still working on that new layout I had planned on using (see original post). When I first created it, it didn't look as good as I thought it would. I haven't had time to work on it since then. I'm off Monday's and Tuesday's so will probably work on it tomorrow and/or the next day.

Now, about these tables you all keep talking about. I have a table in the page that is online now. I've always used a table for that page. If you all are referring to me not having a table there, you may want to look at the coding again. It's in there, I promise.

Major Payne: What is it that you need from me to be able to assist with the new code? If you have any creative bones in your body (I don't), I'd love to hear your thoughts about the new layout I am working on.

For my first stab at the new layout, I made a table with 2 rows and 3 columns. I merged the cells on the top row and put the graphic there. In the bottom three cells I put LAST UPDATE, ENTER (what people will click to enter the site as opposed to those floating animated giff's I've been using), and VISITOR NUMBER respectfully. The problem was that the picture was too small when I made the table small enough to get rid of the scroll bars. There is much empty space on the left and right hand sides of the photo. I'm thinking I will have to crop the photo for this page, making it thin and horizontal. Actually, that is a bit different and might look pretty good. I like that idea. A nice panaramic photo of sorts.

OK, let me quit rambling. As you can see, I have a lot to figure out just yet with this page. I'm completely open to any suggestions so feel free to point me in another direction.

Thanks for all your help thus far. :tazz:

#9
LazyStudent

Posted 05 June 2005 - 06:14 PM

Member

Member
21 posts

Right a simple piece of javacript should solve your problem. As long as your users have javascript enabled it should work a charm (I believe by default most browsers have javascript enabled).

Design 2 versions of the page. One should be designed for people with a resolution of 1024 x 768 and the other for people with 800 x 600. Use the 1024 as the default page and insert this javacript in between your head tags changing the html links appropriately:

<script language="JavaScript">

</SCRIPT>

Hope that helps, good luck!

#10
ssone

Posted 05 June 2005 - 07:11 PM

Member

Member
301 posts

or, make an auto javascript pop-up (can put a link for those pop-up blockers) that is 100% screen width and height with no scrollbars, but then ur whole site would have to be in that window.

You have to remember that the task bar and web browser take up some of the screen.

I know that, didn't think u were that particular about this intro page :help:

good luck to you and your mayjor Payne

Edited by ssone, 05 June 2005 - 07:12 PM.

#11
Major Payne

Posted 05 June 2005 - 08:58 PM

Retired Staff

Retired Staff
5,307 posts

Right a simple piece of javacript should solve your problem. As long as your users have javascript enabled it should work a charm (I believe by default most browsers have javascript enabled).

This is just what I was referring to use. Thanks LazyStudent. I have one in my script folder, but copy/pasted yours into a document to try it. The intro pix that Magus wants to use has the same height-width ratio as 1024X768 and 800X600.

This is the URL where I have the test page set-up using your script and the two hi_res and lo_res pages :

My Webpage

If you watch address bar, it will take you to the hi res page if using 1024x768. Can someone check to see how it works on the 800x600 res?

I think all this can be boiled down to using one page and using percentages though, but waiting feedback from Magus on how to procede. It also may need a better hi res intro image other than a jpeg as the image I see is rather stretched to the limits. :tazz:

Ron

#12
magusbuckley

Posted 05 June 2005 - 11:25 PM

Member

Topic Starter
Member
626 posts

Hello:

I really appreciate you all pitching in like you have.

Major Payne...I got your personal message earlier. In the middle of typing my reply my Internet Connection went down. Now, however, I am able to answer your questions.

I am using MyHosting.com for this sites host. I can't find anything on their site about using a cgi-bin. I have activated a Unix account through them that will allow the use of PHP and Perl. The most recent e-mail from those guys states that the new account will become active within a 24 hour period.

You asked me if the background was going to be the permanent background. If you are referring to the background color...yes, this color will remain for a while. I am very interested in changing the site's theme colors but will deal with that later. If you are referring to that .JPG photo...no, that is definitely not the actual photo I want online. :help:

I quickly threw that together so I would have something to demonstrate for you all in my original post. :help:

Since this site was born, it has always had a floating animated gif of some sort dance around the screen with a hotspot for entry to the home page. As you can see from that crude drawing you have posted, I am ready to get rid of the gifs and use an “Enter” button. That means, of course, that we can loose the java code that makes the gif bounce around a visitor’s screen.

There is some text on my actual home page just below the table. You can’t see it because I’ve made the text the same color as the pages background color. Why? I did this because it is an advertisement. This all relates to my hit counter. I’ve been using a third party for tabulating my hit count. To receive this “Free” service, however, you have to have an advertisement of some sort on the page with the counter. They claim that a bot, on their end, scans all users’ pages daily for the code. If you don’t have the code for the advertisement, your account with them is disabled and your hit counter is removed. Since a machine is searching for the code, I just made that text the same color as the background to hide the advertisement. Bad Boy. Bad. I know. :help:

Major Payne…I just checked out the site you posted with at 800 x 600. I don’t think that gif has been resized. The low_res site did load, but the image seemed to be the same size. I had scroll bars for sure. However, the high resolution page looks great. In fact, it’s fantastic. It’s nice and full screen with no scroll bars. When I resize my browser window, the image resizes with it. Still no scroll bars! It’s fantastic. :tazz:

Well, the size I mean. The graphic will soon be changed.

Now onto that subject. I am using Jasc Paint Shop Pro 8.1 for creating the graphic. I have to create layers so that, from time to time, I can replace the photo that is seen in the circle (center of screen). I’m ready to set up the new graphic file now. Tell me this; will the bottom section still need to be in a table? I’m referring to the “Last Update”, “Enter”, and “Visitor Number” sections. If I put this in a table with the graphic on top and those three information sections on the bottom, can we still have it resize the way that crude drawing is doing on the high resolution site?

OK, I am working on the image file. If I don’t finish it up tonight, I’ll definitely have it ready tomorrow. If any of you have another idea for an intro layout, point me in that direction. I’m not very artistic so I have to do the “trial and error” thing when I design something like this. Ha.

I appreciate everyone's help thus far.

Carpal Tunnel Setting In Now. ha.

Edited by magusbuckley, 07 June 2005 - 10:05 AM.

#13
magusbuckley

Posted 06 June 2005 - 12:05 AM

Member

Topic Starter
Member
626 posts

What size should I make this image?

#14
magusbuckley

Posted 09 June 2005 - 06:24 AM

Member

Topic Starter
Member
626 posts

Ok Gang:

I'm throwing around these ideas for an intro page layout. These are very crude rough drafts of what I have in my head. What do you think about these layouts? Should I leave the original page alone and just try to get that page to resize itself? Or, what do you think of the first rough draft I made (see first post). I'm wondering which layout looks best or if any of you have better ideas for a design. Let me know so I can set it up....others are patiently waiting so they can set up the code for resizing.

In the first layout, I will just change out the background picture from time to time. In the second layout, I will be cutting Jasmine out of an image and pasting her into the page. I think this will allow me to get a good close up of Jasmine with no interfering background (bathtub in this example). What do you think?

Thanks :tazz:

Edited by magusbuckley, 09 June 2005 - 06:26 AM.