How do I set this up so that the iframe doesn't load until the object is clicked on?

HTML & CSS
1

How do I set this up so that the iframe doesn’t load until the object is clicked on?

or so that the [src="http://] doesn’t connect until the object is clicked on.

or so nothing loads, no links, nothing until the object is clicked on.

or How do I prevent everything from not loading behind the object until it’s clicked on.

or, How do I prevent certain links from loading behind the object until it’s clicked on.

<div style="cursor: pointer;display:block; width: 256px; height: 256px; background-color:#000000; border: 5px solid #0059dd;">
</div></div>

<div id="myscroll" style="display: none;">

<iframe src="http://testblog45675.blogspot.com/" height="266" width="266"
scrolling="yes" frameborder="0" style=" display:block;" marginwidth="0" marginheight="0"></iframe>

</div>
2

That would probably require an empty iframe in the HTML and some JavaScript to fill it.

3

on blogger it says: Configure HTML/JavaScript. So, does that mean I can input javascript?

4

I don’t really know too much about Blogger and it’s blocked from the office. I may have an old account somewhere, so I might be able to look when I get home.

5

If you have gmail, all you do is log into blogger.

6

Mainly I use Yahoo email, but I think I have one somewhere. I’ve probably got a couple of abandoned blogs hooked up to it IIRC. I ‘use’ (very loose use of the term) my own hosting for blog purposes.

7

I don’t think that’s for actual javascript, but just regular inline css html.

8

So, I guess there’s no way to do it through inline css only?

9

I guess you could put it in between <script> tags before the closing </body> tag, but personally, I’d want it out of the way and into a separate JS file, much like I’d do with CSS - separation of concerns again…

Note: There’s no such thing as “inline CSS”, it should be “inline styling”. CSS is a shortened form of “Cascading Style Sheet”, which is a term specifically referring to a separate .css file that can be referenced by many HTML pages. Using the correct terminology is important if your requirements are to be understood.

10

I thought there was a simple way to turn off a link from caching until an object is clicked. Like, a simple add-on code that I would add onto the original code.

11

You can change the content of an iframe via <a> links with a target attribute with a value matching the name attribute of the frame.
So the iframe has a name:-

<iframe src="placeholder.jpg" name="frame" height="266" width="266" class="window"></iframe>

And the link to switch content has the iframe as target and the new content as its href:-

<a href="frame-content.mp4" target="frame">Load Content</a>

The iframe will initially show the placeholder image. When the link is clicked it will show the frame-content media.

2 Likes
12

Am I doing something wrong?

13

Today I learned… :blush:

14

I think it’s a problem with jsfiddle and iframes to external sites maybe.
If you re-create the code locally (or on a server) it works.

The initial 404 is because the placeholder does not exist.

1 Like
15

I got it.

16

Forum Moderator’s edit: Post contents removed and referred to a separate thread to avoid duplication.

Please refer to Preventing the [hosting link] from loading until the image is clicked.