Background Shadow

Freeway
41

Tim, thanks for watching my video and for your extensive and kind help. (Sorry about the big vid file, Walter. I’m hoping Santa will bring you a 100mbps fiber line this year!)

Tim, at the close of your post, were you recommending I do the following?

  1. Ditch Paul Dunning’s “Make me a page footer” action and build my footer at the bottom of the page,

  2. Dump all of the contents of my page into a single table cell,

  3. Create a leftmost and rightmost table column and use a background shadow PNG as a vertically tiling background image in those cells,

  4. Create a new row at the bottom of the table and pace a horizontally tiling background shadow PNG as the background image in that cell.

I’m not sure the complexity of my site will allow for that. But I will experiment when I get back into the office on Christmas Day. (Yes, we’re all Ebenezer Scrooge’s over here in Japan.)

James W.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

42

Well, Tim, I’m here at the office on Christmas day testing out what I think is your advice (contained in the the closing paragraph of your previous post)…

All said, I cannot make the contents of my entire page a Child of a Table cell like I can an HTML box. So the only thing I could do was copy the content of my page, insert my text cursor in a large table cell (as big as the page itself) and Paste. But the layout of my page doesn’t take kindly to that at all. It throws the page header (a separate graphic and my CSS Menubar to the bottom of the page. It also has some other undesirable effects as well.

So my guess is that what I did today is not, in fact, what you were suggesting. So I look forward to your clarifications on what exactly you were suggesting.

For now, I am fiddling around with your “JavaScript example.”

Thank you, and Merry Christmas.

James W.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

43

Well, I got Page Shadow to work, and with fall-back to PIE for IE too. But the problem now is that I want to add 50px of space after the bottom of my footer. But the way I’ve got my page designed to make the Page Shadow work, I cannot just add an HTML box in Freeway to get that extra space below my footer. Since it’s too complex for me to quickly write in words for you, I’ve made a screencast showing the problem:

(Walter, sorry about your slow net connection, but the video is 156MB!)

Any advice you can offer would be greatly appreciated.

Thank you,

James Wages

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

44

Without looking at your video, one way you could add null space to the bottom of your page would be to add padding-bottom to the PageDiv element using one of the many CSS markups you already have in your page. Inside a style block, it would look like this:

#PageDiv { padding-bottom: 60px; }

Now this will cause a very strange thing to happen if that’s all you do. Even on a really tall screen with room for everything to show, you will see a vertical scrollbar, because the PageDiv is already set to height: 100%, and then you add 60px to 100% with that padding, so you always see a scrollbar, even when there’s no actual reason for one. You can fix this with the box-sizing attribute, which (ironically) makes standards-based browsers behave like IE < 9. Here’s the complete rule:

#PageDiv {
	padding-bottom: 60px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

Walter

On Jan 15, 2013, at 4:25 AM, JDW wrote:

Well, I got Page Shadow to work, and with fall-back to PIE for IE too. But the problem now is that I want to add 50px of space after the bottom of my footer. But the way I’ve got my page designed to make the Page Shadow work, I cannot just add an HTML box in Freeway to get that extra space below my footer. Since it’s too complex for me to quickly write in words for you, I’ve made a screencast showing the problem:

Error 404: Not Found

(Walter, sorry about your slow net connection, but the video is 156MB!)

Any advice you can offer would be greatly appreciated.

Thank you,

James Wages

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

45

Thank you for the suggestion, Walter; but unfortunately it doesn’t work at all when I add it to an existing style. (No space at all is added between the bottom of my footer and the bottom of the browser window.)

Here is the source code of my test page, with your suggested style added:

http://kiramek.com/21test95/PageDivHack_Source.txt

Further thoughts would be appreciated.

Thanks,

James W.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

46

Walter, I just found that your style code works to elongate my “outerShadow” div which, as I describe in my video, is the exact width and height of the page in Freeway. But of course, elongating outerShadow by 60px is not what I seek to do at all.

For whatever reason, your style code is simply not working on PageDiv.

–James W.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

47

Still yanking hair on this…

I just found that if I change “60px” to “2800px” then it gives me roughly 60px of gap between the bottom of my footer and the bottom of the browser window, as I want. However, that’s no different than what I was manually doing before with my DIV entitled “stink.” I named that DIV such because it stinks that the same line of code won’t work on every single page in my site, due to each page in my site being different lengths.

If you watch my video, you will see exactly what I mean:

All said, I want a way to add 60px or so of space below my footer for every page in my site, such that it is always 60px no matter how long or short my pages are, and regardless of the height the user makes the browser window. AND, I don’t want to be forced to manually do calculations for each page in my site in order to determine what the pixel height of my style code should be. I can do the “manual calculations” DIV hack right now, but I am posting here to find another solution. I HATE manual hacks that need to be customized for each page in my site, because I often change the length of pages in my site. A computer should, in theory, make my life easier in that regard.

Look forward to hearing your thoughts.

Thanks,

James W.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

48

Me too! I think what is going on here is that the elements inside of your PageDiv are not pushing it down the page. If your PageDiv is set to 100% then it’s going to 100% of the browser window, but not respecting the content inside of itself. I just tried this in a hand-coded page, and the issue seems to be with the height: 100%. If you try adding this to your #PageDiv rule, see what happens:

height: auto !important;

However, when I do that, but make all of the children of the PageDiv position: absolute (like Freeway does for elements that you draw as layers), then the height of the PageDiv collapses to 0 + 60px, because there’s nothing inside it to push the bottom down.

If you want this automatic height that really truly respects the content you place within the page, you are going to have to have an inline layout. No exceptions that I can think of to this.

Walter

On Jan 15, 2013, at 7:58 PM, JDW wrote:

I HATE manual hacks that need to be customized for each page in my site, because I often change the length of pages in my site. A computer should, in theory, make my life easier in that regard.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

49

Thank you for the advice, Walter.

I edited the style code as follows, but it didn’t work at all:

#PageDiv { padding-bottom: 60px; height: auto !important; }

Since you mentioned “inline layout,” I gave the Relative Page Layout action a try, but it doesn’t magically solve the problem either. In fact, creates a new problem by casting my otherwise “centered” page to the far right of the browser!

–James W.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

50

Not being one to allow Freeway to defeat me (nor the dreaded use of a fully “inline” page layout that doesn’t use the RPL action), I’ve gone back to my old standby Action to resolve the problem.

Paul Dunning’s “Make Item Into Page Footer” action (ver. 1.2b5) adds exactly the space I need, and it performs all the necessary page-length calculations for me. For it to work, I sketch a layered HTML box (60px in height) in the Pasteboard and apply the Action to it. I then sketch a non-layered HTML box (of any size) and make sure that’s locked to the very bottom of the page in Freeway. Upon Preview, I then get the 60x of gap I want below my footer.

More specifically, the Action generates the following code into the beginning of PageDiv:

	<table border=0 cellspacing=0 cellpadding=0 width=249>
		<colgroup>
			<col width=248>
			<col width=1>
		</colgroup>
		<tr valign=top>
			<td height=3677></td>
			<td height=3677></td>
		</tr>
		<tr valign=top>
			<td height=22></td>
			<td height=22></td>
		</tr>
		<tr class="f-sp">
			<td><img src="../_clear.gif" border=0 width=248 height=1 alt="" style="float:left" title=""></td>
			<td height=1><img src="../_clear.gif" border=0 width=1 height=1 alt="" style="float:left" title=""></td>
		</tr>
	</table><!--FOOTER STARTS HERE -->
<table border="0" cellspacing="0" cellpadding="0" width="950">
	<tr valign="top">
		<td height="1"><p class="f-lp"><img src="../_clear.gif" border="0" width="1" height="1" alt="" style="vertical-align:baseline"></p></td>
	</tr>
	<tr valign="top">
		<td height="60"><div id="MakeMeIntoFooter60px" style="position:absolute;   width:950px; height:60px; z-index:6; font-size:1px">
	</div></td>
	</tr>
</table>

Of course, the solution Paul’s Action offers is not as light and elegant as a single line of code added to HTML Markup. But the Action seems like the only reasonable solution to my problem.

Best,

James W.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

51

I now have my new site uploaded, and for the most part Background Shadow is working well across most browsers, including IE, thanks to PIE fallback:

I would like to thank Tim for the following example that provided me with the script I needed to fix my shadow at the bottom of the page:
http://www.freewayactions.com/test/variable-box-shadows/box-shadow-with-javascript.html

Specifically, I use the following code on each page in my site (Before /body in HTML Markup) to keep the shadow at the bottom from overshooting more than it should:

<script>
var outer=document.getElementById("outerShadow");
var inner=document.getElementById("PageDiv");
if (PageDiv && outerShadow){
	outerShadow.style.height = (parseInt(outerShadow.offsetHeight) -28) + "px";
}
</script>

But there is one page that has a problem, which prompted me to post today. This one page in my site is linked to Atomz Search:

http://search.atomz.com/search/?sp_q=test&sp_f=Shift_JIS&sp_w_control=1&sp_a=sp1001f22b

I used Freeway to generate the code for that web page, and then I copied and pasted the page’s HTML into my Atomz Search template. Within Freeway, I needed to paste an HTML Markup item inside an HTML box (DIV) to get the required Atomz code in the appropriate place on my page. But since Freeway doesn’t allow me to control Markup Items like HTML boxes (e.g., I can float an HTML box but not a Markup Item), I could not figure out a way to design the page fully “inline” such that the text from Atomz doesn’t overshoot the bottom of the page when the search results are long. So to keep the Atomz search results from overshooting, I was forced to use the Relative Page Layout Action on the page. But the problem that causes is that the HTML Markup code I added Before /body to control Page Shadow overshoot no longer works. (In other words, my Page Shadow perpetually overshoots the bottom of the page by about 28px.)

If you make the browser window sufficiently tall you will see that the page shadow on the following page overshoots the bottom of the page too much:

http://search.atomz.com/search/?sp_q=test&sp_f=Shift_JIS&sp_w_control=1&sp_a=sp1001f22b

Can anyone suggest a modified script that would allow me to control the Page Shadow overshoot while using the RPL action?

Here’s the Freeway 5.6.5 document containing my problem page:
http://www.kiramek.com/21test95/ShadowOvershoot.zip

Thanks,

James Wages

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options