I have the following code:
<script>
$('#advert').live('change', function () {
if ($(this).is(':checked')) {
$(":text").show();
} else {
$(":text").hide();
}
});
</script>
This code shows and hides text fields when the checkbox is checked. It works perfectly but I want the text field to be hidden when the page opens.
Hide the text fields on document ready.
The document ready event, says "When I'm finished loading, execute this code". So on page load it fires .hide() on your text fields. It's very powerful!
$(document).ready( function () {
$(":text").hide();
});
Another approach is to set the style to "display: none;" on each of these. Then they start out hidden
<script>
$(function() {
$('#advert').live('change', function(){
if($(this).is(':checked')){
$(":text").show();
} else {
$(":text").hide();
}
}).trigger('change');
});
</script>
This will also handle the case when the user clicks the box, goes to another page, clicks the back button, and has the box checked by the browser automatically.
give your text fields a class of maybe .text
and then use css like so:
.text{
display: none;
}
or jquery like so:
$(document).ready( function () {
$(":text").hide();
});
Exchange
.show();
and
.hide();
Related
I have two button start and stop. on page load stop button hide and start button show.
when i click start button this button hide and stop button show.
i am using .hide() method.
Jquery Code:
$(window).load(function ()
{
$('#stop').hide();
});
It's working but issue is when page load this (stop button) will show for a second(like a blink) and then hide. i want to hide completely mean i don't want to show stop button when page load.
Hide it once only the button has loaded, not the whole window.
$("#stop").load(function() {
$(this).hide();
});
Otherwise you can always use CSS to hide it with display:none;
Maybe use CSS :
#stop { display: none; }
It is because you have used the load event handler, So till all the resources of the page is loaded the script is not executed.
One possible solution is to use a css rule, with the id selector to hide the element like
#stop{display: none;}
$(document).ready(function () {
$("#btnStop").click(function (e) {
e.preventDefault();
$(this).hide();
$("#btnPlay").show();
})
$("#btnPlay").click(function (e) {
e.preventDefault();
$(this).hide();
$("#btnStop").show();
})
})
I have an overlay div that fades in when I click on a DOM element. I would like to be able to close it when I click anywhere on the page ( except the div itself) but it does not work..
Here is my code:
//Script for showing the DIV called overlay.
<script>
$(function() {
$('#loginfooter').click(function(){
$('#overlay').fadeIn(200,function(){
$('#box').animate({'top':'20px'},'slow');
});
return false;
});
$('#boxclose').click(function(){
$('#box').animate({'top':'-800px'},500,function(){
$('#overlay').fadeOut('fast');
});
});
});
</script>
//Script for hiding the div after clicking anywhere..
<script>
$(document).ready(function(){
$('#overlay').on('click',function(ev){
var myID = ev.target.id;
if(myID!=='overlay'){
$('#box').animate({'top':'-800px'},500,function(){
$('#overlay').fadeOut('fast');
});
}
});
});
</script>
Just replace this:
$('#overlay').on('click', function (ev) {
with this
$(document).on('click', function (ev) {
and try again....
Actually, when you are clicking on the overlay element, the myID variable value is always == 'overlay'. Hence, it never goes inside the if statement.
DEMO 1
$(document).on('click',function(e){
if(!$(e.target).closest('#overlay').length)
$('#overlay').hide();
});
Other possibility without using any delegate event:
DEMO 2
$('#overlay').on('blur', function (e) {
$(this).hide();
});
Even you'll see most people using the first method, using the second one will avoid to have to use any delegate event which is better IMO. You just have to set focus on overlay when open it or when added to DOM, depending your specific case.
Would this work for you: jsfiddle?
I changed this:
if(myID!=='overlay'){
to this
if(myID=='overlay'){
so that you target the overlay instead of the box.
I am using ColorBox inline functionality and I have created a button which I've set to close the window when clicked:
$('.closebutton').live('click', function(){
$.fn.colorbox.close();
});
I have another function which I want to run when the button is clicked, so I've used:
<button class="closebutton" onclick="myFunction();">Close</button>
Problem is the myFunction is not working above.
Any ideas please?
UPDATE:
Here is where the code is:
<script type="text/javascript">
jQuery(document).ready(function() {
$(".inline").colorbox({inline:true, width:"50%"}); //for colorbox inline
$('#cboxClose').remove(); //remove popup window close button
$('.closebutton').live('click', function(){
$.fn.colorbox.close();
myFunction();
});
Adding myFunction(); before or after $.fn.colorbox.close(); is not working
myFunction code: (This goes after the code above on the page)
<script type="text/javascript">
function myFunction() {
$("#ajax-form").submit(function(){
$.post("update.php",
$("#ajax-form").serialize(),
function(data){
$('#jqm').attr('src',
$('#jqm').attr('src'));
}
);
return false;
});
}
</script>
UPDATE 2:
I'll try to explain better: I have a form and input on the main page that works find, so when you add some text to the input box and submit then form then the value of the input is submitted.
Now, when I put that same input in the inline area of colorBox so that it appears inside the popup window the value is not submitted. I've tried grabbing JS errors on firebag but cannot see anything there.
Hope this helps.
Why not just add myFunction() before $.fn.colorbox.close();? That way you can be sure what order things are handled in.
Instead of using inline javascript, you could simply do something like this :
$('.closebutton').live('click', function(){
$.fn.colorbox.close();
myFunction();
});
I believe the problem is that myFunction() (the onClick attribute) is being overridden by jQuery. If you want your function to execute whenever a .closebutton is clicked just use:
$('.closebutton').live('click', function(){
$.fn.colorbox.close();
myFunction();
});
If its only for that button, try adding an id to that button and:
$('.closebutton').live('click', function(){
$.fn.colorbox.close();
if($(this).attr('id') == 'exampleID')){
myFunction();
}
});
Ok so, after reading your update #2, I understand that actually your problem is not that the myFunction code doesn't execute right.
The problem is that you moved your input inside the colorbox, so its value doesn't submit with the form, wich is normal because the input is now outside the form.
You could either simply move your whole form inside the colorbox, or use javascript to copy the value of the input you moved outside of your form in a hidden input.
I have this js code, which display and hide some content on a page after click on a button. I've added second script (slickbox2), which do the same with another content by clicking on 2nd button. The problem I need to resolve is when 1st content is displayed and I click on 2nd button, I want to hide the 1st content. Thank you!
jQuery(document).ready(function() {
//hides the slickbox as soon as the DOM is ready
jQuery('#slickbox').hide();
// toggles the slickbox on clicking the noted link
jQuery('#slick-toggle').click(function() {
jQuery('#slickbox').toggle(400);
return false;
});
jQuery('#slickbox2').hide();
// toggles the slickbox on clicking the noted link
jQuery('#slick-toggle2').click(function() {
jQuery('#slickbox2').toggle(400);
return false;
});
});
Changed a few points.
$(document).ready(function(){
$('[id*=slickbox]').hide(); //hide your slickboxs
$('#slick-toggle').click(function(){
$('#slickbox').show();
$('#slickbox2').hide();
});
$('#slick-toggle2').click(function(){
$('#slickbox').hide();
$('#slickbox2').show();
});
});
BTW You can use $ in place of jQuery in all of your code:
jQuery('#slick-toggle2').click(function() {
jQuery('#slickbox2').toggle(400);
$('#slickbox1').toggle(400);
return false;
});
First of all you need to give class to all slickboxes e.g. slickbox then your Javascript would be like
<script type="text/javascript">
jQuery(document).ready(function() {
$('.slickbox').hide(); //hides all elements with class slickbox
$('.slickbox').click(function(){
$('.slickbox').hide();
$(this).toggle(400);
})
});
</script>
You can use hide() function to always hide the first content when clicking on the second button
jQuery('#slick-toggle2').click(function() {
jQuery('#slickbox').hide(400);
jQuery('#slickbox2').toggle(400);
return false;
});
Don't use toggle or the content will appear if it was hidden
I have an asp.net mvc application where I want to hide/display part of form based on selected line in a dropdown list. This is done by jQuery script:
<script type="text/javascript" >
$(document).ready(function() {
$('#owners').change(function() {
$("select option:selected").each(function() {
$('.location').css("display", "none");
$('#canDeleteUsers').css("display", "none");
});
if (($("option:selected").attr("value")) == "") {
$("select option:selected").each(function() {
$('.location').css("display", "block");
$('#canDeleteUsers').css("display", "block");
});
}
});
});
</script>
Now the problem is that when a user violates some of the logic and I return the View again to be validated, if the dropdown list was selected to the variant, which is supposed to hide the form part, it still appears.
Any ideas about it? Thanks in advance.
Sure; the page is reloaded and the visibility will reset.
One option would be to move the logic that determines whether to hide the form part into a separate (named) function, and call that function once on document.ready as well as on the change event of the dropdown.
Extract your logic for hiding showing the form out into a function on it's own. Call this function on the change event and also call it on document ready.