|
JavaScript - Disable Right Click On Images Opened In New Window
Hi,
I have a thumbnail gallery on my website. The thumbnails can be opened in a new window using: Code: <a href="/images/flowers22.jpg" rel="nofollow" target="_blank"><img src="images/flowers.jpg" alt="flowers" onClick="MM_openBrWindow('/images/flowers22.jpg','','status=yes,width=630,height=379');return false" /></a>
I have inserted javascript code into my .js stylesheet to disable the right clicking of images on the page where the thumbnails a Code: var clickmessage="Apologies, images cannot be copied."
function disableclick(e) {
if (document.all) {
if (event.button==2||event.button==3) {
if (event.srcElement.tagName=="IMG"){
alert(clickmessage);
return false;
}
}
}
else if (document.layers) {
if (e.which == 3) {
alert(clickmessage);
return false;
}
}
else if (document.getElementById){
if (e.which==3&&e.target.tagName=="IMG"){
alert(clickmessage)
return false
}
}
}
function associateimages(){
for(i=0;i<document.images.length;i++)
document.images[i].onmousedown=disableclick;
}
if (document.all)
document.onmousedown=disableclick
else if (document.getElementById)
document.onmouseup=disableclick
else if (document.layers)
associateimages()
However, when the images open in a new window, the 'no right click' function does not apply. Does anyone know how to disable the right click for the newly opened images? Many thanks! Similar Tutorialsi have this code i need to close the parent.html window when the child window opened, i need the code for that working well in IE and Firefox Parent.html <HTML> <SCRIPT TYPE="text/javascript"> function sendTo() { window.open('child.html','_blank','resizable=yes,width='+(screen.width-500)+',height='+(screen.height-500)+''); } </SCRIPT> <BODY > <form name="form"> <input type="text" value="" name="text1" id="pdetails1"> <input type="text" value="" name="text1" id="pdetails2"> </br> <input type="submit" value="submit" onClick="sendTo()"> </BODY> </HTML> child.html <html> <body> <form> <input type=text name="text5" value=""> <input type=submit name="submit"value="submit"> </form> </body> </html> Here is the program: http://www.1728.com/newwindow.htm Basically, I want to input a number in the input box, which assigns a number to the variable numval located at document.box1.b1. When clicking on the "new window" button, an alert displays the input box value, then another window opens and displays the integers 1 through 12 and the amount squared. I would like the new window to obtain the number from the previous window so that the new window will display integers (and their squares) from 1 to the value of numval. Here is my scenario, i have a html that allows the user to retrieve .pdf file from the server. If the users are trying to open the html again, mean the user open a new tab/window to the same html url, the window will prompt the user that the html is already opened. The user will need to close the old html tab/window first before open a new one. Is it possible to stop the users to open the new same html file before he/she closes the old one ? Is there any link that teach the tutorial about this ? I am wondering do i need to use cookies in the browser to store the url in order to compare to the new tab/window url ? Thanks for helping. I appreciate this a lot. Hello guys. I've been struggling on how to make this work. I have a problem in Javascript when it comes to passing of value in a input type field. page1.html Code: <html>
<head><title></title></head>
<form action="" method="post>
<input type="text" name="weight" value=""><a href="hw_calculator.html" target="name" onclick="window.open('hw_calculator.html','name','height=270,width=370,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes'); return false;"> calculate </a>
</form>
</html>
hw_calculator.html Code: <html>
<head>
<title>
Height Converter (Metric/Standard)
</title>
</head>
<body>
<FORM>
<INPUT type=hidden value="(Math.round((P.value * 0.45359)*100))/100" name=K_expr>
<INPUT type=hidden value="(Math.round((K.value / 0.45359)*100))/100" name=P_expr>
<INPUT type=hidden value="(Math.round((F.value * 30.48 + I.value * 2.54)*100))/100" name=C_expr>
<INPUT type=hidden value="(Math.floor(C.value / 30.48))" name=F_expr>
<INPUT type=hidden value="(Math.round(((C.value - (Math.floor(C.value / 30.48) * 30.48)) / 2.54)*100))/100" name=I_expr>
<INPUT type=hidden value="(Math.round(P.value * 0.45359))" name=K_exprrnd>
<INPUT type=hidden value="(Math.round(K.value / 0.45359))" name=P_exprrnd>
<INPUT type=hidden value="(Math.round(F.value * 30.48 + I.value * 2.54))" name=C_exprrnd>
<INPUT type=hidden value="(Math.floor(C.value / 30.48))" name=F_exprrnd>
<INPUT type=hidden value="(Math.round((C.value - (Math.floor(C.value / 30.48) * 30.48)) / 2.54))" name=I_exprrnd>
<h2>Height Converter</h2>
<table border="0" bgcolor="#FFFF99" cellspacing="6" cellpadding="6">
<tr>
<td colspan>
<p class="conv" style="margin-top: 10px; margin-bottom: 10px"><b>STANDARD</b></p>
</td>
<td></td>
<td colspan>
<p class="conv" style="margin-top: 10px; margin-bottom: 10px"><b>METRIC</b></p>
</td>
</tr>
<tr>
<td>
<p class="conv" style="margin-top: 10px; margin-bottom: 10px">Feet : <input maxLength=1 size=1 value=0 name=F> Inches : <input maxLength=2 size=1 value=0 name=I>
</td>
<td>
<p class="conv" style="margin-top: 10px; margin-bottom: 10px"> = </p>
</td>
<td>
<p class="conv" style="margin-top: 10px; margin-bottom: 10px"><input maxLength=3 size=1 value=0 name=C disabled> cm.</p>
</td>
</tr>
<tr>
<td class="conv" colspan="2">
<input type="button" name="Taste" value="Calculate"
onclick="if (rounded.checked == true) {
eval('C.value = ' + this.form.C_exprrnd.value);
eval('K.value = ' + this.form.K_exprrnd.value) }
else {
eval('C.value = ' + this.form.C_expr.value);
eval('K.value = ' + this.form.K_expr.value)
}">
<INPUT type=checkbox name="rounded" value="rounded" checked disabled><font size="1" face="Verdana">Rounded Result</font>
</td>
</tr>
</table>
<p class="conv" style="margin-top: 10px; margin-bottom: 10px">
</body>
</html>
I want the value of Code: <input maxLength=3 size=1 value=0 name=C disabled> , this is from hw_calculator.html, to be passed on the Code: <input type="text" name="weight" value=""> on page1.html. How can I do this? Huge thanks. Hello, Thanks for reading. This is my first post, I hope it's not too stupid. Should I disable the right click option or not? I have a gallery site, I don't want people to be able to copy the images with the default right click over an image. From a professional looking site point of view I suppose I would be messing with the functionality a bit too much, OR is it OK in this instance to disable the click. I know how to write the code to disable the click, but what I was thinking was maybe it would be better to leave the right click but change the menu options? I'm not sure how to change the menu options, any suggestions would be appreciated Here is a link to the site. http://www.thephotographbox.com/?ID=3 (It's still in the early stages on development) Thanks for any advice. Derek. Hi guys, At the moment i have this code which disable the middle button in Safari and Chrome.. Code: $('body').mousedown(function(e){
if(e.button==1)
return false
}
);
How can I disable it in Firefox and IE?.. i think IE middle button ==4 but its not working for me. Thanks in advance! Hi Experts, I am trying to open a popup window on clicking a link. It works fine, but all I need now is to disable the address/URL bar from the window for all browsers. I am using the below script... Code: <script type="text/javascript">
<!--
function popup(url)
{
var width = 600;
var height = 400;
var left = (screen.width - width)/2;
var top = (screen.height - height)/2;
var params = 'width='+width+', height='+height;
params += ', top='+top+', left='+left;
params += ', directories=no';
params += ', location=no';
params += ', menubar=no';
params += ', resizable=no';
params += ', scrollbars=yes';
params += ', status=no';
params += ', toolbar=no';
newwin=window.open(url,'windowname5', params);
if (window.focus) {newwin.focus()}
return false;
}
// -->
</script>
Code: <a href="javascript: void(0)"
onclick="popup('/examples/index.php')">preview</a>
Please guide me how can I do that... Thanks. Someone helped me earlier with this script that sets a 10 second timeout on a submit button once it's pressed. After 10 seconds the "disabled" attribute is removed and is added back when a user presses the button. Code: function enable() {
var x = document.getElementById("reload");
x.disabled = false;
}
function disable() {
var x = document.getElementById("reload");
$(function(){
$('#tagwallMessages').load('member/tagwall_load.php');
});
x.disabled = true;
setTimeout('enable()', 5000);
}
Code: <input type="button" id="reload" onclick="disable()" value="Click!" /> However, I am now setting up the page with images (the input button is too plain and ugly). I have two images for when the "disabled" attribute is being added and removed, how can I make the script swap between these two? My first image says "SUBMIT" - the other image is the same, but faded out a bit, giving it the "disabled"-button-feeling. Help is appreciated. Hi all, I am looking for this javascript, script that when I click a specific link 1. Opens a new window 2. Specifies a specitic window title 3. Load an image on it (there will be no text but only an image shown) Could you please help me understand how I do that? Regards Alex I have a sitelock.com image on my website that when clicked on, shows info that my site is verfifed through them. However, when clicking on the image it opens up in a whole new window. Pathetic sitelock.com will offer no support in getting this in a popup window. I need some help please in getting this to open in a popup window that I can resize to any size I want and to only have the address bar showing up top, no toolbars or anything else. My website is in joomla and I have a plugin called 'sourcerer' that will allow me to insert code anywhere i want. Here is the code that sitelock.com gave me: <a href="https://www.sitelock.com/verify.php?site=ecig-skins.com" target="_blank" ><img alt="website security" title="SiteLock" border="0" src="//shield.sitelock.com/shield/ecig-skins.com"/></a> Any help is appreciated Hi I wrote following code for the purpose to single right click to open new window, while left click would open another window. It works for IE but does not work for Firefox. Please help. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US|zh-Hans|zh-Hant"> <head> <title>Javascript Question</title> <META NAME="LANGUAGE" CONTENT="en"> <META NAME="DOCUMENTCOUNTRYCODE" CONTENT="us"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=GB18030"> <script language='Javascript' type='text/javascript'> var rightClick = false; window.document.oncontextmenu = new Function("return false"); window.document.onmouseup = mouseUp; function mouseUp(e) { if (!e) var e = window.event; if (e.which) rightClick = (e.which == 3) else if (e.button) rightClick = (e.button == 2); if (rightClick) window.open('http://www.yahoo.com/'); } </script> </head> <body> <a href="#" onclick="window.open('http://www.google.com/')" onmouseup>Open New Window</a> </body> </html> Hello, and thanks for any help. I'm developing a site to include a map of schools (http://www.fcsoablues.net/map.asp). I'm creating hotspot links to googlemaps for each school (in a new browser window). I've got that much working okay. My problem is, I'd like to include popups for each hotspot that, on mouseover, show the name of the school. The popup should close on mouseoff. Without this, users only see the map full of school icons, and it's difficult to know which school is which. Ideally, the popup should follow the cursor (not a must, though). I've included the BODY of the code I'm using below. Code: <body> <img src="/FCSOA_IMAGES/Foothill-Citrus area map.jpg" width="1600" height="826" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="1169,166,1196,194" href="http://maps.google.com/maps?rlz=1C1AVSX_enUS420US420&um=1&ie=UTF-8&q=alta+loma+high+school&fb=1&gl=us&hq=alta+loma+high+school&hnear=0x80c32def799fa121:0x5209947000caa933,Pomona,+CA&ei=6x40T_WtDMaU2AXbtPnzAQ&sa=X&oi=local_group&ct=image&ved=0CAgQtgM&iwloc=cids:11113758998891877583" target="_new" alt="Alta Loma High School" /> <area shape="rect" coords="776,299,803,324" href="http://maps.google.com/maps?rlz=1C1AVSX_enUS420US420&um=1&ie=UTF-8&q=claremont+high+school&fb=1&gl=us&hq=claremont+high+school&hnear=claremont+high+school&cid=0,0,7887364383841814220&ei=Mh80T-LLBanm2QX4s72RAg&sa=X&oi=local_result&ct=image&ved=0CA8Q_BI" target="_new" alt="Claremont High School" /> <area shape="rect" coords="523,262,548,289" href="http://maps.google.com/maps?rlz=1C1AVSX_enUS420US420&um=1&ie=UTF-8&q=San+Dimas+High+School&fb=1&gl=us&hq=San+Dimas+High+School&hnear=San+Dimas+High+School&cid=0,0,9099100455580750144&ei=Wx80T7X9D6O-2gXU9YGeAg&sa=X&oi=local_result&ct=image&ved=0CA8Q_BI" target="_new" alt="San Dimas High School" /> </map> </body> Hi everyone! I'm using a jquery image sliding plugin from this site: http://flexidev.co.za/projects/flexislider/ It scrolls smoothly and continuously which is great. But I'm wanting to add a "click to pause" feature to it, so when you click any of the images the whole thing pauses, and when you click again it restarts. I'm not great with javascript though and I can't figure out how to do that, if it's even possible. I'd really appreciate any pointers or tips! Here is the javascript: Code: var speed = 50;
var pic, numImgs, arrLeft, i, totalWidth, n, myInterval;
$(window).load(function(){
pic = $("#slider").children("img");
numImgs = pic.length;
arrLeft = new Array(numImgs);
for (i=0;i<numImgs;i++){
totalWidth=0;
for(n=0;n<i;n++){
totalWidth += $(pic[n]).width();
}
arrLeft[i] = totalWidth;
$(pic[i]).css("left",totalWidth);
}
myInterval = setInterval("flexiScroll()",speed);
$('#imageloader').hide();
$(pic).show();
});
function flexiScroll(){
for (i=0;i<numImgs;i++){
arrLeft[i] -= 1;
if (arrLeft[i] == -($(pic[i]).width())){
totalWidth = 0;
for (n=0;n<numImgs;n++){
if (n!=i){
totalWidth += $(pic[n]).width();
}
}
arrLeft[i] = totalWidth;
}
$(pic[i]).css("left",arrLeft[i]);
}
}
I have 4 images and these images are changing automatically with duration of 2 seconds with show hide animation. and there are 4 bullets with mentioned above 4 images. these bullets are highlighting for example if image number 1 is showing than bullet number 1 is highlighting. same thing for other 3 bullets and images please send me the code for it Hello, I need the links to the rotating images to open in a new window. Is there an easy way to do this? Here is my code: [CODE] <script type="text/javascript"> var preload_ctrl_images=true; //And configure the image buttons' images he var previmg='left.gif'; var stopimg='stop.gif'; var playimg='play.gif'; var nextimg='right.gif'; var slides=[]; //FIRST SLIDESHOW //configure the below images and descriptions to your own. slides[0] = ["/pics/nav/home2/music-club_manatella.jpg", "", "/progs/main/manatella.pdf"]; slides[1] = ["/pics/nav/home2/teen-read-week2011.jpg", "", "/teens/teen-read-week2011.pdf"]; slides[2] = ["/pics/nav/home2/oceanway-express.jpg", "", "/lib/branches/OWY.html"]; slides[3] = ["/pics/nav/home2/jea-green.jpg", "", "/progs/jpl/home-energy-evaluation.html"]; slides[4] = ["/pics/nav/home2/childrens-summer-reading.jpg", "", "/kids/kids-summer-reading2011.pdf"]; slides[5] = ["/pics/nav/home2/teen-summer-reading.jpg", "", "/teens/teens-summer-reading2011.pdf"]; slides[6] = ["/pics/nav/home2/internet-safety.jpg", "", "/Training/Internet-Safety/internet-safety.html"]; slides.no_descriptions=1; //use for no descriptions displayed //use for no descriptions displayed //above slide show uses only the defaults </script> <script src="http://jpl.coj.net/common/javascripts/swissarmy.js" type="text/javascript"> </script> [CODE] [URL]http://jpl.coj.net Thank you so much for your help, Elbee Hello, I am trying to get this sliding panel to automatically be open when the page loads. Right now it is closed and I need to click it to open. I would like for it to be automatically opened when the page first loads and click to close it. Can anyone help me with the coding? Here is the code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Demo</title> <style type="text/css"> @import url(style.css); </style> <script src="jquery.js" type="text/javascript"></script> <script src="javascript.js" type="text/javascript"></script> </head><body> <center> <div class="contenta"><img src="4.jpg" /></div> <div id="header"> <img src="2.jpg" width="938" height="68" border="0" /> </div> <div id="page_container"> <div id="toppanel"> <div style="height: 0px; display: block;" id="panel"><img src="1.jpg" width="938" height="583" /></div> <div class="panel_button" style="display: block;"><a href="#">Expand</a></div> <div class="panel_button" id="hide_button" style="display: none;"><a href="#">Close</a></div> </div> <div id="content"><img src="5.jpg" /></div> </div> </center> </body></html> and javascript.js $(document).ready(function() { $("div.panel_button").click(function(){ $("div#panel").animate({ height: "400px" }) .animate({ height: "300px" }, "fast"); $("div.panel_button").toggle(); }); $("div#hide_button").click(function(){ $("div#panel").animate({ height: "0px" }, "fast"); }); }); and css: body { text-align: center; margin: 0px; background: #000; } #page_container { position: relative; margin-left: 0px; margin-right: 0px; width: 938px; } #header { margin-left: 0px; margin-right: 0px; width: 938px; background: #111; } .panel_button { margin-left: 0px; margin-right: 0px; position: relative; top: -25px; padding-top: 5px; width: 100px; height: 22px; background: url(images/panel_button.png); z-index: 20; filter:alpha(opacity=70); -moz-opacity:0.70; -khtml-opacity: 0.70; opacity: 0.70; cursor: pointer; } .panel_button img { position: relative; top: 10px; } .panel_button a { text-decoration: none; color: #FFF; font-size: 12px; font-weight: bold; position: relative; font-family: Arial, Helvetica, sans-serif; } .panel_button a:hover { color: #999999; } #wrapper { margin-left: 0px; margin-right: 0px; width: 100%; text-align: center; } #toppanel { width: 100%; left: 0px; top: 0px; z-index: 25; text-align: center; } #panel { width: 938px; position: relative; top: 1px; height: 0px; margin-left: 0px; margin-right: 0px; z-index: 10; overflow: hidden; text-align: left; } #panel_contents { background: black; filter:alpha(opacity=70); -moz-opacity:0.70; -khtml-opacity: 0.70; opacity: 0.70; height: 100%; width: 938px; position: relative; z-index: -1; } #content { margin-left: 0px; margin-right: 0px; width: 100%; position: relative; text-align: left; color: #545454; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } div.contenta { width: 938px; margin-left: 0px; margin-right: 0px; } Thank you. My question is twofold. First, is there a way to have a javascript file display an externally hosted image when opened with a browser? I mean such a way where the URL of the javascript file can be referenced by an html document and display an image? Furthermore, is there a way to have this be a different image depending on the time of day and timezone of the user, specifically one image in the morning and a different image in the evening? I apologize if I posted this in the wrong section, but I wasn't sure where else this could go. So, I'm new to Javascript but really just need the one code. I've tried the tutorials but I have never worked well with those -- I've always found it easier to actually be working with someone. But anyway. Basically, I need something sort of like this -- you click the thumbnail and the image appears in that predetermined spot. One thing, though: the images have to layer over each other. Like, you click image A, and it appears in the spot. You click image B, and it appears on top of image A. It'd be even better if when you clicked Image A it appeared and then you clicked image A again and it disappeared, but I'm going to try to start small. I've gone through the tutorials and have a sort of ish understanding about what some of the parts of the codes do, and I've been told I'm a fast-ish learner, so I think I'll catch the hang of this quick. Thank you! <3 Ahoy, Lemme try to explain this as best as I can. Bullet points might help: When someone clicks on an image here (http://gta.kwivia.co.uk/gta-iv/), the rest of the images collapse and become invisible Below the image, some links appear Also, there will be a "show other images" button which will then show the rest of the images http://gta.kwivia.co.uk/gta-iv/ I will appreciate all solutions to this problem. If you need to know anything, simply ask me. |
|||||||