|
JavaScript - How To Disable Javascript Within A Div?
Is it possible to disable all scripts within a certain div? Like if I was displaying something in <div id="member"> and a member posts a script within that div, I would like it to not work.
Similar TutorialsHi Guys, I am new at JavaScript and start to do some tutorials.What I am trying to do here is prompting user to input a name and if the name was valid the page(document) will display with all objects like the button.But if user enter a wrong name then the button will be disabled! I create the following code but it did not work <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <script language="JavaScript" type=""> function changeColor(){ document.bgColor = "Gray"; } </script> </head> <body> <script language="JavaScript" type="text/javascript"> var person = ""; person = prompt('What is Your Name:'); if (person == "Foo") { document.write("<h1 />Welcome " + person); document.bgColor = "Yellow"; } else { document.write("<h1 />Access Denied!!!!"); document.bgColor = "Red"; document.getElementById("gree").disabled = true; } </script> <div> <p/><input id="gree" type="button" value="Gray " onClick="changeColor();"> </div> </body> </html> as you can see I used the: document.getElementById("gree").disabled = true; but it did not work , could you please give an idea how I can solve this problem? Thanks I have a server that when restarted emails from the code below every single time. I would like to know what I can use in the code below to regonize the restart and bypass the email send piece in BOLD below. Any help will be greatly appreciated. now = currentDateTime() if (statusInOverride != lastOverrideValue) or (overrideTime != lastOverrideTime) lastOverrideValue = statusInOverride lastOverrideTime = overrideTime if statusInOverride.value == true overrideStopTime = now overrideStopTime.minute = now.minute + overrideTime // Also send an email overrideHours = overrideTime / 60 mailSend(address, suiteName + " Overridden", suiteName + " has been overridden for " + overrideHours + " hours."); else mailSend(address, suiteName + " Override Canceled", suiteName + " has canceled their override. There was " + remainingTime + " remaining."); remainingTime.duration = 0 endif endif if statusInOverride.value == true remainingTime.duration = delta(now, overrideStopTime) endif Is there a way to use inline javascript that will prevent any javascript after it (in the same page) from executing? So, for instance I could have something like: -Content- -JS A- -Content- -JS B- -JS C- 'JS A' would execute, 'JS B' would be the code I'm asking about and it would cause 'JS C' to not do anything. Sorry if this is an off-the-wall question. I good with C/C++, VB, Ruby, Lua, HTML, etc, but I haven't gotten to Javascript (or Java) yet so I have no idea what the capabilities or environment setup are like. Thanks in advance for any advice. Hi, I have two buttons save and finish. I want to enable the button finish whenever I click the save button. page1.jsp. <script> InitialLoad() { document.getElementById('finish').disabled = true; } save(){ document.getElementById('finish').disabled = false; } </script> <html> <body onload= "InitialLoad()"> <input type="submit" name="finish" id=="finish" value="finish"> <input type="submit" name="save" value="save" onclick= save();> </body> </html> strutsconfig.xml <forward name="success" path="atre.dodUpgrade.show.page1"/> Using the above I can enable it temporarly. But whenever I call the forward page it on action class forward = mapping.findForward("success"); The Problem is page Refresh again and it shows disabled button for finish. what could be the solution for this? Thanks Hi I have a quiz that uses javascript to calculate the scores over 10 pages of a template which uses jquery. I'm having trouble disabling the navigation buttons so that the user cannot move on until they submit the question. The code is in Jquery and Javascript and i'm still learning. I tried this which worked as it stopped them from navigating away from the page but it stopped my quiz from calculating the score too.... Code: //Next Page Function
$('.next').click(function() {
if (current_page == no_pages){
//do nothing
}
else{
if (flag==false)
{
try {
checkAnswer(document.getElementById('quizForm'))
flag=true;
return false;
}
catch(err)
{
if (err.number !=-2146823281)
{
alert(err.description);
}
}
}
next_page = (current_page + 1);
$("#content").fadeOut("slow",function(){
$("#content").load("pages/page_" + next_page + ".html").fadeIn('slow')}
);
current_page ++;
$("#current_page").html(current_page);
progress_bar();
}
});
This is what the code looks like now without the changes.... Code: //Next Page Function
$('.next').click(function() {
if (current_page == no_pages){
//do nothing
}
else{
next_page = (parseInt (current_page) + 1);
$("#content").fadeOut("slow",function(){
$("#content").load("pages/page_" + next_page + ".html").fadeIn('slow')}
);
current_page ++;
$("#current_page").html(current_page);
progress_bar();
}
});
I was also told to try and disable the button until they click sumbit and then enable it straight away but i'm not really sure what i'm doing. I put this bit together but it doesn't do anything.... Code: else{
if (document.getElementById('quizForm')){
if (document.quizForm.cc.disabled==true)
document.quizForm.cc.disabled=false
else
{return true;}
Any advise? Thanks. Guys Need Help here... here i send attach my script. i need combine 2 function script into . but i can figure it out. can everyone helps me. Code:
<?php
require_once('../Connections/koneksi.php');
?>
<!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>
<script>
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cant delete all rows");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
function selectnama()
{
var i = 0;
i = document.form1.txtcustomer.value;
i= i.replace(/^[\s]+/,'').replace(/[\s]+$/,'').replace(/[\s]{2,}/,' ');
//alert(cust[i]);
document.form1.select2.value = i;
}
function change2()
{
document.form1.txtcustomer.value = document.form1.select2.value;
}
function enable_text(status)
{
status=!status;
document.form1.qty_material.disabled = status;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form name="form1" method="post" >
<table id="dataTable" width="auto" style="margin:-4px 0 0 0;" cellspacing="6">
<tr>
<td style="width:20px;"><INPUT type="checkbox" name="chk" /></td>
<td> <input type="text" name="txttipe[]" placeholder="Tipe" id="txttipe" size="40"/> /
<input name="txtcustomer" type="text" id="txtcustomer" onkeyup="selectnama()" size="10" maxlength="10"/>
<select name="select2" style="color:blue;" onchange="change2()" >
<option></option>
<?php
$query = mysql_query("select right(KUNNR,6), NAME1 from kna1 order by NAME1") or die(mysql_error());
$query3 = mysql_query("select * from spg_kna1_exception order by NAME1") or die(mysql_error());
while($row = mysql_fetch_array($query))
{
echo "<option value=".$row[0].">$row[1] - $row[0]</option>";
}
while($row3 = mysql_fetch_array($query3))
{
echo "<option value=".$row3[0].">$row3[1] - $row3[0]</option>";
}
?>
</select>;
<input type="checkbox" name="qty_matnr" onClick="enable_text(this.checked)" > Qty <input type="text" name="qty_material">
</td>
</tr>
</table>
<INPUT type="button" value="Add Model" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Model" onclick="deleteRow('dataTable')" />
</form>
</body>
</html>
I have a website that contains a large div inside a smaller div, only to be scrolled via javascript. The problem is when you mouseover the smaller (container) div and you scroll the mousewheel down, everything scrolls down. I've been searching for a while and haven't got any answers. www.designbyryanboog.com/spa (site only works in IE8, Chrome, Safari, Opera, Firefox<slowly>) Thanks in advance Hello, I have been looking for a good walk-through online, but can't seem to find an exact resolution to what I am trying to do. Can someone please supply some example code for not displaying everything that is inside a <div>. Basically I do not want social media content to be displayed on secure pages, but want them on every other page. This is what I have: Code:
<div id="share">
<ul>
<li>
<div class="addthis_toolbox addthis_default_style ">
<a href="http://www.addthis.com/bookmark.php?v=250&username=###### class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
</li>
<script>
var addthis_config = {"data_track_clickback":true};
if (document.location.protocol !== 'https:') {
$jq.getScript('http://s7.addthis.com/js/250/addthis_widget.js?username=######', function() { });
}
</script>
</ul>
</div>
Is there a way to disable a SINGLE script on the page, something that a user can click and it disables only the script choosen? Thanks, Latchy 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 all, I have a form with a number of checkboxes. The 1st one is "Select All". When this checkbox is ticked I would like to disable all others. When the "Select All" checkbox is unticked, all checkboxes should be enabled. Can anyone tell me how to do this? is JQuery the preferred method these days? Thanks in advance I'm trying to disable my record navigation pictures when they get to the end of a calendar (events are posted on days, and navigation goes to the next or previous one). Code: <a onclick="javascript:previousEvent();">
<input type="image" name="previous" src="images/SiteCollectionImages/MiniEvents/btn_Previous.gif" alt="Previous Event" title="Previous Event"/></a>
<a onclick="javascript:nextEvent();">
<input type="image" name="next" src="images/SiteCollectionImages/MiniEvents/btn_Next.gif" alt="Next Event" title="Next Event"/></a>
This is where I have to disable the pictures. Above in my JS I would like to have a handler that could disable them when they are at the end of the index, or at the beginning. Thanks! edit: I do have the logic already, just not sure how to disable the images. Code: function nextEvent(i) {
if (index == maxIndex || index >= maxIndex) {
//disable next button
tempObj = document.getElementsByName("next");
tempObj.visible = false;
}
else {
index = index + 1;
eventSelected(rawDates[index]);
}
I'm probably not allowed to request something like this, but since this is a small amount of code I think I should do it anyways :P Okey, so I have two listboxes and I want a tickbox to enable one listbox and disable one listbox as you tick a checkbox. I want one listbox disabled by default and the other enabled and then vice-verca the disable when you tick the box. If someone could supply me with that code I would be really greatful, butyou don't need to bother with the HTML, I should figure it out from the JS. Thanks in advance <3 Hi, how to disable the restore down button in internet explorer through java script. Regards, Basha. Hello Friends, i have a small problem and need your help. I have a form with 4 radio buttons, the scenario is, when a user click on a radio button a hidden content will be displayed and the other three radio buttons will be disabled so that at one time a user can only click and view single radio button and the hidden content. Here is my code to show hide the hidden content but i need when the user select one radio button the other radio buttons should disable. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>test</title> <style type="text/css" media="screen"> .hide{ display:none; } </style> </head> <body> <div id="tabs"> <div id="nav"> <p>Show Div 1:<input type="radio" name="tab" value="value1" class="div1" /></p> <p>Show Div 2:<input type="radio" name="tab" value="value2" class="div2" /></p> <p>Show Div 3:<input type="radio" name="tab" value="value3" class="div3" /></p> <p>Show Div 4:<input type="radio" name="tab" value="value4" class="div4" /></p> </div> <div id="div1" class="tab"> <p>this is div 1</p> </div> <div id="div2" class="tab"> <p>this is div 2</p> </div> <div id="div3" class="tab"> <p>this is div 3</p> </div> <div id="div4" class="tab"> <p>this is div 4</p> </div> </div> <script type="text/javascript" charset="utf-8"> (function(){ var tabs =document.getElementById('tabs'); var nav = tabs.getElementsByTagName('input'); /* * Hide all tabs */ function hideTabs(){ var tab = tabs.getElementsByTagName('div'); for(var i=0;i<=nav.length;i++){ if(tab[i].className == 'tab'){ tab[i].className = tab[i].className + ' hide'; } } } /* * Show the clicked tab */ function showTab(tab){ document.getElementById(tab).className = 'tab' } hideTabs(); /* hide tabs on load */ /* * Add click events */ for(var i=0;i<nav.length;i++){ nav[i].onclick = function(){ hideTabs(); showTab(this.className); } } })(); </script> </body> </html> Thank you for your help in advance. Hi.. I have 2 groups of radio buttons.. I can manage to make one set be disabled via a selection.. but i can only get this right with the VALUE... Is it possible to use the radio id to do the same?? Just use the link below for they jquery <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery.min.js"></script>
</head>
<body>
<br />
<br />
<div> 1 - <input type="radio" id="1" value="11" /> </div>
<div> 2 - <input type="radio" id="2" value="22"/> </div>
<div> 3 - <input type="radio" id="3" value="33"/> </div>
<br />
<br />
<div> 1 - <input type="radio" id="1" value="11" /> </div>
<div> 2 - <input type="radio" id="2" value="22" /> </div>
<div> 3 - <input type="radio" id="3" value="33" /> </div>
<script>
$("input:radio").click(function() {
var val = $(this).val();
$(this).siblings("input:radio").attr("disabled","disabled");
$("input:radio[value='" + val + "']").not(this).attr("disabled","disabled");
});
</script>
</body>
</html>
I'm new at JavaScript and not sure if what I want to do is possible. This is part of the code from a larger check-in form. This code adds a new row as needed and should also enable the text fields only after the check box is selected. It is not working as expected and I am missing what the problem may be or if this is even possible. Any help would be appreciated. [CODE] <!DOCTYPE html> <html lang="en"> <title></title> <script type="text/javascript"><!-- function addRow() { tabBody=document.getElementById("data"); row=document.createElement("TR"); cell1 = document.createElement("TD"); checknode1 = document.createTextNode("\u00a0\u00a0\u00a0\u00a0"); checknode2 = document.createElement("input"); checknode2.name="guest[]"; checknode2.id='guest[]'; checknode2.type="checkbox"; checknode2.setAttribute('onclick', 'disablefields();'); cell2 = document.createElement("TD"); textnode1 = document.createTextNode("\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0"); textnode2=document.createElement("input"); textnode2.type="text"; textnode2.name='guestc[]'; textnode2.id='guestc[]'; textnode2.setAttribute('disabled',''); textnode2.size="7"; textnode2.maxlength="9"; textnode2.setAttribute('onkeyup', 'this.value = this.value.toUpperCase();'); cell3 = document.createElement("TD"); textnode3=document.createElement("input"); textnode3.type="text"; textnode3.name="guestn[]"; textnode3.id='guestn[]'; textnode3.setAttribute('disabled',''); textnode3.size="20"; textnode3.maxlength="30"; cell4 = document.createElement("TD"); checknode3 = document.createTextNode("\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0"); checknode4 = document.createElement("input"); checknode4.name="food[]"; checknode4.id='food[]'; checknode4.type="checkbox"; checknode4.value="breakfast"; cell1.appendChild(checknode1); cell1.appendChild(checknode2); row.appendChild(cell1); tabBody.appendChild(row); cell2.appendChild(textnode1); cell2.appendChild(textnode2); row.appendChild(cell2); tabBody.appendChild(row); cell3.appendChild(textnode3); row.appendChild(cell3); tabBody.appendChild(row); cell4.appendChild(checknode3); cell4.appendChild(checknode4); row.appendChild(cell4); tabBody.appendChild(row); } --> </script> <SCRIPT LANGUAGE="JavaScript"> <!-- function disablefields(){ if (document.getElementById('guest[]').checked == 0){ document.getElementById('guestc[]').disabled='disabled'; document.getElementById('guestc[]').value=''; document.getElementById('guestn[]').disabled='disabled'; document.getElementById('guestn[]').value=''; document.getElementById('food[]').disabled='disabled'; document.getElementById('food[]').value=''; }else{ document.getElementById('guestc[]').disabled=''; document.getElementById('guestc[]').value='Call Sign'; document.getElementById('guestn[]').disabled=''; document.getElementById('guestn[]').value='Enter Name'; document.getElementById('food[]').disabled=''; document.getElementById('food[]').value='breakfast'; } } --> </SCRIPT> </head> <body> <form name="checkin" method="post"> <table> <tbody id="data"> <tr><td> <input type="checkbox" name="guest[]" id="guest" onclick="disablefields()"></td> <td> <input type="text" disabled name="guestc[]" id="guestc[]" size="7" maxlength="9" value="" onkeyup="this.value = this.value.toUpperCase();" /></td> <td><input type="TEXT" name="guestn[]" disabled id="guestn[]" size="20" maxlength="30" value=""></td> <td> <input type="checkbox" name="food[]" disabled id="food[]" value="breakfast"></td></tr> </tbody> </table> <table border="0" width="100%"> <tr> <td><input type="button" value="Add new check-in" onclick="addRow();" /></td> </tr> </table> </form> </body> </html> [CODE] Disable Arrow Keys I am creating an online flash gaming site, Aaron's Game Zone: http://azzaboi.weebly.com Some of the games on it use the arrow keys, however IE also uses them to scroll the page. I am learning JavaScript and am trying to write some script to pervent the page scrolling up and down while playing a game. For example... Guardian Rock uses the arrow keys to slide around, at the same time the page scrolls. http://azzaboi.weebly.com/guardianrock.html Here is the script I've tried to write to pervent the scrolling: Code: <script type="text/javascript">
function KeyPressHappened(e){
if (!e) e=window.event;
var key=e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
if(key == 37 || key == 38 || key == 39 || key == 40)
{
e.preventDefault();
return false;
}
return true;
}
document.onkeypress = KeyPressHappened;
</script>
There's a bug in it or it's not correct, no error message given, could anyone point out the mistake please? actually, the subject pretty much is the question, but if you want more detail, here goes: the below function: Code: function centerAndZoom(line) {
bounds = line.getBounds();
map.setCenter(bounds.getCenter(map), map.getBoundsZoomLevel(bounds));
}
pans and zooms the map when the user selects a line, which is really useful about 95% of the time and kind of annoying 5% of the time. So I was thinking it would be good to give them the option of disabling that function for the 5%. the function gets called from a couple of different places in the code, so for neatness' sakes it would be nice to have something within the function above that checks for the checkbox state before executing. but some kind of if/else where the function gets called would be ok, too... I'm not really fussy. thanks in advance. |
|||||||