Fit YoWindow into Wordpress sidebar

[garyguertin]

I have a cruise blog on Wordpress.com (garyguertin.wordpress.com). I use YoWindow in the sidebar for Weather information at my home (Boca Raton, FL) and the Ports I am visiting. I fit YoWindow into the sidebar using the width 170 and the height 150. The widget shows complete on your YoWindow site, without scroll bars, but when I copy the code into Wordpress it shows up with a scroll bar for the width and height. The problem I see is that the scroll bars aren't needed because the space they take up is the same as is what's missing from having a complete widget picture (one you can see all the information without scrolling). I hope I am explaining it correctly. Can someone tell me how to get a code that gives me the correct size for the sidebar without the scroll bars.

----------------------------------------
Moved from Questions to Widget.
-- Don

[Don]

Hi Gary,

I am not familiar with WordPress myself, but I do know that there are special instructions for putting YoWindow on a WordPress website. If you haven't already done so, please read the instructions here. http://yowindow.com/widget_wordpress.php

Don

[Mallorca]

Hi Gary,

I had a look at your codes and question is why do you use different codes/different widths?

Code: Select all

<div class="textwidget"><div style="line-height:0;"><iframe frameborder="0" width="170" height="150" src="http://wpcomwidgets.com/?src=http%3A%2F%2Fswf.yowindow.com%2Fyowidget3.swf&width=170&height=150&allowfullscreen=true&wmode=opaque&bgcolor=%23FFFFFF&flashvars=location_id%3Dgn%3A4148411%26location_name%3DBoca%2520Raton%26landscape%3Dseaside%26time_format%3D12%26unit_system%3Dus%26background%3D%23FFFFFF%26copyright_bar%3Dfalse&_tag=gigya&_hash=dfc114f12a68c3273debfbf2c79a84f8" id="dfc114f12a68c3273debfbf2c79a84f8"></iframe><div style="width:180px;font-size:12px;font-family:Arial, Helvetica, sans-serif;"><span style="float:left;"><a target="_top" href="http://yowindow.com/weatherwidget?client=widget&link=copyright" style="color:#2fa900;font-weight:bold;text-decoration:none;" title="Weather gadget">YoWindow.com</a></span><span style="float:right;color:#888888;"><a href="http://www.weather.gov" style="color:#2fa900;text-decoration:none;">NWS</a></span></div></div></div>
		</div><div id="text-4" class="widget widget_text">			<div class="textwidget"><div style="line-height:0;"><iframe frameborder="0" width="170" height="150" src="http://wpcomwidgets.com/?src=http%3A%2F%2Fswf.yowindow.com%2Fyowidget3.swf&width=170&height=150&allowfullscreen=true&wmode=opaque&bgcolor=%23FFFFFF&flashvars=location_id%3Dgn%3A3435910%26location_name%3DBuenos%2520Aires%26time_format%3D12%26unit_system%3Dus%26background%3D%23FFFFFF%26copyright_bar%3Dfalse&_tag=gigya&_hash=0d9f5d8ee97032556bb41a0f22429a59" id="0d9f5d8ee97032556bb41a0f22429a59"></iframe><div style="width:170px;font-size:12px;font-family:Arial, Helvetica, sans-serif;"><span style="float:left;"><a target="_top" href="http://yowindow.com/weatherwidget?client=widget&link=copyright" style="color:#2fa900;font-weight:bold;text-decoration:none;" title="Weather gadget">YoWindow.com</a></span><span style="float:right;color:#888888;"><a href="http://yr.no" style="color:#2fa900;text-decoration:none;">yr.no</a></span></div></div></div>
		</div><div id="text-5" class="widget widget_text">			<div class="textwidget"><div style="line-height:0;"><iframe frameborder="0" width="170" height="150" src="http://wpcomwidgets.com/?src=http%3A%2F%2Fswf.yowindow.com%2Fyowidget3.swf&width=170&height=150&allowfullscreen=true&wmode=opaque&bgcolor=%23FFFFFF&flashvars=location_id%3Dgn%3A3448439%26location_name%3DS%25C3%25A3o%2520Paulo%26time_format%3D12%26unit_system%3Dus%26background%3D%23FFFFFF%26copyright_bar%3Dfalse&_tag=gigya&_hash=9d11138172932dc6d6a9c91fff7279d0" id="9d11138172932dc6d6a9c91fff7279d0"></iframe><div style="width:150px;font-size:12px;font-family:Arial, Helvetica, sans-serif;"><span style="float:left;"><a target="_top" href="http://yowindow.com/weatherwidget?client=widget&link=copyright" style="color:#2fa900;font-weight:bold;text-decoration:none;" title="Weather gadget">YoWindow.com</a></span><span style="float:right;color:#888888;"><a href="http://yr.no" style="color:#2fa900;text-decoration:none;">yr.no</a></span></div></div></div>

When you go to full screen the time bar is visible.

Werner

[garyguertin]

Don: I have/did read instructions and followed them exactly. Got what you see.
Werner: I have not changed the code YoWindow generates at all except to change the width and height numbers (170,150) to see if I could eliminate the scroll bars. It didn't work. I didn't touch the color codes. I know you can enlarge the widget window to full screen and eliminate the scroll bars but my average blog reader is 70+ years (I'm 75) and only know how to get on the site and read. Double clicking is out of their universe. I've been playing with computers since the Apple II, but don't have enough knowledge to solve this one.
Thank You both for your comments, do you have any other suggestions I can try to get rid of those scroll bars?

[ikarus1969]

Hi Gary,

i don't have a solution to your problem. What i did was to compare your blog how is displayed with Internet Explorer 10 and with the Firefox browser.

With Internet Explorer 10 i do see the scrollbars, with Firefox i do not see them:

YoWindow -Gary (left IE10, right Firefox).jpg (171.19 KiB) Viewed 9388 times

We all know that Internet-Explorer has had problems with Web-standards since IE 1 was created and obviously that hasn't changed... - i'm sorry for that!

My only "solution" (if you can name it that way) is to use Firefox browser (i have no idea how your blog is displayed with the Chrome-browser or the opera-browser...)

[ikarus1969]

what i had forgotten: there's a website-service where you can test how a site is displayed with various browsers.

It's named http://browsershots.org/

[garyguertin]

Thanks, that's the problem, IE. With Firefox I get the widget complete without scroll bars. With IE, which is what I and all my blog viewers use, I get scroll bars. Any suggestions on eliminating the scroll bars in IE?
Thanks, again, Gary

[ikarus1969]

Scrollbars are display by the browser if he thinks the content of a certain region does not fit into its container (to let the user still view everything).
You can tell the browser to not display scrollbars in that case but to hide the part of the content which he thinks does not fit into its container.

Now i assume you know how to adapt the code you are inserting into wordpress, ok?
Then there is one (or two) CSS-attributes to tell the browser to not display scrollbars if it thinks the content of an "object" does not fit into its container-box.

I assume there's a tag which contains the code of the widget? A "div", or a "p" tag or the "iframe"?

Add the following css-attribute to the "style" of this "div" (or "p" or whatever tag is used):

Code: Select all

overflow: hidden;

It means if the browser thinks the content does not fit into its container, it does not display scrollbars anymore but hide the part of the content which does not fit.

Can you try that and tell us if that helped?

(for completeness' sake: to hide just the vertical or the horizontal scrollbar you can use either

Code: Select all

overflow-x: hidden;

or

Code: Select all

overflow-y: hidden;

)

[Mallorca]

Hi Gary,

my standard browser is Chrome and there is no scrollbar (so I didn't understood your problem in my first answer).

But again my question: why do you use different codes? The width of the window is allways 170x150 thats right, but as you can see on the screenshot the width of the footer is different (150, 170, 180)

Unbenannt.JPG (32.28 KiB) Viewed 9341 times

I know it has nothing to do with your problem, but show different windows.

My solution to solve your scrollbar problem would be a small tip for the visitors "please klick to the window to see the weather in full screen"

Another point I have noticed is the lenght of your site ... feels like 100 yards to scroll down
Werner

[FvE]

Hi Gary,

First of all my compliments on your blog.
You must feel blessed to be able to make these trips and also a blog like this.
I wish I could!

First of all I don't know how to make a blog and I don't know Wordpress.
However I did take a look at your code and I was wondering if you could try the following:

Let's take Boca Raton as an example.

<div class="textwidget"><div style="line-height:0;"><iframe frameborder="0" width="170" height="150" src="http://wpcomwidgets.com/?src=http%3A%2F ... idget3.swf&width=170&height=150&#038;allowfullscreen=true&wmode=opaque&

In the first part you've set a frame 170x150 (in red). Then in the widget you try to put the same dimensions in that frame (in green).

Could you please try to change the size of one of these, ie make the red say 180x160 or make the Widget 160x140, but in any case not make these sizes equal.
I hope this way you can work around your problem.

Please let me know if this works.
Thanks and goodluck.
Fred