Parallax scrolling not adjusting to different browser size, help?

Hello everyone,
I am putting together this parallax website, http://natashajackson.businesscatalyst.com/index.html and it works on my 15 in mac book, but does not adjust size for smaller or larger screens. I can't seem to make the timing for all the "scrolling effects" line up for all browser sizes.
I have watched many muse tutorials and have figured out how to avoid horizontal scrolling, but again, it only appears to be working on my 15 in book.
The below photo shows my layout properties. Any magical tips that I am missing? I look forward to your feedback!
Thank you

Hey manna9er I was able to figure out the 100% browser width and it turned out to be pretty simple. At first I was "Placing" my images into muse and scaling them to the width of browser, and it never was 100% width. I found that you cannot "Place" you must use the "Rectangle Tool" and create box the width of the browser, make sure that it is 100% browser width, the border line turns red and a tool tip informs you, as seen in image)
Next use the "Fill" option on your top menu bar-->select "Choose Image Background"--> upload image file-->scale to whatever size/style you want. (see image below)
For parallax go to Window-->scroll effects--> and play with Motion, Initial Motion, Key Point and Final Motion. Parallax takes some toying with to get desired effect.
Hope this helps

Similar Messages

Keeping layers overlapping in different browser sizes

I am having trouble finding a simple solution to a AP Div problem. I have set up a new file using Dreamweavers HTML page "1 column fixed, centred, header and footer". This is excellent as it keeps the design no matter which browser size my audience may be using. I now wish to add a new Div which will contain my links bar across the top overlapping my logo. When I do this the links bar layer does not move with the rest of the design as the browser size changes.
So basically how can I maintain any new layers I add to this page to keep them moving in line with the headers, footers and rest of the Divs as the browser resolution/size changes?
Help appreciated!

If you do keep on with the use of AP divs then I think my earlier comment is how I see the solution to what throws a lot of people:
martcol wrote:
If you do use position absolute you should think about using position:relative on the containing element which will then become the reference for the positioned element.
An absolutely postitioned element is always positioned relative to something. If a containing element is not set as position:relative the absolutely positioned element's reference becomes the browser window. This means that the absolutely positioned element is positioned relative to something that can be moved around (that's my paraphrase).
Likewise, absolutely positioned elements don't seem like anything else that isn't absolutely positioned or fixed. So, if you use AP divs as a crucial part of the structure of your page you need to check carefully what might happen if the user increases the text size in the browser.
Best of luck
Martin

Parallax scrolling not functioning at all

why?

Hello,
Could you please provide us a screenshot of parallax settings that you have used?
And please provide us a link where we can check your uploaded site on which it is not working.
Regards,
Sachin

Jnlp does not load on different machine: Please help

Hi
I have a machine x where I've installed and am running tomcat 4.1.24 server. I installed my war file with the jnlp in the right directory and my jnlp loads and works fine on machine x.
However when I try to lanch jnlp from different machine say Y ( I have webstart installed here too) .. via my broswer ...it launches webstart but gives a
download error - connection refused error. cannot download jnlp.
I tried adding the mime type to the web.xml of my application too.
Here is my jnlp
<?xml version="1.0" encoding="utf-8"?>
<jnlp spec="1.0+" codebase="http://localhost:8080/fileviewer" href="index.jnlp">
<information>
<title>File Viewer</title>
<vendor>IBM developerWorks</vendor>
<homepage href="index.html"/>
<description>File Viewer</description>
<description kind="short">File Viewer</description>
</information>
<security>
<all-permissions/>
</security>
<resources>
<j2se version="1.4"/>
<jar href="fileviewer.jar"/>
<nativelib href="swt-lib.jar"/>
</resources>
<resources os="Windows">
     <jar href="swt-win32.jar"/>
</resources>
<resources os="Linux">
     <jar href="swt-linux.jar"/>
     <jar href="swt-pi.jar"/>
</resources>
<application-desc main-class="org.eclipse.swt.examples.fileviewer.FileViewer"/>
</jnlp>

People...dont bother I fixed the problem
I just had to change the localhost to point to my host name instead in the jnlp.

Different Page sizes in the same Framemaker Document

Is there any way in Framemaker to create different page sizes ( say A4 & A3) simultaneously, either as body pages or master pages, in a long, multi-page document ? The long pages (A3 size) will be folded and tucked inside to fit the width of the A4 size page. Is there something obvious that I am missing ?
-appu g

Ian,
Whether the printer adjusts to different page sizes automatically is a function of the printer, not Frame. A number of printers that have feeds for different size sheets will automatically adjust for you, provided you select "automatic" for your page size preference.
If the PDF is for print, then I wouldn't worry about it either -- set the file up to print with crop marks and print it on your larger sheet size.
If the PDF is for online customer viewing, I'd probably do the same thing but without crop marks and either:
* Use Acrobat to crop the small pages out of the larger page size. Although you can add different size pages here and there as required, that's more fiddly and time consuming than cropping sets of pages in batch mode.
or
* let the reader use their copy of Acrobat Reader to set the magnification setting -- the default setting is "automatic."
Art

Is there a way to get a different browser on my iPad AND do it through a sync form my MacBook

I need a different browser on my iPad so it will go through my firewall, I use Sonic Wall.........I can't get on the Internet with the iPad to download anything so I would have to download something to my MacBook and sync to the iPad, sounds like a nightmare right?? Any suggestions.

No really, just use iTunes to find another browser in the App Store for the iPadm, and then sync it over.
With that said, I{m not sure a different browser is going to do any good. Perhaps your firewall can be configured to let the iPad through?

Page not adjusting to browser size

I've had to edit this as my problem has slightly changed.
The website I am working on is here
Whenever I adjust the size of my browser window the content (the box in the middle) stays fixed and won't adjust to the broswer size.
I know it's possible to make this work as I've seen it on other Muse sites such as site of the day websites like this one
http://snovaluation.com/How can I make it adjust its size like this websites content?
Please note, I am NOT GOOD WITH CODE. I am really a graphic designer and in no ways a webdesigner, using Muse was meant to be an easy option for me but so far it's proving rather difficult
Any help is REALLY appreciated
Thank you!

Your page is already behaving the same as the example provided. The background image is resizing to fill the browser window size and the page width is fixed.
Your page width appears to be wider that is commonly recommended. There are still a significant number of website visitors on 1280 pixel wide displays, so a 1600 pixel wide page will force them to do horizontal scrolling. You might want to consider a narrower page width. (Also many users with large display will still be working with browser windows smaller than the full width of the display, so a value smaller than 1600 pixels is preferred. Perhaps 1440 max.)
It appears the visual appearance of your page is positioned offset ~260 pixels from the left edge of the page as defined in Muse design view? Perhaps a left margin amount? You probably don't want margins of more than 20 or 30 pixels.

Parallax Scrolls differently on diff browser widths

I spent lots of time setting up scrolling. (Select "Menu" to see scroll) And it works great when I preview in Browser. BUT the black bar doesn't line up properly (as it is in the screenshot) if the width of the browser is different. Is it possible for the black bar and menu text align like this on different size browser widths?
here's the temp link to the site
http://cafemaddalena.businesscatalyst.com/index.html
Thanks.

Vikas:
Sorry, I realized I forgot to post a thank you for your quick response. I implemented your solution straight away. It worked perfectly, and helped me understand parallax scrolling a bit more.
The Muse forum is awesome! You and other staff are so quick to post replies. This really helps mitigate the frustration that occurs when you are on a deadline and have a glitch you can't work out. I hope you'll send a link to this post to your manager, so they can be reminded of what a great job you and the other Muse forum team are doing!
Alas, I wish there were staff experts regularly helping folks in the Edge forum. I feel we've been forgotten there... :-(

Parallax scrolling for different screens

Hi there...
Does anybody know how to deal with different screen sizes and parallax scrolling?
It know the 100% width option so that is not the issue.....the issue is the height!!
Laptop versus desktop etc..
So what is the best height to use so it will fit all screen sizes?
Thanks, Cor

Hai Daniel,
I faced the same problem with the overflow controller.
Then depending on the number of records that I am showing in the table I have adjusted the size of the overflow controller in pixels.
my code looks some thing like this.
lv_oflc_height = 53 + ( lv_actual_visible_rows * 21 ).
if the filter is on 20 more pixels added to the height.
<xhtmlb:overflowContainer id     = "OFLC_RCN_HDR"
                            height = "<%= lv_oflc_height %>px"
                            mode   = "SCROLL" >
and this worked for some standard resolutions with out big difference.
Best Regards,
Venkat.

Parallax Scrolling and Browser Magnification

This is probably an unresolvable issue at this point, but it seems one of the BIG drawbacks to using Parallax Scrolling is that it only works as planned if the user of the site is viewing it at 100% Magnification. Any change up or down in magnification results in a different set of parameters for final motion, and if you're using it hoping that the final location of the moving object aligns with another fixed object in the overall design in some fashion, you're in for a big disappointment, and an embarrassing result if you're a designer. I'm hoping that there is some way in the future that the writers of this code will please include whatever math is necessary to compensate for changing browser magnification.

I realised the problem that i was having...thanks so much. I will explain for the help of others. Avoid putting the anchor in a "Composition" element. This i did inadvertantly since i had many layers. If you put it in one of them the smoothe scrolling will not work. This possibly holds true for grouped objects. I will also post the site to show that i have finally gotten it working. Thanks Zak and all the parties that showed kindness in answering me.
Best regards
http://www.raiora.com/index.html

Using parallax scrolling on a browser fill shape?

Hi everyone,
Is it possible to apply parallax scrolling onto a shape that is extended to horizontally fill up the browser? I'm creating a single page scroll website and a want a shape to cover up a certain fraction of the bottom of the browser (I can't use pin because then the shape will move with the bottom of the browser depending on the size of the window.) Parallax works fine on the shape until I extend it to the browser borders and then parallax grays out. Will this be supported in a future update? Is there another way for me to achieve this effect? Thanks!
Jackie

From Muse Release Notes - http://helpx.adobe.com/muse/release-note/adobe-muse-release-notes.html.
Note Scroll Motion Effects are not available for 100% browser width objects, pinned objects, items that are inline within text, items within a group or items within a widget.
You would also find a similar note in the information tooltip for Scroll Motion under the Effects panel in the Control strip. Please feel free to submit it as a feature request in our Ideas section.
Thanks,
Vinayak

Automatic scale of Flash movie to fit different screen/browser sizes

Hi guys,
I am a mid level Flash user. I have a online portfolio site which I have had running for around 4 years.
The site at the moment is in its 4th incarnation as I keep growing tired of the layout and design and keep striving to improve it visually. The previous designs have always been at the standard 800x600px or slightly bigger. So when viewed on the majority of different screen sizes and browsers the site was always fully visible at 100%.
For the latest redesign I've opted for a much larger site size of 1024x768px. This is obviously alot clearer for the user and looks great when viewed on a 19" monitor and above. I for example have a 27" iMac so the site in my opinion looks great.
The problem I have is when the site is viewed on a smaller screen 17" and below, laptops etc. Due to the size of my Flash site if I view it on a laptop screen the side and bottom scroll bars obviously appear on the browser. I want to know if there is anyway that I can publish the Flash site so that whenever the site is viewed on whatever sized screen or browser it is always seen at 100% without scrollbars.
I have played about with the publish settings but can't seem to find a way to do this. I have also downloaded SWFFit (Flash Fit) but i'm not sure whether this will do the trick?
My site can be viewed at:
www.nineteeneightyone.co.uk
Any help or advice would be greatly appreciated.
Thanks in advance.

I was a little confused when you mentioned wanting to "scale" the site and then you mentioned that "the site was always fully visible at 100%".
Now I understand that when you say 100%, you simply meant that all of the site was visible at the same time... no scrolling needed.
"whenever the site is viewed on whatever sized screen or browser it is always seen at 100% without scrollbars".
By this I assume you mean that the site is fully visible? not that you want to view the site at !00%... correct?
Typically when discussing Flash scaling, 100% mean 100% of the browser window, and has nothing to do with how much of the site is visible inside that window.
When looking at Flash scaling, there are a number of things to consider, width, height, aspect ratio, and the use/no use of scrollbars.
Using a size of 1024 X 768 is a good example of a size that will require scrollbars or downscaling in order to display in a Web browser on a 1024 X 768 monitor. A 1024 X 768 will only display about 1000px or less in width and of course with the Web browser address bars etc, a height of 600 or so would be more realistic. So by default, the size requires both horizontal and vert scroll bars when viewed on a 1024 X 768 monitor.
So what would be required to display the entire site without scrollbars? Well in this case, since only 600 px in height are available, the height has to be downscaled about 78% of the original height... so to maintain the same aspect ratio (the ratio of width to height), then the width was also be downscaled to about 78% or original or about 800 px wide... OK that's fine, but because the monitor is about 1000px wide, there will now be about 100 px unused space on the right and the left.
By default, Flash likes to maintain that aspect ratio, so that round things stay round and square things stay square. It just means that as you increase or decrease width or height, the corresponding dimension will also change.. decrease height.. and width decreases also.
Here is an old post that illustrates Flash scaling and how aspect ratio can be maintained or distorted:
Here are examples of different scaling parameters available in the Publish settings. You can also add these parameters directly in the html (<param name="scale" value="noscale"). All the examples replace the actual Flash dimensions with 100% for both width and height (width="100%" height="100%"). These examples use the old <object> and <embed> to illustrate the different ways to scale Flash. Once you understand how it works I’d recommend that you use swfobject to place the Flash in your final project.
View the source code for each page to see the full code.
http://www.cidigitalmedia.com/tutorials/scale/exact_fit.html
"exactFit" scales the file to fit exactly within the confines of the screen, irregardless if the movie becomes consequently distorted. The original aspect ratio is not maintained. So round things are not round and squares are not square.
http://www.cidigitalmedia.com/tutorials/scale/noScale.html
"noScale" is the default setting, and causes the movie to be displayed at the originally designed dimensions.
http://www.cidigitalmedia.com/tutorials/scale/no_border.html
"noBorder" causes the movie to be scaled to what ever dimensions are needed to have no border surrounding the movie within the player, which consequently could result in some of the movie being cut off from view. In other words, the movie will maintain the original aspect ratio and will fill the screen completely. But if the movie has to be streched wider to fill both sides of the screen, it will also stretch taller, but then some of the top and the bottom of the movie may be cut off from view.
http://www.cidigitalmedia.com/tutorials/scale/show_all.html
"showAll" scales the movie to the size of the screen (which could cause pixelation if the file contains raster information), the difference between showAll and exactFit is that showAll mantains initial movie size proportions. Because it maintains the original aspect ratio, there can be space to the sides or the top and bottom. But everything always shows and they are not distorted. But notice the photo in the center, it becomes pixilated at larger screen resolutions.
The trickiest part of trying to go full screen is that it’s difficult to make the Flash wider without making it taller also, that is, to maintain the correct proportions or aspect ratio of everything on the stage. These methods are just simple scaling accomplished with html. There are also methods to dynamically scale the stage and it’s elements using Actionscript… but that’s a much more complex undertaking.
Best wishes,
Eye for Video
www.cidigitalmedia.com
Best wishes,
Adninjastrator

Parallax Scrolling vertically not working right

My muse parallax scrolling page will not scroll vertically down the center. WHen I preview it, the page shifts to the left then scrolls down. What am I doing worng? Im using Adobe Muse CC.

Are you getting a scrollbar at the bottom of your browser when your browser is maximized? If yes, there is likely some content (not visible perhaps) placed bit to far to the right on the page.
Look for the same in Muse in Design View and get rid of the same.
Share a link to the page with this effect to check if you can't locate the element causing the shift.
Cheers,
Vikas

How to get header to stay centered on different browser window sizes

Hi,
Is there a way to change the header design so it stays
centered and moves to accommodate different browser window sizes?
Right now, it stays where it is, and everything else moves and
stays centered as window size changes. I'm a new Dreamweaver user.
the url is
http://ellifolks.com/
I tried changing the template I made for the site, and was
able to delete some things, but it won't let me add things now. I
can't undo to where it started, either. I tried doing a second
template. Now I can't save anything -- I get a message saying
"sharing issues".
Thank you.

Combining absolutely positioned elements with centering
tables (as you have)
accounts for about 20% of the posts on this forum. It's
commonly done
because it seems so easy. This is one of the penalties you
pay for taking
that easy road.
The answer to your question is yes, you can do this.
1. Make this image the page background -
http://ellifolks.com/images/ellifolks_web_header_repeat.gif
- and use CSS to
give it a style of background-repeat:repeat-x.
2. Place your assembled header within a STATIC div (i.e., NOT
a layer) at
the top of the page by changing this -
<div id="apDiv1"><img
src="images/dots_header_left.gif" width="175"
height="192" alt="dots left" /></div>
<div id="apDiv2">
<div align="center"><img
src="images/header_animals_logo.gif" width="759"
height="195" alt="ellifolks logo" /></div>
</div>
<div id="apDiv3"><img
src="images/dots_header_right.gif" alt="dots right"
width="175" height="192" /></div>
to this -
<div id="header"><img
src="images/dots_header_left.gif" width="175"
height="192" alt="dots left" /><img
src="images/header_animals_logo.gif"
width="759" height="195" alt="ellifolks logo" /><img
src="images/dots_header_right.gif" alt="dots right"
width="175" height="192"
/></div>
3. Add this to your CSS -
#header { width:1109px; margin:0 auto; }
That should do the trick.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"zinnia3" <[email protected]> wrote in
message
news:[email protected]...
> Hi,
>
> Is there a way to change the header design so it stays
centered and moves
> to
> accommodate different browser window sizes? Right now,
it stays where it
> is,
> and everything else moves and stays centered as window
size changes. I'm
> a
> new Dreamweaver user. the url is
http://ellifolks.com/
>
> I tried changing the template I made for the site, and
was able to delete
> some
> things, but it won't let me add things now. I can't undo
to where it
> started,
> either. I tried doing a second template. Now I can't
save anything -- I
> get a
> message saying "sharing issues".
>
> Thank you.
>
>

Parallax scrolling still not working on IPad

Did a complex Parallax scrolling Page, to be integrated in a IFrame-Page for IPad. Works fine on Desktop-Browsers, moderately on Android-Tablets but causes a Browser-Crash on IPad?
Could someone help me, I´m not so fit in Code...
Thank´s

I'd like to know this too, the other 2 Muse examples http://parallaxfx.businesscatalyst.com and http://parallaxisfun.businesscatalyst.com really don't work well either, so to reiterate; is this a bug of Muse at the moment, or is parallax realy just intended for the desktop? (Can't really see that though)
I fantastic example of smoothe parallax scroll is www.slaveryfootprint.org, works perfectly on the iPad, so it's possible!
Thanks guys, your doing terrific work, just hope this fantastic feature can be ironed out before release.
Cheers
Alistair

Parallax scrolling not adjusting to different browser size, help?

Similar Messages

Maybe you are looking for