We Keep Coding

Javascript visibility slow on sub elements

I have used javascript style to imitate a pop-up box(any other idea would be appreciated). I have a function to set it visible or hidden based on some conditions.
I have two buttons on the pop up box ,"close": which closes the popup and sets it as hidden and "save": which saves whatever was on the pop up box.
My function only tells the box to close when i want it to. It does this right. But it takes about 4 seconds for both buttons to be hidden(which is not acceptable). and so i tried to invoke another function that hides both buttons as soon as the box is hidden, but this 4 second interval is still there and i have no idea why.
JAVASCRIPT
function login(showhide) {
if (showhide == "show") {
document.getElementById('popuplogin').style.visibility = "visible";
} else if (showhide == "hide") {
document.getElementById('popuplogin').style.visibility = "hidden";
}
document.getElementById("container1").style.filter = "blur";
}
HTML
<div id ="popuplogin">
<form class ="loginform">
<div class ="backbutton2" onclick="login('hide')"></div>
<input type ="text" placeholder ="Name" id ="loginname" class="boxes" />
<input type="password" placeholder ="Password" id ="loginpassword" class="boxes"/>
<p class ="btn1" onclick ="logger()">LOG IN</p>
</form>
</div>

remove parent div if the input value is empty and show parent div if the input value is not empty?

I am trying to remove parent div if the input value is empty and show parent div if the input value is not empty?
the value of the input field is dynamic which means the value of it is the value of another input filed and I do this using javascript.
so far I haven't been able to show/hide the parent div for some reason. and I suspect the reason is because the value of the input field is dynamic which means the users are not typing anything in that input field. they are typing in another input filed and the value of the dynamic input field gets updated accordingly.
Here is what i have so far for show/hide the parent div:
HTML:
<div id="BOTTEXT2" class="secTxt">
<input type="text" class="sect2" id="sect2" style="border:none; background:none; " value="" size="12" readonly="readonly"/>
</div>
JAVASCRIPT:
<script type="text/javascript">
if(document.getElementById("sect2").value == ""){
document.getElementById("BOTTEXT2").style.display="block";
}
</script>
could someone please help me out with this?

Wrap your code in an event handler:
window.onload = function() {
var input = document.getElementById('sect2');
input.addEventListener('change', function() {
document.getElementById('BOTTEXT2').style.display = (input.value ? 'block' : 'none');
}, false);
};
This way, whenever you update the input, the div state changes accordingly.

I don't know if it will work for you, but follow the solution.
I created another input type out of main div to simulate the situation.
I used jQuery. After that, you can set your css of your way.
HTML
<div id="BOTTEXT2" class="secTxt">
<input type="text" class="sect2" id="sect2" style="border:none; background:none; " value="BSAU145D" size="12" readonly="readonly"/>
</div>
<input type="text" id="sect1">
Javascript (jQuery)
$(document).ready(function(){
$('#sect1').keyup(function(){
if($('#sect1').val() == 'test') {
$('#BOTTEXT2').css({'display':'none'});
} else {
$('#BOTTEXT2').css({'display':'block'});
}
});
});
Here is the fiddle

Display a pop-up on radio button click

Please let me know how to open a pop-up on click of a radio button using JQuery.
Currently Im using a the following code for a radio button using Spring MVC and JSTL
<label class = "">
<form:radiobutton path = "" value = "" onchange= ""/>
<label class = "" style = ""> <spring:message code ="" /></label>
</label>
Many Thanks

I am assuming you mean a new window by pop-up?
The following code will open a new window with the URL when the status of the radio button changes. You can use click if you like...
$("#pop").change(function() {
window.open("http://www.google.com");
});
<input type="radio" id="pop" value="yes">
JSFiddle Example

I hope this will solve your problem.
onchange= "window.open("http://www.stackoverflow.com",width=200,height=100); "/>
EDIT1: Removing the hide class does the trick.
jQuery:
$(document).ready(function () {
$('input[type="radio"]').click(function () {
$('#r').removeClass("hide");
});
});
HTML:
<input type='radio'>SO
<div id="r" selectOption="#" class="modal hide" tabindex="-1" role="dialog" style=" background-color:#ccc; height: 100px;width: 350px"></div>
EDIT2:
If you check my html code, you will see an id for div named as "r" (unique selector) and class name "hide" prevent the div to be displayed. Therefore the div is hidden.
When the radio button is click, using removeClass we're removing the class "hide" this make the div visible.
Check this JSFiddle
Hope you understand.

you mean like this? CLICK HERE
HTML
<input type='radio' id='myRadio'>Radio button
JQuery
$(document).ready(function()
{
$('#myRadio').click(function()
{
alert("Clicked");
});
});

Using JQuery to display a hidden div with slideup and slidedown

I have made this form to let certain options appear when the user selects 'Yes' from my select form. I cannot get the div I have hidden to display at all, but I have used the Console and found that at least changing the select to yes does infact make my if statement run. I've ran a test and JQuery is working, but
Can anyone help me identify where I am going wrong?
<form method="post" action="quizcreatescript.php" name="quizcreateform" id="quizcreateform">
<select name="choosemarks" id="choosemarks">
<option value="noweights">No</option>
<option value="yesweights">Yes</option>
</select>
<!-- >This div is hidden until the user selects yes to add own marks<-->
<div class="hide" id="hiddendiv1"><!-- this select box will be hidden at first -->
<div class="input select">
<input type="text" name="quizcorrectaward" id="quizcorrectaward"><br>
<input type="text" name="quizincorrectaward" id="quizincorrectaward"><br>
</div>
</div>
<script type="text/javascript">
$("#choosemarks").change(function(){ // when #choosemarks changes
if ($(this).val() == "yesweights" ) { // if user selects to add own marks $(".hiddendiv1").slideDown("fast"); // if yes show the hidden div
}
else { $(".hiddendiv1").slideUp("fast"); //otherwise, hide the div again.
}
});
</script>
<input type="submit" name="createthequiz" id="createquiz" value="Create Quiz">
</form>
And the CSS form has
.hide {
display:none;
}

This:
$(".hiddendiv1")
does not select this element:
<div class="hide" id="hiddendiv1">
That would be this:
$("#hiddendiv1")
Use # for ID and . for classes, and it probably works ?
FIDDLE

How to enable/disable a text box on clicking a button

For example my page has a text box which already has some value and the readonly option for it is "true" , when the edit button is clicked next to the text box , the editing option in text box is enabled. How do I implement enabling the textbox when i click on a button.
function func() {
$("input:button[name='button1']").click(function() {
$("#text11").val($(this).val()).attr("disabled", "disabled");
if($(this).val() != "") {
$("#text11").attr("disabled", "").focus();
}
});
}
<input type="text" name="text11" readonly="readonly" value="Editing is disabled">
<input type="button" value="edit" name="button1">
which is when I click this button , the readonly option in textbox should be disabled.How do I do that ?

basically you just want to add the attribute disabled to your element to stop users using it.
$('#disablebutton').click(function(){
$('#textfieldToClose').attr('disable');
});
<input type="text" name="text11" readonly="readonly" id="textfieldToClose">
<input type="button" value="edit" name="button1" id="disablebutton">
i believe this should work, haven't tested it mind.

You need to use HTML DOM objects...
http://www.w3schools.com/jsref/default.asp