Fall Banner Contest?

[bplus]

OK staging is up and yes it works @bplus @dbox

Check out staging with qbjs banner

Design your banner using 1400 x 256 as you have been, or whatever size, then before you release it, we use this code instead for your constants:

Code: (Select All)

Const xmx = _ResizeWidth - 2 '1400
Const ymx = _ResizeHeight - 5 '256

Cheers

That is not working well from my browser. It goes way past the right of my screen and I need to use the horizontal scroll to see it.

This is snap of the right side jutting well past normal page width:
   

For comparison this is how Terry's "1400 x 256" Banner fits across my screen:
   

[grymmjack]

OK last thing I was going to say after seeing this on staging.

If you format your banner code so that the most important stuff happens within the first 970px of the total 1400px width, it will make sure people with smaller resolutions will see the most important stuff.

For example @bplus you put the logo flush right - this is fine normally - but the IFRAME contents don't rescale when a smaller than 1400px width is used.

I tried this @dbox:

Code: (Select All)

<div style="position: relative; max-width: 1400px; min-height: 256px;box-sizing: border-box;">
&nbsp; <div style="position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%;">
<iframe frameborder="no" scrolling="no" allowfullscreen="true" src="https://qbjs.org/?mode=auto&amp;code=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" style="width: 100%; overflow:hidden; height: 100%;"></iframe></div></div>

Which does resize the IFRAME, but the inner contents aren't receiving the "resize message" or something. Anyway...

[grymmjack]

OK staging is up and yes it works @bplus @dbox

Check out staging with qbjs banner

Design your banner using 1400 x 256 as you have been, or whatever size, then before you release it, we use this code instead for your constants:

Code: (Select All)

Const xmx = _ResizeWidth - 2 '1400
Const ymx = _ResizeHeight - 5 '256

Cheers

That is not working well from my browser. It goes way past the right of my screen and I need to use the horizontal scroll to see it.

This is snap of the right side jutting well past normal page width:

Refresh - I had to add some other code to make it more friendly - read my latest post though - the qbjs doesn't automatically resize - we might need @dbox to help us make this more responsive.

Anyway, put the most important stuff on the left side

[grymmjack]

@bplus what resolution are you using?

Here is what a smaller width looks like on my machine with my responsive fix in place:



The width of the entire forum is min-width of 970px -  LMK how this works for you.

[bplus]

@bplus what resolution are you using?

Here is what a smaller width looks like on my machine with my responsive fix in place:



The width of the entire forum is min-width of 970px -  LMK how this works for you.

Here is what is happening with the resize stuff in QBJS (1400 pix being resized) :
   
Even the Logo placement is screwed up!

I think we should be working with much narrower pixel width and NOT screw around with resize.
Maybe the 970 you mentioned @grymmjack.

Glad I didn't start on moving the leaves yet!

[bplus]

I am using 100% resolution my screen is not even 1400 pixels in width:
   

[bplus]

How about if I redo my banner at 965 pixels and we see how that works?

[grymmjack]

@bplus what resolution are you using?

Here is what a smaller width looks like on my machine with my responsive fix in place:



The width of the entire forum is min-width of 970px -  LMK how this works for you.

Here is what is happening with the resize stuff in QBJS (1400 pix being resized) :

Even the Logo placement is screwed up!

I think we should be working with much narrower pixel width and NOT screw around with resize.
Maybe the 970 you mentioned @grymmjack.

Glad I didn't start on moving the leaves yet!

Couple of things @bplus

Don't add the _RESIZEWIDTH and height stuff use your constants 1400 x 256

Only need those once it goes INTO the iframe.

Do you know what I'm saying?

The _RESIZWIDTH looks at the extents of it's container - in the web this exists - in QB64 IDE the container is the full editor viewport, etc.

So remove that stuff, design to 1400x256, with title-safe area of left most 970px and you should be good.

[bplus]

Reworked to match Terry's Banner on pixel width:

Fall Banner width 1090

   

But 970 is not so far off maybe go with that to be safe for everyone?

[grymmjack]

I am using 100% resolution my screen is not even 1400 pixels in width:

Right so then make the banner at 1400px x 256px in QBJS

Use your fixed widths of 700 x 128px or 1400 x 256 if you want.

The left 970px of the display should be titlesafe - so you can have trees rendering off the display that will get chopped at 970px boundary for your older resolutions - but for higher ones it will show more trees - title safe means put the stuff that you don't want cropped on the left most 970px.

Make sense?