Highlighted

Height of the Page not Dynamic

New Here ,
May 23, 2017

Copy link to clipboard

Copied

Hi Everyone,

Sorry if this topic has been discussed before but I haven't found anything related.

I am working on a project where i need to design tabs of different heights for a menu (dinner, lunch, drinks, etc). Each target area is a different size and I am left at times with almost 1000px of empty space.

I'm using the tooltip widget as it's the only one that allows me to have different target area sizes.

What I need is a widget that behaves like a composition widget (trigger - target) but also like an accordion (pushes of retracts the content bellow).

Does someone have a creative solution to tacle this issue or a third party widget or even a code I can put in the header that will make the page contract when there is no object in the body.

Thanks guys

Ivo.

Views

379

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Height of the Page not Dynamic

New Here ,
May 23, 2017

Copy link to clipboard

Copied

Hi Everyone,

Sorry if this topic has been discussed before but I haven't found anything related.

I am working on a project where i need to design tabs of different heights for a menu (dinner, lunch, drinks, etc). Each target area is a different size and I am left at times with almost 1000px of empty space.

I'm using the tooltip widget as it's the only one that allows me to have different target area sizes.

What I need is a widget that behaves like a composition widget (trigger - target) but also like an accordion (pushes of retracts the content bellow).

Does someone have a creative solution to tacle this issue or a third party widget or even a code I can put in the header that will make the page contract when there is no object in the body.

Thanks guys

Ivo.

Views

380

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 23, 2017 0
Adobe Employee ,
May 25, 2017

Copy link to clipboard

Copied

Not really the answer to your question, but you can have a look at some of the widgets on this site to see if any of them meets your purpose.

https://musewidgets.com/search?q=accordion

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 25, 2017 0
Adobe Community Professional ,
May 25, 2017

Copy link to clipboard

Copied

Depends on your content of your target. If it is text, there´s a free widget for scrollable textboxes.

Adobe Muse Scrolling Text Boxes Widget | MuseThemes.com

Does this help?

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 25, 2017 0
New Here ,
May 25, 2017

Copy link to clipboard

Copied

Hi Footroeder, thank you for taking the time to respond

I have thought of this option too and I found a few widget that allow me to do it but I'd rather not use this one as I don't like to have hidden content and it can be really confusing for people to have two different scrolling parts so I'd like to avoid this option if possible.

Basically here is the concept link on invision: Loading...

When you toggle between lunch and dinner (only two that work on the concept) there is almost 1000px difference which results in 1000px of empty space for the smaller one and it is way to much specially when you have a call to action bellow.

If anyone has any idea I would appreciate greatly.

ps: excuse my spelling I am french and wasn't very good at english in scoll

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 25, 2017 0
Adobe Community Professional ,
May 25, 2017

Copy link to clipboard

Copied

The biggest disadvantage / mistake, they do not use text but pixelated pictures from text. At smaller size not readable.

It only shows, there´s no easy solution.

If you want get help, show us a screenshot of what you want to achieve – of you have more time, show us a please very reduced one page .muse.

Your invasion has no solution.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 25, 2017 1
New Here ,
May 25, 2017

Copy link to clipboard

Copied

Hi Preran thank you for taking the time and respond. But I am not really looking for an accordion. It's more a tabed menu but I would love for it to behave like an accordion so when a smaller target is selected the bottom of the page (left with empty space) retracts and when a longer target is active it's pushing the content down.

Any Ideas?

Thank you

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 25, 2017 0
New Here ,
Jul 03, 2017

Copy link to clipboard

Copied

Hi Footroeder, thank you for taking the time to respond

Please find below an example of what I was talking about:

Menu

if you click on the different submenus (lunch-diner-set menu-etc) you will see that the target size changes for each ones.

The shorter ones (lunch-burgers-etc) create a massive empty space to the bottom of the page.

How can I shrink the page when those are selected ?

Thank you.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 03, 2017 0
Adobe Community Professional ,
Jul 04, 2017

Copy link to clipboard

Copied

I can follow you. I see the issue you are talking about.

Yes, the only way by now would be to use an accordion – this pushes down content.

As of this reading I was not able to find something else with scaling content boxes.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 04, 2017 0
Most Valuable Participant ,
Jul 04, 2017

Copy link to clipboard

Copied

I would use a lightbox but if you relly want a news-comp then demo page = dinner

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 04, 2017 1
New Here ,
Jul 04, 2017

Copy link to clipboard

Copied

Hi Ussnorway,

I think the lightbox won't solve the issue in all fairness as it will stretch the page anyway to fit the content.

I'm not sure what you use in your video but I don't see the height of the page being dynamic. Could you explain a bit more in detail?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 04, 2017 0
Most Valuable Participant ,
Jul 04, 2017

Copy link to clipboard

Copied

My mock up has a box to push the page down to 2000 px

So everyone is on the same page ... Html the basics;

Dynamic height = expand to fit all the content

Lightbox = defaults to scroll so a user can see extra content

News-com = cut the display at the max size but the extra content is still there (just not displayed)... The idea is a user that wants all of it can send to printer.

Accordion = expanded list but this is older code that causes issues with devices like phones.

Lightbox and news are both a type of composition widget and the target counts as its own page i.e, the target is dynamic height | independent of the actual page under it.

Your design options are therefore; use a expanded list and assume no devices but desktop, use a lightbox and have a scroll, use a news and have the display cut off | or the page under has something to full the blank space... Images, a blog and just black color are all the same result.

Use a cms (like publiz) to feed the content into your div... This adds complexity but is dynamic height

Imo its worth exploring the option of widget within widget so instead of a dinner with 4 sets totalling 2000 px you could split that into just 'main' with desert, soups etc as sub-menus as has already been touched on but the rules allow it

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 04, 2017 0