javascript working in an opposite manner - javascript

I have been trying to use a "select" list along with javascript. I did a Javascript function that hide or show parts of html code but it's working in the opposite way and i can't figure out where I went wrong coz the code seems to be straight forward.
my JS function is
<script type="text/javascript" language="javascript">
function toggle(id) {
if(document.getElementById(id).value=='IELTS' || document.getElementById(id).value=='TOEFL')
{
if(document.getElementById('dv1').style.display=='block')
{
document.getElementById('dv1').style.display='none';
document.getElementById('dv1').style.visibility='hidden';
}
}
else
{
document.getElementById('dv1').style.display='block';
document.getElementById('dv1').style.visibility='visible';
//alert('Its displaying now');
}
if(document.getElementById(id).value=='Other')
{
if(document.getElementById('dv2').style.display=='block')
{
document.getElementById('dv2').style.display='none';
document.getElementById('dv2').style.visibility='hidden';
}
}
else
{
document.getElementById('dv2').style.display='block';
document.getElementById('dv2').style.visibility='visible';
}
if(document.getElementById(id).value=='none')
{
document.getElementById('dv1').style.display='none';
document.getElementById('dv1').style.visibility='hidden';
document.getElementById('dv2').style.display='none';
document.getElementById('dv2').style.visibility='hidden';
}
}
</script>
The problem is that the FIRST "if" statement is showing/hiding "dv2" instead of "dv1" and the SECOND "if" statement is showing/hiding "dv1" instead of "dv2" although everything is specified such a way that the FIRST "if" statement handles "dv1" and the SECOND "if" statement handles "dv2"
Am I missing something in the way of understanding of how JS works..
Here a style is predefined to make the html code hidden
<style type="text/css">
.toggleClass{
display:none;
visibility:hidden;
}
</style>
</head>
<body>
<form name="myform" >
this is the select where i called the JS function upon change
<select id="exam" name="exam" onchange="toggle('exam')">
<option selected="selected" value="none" >Please Choose</option>
<option value="IELTS">IELTS</option>
<option value="TOEFL">TOEFL</option>
<option value="Other">Other</option>
</select>
<br><br>
this is dv1
<div id="dv1" class="toggleClass">
<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="600" bgcolor="#CCCCCC">IELTS and TOEFL</td>
</tr>
</table>
</div>
this is dv2
<div id="dv2" class="toggleClass">
<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="600" bgcolor="#CCCCCC">Other</td>
</tr>
</table>
</div>
</form>
</body>
</html>
note that it works fine if I swap "dv1" and "dv2"!

Consider this block of code:-
if(document.getElementById(id).value=='Other')
{
if(document.getElementById('dv2').style.display=='block')
{
document.getElementById('dv2').style.display='none';
document.getElementById('dv2').style.visibility='hidden';
}
}
else
{
document.getElementById('dv2').style.display='block';
document.getElementById('dv2').style.visibility='visible';
}
It is evident from here that if you are selecting the 'Other' then in such a case div two will never appear. Because the condition is true where as the else condition mentioned below :-
else
{
document.getElementById('dv1').style.display='block';
document.getElementById('dv1').style.visibility='visible';
//alert('Its displaying now');
}
will display the div1 as you have validated.The script you are seeking for must be like this mentioned below:-
<script type="text/javascript" language="javascript">
function toggle(id) {
if(document.getElementById(id).value=='IELTS' || document.getElementById(id).value=='TOEFL')
{
if(document.getElementById('dv1').style.display=='block')
{
document.getElementById('dv1').style.display='block';
document.getElementById('dv1').style.visibility='visible';
}
}
else
{
document.getElementById('dv1').style.display='none';
document.getElementById('dv1').style.visibility='hidden';
//alert('Its displaying now');
}
if(document.getElementById(id).value=='Other')
{
if(document.getElementById('dv2').style.display=='block')
{
document.getElementById('dv2').style.display='block';
document.getElementById('dv2').style.visibility='visible';
}
}
else
{
document.getElementById('dv2').style.display='none';
document.getElementById('dv2').style.visibility='hidden';
}
if(document.getElementById(id).value=='none')
{
document.getElementById('Table1').style.display='none';
document.getElementById('Table1').style.visibility='hidden';
document.getElementById('Table2').style.display='none';
document.getElementById('Table2').style.visibility='hidden';
}
}
</script>
try this out and leme know if it works.

FIRST: the property of style is set only if there is a inline style of this property.
so in your div you should insert a style attribute
<div id="dv1" class="toggleClass" style="visibility:hidden; display:none">
the same for div2
After that... the logical seems not correct:
if(document.getElementById(id).value=='IELTS' || document.getElementById(id).value=='TOEFL')
this line should be visible the first div (div1) but after this:
document.getElementById('dv1').style.display='none';
document.getElementById('dv1').style.visibility='hidden';
you hide it!

Related

Prevent backspacing HTML in an iFrame.

I am using an iFrame as a text editor and want to ensure that the first part of the body is always a p tag. As such, I have it set so when users first click on the body it will insert
<p><br></p>
This works, unless the user holds down the backspace button. Once the user runs out of plaintext to backspace, it removes the tags above.
I have captured the event for backspace, but how can I prevent the users from removing the paragraph tags?
I got 11 options (I'm assuming you are using jQuery).
First, capture the keydown event, and if the value is equal to the default value, prevent the action. This will probably be inside to source html of the iframe.
$('#editor').unbind('keydown').bind('keydown', function (event) {
var doPrevent = false;
if (event.keyCode === 8 && $('#editor').html() === '<p><br></p>'){
event.preventDefault();
}
});
Option two: just make the element that's editable a div instead.
I prefer to avoid the use of an iframe. They make things needlessly complicated (imo).
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script type="text/javascript">
function DoEdit(){
var idContent = document.getElementById('idContent');
idContent.contentEditable = "true";
//var editor = (idContent.contentWindow || idContent.contentDocument).content.document;
//editor.designMode = "on";
//editor.body.contentEditable = "true";
//editor.contentEditable = "true";
}
function ShowContent(){
var contentValue = "<p><br></p>"+$('#idContent').html();
alert(contentValue)
}
$(document).ready(function(){
DoEdit();
$('#showContentBtn').click(function(){
ShowContent();
});
});
</script>
</head>
<body>
<p><br></p>
<div style="text-align: center;margin:0 auto;width: 500px; height: 300px; border: solid; border-width: 2px;">
<div id="idContent" style="text-align: left; width:100%; height: 100%">
</div>
</div>
<div style="text-align: center;"><input id="showContentBtn" type="button" value="Show Content"></div>
</body>
</html>
Added a button in case there was some requirement to get the value for the content and keep those elements in it.
Option 3: If it needs to be inside the iframe, just set url for the above as the src for the iframe.
<html>
<body>
<div style="text-align: center">Edit Frame</div>
<iframe src="/widgets/editor/rich-text" ></iframe>
</body>
</html>
I hope that this will give you a few ideas you can work with inside your project.

Adding HTML slideshow to multiple pages (without using frames)

I am new to the site (and coding) so please bear with me!
I am trying to add the following clickable slideshow to my site in a way that means I can change the images in one file (HTML or JS) and this be reflected on every page on which the slideshow is called:
<table border="0" cellpadding="0">
<td width="100%">
<img src="image1.bmp" width="200" height="200" name="photoslider"></td>
</tr>
<tr>
<td width="100%">
<form method="POST" name="rotater">
<div align="center">
<center><p>
<script language="JavaScript1.1">
var photos=new Array()
var text=new Array()
var which=0
var what=0
photos[0]="image1.bmp"
photos[1]="image2.bmp"
photos[2]="image3.bmp"
text[0]="Image One"
text[1]="Image Two"
text[2]="Image Three"
window.onload=new Function("document.rotater.description.value=text[0]")
function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which];
what--
document.rotater.description.value=text[what];
}
}
function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
what++
document.rotater.description.value=text[what];
}
else window.status='End of gallery'
}
function type()
{
alert("This textbox will only display default comments")
}
</script>
<p><input type="text" name="description" style="width:200px" size="50">
<p><input type="button" value="<<Back" name="B2"
onClick="backward()"> <input type="button" value="Next>>" name="B1"
onClick="forward()"><br />
</p>
</center>
</div>
</form>
</td>
</tr>
Currently I have used:
<script type="text/javascript" src="images.js"></script>
in the relevant html div. to call a simple .js file which displays the images in one long list, e.g.
document.write('<p>Image One</p>')
document.write('<img src="image1small.png" alt=Image One; style=border-radius:25px>')
document.write('<p>Image Two</p>')
document.write('<img src="image2small.png" alt=Image Two; style=border-radius:25px>')
I have tried every way I can think of, and searched many posts on here to try and get the slideshow to display within the same div. I have copied the html code into the .js file and appended it with document.write on every line, I have tried / on every line, I have tried 'gettingdocument.getElementById', but nothing works!
The slideshow code itself is fine; if I put this directly onto each page then it works correctly, I just can't seem to 'link' to this code and have it run so anything appears.
Please provide the simplest possible solution for this, without any need to install jquery plugins, or use anything other than basic HTML and JS.
There were alot of small bugs, i fixed them for you. you didn't put a semicolon after your javascript statements, tey aren't neccesary but it's cleaner code, you didn't exit alot of html tags
<table border="0" cellpadding="0">
<tr>
<td width="100%">
<img src="image1.bmp" width="200" height="200" name="photoslider">
</td>
</tr>
<tr>
<td width="100%">
<form method="POST" name="rotater">
<div align="center">
<center>
<p>
<p id="description" style="width:200px" size="50"></p>
<p><a onClick="backward()"><img src="imageback.png" alt="back" />Back Image</a>
<p><a onClick="forward()"><img src="forward.png" alt="forward" />Forward Image</a>
</p>
</center>
</div>
</form>
</td>
</tr>
Javascript:
(function() {
var photos=[];
var text= [];
var which=0;
var what=0;
photos[0]="image1.bmp";
photos[1]="image2.bmp";
photos[2]="image3.bmp";
text[0]="Image One";
text[1]="Image Two";
text[2]="Image Three";
document.getElementById('description').innerHTML = text[0]
backward = function(){
if (which>0){
which--;
window.status='';
what--;
console.log(which);
document.images.photoslider.src=photos[which];
document.getElementById('description').innerHTML = text[what];
}
}
forward = function(){
if (which < (photos.length-1)){
which++;
console.log(which);
document.images.photoslider.src=photos[which];
what++;
document.getElementById('description').innerHTML = text[what];
}
else {
document.getElementById('description').innerHTML = 'End of gallery';
}
}
function type()
{
alert("This textbox will only display default comments")
}
})();
And last but not least i've created the fiddle to show you it's working:
http://jsfiddle.net/45nobcmm/24/
You can create a javascript file that search for an element and change the innerHTML of the element to the slideshow you want to show.
For example this could be the script:
var slideshow = document.getElementById('slideshow');
slideshow.innerHTML = 'Your slideshow html';
and your main html page should have a slideshow div.
but you need to know that it's not the best solution, you should learn PHP or another back-end language and than you could use include('page.html'); for example

Showing/hiding div control according to RadioButtonList selected values using javascript

I am trying to make div control visible/invisible according to RadioButtonList selected values using javascript.
The div is embodied in FormView:
<asp:FormView ID="fv" runat="server" DataKeyNames="RootId"
DataSourceID="SomeDataSource" DefaultMode="Edit">
<EditItemTemplate>
<div class="SubTitle">
Fees
</div>
<table cellpadding="0" cellspacing="0" border="0" class="FormTable">
<tr>
<td class="FirstColumn">
<table cellpadding="0" cellspacing="0" border="0" class="FormTable">
<tr>
<td>
<asp:RadioButtonList ID="ftCtrl" runat="server" DataSource='<%# Eval("ftList") %>'
DataValueField="Key" DataTextField="Value" SelectedValue='<%# Bind("ft") %>'/>
</td>
</tr>
<tr>
<div runat="server" id="BreakdownDiv" style="display:none" >
...
And here is the script:
<script type="text/javascript">
$('#<%= fv.FindControl("ftCtrl").ClientID %>').find('input:radio').click(function() {
var Br = $('#<%= fv.FindControl("BreakdownDiv").ClientID %>');
if ($(this).next().html() == 'New') {
Br.show('slow');
}
else {
Br.hide('slow');
}
});
Here is the generated HTML:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$('#ctl00_ContentAreaMain_fv_Inv1_fv_BreakdownDiv').find('input:radio').click(function() {
var Br = $('#ctl00_ContentAreaMain_fv_Inv1_fv_BreakdownDiv');
if ($(this).next().html() == 'New') {
Br.show('slow');
}
else {
Br.hide('slow');
}
});
</script>
<table cellspacing="0" clientIDMode="static" border="0" id="ctl00_ContentAreaMain_fv_Inv1_fv" style="border- collapse:collapse;">
.
.
.
<div id="ctl00_ContentAreaMain_fv_Inv1_fv_BreakdownDiv" style="display:none">
Debugging the script I can see that the div control is being found but nothing happens - it's not being hide or shown when different radiobuttons are checked.
Does anyone have an idea what I am doing wrong?
Finally found what was the issue.
The Div I was trying to hide/show contained table and from some reason the table content wasn't hiden/shown. I've did some restructuring, removed the div and made the show/hide on the table itself.
Thanks everybody for your comments. Hope this help someone in the future.
Here is the sample code for hiding and showing divs based on selction of values.
OWNER is used as a constant here having the value "Owner".
$(":radio[id*=rbl_saleby]").change(function () {
var fetcheddata = $(".mainContainer").find("#saleby").find(":radio[id*=rbl_saleby]:checked").val();
if (fetcheddata == OWNER)
{
$("#saleby").show();
$("#salebyowner").show();
$("#salebyALA").hide();
}
});
In your CSS code make sure the div block is set to div{display:none}
only a function with 2 radio and a div
http://jsfiddle.net/forX/WGLQx/
$("input[type=radio][name=radio1]").change(function () {
if($(this).val()=='New')
{
$("div[id$=BreakdownDiv]").show('slow');
}
else
{
$("div[id$=BreakdownDiv]").hide('slow');
}
});
I'm not sure you can get the text of input radio. I used value instead.

Chrome Extension/Javascript Problems

I have been working on Chrome extension and am having problems. What I'm trying to do: when you click on the icon to the right of the search bar, a search bar comes up which you type your query in and hit enter. It will then go to http://dev.bukkit.org/search/?search=(whatever was entered). This is what I have but it is not working.
<scriptLANGUAGE="JavaScript">
function whatURL() {
window.location= 'http://dev.bukkit.org/search/?search=' + document.form1.url.value;
}
</SCRIPT>
<FORM name=form1>
<inputtype="text"id="url">
<inputtype="button"id="btnSearch"value="Search"onClick="return whatURL()"/>
</FORM>
Thank you:) Note: I have the manifest and everything, its just the javascript part thats not working.
EDIT: Rewrote it now it works!!!
<html>
<head>
<script>
function onLoad() {
document.getElementById("mytextfield").focus();
}
function onKeyPress(e) {
if (e.keyCode == 13) {
openResults();
}
}
function openHomePage() {
window.open("http://dev.bukkit.org/");
}
function openResults() {
window.open("http://dev.bukkit.org/search/?search=" + encodeURIComponent(document.getElementById("mytextfield").value));
}
</script>
</head>
<body onload="onLoad();">
<img src="png-3.png" onclick="openHomePage();" style="border-width: 0px; cursor: pointer" /><br>
<div name="myFormDiv" style="center: 6px;">
<br>
<input type="search" id="mytextfield" name="mytextfield" value="Search..." onkeypress="onKeyPress(event);" />
</div>
</div>
</body>
</html>
Try changing...
<inputtype="button"id="btnSearch"value="Search"onClick="return whatURL()"/>
to..
<inputtype="button"id="btnSearch"value="Search"onClick="whatURL()"/>
window.location doesn't need to be returned to anything. You're already making the window point to your given url when you execute window.location = "http://myurl.com"

Can't make JavaScript work, is it an ID issue?

I'm trying to get a message to appear when a user clicks the image that's in a the "lifeCalculatorButton" ID, but I can't figure out how to make it work. I know that the html doc is referencing the js doc fine, so that's not the issue. Any ideas?
<html>
<head>
<link rel="Stylesheet" type="text/css" href="apps.css" />
<script type="text/javascript" src="apps.js"></script>
<title>my apps</title>
</head>
<body>
<div id="breaks">
<a href="http://info" > <img src="homeicon.png" /> </a>
<br>
<br>
<br>
<br>
<br>
<div id="appTable" style="float: left">
<table border="0" id="appTable">
<tr>
<td>life calculator</td>
</tr>
<tr>
<td>punny!</td>
</tr>
<tr>
<td>drink roulette (on its way!)</td>
</tr>
</table>
</div>
<div id="arrowTable" style="float: left">
<table border="0">
<tr>
<td id="lifeCalculatorButton"><img src="arrow1.png" width="45"</td>
</tr>
<tr>
<td id="punnyButton"><img src="arrow1.png" width="45"/></td>
</tr>
<tr>
<td id="drinkRouletteButton"><img src="arrow1.png" width="45"/></td>
</tr>
</table>
</div style="clear: both">
<div id="content">
my apps :)
</div>
And here's the JavaScript:
var foo = document.getElementById('lifeCalculatorButton');
foo.onClick = function (){
document.getElementById('content').innerHTML = 'foo';
};
Try changing the onclick event to all lowercase.
var foo = document.getElementById('lifeCalculatorButton');
foo.onclick = function (){
document.getElementById('content').innerHTML = 'foo';
};
EDIT
The below code works in both Firefox and IE. I've changed the event from foo.onClick to foo.onclick. Make sure your javascript block is at the end of the page or the call to getElementById will return null. Also, you should close the unclosed <img> tag and remove the style="clear: both" from the second to last closing </div> near the bottom of your page.
<html>
<head>
<link rel="Stylesheet" type="text/css" href="apps.css" />
<title>my apps</title>
</head>
<body>
<div id="breaks">
<img src="homeicon.png" />
<br /><br /><br /><br /><br />
<div id="appTable" style="float: left">
<table border="1" id="appTable">
<tr><td>life calculator</td></tr>
<tr><td>punny!</td></tr>
<tr><td>drink roulette (on its way!)</td></tr>
</table>
</div>
<div id="arrowTable" style="float: left">
<table border="1">
<tr><td id="lifeCalculatorButton"><img src="arrow1.png" width="45"/></td></tr>
<tr><td id="punnyButton"><img src="arrow1.png" width="45"/></td></tr>
<tr><td id="drinkRouletteButton"><img src="arrow1.png" width="45"/></td></tr>
</table>
</div>
<div id="content">
my apps :)
</div>
</body>
</html>
<script type="text/javascript">
var foo = document.getElementById('lifeCalculatorButton')
foo.onclick = function (){
document.getElementById('content').innerHTML = 'foo';
};
</script>
EDIT
If you are using an external javascript file you must use the window.onload event handler to register your handler to ensure the page has completely loaded.
window.onload = function () {
var foo = document.getElementById('lifeCalculatorButton')
foo.onclick = function (){
document.getElementById('content').innerHTML = 'foo';
};
};
First, you seem to have a typo here:
<td id="lifeCalculatorButton"><img src="arrow1.png" width="45"</td>
The <img> tag is not closed properly.
You also have to either move the <script> include at the bottom of your document or attach to the window load event to make sure that your script is executed after the elements in question appear in the DOM:
window.onload = function () {
var foo = document.getElementById("lifeCalculatorButton");
// ...
};
It may be overkill but this could be a good excuse to introduce yourself to jQuery or similar framework. It makes this kind of work trivial to implement. See this fiddle for a working examlpe using jQuery.
If you don't want to use jQuery your javascript looks ok as this fiddle works.
As others have said make sure you are not assigning the event handler until after the DOM is loaded. This is done in the pure javascript fiddle above using the following code
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var foo = document.getElementById('Clickable');
foo.onclick = function (){
alert("See It Works");
};
}//]]>
On a side note following a comment above, the cursor will not change on hover as the browser is still interpreting the element as what ever it is, in this case, a table cell. The only difference is that it now has an event assigned to it. To have the cursor change you will need to do this using CSS.
Does it need to be the td that holds the id? Why not use an a tag to wrap around the image (and as suggested close the img tag correctly with />). Apply the onclick to the a tag and call a function with a return false afterwords to bypass normal behavior... and obviously, in your onclick you can call whatever function u want

Categories

Resources