Highlighted

Scrolling content boxes?

Participant ,
Dec 27, 2017

Copy link to clipboard

Copied

Hello, I was wondering if anyone knows a widget or anything that can create a scrollable content box. I know they make ones for text boxes that are scrollable but I was looking for a box that could vertically scroll an image.

Ive seen this one, https://musewidgets.com/products/smart-scroll-box but every time I go to preview the widget or get the widget my browser says

Your connection is not private

Attackers might be trying to steal your information from umuse.ru (for example, passwords, messages, or credit cards). "

so I don't trust that link

No widget is needed for this.

Take the state button, remove from it all contents and all used styles. Create a graphic style for it, for example scrollBox.

894cb82e5a.png

Place the following simple code in the Head.

<style>

.scrollBox {

height: 300px !important;

overflow: auto;

}

</style>

Set the height as you need

c95e8d1dc4.png

Then place into the state button any content you like.

2b647f9d4b.png

da20aaea66.gif

Views

3.6K

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

Scrolling content boxes?

Participant ,
Dec 27, 2017

Copy link to clipboard

Copied

Hello, I was wondering if anyone knows a widget or anything that can create a scrollable content box. I know they make ones for text boxes that are scrollable but I was looking for a box that could vertically scroll an image.

Ive seen this one, https://musewidgets.com/products/smart-scroll-box but every time I go to preview the widget or get the widget my browser says

Your connection is not private

Attackers might be trying to steal your information from umuse.ru (for example, passwords, messages, or credit cards). "

so I don't trust that link

No widget is needed for this.

Take the state button, remove from it all contents and all used styles. Create a graphic style for it, for example scrollBox.

894cb82e5a.png

Place the following simple code in the Head.

<style>

.scrollBox {

height: 300px !important;

overflow: auto;

}

</style>

Set the height as you need

c95e8d1dc4.png

Then place into the state button any content you like.

2b647f9d4b.png

da20aaea66.gif

Views

3.6K

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
Dec 27, 2017 0
Advocate ,
Dec 27, 2017

Copy link to clipboard

Copied

Looks like they may have a 'certificate' problem with that page.

I tried to use their 'report an issue' and got rejected with a prompt to include a @ in my email address - which obviously IS included.

So . . . we can't even complain. 

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...
Dec 27, 2017 1
Advocate ,
Dec 27, 2017

Copy link to clipboard

Copied

I just went to that site using a old PC that I didn't mind the risk when using. Seems benign enough to use.

APC_0016.jpg

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...
Dec 27, 2017 1
Guide ,
Dec 27, 2017

Copy link to clipboard

Copied

No widget is needed for this.

Take the state button, remove from it all contents and all used styles. Create a graphic style for it, for example scrollBox.

894cb82e5a.png

Place the following simple code in the Head.

<style>

.scrollBox {

height: 300px !important;

overflow: auto;

}

</style>

Set the height as you need

c95e8d1dc4.png

Then place into the state button any content you like.

2b647f9d4b.png

da20aaea66.gif

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...
Dec 27, 2017 2
Participant ,
Dec 28, 2017

Copy link to clipboard

Copied

I think I understand for the most part, but what do you mean by the head? The only area I can find to add html looks like this: Screen Shot 2017-12-28 at 11.00.26 AM.png

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...
Dec 28, 2017 0
Guide ,
Dec 28, 2017

Copy link to clipboard

Copied

Right click > page properties > meta data > html for head

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...
Dec 28, 2017 0
Participant ,
Dec 28, 2017

Copy link to clipboard

Copied

I just tried this, it works great in preview mode but for some reason when I preview the page in the web browser (I use Chrome) the scrollbox doesnt work

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...
Dec 28, 2017 0
Guide ,
Dec 28, 2017

Copy link to clipboard

Copied

Maybe you made some kind of mistake, or something is wrong with your browser. Works great in Chrome.

19817dce05.gif

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...
Dec 28, 2017 1
Participant ,
Dec 29, 2017

Copy link to clipboard

Copied

Just tried it again, and it works! Thanks so much pam65972418​ for helping me make my site the best it can be!

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...
Dec 29, 2017 0
Community Beginner ,
Feb 05, 2018

Copy link to clipboard

Copied

Thanks for this workaround Pavel Homeriki​. The obvious issue with this approach is that the original height of the state button is still shown and affects canvas and surrounding elements before the styling is applied. Is there no other way to "tell" Muse that a certain DIV or even such a state button as you suggest should have overflow: scroll; behaviour in Muse's design mode and not always grow to accommodate the content inside ?

The only other solution I see here is make this in a separate page and import again via iFrame, right ? It seems impossible to make anything more complicated in Muse without iFrames, but controlling them is a pain without javascript.

I feel there is potential in Muse, but there are some basic things missing for making anything more complicated with this tool.

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...
Feb 05, 2018 0
Guide ,
Feb 05, 2018

Copy link to clipboard

Copied

Is there no other way to "tell" Muse that a certain DIV or even such a state button as you suggest should have overflow: scroll; behaviour in Muse's design mode and not always grow to accommodate the content inside ?

For the Muse object, while it is in design mode, there is no css code that you created for it and put it in the head. This code starts to affect the object only after generating html. To achieve what you want in Muse's design mode, you need to write a self-sufficient html code without using the state button. But the user without knowledge of the code can not edit it. There is no other way. One has to choose - or so, or that way.

The only other solution I see here is make this in a separate page and import again via iFrame, right ? It seems impossible to make anything more complicated in Muse without iFrames, but controlling them is a pain without javascript.

Do not abuse iframe. The search engines do not like it and do not index it, because they consider it unsafe. If you can do without iframe - do it.

I feel there is potential in Muse, but there are some basic things missing for making anything more complicated with this tool.

The potential of Muse is only in terms of a good program for developing UX web design. Muse pushed Photoshop aside in the field of web design, as Muse has much more opportunities for this. But as a program for creating functional websites, Muse has no potential. What can be the potential of the simple html site that Muse creates? Muse emulates a lot of different behavior, but from a technical point of view it's not right. For example, compare the composition-tooltip in Muse vs the correct solution for sites - jQuery tooltip.

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...
Feb 05, 2018 0
Community Beginner ,
Feb 06, 2018

Copy link to clipboard

Copied

Pavel Homeriki

Do not abuse iframe. The search engines do not like it and do not index it, because they consider it unsafe. If you can do without iframe - do it.

I see what you are saying. That means, even if the content inside an iframe is hosted locally, search engines will skip it ?

I tried experimenting with jquery .load() method with less success. Would that be wiser to use ?

It's hard to achieve anything interesting in Muse without ability to load content on an event and mimic Ajax behaviour.

The potential of Muse is only in terms of a good program for developing UX web design. Muse pushed Photoshop aside in the field of web design, as Muse has much more opportunities for this. But as a program for creating functional websites, Muse has no potential. What can be the potential of the simple html site that Muse creates? Muse emulates a lot of different behavior, but from a technical point of view it's not right. For example, compare the composition-tooltip in Muse vs the correct solution for sites - jQuery tooltip.

It seems that way. What I like about Muse is the possibility to directly manipulate the design canvas and have quick results and test your design decisions. As you said, perfect for UX web design. Break points are pretty easy to manipulate and you can fairly quickly achieve something. But, once you want to turn it into a real thing or desire some not-so-simple behaviour, than you start hitting wall after wall.

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...
Feb 06, 2018 0
Guide ,
Feb 06, 2018

Copy link to clipboard

Copied

That means, even if the content inside an iframe is hosted locally, search engines will skip it ?

To this content, search engines are more loyal, but nevertheless, a negative impact in some browsers or services can take place.

I tried experimenting with jquery .load() method with less success. Would that be wiser to use ?

It's hard to achieve anything interesting in Muse without ability to load content on an event and mimic Ajax behaviour.

Yes, it's wiser to use, but not in Muse. With sufficient skills in jQuery / js, html, css, Ajax - all this can be implemented in Muse. But the paradox is that Muse is not a convenient platform for this. Therefore, it makes no sense to do all this in the Muse.

But, once you want to turn it into a real thing or desire some not-so-simple behaviour, than you start hitting wall after wall.

For more than a year I have not made any live site in the Muse. I use Muse only to design. And in this case, I care only about emulating behavior by any means, without caring about the technical side. After the design is ready, programmers come into the business who simply look at the design of the Muse as a sample and recreate it all in the source code, applying the right solutions and all the above listed technologies.

If I myself make a live site, I do it right away in joomla without using the Muse.

What I like about Muse is the possibility to directly manipulate the design canvas and have quick results and test your design decisions.

And yet it does not give a complete freedom of design. Total design freedom gives only css knowledge. This is often used in Muse as well

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...
Feb 06, 2018 1
Community Beginner ,
Feb 06, 2018

Copy link to clipboard

Copied

Thanks for your insights Pavel Homeriki​.

I'll keep fighting this battle for a bit longer and see how much I can push Muse, but I would say your workflow seems right. I would even add to your tips that combining Muse with Adobe Animate would open up additional UX technics, before the design is eventually handed over to developers to implement it in a proper code. Probably something you are already doing.

Even if Muse stays like that, I would say it definitely has value, unless it is eventually replaced by Adobe Xd or some other tool.

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...
Feb 06, 2018 1
Participant ,
Apr 23, 2018

Copy link to clipboard

Copied

Hello Pavel,

(although the end of Muse is looming, I still have to work with the program as long as I have not found an alternative for the program).

I've discovered your useful post and am trying to create a scrolling textbox at the request of my client. I tried to follow your instruction, but unfortunately my browser button is always the same size as the text it contains (instead of 300 px height (html defined in header) > 2.343 px ...).

What could I have done wrong?

I use Safari 10.0.2 as a preview browser and the latest version of Muse.

Unbenannt-4

Best regards

Patrick

Bildschirmfoto 2018-04-23 um 18.18.33.png

Bildschirmfoto 2018-04-23 um 18.18.52.png

Bildschirmfoto 2018-04-23 um 18.17.57.png

Bildschirmfoto 2018-04-23 um 18.19.43.png

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...
Apr 23, 2018 0
Guide ,
Apr 24, 2018

Copy link to clipboard

Copied

Hi. The answer is very simple - you use the wrong class name. Use the name you created for the graphics style.

a354a653f5.png

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...
Apr 24, 2018 2
Participant ,
Apr 25, 2018

Copy link to clipboard

Copied

Thanks Pavel, no it works!

(until Muse EOL, sad, sad, sad...)

Patrick

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...
Apr 25, 2018 0
Guide ,
Apr 26, 2018

Copy link to clipboard

Copied

Carefully check your actions. It can not be that it does not work.

f23665b38a.png

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...
Apr 26, 2018 0
Participant ,
Apr 26, 2018

Copy link to clipboard

Copied

Sorry,
I ment „now it works”!

Thank you for your help!

Patrick

Bildschirmfoto 2018-04-25 um 13.26.29.png

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...
Apr 26, 2018 0
Robin50 LATEST
New Here ,
Apr 26, 2020

Copy link to clipboard

Copied

I know its a year or more later. But nobody here considered that this wont work with multiple break points. What do we do when we reach a smaller breakpoint. When we resize this, it changes things on the other breakpoints too. The code snippet pasted in header is common to the entire page (all breakpoints). Then how do we change size of this on different breakpoints ?

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...
Apr 26, 2020 0