hide/show text area with textEditor depends on dropdown value - javascript

I use the NicEdit(www.nicedit.com) text-editor on my Text Area which is working and the below code to hide and show text area after selecting a value in the drop down it will show the text area but this is what i need help with;
1) i want the text area to show even before you select any value from the drop down.
2) i want the Text editor(NicEdit) to show on all the text area after selecting a value from the drop down to show the text area.
Js For Text-editor(Nicedit):
<script type="text/javascript" src="js/nicEdit.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function() {
new nicEditor({maxHeight : 200}).panelInstance('area');
});
</script>
Js to hide and show text area:
<script type="text/javascript">
function showHide()
{
if(document.getElementById("color_dropdown").selectedIndex == 1)
{
document.getElementById("hidden1").style.display = ""; // This line makes the DIV visible
}
else {
document.getElementById("hidden1").style.display = "none"; // This line hides the DIV
}
if(document.getElementById("color_dropdown").selectedIndex == 2)
{
document.getElementById("hidden2").style.display = ""; // This line makes the DIV visible
}
else {
document.getElementById("hidden2").style.display = "none"; // This line hides the DIV
}
if(document.getElementById("color_dropdown").selectedIndex == 3)
{
document.getElementById("hidden3").style.display = ""; // This line makes the DIV visible
}
else {
document.getElementById("hidden3").style.display = "none"; // This line hides the DIV
}
}
</script>
Html drop down:
<select name="menu" id="color_dropdown" onchange="showHide()">
<option>Select Meun</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<textarea id="hidden1" name="area" display:none;" id="area">ggggggggggggggggg</textarea>
<textarea id="hidden2" name="area" display:none;" id="area">hhhhhhhhhhhhhhhhh</textarea>
<textarea id="hidden3" name="area" display:none;" id="area">yyyyyyyyyyyyyyyyy</textarea>

Just a small note, you have more have multiple id attributes per text area and the second id's have the same value, this should be a class. The "display:none;" in your textareas are not in style tags(style="display:none;"), also try linking/loading the javascript at the bottom of the html page just before the the last html tag(or last body tag).
I am not sure if this will fix your problem, but these could be issues.

Related

Toggle re-hides all divs; need parent div to remain visible

Apologies in advance, I'm not terribly familiar with Javascript, but I do understand what this code is doing and why it is causing me this problem. I'm just not sure how to go about solving it AT all.
On my webpage I have an open/close dialogue toggle which is the parent div, the dialogue box is hidden upon the page loading. Within this dialogue box are more hidden divs for the dialogue options. Problem is, when one of the dialogue options is clicked, the script hides the entire dialogue box, preventing any of the dialogue options from being seen, because it can only show one div at a time, regardless of its parent or child status. When a div is clicked, all other divs are re-hidden.
I need the parent div to remain visible until the dialogue box toggle is clicked again. The individual choices DO need to hide/unhide when another choice is clicked.
Not sure if I should include any CSS here, it's just styling the dialogue box and its buttons within.
<div id="dialogue" style="display:none;">
<div class="room">
Room description here. What do you do?
<div class="buttons">
Pet the cat.
<br>
<div id="cat" style="display:none;">aw yeah kitty time</div>
Turn on the radio.
<br>
<div id="radio" style="display:none;">
<br>
audio file and tracklist here
</div>
</div>
</div>
</div>
<span class="toggle">
[Open/close dialogue.]
</span>
<script type="text/javascript">
var divs = ["cat", "radio", "dialogue"];
var visibleDivId = null;
function divVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}
</script>
I probably need a third function here because currently all the toggles are grouped together, hence why they're interacting like this, but I don't have the first clue how to accomplish this. I have been looking and haven't found anything that seems to match my needs.
Made a few corrections to your HTML so the href does not refresh the page on click. Also added in a few attributes (aria-controls) to track which div the button controls. I added comments to the JavaScript. There are plenty of Aria attributes they typically help with accessibility but they are super useful for keeping track of things in HTML and passing information to JavaScript.
//create a function to handle the click that takes in the event as a argument
function handleClick(event) {
//find out which div the button controls
const ariaControls = event.currentTarget.getAttribute("aria-controls"),
//select the controlled div
controlledAria = document.getElementById(ariaControls);
// if the controlled div is cat
if (ariaControls === "cat") {
// hide the radio div
document.getElementById("radio").classList.add("hide");
// if the controlled div is radio
} else if (ariaControls === "radio") {
// hide the car div
document.getElementById("cat").classList.add("hide");
}
//toggle the hide div on the controlled div
controlledAria.classList.toggle("hide");
}
//select all the buttons
const buttons = document.querySelectorAll("button");
//for each button add an event listener when the button is clicked run the handle click function
buttons.forEach(button => button.addEventListener("click", handleClick))
.hide {
display: none;
}
<div id="dialogue" class="hide">
<div class="room">
Room description here. What do you do?
<div class="buttons">
<button aria-controls="cat">Pet the cat.</button><br>
<div id="cat" class="hide">aw yeah kitty time</div>
<button aria-controls="radio">Turn on the radio.</button><br>
<div id="radio" class="hide">audio file and tracklist here
</div>
</div>
</div>
</div>
<span class="toggle"><button aria-controls="dialogue">[Open/close dialogue.]</button></span>

Hide Input Field and Still Take User Input

I was working on a project that I need a hidden input field to take user input.
I have javascript in place to focus always on the input field. When the div is visible I can see typing. When I hide the div type and make the div visible again I do not see any change. How can I make it so when the div is hidden, it will still take user input? Really, if there is another way besides hiding, that would be great.
<html>
<body>
<div id="diva">
<input name="geta" id="geta" type="text" onkeypress="javascript:geta.focus();" onKeyUp="javascript:geta.focus();" OnBlur="javascript:geta.focus();" OnChange="javascript:geta.focus();" />
</div>
<button onClick="javascript:change();">Show/Hide Div</button>
<script language="javascript" type="text/javascript">
<!--
function change() {
var div = document.getElementById('diva');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
geta.focus();
// -->
</script>
</body>
</html>
Fixed copy using Jeffman's idea:
<html>
<head>
<style>
input {
position: absolute;
left: -999em;
}
</style>
</head>
<body>
<input name="geta" id="geta" type="text" onkeypress="javascript:geta.focus();" onKeyUp="javascript:geta.focus();" OnBlur="javascript:geta.focus();" OnChange="javascript:geta.focus();" />
<button onClick="javascript:show();">Show</button><button onClick="javascript:hide();">Hide</button>
<script language="javascript" type="text/javascript">
<!--
function hide() {
document.getElementById('geta').style.position = 'absolute';
document.getElementById('geta').style.left = '-999em';
}
function show() {
document.getElementById('geta').style.position = 'absolute';
document.getElementById('geta').style.left = '10em';
}
geta.focus();
// -->
</script>
</body>
</html>
Are you just trying to make it so any user input is captured to a hidden input field?
If so you can add a onkeyup trigger to the document, and for every keyup, modify the hidden input field.
Otherwise, once you have hidden an element it would loses focus.
Simple example:
I don't know if you are using jQuery, so here is a very native, simple solution, put in your head tag
document.onkeyup = function(e) {
var input = document.getElementById('myinput');
if (input.style.display == 'none') {
input.value += String.fromCharCode(e.keyCode || e.which);
}
};
I don't think it's possible to type in a text field when it's hidden. What is your use case?

How to create dynamic content in a web page according to the option selected in drop down menu

I have a webpage where i have a dropdown menu with default option not selected. When the user selects an option then i want display textboxes related to that option. How can i do this. For example i have these images
Really depends on how many options you have in the list box and if the textboxes are shared between the options.
You could created hidden DIVs which are then shown when an option is selected. You would need to create a JavaScript function which is fired using the onChange event attached to the drop down.
If you were sharing the textboxes then given them specific classes which you can show/hide in the Javascript function, this is relatively simple if you use something like jQuery.
Add an event handler for selection changed like so:
$('#yourSelectId').change(function() {
var selectedVal = $('#yourSelectId option:selected').attr('value');
});
Then make some hidden divs visible depending on the selected value( $.('.class').hide() ).
Use divs whose visibility is set to be hidden, and make it visible on select event. You can use multiple divs for atheistic purpose, associated with a select event.
An example can be found in post 2 at -
http://www.codingforums.com/showthread.php?t=167172
This is quite simple. All textboxes are hidden and with an event on your dropdown menu, you just show the right div.
HTML :
<select id='dropdown' onchange='showDiv()'>
<option>Select</option>
<option value="div1">Div 1</option>
<option value="div2">Div 2</option>
</select>
<br /><br />
<div id="div1" style='display: none;'>Div 1</div>
<div id="div2" style='display: none;'>Div 2</div>
JS
<script type="text/javascript">
function showDiv() {
var div = document.getElementById("dropdown").value;
if(document.getElementById(div) != null) {
hideAllDiv();
document.getElementById(div).style.display = "block";
}
}
function hideAllDiv() {
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "none";
}
</script>
The code above is ugly but you can do it better with jquery and some css.
Edit :
Example with Jquery
<select id='dropdown'>
<option>Select</option>
<option value="div1">Div 1</option>
<option value="div2">Div 2</option>
</select>
<br /><br />
<div class='div' id="div1">Div 1</div>
<div class='div' id="div2">Div 2</div>
<style type="text/css">
.div { display: none; }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#dropdown").change(function() {
$(".div").hide();
$("#" + $(this).val()).show();
});
});
</script>

How can I detect when a text area loses focus and keep it from losing focus when a particular element is clicked?

I have a text area #ta with a list #ac-list underneath that's used for auto complete:
<div id='container'>
<textarea id="ta" name="god" rows="20"></textarea>
<ul id='ac-list' style='visibility:hidden'></ul>
</div>
When the text area loses focus, I'd like to hide #ac-list. So I call jquery's blur on the text area:
$('#textarea').blur(function () {
$('#ac-list').css('visibility', 'hidden');
})
This works, but I'd like to add the constraint that the text area shouldn't lose focus when the user clicks on #ac-list. How can I go about this?
Is this what you need? This is just a workaround. The time taken for blur on textarea and to focus on the li item varies to different computers.
HTML:
<div id='container'>
<textarea id="ta" name="god" rows="20"></textarea>
<ul id='ac-list'>
<li>dsfd</li>
</ul>
</div>
JavaScript:
var textAreaBlur = null;
$('textarea').blur(function () {
textAreaBlur = new Date();
});
var clickTimes = 0;
$("#ac-list > li").click(
function() {
if((new Date() - textAreaBlur) < 200) {
$("#ta").focus();
$(this).text("dsfd" + ++clickTimes);
}
}
);

HTML Javascript toggle visibility of 'select' ie dropdown?

I've created a dropdown and label and surrounded them within a div, however, when i get the div in the following function, it doesnt hide/unhide the label and dropdown??
function ToggleDiv(DivID)
{
if (document.getElementById(DivID).style.display == "none")
{
document.getElementById(DivID).style.display = "block";
}
else
{
document.getElementById(DivID).style.display = "none";
}
}
i've set the default visibility to hidden in the css, as i want the elements to be hidden and then revealled when a checkbox is clicked. Is this the problem? Is the css always making the elements hidden??
#unis
{
visibility:hidden;
}
<div class='row'>
<label id='Recruitmentlbl' for='Recruitment'>Recruitment?:</label>
<input id='Recruitment' name='Recruitment' class='formcbx' type='checkbox' onclick=ToggleDiv("unis")<br />
</div>
<div class='row'>
<div id = "unis">
<label id='Universitylbl' for='University'>University institution:</label>
<select name="uni">
<option value="uni1">uni1</option>
<option value="uni2">uni2</option>
<option value="uni3">uni3</option>
<option value="uni4">uni4</option>
<option value="uni5">uni5</option>
</select><br />
</div>
</div>
but its not working?
The problem is that JS can't really read the style.display that's set in the CSS. So when you test against "none" the actual value that could be returned might be "none" or "" (no string at all.)
It's annoying, but test against the positive like this:
function ToggleDiv(DivID)
{
if (document.getElementById(DivID).style.display != "block")
{
document.getElementById(DivID).style.display = "block";
}
else
{
document.getElementById(DivID).style.display = "none";
}
}
Also, visibility and display are not the same thing. Visibility sets whether an object can be seen and display sets whether it has "layout". A div that has display:none; takes up no space on the page, but a div that has visibility:hidden; does. So even if the code does toggle the display value, you also need to toggle the visibility value too.
In case you want to save yourself from some typing (it's also faster):
function ToggleDiv(DivID) {
var style = document.getElementById(DivID).style;
style.display = (style.display != "none") ? "none" : "block";
}​
HTML
<p onclick="ToggleDiv('box')">toggle box</p>
<div id="box" style="display:none"></div>
About the visibility vs display issue. The difference is simple if you view it from the user's perspective.
display: none looks like the element has been removed
visibility:hidden looks like the element has been hidden
You can see a demo here: visibility vs display
The main point is that the two is not interchangeable: setting one won't affect the other.

Categories