[Pro] BackGround Supersize and full screen

rakeljuice · December 6, 2012, 1:19pm

ah, and the freeway site is uploaded now withou the edit changes I told you, just to let you see the real situation.

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

David_McCallum · December 6, 2012, 1:20pm

Here is one I have done using that script.

http://www.deltadesign.co/examples/carouseltest.html

I used the original base.js referenced before end body

The 2 buttons are just buttons with the IDs of view-fullscreen and cancel-fullscreen.

And I have removed the reference to the keydown listener.

David

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

rakeljuice · December 6, 2012, 1:23pm

Yes, but I need my graphical buttons. With the fabric button it works, but not with mine. I need to convert my buttons in the working ones. I hoper I made me understood.

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

rakeljuice · December 6, 2012, 1:24pm

in your file, you have added this line to the div so, your div works as a button. How can I do that to my buttons?

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

waltd · December 6, 2012, 1:25pm

You don’t need the button tag to do this. Any element can respond to a click. Seriously. An image, a DIV, even the page itself. Give me a moment and I’ll show you what I mean.

Walter

On Dec 6, 2012, at 8:24 AM, rakeljuice wrote:

in your file, you have added this line to the div so, your div works as a button. How can I do that to my buttons?

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 6, 2012, 1:29pm

ok, thanks, because Im completely desperate. If you dont mind, I compressed my test file. Its at http://www.i-tek.es/demo/screen.zip, and then its more easy for you to tell me what to do.

Thanks a lot

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

David_McCallum · December 6, 2012, 1:34pm

Visit my example again

D

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

rakeljuice · December 6, 2012, 1:36pm

Visit my example again

D

ok, Thats it, but how? If I just put the correct ID it the item properties palette it doesnt work

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

David_McCallum · December 6, 2012, 1:39pm

http://www.deltadesign.co/downloads/button-archive.zip

D

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

David_McCallum · December 6, 2012, 1:41pm

Just watch when you copy/paste these over as FW will not allow 2 different items to have the same ID and will rename them.

D

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

waltd · December 6, 2012, 1:48pm

Please start over with the following example. Follow these steps exactly, don’t do anything that isn’t in them. Start with a completely blank page.

Apply Protaculous to the page. Set the Library picker to prototype-packed.
Click on the top Function Body button, and paste in this code: gist:4224511 · GitHub
Draw a few things on the page – some graphic boxes with photos and color-filled html boxes. Apply a background color.
Draw a box on the page named ‘bigger’ in the Title field of the inspector. Give it a distinct color, so you know that it’s your trigger.
Preview in a browser, and press that button. (Note that it will have magically acquired the cursor saying you can click on it.)

Line by line, here’s what the code does:

Create an unobtrusive listener for the item on the page with the ID ‘bigger’.
Get a reference to the document.documentElement DOM element.
Create an array of function names, and start to loop over them.
Test to see if the function name is in the document element.
Fire that function if it is.
End loop.
End loop function.
End observer function, add the cursor style.

This code will be completely unobtrusive and will not interact badly with any other Prototype/Scriptaculous code on the same page. Continuing from this example, you can layer on other (non jQuery) effects and continue until you have a working example of your super-size page.

Walter

On Dec 6, 2012, at 8:36 AM, rakeljuice wrote:

Visit my example again

D

ok, Thats it, but how? If I just put the correct ID it the item properties palette it doesnt work

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 6, 2012, 1:48pm

http://www.deltadesign.co/downloads/button-archive.zip

your buttons are different from mine, because mine are pass trought and in item palette they dont appears like combine with children, but I have pasted your buttons, changing the ID and doesnt work.

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

rakeljuice · December 6, 2012, 1:49pm

ok, waltd Im doing that. Give me a while

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

rakeljuice · December 6, 2012, 1:56pm

ok, it works, and with my button. Thanks.

Then, Dont I need the .js script at server?

And, how shall I code for the exit full screen button?

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

waltd · December 6, 2012, 1:57pm

Left out one critical instruction: You must have the CSS Layout button ON before you start drawing anything. That’s the key to getting elements on the page that have ID attributes, which this code relies upon. You seem to have been doing that, but I’m adding this note for posterity.

Walter

On Dec 6, 2012, at 8:48 AM, Walter Lee Davis wrote:

Please start over with the following example. Follow these steps exactly, don’t do anything that isn’t in them. Start with a completely blank page.

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

rakeljuice · December 6, 2012, 2:01pm

yes, and it works at my online example http://www.i-tek.es/demo/screen,. Have two questions:

Then, Dont I need the .js script at server?

And, how shall I code for the exit full screen button?

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

waltd · December 6, 2012, 2:02pm

You would add a second block of code in the same Function Body:

gist.github.com

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

gistfile1.js

$('smaller').observe('click', function(){
  var docElm = document.documentElement;
  $w('exitFullscreen mozCancelFullScreen webkitCancelFullScreen').each(function(f){
    if(docElm[f]){
      docElm[f]();
    }
  });
}).setStyle('cursor:pointer');

If you really wanted to get tricky, I can think of a way to make the same button do both things, but for this example, make two different buttons with the IDs ‘bigger’ and ‘smaller’.

No, you don’t need that external script if you use this approach. This code could be put in an external script file if you like to work that way, but you would need to wrap it in the same function that the Protaculous Action is adding around it: the unobtrusive DOM ready listener:

document.observe('dom:loaded', function(){
  //your code here
});

Walter

On Dec 6, 2012, at 8:56 AM, rakeljuice wrote:

ok, it works, and with my button. Thanks.

Then, Dont I need the .js script at server?

And, how shall I code for the exit full screen button?

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 6, 2012, 2:13pm

Okay, with a single HTML box as your trigger, containing a single paragraph of text that reads “Show Full Screen”, and with the ID toggleScreen, you would use this code:

gist.github.com

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

gistfile1.js

var fullScreen = false;
$('toggleScreen').observe('click', function(){
  var docElm = document.documentElement;
  var elm = this;
  if(fullScreen){
    $w('exitFullscreen mozCancelFullScreen webkitCancelFullScreen').each(function(f){
      if(docElm[f]){
        docElm[f]();
        if(elm.down('p')) elm.down('p').update('Show Full Screen');
      }

This file has been truncated. show original

You have to be careful in Freeway to make sure that you don’t end up with any tags in the resulting HTML box; these can arise when you use the Inspector to style text instead of the Styles palette and a manually-constructed paragraph style. If you do, then this script will replace them after the first click, and your text in the button will become un-styled Times Roman in black by default.

Walter

On Dec 6, 2012, at 9:02 AM, Walter Lee Davis wrote:

If you really wanted to get tricky, I can think of a way to make the same button do both things, but for this example, make two different buttons with the IDs ‘bigger’ and ‘smaller’.

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

rakeljuice · December 6, 2012, 2:13pm

Thanks for the explanation.

The second block of code doesnt work. The example is online.

I thing using two buttons would be ok, but now, I need to finished this…

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

rakeljuice · December 6, 2012, 2:21pm

Waltd, thanks but I need this button, no a text paragraph…

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