JavaScript - Squeezebox With Print Button
I'm working with the squeezebox modal.js implemented with Joomla! for my images in some extra fields. I'm trying to add a print button functionality in order to print the image within the lightbox.
Adding the button was fairly easy, I simply copied and pasted this.closeBtn=(new Element("a",{id:"sbox-btn-close",href:"#"})).inject(this.win); and made this.printBtn=(new Element("a",{id:"sbox-btn-print",href:"#"})).inject(this.win); I then made my print button png, went into the modal.css, added this: #sbox-btn-print { position: absolute; width: 30px; height: 30px; right: 10px; top: -15px; background: url(../images/modal/print_btn.png) no-repeat center; border: none; } And boom, print button, however making it work right is certainly not coming along as easy. I tried changing the href to javascript:window.print() but that just prints the contents of the browser, not the image in the box, no bueno. I then tried pushing the button functionality into a separate javascript function, but couldn't even get that far. I'm sure if I tweak it enough I can make it work, but I'm not all that great at programming within javascript. I'm fairly proficient with actionscript, php and css, I just don't know the syntax all involved here. If anyone can point me in the right direction that would be appreciated. Sadly I can't simply switch it out with another lightbox that already has the option to print, as Joomla! K2 Extra Fields doesn't really give you that option. Help! Similar TutorialsAnyone familiar with Squeezebox (http://digitarald.de/project/squeezebox/), any ideas of the best way to open this via an onclick?
Hi, I'm trying to make my javascript linked "print" button NOT appear in browsers with js disabled? I'm a total js noob. Any help will be appreciated. Thanks. Here's my code: Code: <a href="javascript:window.print()"><img src="images/PrintButton.png"></a> Hello All. What my script does is if you do not select a radio button and you hit submit an error will pop up saying please select game1. this is taken from the name of the radio button.. How can i make it so it prints out the VALUES of the 2 radio buttons. end result should print please select Baltimore Ravens vs. Cincinnati Bengals rather than please select game1. Code: function isChecked(radgrp) { var i = radgrp.length; do if (radgrp[--i].checked) return true; while (i); return false; } function validateTest(els) { var focus_me = null, msg = ""; if (!isChecked(els.game1)) { msg += " Game #1\n"; focus_me = focus_me || els.game1[0]; } if (!isChecked(els.game2)) { msg += " Game #2\n"; focus_me = focus_me || els.game2[0]; } if (!isChecked(els.game16)) { msg += " Game #16\n"; focus_me = focus_me || els.game16[0]; } if (msg != "") { var prefix = "\n WARNING: The following Games(s) were not selected:\n\n"; var suffix = "\nClick OK to submit your picks anyway.\n\n"; var suffix = suffix + "\n Click CANCEL to correct your picks." var ask = confirm(prefix + msg + suffix); if (ask) { if (focus_me) focus_me.focus(); return true; } else{ return false; } } } Here is the radio button. If you dont select the radio button i want the javascript validation pop but to say "please select Baltimore Ravens vs. Cincinnati Bengals rather than game1 like it does now. Code: <INPUT TYPE=RADIO NAME="game1" VALUE="Baltimore Ravens">Baltimore Ravens<BR> <INPUT TYPE=RADIO NAME="game1" VALUE="Cincinnati Bengals">Cincinnati Bengals<BR> Thanks Hey guys. This is vague because I dont know what exactly to tell you but please reply with me so I can fix this. I want to add something to my forum. Specifically, I want to add a HTML and Picture button for when you go to reply. Like posting an article here, there are also these options (font, alignment, insert image) I do not know how to achieve this but shouldnt be too hard. Here are the two sources you will need to look through to help me fix the forum. http://neoweather.com/FWFORUM.JS http://static.websimages.com/JS/fw.js THANKS Hey guys. I want to add something to my forum. Specifically, I want to add a HTML and Picture button for when you go to reply. Like posting an article here, there are also these options (font, alignment, insert image) I do not know how to achieve this but shouldnt be too hard. Here are the two sources you will need to look through to help me fix the forum. http://neoweather.com/FWFORUM.JS http://static.websimages.com/JS/fw.js THANKS Hi, I am not entirely sure what I am doing wrong here, and I have been looking at this for ages, so apologies in advance if I have become so bleary eyed I can't see something simple. I use php to create buttons based on values pulled for a table. The problem I have is when you click on the first button the javascript function works great, when you click on the next button you get the same output even though it should be different results. I am working in ff and I can see on my firebug console that the javascript function is being called, but it is not passing the new value of the second or third button, it just keeps repassing the value of the first button. So not entirely sure where I am going wrong here. My page is: Code: <script type="text/javascript"> function loadXMLDoc2(File,ID,Msg){ if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { try{ xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById(ID).innerHTML=xmlhttp.responseText; } } var params=Msg; xmlhttp.open("POST",File,true); xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache"); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.setRequestHeader("Content-length", params.length); xmlhttp.setRequestHeader("Connection", "close"); xmlhttp.send(params); } </script> <head> <body> <?php $con = mysql_connect("localhost","user","password"); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("mydb", $con); $result = mysql_query("SELECT DISTINCT theme FROM goods WHERE category='{$_POST['category']}' ORDER BY theme DESC"); while($row = mysql_fetch_array($result)){ echo '<input type="text" class="hidden" name="theme" id="theme" value="' . $row['theme'] . '" ><input type="button" class="button3" name="product" id="product" value="' . $row['product'] . '" onClick="loadXMLDoc2(\'getShow.php\',\'txtHint\',\'theme=\'+encodeURI(document.getElementById(\'rtheme\').value))" > '; } echo '<br /><br /> <div id="txtHint"><div> <br /> <br />'; mysql_close($con); ?> And getShow.php produces a table with a list of product images, names and prices, based on theme. So basically not sure where I am going wrong here? i'm still a relative noob and this has me stuck - i have a save button with a "save as copy" in the save dropdown list. add new item directs to a premade/formatted project that is used as a template, so on that item i only want/need the "save as copy" but on all other items that use the form i need to only have the "save" function. is there any way to either change the function of the button depending on item that is being viewed in the edit screen OR hide the "save" button and only show the button associated with "save as copy - and vis versa for the rest of the items?? current button code is - protected function getToolbar() { $options = array(); $user = JFactory::getUser(); $create_ms = $user->authorise('core.create', 'com_pfmilestones'); $create_task = $user->authorise('core.create', 'com_pftasks'); $options[] = array( 'text' => 'JSAVE', 'task' => $this->getName() . '.save'); $options[] = array( 'text' => 'Save as new project', 'task' => $this->getName() . '.save2copy', 'options' => array('access' => ($this->item->id > 0))); PFToolbar::dropdownButton($options, array('icon' => 'icon-white icon-ok')); item used as template is id=8 any help or suggestions would be greatly appreciated.. i got javascripts button : Code: <input type="button" value="select" onClick="document.getElementById('input').select()" /> how can i transform "button" to image button (gif) Hi All, I want to show an alert when the page print was sucessfull completed.Indetail if user gives to print then he will able to print or cancel that page.if he print after completion of print i want show an sucessfull alert message.How can i handle this ? Hey, I need to print a PDF from a link, found this Javascript but can't seem to get it working... looks a little bit screwy too... with the script language underscores and stuff and embed tag... i'm looking for more of an a href solution... any thoughts? i also came across the link rel alternate media tag but couldn't get that to work either. Code: <embed src ="<filePath>" width="0" height="0" name="pdfFile"> <script_Language_="javaScript"> function print(){ document.all.pdfFile.print(); } </script> Hi, I want a link on my website where when you press it, it print screens. somthing like, <a href=printscrn();">Print Screen</a> anyone any ideas? Simon Hello! I have a pretty straight forward question dealing with JQuery/Javascript (I'm pretty new to both, so the syntax is still escaping me). I have a javascript file that holds an array of objects inside of it (addresses to be exact) and I then need to take that array and call it to print into the Title attribute of a <li> after the list has been populated. Below is the Javascript arrray: Code: var banner_data = [ "address1","address2","address3","address4"]; var obj = { one:"address1", two:"address2", three:"address3", four:"address4" } And this is how it is being called in the HTML: Code: $('ul>li').each(function(){ var $this = $(this); // current list item var idx = $this.index(); var thisAddress = banner_data[idx]; $this.attr('title', thisAddress.append[4]) }); any thoughts? I have jQuery 1.7.1 installed, a fully valid html/css and a proper doctype (just to cover our bases haha) I have the some text loaded in light box with background faded. i want the print button in the light box so that when user click on that only the contents of light box is printed and printer box opens up. How to do that?? Hi everyone! I need a little help with something. I have a page with several links that when clicked open a modal window. The same window for each link, with a form. However inside the form I need to print the id of the link that was clicked. Like so: <a href="#" id="1">Link 1</a> <a href="#" id="2">Link 2</a> <a href="#" id="3">Link 3</a> <form> ....somehow print/echo the id of the link... </form> Is this possible? Does anyone know how to do that? I'd appreciate any help! hey there i was wondering if anyone knows how to get a print option button in a pop up window , i am using html with javascript to create a currency converter i have a button on my main page which opens up a popup window with information taken and totalled from the user input , i would like to be able to offer the option to print this window off . code is function open_win(){ myWindow=window.open('','','width=300,height=300'); myWindow.document.write("<p>Current sterling recieved</p>",sterling_total,"<p>Total commision recieved</p>",commision_total,"<p>Total Money Recieved</p>",running_total); myWindow.focus(); } Dear all, I would like to use javascript that prints randomly one string to the string, from an array of predefined string. How do you think I should start thinking that? Alex Hey there guys, I'm working with an AJAX request that returns some stuff to print in 2 boxes. All working great, so I decided to make something fluffy, when I click a result in the AJAX request, he filters the clicked result, so you only see that clicked row. When clicked again, the old results will return. All working great. Now, my problem, I wanted a checkbox after every row in the search results and when the user clicks twice on a result to filter it and than goes back to the old results to check the checkboxes again that were checked before filtering that component. I made the functions and it didn't work till I put some alerts in, when the return function got some time to finish printing (like with the user had to click on OK in the alert) it worked. When I deleted the alerts, it didn't work again... I searched on the internet, found a function to wait for an image to load or smth similar and I found some guys that used a function to wait for a specific time (1 sec for example) and that's not what I want. If I use a specific waittime it can still fail if the PC is slow, or whatever, it's just not nice coding. So, is there something I can do so it waits till my AJAX request has been printed? Thanks! 'x. I would like to create a print preview window that will display only the main content of the page that a person would really want to print. I found a script that didn't do that, but that I was able to adapt, somewhat. It doesn't fully work though and I can't get it any better. Here is what I have... <html> <head> <title></title> <script LANGUAGE="JavaScript"> function displayHTML(printContent) { var inf = printContent; win = window.open("print.htm", 'popup', 'toolbar = no, status = no'); win.document.write(inf); } </script> </head> <body> <div id="printarea">Print this stuff.</div> <a href="javascript:void(0);" onclick="displayHTML(printarea.innerHTML)">Print Preview</a> </body> </html> In mozilla it opens the new window but continues to be thinking about something indefinitly. In Safari the new window opens but there is no content. In IE it seems to work fine. I haven't tested NS yet, nor have I tested any of this on a PC. Thanks for any help. I've got a simple script that generates a button that sends to the printer when clicked. But a totally new thing to me is finding a way to update a "printed_unprinted" field in the database for that item. Anyone have experience with this? Right now, I just have: Code: <style type="text/css" media="print"> @page { size:8.5in 11in; margin: 1cm } .printbutton { visibility: hidden; display: none; } </style> <script> document.write("<input type='button' " + "onClick='window.print()' " + "class='printbutton' " + "value='Print This Page'/>"); </script> I assume I could reference a php file? Just something quick like: PHP Code: <?php include("include/conn.php"); $id = mysql_escape_string($_POST['printed']); $query_update = "UPDATE tbl_registration SET reg_hardcopied = '1' WHERE reg_id = '$id'"; $dberror = ""; $ret = mysql_query($query_update); if(!$ret){} else{ //back to referrer } ?> |