How to modify this javascript code to only expand the hidden text - javascript
I want to expand hidden text on a webpage and after some (re)search on google i came across the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script type="text/javascript">
function Expand(node)
{
// Change the image (if there is an image)
if (node.childNodes.length > 0)
{
if (node.firstChild.tagName == "IMG")
{
node.firstChild.src = "minus.gif";
}
}
node.nextSibling.style.display = '';
}
function Collapse(node)
{
// Change the image (if there is an image)
if (node.childNodes.length > 0)
{
if (node.firstChild.tagName == "IMG")
{
node.firstChild.src = "plus.gif";
}
}
node.nextSibling.style.display = 'none';
}
function Toggle(node)
{
// Unfold the branch if it isn't visible
if (node.nextSibling.style.display == 'none')
{
Expand(node);
}
// Collapse the branch if it IS visible
else
{
Collapse(node);
}
node.childNodes[1].nodeValue = (node.nextSibling.style.display == 'none')? 'More...' : 'Less...';
}
</script>
</head>
<body>
<a onclick="Toggle(this)" style="cursor:pointer;"><img src="plus.gif" alt="Expand/Collapse" /> More...</a><p style="display:none;">This is a sample of the expanded text that will show up when "+ More..." is clicked</p>
</body>
</html>
Now the script displays a .gif image of a plus sign(expand) with 'More...' beside it and when the .gif file or the 'More...' is clicked the hidden text appears and the plus.gif is replaced with a minus.gif and 'More...' changes to 'Less...'
but i want to implement it in another way, i want that once the expand (plus.gif) is clicked, no other .gif should appear again, i dont know how to modify the code to do it, so friends please help me out
i am a newbie in javascript so such a dumb doubt had to come
Thanx :)
Just change your code to this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script type="text/javascript">
function ExpandDelete(node)
{
if (node.nextSibling.style.display == 'none')
{
node.nextSibling.style.display = '';
node.parentNode.removeChild(node);
}
}
</script>
</head>
<body>
<a onclick="ExpandDelete(this);" style="cursor:pointer;"><img src="plus.gif" alt="Expand" /> More...</a><p style="display:none;">This is a sample of the expanded text that will show up when "+ More..." is clicked</p>
</body>
</html>
Related
unable to upload dicom images upon click event - webMango
I am using webMango and I modified the html syntax to upload DICOM images upon a clicking the browse button. As of now I have hardcoded the value of the params[] variable. It still does not work. Upon selecting random files, I still get an empty DICOM viewer and no images are uploaded. Also, even if I initialize params[] to the actual images, the viewer gives an incorrect view the images. The sagittal and coronal views are not shown. Here's my code: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>webMango</title> <script src="mango.js"></script> <script src="https://www.java.com/js/deployJava.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> var params = []; $(document).ready(function(){ var filetarget="[["; $("#uploadFile").change(function(event){ $dir = $("#directory").val(); $dir = "data"; for( var i=0; i<event.target.files.length; i++) { filetarget = filetarget + "'" + $dir + "/" + $(this).val() + "'"; if(i != event.target.files.length -1) filetarget= filetarget + ","; } filetarget = filetarget + "]]"; //params["images"] = "\"" + filetarget + "\""; params["images"]="[['data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm']]"; }); }); </script> </head> <body> <p>This is an example use of webMango.</p> <label> Directory root </label> <input type="text" id="directory"/> <br/> <input type="file" id="uploadFile" multiple directory webkitdirectory mozdirectory/> <div style="width:800px;" class="mango" id="mango"></div> </body> </html>
It's not designed to work with Jquery, but with a small modification, I think you can do what you want. First, in mango.js, remove this line: window.onload = runMango; // it's at the bottom Next, see the below example use with JQuery. Note the call to runMango(). <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>webMango</title> <script src="mango2.js"></script> <script src="https://www.java.com/js/deployJava.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> var params = []; $(document).ready(function() { params["images"] = "['data/sample_image.nii.gz']"; runMango(); }); </script> </head> <body> <p>This is an example use of webMango.</p> <div style="width:800px;" class="mango"></div> </body> </html> Also, even if I initialize params[] to the actual images, the viewer gives an incorrect view the images. The sagittal and coronal views are not shown. Not sure about this one. I noticed all your images references are to the same file, so maybe that had something to do with it. Make sure your series contains references to all the different files in the series.
Dynamically assign class to paragraph
How do you assign a class dynamically to a paragraph (via javascript/CSS) IF the paragraph contains the wording "Time Recorded:"? You'll notice that I have manually assigned the paragraph with class class="dyncontent". However, I'd like to dynamically assign this class to any paragraph tag which contain the words "Time Recorded:". <!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=iso-8859-1" /> <title>Untitled Document</title> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <script type="text/javascript"> if (document.all || document.getElementById){ //if IE4 or NS6+ document.write('<style type="text/css">') document.write('.dyncontent{display:none;}') document.write('</style>') } </script> <div class="right"> <ul> <li class="say agent public"> <p>Description line 1</p> <p class="dyncontent">Time Recorded: 5MIN(S)</p> <p>Another description line</p> </li> </ul> </div> </body> </html>
You could use jQuery: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script> $(function(){ $("p:contains('Time Recorded:')").addClass('dyncontents'); }); </script>
$("p").each(function(ele) {if (this.html().indexOf('TimeRecorded') > 1) {$(this).addClass('dyncontent'))}});
I'd do indexOf because it will match easier than innerText var allP = document.getElementsByTagName('p'), pLength = allP.length; while(pLength--){ if(allP[pLength].innerHTML.indexOf('Time Recorded') != -1){ allP[pLength].addClass('dycontents'); } } To explain: first you get all the <p> in the document. Then you loop through them. If any of them contain text of Time Recorded you add your class to it.
The following is solution without Jquery o = document.getElementsByTagName('p'); for (i = 0; i < o.length; i++) { if (o[i].innerText.indexOf('Time Recorded:') != -1) { o[i].className = 'theClassYouWant'; } }
Rotating image causes strange flicker
I am trying to rotate some images. Works great except I get a strange "flicker" on some of the transitions. Any suggestions what I am doing wrong? Thank you <!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=ISO-8859-1" /> <title>Testing</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <style type="text/css"> #test img {position: absolute;right: 0;top: 0;} #test img:last-child {display: none;} </style> <script> function rotateImage() { var $images=$('#test img'); $images.eq(1).attr({src : files[index]}); $images.eq(0).fadeOut(1000); $images.eq(1).fadeIn(1000, function() { $images.eq(0).attr('src', files[index]); $images.eq(0).show(); $images.eq(1).hide(); if (index == files.length-1){index = 0;}else{index++;} }); } var index=1,files=['f1.jpg','f2.jpg','f3.jpg']; setInterval(rotateImage, 2000); </script> </head> <body> <div id="test"><img src="f1.jpg" alt="" /><img src="f1.jpg" alt="f1.jpg" /></div> </body> </html>
Flickering is happening because of this $images.eq(1).fadeIn(1000, function() { $images.eq(0).attr('src', files[index]); $images.eq(0).show(); $images.eq(1).hide(); if (index == files.length-1){index = 0;}else{index++;} } ); After the fadeIn of image at index 1, source is set for image at index 0 and it is shown immediately. This results in flickering. What you have to do is swap the images. $images.eq(1).fadeIn(1000, function() { $images.eq(0).remove().appendTo('#test'); // swaps the image indices if (index == files.length-1){index = 0;}else{index++;} }); See demo here : http://jsfiddle.net/diode/SeL3M/4/
try using the jquery cycle plugin. in has a fade that works great
It works fine in Firefox when you add a small time delay between showing and hiding an element (I've done it by using fadeIn(100, function() in jsfiddle bellow). http://jsfiddle.net/SeL3M/ You can read more about this behavior here: unwanted "flickering" effect when using hide and show in jquery
how to modify this javascript code to add a text box and receive input from user?
Here is a language translation code that google provides to detect the language in which the code is typed . This is the default code in which it translates the code from "var text=" field . I want to modify this code so as to recieve input from the user in a text box and on clicking the submit button it should display the result of language detected on the same page . <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google AJAX Language API - Basic Translation</title> <script type="text/javascript" src="//www.google.com/jsapi"></script> <script type="text/javascript"> google.load("language", "1"); function initialize() { var text = "¿Dónde está el baño?"; google.language.detect(text, function(result) { if (!result.error) { var language = 'unknown'; for (l in google.language.Languages) { if (google.language.Languages[l] == result.language) { language = l; break; } } var container = document.getElementById("detection"); container.innerHTML = text + " is: <b>" + language + "</b>"; } }); } google.setOnLoadCallback(initialize); </script> </head> <body> <div id="detection"></div> </body> </html>
Try this <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google AJAX Language API - Basic Translation</title> <script type="text/javascript" src="//www.google.com/jsapi"></script> <script type="text/javascript"> google.load("language", "1"); function initialize(text) { google.language.detect(text, function(result) { if (!result.error) { var language = 'unknown'; for (l in google.language.Languages) { if (google.language.Languages[l] == result.language) { language = l; break; } } var container = document.getElementById("detection"); container.innerHTML = text + " is: <b>" + language + "</b>"; } }); return false; } </script> </head> <body> <form onsubmit="return initialize(this.text1.value"> <input type="text" value="" name="text1" /><input type="submit" /> </form> <div id="detection"></div> </body> </html>
Javascript variable not refreshing in Phonegap application
I have just written my first app in phonegap that simply replaces a text string on the screen each time you activate a link. The original string stays where it is and the new string is written over the top. If you then activate the link again the second string is replaced with a new one but still over the top of the first string. I have tried clearing the variable to fix this but no luck. Is this a platform limitation or am i doing something wrong? Code is below <!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>Untitled Document</title> </head> <body onload="newIdea()"> <h1 class="h1">First Love</h1> <p>Have you ever? </p> <h3><div id="ideaDiv">Nothing</div></h3> Let's Do it No Thanks <script type="text/javascript"> var ideas=new Array(); // regular array (add an optional integer ideas[0]="Kissed someone in the rain"; // argument to control array's size) ideas[1]="Eaten peking duck"; ideas[2]="Stood naked in the open"; function newIdea(){ var idea = ""; var idea = ideas[Math.floor(Math.random()*ideas.length)]; var ideaSpace = document.getElementById("ideaDiv"); ideaSpace.innerHTML=idea; var ideaLink=document.getElementById("ideaLink"); var linkCreate="http://www.google.com/calendar/event?action=TEMPLATE&text=" + idea + "&dates=20120101/20120102&details=&location=&trp=false&sprop=&sprop=name:"; ideaLink.href=linkCreate; } </script> </body> </html> Thanks Simon
I have no experience with phonegap, but in the past I found some problems trying to set innerHTML in xhtml documents, it don't check if the string you are using causes the document to still a valid xml and just throws an error, to achieve the same effect try: <!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>Untitled Document</title> </head> <body onload="newIdea()"> <h1 class="h1">First Love</h1> <p>Have you ever? </p> <h3><div id="ideaDiv">Nothing</div></h3> Let's Do it No Thanks <script type="text/javascript"> var ideas=new Array(); // regular array (add an optional integer ideas[0]="Kissed someone in the rain"; // argument to control array's size) ideas[1]="Eaten peking duck"; ideas[2]="Stood naked in the open"; function newIdea(){ var idea = ""; var idea = ideas[Math.floor(Math.random()*ideas.length)]; var ideaSpace = document.getElementById("ideaDiv"); //ideaSpace.innerHTML=idea; ideaSpace.removeChild(ideaSpace.firstChild); ideaSpace.appendChild(document.createTextNode(idea)); var ideaLink=document.getElementById("ideaLink"); var linkCreate="http://www.google.com/calendar/event?action=TEMPLATE&text=" + idea + "&dates=20120101/20120102&details=&location=&trp=false&sprop=&sprop=name:"; ideaLink.href=linkCreate; } </script> </body> </html>