18 Replies Latest reply on Jun 19, 2017 11:21 PM by garyw43910326

    Responsive rectangle to cover half of browser area

    garyw43910326

      I have a photo on the screen/page. I want the entire right hand side of the screen from the centre to be clickable. When it is clicked the next photo page will load. I want the entire left hand side of the screen to also be clickable but when it is clicked the previous page/photo will load. For whatever reason I'm finding it impossible to achieve this. The photo itself is fully responsive (v and h). The page needs, and has, no scrolling, and this should be the case after the two clickable areas are established.

       

      I've thus far tried this with two separate rectangles. I tried pinning them, grouping them, stretching them over (and beyond) the page area, yet the only thing I've achieved is a strong urge to poke myself in the eye with a screwdriver.

       

      (To try and make this easier to achieve I filled the rectangles with different colours at 50 % opacity to I can see where they are.)

       

      Please help! Thanks.

        • 1. Re: Responsive rectangle to cover half of browser area
          Ussnorway Adobe Community Professional

          sounds like you need the fullscreen slideshow widget... something like this ?

          square

          • 2. Re: Responsive rectangle to cover half of browser area
            garyw43910326 Level 1

            Thanks for your reply. It's close but not exactly what I have in mind because those two clickable squares only cover a very small area of the page.

             

            Is there anything built in to Muse that will allow fully responsive areas to cover the entire page between them? Surely this is an obvious thing?

            • 3. Re: Responsive rectangle to cover half of browser area
              garyw43910326 Level 1

              Oh, I should have made specific in my previous reply: It is not want a slideshow I need. Just to be able to make the two halves of a page clickable - forwards and backwards.

              • 4. Re: Responsive rectangle to cover half of browser area
                Ussnorway Adobe Community Professional

                garyw43910326  wrote

                 

                Thanks for your reply. It's close but not exactly what I have in mind because those two clickable squares only cover a very small area of the page.

                they cover 1/2 the page each... what device broswer (screens above 960 will need a adjustment to my design) are you testing?

                Screenshot (1087).png

                • 5. Re: Responsive rectangle to cover half of browser area
                  garyw43910326 Level 1

                  Thanks. My screen is 2560 pixels wide.

                  • 6. Re: Responsive rectangle to cover half of browser area
                    Ussnorway Adobe Community Professional

                    ok so this website you want to make will work on wide-{HD?}-desktop screens only?

                    that doable yes... I would try making the two images as one i.e, left 50% | right 50% in photoshop and then you save some bandwidth when people try to use it... the guys in the photoshop forum can show you if thats the way you go.

                    • 7. Re: Responsive rectangle to cover half of browser area
                      garyw43910326 Level 1

                      I think you misunderstand my problem. I want to put two rectangles over the entire screen (page) and make each one clickable to a different page. They will be transparent. Beneath them will be a single image that the page is dedicated to showing.

                       

                      I did actually give the slideshow idea some more thought after your reply. However, I quickly remembered that Muse does not have a responsive slideshow. I have a third party slideshow widget but it only supports about ten images for whatever reason (not enough).

                       

                       

                      The problem is that my website is to be fully responsive. It will need to work on a multitude of screen sizes, from smartphone to beyond 4k. I'm grateful for your replies. I wish Muse was more intuitive and had the basic features that it really should have.

                      • 8. Re: Responsive rectangle to cover half of browser area
                        garyw43910326 Level 1

                        I bet what I'm trying to do cannot even be done in Muse. I'm right, aren't I? How absolutely shameful of Adobe. I'm using Muse because I do not have programming skills. I expect Muse to be able to facilitate very simple, commonly used website features, yet how many hours, days, weeks must I waste getting frustrated and stressed trying to find them and figure them out without a hope? Am I just supposed to throw money at third party widget makers so everyone gets to make a lot of easy profit and if I'm lucky I'll get what I need? I don't think so. Shame on Adobe. Muse is a rip-off designed to exploit the ignorant and vulnerable.

                        • 9. Re: Responsive rectangle to cover half of browser area
                          Ussnorway Adobe Community Professional

                          garyw43910326  wrote

                           

                          I want to put two rectangles over the entire screen (page) and make each one clickable to a different page.

                          this is doable... I would just make squares like this then add hyperlinks

                          news2

                          garyw43910326  wrote

                           

                          They will be transparent. Beneath them will be a single image that the page is dedicated to showing.

                          transparent is easy but I don't understand the "page is dedicated to showing" part

                          garyw43910326  wrote

                           

                          The problem is that my website is to be fully responsive. It will need to work on a multitude of screen sizes, from smartphone to beyond 4k.

                          this isn't practical ... a zen watch is 1/2 inch, a windows | Iphone is about 600 X 800 and you desktop is a whooper 2600

                          they don't even use the same tech to rendor color on a screen so an image that works on the small device screens will look yuck on your desktop and the desktop images won't even load on the other devices.

                           

                          the standard work arounds are alt layouts or breakpoints;

                          senario = your website goes to a host server and I come to your site on my browser,

                          the host server asks my device to tell it what it is so I can have the right layout but I don't like giving that info out i.e, I'm a windows phone in Australia so the host server has to hand me the desktop layout and I may be using XP or even Vista so it may also give me a default old script... result = your site looks bad or just doesn't load at all

                           

                          none of this is caused by Muse yet.

                           

                          some exaples of real site made by Muse = https://musewidgets.com/collections/site-of-the-day

                          perhaps Muse isn't for you... there is Dreamweaver or Wordpress but another non | little code option is Portfolio... some people like it

                          Share your Adobe Portfolio Link!

                           

                          best of luck with it mate

                          • 10. Re: Responsive rectangle to cover half of browser area
                            fotoroeder Adobe Community Professional

                            To add to Ussnorway , you could easily put transparent rectangles on each side of your pages and link them to the page you want.

                            It is nothing automatic, as far as I experience there´s only little websites out there where you can click the right side of a browsers window to get to the next or previous page. I don`t even know if that makes sense – there are some users out there, who want to see your entire slideshow before they leave this specific page and want to see the next page because they can`t get enough from you .

                            Of course you can set your slide show to autoplay, but some users have really no patience - it is said that you have to cause interest in between 2 or 3 seconds.

                            So users start to click onto the right side of an image, it indicates a link (mousepointer changes to a pointing hand) and soon they watch the next page – annoying for most users, so they watch 2, maybe 3 pages and leave.

                             

                            Slideshow: you could scale those (really tiny little) arrows for next - prev as much as you like and design them as you like - out of the box it is icon font, icon text or whatever text, give them different state settings (change colour, change opacity, reveal a semi-transparent colour screen, …).

                            You can create a fullscreen slide show, it is even responsive (with all restrictions Ussnorway already was kind enough to tell you), if you want a white frame around your images, create one, still everything is responsive (if you create the frame manually it would cover parts of your images so you should also take care of your images). If you know about certain devices and their aspect ratio, take care of it (a horizontal image on an iPad, used vertical - some call it portrait mode) keep track of it and use breakpoints, watch (SAFARI) Developer tool (there´s one from google as well - too lazy to loo at the address at the moment) and change to responsive design and watch how beautifull it looks an all devices, make decisions and go for it.

                             

                            Be aware, if you create 2 half screen button across the page nothing else is clickable anymore. I have no idea, if coders out there would be able to use 2 half screen buttons for the next prev pages and also be able to click buttons for next prev pictures that are covered.

                             

                            If you don`t use slideshows on every page your half screen buttons will work, but still users are not used to get to the next prev page when they click anywhere on your pages.

                             

                            So I suggest, be friendly to Muse (and to us forum members) and it will be friendly to you

                             

                            Best Regards,

                            Uwe

                            1 person found this helpful
                            • 11. Re: Responsive rectangle to cover half of browser area
                              Günter Heißenbüttel Adobe Community Professional

                              I thought for a long time, whether I should answer in this thread or not.

                              Normally I think, it isn’t worthwhile, to answer such  unqualified, insulting and patronizing contributions as yours, garyw43910326

                              Do you really think, you are the center of the world? If a feature, which you personally want and need, isn’t present at the moment, the application is crap? If every single "indispensable"  wish of only 100 users will be built into Muse, we certainly have to wait for centuries, until the application will be published and you’d certainly be the first one, who will qualify it as "completely unusable".

                              Nevertheless: What you want, is really easy to achieve. What you need, is simply a certain degree of willingness to learn Muse and creativity in using its features.

                              Look here, that does exactly, what you want – on every screensize: http://two-clickable-halves.businesscatalyst.com/index.html

                              You may download the associated .muse file directly from the sample site (For better understanding, the rectangles are coloured. You may  make them transparent as well..

                              But I bet: You didn’t tell us the whole story yet. There certainly will be a "but …". Waiting for it!

                              • 12. Re: Responsive rectangle to cover half of browser area
                                garyw43910326 Level 1

                                Many thanks to all of you for your help. I have now solved this problem, and for that I am very grateful. I must have just been careless when I tried previously but when I copied almost perfectly the rectangles arrangement of your Muse file, Günter, success!

                                 

                                I have to defend my rant, however. I posted it for two reasons: I was tricking the Universe to provide the answer I needed by posting words that would have made me seem foolish once it became apparent; and I was genuinely frustrated because what I wrote is basically true, and certainly many of my problems have not been answered successfully. Further, I Googled and read other forum posts on the problem this thread is dedicated to and only found negativity. Perhaps previous versions of Muse did not have the feature I sought and what I read does not apply to the current version. I have been trying, as a non-programmer, to create my own site now for nearly six months. It should have taken a couple of days. Imagine my frustration? Are there other ways to do things? Yes, but I have an obsessive personality with such things and I have already compromised far beyond my comfort zone. Anyway, my project continues with just a few more problems to resolve...

                                 

                                These are my remaining problems. Again, I would be very grateful for any help resolving them:

                                 

                                1) I need to remove (hide) the URL which appears in the bottom left corner of the browser when the cursor is over a clickable rectangle.

                                 

                                 

                                2) I need to maintain the cursor pointer (that is the normal cursor when not hovered over a clickable link) as a pointer instead of a hand when it is held over a clickable link.

                                 

                                 

                                3) Upon loading a page of my site the first time, when the cursor is first moved over a clickable header link (these appear as the same in every page) the element that is clickable (such as menu item) blinks (it is set for a mouseover colour change but it doesn't blink after the initial mouseover. It just changes as it should). I need to prevent this blinking.

                                 

                                 

                                4) I need page transitions to be smooth. When I click for a new page everything blinks, even the header which is the same on every page. I need the site to be programmed so that the header doesn't re-load when a different page is selected, and when a new page is selected everything should stay solid; nothing should disappear while the new page loads. Do you know what I mean?

                                 

                                 

                                Thanks.

                                 

                                 

                                 

                                 

                                 

                                 

                                 

                                Re: Responsive rectangle to cover half of browser area
                                • 13. Re: Responsive rectangle to cover half of browser area
                                  Ussnorway Adobe Community Professional

                                  garyw43910326  wrote

                                   

                                  These are my remaining problems. Again, I would be very grateful for any help resolving them:

                                   

                                  1) I need to remove (hide) the URL which appears in the bottom left corner of the browser when the cursor is over a clickable rectangle.

                                   

                                   

                                  2) I need to maintain the cursor pointer (that is the normal cursor when not hovered over a clickable link) as a pointer instead of a hand when it is held over a clickable link.

                                   

                                   

                                  3) Upon loading a page of my site the first time, when the cursor is first moved over a clickable header link (these appear as the same in every page) the element that is clickable (such as menu item) blinks (it is set for a mouseover colour change but it doesn't blink after the initial mouseover. It just changes as it should). I need to prevent this blinking.

                                   

                                   

                                  4) I need page transitions to be smooth. When I click for a new page everything blinks, even the header which is the same on every page. I need the site to be programmed so that the header doesn't re-load when a different page is selected, and when a new page is selected everything should stay solid; nothing should disappear while the new page loads. Do you know what I mean?

                                   

                                   

                                  Thanks.

                                  1. this done by the browser and hiding it from your end (the user can) is not allowed
                                  2. there are widgets for this but not all host servers allow custom pointers... Adobe BC does
                                  3. the blink is cause by a delay between your design, the cms that stores the data and the way the browser rendors it... you can host on a faster server to limit the cms delay and you can improve your design but you have no control over the end users browser
                                  4. same as 3
                                  • 14. Re: Responsive rectangle to cover half of browser area
                                    garyw43910326 Level 1

                                    Thanks for your reply.

                                     

                                    1) I Googled this problem and there is code to achieve it without any issues. However, I couldn't find a Muse-specific solution but it is easily achievable as I've seen it on many websites.

                                     

                                     

                                    2) It isn't a custom pointer I would like. I just do not want the regular pointer to change when it is over a clickable link.

                                     

                                     

                                    3) This is not an issue of servers or hosting. The problem exists in the previews. It is something to do with the code in the website itself. There are perhaps bugs or inaccuracies, et cetera. However, I;m using a master page as I should which should apply what ever is on it to the other child pages.

                                     

                                     

                                    This is a site that runs very smoothly and does not have the URL in the corner when the cursor is hovering over a link (that covers the photograph). The mouse pointer also does not change when it is over a link (specifically, I mean the link over the image that lead to other images). It is a SquareSpace template, if that's relevant. Note how smooth it works - no blinking or trouble loading new pages. The header is solid:

                                     

                                     

                                    ZACH GOLD

                                    • 15. Re: Responsive rectangle to cover half of browser area
                                      Ussnorway Adobe Community Professional

                                      garyw43910326  wrote

                                       

                                      It is a SquareSpace template, if that's relevant.

                                       

                                       

                                      ZACH GOLD

                                      yes Squarespace is very fast at the cost of complexity... look at the source code to see how hard even a minor change would be

                                      note how clean the site design is with just a blank white background and no frills to draw the eye away from the images... its also worth noting the heavy use of preloaders and the fact the site loads first then loads the slideshow as a seperate link from the true home page

                                       

                                      garyw43910326  wrote

                                       

                                      2) It isn't a custom pointer I would like. I just do not want the regular pointer to change when it is over a clickable link.

                                       

                                      clearly we see the word "custom" different... there are many 3rd party widgets that can do this in Muse and here is one example

                                      Mouse Cursors Widget for Adobe Muse

                                      • 16. Re: Responsive rectangle to cover half of browser area
                                        garyw43910326 Level 1

                                        Thanks for that, and for the link.

                                         

                                        My site is very clean and minimalist. It is, the design in my mind at least, very similar to that site I linked to. If what you describe in the mechanics of how that site works is accurate then that's what I want for my site, if it's the best way to achieve the end result I have in mind. Most portfolio sites I look at work in a similar, highly efficient (fast and flawless) way.

                                         

                                        At this moment, or at least again after I post this message, I am trying to arrange a small text box next to (or below, depending on break point) an image (page dedicated to showing the image just like the link I posted in my previous reply to the example website). Sadly, this is proving extremely difficult. The align function is not working at all to centre the text box and the text box itself keeps on conflicting with the image depending on how the browser is resized. Here's a tip for Muse programmers: include a feature in Muse that keeps one or more elements from conflicting. The logic behind how the responsiveness works is not easy to identify, or maybe I just have a mental block. It is frustrating.

                                        • 17. Re: Responsive rectangle to cover half of browser area
                                          Ussnorway Adobe Community Professional

                                          garyw43910326  wrote

                                           

                                          I am trying to arrange a small text box next to (or below, depending on break point) an image (page dedicated to showing the image just like the link I posted in my previous reply to the example website).

                                          have a look at tab 2 (made by Günter)... is this the sort of thing you need?

                                          fix • Q-Stables

                                          • 18. Re: Responsive rectangle to cover half of browser area
                                            garyw43910326 Level 1

                                            Thanks but I honestly do not see what the link you provided is the solution to. I have a photograph in the middle of my page that is fully responsive - both v and h. Now I have two rectangles with transparent clickable areas covering the entire page that are fully responsive. I can't get everything to fit. I'll keep trying but in smartphone screen sizes the scrollbar appears for whatever reason. I think this is because of the rectangles that are stretched well above the page (otherwise they don't work).