[Pro] BackGround Supersize and full screen

rakeljuice · December 4, 2012, 8:49pm

Hello. Ive just made what I was looking for: an optional fullscreen, but, the site where Im implementing it has a Background Supersizer action, and now, it doesnt work. Can it be fixed in any way? The link is: http://www.i-tek.es/demo/screen/ and the full screen enter when you press the green button and finish when you press the red one.

Thanks a lot.

http://www.i-tek.es/demo/screen/

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

rakeljuice · December 4, 2012, 8:55pm

and another thing, it only works in Safari… any idea?

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

rakeljuice · December 4, 2012, 9:00pm

and the last one: I need to have it well done. If someone knows how to fix it, we will appreciate it and pay for the work, of course.

Thanks again.

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

waltd · December 4, 2012, 9:19pm

I would try to solve one problem at a time. First, get rid of the SuperSizer, and just apply your background to the page as normal. In the Styles palette, create a new style with the Tag set to body and nothing in the Name field. Click the Extended button and add the following name/value pair:

Name: background-size
Value: cover

Then test your page. Ignore the fact that only modern browsers can see the background covering the window regardless of size. Make sure that your full screen effect works.

Now you can add a polyfill to cover older browsers. Apply the Protaculous Action to the page, and choose prototype-packed from the Library picker. Click the top Function Body button and paste in the following code:

gist.github.com

https://gist.github.com/walterdavis/4208778

gistfile1.js

  if (!('backgroundSize' in document.body.style)) {
    var body = $$('body').first(), 
    img = body.getStyle('background-image').sub(/url\("?(.+?)"?\)/,'#{1}') || 'default.jpeg';
    body.setStyle('background:#ccc');
    var fill = new Element('img', {
      src: img,
      alt: ''
      }).setStyle('position:absolute; top:0; left:0; min-width: 100%; height: ' + ($(document.body).getHeight() + 80) + 'px; z-index:-1');
    body.insert({top: fill});
    Event.observe(window, 'load', function(){

This file has been truncated. show original

That should get the rest of the browsers to sit up and bark. Note that the effect will not be a perfect match for background-size:cover – it’s a more simplistic “squash to fit” approach, in keeping with the low-tech browsers that require it.

Walter

On Dec 4, 2012, at 3:55 PM, rakeljuice wrote:

and another thing, it only works in Safari… any idea?

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

rakeljuice · December 4, 2012, 9:37pm

Hello Waltd!! Thanks a lot for your help. Background works with this method, not for epileptic people in Safari, because it flashes a lot, but it works. The Protaculous Action is magical, isnt it? Its is the second time you told me to use it to fix something…

And works at the time with the full screen mode but only in Safari. In IE it doesn work, an in Firefox, it gives a blank page with the text: [object Object]. The full screen method I used is in here: GitHub - code-lts/jquery-fullscreen-plugin: This jQuery plugin provides a simple to use mechanism

Any way to make it working in all browsers?

When I said that we can pay for the job was seriously. I dont know how much time can someone spend in that.

Thanks again.

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

rakeljuice · December 4, 2012, 9:57pm

Well, I have test without a freeway page, in a blank one, and both fullscreen methods work in Firefox and Safari (not in IE, but I think this one is a world apart…)

Test are :
http://www.i-tek.es/demo/prueba1/
http://www.i-tek.es/demo/prueba2/

But cant make it works together with others in my freeway page…

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

waltd · December 4, 2012, 11:13pm

On Dec 4, 2012, at 4:37 PM, rakeljuice wrote:

Hello Waltd!! Thanks a lot for your help. Background works with this method, not for epileptic people in Safari, because it flashes a lot, but it works.

This script should not fire in Safari, because it has the background-size property. Have a look at http://cmi.walterdavisstudio.com to see it in action. (Work in progress, not final art.)

The Protaculous Action is magical, isnt it? Its is the second time you told me to use it to fix something…

And works at the time with the full screen mode but only in Safari. In IE it doesn work, an in Firefox, it gives a blank page with the text: [object Object]. The full screen method I used is in here: https://github.com/kayahr/jquery-fullscreen-plugin

There’s your problem right there. You can’t mix Prototype and jQuery in the same page (you can, but it’s a very bad idea, like dripping nitric acid into glycerin in your kitchen while smoking).

Any way to make it working in all browsers?

http://caniuse.com/fullscreen

Depends a lot on what you mean by all browsers.

Walter

When I said that we can pay for the job was seriously. I dont know how much time can someone spend in that.

Thanks again.

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

waltd · December 4, 2012, 11:18pm

You might want to look at this, which doesn’t require jQuery to work: GitHub - sindresorhus/screenfull.js: Simple wrapper for cross-browser usage of the JavaScript Full

Walter

On Dec 4, 2012, at 4:37 PM, rakeljuice wrote:

Hello Waltd!! Thanks a lot for your help. Background works with this method, not for epileptic people in Safari, because it flashes a lot, but it works. The Protaculous Action is magical, isnt it? Its is the second time you told me to use it to fix something…

And works at the time with the full screen mode but only in Safari. In IE it doesn work, an in Firefox, it gives a blank page with the text: [object Object]. The full screen method I used is in here: GitHub - code-lts/jquery-fullscreen-plugin: This jQuery plugin provides a simple to use mechanism

Any way to make it working in all browsers?

When I said that we can pay for the job was seriously. I dont know how much time can someone spend in that.

Thanks again.

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

rakeljuice · December 5, 2012, 12:28pm

I think I got it!! Thanks a lot.

I did:
1st. start from a blank document
2nd. make the style for the background
3rd. use the sindresorhus files for the full screen in my page: copy inbody all what I need from his index, and put the .js in the server, and make the buttons
4th. Insert he vertical align action
5th. insert a rollover button
6th and I have no protacolus action used

by the moment, it works. I hope it will work when I will make a form…

Thanks again.

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

rakeljuice · December 5, 2012, 12:31pm

test link http://www.i-tek.es/demo/screen/

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

rakeljuice · December 5, 2012, 5:27pm

Hello again. Now Ive added a carousel and it doesnt work. Ive readen in other recent post that JQuery is not compatible with carousel, but at last, my fullscreen is not JQuery…

Is any way to fix it, using the marvelous protacolous action, perhaps?

Thanks

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

waltd · December 5, 2012, 5:32pm

Link please? Your last link shows jQuery and screenful.js. Do you have a link to your working screen?

Walter

On Dec 5, 2012, at 12:27 PM, rakeljuice wrote:

Hello again. Now Ive added a carousel and it doesnt work. Ive readen in other recent post that JQuery is not compatible with carousel, but at last, my fullscreen is not JQuery…

Is any way to fix it, using the marvelous protacolous action, perhaps?

Thanks

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

rakeljuice · December 5, 2012, 5:47pm

yes, sorry. http://www.i-tek.es/demo/zarzuela/producciones.html

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

rakeljuice · December 5, 2012, 5:49pm

but as it gives the error when publish, the carrousel appears extrange, with all the panes at view

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

waltd · December 5, 2012, 6:13pm

Oh, I didn’t get that. So you never make it through publishing? Can you quote the error message that you see?

Walter

On Dec 5, 2012, at 12:49 PM, rakeljuice wrote:

but as it gives the error when publish, the carrousel appears extrange, with all the panes at view

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

rakeljuice · December 5, 2012, 6:26pm

When publish first it says that action has javascript error, and lists all the pane and button carousel items. After, in the actions palette it says javascritp error, can clear the error but doesnt work. You publish again and it says that is up to you, but the carousel action is not being published. I can send you files if you want.

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

rakeljuice · December 5, 2012, 6:33pm

I got this last time I tried:

www.i-tek.es/demo/screen/01.jpg
www.i-tek.es/demo/screen/02.jpg
www.i-tek.es/demo/screen/03.jpg
www.i-tek.es/demo/screen/04.jpg
www.i-tek.es/demo/screen/05.jpg

it looks like the error, but it doesnt allow copy test, so I have capture the window. In 03 there is a red line.

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

waltd · December 5, 2012, 6:34pm

I doubt the error would duplicate here. Could you please try the following:

Make sure you have the very latest version of the Action. Check at ActionsForge. While you’re at it, make sure you also have the latest version of Freeway Pro.
Go through the entire document, and remove all Protaculous, Carousel, Carousel Pane, Carousel Tab and Carousel Button Actions – everything Carousel related – from every element in the entire document.
Publish once (you don’t have to upload, just publish – this clears the Action caches in the document itself).
Go back through the document and re-build one of the Carousel pages. Test to make sure it works before doing the rest.

Let me know how that goes. You can also test the basic Action by closing all documents, creating a new blank document, and building up a test page to be sure that the Action works on your Mac. It should, as long as you have the latest versions of everything.

Walter

On Dec 5, 2012, at 1:26 PM, rakeljuice wrote:

When publish first it says that action has javascript error, and lists all the pane and button carousel items. After, in the actions palette it says javascritp error, can clear the error but doesnt work. You publish again and it says that is up to you, but the carousel action is not being published. I can send you files if you want.

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

rakeljuice · December 5, 2012, 6:56pm

ok, my freeway is 5.5 and I downloaded and reinstalled the action. Althougt the action Protacolus it say is of August, when you download it the file says that is for 30 April, like the other I had.

Well, close, reinstalled and make a new blank site. Try carousel, and it works.

Go bak to my site, delete the page and make a new one, and when I export it says the same. The same line marked in red as at

www.i-tek.es/demo/screen/03.jpg

These are my results. What do you think? Thanks.

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

rakeljuice · December 5, 2012, 7:02pm

Two things are conflicting I think: full screen and vertical alignment Action.

In my blank site I have the carousel working. If I add the vertical Alignment Action it gives the error.

And if I had the carousel working and add the full screen code in body, it gives the error as well.

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