I'm running up against a wall with something rather simple. I have an "Other:" option on a 'select' element that I am using as a condition for showing/hiding a 'textarea' element. I've got it mostly working despite one strange behavior: no matter what I do the 'textarea' is determined to display when the page loads, despite having 'display="none"' set. If I change to a non-'Other:' option it behaves normally and hides the textarea, and shows it when I select other. The only issue is on loading it defaults to displaying it. I'm sure this is something simple but it is utterly eluding me.
Here's code:
HTML
<div id="otherbox" style="text-align:left; padding:5px; margin:0px 6px;">
<textarea display="none" name="other" id="aboutOther" rows="10" cols="30" wrap="hard">
</textarea>
</div>
Javascript:
<script type="text/javascript">
var slct=document.getElementById("selectMenu");
slct.onchange=function()
{
this.value == "Other:" ? document.getElementById("aboutOther").style.display='block' : document.getElementById("aboutOther").style.display='none';
};
</script>
I included the 'div' on the textarea in case that's relevant (although I suspect it isn't). For full disclosure, that div is nested in another div. Hope that's not important.
Fullest disclosure: I don't know what I'm doing.
You need to use CSS to control the display property. Try to change display="none" to style="display:none;" in your textarea element as "display" is not a default attribute for textarea.
Related
I was wondering what is the proper way of store in html content that is displayed dynamically.
My case is that depending on what is clicked some sort of text is displayed in another part of a website. My first idea was to create a variable in js/jquery script to store this content so the script can access it whenever it is necessary.
this is an example:
var someContent=" Content to be displayed when something is clicked";
var a=$('#myid');
a.click(function(){
$('#myOtherId').text(someContent);
});
But after a while it came to my mind that the content should be stored in the html with a display value set to 'none' and js script should simple toggle its visibility depending wether it has been clicked or not.
Storing the content in js script seems much easier - but something tells me that there is better way to do it...
Indeed, you can do it by having the text in an HTML element, and use either jQuery's .toggle or .show depending on how you want it to respond to a second click:
$("#toggle").click(function () {
$('#msg').toggle(); // or .show() to have it in one way only
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="msg" style="display:none">Content to be displayed when something is clicked</span>
<br>
<button id="toggle">click me</button>
When the content is static, it seems more natural to have it embedded in your HTML, while when the content is dynamic (i.e. it depends on the actual state of the application), you would inject the dynamic part of the text with JavaScript.
For a non-JS-programmer in the development team (but with knowledge of HTML) it would in theory be easier to manipulate the messages when they are embedded in the HTML part of the page.
But this is a matter of opinion really.
Here is a mix of the two:
$("#enter").click(function () {
// Copy the number into the error message
$('#num').text($("#inp").val());
// Show the error message when the number is not even
$('#msg').toggle($('#inp').val() % 2 !== 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Enter an even number: <input id="inp" type="number" value=1>
<button id="enter">Verify</button>
<div id="msg" style="display:none; color:red">
The number <span id="num"></span> is not even
</div>
I have one <textarea> tag in my website where the user can put there HTML code and see its preview. My problem is when the user enter code below mention in my <textarea> my preview functionality getting fail :
<html>
<textarea>Some code to show</textarea>
</html>
So question is how can I escape this html code in my <textarea> tag as I know the problem is coming because </textarea> tag.
Any solution on this please.
Edit
Question is about using </textarea> within a textarea.
Problem visible here: http://jsfiddle.net/hrP6F/
EDIT: for your purpose this would do:
<textarea>
Outside Textarea
<textarea>Inside Textarea</textarea>
</textarea>
source: How can I embed a textarea inside of another textarea in HTML?
Or use contenteditable like someone already mentioned -> click
FIRST ANSWER: Im not sure I understand perfectly but still. You want to display the code inside text area somewhere else for instance?
You could do that on click like this (I reckon you are not statically putting nested text areas in html?):
HTML:
<textarea id="textarea" >Something code to show</textarea>
<button onclick="show()">show</button>
<div id="showArea"></div>
JS:
function show(){
var t = document.getElementById('textarea').value;
document.getElementById('showArea').innerHTML = t;
}
This is of course if what you want is to display html that is inside textarea. you could also put another textarea inside first one and it will work.
If you want the results to display dynamically you could use
<textarea id="textarea" onkeyup="show()">Something code to show</textarea>
This works even if you put your code (html and text area) inside text area - it displays it, I tested it
You can add a output div for preview purpose. Below is the jQuery script
HTML
<textarea placeholder="Enter your html"><b>test</b></textarea>
Run
<div class="op"></div>
JS
$('.run').click(function(){
$('.op').html($('textarea').val());
return false;
});
DEMO
I have a <cfgrid> with one <cfgridcolumn>. I'm using the values attribute for that column:
<cfform>
<cfgrid name="grdBrokers"
format="html"
bind ="cfc:CFC.Brokers.getGridData ( {cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})"
onChange="cfc:CFC.Brokers.editGridData( {cfgridaction},{cfgridrow},{cfgridchanged})"
selectMode = "edit">
<cfgridcolumn name="name" header="Name" values="Item1,Item2" >
</cfgrid>
</cfform>
The values attribute causes a combobox to appear when the user edits a cell in the Name column:
I need to dynamically (without reloading the page) change the options list of that combobox. After much research (stackoverflow.com, raymondcamden.com, etc.) I concluded there are no ColdFusion methods for doing this, so I figured I'd use JavaScript. To locate the id for the combobox I viewed the HTML source for my page and found the following:
<form name="CFForm_1" id="CFForm_1" action="/index2.cfm" method="post" onsubmit="return _CF_checkCFForm_1(this)">
<div id="cfgrid1344103796431" style="border: 1px solid #cccccc; overflow: hidden;"></div>
<select id='cf_grid_select0' class='ygrid-editor'>
<option value='Item1'>Item1</option>
<option value='Item2'>Item2</option>
</select>
<div>
<input type="hidden" name="__CFGRID__CFForm_1__grdBrokers" value="" /></div>
</form>
So, the id I want is cf_grid_select0. However, this element isn't found by document.getElementById(). I have also inspected the page using FireBug and can't find the cf_grid_select0 element on the DOM tab. It's contained in document.body.innerHTML as raw HTML text, but not as its own element in the DOM.
Here is my code that attempts to find cf_grid_select0:
<script type="text/javascript">
function find( ) {
var cbxFind = document.getElementById( 'cf_grid_select0' );
if ( cbxFind ) alert( "Found!" );
else alert( "Not found!" );
}
</script>
<form>
<input id="btnFind" type="button" onclick="find();" value="Find">
</form>
When I click the Find button, I get a popup saying "Not found!".
My question is: using JavaScript or jQuery, how can I locate a <select> that my browser obviously knows about, but doesn't seem to be in the DOM? I suspect ColdFusion.getGridObject() might be what I'm looking for, but I can't find a way to select the combobox using that method, either.
Thank you!
UPDATE:
It appears that ColdFusion is using ExtJS to transform the <select> into a ComboBox after the page loads, apparently removing the <select> from the DOM. I am now researching how to locate a ExtJS ComboBox.
I would almost certainly use jQuery! Try this:
<script>
$(document).ready(function() {
var $mySelect = $("#cf_grid_select0");
alert("I found it..." + $mySelect.attr("id"))
});
</script>
Good luck.
NINJA EDIT
If you're viewing the real source then it IS in the DOM. If you're viewing a "generated" JS kind of source, then it is tricky, but I think jQuery can detect new elements added to the DOM anyway.
i have a html of this format.
<html>
<head>
...
</head>
<body>
<label id='view' onClick="ShowMe()">show my name</label>
<img src="home.jpg" width="800px" height="600px"/>
<div id='name' style="display:none;height:200px">Your Name is DARSHAN</div>
</body>
</html>
and in javascript i have this function
ShowMe()
{
var nameDiv=Ext.get('name');
var viewDiv=Ext.get('view');
nameDiv.setStyle('display','block');
nameDiv.anchorTo(viewDiv,"tr-br?");
}
this thing works fine in all browsers but in IE,When i Click on 'Show My name' label,its displays the 'name' tag near the show my name but also a vertical space is taken up by 'name' Div tag and a scroll bar appears. How to get rid of it?
How can this work? There are lots of errors in this code:
There should be a semicolon in your style attribute value, not a comma:
<div id='name' style="display:none;height:200px">
There is a typo - display is called dispaly:
nameDiv.setStyle('display','block');
Also, what are the setStyle and anchorTo functions? What library are they from? Did you write it yourself? Please provide some more information.
EDIT: Thank you PPvG for adding tag extjs
Please provide snippets of the actual working/faulty code (copy and paste) instead of manually writing new code.
The inline style on are divided by a ","
That's invalid, CSS rules have to end with a semicolon ";"
IE is pretty picky when it comes to valid html/css
After discussing it with one of the experts at office i got to know this.
when you define Div at one place and anchorTo somewhere else this problem might come. how the anchor tag works is it will take the coordinates of the div to which we r anchoring and define the top and left of the new tag accordingly. So we need to make sure that we have defined 'poistion' attribute value to 'absolute'.
So to my problem solution was adding
<div id='name' style="display:none;height:200px;position:absolute">Your Name is DARSHAN</div>
EDIT: so I changed the style.display to block and some of them worked. the internal and external textareas are coming back with element not found
Another edit:
In my CSS I had a display:none.
When I remove this, it works. But thats no good as the element should only be available after an onclick. Why would setting it to display none stop it from ever being displayed?
I have a simple script here. Basically I wanted to set all the contents of a panel to be invisible (document.style.display ="none") and then after I've gone through all the contents, set one to be visible as indicated by the method.
Javascript:
function showText(divToShow)
{
var docsToHide = document.getElementsByClassName("full-width");
for (var i = 0; i<docsToHide.length;i++)
{
docsToHide[i].style.display="none";
}
var docToShow=document.getElementById(divToShow);
docToShow.style.display="table";
console.log(docToShow.style.display);
}
Some notes: full width returns a full list of textAreas in the form of:
[textarea#page-description-textarea.full-width, textarea#keywords-text-area.full-width, textarea#files-textarea.full-width, textarea#internal-links-textarea.full-width, textarea#external-links-textarea.full-width]
At the end of the loop after they've all been set, I set the specified textArea(divToShow).display to be table but yet nothing shows afterwards.
Any ideas? Am i overlooking something?
edit: Added html for textareas
<div id="text-column">
<div id="page-description-text">
<textarea id = "page-description-textarea" class="full-width">Page Description</textarea>
</div>
<div id="keywords-text">
<textarea id="keywords-text-area" class="full-width"> Keywords</textarea>
</div>
<div id="files-text">
<textarea id="files-textarea"class="full-width">files</textarea>
</div>
<div id="internal-links-text">
<textarea id="internal-links-textarea" class="full-width">internal</textarea>
</div>
<div id="external-links-text">
<textarea id="external-links-textarea"class="full-width">external</textarea>
</div>
</div>
One last thing to note is all the textArea elements do set themselves to be invisible. They just don't come back.
Are you passing the correct id to your showText() function?
Due to the fact that your variable is named divToShow, I think you are passing the id of the <div> which is correctly setting display:table but you've actually hidden the <textarea> child, which stays hidden.
If you pass the id of the <textarea> instead, the code function works as expected, as in this demo.