Issue showing div with jquery - javascript

I seem to be having a hard time displaying a div when a checkbox is clicked, the issue is pretty straight forward, but i cant seem to find the right jquery solution to resolve this, though i feel like i am very close.
$html=
'<form action="contacted.php" method="POST">
<input type = "hidden" name = "contact" class = "hidden" value = "'.$ip.'">
<input type="checkbox" id="contact'.$ip.'" value = "'.$ip.'" onclick="show()"/>
<div class="hide" style="
display:none;
border:3px
solid black;
background-color:grey;
color:white;
width:200px;
position:absolute;
left:40%;
top:20%;
-moz-border-radius: 15px;
border-radius: 15px;
padding:4px;
z-index:1000;
Width:500px;
">
<textarea name = "notes" style = "" > Let\'s get some notes about that...</textarea>
<input type="submit" value="YES"/>
<input type="button" value="NO" onclick="hide()">
</div>
</form>';
this is in a for loop and $ip is an identifier. but its pretty straight forward.
jquery that i have tried
function show(){
$(this).parent().find('.hide').css("display","block")
}
im trying to display the div hide when the checkbox is clicked (this happens multiple times on the same page) and i cant piece together the right combination from the jquery documentation. Any ideas? im sure this will be simple, I am more than willing to except javascript suggestions :)

add class to input like this and try it please
<input type="checkbox" id="contact'.$ip.'" class="contact_click" value="'.$ip.'" onclick="show()"/>
$('.contact_click').on('click',function(){
$(this).closest('div').css('css','block');
});

Try this
Change
<input type="checkbox" id="contact'.$ip.'" value = "'.$ip.'" onclick="show()"/>
to
<input type="checkbox" id="contact'.$ip.'" value = "'.$ip.'" onclick="show(this)"/>
and script as
function show()
{
this.parent().find('.hide').css("display","block");
}

Pass the clicked element into your function like this
<input type="checkbox" id="contact'.$ip.'" value = "'.$ip.'" onclick="show(this)"/>
and
function show(element){
$(element).parent().find('.hide').css("display","block");
}

you dont even need the class the checkbox is a direct child of the div.
$(this).parent().show(0);
just make sure you bind the click handler to the check box and that will definitely work.
and just to make sure you are binding the event right try this when you click the check box
function test(){
var test = $(this).parent().attr('class');
alert(test);
}
and you should get hide. so if you get hide it is binded correctly

Related

Change a class with a selector using javascript

I'm new to web programming, and I have been trying to do a true/false test, and when the answers are submitted, the answers change colors depending if it's correct or not.
At first, I used labels for each input:
<h3>1. Father Christmas and Santa Claus are the same man</h3>
<input type="radio" id="1bon" name="q1" value="Non" >
<label for="1bon" > True </label> <!-- label is for css -->
<input type="radio" id="1non" name="q1" value="Bon">
<label for="1non" > False </label><br/>
And in the css, I used " input[value=Bon] + label" or "input[value=Non] +label" with a "background color : blue ", and in a JS, I used label[i].style.background to change the color. It's does change the color, but only of the radio button, and when not checked, which is exactly what I'm trying to do. It comes from the fact I don't know how to select the label of a precise input[x=y]:selector.
So I rewrote the whole thing without any labels
<h3>1. Father Christmas and Santa Claus are the same man </h3>
<input type="radio" class="input" id="1bon" name="q1" value="Non"> True
<input type="radio" class="input" id="1non" name="q1" value="Bon"> False
With new css:
.input {
background-color: #fff;
display:inline-block;
width:5%;
padding:10px;
border:1px solid #ddd;
margin-bottom:10px;
cursor:pointer; /* new selectoon type */
}
.input:checked{
background-color: #4876ff;
}
So, when just checked, it is blue, but when the answers are submitted, depending of the value of the input, it change the color of the class:checked.
It there any way do modify the style of a class with a selector in javascript ?
Also, if the user decides to change his answer for a question, the checked have to go back to being color neutral.
Thank you for your help.
You can use this function to change class of element as you explained earlier. But changing color of checkbox is not possible without using third party plugin or customized elements. Please check this link
function Test2($this){
var radios = document.getElementsByName('q1');
for(i=0; i< radios.length; i++){
var element = radios[i];
element.classList.remove("correctAnswer");
element.classList.remove("wrongAnswer");
}
if($this.value === "Non"){//Assume "Non" is correct answer
$this.classList.add("correctAnswer");
}else{
$this.classList.add("wrongAnswer");
}
}

How do I create a div element with an id that is dynamically used when calling a method on the div element?

First of all I am new to JavaScript. I am using the aloha editor. I want to create text areas dynamically using div tags by assigning id's for each div. Using that id I have to call a method, which is the aloha method. Everything goes fine but the aloha method is not getting the id. On the browser I am getting an empty space rather than an aloha box.
Here is my code..
javascript
var screen=document.getElementById('addScreens');
num_q=document.getElementById('numquest').value;
for(i=0;i<num_q;i++) {
div1=document.createElement("div");
div1.id="multicolumn";
screen.appendChild(div1);
}
//aloha
$(document).ready(function() {
$('#multicolumn').aloha(); //multicolumn is not defined
});
**HTML**
<html>
<body>
<br><input type="text" name = "numquest" id ="numquest" value="" size="5" style="" disabled>
<input type="button" value="submit" onclick="getFields();">
<div id="addScreens"> <br> </div>
</body>
</html>
<style type="text/css">
#multicolumn {
-webkit-column-width:300px;
-webkit-column-gap:30px;
-moz-column-width:300px;
-moz-column-gap:30px;
column-width:100px;
column-gap:30px;
width:550px;
height: 150px;
margin: 0 auto;
overflow-x: auto;
overflow-y: auto;
}
</style>
So, how do I have the id of the dynamically created div's accessible everywhere??
Thanks in advance for any ideas.
You can create the div inside $document ready and then call aloha on it. See the below code for dynamic id generation
//aloha
$(document).ready(function() {
var screen=document.getElementById('addScreens');
var num_q=document.getElementById('numquest').value;
for(i=0;i<num_q;i++)
{
var div1=document.createElement("div");
div1.id = "multicolumn_" + i;
screen.appendChild(div1);
$('#' + div1.id).aloha();
}
//multicolumn is not defined
});
From the code you have shared no multicolumn div will be created at all because the value of your input field is never set to a numeric value. Considering this line in your code
<input type="text" name = "numquest" id ="numquest" value="" size="5" style="" disabled>
and calling this line in JS
num_q=document.getElementById('numquest').value;
will result in num_q evaluated to an empty string. Hence your loop won't have any effect. You could try to give a default value for your input and access its value a bit differntly with something like this :
<input type="text" name = "numquest" id ="numquest" value="1" size="5" style="" disabled>
//JS
num_q= parseInt(document.getElementById('numquest').value, 10);
On Top of that I must agree with Saravana it will be a better approach to put everything in the $(document).ready function.

While typing in a text input field, printing the content typed in a div

I have a website where there is a empty box and a input text box. I want to be able to type something in that input box and have it be printed on the empty box.
HTML
<div class='printchatbox'></div>
which is the empty box and
<input type='text' name='fname' class='chatinput'>
which is the input box.
CSS
.printchatbox
{border-width:thick 10px;border-style: solid;
background-color:#fff;
line-height: 2;color:#6E6A6B;font-size: 14pt;text-align:left;float: middle;
border: 3px solid #969293;width:40%;}
If anyone could tell me how to do this I would greatly appreciate it. Thanks
You use the onkeyup event
Searching with ids is a lot easier. Add ids to your elements as follows:
<div class='printchatbox' id='printchatbox'></div>
<input type='text' name='fname' class='chatinput' id='chatinput'>
JS
var inputBox = document.getElementById('chatinput');
inputBox.onkeyup = function(){
document.getElementById('printchatbox').innerHTML = inputBox.value;
}
Here is a Live example
http://jsfiddle.net/3kpay/
<div class='printchatbox' id='printchatbox'></div>
<input type='text' name='fname' class='chatinput'
onkeyUp="document.getElementById('printchatbox').innerHTML = this.value" />
There are many ways to get this done, possibly the easiest is to use jQuery. In the example below I am using the jQuery keyUp() function to listen for keyboard events, then writing the updated value to the .printChatBox
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
</head>
<body>
<div class='printchatbox'>CHANGE ME</div>
<input type='text' name='fname' class='chatinput'>
<script type="script/javascript">
$('.chatinput').keyup(function(event) {
newText = event.target.value;
$('.printchatbox').text(newText);
});
</script>
</body>
</html>
I've posted a working example here: http://jsbin.com/axibuw/1/edit
In your HTML,
<div id='printchatbox'></div>
<br>
<input type='text' id='fname' class='chatinput' onkeyup="annotate()">
In JS,
function annotate(){
var typed= document.getElementById("fname").value;
document.getElementById("printchatbox").innerHTML= typed;
}
Click here for LIVE DEMO
Angular JS does this in two lines of code :
Just import Angular JS as you import other libraries :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js">
Then, on you first div (where you are copying from):
<input type="text" ng-model="myID"> </input>
Then, on the place where you will show the content : just write :
<div> {{myID}}</div>
This is the best solution I have ever found !

echo text from input

I am trying to make a basic border radius generator. I have an input field for the user to type in the number of their choice as shown below:
<label>Border Radius:</label>
<input name="border-radius" class="jj_input" type="text" size="2" />
I then have an output area where I want the number they have typed in to appear before "px"
<div class="yourcode">
border-radius: *NUMBER_APPEARS_HERE*px;
</div>
Im not sure how to go about this, so could someone please point me in the right direction. Please also let me know if this has been answered already. Thanks in advance.
The input element has an onchange (or onkeyup) event that you can use. You can execute javascript inside that event that sets the innertext of your target div.
Onchange fires after validation (mostly this means when the user leaves the box). If you want to change directly after input, and only keyboard input is permitted, you can use a keydown/up event. In the example below onkeyup is used
<label>Border Radius:</label>
<input name="border-radius" class="jj_input" type="text" size="2" onkeyup = "document.getElementById('displaydiv').innerText = 'border-radius: ' + this.value + ' px'" />
<div class="yourcode" id="displaydiv">
border-radius: ..px;
</div>
A bit more elegant solution uses a separate span for the .. instead of replacing the entire text, but for demonstration purposes the above should suffice.
Got it working in the end:
<label>Border Radius:</label>
<input name="border-radius" id="jj_input" class="jj_input" type="text" size="2" value='' onkeyup='changeRadius()' />
<div class="yourcode">
border-radius: <span id="radius"></span>px;
</div>
<script type="text/javascript">
function changeRadius(){
var jj_input = document.getElementById('jj_input').value;
document.getElementById('radius').innerHTML = jj_input;
}
</script>

HTML/CSS: How can I get a box with a single border?

I need a simple list (3 lines of text) surrounded by a gray box. I know I need to implement on blur instead of a "close" button.
Here's what I have so far...
I can't sen to get text values to transfer.
Help!
<script> function $(id) { return document.getElementById(id); } </script>
<input name="media" id="media" type="text" />
<input type="button" value="..."
onclick="$('keypad').style.display='inline-block';"/>
<div id="keypad" style="display:none; background:#CCC; vertical-align:top;">
<input type="text" value="Canvas" onclick="$('media').value='Canvas';"/><br/>
<input type="button" value="Done" onclick="$('keypad').style.display='none'"/>
</div>
You're mimicking the Prototype framework but could be getting much more out of it. Firstly, if you'd set your click/blur events up as abstracted events the code would be clearer and more cross-browser compatible.
If you're showing/hiding an element use
$('elementID').show();
$('elementID').hide();
If you're getting a form value use:
$F('elementID');
or setting a form value:
$F('elementID') = 'newValue';
I can't really understand what you're trying to do - your question re: '3 lines of text' doesn't really reflect the code you've posted...
<script> function $(id) { return document.getElementById(id); } </script>
<input name="media" id="media" type="text" />
<input type="button" value="..." onclick="$('keypad').style.display='inline-block';"/>
<div id="keypad" onmouseout="$('keypad').style.display='none'" style="display:none; background:#CCC; vertical-align:top;border:1px solid grey;">
<input type="text" value="Canvas" onclick="$('media').value = $('mediain').value;" id="mediain" onblur="$('keypad').style.display='none'"/><br/>
</div>
border: 1px solid black;
I'm not quite sure what you mean about getting text values to transfer, but a box with a single gray border should just be
<div style="border: 1px solid #AAAAAA;">
<!-- your list here -->
</div>
I spent too long typing, I'll just refer you to adam's answer for the logic part of your question.

Categories

Resources