0

I've developed a static advert ticker that sits at the bottom of the window. This is in an <iframe> to make it easier for other people to place the unit on their sites. Another <span> around the <iframe> keeps it fixed to the bottom of the screen. The script has a help window which is within a tag - within the <iframe> and uses the visible / hidden property to show or hide text.

Now since the code is in an <iframe>, the help text would not appear on main window. To get around this, I made the <iframe> larger,and set it to transparent.

Visually, everything is fine. When the user clicks a button on the ticker, the help menu appears over the data in the background. However, I've just discovered that if there is a link on the main page that passes under the <span><iframe> section, it cannot be clicked. I've tried CSS pointer-events, but can't get that to work, (links within the <iframe> must also remain clickable)

Not sure which is causing the "fault", ie the <iframe> or the tag around it. Is it a security thing to stop "click jacking" (??) or more to the point, is there a work around.

If push came to shove, I COULD reduce the size of the <iframe> and use a javascript pop-up window to display help text, but those windows show the URL and status windows, and are not exactly elegant!

Here is the code before anyone asks: This span covers the entire screen to the height of the underlying <iframe> I did this so the data could be centred

 <span style="position:fixed;bottom:10px;display:inline;width:100%">
 <center>
 <iframe src="http://www.xxx.com/cgi-bin/ticker/run_tick.pl?s=xzy" frameborder=0 align=top width=800px height=330px marginwidth=0 marginheight=0 hspace=0 vspace=0  scrolling=no allowtransparency=true></iframe>
 </center>
 </span>
rockerest
  • 10,412
  • 3
  • 37
  • 67
Cristofayre
  • 121
  • 1
  • 11
  • Hi, I didn't rollback because the changes weren't substantial: I rolled back because the tick (`) is the correct way to set off code elements. Cheers! – rockerest Oct 21 '13 at 20:54
  • Sorry, I'm still new to posting on this board, so don't know the "ins and outs" of formatting the post. ALso, I didn't know it was a live person interacting, I thought it was a robot telling me of a problem, and the prompt didn't tell me a lot. So thanks for correcting me. – Cristofayre Oct 22 '13 at 09:53
  • I clicked enter and posted rather than adding a newline, (another quirk I'll have to remember!) This morn, I've found out the problem isn't the ` – Cristofayre Oct 22 '13 at 09:56

2 Answers2

1

Set a height to the span the same as the iframe (330px)

Let me know how that goes

Adam Moseley
  • 199
  • 1
  • 10
  • Thanks for the tip, but didn't help. I've now removed the ` – Cristofayre Oct 22 '13 at 09:59
  • I've now managed to get the `` to sit around 50px above the ticker for "ad6" reasons, but still any underlying link on main page that goes behind the '' - above or to the sides - is not clickable. I'm hoping too that I can set up another `' Hope this all makes sense. Oh, have also tried a tag with z-index to bring to fore, but that didn't work either – Cristofayre Oct 22 '13 at 10:07
  • Run out of time editing comment 1. Link is:http://www.cristofayre.com/ticker (Don't click JVZoo link as I'm still in test mode with that due to PayPal problems not letting me buy my own product despite two separate accounts!) – Cristofayre Oct 22 '13 at 10:09
0

Oh boy, what FUN I've had getting this to work!! (Twelve hours on Wed 23rd, and about three hours today)

Originally, I had an <iframe> that filled virtually 3/4 of screen, (so that I could display the help window to uses in a '' rather than use a modal popup. But, for security reasons, the browsers will not let you click through text that covers links underneath.

I had to literally redesign the whole layout.

Now, I have the help file in a separate <span> window which has its visibility set to hidden till user needs it. But that still left the ticker code at the bottom.

I had to divide that into three <divs> one on either side of the main ticker. But again, the ones on the side are effectively masking the page underneath, so I had to set both <divs> so that they used "pointer-events:none" meaning the <div> was not clickable, and mouse events would pass through to the code underneath. The mid section for the ticker was set to the opposite, namily "pointer-events:auto" so that the TOP window got the clicks, but not the page underneath.

Next problem: Because the ticker shows graphics that extend into the main text, that left a 1/2" area where clicks on main page couldn't be accessed. Another span was added to the code which covered the area with a transparent gif. When the user places their mouse over this graphic, a swap takes place and displays a semi transparent checkerboard. They can then read what this means in the help file.

Finally, when user's click the minimize button, the <div> holding the ticker code is hidden (giving accesss to all the links on the page) and ANOTHER <div> displays "Restore" graphic. When they click that, it gets hidden whilst the main ticker window - and the two <divs> on either side are made visible again.

And it was only meant to be a simple script!! (Oh, and don't check the website or my blog 'cos I won't be uploading the changes till eve of Sat 26th)

Cristofayre
  • 121
  • 1
  • 11