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
Related
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.
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>
What I'd like to achieve is a page that has a couple of buttons inside a div. When the user presses one of these buttons a dialog opens, asking follow up questions. After this the user is returned to the same page but the div with the buttons is hidden.
What I've tried is the following, inside a JQM page i have div called buttons which contains the buttons(logically). this opens the dialog and also calls a function which saves to local storage which button was pressed. Then the dialog opens which actually sends the data to the server.
For some reason the div is never hidden when I return from the dialog. I even tried to save a variable to the sessionStorage and hide the div on pageload, but seems that the page load event does not fire when returning from the dialog. Any suggestions or am I missing something basic?
<div class="ui-grid-b" id="buttons">
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
</div><!-- /grid-b -->
// the dialog:
<div data-role="dialog" id="Popup" data-overlay-theme="b" data-theme="a" class="ui-corner-all">
<form>
<div style="padding:10px 20px;">
<h3>Heading</h3>
<textarea name="comments" id="popuptextarea"></textarea>
<button type="submit" data-theme="b" onClick="save()">Selvä</button>
</div>
</form>
</div>
I have two javascript functions which try to save the data and also hide the div,
function savePushedButton(color) {
//save which button was pressed to local storage
$('#buttons').hide();
console.log("asd");
}
function save() {
//send data to server
}
onclick is your problem (onchange also), do not use it with jQuery Mobile. jQuery Mobile has already started transition to the dialog, before onclick has been triggered. You will need to manually bind a click event to the button and hide buttons before transition to dialog can occur.
Here's a working example: http://jsfiddle.net/Gajotres/uhsfs/
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#test-button', function(){
$('#buttons').hide();
savePushedButton($(this).attr('data-color'));
});
});
function savePushedButton(color) {
console.log(color);
$.mobile.changePage('#Popup', {transition: 'pop', role: 'dialog'});
}
In this example. I need my div is open if page is change or refresh.
I have given my HTML and Javascript.
This is where my code is live http://jsfiddle.net/wasimkazi/fauNg/1/
$(".widget2").hide();
$(".box2").toggle(function() {
$(this).next(".widget2").slideDown(200);
}, function() {
$(this).next(".widget2").slideUp(200);
});
$(".inner").hide();
$(".box").toggle(function() {
$(this).next(".inner").slideDown(200);
}, function() {
$(this).next(".inner").slideUp(200);
});?
<div class="box2"><h3>Basketball</h3>
</div>
<div class="widget2" style="display: block; "><div class="widget"><div class="box"><h3>Australia</h3></div>
<div class="inner" style="display: block; ">
<ul class="leagues">
<li class="even">Australian NBL</li>
</ul>
<div class="clear-both"></div>
</div></div>
</div>?
Use javascript coockie to save the Open and close state for each menu, and read the state when page loads. this is the only way to go since every time page is refreshed, everything is reset.
When you make a change, you can change what's after the # at the end of the url. Then when the page is reloaded, you read the value after the hash in $(document).ready() and make the changes accordingly.
You can use the is function to check if your div is hidden and show it
if($(".selector").is(":hidden"))
$(".selector").show();
Furthermore as #mikel said, put it inside document ready function for checking on pageload.
$(document).ready(function(){
if($(".selector").is(":hidden"))
$(".selector").show();
});
I am trying to copy the Like button of Facebook, but the problem is on the specific place to click to change the button.
When it's not yet liked, the user should click anywhere on the button and the button will change on the gray state (already liked). This is already done.
But the problem is when unliking it, I think I'm not using jquery correctly so that it should set to the blue state(not liked), only if it is clicked on the image.
Here's what I've made, take a look at it so you can understand better: https://glenrdsgn.com/button/
I've added a class '.unlike' to the ch2 div so that the HTML looks like this:
<div id="like" >
<div id="ch1" class="btn btn-empty no-like">
<div class="pad">
<div class="like-text">
<div id="ch2" class="data-empty"></div>
<div class="txt">Like</div>
</div>
</div>
</div>
</div>
Then the following jQuery does what I think you mean:
$(function() {
$('.btn').live('click', function() {
$('#ch1').attr('class', 'btn like btn-fill');
$('#ch2').attr('class', 'unlike data-fill');
});
$('.unlike').live('click', function() {
$('#ch1').attr('class', 'btn btn-empty no-like');
$('#ch2').attr('class', 'data-empty');
return false;
});
});
The return false is needed as otherwise both events are triggered. Hope this helps