using javascript functions with koha
Hi, I have links that rely on 2 javascript functions that show/hide pop up div. Unfortunately I cam not sure where I can place them as the 'opacuserjs' only accepts javascript embedded in: $(document).ready(function(){}); Below I have posted the two functions. Do i have to create a separate javascript file and reference it or can the fuctions be editted to work in 'opacuserjs'? <script type="text/javascript"> function openpopup(id){ //Calculate Page width and height var pageWidth = window.innerWidth; var pageHeight = window.innerHeight; if (typeof pageWidth != "number"){ if (document.compatMode == "CSS1Compat"){ pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; } else { pageWidth = document.body.clientWidth; pageHeight = document.body.clientHeight; } } //Make the background div tag visible... var divbg = document.getElementById('bg'); divbg.style.visibility = "visible"; var divobj = document.getElementById(id); divobj.style.visibility = "visible"; if (navigator.appName=="Microsoft Internet Explorer") computedStyle = divobj.currentStyle; else computedStyle = document.defaultView.getComputedStyle(divobj, null); //Get Div width and height from StyleSheet var divWidth = computedStyle.width.replace('px', ''); var divHeight = computedStyle.height.replace('px', ''); var divLeft = (pageWidth - divWidth) / 2; var divTop = (pageHeight - divHeight) / 2; //Set Left and top coordinates for the div tag divobj.style.left = divLeft + "px"; divobj.style.top = divTop + "px"; //Put a Close button for closing the popped up Div tag if(divobj.innerHTML.indexOf("closepopup('" + id +"')") < 0 ) divobj.innerHTML = "<a href=\"#\" onclick=\"closepopup('" + id +"')\"><span class=\"close_button\">X</span></a>" + divobj.innerHTML; } function closepopup(id){ var divbg = document.getElementById('bg'); divbg.style.visibility = "hidden"; var divobj = document.getElementById(id); divobj.style.visibility = "hidden"; } </script> Thanks
Unfortunately I cam not sure where I can place them as the 'opacuserjs' only accepts javascript embedded in:
$(document).ready(function(){});
That isn't true. The opacuserjs preference accepts any kind of inline JavaScript you want to put in it. Anything which would normally be included inside <script> tags on your page.
Below I have posted the two functions. Do i have to create a separate javascript file and reference it or can the fuctions be editted to work in 'opacuserjs'?
No, you can embed this code in opacuserjs. But it looks to me like the code is intended to work with an onclick event attached to an element on the page. What is the script intended to do? Do you have a working example outside of Koha? -- Owen -- Web Developer Athens County Public Libraries http://www.myacpl.org
Hi, Yes there is an onclick event for a couple of links that are supposed to show/hide the pop up divs. The original source is below, I had wanted to have the same pop up effect on my OPAC page. <HTML> <HEAD> <script type="text/javascript"> function openpopup(id){ //Calculate Page width and height var pageWidth = window.innerWidth; var pageHeight = window.innerHeight; if (typeof pageWidth != "number"){ if (document.compatMode == "CSS1Compat"){ pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; } else { pageWidth = document.body.clientWidth; pageHeight = document.body.clientHeight; } } //Make the background div tag visible... var divbg = document.getElementById('bg'); divbg.style.visibility = "visible"; var divobj = document.getElementById(id); divobj.style.visibility = "visible"; if (navigator.appName=="Microsoft Internet Explorer") computedStyle = divobj.currentStyle; else computedStyle = document.defaultView.getComputedStyle(divobj, null); //Get Div width and height from StyleSheet var divWidth = computedStyle.width.replace('px', ''); var divHeight = computedStyle.height.replace('px', ''); var divLeft = (pageWidth - divWidth) / 2; var divTop = (pageHeight - divHeight) / 2; //Set Left and top coordinates for the div tag divobj.style.left = divLeft + "px"; divobj.style.top = divTop + "px"; //Put a Close button for closing the popped up Div tag if(divobj.innerHTML.indexOf("closepopup('" + id +"')") < 0 ) divobj.innerHTML = "<a href=\"#\" onclick=\"closepopup('" + id +"')\"><span class=\"close_button\">X</span></a>" + divobj.innerHTML; } function closepopup(id){ var divbg = document.getElementById('bg'); divbg.style.visibility = "hidden"; var divobj = document.getElementById(id); divobj.style.visibility = "hidden"; } </script> <style type="text/css"> .popup { background-color: #DDD; height: 300px; width: 500px; border: 5px solid #666; position: absolute; visibility: hidden; font-family: Verdana, Geneva, sans-serif; font-size: small; text-align: justify; padding: 5px; overflow: auto; z-index: 2; } .popup_bg { position: absolute; visibility: hidden; height: 100%; width: 100%; left: 0px; top: 0px; filter: alpha(opacity=70); /* for IE */ opacity: 0.7; /* CSS3 standard */ background-color: #999; z-index: 1; } .close_button { font-family: Verdana, Geneva, sans-serif; font-size: small; font-weight: bold; float: right; color: #666; display: block; text-decoration: none; border: 2px solid #666; padding: 0px 3px 0px 3px; } body { margin: 0px; } </style </HEAD> <body> <a href="#" onclick="openpopup('popup1')">Open Popup Div #1</a> <div id="popup1" class="popup"> Popup Div Tag #1 content goes here! </div> <a href="#" onclick="openpopup('popup2')">Open Popup Div #2</a> <div id="popup2" class="popup"> Popup Div Tag #2 content goes here! </div> <div id="bg" class="popup_bg"></div> </body></HTML>
You still haven't told us exactly what you're trying to do, but you'll find that all this code works exactly as you expect it to if you plug it into the right preferences: The JavaScript goes into opacuserjs The CSS goes into OPACUserCSS The HTML can go into OpacMainUserBlock At the very least you can test it that way and see that it works. If your customization depends on adding an onclick attribute to HTML generated by Koha then you have to rethink how to approach it. -- Owen -- Web Developer Athens County Public Libraries http://www.myacpl.org
participants (2)
-
Darth_D -
Owen Leonard