Opening a SqueezeBox iframe with javascript?

[davidosullivan]

You guys look like the people to ask about this since what you have been doing here looks a bit more complex than what I need but you have done it!

What I am trying to do is pass the contents of a tinymce text area to a modal popup. I will be dynamically replacing the article content in the popup (via a template) with the mce content that I am passing along to the targeted page in the link.

So far I have made what I need to do work in Firefox but in IE it just goes to a blank page because of the href=javascript:void();

This is the link I am using:-

Code: Select all

<a id="fullscreenpreviewbutton" onclick="fullsizeprevlink('fullscreenpreviewbutton');" href="javascript:void();" rel="" title="Full Size Preview" class="modal-button">Full Size Preview</a>

and this is the js function that repopulates the href and rel values from the mce content when the user clicks the link:-

Code: Select all

function fullsizeprevlink(id) {
	adcontent = tinyMCE.activeEditor.getContent(); 
        adcontent = php_urlencode(adcontent);//this is another function I wrote
	popuphref = "index.php?option=com_resource&controller=article&article= (and so on...) &previewcontent=" + adcontent;
	document.getElementById(id).href= popuphref;
	xval = tinyMCE.activeEditor.dom.getStyle('adpreview', 'width'); 
	yval = tinyMCE.activeEditor.dom.getStyle('adpreview', 'height');
	popuprel = "{handler: 'iframe', size: {x: " + xval + ", y: " + yval + "}}";
	document.getElementById(id).rel = popuprel; 
	}

As I say this works fine in FF but not in IE- in IE I get taken to a 'Internet Explorer cannot display the webpage' and this seems to be because of the void in the href, I think.

Hopefully I am not barking up the wrong tree here and hopefully compared to what you have all been doing its a simple solution.

Any help most welcome though!

[goslingcools]

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?

YES!!! Thanks a lot!

[mojito]

I am finding this script non responsive friendly - is broken on my iphone for example Joomla 3. Cant we get something that will accept % or work out the max screen width available if not set it standards to 600px which is not working on iphone 4 and many other phones.

[carsten888]

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);

I'm just getting an error in console

Uncaught ReferenceError: $extend is not defined

I'm just trying to open a preview from my component toolbar button:

Code: Select all

<?php 
JHTML::_('behavior.modal');
?>
<script>

Joomla.submitbutton = function(task){	
	if(task=='preview'){		
		MySqueezeBox.loadModal('http://www.google.com','iframe',650,400);
	}			
}

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({});
});

</script>

[mojito]

MySqueezeBox.extend(SqueezeBox);

extend is a method of the library MySqueezeBox - so check that you are loading this library - look in the source and see what js files you are importing.

[carsten888]

Code: Select all

<script src="../media/system/js/core-uncompressed.js" type="text/javascript"></script>
  <script src="/_dev30/media/jui/js/jquery.min.js" type="text/javascript"></script>
  <script src="/_dev30/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
  <script src="/_dev30/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
  <script src="/_dev30/media/jui/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="/_dev30/media/system/js/mootools-core.js" type="text/javascript"></script>
  <script src="/_dev30/media/system/js/core.js" type="text/javascript"></script>
  <script src="/_dev30/media/system/js/multiselect.js" type="text/javascript"></script>
  <script src="/_dev30/media/jui/js/chosen.jquery.min.js" type="text/javascript"></script>
  <script src="/_dev30/media/system/js/mootools-more.js" type="text/javascript"></script>
  <script src="/_dev30/media/system/js/modal.js" type="text/javascript"></script>

I got on the same page a href to the same modal iframe, which works fine. So I guess that is loaded correctly. How to load the extra extend code?

[mojito]

I dont see the library loaded here - so is it a plugin that isnt activated ?