Hello I have a sign up form which is visible and I am trying to hide it when the page loads. So what I did was to put the whole form in a div class named "signup" and then hide it with a script code.
UPDATE:
html
<script>
document.write('<div class="js">');
</script>
<span class="button">Sign In</span>
<div id="signup">
<div class="modal-bg">
<div id="modal">
<span>Sign In×</span>
<form>
<input id="username" name="username" type="textbox" placeholder="Username" required>
<input id="password" name="password" type="password" placeholder="Password" required>
<a id="forgot-link" href="#">Forgot password?</a>
<button name="submit" id="submit" type="submit">Sign in</button>
</form>
</div>
</div>
</div>
<script>
document.write('</div>');
</script>
My JS code (without hide function):
$('.button').click(function(){
$('#modal').css('display','block');
$('.modal-bg').fadeIn();
});
$('#close,.modal-bg').click(function(){
$('.modal-bg').fadeOut();
$('#modal').fadeOut();
return false;
});
Even though the hide/appear seems to work the form goes hidden if I click on it. This is a problem as no one can sign up if they can't type/click on the form.
(ISSUE FIXED)
here is the codepen (live version): http://codepen.io/mariomez/pen/WbgrNK
You don't need the signup div at all - I think it complicates things. Just start your modal background hidden so before your button click code add this:
$('.modal-bg').css('display','none');
Example
Update
to stop your form showing up whilst your page loads I would add a js div:
after your body opening tag:
<script>
document.write('<div class="js">');
</script>
before your body closing tag:
<script>
document.write('</div>');
</script>
This allows you to apply js only style, in this case for the modal-bg:
.js .modal-bg {display:none;}
and then you can remove the above js to hide the modal as it will be now in your css
updated codepen
You hide the "signup" Div but try to restore the "modal" div
This works:
$('.button').click(function(){
$('#signup').css('display','block');
$('.modal-bg').fadeIn();
});
$('#close').click(function(){
$('.modal-bg').fadeOut();
$('#signup').toggle();
return false;
});
You are looking for a div with the id "signup", but that is the class name.
$(function() {
$(".signup").hide();
});
Will hide the signup div when the page loads.
You could then use $(".signup").toggle(); on the button click event.
If you combine these, e.g.
$(function() {
$(".signup").hide();
$(".button").click(function() {
$(".signup").toggle();
});
});
Then the button displays the signup block correctly, and it is hidden on page load.
Here is the jQuery to change the CSS on page load:
$('.signup').css({
'display': 'none'
});
First method (CSS) - CodePen
#signup {
display: none;
}
Second method (jQuery) - CodePen
$('#signup').hide();
Looks like you already figured it out in your codepen paste? That code is different from your post...
Anyway, you have 3 layers of divs in your Login dialog:
#signup > modal-bg > modal
So if you want to hide #signup after loading the page:
$(function() {
$("#signup").hide();
});
then you also need to show/hide #signup in your button events.
.modal-bg and #modal are child elements of #signup, so if you remain #signup in hidden, .modal-bg and #modal will always be hidden no matter what you do on them.
By the way, I suggest you to use FireBug or general developer tools (hit F12 in chrome/IE/FIrefox) to inspect HTML elements and check what goes wrong, at least that's how I found the problem in your code.
Related
I have the below html. I am trying to access the div tag warningMessage under scripts.
<script id="notePopup" type="text/x-kendo-template">
<p class="notePopupMessage">Please enter a note:</p>
<input class="textNote k-textbox" type="text" maxlength="512" />
<div class="buttons">
<button class="add k-button">Add</button>
<button class="cancel k-button">Cancel</button>
</div>
<div id = "warningMessage" style="visibility: hidden" >
<p id="warningMsg" > Status change action note would not be saved until Save button is selected. </p>
<div>
</script>
I tried to access div id warningMessage and set the visibility to not hidden on certain events by doing something like this$("#warningMessage").show(); and it did not work.
What do we have to do different in order to access this div tag. I suspect its behaving like this because it is under a script tag.
Here is the Fiddle link.
Try running the kendo script first, then access the element by running the jQuery function you mentioned? I guess when the kendo script is finished, that template will be converted to valid html, and your div will be accesible for jQuery.
It won't work because you first set a visibility:hidden.
So either you set it to visible when the event occurs, or you first display:none this div and make it display:block (using show(), fadeIn() and so on) for this specific event:
Here is a fiddle for you: https://jsfiddle.net/liototo/jnmyswy4/1/
I set the warning div to:
#warningMessage{
display: none;
}
The jQuery part is then as follow (just an example):
$('.add').on('click' , function(){
if ($('.textNote').val())
$('#warningMessage').show();
else
alert('enter something!');
});
I have a CSS modal on my page that is automatically hidden by JS until a Sign Up link is clicked. My problem is that when the page loads, the modal briefly flashes before being hidden.
I have used JS Hide function on the modal but am unsure of how to prevent the flash on page load, without disabling the ability for it to show on sign up click.
Modal HTML:
<div id="openModal" class="modalDialog">
<div>
X
<header><h2>Header</h2></header>
<form><p>Form Contents</p></form>
</div>
</div>
Hide (and reveal on click) JS:
<script>
$(document).ready(function(){
// Hide Modal by default
$('#openModal').hide();
// Show Modal on click of Signup
$('#signup').click(function(){
$('#openModal').fadeIn(500);
});
// Hide Modal on click of Close
$('#close').click(function(){
$('#openModal').hide();
});
});
</script>
Your help is greatly appreciated.
D
Simple solution would be adding display: none to your .modalDialog class. Then you won't have to hide it by default ($('#openModal').hide(); line will not be necessary) and jQuery's .show() will override css.
Style atribute:
<div id="openModal" class="modalDialog" style="display: none;">
<div>
X
<header><h2>Header</h2></header>
<form><p>Form Contents</p></form>
</div>
</div>
or:
var $ = typeof (jQuery) === 'function' ? jQuery : typeof ($) === 'function' ? $ : false;
if ($ && $('#openModal').length) $('#openModal').hide();
$(document).ready(function(){
//...
});
Use css display:none to hide the modal.
The problem is from this part of your code
$(document).ready(function(){
$('#openModal').hide();
});
This is waiting that all the html has loaded before firing your code, so hiding your modal.
JQuery hide function is adding an inline style to your element display:none so you could add this inline style yourself on the dom element to avoid this flash
<div id="openModal" class="modalDialog" style="display:none">
<div>
X
<header><h2>Header</h2></header>
<form><p>Form Contents</p></form>
</div>
</div>
I want to toggle visibility of certain div on click of button. My HTML looks like follow
<div id="button">
<button> button </button>
</div>
<div id="somedata" class="hidden">
<label> some data</label>
</div>
Corresponding JQuery code is
$("#button").click( function() {
$("#somedata").removeClass("hidden");
$("#somedata").fadeToggle("slide");
});
This works perfectly except for the first time you click the button.
When you click on the button first time, it just appears and dis-appears immediately.
I really need to make that div hidden by default.
Check this link for demo :
JSFiddle link
Thanks in advance,
Regards,
Ganesh
The hidden class in Bootstrap includes visibility: hidden which is what is causing the issue. Set the element to display: none only and it works:
#somedata {
display: none;
}
$("#button").click(function () {
$("#somedata").fadeToggle("slide");
});
Updated fiddle
To start as hidden : swap 2 lines
$("#somedata").removeClass("hidden");
$("#somedata").fadeToggle("slide");
To
$("#somedata").fadeToggle("slide");
$("#somedata").removeClass("hidden");
You can use the .toggle() function and it will get the job done.
<div id="button">
<button> button </button>
</div>
<div id="somedata">
<label> some data</label>
</div>
<script>
$("#button").click(function () {
$("#somedata").toggle(500); //animation in milliseconds
});
</script>
I have been trying out JS to make a button switch, show, hide text.
I have two buttons, register and login. When login is clicked, register will hide, vice versa.
Here is the link to my jsfiddle
The code here..
HTML
<button id="btn1">Login</button>
<button id="btn2">Sign Up</button>
<div id="login">
<h4>Login</h4>
</div>
<div id="register">
<h4>Register</h4>
</div>
JS
$("#btn2").on('click', function() {
$("#register").show();
$("#login").hide();
});
$("#btn1").on('click', function() {
$("#login").show();
$("#register").hide();
});
CSS
#register {
display: none;
}
It seems to not be working.. Register is display as none as I want to make login show up as default.
You need to include jQuery first before using it.
It can be included under "Framework and extensions"
Updated Fiddle
I want to use fancybox to popup a message if a certain button is clicked.
I want the fancybox message to only contain some text,
and a 'close' button, i dont mind using the default button if there is one.
can someone give an example of how it should be written in the html page and the js page?
any help will be much appreciated!
Assuming your button has an id of yourButton:
$("#yourButton").click(function () {
var content = $("<div>Hello<br /><br /></div>");
var button = $("<input type='button' value='Close Me!' />");
content.append(button);
$.fancybox({ content: content });
$(button).click(function () { $.fancybox.close(); });
});
This should be able to help you:
http://fancybox.net/howto
Once you have required all the relevant files, to hook it up to all linka, use this:
$("a").fancybox();
If the html is complicated enough you might prefer putting it in a hidden div as I've done below. This is a scaled down version of code I'm running on my site to do a fancybox dialog box. Works with FancyBox version 1.3.4 (I haven't upgrade to 2 yet). Personally, I like the default close button (circle X in top right corner) and even pressing Escape works, but I've added a custom close button to the popup. It includes javascript to close FancyBox.
<a id="mylink" href="#mypopup">link style button</a>
<div id="mybutton">button</div>
<div style="display:none">
<div id="mypopup">
<h1>My Title</h1>
<p>My Message</p>
<!--... other complex html can go here ...-->
<input type="button" onclick="$.fancybox.close();" value="Custom Close Button" />
</div>
</div>
<script type="text/javascript">
$('#mylink').fancybox();
$('#mybutton').click(function() {
$.fancybox({
'orig' : $(this),
'href' : '#mypopup'
})
});
</script>