This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Dreamweaver > August 2004 > bottom loading page
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
bottom loading page
|
|
| levrage 2004-08-10, 12:14 pm |
| I know this is probably easy, but i can't figure it out. I have a large page
that I want to open bottom loading, but for it to cut off whatever is on top
(depending on your resolution) so that the bottom of the large image will be
seen right when the page loads. Right now, the page sticks to the bottom, but
you have to scroll to see the bottom. Can somebody help?
http://www.uvsns.com/layout2.htm
thanks,
levrage
| |
| Joe {RoastHorse} 2004-08-10, 12:14 pm |
| i would experiment with positioning your content and background images
bottom-left using CSS. this may have unpredictable results in some
browsers though.
if you are planning to use this layout thoughout the site i reckon
you're in for some headaches. english is read top-left to bottom-right
(obviously), here you're forcing the browser to do something unnatural.
joe
levrage wrote:
> I know this is probably easy, but i can't figure it out. I have a large page
> that I want to open bottom loading, but for it to cut off whatever is on top
> (depending on your resolution) so that the bottom of the large image will be
> seen right when the page loads. Right now, the page sticks to the bottom, but
> you have to scroll to see the bottom. Can somebody help?
> http://www.uvsns.com/layout2.htm
> thanks,
>
> levrage
>
| |
| ~Flash~ 2004-08-10, 11:16 pm |
| I'm not sure if I understand what you want... I can make two frames... bottom
loading bar with the top being a image of something while you wait... when the
bottom is finished loading I can have it switch to the other site and have it
remove the top frame... those leaving you with your site... is this what you
want? To cut off whatevers on bottom you can use this style:
<style type="text/css">
<!--
body{background-image:url(wf8.gif);background-repeat:no-repeat;}
-->
</style>
To cut off the top of an image it's a little more difficult... you can align a
layer to the bottom of the screen so that it'll get the top of it cliped off
and remove scrollbars with this code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {overflow:hidden;}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if
((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="Layer1" style="position:absolute; width:200px; height:115px;
z-index:1; left: 0px; bottom: 0px;"><img src="largeimagehere.gif" width="500"
height="500"></div>
</body>
</html>
Frame Breaker script (goes in head of a page):
<SCRIPT LANGUAGE="JavaScript">
<!--
setTimeout ("changePage()", 3000);
function changePage() {
if (self.parent.frames.length != 0)
self.parent.location="http://www.urlhere.com/home";
}
// -->
</SCRIPT>
The loading script can look somthing like this:
<html>
<head>
<title>Preload Image Page</title>
<script language="JavaScript1.1">
// Address to redirect to once finished loading (that address will contain the
framebreaker so it will be all one page.
var locationAfterPreload = "home.htm"
var lengthOfPreloadBar = 150
var heightOfPreloadBar = 15
// add all the images you will be loading here.
var yourImages = new Array("image1.gif","image2.gif","image3.gif")
if (document.images) {
var dots = new Array()
dots[0] = new Image(1,1)
// name of the first 1 by 1 pixel used for the loading bar.
dots[0].src = "pix1.gif"
dots[1] = new Image(1,1)
// name of the second 1 by 1 pixel used for the loading bar (this image should
be a different color from the first so you can see the progress on the loading
bar.
dots[1].src = "pix2.gif"
var preImages = new Array(),coverage =
Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
var loaded = new Array(),i,covered,timerID
var leftOverWidth = lengthOfPreloadBar%coverage
}
function loadImages() {
for (i = 0; i < yourImages.length; i++) {
preImages = new Image()
preImages.src = yourImages
}
for (i = 0; i < preImages.length; i++) {
loaded = false
}
checkLoad()
}
function checkLoad() {
if (currCount == preImages.length) {
location.replace(locationAfterPreload)
return
}
for (i = 0; i <= preImages.length; i++) {
if (loaded == false && preImages.complete) {
loaded = true
eval("document.img" + currCount + ".src=dots[1].src")
currCount++
}
}
timerID = setTimeout("checkLoad()",10)
}
// end hiding -->
</script>
</head>
<body>
<center>
<font size="4">Loading...</font>
<p>
<script language="JavaScript1.1">
if (document.images) {
var preloadBar = ''
for (i = 0; i < yourImages.length-1; i++) {
preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '"
height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">'
}
preloadBar += '<img src="' + dots[0].src + '" width="' +
(leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' +
(yourImages.length-1) + '" align="absmiddle">'
document.write(preloadBar)
loadImages()
}
document.write('<p><small><a
href="java script:window.location=locationAfterPreload">Skip Preloading</p>')
</script>
</center>
</body>
</html>
If you need help using any of the scripts above or would like to know how to
do somthing else let me know...
Flash
| |
| Joe {RoastHorse} 2004-08-10, 11:16 pm |
| i think levrage just wants a bottom-left aligned page?
eg. use a background image:
body {
background-image: url(background.gif);
background-position: bottom left;
background-repeat: no-repeat;
}
and attach the content to the bottom left:
#divContent {
position: absolute;
left: 0;
bottom: 0;
}
joe
~Flash~ wrote:
> I'm not sure if I understand what you want... I can make two frames... bottom
> loading bar with the top being a image of something while you wait... when the
> bottom is finished loading I can have it switch to the other site and have it
> remove the top frame... those leaving you with your site... is this what you
> want? To cut off whatevers on bottom you can use this style:
>
> <style type="text/css">
> <!--
> body{background-image:url(wf8.gif);background-repeat:no-repeat;}
> -->
> </style>
>
> To cut off the top of an image it's a little more difficult... you can align a
> layer to the bottom of the screen so that it'll get the top of it cliped off
> and remove scrollbars with this code:
>
> <html>
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
> <title>Untitled Document</title>
> <style type="text/css">
> <!--
> body {overflow:hidden;}
> -->
> </style>
> <script language="JavaScript" type="text/JavaScript">
> <!--
> function MM_reloadPage(init) { //reloads the window if Nav4 resized
> if (init==true) with (navigator) {if
> ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
> document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
> onresize=MM_reloadPage; }}
> else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
> location.reload();
> }
> MM_reloadPage(true);
> //-->
> </script>
> </head>
> <body>
> <div id="Layer1" style="position:absolute; width:200px; height:115px;
> z-index:1; left: 0px; bottom: 0px;"><img src="largeimagehere.gif" width="500"
> height="500"></div>
> </body>
> </html>
>
> Frame Breaker script (goes in head of a page):
> <SCRIPT LANGUAGE="JavaScript">
> <!--
> setTimeout ("changePage()", 3000);
> function changePage() {
> if (self.parent.frames.length != 0)
> self.parent.location="http://www.urlhere.com/home";
> }
> // -->
> </SCRIPT>
>
> The loading script can look somthing like this:
>
> <html>
> <head>
> <title>Preload Image Page</title>
> <script language="JavaScript1.1">
> // Address to redirect to once finished loading (that address will contain the
> framebreaker so it will be all one page.
> var locationAfterPreload = "home.htm"
> var lengthOfPreloadBar = 150
> var heightOfPreloadBar = 15
> // add all the images you will be loading here.
> var yourImages = new Array("image1.gif","image2.gif","image3.gif")
> if (document.images) {
> var dots = new Array()
> dots[0] = new Image(1,1)
> // name of the first 1 by 1 pixel used for the loading bar.
> dots[0].src = "pix1.gif"
> dots[1] = new Image(1,1)
> // name of the second 1 by 1 pixel used for the loading bar (this image should
> be a different color from the first so you can see the progress on the loading
> bar.
> dots[1].src = "pix2.gif"
> var preImages = new Array(),coverage =
> Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
> var loaded = new Array(),i,covered,timerID
> var leftOverWidth = lengthOfPreloadBar%coverage
> }
> function loadImages() {
> for (i = 0; i < yourImages.length; i++) {
> preImages = new Image()
> preImages.src = yourImages
> }
> for (i = 0; i < preImages.length; i++) {
> loaded = false
> }
> checkLoad()
> }
> function checkLoad() {
> if (currCount == preImages.length) {
> location.replace(locationAfterPreload)
> return
> }
> for (i = 0; i <= preImages.length; i++) {
> if (loaded == false && preImages.complete) {
> loaded = true
> eval("document.img" + currCount + ".src=dots[1].src")
> currCount++
> }
> }
> timerID = setTimeout("checkLoad()",10)
> }
> // end hiding -->
> </script>
> </head>
> <body>
> <center>
> <font size="4">Loading...</font>
> <p>
> <script language="JavaScript1.1">
> if (document.images) {
> var preloadBar = ''
> for (i = 0; i < yourImages.length-1; i++) {
> preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '"
> height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">'
> }
> preloadBar += '<img src="' + dots[0].src + '" width="' +
> (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' +
> (yourImages.length-1) + '" align="absmiddle">'
> document.write(preloadBar)
> loadImages()
> }
> document.write('<p><small><a
> href="java script:window.location=locationAfterPreload">Skip Preloading</p>')
> </script>
> </center>
> </body>
> </html>
>
> If you need help using any of the scripts above or would like to know how to
> do somthing else let me know...
>
> Flash
>
| |
| ~Flash~ 2004-08-10, 11:16 pm |
| He also asked about a preloader... and if his website is an image putting it as a background image won't allow hotspots... think about it...
Flash
| |
| Murray *TMM* 2004-08-10, 11:16 pm |
| Where did he ask about a preloader?
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================
"~Flash~" <webforumsuser@macromedia.com> wrote in message
news:cfarsn$p73$1@forums.macromedia.com...
> He also asked about a preloader... and if his website is an image putting
it as a background image won't allow hotspots... think about it...
>
> Flash
| |
| Joe {RoastHorse} 2004-08-10, 11:16 pm |
| i didn't quite understand the preloader bit, i'm not sure why one would
be needed.
i wouldn't use an image map - just put the content over the background
image (already thought about it ;oP).
joe
~Flash~ wrote:
> He also asked about a preloader... and if his website is an image putting it as a background image won't allow hotspots... think about it...
>
> Flash
| |
| levrage 2004-08-10, 11:16 pm |
| yeah, those purple rays over the menu are roll-overs.
| |
| Murray *TMM* 2004-08-10, 11:16 pm |
| I see no mention of preloader and no bold text.
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================
"~Flash~" <webforumsuser@macromedia.com> wrote in message
news:cfaukk$sc8$1@forums.macromedia.com...
> levrage wrote:
page[color=darkred]
> that I want to open bottom loading, but for >it to cut off whatever is on
top
> (depending on your resolution) so that the bottom of the large image will
be
> seen right >when the page loads. Right now, the page sticks to the bottom,
but
> you have to scroll to see the bottom. Can >somebody help?
> http://www.uvsns.com/layout2.htm
>
> Murray ^^^
> (it's bolded)
>
> Flash
>
| |
| ~Flash~ 2004-08-10, 11:16 pm |
| levrage wrote:
>I know this is probably easy, but i can't figure it out. I have a large page
that I want to open bottom loading, but for >it to cut off whatever is on top
(depending on your resolution) so that the bottom of the large image will be
seen right >when the page loads. Right now, the page sticks to the bottom, but
you have to scroll to see the bottom. Can >somebody help?
http://www.uvsns.com/layout2.htm
>thanks,
>
>levrage
Murray ^^^
(it's bolded)
Flash
| |
| ~Flash~ 2004-08-13, 12:16 pm |
| I'm not sure if I understand what you want... I can make two frames... bottom
loading bar with the top being a image of something while you wait... when the
bottom is finished loading I can have it switch to the other site and have it
remove the top frame... those leaving you with your site... is this what you
want? To cut off whatevers on bottom you can use this style:
<style type="text/css">
<!--
body{background-image:url(wf8.gif);background-repeat:no-repeat;}
-->
</style>
To cut off the top of an image it's a little more difficult... you can align a
layer to the bottom of the screen so that it'll get the top of it cliped off
and remove scrollbars with this code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {overflow:hidden;}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if
((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="Layer1" style="position:absolute; width:200px; height:115px;
z-index:1; left: 0px; bottom: 0px;"><img src="largeimagehere.gif" width="500"
height="500"></div>
</body>
</html>
Frame Breaker script (goes in head of a page):
<SCRIPT LANGUAGE="JavaScript">
<!--
setTimeout ("changePage()", 3000);
function changePage() {
if (self.parent.frames.length != 0)
self.parent.location="http://www.urlhere.com/home";
}
// -->
</SCRIPT>
The loading script can look somthing like this:
<html>
<head>
<title>Preload Image Page</title>
<script language="JavaScript1.1">
// Address to redirect to once finished loading (that address will contain the
framebreaker so it will be all one page.
var locationAfterPreload = "home.htm"
var lengthOfPreloadBar = 150
var heightOfPreloadBar = 15
// add all the images you will be loading here.
var yourImages = new Array("image1.gif","image2.gif","image3.gif")
if (document.images) {
var dots = new Array()
dots[0] = new Image(1,1)
// name of the first 1 by 1 pixel used for the loading bar.
dots[0].src = "pix1.gif"
dots[1] = new Image(1,1)
// name of the second 1 by 1 pixel used for the loading bar (this image should
be a different color from the first so you can see the progress on the loading
bar.
dots[1].src = "pix2.gif"
var preImages = new Array(),coverage =
Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
var loaded = new Array(),i,covered,timerID
var leftOverWidth = lengthOfPreloadBar%coverage
}
function loadImages() {
for (i = 0; i < yourImages.length; i++) {
preImages = new Image()
preImages.src = yourImages
}
for (i = 0; i < preImages.length; i++) {
loaded = false
}
checkLoad()
}
function checkLoad() {
if (currCount == preImages.length) {
location.replace(locationAfterPreload)
return
}
for (i = 0; i <= preImages.length; i++) {
if (loaded == false && preImages.complete) {
loaded = true
eval("document.img" + currCount + ".src=dots[1].src")
currCount++
}
}
timerID = setTimeout("checkLoad()",10)
}
// end hiding -->
</script>
</head>
<body>
<center>
<font size="4">Loading...</font>
<p>
<script language="JavaScript1.1">
if (document.images) {
var preloadBar = ''
for (i = 0; i < yourImages.length-1; i++) {
preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '"
height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">'
}
preloadBar += '<img src="' + dots[0].src + '" width="' +
(leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' +
(yourImages.length-1) + '" align="absmiddle">'
document.write(preloadBar)
loadImages()
}
document.write('<p><small><a
href="java script:window.location=locationAfterPreload">Skip Preloading</p>')
</script>
</center>
</body>
</html>
If you need help using any of the scripts above or would like to know how to
do somthing else let me know...
Flash
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|