Responsive Content Slider Tips and...

User 103173 Photo


VP of Software Development
0 posts

Share your tricks or tips for Responsive Content Slider with others!

This thread is for tricks and tips only - please no problem questions. Have a problem or question or want to chit chat about this program then Start a new thread please.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 232214 Photo


COO
827 posts

Please note that the first tips & trick can be found in the help guide. :P
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 303390 Photo


Registered User
97 posts

When I want some "dummy" images to use in RCS I use the Dynamic Dummy Image Generator at

https://dummyimage.com/

User 244626 Photo


Registered User
811 posts

One of my concerns using RCS was the limiting feature of the touch swipe of the slideshow. It requires the user to perform quite a long accurate swipe across the screen on a mobile device. 50 % of the screen ?

I found that if you edit the slideshow js file that is exported you can adjust the value(s) of the x y axis and the time element.

This makes a slideshow on a mobile device intuitive and responsive.

Search for var touchsurface = el,
and adjust these default settings to something smaller. Save and upload and enjoy the "tweak"
threshold = 150, //required min distance traveled to be considered swipe
restraint = 100, // maximum distance allowed at the same time in perpendicular direction
allowedTime = 300, // maximum time allowed to travel that distance
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

Here is a trick to change the absolute position settings for elements from px to percent using some js. I have created a RCS slideshow using the picture element. Next I added a simple heading and customized the prev next controls which are put in a container. Breakpoints were added to adjust text size and the prev next controls size. The picture size was not adjusted. As we know, since the headings and controls are using the main picture as a reference point, anytime the picture begins to shrink the positions of the other elements will not follow the size adjustment since they are set using px instead of percent. I go ahead and choose absolute and uncheck top to set the px to 0 for the elements. Next I exported for embedding into RSD (or FF or BB). Once in RSD I linked a resource file main.js that has some code to find the prev next control container by ID and then change the css to top: 50% instead of top: 0 px. It then finds all the headings by classname and changes that position to top: 20 % instead of top: 0 px. Now when viewing the slideshow in RSD the headings and controls will adjust by percentage instead of px. There is some transform translate added also....
This opens up other possibilities.....like injecting Greensock ? wicked:D
Attachments:
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

This is the RCS file for the above Fuel Injection RSD.
Attachments:
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

Instead of embedding your Responsive Content Slider you can load it on click. The embedded html is inserted into a "emptied" div. The required main.css stylesheet is updated in the theme stylesheet. The slideshow.js script required to start and load the slideshow is initialized after "onload" of the html.

http://gluexp.coffeecup.com/bootstrap/p … adrcs.html
Bootstrap 5 CSS Grid.
User 2796102 Photo


Registered User
66 posts

I can't find how to add control buttons and make them work.:(
User 187934 Photo


Senior Advisor
20,181 posts

Hi Phillip,
Click on the Elements tab.
Lower right side are the control buttons.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 244626 Photo


Registered User
811 posts

I figured out how to apply alpha transparency in the color selector finally. If you notice, there is a number 1 in the setting for the transparency. Trying to type in .65 does not work over the 1. You have to first type 1.00 and then highlight the 1 only and delete leaving just the .00

Now you can type in the alpha over the 00 part leaving the decimal alone. So I guess thats a tip unless I was missing some other quick method ?
Bootstrap 5 CSS Grid.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.