# \[Pro\] BackGround Supersize and full screen

**URL:** <https://discourse.softpress.com/t/pro-background-supersize-and-full-screen/15792>\
**Category:** Freeway\
**Created:** [December 4, 2012, 8:49pm UTC](https://discourse.softpress.com/t/pro-background-supersize-and-full-screen/15792 "2012-12-04T20:49:24Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [December 5, 2012, 7:03pm UTC](https://discourse.softpress.com/t/pro-background-supersize-and-full-screen/15792/21 "2012-12-05T19:03:37Z")

</div>

Is any part of your Carousel inline (nested inside another element from a text cursor)? You can use Carousel in an inline layout, but you have to follow a work-around.

Walter

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

> 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](http://freewaytalk.net/person/options)

* * *

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

---

<div class="post-metadata">

**Author:** ![rakeljuice](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/r/b38774/32.png) [@rakeljuice](https://discourse.softpress.com/u/rakeljuice)\
**Post date:** [December 5, 2012, 7:07pm UTC](https://discourse.softpress.com/t/pro-background-supersize-and-full-screen/15792/22 "2012-12-05T19:07:13Z")

</div>

I follow this: [Carousel in Freeway](http://scripty.walterdavisstudio.com/carousel/carousel.html)

And what I do is make a html item, inside it draw three grafic item to import three images, and the I cut and paste them again inside the html item with the cursor flashing to get them well aligned.

* * *

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

---

<div class="post-metadata">

**Author:** ![rakeljuice](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/r/b38774/32.png) [@rakeljuice](https://discourse.softpress.com/u/rakeljuice)\
**Post date:** [December 5, 2012, 7:22pm UTC](https://discourse.softpress.com/t/pro-background-supersize-and-full-screen/15792/23 "2012-12-05T19:22:31Z")

</div>

Hello Again. Something is happening… now, in the blank new site, I delete all the carousel, close, open, and when i try to make it again, the error cames. And I dont have vertical laignment or fullscreen at all.

arrggg

* * *

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

---

<div class="post-metadata">

**Author:** ![rakeljuice](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/r/b38774/32.png) [@rakeljuice](https://discourse.softpress.com/u/rakeljuice)\
**Post date:** [December 5, 2012, 7:40pm UTC](https://discourse.softpress.com/t/pro-background-supersize-and-full-screen/15792/24 "2012-12-05T19:40:15Z")

</div>

Hello again. I ve done all the process again. 1. carousel, 2. vertical alignment, 3. background cover, 4. paste this script after Body for the full screen

and when I make the 4, the carousel stops. Ihave get to upload this to [http://www.i-tek.es/demo/screen/](http://www.i-tek.es/demo/screen/) for be seen before the crash. So I think the problem is in the fullscreen method.

Any idea to fix it?

The code i pasted is:

```
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://www.teatrodelazarzuela.tv/code/screenfull.js"></script>
<script>
$(function() {

	$('#supported').text('Supported/allowed: ' + !!screenfull.enabled);

	if (!screenfull.enabled) {
		return false;
	}

	$('#request').click(function() {
		screenfull.request($('#container')[0]);
		// Does not require jQuery, can be used like this too:
		// screenfull.request( document.getElementById('container') );
	});
            
            $('#exit').click(function() {
		screenfull.exit();
	});
	
	screenfull.onchange = function(e) {
		var elem = screenfull.element;

		$('#status').text('Is fullscreen: ' + screenfull.isFullscreen);

		if (elem) {
			$('#element').text('Element: ' + elem.localName + (elem.id ? '#' + elem.id : ''));
		}

		if (!screenfull.isFullscreen) {
			$('#external-iframe').remove();
			document.body.style.overflow = 'auto';
		}
	};

	// Trigger the onchange() to set the initial values
	screenfull.onchange();
});
</script>

```

* * *

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

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [December 5, 2012, 7:44pm UTC](https://discourse.softpress.com/t/pro-background-supersize-and-full-screen/15792/25 "2012-12-05T19:44:19Z")

</div>

The code you pasted includes jQuery. That’s not compatible with Carousel no matter how you attach it.

Walter

On Dec 5, 2012, at 2:40 PM, rakeljuice wrote:

> Hello again. I ve done all the process again. 1. carousel, 2. vertical alignment, 3. background cover, 4. paste this script after Body for the full screen
> 
> and when I make the 4, the carousel stops. Ihave get to upload this to [http://www.i-tek.es/demo/screen/](http://www.i-tek.es/demo/screen/) for be seen before the crash. So I think the problem is in the fullscreen method.
> 
> Any idea to fix it?
> 
> The code i pasted is:
> 
> * * *
> 
> freewaytalk mailing list  
> email@hidden  
> Update your subscriptions at:  
> [http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

* * *

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

---

<div class="post-metadata">

**Author:** ![rakeljuice](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/r/b38774/32.png) [@rakeljuice](https://discourse.softpress.com/u/rakeljuice)\
**Post date:** [December 5, 2012, 7:59pm UTC](https://discourse.softpress.com/t/pro-background-supersize-and-full-screen/15792/26 "2012-12-05T19:59:09Z")

</div>

I include this code because you told me:

> You might want to look at this, which doesn’t require jQuery to work: [GitHub - sindresorhus/screenfull: Simple wrapper for cross-browser usage of the JavaScript Fullscreen API](https://github.com/sindresorhus/screenfull.js)

so, this is what I did. I dont know how to know if a code includes JQuery or not.

Can you please have a quick look to these others and tell me if the code has JQuery or not, please, so then I Know what to use?

[http://robnyman.github.com/fullscreen/](http://robnyman.github.com/fullscreen/)  
[GitHub - bdougherty/BigScreen: A simple library for using the JavaScript Full Screen API.](https://github.com/bdougherty/BigScreen) [How to Use the HTML5 Full-Screen API — SitePoint](http://www.sitepoint.com/html5-full-screen-api/)

Thanks a lot.

* * *

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

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [December 5, 2012, 8:10pm UTC](https://discourse.softpress.com/t/pro-background-supersize-and-full-screen/15792/27 "2012-12-05T20:10:08Z")

</div>

On Dec 5, 2012, at 2:59 PM, rakeljuice wrote:

> I include this code because you told me:
> 
> > You might want to look at this, which doesn’t require jQuery to work: [GitHub - sindresorhus/screenfull: Simple wrapper for cross-browser usage of the JavaScript Fullscreen API](https://github.com/sindresorhus/screenfull.js)
> 
> so, this is what I did. I dont know how to know if a code includes JQuery or not.
> 
> Can you please have a quick look to these others and tell me if the code has JQuery or not, please, so then I Know what to use?
> 
> [http://robnyman.github.com/fullscreen/](http://robnyman.github.com/fullscreen/)

This one is clean.

> [GitHub - bdougherty/BigScreen: A simple library for using the JavaScript Full Screen API.](https://github.com/bdougherty/BigScreen)

So is this one.

> [How to Use the HTML5 Full-Screen API — SitePoint](http://www.sitepoint.com/html5-full-screen-api/)

And so is this one.

Generally, you can figure out if a script uses jQuery by looking through it for the word jquery or any instance of this construction:

```
$(document).ready( ... stuff here ...)

```

You may also see this bit:

```
$('#someId').somethingElseHere()

```

Prototype would only ever use the # in a double-dollar function:

```
$$('#someId')

```

Prototype code that was accessing a single element would look like this:

```
$('someId).whateverHere()

```

Walter

* * *

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

---

<div class="post-metadata">

**Author:** ![rakeljuice](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/r/b38774/32.png) [@rakeljuice](https://discourse.softpress.com/u/rakeljuice)\
**Post date:** [December 5, 2012, 8:24pm UTC](https://discourse.softpress.com/t/pro-background-supersize-and-full-screen/15792/28 "2012-12-05T20:24:54Z")

</div>

so, I had four and choose the only one that was JQuery, isnt it? Its a pitty when you dont know… Im trying the robnyman’s now.

Thanks.

* * *

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

---

<div class="post-metadata">

**Author:** ![rakeljuice](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/r/b38774/32.png) [@rakeljuice](https://discourse.softpress.com/u/rakeljuice)\
**Post date:** [December 5, 2012, 8:25pm UTC](https://discourse.softpress.com/t/pro-background-supersize-and-full-screen/15792/29 "2012-12-05T20:25:14Z")

</div>

and thanks for your explanation.

* * *

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

---

<div class="post-metadata">

**Author:** ![rakeljuice](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/r/b38774/32.png) [@rakeljuice](https://discourse.softpress.com/u/rakeljuice)\
**Post date:** [December 5, 2012, 9:02pm UTC](https://discourse.softpress.com/t/pro-background-supersize-and-full-screen/15792/30 "2012-12-05T21:02:59Z")

</div>

Hello, I feel like a potatoes bag. I cant get it. With the [http://robnyman.github.com/fullscreen/](http://robnyman.github.com/fullscreen/) or the [GitHub - bdougherty/BigScreen: A simple library for using the JavaScript Full Screen API.](https://github.com/bdougherty/BigScreen). It is like I dont know how to set the buttonId or the button name properly. The one I have now online is the first one (robnyman). Can you please have a look?

* * *

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

---

<div class="post-metadata">

**Author:** ![rakeljuice](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/r/b38774/32.png) [@rakeljuice](https://discourse.softpress.com/u/rakeljuice)\
**Post date:** [December 5, 2012, 9:06pm UTC](https://discourse.softpress.com/t/pro-background-supersize-and-full-screen/15792/31 "2012-12-05T21:06:01Z")

</div>

Ive pasted this after body:

the other file base.js is inside the folder js, and I have two button, one for view-fullscreen and other for cancel-fullscreen.

* * *

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

---

<div class="post-metadata">

**Author:** ![rakeljuice](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/r/b38774/32.png) [@rakeljuice](https://discourse.softpress.com/u/rakeljuice)\
**Post date:** [December 5, 2012, 9:12pm UTC](https://discourse.softpress.com/t/pro-background-supersize-and-full-screen/15792/32 "2012-12-05T21:12:42Z")

</div>

ok, good thing. It works, but not with my button. I ve pasted

Fullscreen  
Cancel fullscreen

  
as well before body, to use robnyman buttons and it works, but not with mine.

So, how is the correct way to tell freeway what are the buttons I want to use?

* * *

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

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [December 5, 2012, 9:56pm UTC](https://discourse.softpress.com/t/pro-background-supersize-and-full-screen/15792/33 "2012-12-05T21:56:43Z")

</div>

Draw a box on the page – graphic or html – and fill it with color so you can see it. Make a note of the name of this box, as reported in the Title field of the Inspector. Then back in the script base.js, modify the event handler assigned to view-fullscreen so it responds to your button’s ID. If it was item4 (Freeway loves to name things that way) then you would substitute item4 for view-fullscreen in the base.js script. Upload the script again, and try it. Remember that this is case-sensitive.

Walter

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

> ok, good thing. It works, but not with my button. I ve pasted
> 
> Fullscreen  
> Cancel fullscreen
> 
>   
> as well before body, to use robnyman buttons and it works, but not with mine.
> 
> So, how is the correct way to tell freeway what are the buttons I want to use?
> 
> * * *
> 
> freewaytalk mailing list  
> email@hidden  
> Update your subscriptions at:  
> [http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

* * *

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

---

<div class="post-metadata">

**Author:** ![rakeljuice](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/r/b38774/32.png) [@rakeljuice](https://discourse.softpress.com/u/rakeljuice)\
**Post date:** [December 6, 2012, 11:21am UTC](https://discourse.softpress.com/t/pro-background-supersize-and-full-screen/15792/34 "2012-12-06T11:21:47Z")

</div>

Hello. This is what I did, and Ive done it again from zero, and it doesnt work. Now I have a cyan html box titled bigscreen, an din the base.js I substitute view-fullscreen for bigscreen, and nothing happens. I used this method to identify buttons with the JQuery one and it worked. What I am doing wrong now?

* * *

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

---

<div class="post-metadata">

**Author:** ![rakeljuice](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/r/b38774/32.png) [@rakeljuice](https://discourse.softpress.com/u/rakeljuice)\
**Post date:** [December 6, 2012, 11:34am UTC](https://discourse.softpress.com/t/pro-background-supersize-and-full-screen/15792/35 "2012-12-06T11:34:43Z")

</div>

and if I make this item as a non layer, directly it doesnt appears in the source code…

* * *

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

---

<div class="post-metadata">

**Author:** ![David\_McCallum](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/ec9cab/32.png) [@David\_McCallum](https://discourse.softpress.com/u/David_McCallum)\
**Post date:** [December 6, 2012, 11:35am UTC](https://discourse.softpress.com/t/pro-background-supersize-and-full-screen/15792/36 "2012-12-06T11:35:58Z")

</div>

> What I am doing wrong now?

A link would help

D

* * *

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

---

<div class="post-metadata">

**Author:** ![rakeljuice](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/r/b38774/32.png) [@rakeljuice](https://discourse.softpress.com/u/rakeljuice)\
**Post date:** [December 6, 2012, 11:45am UTC](https://discourse.softpress.com/t/pro-background-supersize-and-full-screen/15792/37 "2012-12-06T11:45:53Z")

</div>

[http://www.i-tek.es/demo/screen](http://www.i-tek.es/demo/screen)

thanks. The button id is now bigScreen, and in the base.js the code refers to this id, that is for testing the cyan square, but I need to be the graphic others.

base.js

and in my file, after body

```
            <script>
                document.addEventListener("keydown", function (evt) {
                    console.log("keydown. You pressed the " + evt.keyCode + " key")
                }, false);
            </script>

    <script src="js/base.js"></script>

```

* * *

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

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [December 6, 2012, 12:53pm UTC](https://discourse.softpress.com/t/pro-background-supersize-and-full-screen/15792/38 "2012-12-06T12:53:00Z")

</div>

The script you quote below might be what you think is on your server, but in fact it reads `var viewFullScreen = document.getElementById("ocupando");` where you think it reads `var viewFullScreen = document.getElementById("bigScreen");`

Make sure you have uploaded the most recent version of your code to your server, and this might just work.

Walter

On Dec 6, 2012, at 6:45 AM, rakeljuice wrote:

> [http://www.i-tek.es/demo/screen](http://www.i-tek.es/demo/screen)
> 
> thanks. The button id is now bigScreen, and in the base.js the code refers to this id, that is for testing the cyan square, but I need to be the graphic others.
> 
> base.js
> 
> and in my file, after body
> 
> ```
> <script>
> document.addEventListener("keydown", function (evt) {
> console.log("keydown. You pressed the " + evt.keyCode + " key")
> }, false);
> </script>
> 
> <script src="js/base.js"></script>
> 
> ```
> 
> * * *
> 
> freewaytalk mailing list  
> email@hidden  
> Update your subscriptions at:  
> [http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

* * *

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

---

<div class="post-metadata">

**Author:** ![rakeljuice](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/r/b38774/32.png) [@rakeljuice](https://discourse.softpress.com/u/rakeljuice)\
**Post date:** [December 6, 2012, 1:13pm UTC](https://discourse.softpress.com/t/pro-background-supersize-and-full-screen/15792/39 "2012-12-06T13:13:21Z")

</div>

Im testing all the time so, I have changed the name just for a while, and it seems that you just entered on this while. it reads bigScreen. Let me upload the files again, please

* * *

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

---

<div class="post-metadata">

**Author:** ![rakeljuice](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/r/b38774/32.png) [@rakeljuice](https://discourse.softpress.com/u/rakeljuice)\
**Post date:** [December 6, 2012, 1:18pm UTC](https://discourse.softpress.com/t/pro-background-supersize-and-full-screen/15792/40 "2012-12-06T13:18:30Z")

</div>

The last test Ive done has these results:

My fullscreen button is exported by freeway as:

 ![]()

And I need it to became a to work. If I delete the previous code and write this other:

```
            <button id="bigScreen" style="position:absolute; left:1096px; top:51px; width:45px; height:38px; z-index:6">
	<a href="#" onmouseover="FWRestore(1,'Indigo');FWSRestore(top.frames,'Indigo');FWLSwap('img2',1,'Resources/b_fullscreen_over.png','bigScreen','Indigo')" onmouseout="FWRestore(1,'Indigo');FWSRestore(top.frames,'Indigo')" onclick="setTimeout('FWRestore(2,'Indigo');FWLSwap('img2',2,'Resources/b_fullscreen_click.png','bigScreen','Indigo')',0)"><img src="Resources/b_fullscreen_off.png" border=0 width=45 height=38 alt="" style="float:left" id="img2"></a></button>

```

but without a

 fullscreen works, but the rollover action not.

And the thing is that I need to do that manually, exporting and editing the html. I think there wolud be another way to do that directly from freeway. My site has lots of pages. If I need to edit them one by one, Ill never finish…

Thanks. Waiting for your look.

* * *

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

[Previous page](https://discourse.softpress.com/t/pro-background-supersize-and-full-screen/15792.md?page=1)

[Next page](https://discourse.softpress.com/t/pro-background-supersize-and-full-screen/15792.md?page=3)