Opening a SqueezeBox iframe with javascript?

Everything to do with Joomla! 1.5 templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
ewel
Joomla! Guru
Joomla! Guru
Posts: 522
Joined: Mon Oct 01, 2007 11:35 am

Opening a SqueezeBox iframe with javascript?

Post by ewel » Tue Feb 05, 2008 1:04 am

After searching for some time to find the files, I looked into modal.js and behaviour.php and I searched this forum and the web, but the only way I have found explained to use the Lightbox-like popup (also used in the back-end for example for the Parameters in Article Manager) is as follows:
First you need to include the modal script.
JHTML::_('behavior.modal');
The you define the link like this
Your text
This opens up a new window, like the mediamanager with size 640x200.
However I need to do this from a javascript that is activated by the submission of a small form, and I would like to open a url with Squeezebox where now I have window.open(myurl); in my javascript.

Does anyone know how to do this? It seems lightbox can be used from javascript with something like lighbox.open but I have not found any information on the equivalent for the modal.js Squeezebox installed with Joomla 1.5.

 
idealists
Joomla! Apprentice
Joomla! Apprentice
Posts: 33
Joined: Mon Jan 28, 2008 6:11 am

Re: Opening a SqueezeBox iframe with javascript?

Post by idealists » Tue Feb 05, 2008 12:23 pm

I would also very much like a response to this.
As I would like to be able to open an iFrame squeezebox 10seconds after the page has loaded (using settimeout).

idealists
Joomla! Apprentice
Joomla! Apprentice
Posts: 33
Joined: Mon Jan 28, 2008 6:11 am

Re: Opening a SqueezeBox iframe with javascript?

Post by idealists » Tue Feb 05, 2008 1:50 pm

I've created a bit of a hack that works for me in FF (Windows). Haven't tested it much.

In the .js file, I created the following function (just before initialize: function(options) { line)

loadModal: function(modalUrl) {
this.setContent('iframe',modalUrl);
},

And then within the "window.addEvent('domready', function() {" function, I added the following:
setTimeout("SqueezeBox.loadModal('http://www.google.com')",10000); //Loads google in an iFrame 10 seconds after page loads

I just hacked this together, head butted my way though it.  I don't know if there is a better or more correct way of doing it.
I would like to make the X,Y attributes configurable too - at the moment it is just usinbg the default that is defined in the .js file.

idealists
Joomla! Apprentice
Joomla! Apprentice
Posts: 33
Joined: Mon Jan 28, 2008 6:11 am

Re: Opening a SqueezeBox iframe with javascript?

Post by idealists » Tue Feb 05, 2008 2:40 pm

Ok

I have updated my custom mod:

Code: Select all

loadModal: function(modalUrl,handler,x,y) {
		 this.initialize();		 
		 
		 var options = $merge(options || {}, Json.evaluate("{handler: '" + handler + "', size: {x: " + x +", y: " + y + "}}"));		
		
		 this.setOptions(this.presets, options);
		 this.assignOptions();
		 this.setContent(handler,modalUrl);
		 
	},
and moved it after the initialize function:

Code: Select all

initialize: function(options) { ....... }
Then when I call it, I call it like so:

Code: Select all

<script type="text/javascript">
			window.addEvent('domready', function() {

			SqueezeBox.initialize({});					
			
			SqueezeBox.loadModal('http://www.google.com','iframe',650,400);
			 
		});
</script>

Again, just head banged my way to make this solution. Would love more experienced peoples feedback, improvements.

ewel
Joomla! Guru
Joomla! Guru
Posts: 522
Joined: Mon Oct 01, 2007 11:35 am

Re: Opening a SqueezeBox iframe with javascript?

Post by ewel » Tue Feb 05, 2008 5:44 pm

I see you answered your own question :)
For me unfortunately this does not work, as I need it for a plugin and I cannot rely on users hacking their Joomla installation. Unless perhaps it is possible to put part of your code in a plugin's code?

The way I see it, for Squeezebox to be really useful as a Joomla feature it needs to allow calls from a) form submissions passing the url, and b) javascript or php functions in modules and plugins.
It could be that this is already is the case, but I do not understand enough of the code to see how.

I do think that once it is built in Squeezebox should be a feature instead of merely being a tool for the back-end. Having this and then also installing something like Slimbox seems a waste.

ewel
Joomla! Guru
Joomla! Guru
Posts: 522
Joined: Mon Oct 01, 2007 11:35 am

Re: Opening a SqueezeBox iframe with javascript?

Post by ewel » Thu Feb 07, 2008 12:24 pm

Just had a thought.. seeing what you did, and that you are modifying a class, and remembering that I have seen things like x extends class y (not that I know exactly what that means!), would it be possible to do what you do by way of extending the class and placing the code extending the class into a module or plugin?

ewel
Joomla! Guru
Joomla! Guru
Posts: 522
Joined: Mon Oct 01, 2007 11:35 am

Re: Opening a SqueezeBox iframe with javascript?

Post by ewel » Fri Feb 08, 2008 10:16 pm

I would still like to have the built-in ability to activate Squeezebox from javascript and with a submit button, but I managed to solve my immediate problem.

So, for those who are interested, here is how I managed to get a form to work with Squeezebox using a workaround. Basically I replaced the submit button by a link.

Code: Select all

    <script type="text/javascript"><!-- 
        myfunction() {
            some stuff to change the target url based on form input
        }
    //---></script>
    <form method="POST" name="MyForm" onSubmit="javascript:void(0);" action="#">
      <span id="prompt">$prompt </span>
      <input type="text" name="textfield" onkeyup="myfunction();" onchange="myfunction();" onBlur="myfunction();"> 
      <a class="modal" href="http://targetdomain.com" rel="{handler: 'iframe', size: {x: 800, y: 600}}" id="link">[ $buttonTxt ]</a>
    </form>
The drawback of using a link is that pressing the key does not result in pressing the submit button, obviously. However it is possible to make the enter button simulate the clicking of the link. To make this work, this must be added in the text field: onKeyPress="return entertolink(event);". Then the following must be added to the javascript:

Code: Select all

      if (!document.all) {
        HTMLElement.prototype.click = function() {
          var evt = this.ownerDocument.createEvent('MouseEvents');
          evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
          this.dispatchEvent(evt);
        }
      }
function entertolink(evt) {
 if (window.event) {
  varkeyCode = event.keyCode;
 } else if (evt.which) {
  varkeyCode = evt.which;
 } else if (e || e.which) {
 varkeyCode = e.which;
 }
 if (varkeyCode == 13) {
  document.getElementById('maplink').click();
  return false;
 }
}

fidoboy
Joomla! Intern
Joomla! Intern
Posts: 57
Joined: Tue Feb 19, 2008 6:47 pm

Re: Opening a SqueezeBox iframe with javascript?

Post by fidoboy » Fri Mar 07, 2008 12:31 pm

I'm not sure to understand your solution, currently i want that my js uses the sqeezebox instead the new window. Right now, i've a function in my .js file like this:

Code: Select all

function create_form(d,txt,lang,gn,tgt){
fx_2g=d.createElement('form');
d.body.appendChild(fx_2g);
fx_2g.target=tgt;
fx_2g.method='POST';
fx_2g.action='http://myserver.com/catchit.php';
//text
t=d.createElement('input');
t.name='text';
t.type='hidden';
t.value=txt;
fx_2g.appendChild(t);
//lang
l=d.createElement('input');
l.name='lang';
l.type='hidden';
l.value=lang;
fx_2g.appendChild(l);
//gn
g=d.createElement('input');
g.name='gn';
g.type='hidden';
g.value=gn;
fx_2g.appendChild(g);
//interface
i=d.createElement('input');
i.name='interface';
i.type='hidden';
i.value='full';
fx_2g.appendChild(i);
//submit
window.open('', tgt, 'width=350,height=170,scrollbars=no,location=no,menubar=no,resizable=no,status=no,toolbar=no'); 
fx_2g.submit();
delete fx_2g;
return false;
}
How can i replace the window.open to show a modal window (sqeezebox)??

thanks in advance, regards

ewel
Joomla! Guru
Joomla! Guru
Posts: 522
Joined: Mon Oct 01, 2007 11:35 am

Re: Opening a SqueezeBox iframe with javascript?

Post by ewel » Fri Mar 07, 2008 12:39 pm

I think you would have to give the solution of idealists a try.

fidoboy
Joomla! Intern
Joomla! Intern
Posts: 57
Joined: Tue Feb 19, 2008 6:47 pm

Re: Opening a SqueezeBox iframe with javascript?

Post by fidoboy » Fri Mar 07, 2008 2:11 pm

May be that you are right, but i don't know where to put the code proposed by idealist... ???

regards,

ewel
Joomla! Guru
Joomla! Guru
Posts: 522
Joined: Mon Oct 01, 2007 11:35 am

Re: Opening a SqueezeBox iframe with javascript?

Post by ewel » Fri Mar 07, 2008 7:22 pm

I think it would be media/system/js/modal.js

fidoboy
Joomla! Intern
Joomla! Intern
Posts: 57
Joined: Tue Feb 19, 2008 6:47 pm

Re: Opening a SqueezeBox iframe with javascript?

Post by fidoboy » Sat Mar 08, 2008 12:23 am

Ok, it works, now... but there is a problem, i need to post data from a form into another domain that is opened in the modal window...

Code: Select all

function create_form(d,txt,lang,gn,tgt){
fx_2g=d.createElement('form');
d.body.appendChild(fx_2g);
fx_2g.target=tgt;
fx_2g.method='POST';
fx_2g.action='http://otherdomain.com/catchit.php';
//text
t=d.createElement('input');
t.name='text';
t.type='hidden';
t.value=txt;
fx_2g.appendChild(t);

window.open('', tgt, width=350,height=170,scrollbars=no,location=no,menubar=no,resizable=no,status=no,toolbar=no');

fx_2g.submit();
delete fx_2g;
return false;
}
as you can see, the code creates a form and posts the contents into another site, i want a modal window to open the target, and i can't figure how to do it...

regards,

ewel
Joomla! Guru
Joomla! Guru
Posts: 522
Joined: Mon Oct 01, 2007 11:35 am

Re: Opening a SqueezeBox iframe with javascript?

Post by ewel » Sat Mar 08, 2008 7:54 am

Creating a form on the fly is beyond my abilities but I did manage to open Squeezebox using a form as you can see above, by using a submission link instead of a button.

fidoboy
Joomla! Intern
Joomla! Intern
Posts: 57
Joined: Tue Feb 19, 2008 6:47 pm

Re: Opening a SqueezeBox iframe with javascript?

Post by fidoboy » Tue Mar 11, 2008 8:48 pm

Well, may be that the solution is as simple as create the form into the SqueezeBox, but i don't know how... is there any documentation available for SqueezeBox? How can i create my form into the iframe?

regards,

oc666
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 215
Joined: Wed Oct 10, 2007 9:46 am
Location: Israel, TA
Contact:

Re: Opening a SqueezeBox iframe with javascript?

Post by oc666 » Fri Apr 25, 2008 3:21 pm

To open page in squeezebox add the code.

Code: Select all

<a rel="{handler: 'iframe', size: {x: width, y: height}}" href="address" class="modal">link name</a>
replace the width, height and the href (your page link).
I just try to manipulate data from the iframe to the page which opened the iframe and I cannot do this. I try window.opener or parent objects but I got failed to do this.
http://www.embad.com - new way to insert ads to your website

ewel
Joomla! Guru
Joomla! Guru
Posts: 522
Joined: Mon Oct 01, 2007 11:35 am

Re: Opening a SqueezeBox iframe with javascript?

Post by ewel » Fri Jun 20, 2008 9:25 pm

I have made a little progress again... or so I thought.

Instead of the GHOP document explaining that the <hear> tag needs to have a javascript SqueezeBox.initialise script I used this line of code to initialise Squeezebox in my php:

Code: Select all

JHTML::_( 'behavior.modal');
In my javascript, I have something like this:

Code: Select all

function makeSqueezeBoxlink(alink) {
	alink.className = 'modal';
	alink.setAttribute("rel", '{handler: \'iframe\', size: {x:600, y:400}}');
}
var a = document.getElementsByTagName("a");
for (var i=0;i<a.length;i++){
	makeSqueezeBoxlink(a[i]);
}
Similarly, I could have done document write to make a link with the right class and rel. Anyway, like this all my links should open with SqueezeBox, but they don't.

What I do get in the view page source of my browser is as follows (aside from the mootools script tag which is also there).

Code: Select all

<link rel="stylesheet" href="/media/system/css/modal.css" type="text/css" />
<script type="text/javascript" src="/media/system/js/modal.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
	SqueezeBox.initialize({});
	$$('a.externalink').each(function(el) {
		el.addEvent('click', function(e) {
			new Event(e).stop();
			SqueezeBox.fromElement(el);
		});
	});
});
</script>
When I hardcode the rel attribute and class into the html links are opened with Squeezebox, so the initialisation works. When I check with alerts what the class and rel attribute is of links without hardcoded rel and class they are as they should be according to my javascript.

So, I am really puzzled why this does not work - perhaps modal.js does not recognise link attributes added by javascript? It seemed promising!

sourli
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Wed Sep 12, 2007 5:26 pm

Re: Opening a SqueezeBox iframe with javascript?

Post by sourli » Mon Oct 20, 2008 5:45 pm

well,
i tried this today and the only changes i made was:

1. Added the

Code: Select all

JHTML::_('behavior.modal');
in my template's index.php

2. Added the

Code: Select all

<a rel="{handler: 'iframe', size: {x: width, y: height}}" href="address" class="modal">link name</a>
inside an article.


Everything is working perfect....

ewel
Joomla! Guru
Joomla! Guru
Posts: 522
Joined: Mon Oct 01, 2007 11:35 am

Re: Opening a SqueezeBox iframe with javascript?

Post by ewel » Mon Oct 20, 2008 9:07 pm

Sure, but the point of this thread is to find out how the same effect can be achieved through javascript instead of by adding frills to an html link.

jpcabrales
Joomla! Apprentice
Joomla! Apprentice
Posts: 29
Joined: Mon Jun 23, 2008 9:39 am
Location: Cebu City, Philippines
Contact:

Re: Opening a SqueezeBox iframe with javascript?

Post by jpcabrales » Thu Nov 27, 2008 2:09 am

idealists wrote:

Code: Select all

loadModal: function(modalUrl,handler,x,y) {
		 this.initialize();		 
		 
		 var options = $merge(options || {}, Json.evaluate("{handler: '" + handler + "', size: {x: " + x +", y: " + y + "}}"));		
		
		 this.setOptions(this.presets, options);
		 this.assignOptions();
		 this.setContent(handler,modalUrl);
		 
	},
Sweet. Just what I needed. Thanks! :)

User avatar
webmonkiee
Joomla! Apprentice
Joomla! Apprentice
Posts: 17
Joined: Sat May 12, 2007 3:34 pm
Location: Los Angeles, California
Contact:

Re: Opening a SqueezeBox iframe with javascript?

Post by webmonkiee » Fri Dec 12, 2008 5:53 am

fidoboy wrote:Ok, it works, now... but there is a problem, i need to post data from a form into another domain that is opened in the modal window...
Hey fidoboy, did you ever figure this out? I'm trying to post data from a form into an opened modal window too. It should be easy by setting the form target to the modal window, but to do that we need a way to target the modal window. Is there a way to assign the "name" attribute to a modal window when opening? We can set the size but that's about all I can find.

This is driving me crazy!

Thanks for any and all help.
Jonathan

*************SOLVED - Kinda****************


I added the iFrame "name" attribute in the media/js/modal.js file around line 360.

Problem now is targeting the iFrame AFTER the squeezebox is done generating it so I can pass in the POST variables.
Zuno Studios - full service interactive design studio
http://zunostudios.com

wallabyted
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Mon Oct 15, 2007 11:54 pm

Re: Opening a SqueezeBox iframe with javascript?

Post by wallabyted » Thu Mar 26, 2009 6:15 am

Thanks for the code. This worked for me:

Initialise in PHP

Code: Select all

JHTML::_( 'behavior.modal');
My Javascript file:

Code: Select all

var MySqueezeBox = {
    
    loadModal: function(modalUrl,handler,x,y) {     
       var options = $merge(options || {}, Json.evaluate("{handler: '" + handler + "', size: {x: " + x +", y: " + y + "}}"));      
       this.setOptions(this.presets, options);
       this.assignOptions();
       this.setContent(handler,modalUrl);
   },

	extend: $extend
	
}
window.addEvent('domready', function() {
    MySqueezeBox.extend(SqueezeBox);
    MySqueezeBox.initialize({});
});
example usage:

Code: Select all

MySqueezeBox.loadModal('http://www.google.com','iframe',650,400);

JBottero
Joomla! Apprentice
Joomla! Apprentice
Posts: 49
Joined: Tue Mar 28, 2006 5:22 pm

Re: Opening a SqueezeBox iframe with javascript?

Post by JBottero » Fri Apr 24, 2009 2:35 am

The modal.js hack above is GOLD!

OC5
Joomla! Apprentice
Joomla! Apprentice
Posts: 37
Joined: Thu Feb 14, 2008 12:48 pm

Re: Opening a SqueezeBox iframe with javascript?

Post by OC5 » Wed May 13, 2009 6:38 am

Thanks for the code above.

Now I only would need to know, how to close the window from the page that's loaded into iframe?
I've disabled the close button and overlay closing function.

impactmedia
Joomla! Apprentice
Joomla! Apprentice
Posts: 33
Joined: Tue Sep 05, 2006 10:04 pm

Re: Opening a SqueezeBox iframe with javascript?

Post by impactmedia » Wed May 20, 2009 1:17 pm

I also tried this solution ... works great but the close icon does not work. What did I miss ? Can anyone help ? Thank you !

impactmedia
Joomla! Apprentice
Joomla! Apprentice
Posts: 33
Joined: Tue Sep 05, 2006 10:04 pm

Re: Opening a SqueezeBox iframe with javascript?

Post by impactmedia » Fri May 22, 2009 9:46 pm

wallabyted wrote:Thanks for the code. This worked for me:

Initialise in PHP

Code: Select all

JHTML::_( 'behavior.modal');
My Javascript file:

Code: Select all

var MySqueezeBox = {
    
    loadModal: function(modalUrl,handler,x,y) {     
       var options = $merge(options || {}, Json.evaluate("{handler: '" + handler + "', size: {x: " + x +", y: " + y + "}}"));      
       this.setOptions(this.presets, options);
       this.assignOptions();
       this.setContent(handler,modalUrl);
   },

	extend: $extend
	
}
window.addEvent('domready', function() {
    MySqueezeBox.extend(SqueezeBox);
    MySqueezeBox.initialize({});
});
example usage:

Code: Select all

MySqueezeBox.loadModal('http://www.google.com','iframe',650,400);
Anyone having the issue that the close button does not work ?

wallabyted
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Mon Oct 15, 2007 11:54 pm

Re: Opening a SqueezeBox iframe with javascript?

Post by wallabyted » Thu Jun 18, 2009 11:58 am

Re: Close button not working

I was getting the same problem on a recent project. The only thing I could see that was different to my other working versions was the order that my js files were loaded.

When I used the JDocument::addScript method to include my custom js file, it started working again.

Code: Select all

            $document = JFactory::getDocument();
            $document->addScript('path/to/script.js');
I'm not completely sure on what the order needs to be, but by doing it this way you will ensure that your js file is loaded after the mootools library and that your domready event listener will be registered before the squeezebox domready event listener.

Hope this helps.

rizariza
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sun Oct 22, 2006 6:48 am

Re: Opening a SqueezeBox iframe with javascript?

Post by rizariza » Wed Jul 15, 2009 3:24 am

I found somewhere else something along these lines, and this seems to work for me:

var dummylink = new Element('a', {
href: "http://www.google.com/" ,
rel: "{handler: 'iframe', size: {x: 650, y: 375}}"
});
SqueezeBox.fromElement(dummylink);

Is this what people are looking for?

ewel
Joomla! Guru
Joomla! Guru
Posts: 522
Joined: Mon Oct 01, 2007 11:35 am

Re: Opening a SqueezeBox iframe with javascript?

Post by ewel » Mon Jul 20, 2009 7:50 am

Probably! I have to look into it...

User avatar
PtrNrs
Joomla! Explorer
Joomla! Explorer
Posts: 355
Joined: Sat Jul 05, 2008 3:56 am
Location: Melbourne, Australia
Contact:

Re: Opening a SqueezeBox iframe with javascript?

Post by PtrNrs » Mon Aug 31, 2009 10:33 am

rizariza wrote:I found somewhere else something along these lines, and this seems to work for me:

var dummylink = new Element('a', {
href: "http://www.google.com/" ,
rel: "{handler: 'iframe', size: {x: 650, y: 375}}"
});
SqueezeBox.fromElement(dummylink);
Thank you rizariza, that fixes the close button problem brilliantly but I'm not clever enough in Javascript to know how to pass the URL, x & y to a javascript function to do the same thing.

Any ideas?
Pete Nurse, Jix Software
http://www.jix.com.au
Jix: The Joomla Import Export & Update Utility

ForkyD
Joomla! Apprentice
Joomla! Apprentice
Posts: 11
Joined: Tue Nov 10, 2009 1:00 pm

Re: Opening a SqueezeBox iframe with javascript?

Post by ForkyD » Tue Nov 24, 2009 9:14 am

idealists wrote:Ok

I have updated my custom mod:

Code: Select all

loadModal: function(modalUrl,handler,x,y) {
		 this.initialize();		 
		 
		 var options = $merge(options || {}, Json.evaluate("{handler: '" + handler + "', size: {x: " + x +", y: " + y + "}}"));		
		
		 this.setOptions(this.presets, options);
		 this.assignOptions();
		 this.setContent(handler,modalUrl);
		 
	},
and moved it after the initialize function:

Code: Select all

initialize: function(options) { ....... }
Then when I call it, I call it like so:

Code: Select all

<script type="text/javascript">
			window.addEvent('domready', function() {

			SqueezeBox.initialize({});					
			
			SqueezeBox.loadModal('http://www.google.com','iframe',650,400);
			 
		});
</script>

Again, just head banged my way to make this solution. Would love more experienced peoples feedback, improvements.
Been looking for a solution to this, THANK YOU!! <3

 

Locked

Return to “Templates for Joomla! 1.5”