Activating a popup in Wordpress

1

Up front I should mention that I am using Hype Version 2.5.3 (344)…I should also mention that I am not much of a programmer.

I am having difficulties getting popup links to work when they are delivered through a Hype presentation embedded via iFrame in a Wordpress site.

I am trying to get popups to show when elements are clicked within the Hype presentation.

I am looking for the proper way to set up the popup links in the HYPE generated presentation.

The popup links I have to use are a result of shortcodes generated by the popup plugin I am using in Wordpress. At this point I don’t seem to be able to activate the popups using the links provided by the plugin that I have tried through Hype.

Previously, I created the same Hype file, and with the help of Andrew (I could be wrong about who was helping me previously - it has been several months) I was able to get a regular popup window to activate as a workaround.

This has worked fine for the most part, but I would like to get a “real” popup window to work. A sample of what I am looking for is listed further below…

I have included screen caps at the following addresses highlighting the presentation elements as they are set up in HYPE, and the links as I have applied them.

You can see the page that my test is on at the following address:

http://www.scottbuilders.com/about-2/

The current live page with the workaround:

http://www.scottbuilders.com/about/

The screen caps are as follows, with explanation:

The image called MURRAY.JPG highlights Murray Cunningham:

Code used for link:
http://www.scottbuilders.com/seniormanagers3.html/#ulp-mdlHmzS69UBLtGlF

I knew this might not work, but tried it anyway. It takes me to the site 404 page. Given that you are supplying short codes, it was unlikely a link like this would work but I tried (and failed). I included it here for your perusal in case anyone had any alternative thoughts on it that might work.

The image called TERRY.JPG

Code from Wordpress plugin used for link:
onclick=“return ulp_open(‘f3lYPLdztL1bisgU’);”

This was the one I thought should work, but it also takes me to the site 404 page.

The image called BRUCE.JPG

Alternative code from the Wordpress plugin used for the link:
#ulp-ZHRD7iuTwoqZKmor

This was the first one I tried. Instead of opening a popup, it re-opens the HTML5 presentation in a new window! Not quite what I was looking for but at least it opens something.

So what I am trying to get it to do would be similar to what is on the following link:

http://www.scottbuilders.com/careers/opportunities-red-deer-test/

If you click on the APPLY ONLINE button, a popup appears with a form on it. THis popup happens to work because the button itself is created in Wordpress directly. No iFrames getting in the way (to my knowledge).

In the case of the items I am having problems with, I am looking for a popup to appear, but it will have a bio of the individual being clicked on - not a form.

In other words, you click on the name of the person (Murray Cunningham, Terry Bolen, Bruce Gilbert, etc.) and a popup appears with bio info.

Once again, you can see the live workaround for this at the following link:

http://www.scottbuilders.com/about/

We used javascript to make this work, but it doesn’t always work properly. instead of a popup window, it sometimes just opens the bio in a new page.

I am hoping there is some way to make this work.

Any thoughts out there? Any help would be most appreciated.

EDIT: An alternative to this would be getting the profile content to load into an iframe within the Hype presentation. As long as the iframe was responsive, that might be an option…

2

My wordpress site is limited in width so this example will be constrained but is this similar to what you want

http://www.markosx.com/thecocoaquest/test2/

The hype doc is within an iFrame. But I am not sure if you really need to do that for what you want.

Click Murry C.

(p.s I will not be able to leave it published for long)

3

First of all, thank you so much for building that sample!

And, yes - that is kind of what I need. Here’s the thing - in order to get the main presentation to show up on the page, I had to use the code I found in the Hype documentation that puts the main presentation in an iFrame. That is mandatory from what I understand in Wordpress sites that have speed enhancement. So that has an iFrame. But the main presentation does not need to scroll because it is responsive while in it’s iFrame on the Wordpress page (which I noticed still works on your page, regardless of the scroll bars).

I know that I can build a popups directly in Hype, but the problem was that it all has to be responsive, and my version of Hype doesn’t handle the content of the popup well - The text overlaps the photos and kind of gets scrambled up in ways I don’t know how to control - no collision detection I guess, or whatever the case may be?

So I felt I had to create a popup that worked external to the Hype presentation, but activated by the Hype presentation.

So I created the popups as pages in the Wordpress site due to it’s ability to create responsive content, with the thought that they could be activated via the Hype presentation. I mentioned the interim results in my initial request…

So, other than the scroll bars, and the fact that the popup itself is not responsive, your sample is pretty close.

I was wondering if you built the popup in Hype in it’s entirety, or is the content embedded from the original website. I figure it is the latter.

If so, then the popup box just has to be responsive. It is possible that the content would automatically reform to the size of the container box, but that is something I am not quite sure how to accomplish. I might have used a responsive iFrame somehow, which I have some code for.

With the iframe, it is also easy to give the popup a scroll bar at smaller widths, such as on mobile.

So if the content of the popup is embedded from the original site, I have no idea how to get that to happen. Any further help would be greatly appreciated, and again, thank you for your assistance so far!

4

Here is the example so you can see what I did.

testPopUP copy.hype 2.zip (440.8 KB)

5

Hi there - unfortunately I can not open the file. You are using a newer version of Hype than I am.

I am using Hype Version 2.5.3 (344). :frowning:

6

Unfortunately hype two has gone bub bye on this Machine.

To make the info panel that slides just have the images, text and close button placed in a group.

Then place them outside of the scene.

On a Timeline setup a origin left start and finish. Start being off scene finish being on scene.

Put a Rectangle over the person in the people picture and set its click actions to run the group timeline

Set the close button’s click to go time in timeline 00:00

Screen Shot 2015-06-22 at 20.01.57.JPG1970×1654 352 KB

7

But is is all properly responsive? It can’t just shrink smaller but actually rearrange itself depending on the width of the viewing area.

I actually know how to do what you are talking about. I don’t want to rebuild the popups in Hype because of my less featured older version, and because I have already built them in Wordpress.

I really just need to somehow embed the popups in Hype using frames, or whatever Hype would require to make that happen, then have the popup responsive so that it scales down properly on smaller devices.

The reason I think this might work better with regards to responsiveness is that the WP embedded pages would automatically scale down properly when sized down for mobile.

What I do not know is how to embed a wordpress page into an iframe created in Hype - or if that is at all possible.

Or even better, be able to open the popups I already have made in wordpress using the Hype presentation as the trigger (all as indicated in my initial post).

Can’t thank you enough for what you put together though! :smile:

8

Ah I think I now see what you mean.

I have not tried that my self and will have a look at it. Starting with a WP page scr’d in a hype hamlet widget…

9

By the way can you post this so I can look at what your are doing.. maybe fix it