Scroll bar adaptable animation to all screen resolutions?

Hello

Sorry for my English, I'm Italian and use google translator.

I would like to ask a simple question and attach videos and files so as to be as clear as possible.

I create my site on a screen 1920 x 1080, and worked with the resolution, but then you try the site on a screen type 1440 x 900 lower, I have seen that animation fits well in a resolution of 1440 x 900.

I want to reach is that the bottom black bar is automatically displayed on the screen with lower resolutions.

And ' since yesterday I have try and try again, but I just can't get what I want. It is possible to do?

Can you give me a hand please? Thank you very much

Video demo of the animation perfect up to 1920 x 1080:

http://it.Tinypic.com/player.php?v=2mabti & s = 9 #. V3-bYGiLSUk

Video demo of the animation is not perfect at 1440 x 900:

http://it.Tinypic.com/player.php?v=2yy1g5e & s = 9 #. V3-bxGiLSUk

Muse of file:

http://www31.zippyshare.com/v/jbX5NK6n/file.html

This is not possible with standard tools of Muse. You must write custom CSS + JS

Tags: Adobe Muse

Similar Questions

  • Make website to adapt to all screen resolutions

    OK, first of all, I've been searching the forums and found a few questions about it, but honestly, I could not understand the response of those. So here it goes... once again...

    I created my website for a resolution of 1680 x 1050, but then I realized not evybody in my company could see the site properly. I did a quick search, discovered the minimum screen resolution of my peers (1024 x 768) and tried to resize the entire site to adapt to those. At the end of the day, I could adjust the width and height was impossible to adapt to 768, unless I started to cut content, I don't want to.

    I know there is a way to get all the screens, but I don't know where in the code I need to fix things.

    I have a DIV wrapper with a DIV, a left DIV, DIV right header and footer DIV inside. Do I have to set all? And if so, I address to? %?

    As you can see, I'm confused here. Here's my CSS. Cannot bind the site because it's on my intranet only.

    @charset "utf-8";
    {body
    margin-top: 10px;
    background-color: #000;
    margin-right: auto;
    left margin: auto;
    }


    {#wrapper}
    height: 850px;
    Width: 950px;
    margin-right: auto;
    left margin: auto;
    background-repeat: no-repeat;
    background-position: Center;
    background-image: url (.. / Images/bgdr660.jpg);
    }
    #header {}
    background-repeat: no-repeat;
    Clear: none;
    float: none;
    height: 203px;
    Width: 950px;
    background-image: none;
    position: relative;
    }
    {#sprymenu}
    height: 26px;
    Width: 950px;
    Color: #000;
    text-align: left;
    do-family: Calibri;
    font-size: 70%;
    vertical-align: middle;
    }

    {#leftDiv}
    Clear: none;
    float: left;
    height: 360px;
    Width: 190px;
    position: relative;
    text-decoration: none;
    }

    {#rightDiv}
    Clear: none;
    float: right;
    height: 420px;
    Width: 755px;
    position: relative;
    }

    #footer {}
    height: 60px banner;
    Width: 950px;
    Clear: both;
    position: relative;
    padding-bottom: 20px;
    }
    . {FooterImg}
    margin: auto;
    }

    a: link {}
    text-decoration: none;
    Color: #000;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    }
    a: visited {}
    Color: #000;
    text-decoration: none;
    }
    a: hover {}
    color: #454545;
    }
    a: active {}
    color: #666;
    }
    . {Cabecalho}
    do-family: Calibri;
    font size: 24 PX.
    make-weight: bold;
    text-align: center;
    color: #FFF;
    }
    {.pointer}
    cursor: pointer;
    text-align: justify;
    padding-right: 20px;
    do-family: Calibri;
    }
    {.answers}
    make-weight: bold;
    text-align: justify;
    padding-right: 20px;
    do-family: Calibri;
    }

    .admin {}
    do-family: Calibri;
    background-color: #EFEFEF;
    text-align: center;
    do-size: 16px;
    }
    . {Cabecalho2}
    do-family: Calibri;
    font size: 24 PX.
    make-weight: bold;
    text-align: center;
    Color: #000;
    }
    {#inner}
    overflow: auto;
    height: 420px;
    Width: 755px;
    }
    . {AP_Div}
    do-family: Calibri;
    font size: 24 PX.
    color: #676767;
    text-align: center;
    make-weight: bold;
    }
    . Note {}
    do-family: Calibri;
    font size: 28px;
    color: #900;
    }
    . {Of L'Escala
    do-family: Calibri;
    do-size: 18px;
    color: #900;
    text-align: center;
    }

    DevilUrd wrote:

    Thanks for your response!

    My main problem atm is on the height – width has already been authorized. And you set the values of % for width, but determined to fixed values for the height.

    If I don't put any value on the height and only to fix width based on percentages, it does not work...

    Or did I get it wrong?

    The height is ALWAYS determined by the content, that is why you should never specify a fixed container height unless it contains an element of height fixed as an image, video or an iframe, etc.

    What does not work if you remove the height values?

  • Adjustment of intro with movement to all screen resolutions!

    Hello!

    I would do an intro similar to that used in this site:

    http://www.melisa.gr/.  In other words, I want the logo appear first in the Center and then go to the left side of the screen for each screen resolution. How can I make a request for an object that will be always starts from the center of each screen resolution and ends on the left side of the screen for each screen resolution?

    Thank you!!!

    This is not true... "mc._width" is for AS2. "mc.width" is for AS3. If you use 'mc.width' in AS2, it will return undefined as the calculation will be false. Try to trace with mc.width, it should give undefined in AS2. Use mc._width.

    -------------------

    Ah I found the solution:

    Mx.transitions import. *;

    Import mx.transitions.easing. *;

    var nBrowserW:Number = Stage.width;

    var nBrowserH:Number = Stage.height;

    var nStageW:Number = 550;

    var nStageH:Number = 400;

    MC._x = (nStageW - mc._width) * 0.5;

    MC._y = (nStageH - mc._height) * 0.5;

    var nInitX:Number = nStageW * 0.5;

    var nFinalX:Number = mc._x - (nBrowserW * 0.5) + mc._width;

    var cLeftTween:Tween = new Tween (mc, "_x", Elastic.easeInOut, nInitX, nFinalX, true, 0.5);

    Just change the dimensions by default 550 and 400 to the dimensions of your document in case you do not use these default values.

  • How can I prevent the right vertical scroll bar to disappear?

    In one of the changes made to Windows during the past two years, the vertical right scroll bar, which was visible all the time, now turns off after a few seconds of inactivity.  I find it very annoying.  Normally, I place the cursor on the arrow towards the bottom of the scroll bar so I can click on it to move around the screen while I read it.  But since then the scroll bar disappears after a few seconds, I click and of course nothing happens.  I have to move the cursor to get the scroll to reappear/reactivate bar so I can use, then position it on the arrow down and click.  Boring, boring, boring.  Why they did it default for this is beyond me, since the scroll bar is non intrusive and barely perceptible.  Microsoft seems to be more concerned about the aesthetics of function.  I wish they reassess their values.  But I digress.  Is it possible to place the scroll bar so that it does not disappear?  Or, at the very least, set a timer so that it remains visible for more than a few seconds?

    In addition to using the keys arrow of your keyboard

    You might see this

    http://answers.Microsoft.com/en-us/IE/Forum/ie11-Windows_7/disappearing-scroll-bar-on-websites/c3b883c6-7C46-4749-97af-02ae4b2cef85

  • Make the size of the police according to different screen resolutions

    Hi all

    I'm developing an application that needs to run on the two devices OS 6 and 7. There are a number of devices that fall into that category, I need to standardize the sizes of police across all screen resolutions.

    A few messages in the support forum, I understand that I need to use UNITS_pt as the police unit in order to standardize the size of police across all resolutions.

    But my client gave me sizes of fonts to use in pixels. Should have sizes from photoshop. What I need now, is to convert the font size of the pixels into points. I created a method that you can find below, for this conversion, but I don't know if it will work or not. I need an expert advisor.

    public static Font getFontPlain(int fontSizeInPixels) {
            try {
                fontFamily = FontFamily.forName("Helvetica");
            } catch (ClassNotFoundException e) {
                Logger.blackBerryErrorLog("Error creating font", e);
            }
            int size = Ui.convertSize(fontSizeInPixels, Ui.UNITS_px, Ui.UNITS_pt);
            Font font = fontFamily.getFont(Font.PLAIN, size, Ui.UNITS_pt);
            return font;
        }
    

    Any help on this will be appreciated.

    Thank you much in advance.

    "Should have sizes from photoshop".

    Unfortunately, it's a potential problem.  I've been in this situation before, and the size of the pixel depends on the size of the image that the designer uses to work up the screenshots.

    I had a designer who has very well used 72 dpi in the development of its screenshots and therefore the size of the pixel corresponding points, a point is 1/72nd of an inch.  This could be the case here.  What device has been the designer develops for and what size have been specified for the various policies?

  • Horizontal scroll bar appear?

    How can I do a horizontal scroll bar appears so when the web page is resized contained custom moved around or get compacted? Example: http://www.techrepublic.com/ (thebrowser to resize and you will notice that after a certain amount of resizing of a horizontal scroll bar is displayed)

    All my width in my CSS values in percentages and when the page is narrowed the happy result is compact.

    Change your HTML code like this:

    Add

    just after the openingtag.

    Add

    just before the closingtag. In doing so, you adjust all the existing content in a DIV called "container".

    Now, CSS - replace your current code with this:

    @charset "utf-8";

    / * CSS document * /.

    {body

    margin: 0;

    padding: 0;

    }

    . Container {}

    margin: 0 auto;

    Width: 960px;

    }

    {.menublock}

    height: 50px;

    background-color: #CCC;

    overflow: hidden;

    position: relative;

    }

    {.windowblock}

    height: 50px;

    background-color: #3399FF;

    border-bottom: Insert;

    border-top: Insert;

    border-bottom-color: #999999;

    border-bottom-color: #FFFFFF;

    }

    {.bodyblock}

    height: 50px;

    height: 250px;

    background-color: #CCC;

    position: relative;

    }

    {#line1}

    float: left;

    Width: 240px;

    min-height: 250px;

    border-width: 3px;

    margin-top: 3px;

    }

    {#line2}

    float: left;

    margin-top: 0;

    Width: 480px;

    min-height: 250px;

    position: relative;

    }

    {#line3}

    float: left;

    Width: 240px;

    min-height: 250px;

    margin-top: 3px;

    }

    {#sectiongap}

    Width: 100%;

    }

    {#menu}

    margin-left: 30%;

    margin-top: 3%

    }

    #footer {}

    }

    {UL.horizontal}

    margin: 0;

    padding: 0;

    list-style-type: none;

    text-align: center;

    }

    UL.horizontal li {}

    Display: block;

    float: left;

    padding: 0 10px;

    }

    Give it a try.

  • When I list all PROGRAMS menu START, I can't see the third column because it is off the screen. So, how can I scroll to the third column, no scroll bar is present.

    hen I list all PROGRAMS menu START, I see the third column, because it is off the screen. So, how can I scroll to the third column, no scroll bar is present.

    Hello

    You did it changes on your computer before this problem?

    You try to increase the resolution of the screen and check if the problem persists.

    For more information, see these links: to change your screen resolution

    Change the resolution of your monitor

    Hope the helps of information.
    Please post back and we do know.

  • Display shows not everything on the screen. Must use the bottom scroll bar to view all.

    I have a HP G62-340US Notebook.   When I open Internet Explorer 9, not all content can be seen.  I have to use the scroll bar at the bottom to see the right side of the content.   I tried to set the resolution of the screen.    Any suggestions?

    Me DUMB color!  The Zoom in IE factor was set at 145%.   Well of COURSE the display would be larger than the area.

    I will gladly accept award "jerk of the Month".

  • Why can't I click on some parts of my screen only if you are using firefox. I can not use the upper part of my scroll bar, but can use the background. I cannot click on the top of all sites, but he can click on any part of the site.

    If you use firefox, I can't use my up arrow of the page or click on the upper part of the scroll bar to make it move. Can I use the middle and the bottom of the bar. Also, I can't click on some items that are on a certain part of a web page (upper part). When I use firefox to open my email the same thing. I can't click on the upper part of the page e-mail delete tab, check e-mail tab, etc. However, I can click on it when I use internet explore so I don't know if it of a firefox issue or not. Thank you

    Recently, the extension of the Yahoo! toolbar and the extension of Babylon have been reported to cause a problem like that. Disable or uninstall the modules.

       * https://support.mozilla.com/kb/Troubleshooting+extensions+and+themes
    
  • X 1163 projector shows smaller than the computer screen image and creates the horizontal scroll bar

    I just bought an Acer X 1163 projector for use in presentations. I like the brightness, size and features. I am disappointed to make a PowerPoint slideshow, you need to buy another remote, but it is an easy fix.

    Here's what's really about me!

    When I pull a Web site or other things on my laptop for the presentation, it has a horizontal scroll bar and does not fit it on the screen. I tried different settings and who are seeking an answer online, but can't find what I can do to get the image to display without a horizontal scroll bar.

    I'm almost beginning to panic that I bought this for a large presentation I have to give next week. I hope it's one of those stupid questions with an easy answer.

    Thanks in advance for your help.

    My techy boyfriend just called. Here is the solution. (It kills me when someone has a question asked and more later said: "never mind, I figured it" and never says how do to the next person to come.)

    The question seems to be in the computer resolution setting and how it automatically resets when plugging n the projector. To resolve this problem (at least in windows 7) follow these steps:

    Right click on the desktop

    Click on display

    Click on change display settings

    Select the 1366 x 768 resolution

    It shows exactly what I'm looking for now on my computer.

    Thank you for having a forum to ask in all cases

  • Screen resolution problem - is the bare min and there are no other options

    I've upgraded to Vista, a month or two ago and my screen resolution is the bare min and there are no other options better resolution. I tried to update the graphics card but it tells me that it is up-to-date.

    Update your video driver... try the following...

    If you have a portable computer... go to the support site for your computer manufacturer
    and the search for Compatible Vista video drivers updated.

    If you have a desktop computer... go to the website of your video adapter support
    manufacturer and find Compatible Vista video drivers updated.

    The following article can help you find the brand/model/driver version of
    your video card:

    Update Windows Vista graphics driver
    http://www.CGL.UCSF.edu/chimera/graphics/updatevista.html

    If you find a video updated driver... it would be a good idea to create a
    System restore point before you install it. Also be sure to follow all
    installation instructions that may be available on the download site.

    How to create a system restore point in Windows Vista
    http://www.Winhelponline.com/articles/139/1/

  • Cannot bar resolution move to set the screen resolution

    I just installed vista and everything was huge! I went screen resolution under Customize and there is no other options on the scroll bar expect I am the one on which is 640 X 480 at an average of 16-bit color, I tried to update the drivers for the card and the screen but its still the same, I also reinstalled vista but its still the same HELP!

    Go to the Web site of the manufacturer of your laptop computer-graphics/computer card > drivers and downloads Section > key in your model number > look for the latest Vista drivers > download/install them.

    If there is no graphics Vista drivers available for your model, nothing can be done about it.

    Then:

    http://Windows.Microsoft.com/en-AU/Windows-Vista/change-screen-resolution

    Change the screen resolution

    Screen resolution refers to the clarity of the text and images on your screen. At higher resolutions, items appear sharper. They appear also smaller, so more items adapted to the screen. At lower resolutions, fewer items adapted to the screen, but they are larger and easier to see. At very low resolutions, however, images may have serrated edges.

    See you soon.

    Mick Murphy - Microsoft partner

  • Adobe edge animation shows unwanted vertical scroll bar in firefox only

    someone has any idea how to lose a vertical scroll bar on a site where I built an advanced adobe reactive animation. on all other browsers the overflow: hidden works perfectly. only in firefox make a scroll bar appears. little help please. the site is http://www.drotardesign.com/dd/about.html

    d

    I doesn't seem to work if you apply too full: hidden in the object tag.
    It doesn't work if I add this attribute to the body of the animation.
    You can consider using an iframe that have scrollbars hidden instead of an object tag.

  • I have somehow added a splitter to my browser screen. When I open firefox there are 2 screens with separate scroll bars. I do not use the add on feature that allows the separation of the screen. I can't find a command to remove the 2nd screen.

    The left side of my browser's screen has a screen separate with its own scroll bar. I can use the cursor to draw this screen to halfway to the right. It has a separate web page as the main window. I can't find a command to remove it. I had a yahoo toolbar, I thought that may have been involved.

    You can open a Web site in the sidebar.

    Opening in the sidebar is the default value for the bookmarks created via a link or a button on a Web site.

    You can view the properties of a bookmark using the context menu in the side bar (Ctrl + B; Cmd + B on Mac).

    In the Bookmark Manager (Bookmarks > show all bookmarks) you can click on the button more in the lower details pane on the right.

    Make sure "Load this bookmark in the sidebar" is not selected.

  • top of trhe screen freezes and no way I can click on the links. If I can take down pulling up of the scroll bar and its operation. pulling the top link to deactivate it again.

    the screen below the tool bar does not work, say 1 to 1.5 inches wide. below the part everything works fine. A link at the bottom works fine but if I pull the scroll bar down and take the link up then the hand does not appear. Yet once, if I pull down the link below 1.5 inches high and then hand appears on the link. In all sites what is happening. I opened the same sites thru googlechrome. There's no problem. Help, please.

    The extension of the Yahoo! toolbar and the extension of Babylon have been reported because of this problem. Disable or uninstall the modules.

       * https://support.mozilla.com/kb/Troubleshooting+extensions+and+themes
    

Maybe you are looking for