How to make a pop-up pop up

On a number of pages in my current project, I have sound files. These are placed on the relevant pages using the import method described in the manual.

They do not play automatically but the user has to click on the start button on the windows player. When that is done I want a pop-up text widget to pop up - it describes the limitations of the recording and playback. This should be on the top of all other elements on the screen and disappear either after a certain time has elapsed, or when the sound file finishes, or the user clicks elsewhere on the page.

I'm having trouble making it work.

Can someone please tell me:

1 In which section/layer I should place the pop-up

2 How I trigger the pop-up to appear as the sound file is triggered.

Many thanks

Flip

flip, I deleted your last Post as you tweaked it away it was now an orphan. It happens all the time.

Your ask is not that simple.

You need a trigger for when the audio file has been played.
Is that just the once?
Must it start at 00:00 or at any play time?
Is the pop-up a one-off? Never appearing again?

None is easy in native Xara and would require coding.

My suggestion:
Make the Player dimensions 400 x 200px.
Give it a Link of javascript: ;
Make your pop-up 380 x 160px.
Put the pop-up on the MouseOver and align to make it appear as a panel.

When you hover over the audio controls, the pop-up appears, the controls still function.

Attachment 131514

Acorn

Acorn, many thanks for a fast and comprehensive response. I'd really prefer to avoid coding.

I'll try another approach using the resources within Xara that I'm able to understand. I'll report my progress in case it helps others.

My website is designed to display and sell hand-painted guitars. The artwork can be appreciated and evaluated on the site but I feel it's important that prospective purchasers can also hear the sounds.

Of course, played over computer speakers, tablets or telephones the quality can't be a true representation but I feel it's important that people can make relative evaluations between different instruments and also hear the range of tones my instruments can produce (since we modify the electrics.

The pop-up is intended to explain this objective and limitation.

I'm really grateful to you for your help and suggestions.

Flip,

Relatively simple idea is to have a guitar image on the MouseOff layer with short MouseOver description and to create a popup for each guitar with the audio and any other information of your choice:

Attachment 131518. You need to add your own audio track to see it working. Online example here: https://initiostar.co.uk/demo/audioPop/

Any information about the guitar can will be on the popup where the audio is set to auto-start. Closing the popup and the audio happens simultaneously using the link "popup:close"

Gary

Initiostar (Gary) I am very grateful for your suggestion, it is very nearly what I had in mind (and so badly described). I'll action it tomorrow and report back; I'm aware how much others rely on the help given so generously on these pages.

Incidentally the attachment included didn't open correctly though that may have been my ignorance. The online example worked well.

Regards

Flip

Flip,

This is the design file :Attachment 131520 - you will need to replace Xara Audio Widget with your own mp3 file to see it work.

Gary

Thank you again.

Flip

Both, I took Gary example and reworked it so there is absolutely no code or undocumented features used.

Attachment 131521

Acorn

My thanks to you both. I've modified your suggestions to suit the overall design and the result is just what I hoped for.

What I notice is that regardless of how the sound clip stops, ie if it's stopped part played or played through completely then cleared from the screen by the user clicking on the red dot, I hear a few notes from the start when the next page is opened regardless of whether it has any sounds on the new page or not. Do you think this is my computer set up (nothing special) or perhaps the clip I'm using - at present for test purposes I have the same clip in each page.

I hope this doesn't sound picky or ungrateful. Even as it is it's just what I wanted.

Thanks

Flip

Quote:

---

Originally Posted by flip

My thanks to you both. I've modified your suggestions to suit the overall design and the result is just what I hoped for.

What I notice is that regardless of how the sound clip stops, ie if it's stopped part played or played through completely then cleared from the screen by the user clicking on the red dot, I hear a few notes from the start when the next page is opened regardless of whether it has any sounds on the new page or not. Do you think this is my computer set up (nothing special) or perhaps the clip I'm using - at present for test purposes I have the same clip in each page.

I hope this doesn't sound picky or ungrateful. Even as it is it's just what I wanted.
Thanks Flip

---

Flip, the best idea would be a link to your site. Send @Initiostar or myself a PM if you don't want others to access it for the moment.

Acorn

Acorn,

Many thanks. I'll be happy to forward a link to my site as soon as it's a site ie at present the thing resides only on my computer.

In the meantime, I've been thinking about the phenomenon I wrote about, particularly from a point of view with which I'm familiar having spent most of my working life making TV and video programmes. At present all the pages have the same mp3 lip for the test sound file. It happens to be one I recorded years ago when I ran a kids music group. The music starts almost exactly at the head of the file (bear in mind this started life as a 24track 2" tape!) although the tail has a few seconds of silence. It occurs to me that if I leave a few seconds of silence at the head of the sound files whatever is causing the phenomenon won't be heard anyway. (Modern sound engineers don't have to consider tape startup etc.)

In the meantime I'll get the samples files recorded and loaded in place, finish the paypal files edits before I do the mobile version layout. As soon as I can I'll post the link.

Thanks for all your help.

Quote:

---

regardless of how the sound clip stops, i.e. if it's stopped part played or played through completely then cleared from the screen by the user clicking on the red dot, I hear a few notes from the start when the next page is opened regardless of whether it has any sounds on the new page or not.

---

Flip,

Difficult to tell without seeing your modified design. I would save your design under a different name (e.g. test.xar), retain the index page and one other that has your photos (delete the rest) and upload it to TG (using the Advanced Reply) - none of audio tracks will accessible to us in that example (without you adding them into a zip file with the design file), but we can, by adding some audio tracks test to see if we can replicate the issue you have.

However, the issue you describe should not be occur with the Xara media player. In the original example I provided, the 'red dot' should close the popup and 'pause' the audio; thereafter when clicking on another photo or moving to another page, there should be no residual audio. Whatever is on the audio track is I think irrelevant here, provided it is a true mp3 format.

Gary

Many thanks.

This morning I've managed to reach the point at which I need only record the sample sounds and I can upload the work to the waiting webspace. If it's OK with you I'll do that and send you the link.

Again I'm grateful to you and Acorn for your help. I couldn't have got tis far without it.

Flip

Looks like a plan Flip :D When you publish to a live site, I would have a comment on the index page that says something like 'This site is under test'

Gentlemen, as promised, while I invariably tweak my sites for days or weeks to come in response to the comments of friends etc, the basic site is now pretty well as is.

Please have a look at https://www.guitar-art.co.uk and see how I've applied the suggestions and help you kindly gave me.

Incidentally, most of the overlapping sound files have disappeared as I imagined they would when I left a few seconds of silence at the head of each file.

Best regards

Philip

flip, I am also a tweaker but I'm glad you have achieved your goal.

I am no fan of the Xara Simple Gallery [Gallery (5 col) Widget]. In this case, I feel it destroys the impact of the site.
I tried some of your images with an Inner Zoom, which I found to be more versatile.

Feel free to ignore but here is my sampler: Attachment 131538

Just add the Name, htmlclass="zoomin" to each of your images after losing the Xara Widget.
You could also try without the HighSlider pop-ups.

The code in in Head and Body of the Website.
It requires the special Name, UsesJQuery, somewhere added to a shape on your site.

Acorn

Flip,

I like the guitar pages and I see what you were trying to achieve now.

Like Acorn, I am no fan of the gallery widget and if I look at the flow from the index page to the gallery, you could make the purpose of the gallery (i.e. to link to the guitar pages) entirely redundant; the gallery will not transition well to its mobile variant either -it is too wide to make easy viewing.

Here's a thought: Home (index) page - either use Acorn's inner-zoom or a zoom for each guitar with a LINK to each guitar's page - that's one touch not two to reach the product you are selling and it removes the need for a guitar menu tab too. The key thought has to be how does this transition to a mobile variant:

One example: Attachment 131541 - 5 guitars wide transitions to 3 wide with exactly the same pixel size; change one and it changes in the mobile variant too. It would be better if all images were the same size for future maintenance and update, but this works using Scale-to-fit Width.

I ditched the old Xara Navbar in favour 3 simple text links; Terms of Reference could reside at the bottom of the page. For the table detail on each guitar page I would use a PDF for the mobile variant too.

Attachment 131542

You are well on your way with the guitar pages, but I think there is some merit is simplifying the visitor's route to them.

Gary

Great stuff Acon/Gary.

How would you go about this zoom-in effect but maintain the same border demesions. i.e. instead of the complete image zooming-in and getting larger, the zoom-in does the same zoom but remains within the original photo h & W ?

Egg,

Here is a working example using the guitars demo; scales across mobile, tablet and desktop: https://initiostar.co.uk/demo/inzoom-test/

Three steps that make this relatively easy; the first is to create a single 'photo template' with the inner-zoom code courtesy of Acorn (see the Website HTML Head for the style and Body for the script); the photo is given the Class name for the code; thereafter soft-group to make it easy to move around.

Attachment 131546

Second step is to create your photo grid on the desktop variant using the single 'photo template' - it can be any dimensions you choose.

Attachment 131547

Third step is to Share the grid with the mobile variant and transpose the grid from a horizontal format to a vertical format - the example changes from 2 rows x 5 columns to 5 rows x 2 columns. Now you can drag any images from the Bitmap Gallery and replace the current stock photo - this automatically updates the mobile variant. You can update any of the references on the MouseOver layers for each photo.

Attachment 131548

Here's the deign file: Attachment 131549

Here's the code which includes both the zoom and inner-zoom; the red numbers are user defined.

<style>
.zoom {
transition: 1s ease-in-out;
}
.zoom:hover {
transform: scale(1.5);
}

.innerZoom {
background-size: 100%;
background-position: center center;
transition: all 1s ease-in-out;
}
.innerZoom:hover {
background-repeat: no-repeat;
background-size: 120%;
}
</style>

<script>
$('.inzoom').each( function(){
$(this).replaceWith('<div class="xr_noreset " style="position: absolute; ' + $(this).attr("style") + '"><div class="innerZoom" style="background-image:url(' + $(this).attr("src") + '); width: 100%; height: 100%;"></div></div>');
});
</script>


The same design principles apply to using Xara's standard Highslide Widget - hence there is a no code option for those that prefer it.

Gary

Acorn/Gary, many thanks for your help and suggestions. I must be absolutely frank and tell
you that while I truly appreciate your suggestions, my ability and understanding of the
technology leave me feeling I'm trying to learn a foreign language (and I did learn Mandarin
for three years when my grandchildren lived in China!).

I'm also aware of my inability to describe properly the objectives of my site clearly I failed
to do that also so I'm doubly grateful to you for your help.

Because my site and thus product range is new, I'm aware that the index page and the
'catalogue' page that follows, look similar. However I'm also aware of how the index page
design won't work in the narrow version. My intention for the index page is to provide
compelling visual/s to encourage potential customers to enter the 'shop' but avoid wasting the
time of people looking for say, pictures of guitars or material with which to decorate their
own instruments. That way I think I can overcome the gallery thing.

Longer term I don't want to have to update the index page picture/s as much as the catalogue
pictures. Those I intend to remove when sold unless their removal (rather than marking as
'sold') gives a wrong impression of the range of instruments we sell. I quite like the present
catalogue layout but propose to make a new layout to be vertically scrolled for the narrow
format catalogue page.

I fully appreciate Initiostar's comment about the nav bar but I want to give the user the ability
to switch between models quickly without having to plough through the catalogue.

Thanks too for the pdf suggestion; I was never happy with the smart table when I discovered
that it's not smart when switching between widths.

I'll re-post when I've updated and once again thank you for your help and support.

Regards

Philip

Quote:

---

Originally Posted by Egg Bramhill

Great stuff Acon/Gary. How would you go about this zoom-in effect but maintain the same border demesions. i.e. instead of the complete image zooming-in and getting larger, the zoom-in does the same zoom but remains within the original photo h & W ?

---

Egg, I think you are asking how to achieve the Simple Gallery zooming of the entire image effect.

This is a separate, simpler CSS effect.

Use the CSS script in the Website Head:
<style>
.scaled {
transform: scale(1.0);
border: 2px solid red;
transition: 1.2s ease-in-out;
}
.scaled:hover {
transform: scale(2.0);
border: 4px solid blue;
}
</style>

Add Name htmlclass="scaled" to any object, including text.
I added 'border' just for the hell of it to show tweaks are not that scary.

If you are asking about zoom and pan, that is more complex.

Acorn

Quote:

---

Originally Posted by flip

Longer term I don't want to have to update the index page picture/s as much as the catalogue
pictures. Those I intend to remove when sold unless their removal (rather than marking as
'sold') gives a wrong impression of the range of instruments we sell. I quite like the present
catalogue layout but propose to make a new layout to be vertically scrolled for the narrow
format catalogue page.

---

Philip, understand where you're coming from now; the Gallery you created is not I assume a Xara widget, but a grid you created using a MouseOver animation (bulge maybe?). It is still relatively easy to transpose the desktop variant to one that works in a mobile format, particularly since your photos are in portrait format anyway.

Attachment 131552

One of the outcomes from playing around was the inner-zoom here: https://initiostar.co.uk/demo/inzoom-test/. Try it on your mobile? But the process of creating your mobile variant equivalent is exactly the same; take your current grid for example, Share with other Variants, and transpose the grid from (say) 5 columns to 2 columns. You can resize to fit and thereafter, when you change a photo it automatically changes in the other variants. (I think) you could do this with your grid without too much hassle.

WRT the Navbar I think you need to add the index landing page, else there is no way back once you move from it (e.g. a Home link).

Probably best to start a new thread now, since we have drifted from audio popups to photo grids.

Good to see the site taking shape.

Gary

May I revert to the audio insertions topic once more?

I'm currently making the mobile version of my site. The Infostop layer wasn't created automatically so I copied it manually in its assigned position. It seems OK but now starts as soon as the page opens, not when the 'trigger' graphic is clicked.

It's obviously something I've done since when I play the page within XWD with the main version that also starts as soon as the page opens.

Other pages that I've not tampered with remain 'correct'.

Can you tell me what I've done wrong please?

Flip

Quote:

---

Originally Posted by flip

May I revert to the audio insertions topic once more?

I'm currently making the mobile version of my site. The Infostop layer wasn't created automatically so I copied it manually in its assigned position. It seems OK but now starts as soon as the page opens, not when the 'trigger' graphic is clicked.
It's obviously something I've done since when I play the page within XWD with the main version that also starts as soon as the page opens.
Other pages that I've not tampered with remain 'correct'.
Can you tell me what I've done wrong please? Flip

---

Flip, I simply created a Variant and all pages and layers copied over.

You mention layer Infostop; it needs to be Info(lock), the (lock) part is important.

I would delete and retry as fixing what you have will be awkward unless it is just the layer name.

Acorn

Thanks Acorn & Gary. Yes these work excellently. Thanks for your time.

Hmm. Clearly I'm still doing something wrong. I deleted the mobile variant, created a new one and the mobile variant was indeed created with the various elements in various places, some in the new narrow page, others outside it..

The loudspeaker, text group and the placeholder and the ellipse were outside the page area when I tested the single page. They didn't play either automatically or on the trigger.

I dragged the speaker symbol and the text into the mobile page - same result.

Finally I dragged the widget and the ellipse into the page - and when I tested the page, once again the sound started as soon as the page opened.

It seems to me that I'm not being offered the option to play automatically or delay when the trigger is clicked but the action starts as soon as the page opens.

I've corrected all my Info(lock) stupidity also.

Thanks

Flip

Quote:

---

Originally Posted by flip

Hmm. Clearly I'm still doing something wrong. I deleted the mobile variant, created a new one and the mobile variant was indeed created with the various elements in various places, some in the new narrow page, others outside it..

The loudspeaker, text group and the placeholder and the ellipse were outside the page area when I tested the single page. They didn't play either automatically or on the trigger.

I dragged the speaker symbol and the text into the mobile page - same result.

Finally I dragged the widget and the ellipse into the page - and when I tested the page, once again the sound started as soon as the page opened.

It seems to me that I'm not being offered the option to play automatically or delay when the trigger is clicked but the action starts as soon as the page opens.

I've corrected all my Info(lock) stupidity also.

Thanks

Flip

---

Flip,

I'll take a look later and get back to you - there is no reason it should not work, but I'll check later.

Gary

Flip,

OK - tried and tested the approach here: https://initiostar.co.uk/demo/variant_popup_test/ Design test file: Attachment 131554

As before you will need to replace the audio widget with your own sounds - better if you try and test the function in a new document to satisfy yourself that it works before you implement it in your main site; a lot less hassle!

All I did was to create the desktop, create a variant, drag and resize objects to a fit a mobile format. I created a normal text style for the variant and added a simple background rectangle on the popup, else likely the popup may not be that clear if it resides on top of other content.

I would do the same with your gallery page too; test the desktop to mobile transition in a separate document; https://initiostar.co.uk/demo/simple_grid/ - this is I think the same format at your gallery page, using a grid of bulge animations.

Gary

Gary

Many thanks. I'll get to this first thing tomorrow and confirm that I can handle the tech.

I did test the gallery format - that works fine.

Very much obliged.

Philip

Gary

Thanks for your help.

Unfortunately, I still have the same problem with your new file after I delete your sound file and import my sound file - the test in XWD plays immediately the page opens and neither the sound file nor the explanation text appears. I assume I should be 'importing' the sound file?

Philip

flip, your sound file needs to be dropped onto the pop-up layer.

In the Page & Layer gallery, tick that layer, check it is visible and drag your sound file onto your design page.
Reposition and size to fit.

Acorn

Acorn,

Many thanks, I'm making progress, of a sort. I followed your suggestion thus: I selected the mobile version. I deleted the sound file that had been brought into position from the main version. I then dragged the sound file into position on the design making sure the pop layer was selected and visible. When I selected 'play automatically' the sound file started as the page was opened ie the original problem. I repeated the process selected 'don't start' automatically. When I tested this it didn't play when the page was opened but when the 'trigger' was selected the sound file, ellipse and message appeared but the sound file didn't play as it should have done - until I clicked on the sound file arrow.

I've adjusted the test frame several times and it appears that, apart from the different ways in which I've inserted the sound file into the layer (importing the main, dragging the mobile) the determining factor is the width of the test window.

FWIW I've tried changing the test browser from Microsoft to Firefox but that appears to make no difference. The performance varies according to whether I have the browser window wide or narrow.

I hope this helps.

Philip

Flip,

Let's see if we can isolate the issue - for both the desktop and mobile variants select SOLO mode in the P&L Gallery for both MouseOver and Popup layers - what you should see (as per my example) is this for the Mobile variant and a similar two images for the Desktop.

Attachment 131560

Can you confirm what you are seeing.

Can you also confirm whether the demo here https://initiostar.co.uk/demo/variant_popup_test/ has the same behaviour? do this on a real mobile phone and on your desktop.

It is possible if you are simply squeezing the browser in and out while the popup is open to get the popup to appear/ play without actually touching calling the popup, but that's not reality.

Gary

Gary, thanks for your prompt reply.

Your message specified MouseOver but the photo is MouseOff so I've given you all three:

Main
Info(lock) - sound file, ellipse and message
MouseOver - nav bar
Mouse Off - fullpage inc 'trigger' text/symbol

Mobile
Info(lock) - sound file, ellipse and message
MouseOver - nav bar (amnded to one bar)
MouseOff - full page inc 'trigger' text/symbol in new position on page

The only difference on the layers section is that on the mobile version the MouseOver layer is hidden (the nav bar appears in the MousOff layer also)

Re your site. Your file performs correctly on my desktop and phone. The only difference is that I have my popup message on the original angled panel.

Is it worth me putting my site in both versions up online? Then I could see if it is working differently online as opposed to under test.


Philip

Senior moment Flip, should have been MouseOff.

Might be better to share the file, which I assume is too large to post on TG. If you have Google Drive, Dropbox or One Drive you can share that with me. You can go public/ private with Share. I'll PM my email address to you shortly for private sharing.

Gary

flip, when you drag an audio file onto a design, Xara creates Placeholder code for it and saves the audio file as an external asset.
There is no need to do it twice as the copied/shared Placeholders only need to know where the asset it (In the index_hrm_files folder when published).

Shame this has become an epic for you.

Acorn

Acorn

Unfortunately that's where I started (though I imported the sound file as Xara instructed. Everything worked fine. It was when they were 'transformed' for the mobile variant I hit the problem. Right now I'm trying to find a way of sending the file to Gary for less than £100. I have a PCloud account but I've got to find out how to share a file via it.

Philip

Quote:

---

Originally Posted by flip

Acorn
Unfortunately that's where I started (though I imported the sound file as Xara instructed. Everything worked fine. It was when they were 'transformed' for the mobile variant I hit the problem. Right now I'm trying to find a way of sending the file to Gary for less than £100. I have a PCloud account but I've got to find out how to share a file via it.
Philip

---

flip, please don't pay anything.

If you have FileZilla, you can FTP the XAR file to a sub-folder of your present site.
If you have email, you can ZIP and send quite large files. Even GMail handles up to 25MB. With free Google Drive, you can share a 10GB file!
You don't need to send any audio as we've got those already. The XAR file should be trivial in size.

You could even risk https://www.sendtransfer.com, with registration fo a 50MB upload.
Never tried it but you never know.

Acorn

Acorn

Many thanks for the valuable information. Since writing I've sent Initiostar a link to access the files on my cloud account. If that fails I'll come back and take up one of your suggestions.

Many thanks

Philip

Flip,

You can send the file direct to my email, zip it with your own audio files as I don't think I have access to them from here, or from your local drive just use 'We Transfer', it's free.

Gary