HTML5 objects with multiple actions

Ask questions about creating HTML5 Publications (fixed or responsive) using QuarkXPress 2016, 2017 and 2018. HTML5 Publications allow you to create online publications with near-WYSIWYG typography and design and app-like interactivity – at no extra cost.

Also learn about Progressive Web App (PWA) export from QuarkXPress 2018.
Post Reply
Andy Dowse
Posts: 2
Joined: 22 Feb 2018, 03:05

HTML5 objects with multiple actions

Post by Andy Dowse » 13 Jun 2018, 05:25

In my HTML5 publication, I want to create a panel that is hidden initially, but appears when the user clicks on a button.

I then want to be able to close that panel with another click once the user has finished reading its contents.

I am struggle to make this work with the hide and show object in the HTML5 options.

Is this achievable. If so, can someone explain where I'm going wrong.

srmareedu
Quarkian
Quarkian
Posts: 4
Joined: 30 Apr 2015, 06:23

Re: HTML5 objects with multiple actions

Post by srmareedu » 14 Jun 2018, 09:31

Hi Andy,
1. Select the panel and give a name to it in HTML5 palette by enabling Initially Hidden as shown below.
One.PNG
One.PNG (32.84 KiB) Viewed 352 times
2. Select other box and convert it as Button and apply show/Hide object as shown below
Two.PNG
Two.PNG (28.76 KiB) Viewed 352 times

Andy Dowse
Posts: 2
Joined: 22 Feb 2018, 03:05

Re: HTML5 objects with multiple actions

Post by Andy Dowse » 14 Jun 2018, 10:15

Brilliant! That worked just they way I wanted.

I didn't realise you could name objects without actually assigning an HTML attribute to them.

Thanks.

Post Reply

Return to “HTML5 Publications / Progressive Web Apps (PWA) – from scratch and convert from Print”