BB Code Enhancements - iFrame BBCode [Archive]

View Full Version : BB Code Enhancements - iFrame BBCode

Strike-Force.ne

02-09-2008, 10:00 PM

I went looking for iFrame BB Coding and came across several, but none really suited my needs or the needs of my members. In addition to this I noticed a common requested add on feature for this code by those who added it to their site, but I have yet to find anyone who filled that request.

This BB Code contains not only a button which allows the viewer to go to the site being displayed, but it also contains a "Back" and "Forward" button so the user can navigate the iFramed site without having to leave your site. This allows the user to decide whether the posted site is worth more of their time or not without forcing them to view it in order to go "back" or "forward".

This is my first attempt at any type of BB Code (I'm new to HTML), so go easy on me. This works for 3.6.8 but I won't be able to offer support for this.

To install this BB Code: AdminCP -> Custom BB Codes -> Add new BB Code

Title: iFrame

Tag: if

Replacement: 

<table border="0" bgcolor="#89723C" width="100%"> <tr>

<td> <br> <center> <head>

<script type="text/javascript">
function goBack()
{
window.history.back()
}
</script>

<input type="button" value="Back" onclick="goBack()">

<script type="text/javascript">
function newDoc()
{
window.location.assign("{param}");
}
</script>

<input type="button" value="Visit Site" onClick="window.open('{param}')" />

<script type="text/javascript">
function goforward()
{
window.history.forward()
}
</script>

<input type="button" value="Forward" onclick="history.go(1)"> </head> </center> <br> </td> </tr> </table>

<iframe src="{param}" width="100%" height="500"> </iframe>



Example: http://www.google.com

Description: Places a site within a small framed window in a post.

Use {option}: No

Button Image: (button image is optional, and I don't use one personally)

I have also created a colored border around the buttons which can easily be changed to suit the color scheme of your site. This can be changed by changing the bgcolor value to whatever color you choose on this line:
<table border="0" bgcolor="#89723C" width="100%"> <tr>

The height and width of the iFrame can be adjusted by changing this line:
<iframe src="{param}" width="100%" height="500"> </iframe>

You can check out a live version at this URL: http://www.strike-force.net/showthread.php?t=280

I highly advise that if you use this BB Code that you install: Advanced BBCode Permissions 3.0 (https://vborg.vbsupport.ru/showthread.php?t=122942) to restrict which usergroups can use this BB Code.

I have updated this thread with the updated iFrame code, you can download the old code via the zipped file below.

S7rik3R

02-10-2008, 12:00 PM

Looks like something I've been hunting for my website long time

PoetJA-1975

02-11-2008, 05:18 AM

Nice! Thanx for sharing!

Jacquii.

CLF

02-14-2008, 05:56 AM

Is there any way to avoid "http://" part?
Thank you.

Strike-Force.ne

02-23-2008, 01:11 PM

Is there any way to avoid "http://" part?
Thank you.

Replace this:
<iframe width="100%" height="400" src="{param}"><a href="{param}" target="_blank">{param}</a></iframe>

with this:
<iframe src="http://{param}" width="100%" height="400"> </iframe>

Afterwards you will be able to iFrame the link by typing it as (examples ---->)www.Strike-Force.net or Strike-Force.net :D

yotsume

03-16-2009, 05:36 PM

If there a way to use this BB code to show powerpoint slides in the post?

Also, the visit site button I need the target to be a new tab or new window. How do I alter the BB Code for that?

Thanks!

nectons

04-11-2009, 11:46 PM

SORRY PLEASE DELETE THIS MESSAGE.

thanks

lm3a.net

05-20-2009, 08:43 AM

thank u

Strike-Force.ne

06-14-2009, 02:44 PM

If there a way to use this BB code to show powerpoint slides in the post?

Also, the visit site button I need the target to be a new tab or new window. How do I alter the BB Code for that?

Thanks!

I'm not familar with powerpoint slides, so I'm can't help you out. However I can help you with having this open in a new tab or window.

Replace the code for the Visit Site from this:
<input type="button" value="Visit Site" onClick="newDoc()" />

to this:
<input type="button" value="Visit Site" onClick="window.open('{param}')" />

Specifically you are changing the onClick coding.

yotsume

06-14-2009, 02:54 PM

Thanks for the code for a new window target.... better late than never. ;)

Strike-Force.ne

06-14-2009, 03:13 PM

Unfortunately I only come by here every couple of months, so I didn't catch it till now.

Strike-Force.ne

06-15-2009, 04:54 PM

I have found that this change in code to allow the iFrame site to open to a new tab or window has caused the forward button to not work in IE8. Here is the fix for this:



<table border="0" bgcolor="#89723C" width="100%"> <tr>

<td> <center> <head>

<script type="text/javascript">
function goBack()
{
window.history.back()
}
</script>
</head>

<body>

<input type="button" value="Back" onclick="goBack()"> </body>

<head>
<script type="text/javascript">
function newDoc()
{
window.location.assign("{param}");
}
</script>
</head>

<body>
<input type="button" value="Visit Site" onClick="window.open('{param}')" /> </body>

<head>
<script type="text/javascript">
function goforward()
{
window.history.forward()
}
</script>
</head>

<body>

<input type="button" value="Forward" onclick="history.go(1)"> </body> </center> </td> </tr> </table>

<iframe src="{param}" width="100%" height="500"> </iframe>



If anyone experiences any issues please post up and I will look into it.

Shaheen

06-29-2009, 05:40 AM

i think there is conflict between this hack and html archive hack

Strike-Force.ne

07-06-2009, 01:12 PM

i think there is conflict between this hack and html archive hack

I found the problem, I had some redunant html that was causing the issue. I have tested this with IE8 and it works properly. I will test this for other browsers (IE7, FireFox, Safari, Chrome, Opera) later today to ensure it works for them as well.

Here is the updated code:



<table border="0" bgcolor="#89723C" width="100%"> <tr>

<td> <br> <center> <head>

<script type="text/javascript">
function goBack()
{
window.history.back()
}
</script>

<input type="button" value="Back" onclick="goBack()">

<script type="text/javascript">
function newDoc()
{
window.location.assign("{param}");
}
</script>

<input type="button" value="Visit Site" onClick="window.open('{param}')" />

<script type="text/javascript">
function goforward()
{
window.history.forward()
}
</script>

<input type="button" value="Forward" onclick="history.go(1)"> </head> </center> <br> </td> </tr> </table>

<iframe src="{param}" width="100%" height="500"> </iframe>



If you notice any issues please post up with the browser and browser version you are using. You can view this updated version here: http://www.strike-force.net/showthread.php?t=280

Shaheen

07-07-2009, 10:48 AM

I found the problem, I had some redunant html that was causing the issue. I have tested this with IE8 and it works properly. I will test this for other browsers (IE7, FireFox, Safari, Chrome, Opera) later today to ensure it works for them as well.

Here is the updated code:



<table border="0" bgcolor="#89723C" width="100%"> <tr>

<td> <br> <center> <head>

<script type="text/javascript">
function goBack()
{
window.history.back()
}
</script>

<input type="button" value="Back" onclick="goBack()">

<script type="text/javascript">
function newDoc()
{
window.location.assign("{param}");
}
</script>

<input type="button" value="Visit Site" onClick="window.open('{param}')" />

<script type="text/javascript">
function goforward()
{
window.history.forward()
}
</script>

<input type="button" value="Forward" onclick="history.go(1)"> </head> </center> <br> </td> </tr> </table>

<iframe src="{param}" width="100%" height="500"> </iframe>



If you notice any issues please post up with the browser and browser version you are using. You can view this updated version here: http://www.strike-force.net/showthread.php?t=280

Thanks , its fixed

yotsume

07-14-2009, 08:15 PM

Yes fixed in IE8 and works great in Firefox.

BTW I include a button on my editor for this BB code feature. Attached to this post is the icon I use for the button.

BirdOPrey5

05-17-2010, 08:07 PM

Using the most recent code the back/forward buttons do not work with Google Chrome, it does work with IE8 and Safari. Any idea on Google Chrome compatibility? It's my favorite browser at the moment.

edit- if I go to more then 2 pages it seems to work...

hiker

05-18-2010, 07:30 PM

I'm trying to use this mod to display a flickr photo slideshow, but flickr says it doesn't allow slideshows in iFrame. :mad:

Is there any way to mask this iframe code so a flickr slideshow will embed in a post? I've tried creating a custom bbcode just for flickr slideshows but I'm having no luck.

In fact with this code, it starts to display the slideshow for half a second and then the window below appears:

BirdOPrey5

05-18-2010, 08:55 PM

hiker

05-21-2010, 03:24 AM

Hey, have you tried http://flickrslidr.com/ ? They seem to have a way of embedding flickr slideshows into web pages- maybe you can hack that into bbcode?

It looks like flickrslidr is using iframe as well, although I'm not sure how they're able to get away with it but I'm not. I'm still getting stopped by flickr on the iframe issue.

hiker

05-21-2010, 04:30 AM

actually, I think I may have found a way to function with that flickrslidr, thanks for the suggestion!

Back to this mod, I'm using it (successfully!) with picasaweb slideshows. Would there be any way to disable the X function, or the exit from within the slideshow so they CAN'T navigate from there? I'd like to come up with some sort or "exit=false" command or something so they can't exit the slideshow and browse the other picasaweb sets of that user.

BirdOPrey5

05-21-2010, 12:35 PM

You're welcome... if you got it working you should release it as a mod.

As for the picassa exit it's very unlikely you'll be able to disable the exit, picassa would have needed to be programmed with that option on google's side- the place to ask would be on a picassa forum as there are much more likely to be experts on the subject there... also would look for any picassa programming api info, maybe they've documented some extra features.

hiker

05-21-2010, 04:58 PM

oops... nevermind on the picasaweb slideshow... They're just a little slower than Flickr to alert me they don't like embedding with iframe. It's disabled the next day, as Flickr's was disabled 1/2 second later. lol

I'll check the picasa forums, thanks for the advice.