Multiple iframes in one file - possible? How do align iframes to elements in code

Elements
1

Hi there,

I have this file
http://c.davisandco.com/clients/davisandco/DCO_EOY2018_v1b.html

In the blue section you see icons for itunes, amazon and spotify. When you click on each one, a playlist needs to load in an iframe. Our IT guy tested this, but not with an actual Hype file so I dont see how to do it with what will be 9 different frames, linking from 9 elements. Can you help? :slight_smile:

Thanks,
Kathleen

2

Hi if you provide some example files you may get a better response.

Saying that I can see that you are using a rectangle for where the iFrame would go.

You could change this to a HTML Widget element and set it’s source to you other html like so.

10

or you can use the rectangle with embed code for a iFrame and on each click of a button change the source.

3

Thanks for your help. I didn’t occur to me to share actual files but I will upload in case you or anyone else wants to take a peek. DCO_EOY2018_v1b.zip (1.5 MB)

4

ok,

Quick look at it.

I have given (blue) the 3 buttons each a class name. i.e itunes, amazon and spotify
When the button is clicked it will run a JS function. And then do the other two actions you had set.

The rectangle has some innerHTML that is a iframe with a blank src.

The rectangle has been given a class name of ‘iframer’

The elements just mentioned are all in the group ‘3-Playlist Blue’.
This helps since we can also give the group the class name of ‘playlist’

The js. that runs when a button is clicked.

	// find which class of button made this call
	var thisbutton = element.classList[1]
	
	//-- get the buttons group by class name
	var playlist =  element.closest('.playlist')
	
	//-- get  the groups iframe
	var thisIframe = playlist.querySelector('.iframer > iframe')
	
	
	//-- use the buttons class to change the src of the iframe
	switch(thisbutton) {
    case 'itunes':
      thisIframe.src = 'itunes.html'
        break;
    case 'amazon':
        thisIframe.src = 'amazon.html'
        break;
  case 'spotify':
         thisIframe.src = 'spotify.html'
        break;
}

parent.hype.zip (1.6 MB)

example export.zip (1.8 MB)

2 Likes
5

Thanks! Even just adding the widget was big ‘aha moment’. I will take a look at these :slight_smile:

6

No problem.

I forgot to add. If you are going to change the src then it is probably easier using the Rectangle as I have.
Also the reason I have used classes is so you can have more than one set on the page if needed.

Hence the js hunts for the group and only uses the iframe inside of it.

Also I forgot to actually setup the spotify button… :roll_eyes:

– see that I have posted file above…

1 Like