Working on a sliding login panel using Html, CSS and jquery with some plugins.
http://24.125.42.135/
As you can see, the bar pushes the content downwards when activated (click login at top right). This is great if you are on the first screen. However, if you are on the second screen and then try to press login, the bar is not there.
I'm stumped conceptually on what to do here so that the login button remains fixed at the top like the rest of the menu, but still pushes the content down no matter where you are on the page.
HTML
<!-- Panel -->
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">
<!-- Login Form -->
<form class="clearfix" action="#" method="post">
<h1>Sign In</h1>
<label class="grey" for="log">Username:</label>
<input class="field" type="text" name="log" id="log" value="" size="23" />
<label class="grey" for="pwd">Password:</label>
<input class="field" type="password" name="pwd" id="pwd" size="23" />
<label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>
<div class="clear"></div>
<input type="submit" name="submit" value="Login" class="bt_login" />
<a class="lost-pwd" href="#">Lost your password?</a>
</form>
</div>
<div class="left right">
<!-- Register Form -->
<form action="#" method="post">
<h1>Not a member yet? Sign Up!</h1>
<label class="grey" for="signup">Username:</label>
<input class="field" type="text" name="signup" id="signup" value="" size="23" />
<label class="grey" for="email">Email:</label>
<input class="field" type="text" name="email" id="email" size="23" />
<label>A password will be e-mailed to you.</label>
<input type="submit" name="submit" value="Register" class="bt_register" />
</form>
</div>
</div>
</div> <!-- /login -->
<!-- The tab on top -->
<div class="tab">
<ul class="login">
<li class="left"> </li>
<li id="toggle">
<a id="open" class="open" href="#?signin">Log In | Register</a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</li>
<li class="right"> </li>
</ul>
</div> <!-- / top -->
</div> <!--panel -->
CSS
/* sliding panel */
#toppanel {
position: relative; /*Panel will overlap content */
/*position: relative;*/ /*Panel will "push" the content down */
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Javascript
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
I suggest making the rest of the content inside a fixed div that you can scroll.
This way you never move your div, unless you toggle the login div.
But it still gives the same effect as now.
Related
I created a form and when I submitted it, it was not saving data in chrome autofill database. I inspected html page of amazon.com and I have come up with a bare minimum form that helps saving data in auto fill database. Following is the code.
<BODY>
<form action="" method="post">
<div class="panel panel-default">
<div class="panel-body">
<div class="col-lg-6">
<div >
<label for="address-ui-widgets-enterAddressLine1" >First Nadme</label>
<input name="address-ui-widgets-enterAddressLine1" id="address-ui-widgets-enterAddressLine1" maxlength="30" type="text">
</div>
<div >
<label >Lastaaa </label>
<input id="address-ui-widgets-enterAddressCity" maxlength="30" type="text">
</div>
<div >
<label >username</label>
<input id="address-ui-widgets-enterAddressStateOrRegion" maxlength="150" type="text" >
</div>
<div >
<label >dfkdfk</label>
<input id="address-ui-widgets-enterAddressPostalCode" maxlength="254" type="text">
</div>
</div>
</div> <!-- panel-body -->
<div class="panel-footer">
<input class="btn btn-success btn-sm" type="submit" value="Register">
</div> <!-- panel-footer -->
</div> <!-- panel -->
</form>
</BODY>
I have just added random labels. The only thing that i am not getting is that if I change name of any id then auto fill does not save any data. I am unable to get the logic.
I want to make a pop up login in navigation. I want it to not go back in the previous page whenever I click one of the textboxes and when I only click the exit or "x" button it will exit. I don't know what's the problem with my code. Can someone help me?
<body>
<div class=MainNavi>
<div class=SecNavi>
<ul>
<div class="login">
<li> Login
<div id="m01" class="modal-popup" onclick="this.style.display='#form'">
<img class="modal-popup-content " id="img01" style="width:80%">
<div class="login-container">
<img src="images/user-login.png">
<div id = "form">
<form action="" method="post" id="myform">
<div class = "form-input">
<input type="text" name="username" value="" placeholder="Enter Username" required="required">
</div>
<div class = "form-input">
<input type="password" name="password" value="" placeholder="Enter Password" required="required">
</div>
<input type="submit" class=btn-login name="log" value="Let me in">
</div>
</form>
</div>
<span id ="x101"Onclick="onClick(this).this.style.display='none'"" class="x- btn x-hover display-x">x</span>
<script>
function onClick(element) {
document.getElementById("log101").src = element.src;
document.getElementById("m01").style.display = "block";
}
</script>
</div>
<li>About Us</li>
<li>Songs</li>
<li>Gallery</li>
<li>Home</li>
<center><h1>#</h1></center>
</ul>
</div>
</div>
Basically I would like to have all form inputs disabled until the "Edit Profile" button is clicked, then once the "Save Changes" button is clicked, have the disabled attribute reapplied.
I have tried a bunch of solutions from this site, with no luck. Any help would be appreciated, even if it's just guiding me int he right directions.
Here is the code, which is using bootstrap and contains Django (not shown, obviously). Thanks in advance.
<div class="main">
<div class="container">
<section class="hgroup">
<h1>My Profile</h1>
<h2>View and edit your profile.</h2>
<ul class="breadcrumb pull-right">
<li>Dashboard </li>
<li class="active">Profile</li>
</ul>
</section>
<section>
<div class="row">
<div class="contact_form col-sm-12 col-md-12">
<form name="contact_form" id="contact_form" method="post">
<div class="row">
<div class="col-sm-4 col-md-4">
<label>First Name</label>
<input name="first_name" id="name" class="form-control" type="text" value="">
</div>
<div class="col-sm-4 col-md-4">
<label>Middle Name</label>
<input name="middle_name" id="email" class="form-control" type="text" value="">
</div>
<div class="col-sm-4 col-md-4">
<label>Last Name</label>
<input name="last_name" id="email" class="form-control" type="text" value="">
</div>
</div>
<div class="col-sm-12 col-md-12">
<br/>
<a id="submit_btn" class="btn btn-primary" name="submit">Edit Profile</a>
<a id="submit_btn" class="btn btn-primary" name="submit">Save Changes</a>
<!--<span id="notice" class="alert alert-warning alert-dismissable hidden" style="margin-left:20px;"></span>-->
</div>
</form>
</div>
</div>
</section>
</div>
</div>
Add some selectors to link -
Edit Profile
Save Changes
Disable all the input fields -
$('input').attr('disabled', true);
Alter the attributes of input fields -
$('#edit_profile').on('click', function(e) {
e.preventDefault();
$('input').attr('disabled', false);
});
$('#save_button').on('click', function(e) {
e.preventDefault();
$('input').attr('disabled', true);
});
Dont forget to include jquery. And e.preventDefault() for preventing the default action of the as.
Working Demo
You also have two elements that have the id submit_btn, id's should be unique.
I would change them to be different and then try:
$("#edit_btn").on('click', function() {
$("input[type='text']").removeAttr('disabled');
});
Then to re-disable:
$("#submit_btn").on('click', function() {
$("input[type='text']").attr('disabled', 'disabled');
});
You may wish to change the input[type='text'] selector if you have more inputs on the page you don't want disabled.
Maybe change your <input> elements to include the js-disable class, then target the $(".js-disable") selector instead of input[type='text']
I would use jQuery. Here's an example.
html:
<form>
<p>Edit the form</p>
<input type="text" placeholder="one" disabled>
<input type="text" placeholder="two" disabled>
<input type="text" placeholder="three" disabled>
<div id="saveForm">Save Form</div>
<div id="editForm">Edit Form</div>
</form>
jQuery:
$("#editForm").click(function(){
$("p").show(0);
$("#saveForm").show(0);
$("form input").prop('disabled', false);
$(this).hide(0);
});
$("#saveForm").click(function(){
$("p").hide(0);
$("#editForm").show(0);
$("form input").prop('disabled', true);
$(this).hide(0);
});
CSS:
div,input{
padding: 10px;
display: block;
margin: 10px;
border-radius: 5px;
border: 2px solid #000;
}
#saveForm{display: none;color:#ff0000;}
p{display:none;color:#ff0000;}
div{cursor:pointer;}
div:hover{opacity: 0.7;}
Here's a fiddle: http://jsfiddle.net/92ng2hs0/2/
I am working on jquery slide tab and its working fine on button click. But I want that button stitch with panel and also should slide with panel. currently button is fix and panel working as expected.
Here Is FIDDLE
HTML
<button id="showmenu" type="button" class="feed_btn">Feed Back</button>
<div class="sidebarmenu">
<div class="slide-out-div" style="z-index: 999;">
<form class="generalForm bookingForm" action="#" method="post">
<div class="row">
<div class="col-sm-12">
<label>Name<span>*</span></label>
<input type="text" name="Name" class="required" />
</div>
<div class="col-sm-12 mar_top">
<label>Email <span>*</span></label>
<input type="text" name="Email" class="required" />
</div>
<div class="col-sm-12 mar_top">
<label>Contact No <span>*</span></label>
<input type="text" name="contact_no" class="required" />
</div>
<div class="col-sm-12 mar_top">
<label>Say Few Words<span>*</span></label>
<input type="text" name="feedback" class="required" />
</div>
<div class="col-sm-12">
<input type="submit" name="submit" value="Submit" style="background-image:none; padding-left:20px;" />
</div>
</div>
</form>
</div>
</div>
</div>
CSS
.sidebarmenu{
position:absolute;
right:-250px;
z-index:999999;
}
JS
$('#showmenu').click(function() {
var hidden = $('.sidebarmenu').data('hidden');
if(hidden){
$('.sidebarmenu').animate({
right: '-250px'
},500)
} else {
$('.sidebarmenu').animate({
right: '0px'
},500)
}
$('.sidebarmenu,.image').data("hidden", !hidden);
});
As want to move button along with form, then you need add one parent and move that only instead form see demo
HTML
<div class="panel">
<button id="showmenu" type="button" class="feed_btn">Feed Back</button>
<div class="sidebarmenu"> -- your code --</div>
</div>
JS
$('#showmenu').click(function () {
var hidden = $('.sidebarmenu').data('hidden');
if (hidden) {
$('.panel').animate({
marginRight: '-250px'
}, 500)
} else {
$('.panel').animate({
marginRight: '0px'
}, 500)
}
$('.sidebarmenu,.image').data("hidden", !hidden);
});
I have the following code
$('#check-twitter').click(
function() {
if ($('#ShareTwitterPublish').val() == '0') {
$('#ShareTwitterPublish').val('1');
$(this).removeClass('red');
$(this).addClass('green');
}
else {
$('#ShareTwitterPublish').val('0');
$(this).removeClass('green');
$(this).addClass('red');
}
}
);
HTML:
<div tabindex="-1" class="simplemodal-wrap" style="height: 100%; outline-width: 0px; outline-style: initial; outline-color: initial; width: 100%; overflow-x: visible; overflow-y: visible; "><div class="share-dialog simplemodal-data" style="" id="simplemodal-data">
<div class="share-message" style="margin-bottom:30px;">
<span>Sharing: <a style="text-decoration:none"></a></span>
<!--<a id="copy-button" class="button medium blue" href="#">Copy URL</a>-->
</div>
<div id="vertical-tabs">
<ul class="tabs">
<a id="check-facebook" class="button tiny green span-1 last">
<span></span>
</a>
<li class="active">Facebook</li>
<a id="check-twitter" class="button tiny green span-1 last">
<span></span>
</a>
<li>Twitter</li>
<a id="check-twitter-dm" class="button tiny red span-1 last">
<span></span>
</a>
<li>Twitter DM</li>
<a id="check-email" class="button tiny red span-1 last">
<span></span>
</a>
<li>Email</li>
</ul>
<form style="float:right" id="VoicenoteShareForm" method="post" action="/fonykweb/voicenotes/share" accept-charset="utf-8"><div style="display:none;"><input type="hidden" name="_method" value="POST"></div> <input type="hidden" name="data[Share][vnid]" value="c764a5e0e9e026b8e79679e8de275def1bd3ad382d0a7e45639687400c95f486" id="ShareVnid"><input type="hidden" name="data[Share][fonykid]" value="abea0cd1eec985ebb812720a798e730d8ab287393d6327716bbf697bfcd2d4de" id="ShareFonykid"><input type="hidden" name="data[Share][voicenote_url]" value="http://localhost/fonykweb/voicenotes/view/228" id="ShareVoicenoteUrl">
<div id="tab1" class="tab_content span-8" style="display: block; ">
<input type="hidden" name="data[Share][facebook_publish]" value="1" id="ShareFacebookPublish"><div class="span-8"><label for="ShareFacebookMessage">Message</label><textarea name="data[Share][facebook_message]" class="input-text" cols="30" rows="6" id="ShareFacebookMessage"></textarea></div> </div>
<div id="tab2" class="tab_content span-8" style="display: none; ">
<input type="hidden" name="data[Share][twitter_publish]" value="1" id="ShareTwitterPublish"><input type="hidden" name="data[Share][twitter_dm]" value="0" id="ShareTwitterDm"><div class="span-8"><label for="ShareTwitterMessage">Message</label><textarea name="data[Share][twitter_message]" class="input-text" cols="30" rows="6" id="ShareTwitterMessage"></textarea></div> </div>
<div id="tab3" class="tab_content span-8" style="display: none; ">
<div class="span-8"><label for="ShareDmRecipients">Recipients</label><input name="data[Share][dm_recipients]" type="text" class="input-text long" id="ShareDmRecipients" style="display: none; "><div class="tagify-container" style="width: 317px; "><input type="text" placeholder="Tag friends" maxlength="15" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"></div></div><div class="span-8"><label for="ShareDmMessage">Message</label><textarea name="data[Share][dm_message]" class="input-text" cols="30" rows="6" id="ShareDmMessage"></textarea></div> </div>
<div id="tab4" class="tab_content span-8" style="display: none; ">
<input type="hidden" name="data[Share][email_publish]" value="0" id="ShareEmailPublish"><div class="span-8"><label for="ShareEmailContacts">Contacts</label><input name="data[Share][email_contacts]" type="text" class="input-text long" id="ShareEmailContacts"></div><div class="span-8"><label for="ShareEmailMessage">Message</label><textarea name="data[Share][email_message]" class="input-text" cols="30" rows="6" id="ShareEmailMessage"></textarea></div> </div>
</form></div>
<div class="share-buttons">
<div class="submit"><input class="button medium blue" id="publish-button" style="float:right" type="submit" value="Publish"></div><button type="submit" class="button medium blue" id="cancel-share" style="float:right">Cancel</button> </div>
<div class="span-8 last" id="share-loader-container" style="display:none;float:right;" align="center">
<img src="/fonykweb/img/ajax-loader.gif" id="loader" alt=""> </div>
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 0px; left: 0px; display: none; "></ul></div></div>
It functions on 3 different places on my site. In 2 it works just fine, but in the other, after the classes are swapped and the values change and the program enters the jQuery core code block, it's all changed back. When debugging I can see that my code gets executed, but when the core gets executed it all gets reverted, any idea what could be happening?
UPDATE:
Found the code that was messing it up, I seemed to have got careless when coding and coded it twice there, so it was getting called correctly, but twice, so it set the values back. I'm gonna give the answer to John Strickler since only he posted one.
Not a clue on what's happening... but try reducing your code like this:
$(this).toggleClass('green red');
$('#ShareTwitterPublish').val(function () { return +!$(this).val(); });