"Full Width" Slideshow with overflow hidden?

Hello,
I am using the slideshow widget with a huge width at the top of my page, underneath follows the content
with 842px width. Side width and column width is also set to 842px.
The Site aligns horizontally nicely. I want the slideshow to be cut off left and right by the browser width.
100% browser width, hidden overflow.
On the left side, the slideshow is "cut off" nicely by the browser, no scrolling to the left
is possible.
On the right side, one can scroll all the way over to the right corner of the "oversized" slideshow.
Is it possible to set the slideshow to 100% of the browser width and then hide the overflow-x? I did not even find
a way to do that manually, browsing though the html export's code. The most important <div> is generated in the depth of the widget's .js.
Or is there any other way to prevent the user from scrolling to the right? (hiding the bar is not enough nowadays, being trackpads all over)
Can I send the muse file to you?
Thank you very much in advance!!
Mike

FYI, if you want to keep the vertical scrolling capabilities, you should actually add:
overflow-y: scroll;
overflow-x: hidden;
instead of just overflow: hidden;
BUT thank you so much for finally saying this can be done in the header section of Page properties. I've been trying to create a "full width" effect for ages!!

Similar Messages

Full-width slideshow glitching on mobile

I'm having some issues integrating full-width slideshows into my website. They look amazing on a desktop, but not so much on a phone. See it here: birdwalkpress.com
When viewing the slideshow on a phone, there are a couple of intermittent issues.
1. When you zoom in, the slideshow jumps to the left. It doesn't reset when you zoom out either- it's (usually) stuck off the left edge of the screen.
2. You often can't scroll the page if you grab the slideshow, only if you grab other elements on the page.
I'm assuming this is a bug. Can anyone from adobe shed some light on this?

Hi
I see the issue you have reported, could you please send your muse file as an attachment to us so that we may further look into the issue.
Please send your muse file to : [email protected] with subject line attention: Anshul
PS : Please make sure to include link to this forum post in your email as reference.

Full screen slideshow with 2 photos

Hi,
I would like to know how to create a full sceen slideshow with two clikable photo inside, like this website : http://www.eturaweddings.com
Thanks for your help
David

Hi David
This would be a bit tricky as you have to use a fullscreen widget , accordion and tooltip or any other composition inside accordion or you can use different pages to render similar effect.
So for example
- Insert fullscreen widget
- Insert Accordion with page width ( Use same image which is used for fullscreen )
- Insert a tooltip where the trigger would be half size of target container and setup the action on mouse click ( you have adjust the trigger and target in layers panel )
Sorry but that would be the workaround , I know a bit lengthy one.
Or you can create separate pages where you can use fullscreen widget for different pages using same images.
Additionally you can try to use slideshows in Muse exchange library :
http://muse.adobe.com/exchange
Thanks,
Sanjit

Full-Width slideshow appears fine in editing stage but browser preview shifts the slideshow to the left?

My problem is exactly as described from this unanswered question a couple weeks ago: slideshow within composition widget - 100%width image causes bug
I have a full width slideshow that is set to fill the browser but when previewed the page shifts the slideshow to the left. Upon a tiny 1px browser resize the slideshow will then snap back to full size and then work as intended. I have had this issue before and have no idea how to remove this invisible padding that must be occurring...

So here is a shot of what the gap looks like. I am not quite sure what you mean by setting the page resolution with 100%. I clicked the "full-width" button.. I should also mention that I have scroll effects on in the slideshow. Though no anchor points on the page means no way for the page to shift...

Scalable/full-width slideshows in Muse

I am interested in creating a full-width slideshow in Muse, much like what is being employed on this website http://lafayetteny.com/
Previous threads from last year say it isn't possible - has this changed since?

Hello,
Check these related threads that explain how to create full width slideshows:
http://forums.adobe.com/thread/1213057
http://forums.adobe.com/message/5407836#5407836
http://forums.adobe.com/message/5615685#5615685
Hope this helps.
Cheers
Parikshit

How can I create an adaptable full-width site with sliding parallax panel?

Hi guys!
I have to create a web site with a full-width resolution, adaptable with any monitor and resolution using some panels that moves using the parallax scroll-motion with a sliding effects.
For example I nedd a site like "collecdiv.com" that works with the same effects and with an adaptable full-widht size page.
Here's some screen I take of my site with a 22" 1920x1080 resolution and a 15" 1280x1024.
The 4 tab I want to see in full width and in scroll motion parallax: four with a resolution of 22" and the other four with a resolution of 15" (the screen are made with paint to let you see what is the problem)
In the first tab there's a slideshow widget with some photo, in the other tabs there's a rectangular form with an image fill... I have to see the same layout that I see in my 22" monitor, in other smaller or bigger monitor (like 15") just like in the "collecdiv.com" website... The Dimension of my muse file is 960px width
How can i resolve the problem? How can I fix the screen so anyone else can see my site without problem and with all the resolution?
Who can help me? PLEASE
Thanks in advice
Francesco
P.S.: an advise... check the site "www.collecdiv.com" to see what I nedd

I'm adding this screenshot so you can understand the problem... The 4 tab I want to see in full width and in scroll motion parallax: four with a resolution of 22" and the other four with a resolution of 15" (the screen are made with paint to let you see what is the problem)
In the first tab there's a slideshow widget with some photo, in the other tabs there's a rectangular form with an image fill... I have to see the same layout that I see in my 22" monitor, in other smaller or bigger monitor (like 15") just like in the "collecdiv.com" website... The Dimension of my muse file is 960px width
Pleas help me

Full width background with header and float

I have been upgrading a web page to HTML5. I would like to place a PayPal button on the right side of the screen inline with a header. I am almost there. See the "FreeAXP Support" line at http://home.earthlink.net/~msi1/FreeAXP_HTML5.html.
What's missing is the background. I would like it to extend across the entire line, as it does on the Legacy Hardware Virtualization line above and the FreeAXP Links line below.
Suggestions?
Thanks!

brb1 wrote:
I have been upgrading a web page to HTML5. I would like to place a PayPal button on the right side of the screen inline with a header. I am almost there. See the "FreeAXP Support" line at http://home.earthlink.net/~msi1/FreeAXP_HTML5.html.
What's missing is the background. I would like it to extend across the entire line, as it does on the Legacy Hardware Virtualization line above and the FreeAXP Links line below.
Suggestions?
Thanks!
Because the elements are displayed inline especially the h2, it is automatically shrunk to fit the contents of the element. Therefore, as it stands, you won't be able to extend it unless you insert a width of 97% to that specific h2.
However, there is another way to do it.   You could wrap the both items in a <div id="special"> </div> so that it looks like this:
<div id="special" style="background-color: #F5F4FA">
<h2 id="Support" style="display: inline;">FreeAXP Support</h2>
                <form class="PayPal-h2" style="display: inline; float: right;" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
                    <input type="hidden" name="cmd" value="_s-xclick"/>
                    <input type="hidden" name="hosted_button_id" value="BK4Y2PTKPRMK2"/>
                    <input type="image" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_SM.gif"
                        style="height:15px; padding-top:3px;" alt="PayPal - The safer, easier way to pay online!"/>
                    </form>
</div>
HTH

Full screen slideshows with music

How do I publish slideshows that can be displayed full screen w/ music? I've read through some posts that seem to allude that this can be done w/iweb + iphoto, but after much trial and error I can't get it to work.
An example of what I'm shooting for is what I'm able to do over at phanfare.com, such as with this album:
http://public.phanfare.com/slideshow.aspx?username=public&album_id=281790
Really, if I could just get my iPhoto slideshows to display through iweb it would be great. That way you get ken burns, music, full screen, etc.
What I've discovered is that you can create your iphoto slide show and export it as a quicktime movie for posting, but the quality *****. Contrary to other posts, you apparently can not select to share a slideshow from within iphoto to iweb since the pages are grayed out in the options. The standard iweb slideshows from the album pages don't have music and aren't capable of full screen viewing.
I'm a phanfare subscriber and love their slideshows but they are making some big changes in the service next year and I'm looking for alternative ways of sharing slideshows- but I gotta have full screen and custom music. I'd love to use my .mac account since I already pay for it.

QuickTime Media Link is very simple. A tiny text based file that holds special settings for playback and is viewed using the QuickTime Player (not a browser plug-in). It will always download to the computer when the link is clicked. They measure in bytes (not MB's like your actual file).
You can make them with TextEdit and save them using the .qtl file extension. The syntax:
<?xml version="1.0"?>
<?quicktime type="application/x-quicktime-media-link"?>
<embed
autoplay="true"
controller="false"
fullscreen="full"
loop="true"
src="entire URL path to the file.extension"
Create the QuickTime file with iPhoto or any other application and upload it to your server. iDisk users could use the Movies folder. Other server users may want to make a new folder to store the media outside of their regular pages.
Once uploaded you need to use the complete URL in the .xml text file. Test that it works by opening it directly in QuickTime Player or a browser window.
Make your "plain text" file using the example code above. Substitute your URL for the src="entire URL path to the file.extension". You can have the movie "loop" (or not), play at "full" screen (or other sizes) and many other options.
Major advantage to this method is you do not need to create a huge file sized QuickTime movie. A 640X480 QuickTime file in H.264 video codec format and AAC audio is all you need for full screen playback.
In iWeb you need only use the "Link to File" to add this .qtl file to your page. One of mine as an example:
http://homepage.mac.com/kkirkster/LemonTrees/LemonTree.qtl

Full legend in image slideshow full width

Hi Everyone,
I can't get a legend full width with a background color in the image full width ( Slideshow ) , could you help me please ?
Thanks
Message was edited by: zeek zeek

@iamDK,
Thanks for the response. I am familiar with Pinning and Slideshow Widgets and have been using Muse since it's inception, what I don't understand after watching one of the videos in which Terry White mentions FullScreen or Browser Width using the Slideshow widget and as Jason Bibby at the top also mentions, I have not had any success using any of the SS Widgets again to acheive this effect. Pinning the SS Widget to the top of the Browser does just that and does not stretch images within it to fill the Browser Width even if you get inside the widget to expand an image so that it snaps to the edge of the Browser still does not do it regardless of weather its pinned or not.
I've had to jump into DW to get this done - in combination to using Fluid Grid, which I had rather not but so far so good, at least its responsive and not having to create twice in the case of Muse. I love Muse for its simplicity, being able to whip up pretty much any design in no time is sweet, but having a SS that stretches Browser width is a common trend and I'd like to see it integrated into Muse and if it can be done now as the video shows then how?
If you know how to do this in Muse could you please show us how?
Kind regards,
Kelvin

Screen wide slideshow with flexible page width?

I managed to place images that adjust to any browser width that are full screen wide, now I would like to know if I can achieve the same but with a couple of images into a slide show.
I don't mean a full screen slideshow only about 350 px height in the middle of the page.

i've been trying to find out if this is possible too. my only thought is for now until they have full width slideshows that you would have to create a gif that changed the photos for you. i haven't tried it yet because i was hoping to find a better answer but i think that's the only way to accomplish this currently

I think that overflow: hidden; interferes with Browser Zooming

I had a related thread about converting a site from px to em. The link is at the bottom of this page.
Now I think I've had a reasonable outcome with my px to em conversion but there is a problem.
donfaulkner.co.uk
When you zoom in the browser beyond the limits of the screen some of the content gets cut off by the browser window. It's obvious when you scroll right after zooming.
I think that it must be to do with overflow:hidden.
At the bottom of the page is a row of thumbs that have a mouseover image swap. I removed overflow: hidden from that containter and the rollover stopped working and the space between the alternative navigation at the very bottom of the page closed up.
I would just like to know a bit more about what's going on and the relationship between overflow: hidden and browser zoom.
Thanks
Martin
http://forums.adobe.com/thread/572207?tstart=0

Try to rename the cert8.db file in the Firefox profile folder to cert8.db.old or delete the cert8.db file to remove intermediate certificates that Firefox has stored.
If that helped to solve the problem then you can remove the renamed cert8.db.old file.<br />
Otherwise you can rename (or copy) the cert8.db.old file to cert8.db to restore the previous intermediate certificates.<br />
Firefox will automatically store intermediate certificates when you visit websites that send such a certificate.

Full Width Composition

I know you can do a full width slideshow now, but that is not what I'm looking for.
I want the ability to have a button that makes a hidden full width object appear. Currently I don't know of a way to accomplish this with any of the default widgets in muse.
Anyone know of a workaround?
Thanks.

Can I manually set Targets and Triggers?
Otherwise I can't make the Target Element 100% Full Width - It defaults to the max page page area, not 100% full screen width.
I think I know how to use compositions, but I just can't figure out how to set the Target to 100% page width once the trigger has been activated.

DW bug? Not clearing floats via overflow:hidden

OK so I think I found a bug in Dreamweaver CS3's Design View.
I have been using an alternative technique to clear floats using
overflow:hidden. It's not a new technique but it is very clean. You
can read about it here:
http://www.quirksmode.org/css/clearing.html
I believe the technique is valid, standards-compliant and
rendered by all modern browsers. What happens in DW is that the
floats are not cleared, and the containing box collapses. Here's
some very basic code to test it:

It's a well known flaw in CS3 and earlier Design view. It's
fixed in CS4.
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
==================
"sly one" <[email protected]> wrote in
message
news:g5ip1q$90r$[email protected]..
> OK so I think I found a bug in Dreamweaver's Design
View. I have been
> using an
> alternative technique to clear floats using
overflow:hidden. It's not a
> new
> technique but it is very clean. You can read about it
here:
>
http://www.quirksmode.org/css/clearing.html
> I believe the technique is valid, standards-compliant
and rendered by all
> modern browsers. What happens in DW is that the floats
are not cleared,
> and the
> containing box collapses. Here's some very basic code to
test it:
>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
> "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="
http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
> <title>Clear Floats with Overflow
Hidden</title>
> <style type="text/css">
> 
> </style></head>
>
> <body>
>
> <div class="container" style="overflow: hidden;
width: 100%">
> <div class="left">
> <p>The left column.</p>
> <p>The left column.</p>
> <p>The left column.</p>
>
> <p>The left column.</p>
> </div>
> <div class="right">
> <p>The right column.</p>
> <p>The right column.</p>
> <p>The right column.</p>
> </div>
>
> </div>
>
> </body>
> </html>
>

Overflow hidden not working

Hey,
I'm in need of disabling scroll on body, and enabling it on div that appears on top.
I'm setting on body overflow: hidden;
and on div that show on top overflow: auto;
it works in all major mobile browsers, but in firefox it does not.
I've addded an image which represents my problem
black frame is viewport
red box is body with overflow:hidden
cyan box is div with overflow:auto
here's jsfiddle with an example: http://jsfiddle.net/gwhkLnbu/1/
on firefox mobile you can scroll the red div, but you cant do it on any other browser

''adwil [[#answer-710932|said]]''
<blockquote>
Hey,
Right now my site is working with something like this in CSS:
html.noscroll, body.noscroll {
overflow: hidden;
you have to add noscroll class to both body and html then it does basically same thing as overflow hidden just on body in other browsers
</blockquote>
Thanks. That doesn't solve my problem though. I would like to scroll on all the pages, as it is necessary. I just don't want an excessive amount of space under my content in firefox .

100% width slideshow issue

i've created a full-width slideshow inside of a composition that is also 100% of the page width. when the browser window is re-sized, the page develops a wide margin next to the images.
if you go to http://blipdapp.com/ and click on the "about" link at the bottom, then resize the browser window and select one of the other tabs (connect, create or share), you'll see the problem.
the only way to correct the issue seems to be refreshing the browser. does anyone know of a way to fix this?

Hi, please see the below thread link for a workaround.
Re: slideshow within composition widget - 100%width image causes bug
Also, please vote on the idea to add 100% width support to the composition widget so that the Adobe Muse team will hopefully fix this soon.
100% width composition widget

"Full Width" Slideshow with overflow hidden?

Similar Messages

Maybe you are looking for