Adobe Community: Message List - How to center page designed in Edge

Re: How to center page designed in Edge

forums_noreply@adobe.com — Mon, 07 Apr 2014 08:01:34 GMT

Hello!

I am quite a new to Edge Animate, therefore facing with little issues at each step

I have an DIV with animation. I want to wrap it up with my DIV with a specific width and overflow:hidden to have a control over visible width of my animation DIV. But apparently it is not working and animation DIV simply ignore my wrapper.

Can you please advice what I am doing wrong?

Re: How to center page designed in Edge

forums_noreply@adobe.com — Wed, 23 Oct 2013 15:38:27 GMT

half problem solved...thank you - works well in Firefox 24.0, but not in IE 10, IE 9.0

Please take a look at the following testpage from me:

http://openoffice.funpic.de/Test_003/test003.html

You can download the complete composition (includes Edge Animation Source file):

http://openoffice.funpic.de/Test_003/Test_003.rar

Please help....it works perfectly in Firefox but NOT in Internet-Explorer...

thank you

Re: How to center page designed in Edge

forums_noreply@adobe.com — Tue, 22 Oct 2013 16:45:19 GMT

try this from Sarah I think:

// center the stage

winwidth=document.all?document.body.clientWidth:window.innerWidth;

winHeight=document.all?document.body.clientHeight:window.innerHeight;

myPosition = (winHeight -400)/2;

//alert("winHeight is" + winHeight + "and the stage position is at " + myPosition);

$("#Stage").css("margin","auto");

$("#Stage").css("margin-top",myPosition);

window.onresize = function(event) {

winwidth=document.all?document.body.clientWidth:window.innerWidth;

winHeight=document.all?document.body.clientHeight:window.innerHeight;

myPosition = (winHeight -400)/2;

$("#Stage").css("margin","auto");

$("#Stage").css("margin-top",myPosition);

}

Re: How to center page designed in Edge

forums_noreply@adobe.com — Tue, 22 Oct 2013 15:51:50 GMT

hi - thank you for your tip....it's no problem to center the stage horizontal.
But I've found nothing to center the stage vertical or set it down at example 200px from the top with edgeHero.js

Re: How to center page designed in Edge

forums_noreply@adobe.com — Fri, 18 Oct 2013 16:55:23 GMT

use edgeHero.js from edgeHero.com to center anything.

Re: How to center page designed in Edge

forums_noreply@adobe.com — Fri, 18 Oct 2013 16:28:57 GMT

Hi - doesn't work for me.

My Animation is now horizontal centered with the command

$("#Stage").css("margin","auto")

works good for me.

I tried also to center the stage vertically....no way

alternate: Is it possible to put the stage down from the top at example for 200px?

Re: How to center page designed in Edge

forums_noreply@adobe.com — Thu, 29 Aug 2013 02:01:19 GMT

Is the reply the one in the link posted earlier by Xoco?

Cheers!

Re: How to center page designed in Edge

forums_noreply@adobe.com — Thu, 29 Aug 2013 01:36:17 GMT

Finally, someone has answered the orignal question of centering vertically on a page. Thanks.

Re: How to center page designed in Edge

forums_noreply@adobe.com — Tue, 13 Aug 2013 14:28:36 GMT

Hi, Can someone help me with an Edge problem? I'm using:

load: "http://cdn.edgecommons.org/an/1.0.0/js/min/EdgeCommons.js",

complete: function() {

EC.debug("Commons ready: "+EC.VERSION);

EC.centerStage(sym);

EC.Parallax.setup(sym); } });

to animate a div by scrolling and then using:

sym.$("Symbol_1").css("position", "fixed"):

to keep the animated div fixed. It stays fixed perfectly in Firefox but it doesn't stay fixed in Chrome although the animation works. Also, any page that I've created in Dreamweaver with a fixed div fails to stay fixed in Chrome after bringing it into Edge and then publishing it. Does anyone know about this? Thanks.

Re: How to center page designed in Edge

forums_noreply@adobe.com — Tue, 06 Aug 2013 04:41:04 GMT

Copy&Paste error, the correct link is: http://forums.adobe.com/thread/1269076

Re: How to center page designed in Edge

forums_noreply@adobe.com — Mon, 05 Aug 2013 11:50:26 GMT

Well, with html frames always work fine, with this code...

var stageHdl = $('#Stage');

var centerTop = ($(window).height() - stageHdl.height()) /2 | 0;

stageHdl.css({margin:'auto',top:centerTop});

...in document.compositionReady maybe depends of other factors, good luck!

Re: How to center page designed in Edge

forums_noreply@adobe.com — Mon, 05 Aug 2013 11:03:11 GMT

Hi Josep

Thank you for that but it is not working on my site, I just copy and paste

the code into the stage action, but all alignment goes wrong, do I have to

past the code somewhere else or do I have to change something.

Thank you

Re: How to center page designed in Edge

forums_noreply@adobe.com — Mon, 05 Aug 2013 09:27:39 GMT

For center vertically you can use old html frames like this:

</frameset>

In this example the height of Stage in edgeanimatepage.html is 500px. Is not elegant but works fine.

Edit [5.ago.2013 11:53 GMT+1]

You can see this perfect answer of Yoshioka Ume in this thread: http://forums.adobe.com/message/556576

Re: How to center page designed in Edge

forums_noreply@adobe.com — Sat, 03 Aug 2013 22:11:55 GMT

There are other posts about it. I guess if you mark it as correct people will see it.

Re: How to center page designed in Edge

forums_noreply@adobe.com — Sat, 03 Aug 2013 22:10:43 GMT

There are other

Re: How to center page designed in Edge

forums_noreply@adobe.com — Sat, 03 Aug 2013 21:11:03 GMT

Thank you very much for your strong help, as this music problem is not related to this thread, can you find a way to move it to a seprate thread so more people will get the benefit of it, I don't know how.

Thank you again,

Khalil

Re: How to center page designed in Edge

forums_noreply@adobe.com — Sat, 03 Aug 2013 20:53:53 GMT

Working perfect! Congratulations on your site!

Re: How to center page designed in Edge

forums_noreply@adobe.com — Sat, 03 Aug 2013 20:44:35 GMT

sorry spelling wrong, here it is: www.khaleha3rbi.com

Re: How to center page designed in Edge

forums_noreply@adobe.com — Sat, 03 Aug 2013 20:04:04 GMT

The link do not work for me.

Re: How to center page designed in Edge

forums_noreply@adobe.com — Sat, 03 Aug 2013 19:09:13 GMT

resdesign wrote:

Replace code with this one that works:

yepnope({nope:['buzz.js',],complete:init});
function init(){myfile=new buzz.sound("sounds/myfile",{formats:["mp3","ogg","wav"],loop:'true'}) ;
myfile.play();
}

/*
sym.$('btn').click(function(){
          myfile.stop();
});
*/
var toggle = true;
function btnOnOff(){
          if (toggle){
                    toggle=false;
                    myfile.stop();
          }
          else{
                    myfile.play();
                    toggle=true;

          }
}

sym.$('btn').click(function(){
          btnOnOff();
});

Thank you very much, it works fine, here it is: www.khleha3rbi.com

Re: How to center page designed in Edge

forums_noreply@adobe.com — Sat, 03 Aug 2013 14:26:01 GMT

Replace code with this one that works:

yepnope({nope:['buzz.js',],complete:init});

function init(){myfile=new buzz.sound("sounds/myfile",{formats:["mp3","ogg","wav"],loop:'true'});

myfile.play();

}

sym.$('btn').click(function(){

myfile.stop();

});

var toggle = true;

function btnOnOff(){

if (toggle){

toggle=false;

myfile.stop();

}

else{

myfile.play();

toggle=true;

}

sym.$('btn').click(function(){

btnOnOff();

});

Re: How to center page designed in Edge

forums_noreply@adobe.com — Sat, 03 Aug 2013 13:22:19 GMT

resdesign wrote:

Hey, you can add a toggle function.

var toggle;

function btnOnPause(){
if (toggle){
      toggle=false;
      myfile.play();
}
else
{
     toggle=true;
     myfile.pause();

}
}

syn.$('btn').click(function(){
btnOnPause();
});

Hi, thanks, but I don't know why it is not working, attached the screenshot shows the code I past, the result is strang, the file goes back to the left of the page and no music

I think I past it wrong

Thanks

Re: How to center page designed in Edge

forums_noreply@adobe.com — Sat, 03 Aug 2013 13:44:06 GMT

I try also this:

yepnope({nope:['buzz.js',],complete:init});

function init(){myfile=new buzz.sound("sounds/myfile",{formats:["mp3","ogg","wav"],loop:'true'}) ;

myfile.play();}

var toggle;

function btnOnPause(){if (toggle){toggle=false;myfile.play();}else{toggle=true;myfile.pause();}}

syn.$('btn').click(function(){btnOnPause();}) ;

sym.$('btn').click(function(){myfile.pause();}) ;

But it is not working also

Re: How to center page designed in Edge

forums_noreply@adobe.com — Sat, 03 Aug 2013 12:23:14 GMT

Hey, you can add a toggle function.

var toggle;

function btnOnPause(){

if (toggle){

toggle=false;

myfile.play();

}

else

{

toggle=true;

myfile.pause();

}

syn.$('btn').click(function(){

btnOnPause();

});

Re: How to center page designed in Edge

forums_noreply@adobe.com — Sat, 03 Aug 2013 02:25:45 GMT

Is there is a way to play/pause the music from the same button, thank you

Re: How to center page designed in Edge

forums_noreply@adobe.com — Fri, 02 Aug 2013 14:59:47 GMT

Glad it works!

Re: How to center page designed in Edge

forums_noreply@adobe.com — Fri, 02 Aug 2013 14:58:56 GMT

Yes, pause now is working as I replaced stop with pause here is the code:

sym.$('btn').click(function(){myfile.pause();}) ;

sym.$('ply').click(function(){myfile.play();}) ;

Thank you for the help

Khalil

Re: How to center page designed in Edge

forums_noreply@adobe.com — Fri, 02 Aug 2013 14:28:26 GMT

resdesign wrote:

If you take var off in the code then it will work but this makes myfile a global variable.

yepnope({nope:['buzz.js',],complete:init});
function init(){myfile=new buzz.sound("sounds/myfile",{formats:["mp3","ogg","wav"],loop:'true'}) ;
myfile.play();
}

sym.$('btn').click(function(){
myfile.stop();
});

Yes now it is working, but I didn't understand but this makes myfile a global variable.

One last thing, how I can pause the music so it should only pause and then it comes back from where it stops when I press the button again not play from the beginning.

Thank you very much

Khalil

Re: How to center page designed in Edge

forums_noreply@adobe.com — Fri, 02 Aug 2013 03:37:40 GMT

If you take var off in the code then it will work but this makes myfile a global variable.

yepnope({nope:['buzz.js',],complete:init});

function init(){myfile=new buzz.sound("sounds/myfile",{formats:["mp3","ogg","wav"],loop:'true'});

myfile.play();

}

sym.$('btn').click(function(){

myfile.stop();

});

Re: How to center page designed in Edge

forums_noreply@adobe.com — Fri, 02 Aug 2013 02:21:24 GMT

I already did that, but when I click on "Stop music" text box at the browser did not stop, attached the screenshot

I don't know if this right

Thank you

Khalil

Re: How to center page designed in Edge

forums_noreply@adobe.com — Fri, 02 Aug 2013 02:01:17 GMT

You need to put a button on the stage. I made a button and called it btn in the element panel. It can be any image or text.

Then put that in compositionReady.

Re: How to center page designed in Edge

forums_noreply@adobe.com — Fri, 02 Aug 2013 01:20:54 GMT

If you want to give the user a way to stop the sound you could add an event like this:

sym.$('btn').click(function(){
myfile.stop();
});

Where I have to apply that code, I tried to apply it on the stage it is not working, also I tried to appky it on stop button it also not working

Thanks

Khalil

Re: How to center page designed in Edge

forums_noreply@adobe.com — Fri, 02 Aug 2013 01:11:46 GMT

YES, thank you very much it is working I am uploading the files now, "myfile.wav" is too big I don't know how it will load and how much time it will take to start let us see the result after uploading, but the music starts at firefox locally very fast

Thank you again for your help

khalil

Re: How to center page designed in Edge

forums_noreply@adobe.com — Fri, 02 Aug 2013 00:28:59 GMT

Corrected code:

yepnope({nope:['buzz.js',],complete:init});

function init(){var myfile=new buzz.sound("sounds/myfile",{formats:["mp3","ogg","wav"],loop:'true'}) ;

myfile.play();}

Re: How to center page designed in Edge

forums_noreply@adobe.com — Thu, 01 Aug 2013 22:16:03 GMT

resdesign wrote:

Do you have all the sound formats files?
It should work. If you want, you can PM your files to me and I will look at it.

I have mp3, ogg and wav format, but still not working, I will upload all the files on Dropbox and send you the link at PM, thank you very much

Re: How to center page designed in Edge

forums_noreply@adobe.com — Thu, 01 Aug 2013 21:30:48 GMT

Do you have all the sound formats files?

It should work. If you want, you can PM your files to me and I will look at it.

Re: How to center page designed in Edge

forums_noreply@adobe.com — Thu, 01 Aug 2013 20:52:17 GMT

I don't know what I am doing wrong, I copy and past the same code but still not working, strange!!!, here is my code I past but I change the location of my music in the code:

yepnope(

{

nope:[

'buzz.js',

complete: init

}

);

function init() {

yourSound = new buzz.sound("sounds/myfile", {formats: ["mp3", "ogg", "wav"],

loop: 'true'});

}

// play sound:

yourSound .play();

here is the image of my files locations:

Re: How to center page designed in Edge

forums_noreply@adobe.com — Thu, 01 Aug 2013 19:45:10 GMT

Yes, you can put the play() event in compositionReady instead of a symbol like the code above or even directly in the init function.

function init() {

yourSound = new buzz.sound("media/yourSoundFileName", {formats: ["mp3", "ogg", "wav"], loop: 'true'});

// play sound:

yourSound .play();

}

Re: How to center page designed in Edge

forums_noreply@adobe.com — Thu, 01 Aug 2013 19:42:20 GMT

Thanks for the example, I need the sound at the start of the website, does this example work?

Thanks

Khalil

Re: How to center page designed in Edge

forums_noreply@adobe.com — Thu, 01 Aug 2013 18:22:01 GMT

No, yepnope is part of Edge Animate.

Do you use the sound at the start, on an event?

Here is a sample to show the sound on a click event:

https://app.box.com/s/aqa54tzo7kd4tsftxvyi

Re: How to center page designed in Edge

forums_noreply@adobe.com — Thu, 01 Aug 2013 18:11:37 GMT

resdesign wrote:

No, you need the buzz.js file.
Put the code in composition ready.
Put the play() code where needed.

What about "yepnope.js" do I need it too?

Thanks

Khalil

Re: How to center page designed in Edge

forums_noreply@adobe.com — Thu, 01 Aug 2013 17:19:08 GMT

No, you need the buzz.js file.

Put the code in composition ready.

Put the play() code where needed.

Re: How to center page designed in Edge

forums_noreply@adobe.com — Thu, 01 Aug 2013 17:17:10 GMT

Resort to the Search feature on the forum.

Darrell

Re: How to center page designed in Edge

forums_noreply@adobe.com — Thu, 01 Aug 2013 16:41:46 GMT

heathrowe wrote:

I hear music, in IE?

If using the buzz script there is an earlier thread here regarding that.

Darrell

Can I have the link for that thread please, Thank you

Re: How to center page designed in Edge

forums_noreply@adobe.com — Thu, 01 Aug 2013 17:07:53 GMT

resdesign wrote:

I load with yepnope in composition ready and then use the play code where needed. Use sound format for all browsers.
Example:
yepnope(
{
    nope:[
        'js/buzz.js',
     ],
    complete: init
}
);

function init() {

yourSound = new buzz.sound("media/yourSoundFileName", {formats: ["mp3", "ogg", "wav"],
                    loop: 'true'});

}

// play sound:
yourSound .play();

You can put the play() code where you need it. I have used it in symbols, main timeline, or events.

Thanks for your reply, shall I remove buzz file from the server and how to apply the code at Edge

Thanks

Re: How to center page designed in Edge

forums_noreply@adobe.com — Thu, 01 Aug 2013 16:26:53 GMT

I load with yepnope in composition ready and then use the play code where needed. Use sound format for all browsers.

Example:

yepnope(

{

nope:[

'js/buzz.js',

complete: init

}

);

function init() {

yourSound = new buzz.sound("media/yourSoundFileName", {formats: ["mp3", "ogg", "wav"],

loop: 'true'});

}

// play sound:

yourSound .play();

You can put the play() code where you need it. I have used it in symbols, main timeline, or events.

Re: How to center page designed in Edge

forums_noreply@adobe.com — Thu, 01 Aug 2013 16:24:45 GMT

I hear music, in IE?

If using the buzz script there is an earlier thread here regarding that.

Darrell

Re: How to center page designed in Edge

forums_noreply@adobe.com — Thu, 01 Aug 2013 16:17:01 GMT

Hi Darell, Thank you for your help, I made the image big as the big screen with no-repeat, here is my codes that works perfectly:

Center:

$("#Stage").css("margin","auto");

Full background image with no repeat:

$("body").css("background-image","url(images/background.jpg)","background-repeat","no-repe at");

Favicon:

$('#Stage').append('<link rel="icon" href="images/favicon.ico"type="image/x-icon"><link rel="shortcut icon" href="favicon.ico"type="image/vnd.microsoft.icon">');

and all works perfectly

But music is NOT working this is the code:

var mySound = new buzz.sound("sounds/myfile.mp3");

mySound.play()

//.fadeIn()

//.loop()

.bind( "timeupdate", function() {

var timer = buzz.toTimer( this.getTime() );

document.getElementById( "timer" ).innerHTML = timer;

});

here is the site link: http://www.khaleha3rbi.com/

Thanks you

Re: How to center page designed in Edge

forums_noreply@adobe.com — Thu, 01 Aug 2013 12:31:03 GMT

I would use the cover property, details here - http://www.w3schools.com/cssref/css3_pr_background-size.asp

So in your case try something like this:

$('html, body').css({

"background": "url(images//background.jpg) no-repeat center center fixed",

"-webkit-background-size": "cover",

"-moz-background-size": "cover",

"-o-background-size": "cover",

"background-size": "cover",

"filter": "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images//background.jpg', sizingMethod='scale')",

"-ms-filter": "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images//background.jpg', sizingMethod='scale')"

});

Darrell

Re: How to center page designed in Edge

forums_noreply@adobe.com — Thu, 01 Aug 2013 08:17:53 GMT

Thank you very mych Darell, YES, that's what I am looking for "body" tag, I already changed it,

One last thing, how to stop making it repeat and let it resize as the browser window.

Thank you very much again Darell