Jump to content

Enable Touch on Mobile Devices - Momentum Template

Recommended Posts

  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

12 minutes ago, Jnsn06 said:

Can anyone offer a solution for custom css to add to my gallery page to allow the hover action (touch action on mobile) to create the same effect as it does on desktops.

The image should fade-out and text fade in.

Thanks in advance.

Basically, the hover effect on desktop can be proceeded when you tap and hold for a while on mobile. If your require that your tapping interacts immediately some effect on mobile, we will need to implement some javascript code. And this advanced configuration is only available on business plan or above ones.

Which plan are you using?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

I am on a professional plan which I believe was phased out and it would be the equivalent to the business plan.

Here is the site/page I'm looking for the effect on:

https://www.johnsenschmaling.com/projects

This is the code added for the :hover event:

<style>
.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-anchor:hover {
  opacity: .2 !important;
  display: block !important;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out; 
  transition: all .3s ease-out;
 }

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
  opacity: 0;
  display: block !important;
  position: absolute;
  text-align: left;
  padding-left: 4%;
  bottom: 5%;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out; 
  transition: all .3s ease-out;
 }
.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
  opacity: 1;
  color: hsl(0, 0%, 25%) !important;
  display: block !important;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out; 
  transition: all .3s ease-out;
 }
 </style>

Link to comment

I try on your site and get 2 results:

- Touch the item, hold a little and scroll page down/up => it run the hover effect correctly

image.thumb.jpeg.6eb96155d3c1d20c523e1ef26c9a0087.jpeg

- Touch the item, hold a longer time and it will show the panel as you right click on a link

image.thumb.jpeg.010f0e063892f018c59d5f3b5e32a4bb.jpeg

I think it is fine for me as a client on your site

If you need it works more sensitively, like I said before, we will need to implement some business code

Edited by Beyondspace

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing for your current state

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Thanks for taking a look.

When I test on ipad or iphone the response is not sensitive enough.  Were you able to check out the Jasper demo.  The mobile sensitivity is much better and I am hoping to achieve that.

What would be needed to implement business code...?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.