I have a div that needs to be hidden by default. It then can be toggled by a button:
<script type="text/javascript">
function toggle() {
text = document.getElementById('add_view');
var isHidden = text.style.display == 'none';
text.style.display = isHidden ? 'block' : 'none';
}
$(document).ready
(
function () {
toggle();
$("#add_view, #btnToggle").click(function (e) {
e.stopPropagation();
});
$(document).click(function () {
toggle();
});
}
);
</script>
It is working fine. The only problem is, when I refresh the page, I momentarily see the div before it is hidden.
What could I do to prevent that?
Thanks
You probably need to hide your element by default, and then use the button to toggle visibility. Try this:
<div id="add_view" style="display:none">....</div>
Make the element hidden in your html to begin with.
<div id="add_view" style="display: none;"></div>
Initially, you have to hide it by setting style="display:none;" of the div. Once when u want to toggle it, you have to use it as
document.getElementById(Id).style.display="";
in javascript.
Related
after close the popup display's overlay not remove ,
i write javascript and it's button code
plz help me
<script type='text/javascript'>
$(function () {
var overlay = $('<div id="overlay"></div>');
$('#Button1').click(function () {
overlay.fadeIn(1000);
overlay.appendTo(document.body);
$('#popup').fadeIn(1000);
}
);
$('.close').click(function () {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function () {
$('.popup').fadeOut(1000);
overlay.appendTo(document.body).remove();
return false;
});
});
and some other code
<div class="popup" id="Div1">
<div class='cnt23'>
<img src="../images/Power-Shutdown-2.png" class='x' id='Img1' />
<br />
<br />
<form action="" method="post">
</form>
</div>
</div>
how i can remove overlay that is display after close popup
update same that:
$('.close').click(function () {
$('.popup').hide();
$('#overlay').remove()
return false;
});
You're appending it to the document a second time and then removing the second one:
overlay.appendTo(document.body).remove();
The first one remains unaffected.
If the overlay is already on the document, then you can reference it by its id. Something like this:
$('#overlay').remove();
You may even be able to remove the previously appended variable (haven't tested this, but worth a try):
overlay.remove();
Or perhaps, before attempting the above, update the variable when originally setting it to the one which was appended (in $('#Button1').click:
overlay = overlay.appendTo(document.body);
If that works (again, haven't tested it, just an idea) then it would remove the need to query the document again with the main jQuery function.
I have a condition , where i have to use toggle class plus delete the class of all other list in a drop down menu ,
for instance if i select any product from the list , all the other products background position should be 0,0 , also on clicking the
same selected product again the bacground position should go back to 0,0. something similar to toggle . I just cant get the both functionality work together.
any ideas on how to get it working or any other way of doing it below is the code which i have tried so far:
for toggle i used the following jquery code :
<script type="text/javascript">
$(document).ready(function() {
$('.option-list.swatch.brass label').on("click", function() {
$(this).toggleClass('not-selected selected-value');
});
});
</script>
To change the background position of all the other list labels apart from the selected ones
<script type="text/javascript">
$(document).ready(function() {
$('.option-list.swatch.brass label').on("click", function() {
$(".option-list.swatch.brass label").each(function() {
$(this).css("background-position", "0px 0px");
});
$(this).css("background-position", "0px 50px");
});
});
</script>
<ul>
#foreach (var pvaValue in attribute.Values)
{
<li>
<label for="" class="not-selected" style="background-image:url(#(pvaValue.MenuIcon));width:50px;height:49px;">#pvaValue.Name</label>
}
</li> </ul>
<style type="text/css">
label.not-selected{background-position:0px 0px;}
label.selected-value{background-position:0px 50px;}
</style>
It is occurring because of Javascript conflict. The one which is called earlier will be overridden by later click bound function..
I would say, combine the logic from both the click bounds..
$('.option-list.swatch.brass label').on("click", function() {
//FIRST LOGIC
$(this).toggleClass('not-selected selected-value');
//SECOND LOGIC
$(".option-list.swatch.brass label").each(function() {
$(this).css("background-position", "0px 0px");
});
$(this).css("background-position", "0px 50px");
});
This should solve your problem. It's okay to call both the logic in one click event function. :-)
I am trying to slide down content within a div tag (red rectangle) when a user enters atleast one character in a textbox (green rectangle).
If no character is entered then the div content does not show.
Here is a pic of the aspx (design):
And this is the JavaScript I am using to try and achieve this:
function() {
$("#SubmitSection").hide();
inputOne = document.getElementById("<%= TextBox1.ClientID %>");
if (inputOne.value != "") {
$("#SubmitSection").slideDown('slow');
}
else {
$("#SubmitSection").slideUp('slow');
}
}
All the backend code works just fine but both the textbox and the div section show up when deployed.
if i got you right :
$("<%= TextBox1.ClientID %>").change(function(){YoursSlidingFunctionhere();})
.change()
You have to hook up to an event on the textbox. The onchange event only fires after the textbox loses focus, so I suggest the onkeyup event.
<asp:TextBox ID="TextBox1" runat="server" [...] onkeyup="updateSubmitSection()" />
You will have to name your function so that you can call it:
updateSubmitSection = function() {
$("#SubmitSection").hide();
inputOne = document.getElementById("<%= TextBox1.ClientID %>");
// ...
}
In addition to that, you need to call the function during the onload event of the page:
<body onload='updateSubmitSection()'>
The same solution using jQuery:
$(document).ready(function() {
updateSubmitSection();
$('#<%= TextBox1.ClientID %>').change(updateSubmitQuery);
}
You'll need to add this to a section of your javascript that is executed on initialization:
`$("#SubmitSection").hide();`
You could use the body onload attribute:
`<body onload="init()">
<script>
function init()
{
$("#SubmitSection").hide();
}
</script> `
I have written the code on
ascx script:
<script src="JScripts/jquery.alerts-1.1/jquery.alerts.js" type="text/javascript"></script>
<script>
$(function() {
$('#ImageButton1').click(function() {
jAlert('Please enter a valid Suggestion ID.', 'Case Entry');
});
});
</script>
and on
Code behind:
Page.ClientScript.RegisterStartupScript(this.GetType(), "Window", "callAlert();", true);
the problem is alert box is automatically getting disabled after some time when page load fully
What could be the reason that the alert box is being disable after clicking on OK button and how to call the callAlert function in proper way.
If you are using Master page or pages then you won't get the Client Id of the button as you are declared it should be declared as $('#<%=ImageButton1.ClientID%>') or $('[id$=ImageButton1]') hope it will solve you problem.
$(document).ready(function(){
$('#<%=ImageButton1.ClientID%>').click(function() {
alert('Please enter a valid Suggestion ID.', 'Case Entry');
});
});
You can try to put the following line before the function
$(document).ready(function() {
This will make it:
$(document).ready(function() {
$('#ImageButton1').click(function() {
jAlert('Please enter a valid Suggestion ID.', 'Case Entry');
});
});
});
If you wait till the page is ready, the alert box won't be overwritten (I hope x)).
Also when you check that text box, check if the condition is false, then give the alert.
Is the condition not false? Build in a check to check if the condition is really true. If so? Redirect.
EDIT:
var answer = Confirm: ("This page will now redirect. Are you ready?")
if (answer)
//redirect
else
return
OK, so first it's important to understand that $(function(){... and $(document).ready(function() {... are equivalent, and nothing inside either will execute until the page is fully loaded. In other words, there's no need to use
Page.ClientScript.RegisterStartupScript(this.GetType(), "Window", "callAlert();", true);
That can be removed. Also, I see that you're probably using web forms. Be mindful that the Id attribute that will be rendered is not equal to the Id of the control attribute. In other words, if you have a runat="server" control with an Id of ImageButton1, using the syntax $('#ImageButton1') in your jQuery won't work.
Taking this into account, I've added an example below that uses selectors based on class attributes.
<script type="text/javascript">
$(function () {
$('.ImageButton1').click(function (e) {
var text = $('.TextBox1').val();
var redirect = true;
if (!text) {
redirect = confirm('Empty...are you sure?');
}
if (redirect) {
window.location.href = 'http://your-redirect-here.com';
}
});
});
</script>
<input class="TextBox1" type="text" />
<input class="ImageButton1" type="button" value="Click" />
That should get you where you want to go. Let me know if you have any questions.
var answer = Confirm: ("This page will now redirect. Are you ready?")
if (answer)
{
//redirect
} else
{
return false;
}
Put this after jAlert Box:
return false;
And call the function like this:
return callAlert();
I have this code
$(document).ready(function () {
$("#<%= chkSpecialIntegration.ClientID %>").click(function () {
if (this.checked) {
document.getElementById('<%=ddlTypeSpecialIntegration.ClientID %>').style.visibility = 'visible'; }
});
});
When this is checked then a textbox is no longer required. How can I do this?
If all you want to do is make ddlTypeSpecialIntegrationvisible when chkSpecialIntegration is checked, you can just do:
$(document).ready(function () {
$("#<%= chkSpecialIntegration.ClientID %>").toggle(function() {
$("#<%= ddlTypeSpecialIntegration.ClientID %>").show();
}, function() {
$("#<%= ddlTypeSpecialIntegration.ClientID %>").hide();
});
});
There are two ways that an html textbox can be forced to be required. You should implement both.
The first is to validate the data prior to form submission. You can accomplish this in javascript by hooking into the onsubmit event. An example is at http://www.w3schools.com/js/js_form_validation.asp
Inside that method you will need to test if your checkbox is selected or not. If it isn't, then see if they typed something in your textbox.
The second is to validate it server side after form submission. For this you could simply provide some validation code in your button's server side onclick method.
I say to implement both because you will want to provide immediate feedback when something is required client side and you want to enforce it server side in case javascript is turned off.
Of course, if JS is turned off then they will probably never see the textbox to begin with.
Why do you need JS for that?
Isn't something like this enough?
<input<% if some_condition %> required="required"<% endif %> name="field" />
Give id for textbox like
<%: Html.TextBoxFor(model => model.FirstName, new { #tabindex = "1", maxlength = "50" ,id="Name"})%>
$(document).ready(function () {
$("#<%= chkSpecialIntegration.ClientID %>").click(function () {
if (this.checked) {
document.getElementById('<%=ddlTypeSpecialIntegration.ClientID %>').style.visibility = 'visible';
$("#Name").hide;
}
});
});