With mootools-core.js I would say, yes you can use it anywhere. The worst it might do is allow a script that uses it to fail without giving an error message as to why. That script would have failed anyway though.
The script.responsive.js is different. It's tailor made to popup print a page in that iframe that has a form and an input button with the value of "Print" on it when that iframe is launched using SqueezeBox activated via an a tag with a class of modal on a page with contact-us in the URL. So, yeah, you can use it pretty much anywhere you could use the old script.responsive.js file, but it won't do anything unless it encounters that exact sort of page in that exact context/circumstances. This is the code that was added (it's independent of the rest of the script and is just tacked on at the end):
Code:
if(location.href.indexOf('contact-us') > -1){
jQuery(function($){
var timer, size, $iframe, $form, $print, index, iframedocref;
function printPage(){
var html, css, csss_file, printWin;
css = "button{display:none;}";
css = "<style type='text/css'>"+css+"</style>";
css_url = '';
if ( css_url !== '' ) {
css_url = "<link rel='stylesheet' type='text/css' href='"+css_url+"' media='print' />";
}
html = '<html><head>'+css+css_url+'</head>'+$form.html()+'</html>';
printWin = window.open('', '', 'left=100, top=100, width=600, height=400, toolbar=no, scrollbars=yes, status=yes' );
printWin.document.write(html);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
}
$('a.modal').click(function(){
timer = setInterval(function(){
size = ($iframe = $('#sbox-window iframe')).size();
if(size === 1){
clearInterval(timer);
index = $('iframe').index($iframe);
$iframe.load(function(){
iframedocref = window.frames[index].document;
$form = $(iframedocref.forms[0]);
$print = $('input[value="Print"]', iframedocref);
if($print.size()){
$print.unbind('click').click(printPage).get(0).onclick = function(){};
}
});
}
}, 20);
});
});
}
It should be pretty easy to follow. When I get more time I will annotate key variables, lines to make it clearer. It could be tweaked to popup print other things.
I put it in that file because it uses jQuery and so does the rest of that file, so it's fairly safe to assume that jQuery will be available to it. And because that file was already in use on the contact-us page.
Here's the annotated version:
PHP Code:
if(location.href.indexOf('contact-us') > -1){ //if the page has contact-us in it's address
jQuery(function($){ //once the page has been parsed
var timer, size, $iframe, $form, $print, index, iframedocref;
function printPage(){ //function used to popup print the page, could be made standalone and/or modiied slightly to be used for other popup printing duties
var html, css, css_url, printWin;
css = "button{display:none;}"; //add css to not print or show the button elements in the popup (can be changed to do other stuff, or removed if not needed)
css = "<style type='text/css'>"+css+"</style>";
css_url = ''; //not currently used, can add a print stylesheet url to the popup
if ( css_url !== '' ) {
css_url = "<link rel='stylesheet' type='text/css' href='"+css_url+"' media='print' />";
}
// $form.html() in the below line is the HTML of the first form on the document with
// the "Print" button on it, could be something else, it's what will be printed:
html = '<html><head>'+css+css_url+'</head>'+$form.html()+'</html>';
printWin = window.open('', '', 'left=100, top=100, width=600, height=400, toolbar=no, scrollbars=yes, status=yes' );
printWin.document.write(html);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close(); //not executed in Opera for some reason, user can manually close easily enough
}
$('a.modal').click(function(){ //when an a tag with a class of modal is clicked
timer = setInterval(function(){ //check repeatedly for the appearance of an iframe in the
size = ($iframe = $('#sbox-window iframe')).size(); // SqueezeBox div
if(size === 1){ //when found
clearInterval(timer); //stop checking
index = $('iframe').index($iframe); //find out numerically which iframe element on the page it is
$iframe.load(function(){ //assign an onload event to it
iframedocref = window.frames[index].document; //access its document via its numerical reference in the top page's window collection
$form = $(iframedocref.forms[0]); //find the first form on that document, currently used in the printPage function above to determine what to print
$print = $('input[value="Print"]', iframedocref); //find an input button or buttons on it with a value of "Print"
if($print.size()){ //if there are any assign click behavior to it/them (the printPage function) and remove other click behaviors from it/them
$print.unbind('click').click(printPage).get(0).onclick = function(){};
}
});
}
}, 20); //20 millisecond polling for interval once a.modal is clicked, until it launches its iframe
}); // END when an a tag with a class of modal is clicked
}); //END once the page has been parsed
} //END if the page has contact-us in its address
While I annotated I saw that:
Code:
var html, css, csss_file, printWin;
should be:
Code:
var html, css, css_url, printWin;
Using a text only editor like NotePad, fix that in your live copy.
Reply With Quote
Bookmarks