Viewing Image Reflection changes Page Height

Image Reflection changes Page Height



User: David P. 11 years ago
Hello,

I think there's a bug with the picture "reflection" option.

I've tried to create a little page with height at 580 px that have to be showed into a frame. If I insert an image about 470 px in that page, the page is displayed correctly into the frame.

But if I add a little "reflection" (only 10%) to this image, the part of reflection visible is very little and should fit into the page without need more space (and frame), but because reflection the height of the page is modified without any advise (I've noticed that EverWeb adds blank space at the bottom of the image, exactly the same if the reflection was 100%, but what I want and it's visible is just 10%). This is a problem, because when the page is charged into the frame with a picture that should fit exactly, appears a scroll bar with a lot of blank space at the bottom of the image that I don't want, I suppose that the part of reflection (90%) that I don't want and it's not visible is what causes this bug.

Please, can you try to change this? The reflection on iWeb works different and nice for my purposes, but I'm trying to migrate the web to EverWeb.
User: Jumbo T. 11 years ago
Since you do not provide any information, such as an URL, I have to guess what the problem is.

Let's compare iWeb vs. Everweb.

A reflection in iWeb is made with JavaScript using the canvas function. It's not a physical image file.

Whatever the % used, the canvas height is always 72.5 pixels.

Everweb creates an physical image. And whatever the % used, it's height is 72px.

If you want to display the page in an iframe you have to take the 72px into account.

If that means a lot of white space below the reflection, well, too bad.
User: David P. 11 years ago
Message deleted / duplicated.

Last edit 11 years ago
User: David P. 11 years ago
[quote name=David P. time=01/02/2015 13:07:00][quote name=Jumbo T. time=01/02/2015 12:29:05]
Let's compare iWeb vs. Everweb.

A reflection in iWeb is made with JavaScript using the canvas function. It's not a physical image file.

Whatever the % used, the canvas height is always 72.5 pixels.


I don't know... but If I specify the height of a page less than 72.5 pixels, iWeb doesn't create blank space. Perhaps the height of the page cuts this blank space, that is what I expected EverWeb should do.

[quote name=Jumbo T. time=01/02/2015 12:29:05]
Everweb creates an physical image. And whatever the % used, it's height is 72px.

If you want to display the page in an iframe you have to take the 72px into account.

If that means a lot of white space below the reflection, well, too bad.


Yes, this is exactly what I want to do... It is absurd to have 100% of white space below the picture if I only ask a reflection of 10%. This is what I expect to see, not my 10% and 90% of blank space at the bottom.

Anyway, if EverWeb can't change this to work just like iWeb, I think I need to create the reflection to the image with another software and then import the full image (original + reflection) to the page in EverWeb that I want to show into a frame.

I was also used to adjust the brightness, contrast and color options of the images within iWeb, which was very comfortable, but I see that in EverWeb is not possible and requires that we already import the final format of the image.
User: Paul-RAGESW 11 years ago
What's your website URL?

-------------------------------
Paul
EverWeb Developer
User: David P. 11 years ago
Quote: Paul-RAGESW - 02/02/2015 7:29:00
What's your website URL?


Well, my website is http://www.DavidPratsJuan.com but the new design that I'm working on it's not published.

But... I've uploaded a little preview for you (links and other things in this new version are not working correctly).

You can compare the iWeb version of this new design with EverWeb version. Please, notice the blank space and scroll bar that appears in the EverWeb version at the bottom of the header image.

With the frame that I've created, you can alternate the image of the header with a video demo of my work without leaving the entire page, just click the buttons "VER DEMO" to see the video (at the bottom of the image) or "Close" (on the top of the video when it's displayed) to close the video and view again the picture.


iWeb Version:

http://www.davidpratsjuan.com/TESTS/iWeb/New/Home.html


EverWeb Version:

http://www.davidpratsjuan.com/TESTS/EverWeb/new/home.html


Thanks Paul!

Last edit 11 years ago
User: Jumbo T. 11 years ago
Make the iframe wider and taller if it does not fit. And use only this :

<iframe name="Marco" src="Cabecera.html" frameborder="0" width="1020" height="630" scrolling="no" allowTransparency="true"></iframe>

That's more than enough.
User: David P. 11 years ago
[quote name=Jumbo T. time=02/02/2015 12:16:56]Make the iframe wider and taller if it does not fit. And use only this :

<iframe name="Marco" src="Cabecera.html" frameborder="0" width="1020" height="630" scrolling="no" allowTransparency="true"></iframe>

That's more than enough.

I've no tried this in Internet Explorer... but scrolling="no" seems to work nice on Firefox, Chrome and Safari... :-P Very easy! Thanks Jumbo T.! I will confirm after trying the website on IE.
User: Courtney H. 11 years ago
Great video!

-------------------------------
MrCourtney - Honolulu, HI
--------------------------------------
Mac Studio - dial monitors; iMac 27 5K - Dual Monitors - 10 TB hub
Alienware: Area 51 - 24 gb - Dual Monitors - All SSD
25 TB network storage
User: Roddy 11 years ago
Look to the source page for the problem.

The video is 980px x 550px. The page that it is displayed on is a 1000px x 580px and you are using an iframe to insert it.

Also note that the iframe code you are using is rather dated.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Paul-RAGESW 11 years ago
Give the iFrame a height of 611px.

Also you have incorrect code in your style sheets;

<style type="text/css">
body{
background:url(images/home/browser/FondoImagen.jpg) no-repeat scroll center center; margin: 0pt; " onload="onPageLoad();" onunload="onPageUnload();">
}
</style>

Remove this part;
" onload="onPageLoad();" onunload="onPageUnload();">

-------------------------------
Paul
EverWeb Developer


Post Reply
You must login or signup to post.