I have created login form in dropdown navbar item. It is working cool, even with responsive ui, but there is one problem.
When I resize desktop browser to phone size, I can still open menu, focus username, password input and press submit. But on phone, I can expand login position, but when I touch inputs or button - submenu hides. Have you any ideas how can I fix it?
working code: http://jsfiddle.net/D2RLR/4324/
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Loguj<strong class="caret"></strong></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
<form action="http://localhost/fabrykagier/auth/login" method="post" accept-charset="UTF-8">
<input id="user_username" style="margin-bottom: 15px;" type="text" name="identity" size="30" placeholder="e-mail">
<input id="user_password" style="margin-bottom: 15px;" type="password" name="password" placeholder="hasło" size="30">
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="remember" value="1">
<label class="string optional" for="user_remember_me"> Pamiętaj mnie</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Zaloguj">
</form>
</div>
</li>
this is probably what you need:
$(function(){
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function(e) {
e.stopPropagation();
});
});
source: http://mifsud.me/adding-dropdown-login-form-bootstraps-navbar/
Related
I'm using jquery serialize to send the form data from cordova app to PHP server, the form is a dynamic cart for user orders, it works with 30-35 items, but when user try to send more items, app fails.
We changed the post_max_size = 8M to 30M in php.ini but it fails too.
This is part of the form...
<li class="checkoutrow" style="position: relative;">
<input type="hidden" name="idproduct[]" value="'+cart[i].idproduct+'" id="idproduct" class="idproduct">
<input type="hidden" name="cod_prod[]" value="'+cart[i].cod_prod+'" id="cod_prod" class="cod_prod">
<input type="hidden" name="subtotal[]" value="'+subtotalneto+'" >
<input type="hidden" name="subtotaliva[]" value="'+subtotaliva+'" >
<h3 class="product-name">
<textarea name="description[]" style="width: 90%; color: #ae0000;" rows="2" readonly>'+cart[i].description+'</textarea>
</h3>
<span class="cart-delete"><a onclick="delete_cart_item('+i+', this);" href="#"><i class="fa fa fa-times"></i></a></span>
<div class="table">
<div class="qty col" style="width: 20%;"><input style="width: 98%; border: none;" type="number" name="qty[]" value="'+cart[i].qty+'" readonly ></div>
<div class="price col" style="width: 27%;"><input style="width: 98%; border: none;" type="text" name="price[]" value="'+cart[i].price+'" readonly></div>
<div class="col" style="width: 23%;"><input type="text" style="width: 98%; border: none; text-align: center;" name="descuento[]" value="'+cart[i].descuento+'" readonly></div>
<div class="subtotalitem col" style="width: 30%;"><input style="width: 98%; border: none; text-align: right;" type="text" name="subtotalitem[]" value="'+subtotalitem+'" readonly></div>
</div></li>
Finally it works only when I send 30 to 40 items. I solved making a pagination of data. When detect last package I change the order status and give it as sent.
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 trying to make a search bar. How can I make the "go" button and the search input be inline? I have put my code below, but I am not sure where the error is.
<div style="float:right;display:inline;">
<div>
<button class="ui-btn ui-corner-all ui-btn-inline ui-mini" style="margin:0 0 0
0;padding: 0 0 0 0;">GO!
</button>
<input name="searchword" id="search" value="" placeholder="Placeholder text..."
type="search" />
</div>
</div>
The code works fine.
If you want it to be exact, remove the sub-wrapping div, make the button 20px and use display: inline-flex; instead of inline. Maybe it will be what want
jQM wraps the input in a div. you can assign a css class to the wrapper using the data-wrapper-class attribute:
<div style="float:right;display:inline;">
<div>
<button class="ui-btn ui-corner-all ui-btn-inline ui-mini btnclass">GO!</button>
<input name="searchword" id="search" value="" placeholder="Placeholder text..." type="search" data-wrapper-class="inputWrap" />
</div>
</div>
.inputWrap {
display: inline;
float: left;
margin-right: 4px;
}
.btnclass {
margin-top: 8px;
height: 37px;
}
DEMO
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.
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(); });