Clickable Panels

I Need Help
1

I want to make the panels clickable. Like www.apple.com :slight_smile:

1 Like
2

Hi @mackyangeles,

Currently it does not appear that the “Interactions” side panel is enabled for sub level blocs, rows, etc. However seemingly it could be, but until then you will have to write your own click events with JQuery or Javascript.

3

Do you know a way to do/implement it?

4

Hi @mackyangeles

I’m not sure what the best way would be without knowing your page structure, but regardless here is a basic example. The following would assign a click event and hand cursor to your entire Bloc or Row.

<script type="text/javascript">
$(document).ready(function() {
    $('#your-Bloc-or-Row-ID').css({
        'cursor': 'pointer'
    });
    $("#your-Bloc-or-Row-ID").on("click", function() {
        location.href = "http://www.your-desired-url.com";
    });
});
</script>
  • Give your Bloc or Row a desired ID
  • Modify the code for your needs - change the ID & URL
  • Add the code via the page settings as custom code in the footer area.
  • Duplicate the inner code and modify for each ID and URL instance as needed

That is simply an example of one approach, it could likewise be accomplished via other approaches. But given what is currently accessible in Blocs that seems to work, more access to other things may come in v3.

@norm would need to address why currently the “Interactions Panel" is not accessible for Blocs and Rows. I assume it is for a reason.

Hope that helps your efforts in some way regarding what you are trying to accomplish @mackyangeles.

2 Likes
5

It works! Now I need to change the url. Seems that it can’t identify the local folder links. Thank you so much!

6

Hi @mackyangeles,

You’re welcome. It was just a quick example, glad it worked and seemed to be what you desired.

However, if you have a lot of Blocs or Rows, etc., that you wish to do this with, then a different approach instead of what I mentioned above:

Duplicate the inner code and modify for each ID and URL instance as needed

Would be a better alternative and make things more concise and perhaps easier to manage. The following would be a basic example of how it could alternatively be approached for many items.

<script type="text/javascript">
$(document).ready(function(){
    var idArray = [ "#id1", "#id2", "#id3", "#id4", "#id5", "#id6", "#id7", "#id8", "#id9", "#id10", "#id11" ];
    var urlArray = [ "https://www.google.com/", "https://www.apple.com/", "https://blocsapp.com/", "https://www.google.com/", "https://www.apple.com/", "https://blocsapp.com/", "https://www.google.com/", "https://www.apple.com/", "https://blocsapp.com/", "https://www.google.com/", "https://www.apple.com/" ];
    $.each(idArray, function(i, v) {
		$(v).css({
			'cursor': 'pointer'
    	});
    	$(v).on("click", function() {
        	window.location.href = urlArray[i];
    	});
   });
});
</script>

Simply change the items in the ID array and the URL array with what you desire. Just make sure they both contain an equal number of ID’s and URL’s that correspond with each other. Then add it via the page settings as custom code in the footer area, like before.

There are lots other ways it could be approached as well.

Regarding the URL for page links internally inside Blocs. I would refer to @norm as to what the best way to target those through scripting would be. Aside from previewing and testing in “Preview in Browser” or via Export, I am not sure if there is access or reference to pages in the .blocs file itself via JS scripting in the page?

1 Like