In my login page there are three forms,for Login,signup and pass reset.I wanted to show the login form only.and other two forms will appear if any user clicks the respective button.Every thing is doing fine in chrome.But in firefox the signup form always appears in the login page,but in the same time pass reset form is hiding there.My declaration of form properties are alright.I checked those.But I cant sort out the problem.
Here is the js code of hiding and slideup and fadein of forms :
$(document).ready(function () {
var login = $('#loginform');
var recover = $('#recoverform');
var speed = 400;
$('#to-recover').click(function () {
$("#loginform").slideUp();
$("#recoverform").fadeIn();
});
$('#to-login').click(function () {
$("#recoverform").hide();
$("#loginform").fadeIn();
});
$('#to-login').click(function () {
});
if ($.browser.msie == true && $.browser.version.slice(0, 3) < 10) {
$('input[placeholder]').each(function () {
var input = $(this);
$(input).val(input.attr('placeholder'));
$(input).focus(function () {
if (input.val() == input.attr('placeholder')) {
input.val('');
}
});
$(input).blur(function () {
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.val(input.attr('placeholder'));
}
});
});
}
});
and here is the css part
#loginbox form#loginform { z-index: 200; display:block;}
#loginbox form#recoverform { z-index: 100; display:none;}
#loginbox form#recoverform .form-actions { margin-top: 10px;}
#loginbox form#signupform { z-index: 150; display:none;}
#loginbox form#signupform .form-actions { margin-top: 10px;}
Can somebody please let me know where I am doing wrong.I think I did something wrong in css part,but chrome is showing perfectly thats why I am wondering.
Related
I need your help guys.
I use a textarea that automatically expands by changing the number of rows.
In my project, the page does not reload and stays as it is after submitting the form. I need to change dynamically the number of rows (2) on submit.
Also one can send the form by Enter. So I need to change the number of rows after pushing a button or hitting the Enter key.
I've coded a rough sketch of the form that I have in my project so that you could test it: https://codepen.io/C3La-NS/pen/NagZbr
<form id="NewMessage">
<textarea id="shoutbox-comment" data-min-rows="2"></textarea>
<button id="send_message" type="submit" onclick="chatSubmit();">send</button>
</form>
JS:
// auto-resizing textarea
const textarea = document.getElementById("shoutbox-comment");
textarea.addEventListener("input", function() {
this.rows = 2; // Erm...
this.rows = countRows(this.scrollHeight);
});
function countRows(scrollHeight) {
return Math.floor(scrollHeight / 20); // 20px = line-height: 1.25rem
}
// submit by Enter
$(document).ready(function() {
$("#shoutbox-comment").on("keypress", function(event) {
if (event.keyCode == 10 || event.keyCode == 13) {
event.preventDefault();
chatSubmit();
}
});
});
// submit FORM
function chatSubmit() {
$("#NewMessage").submit();
}
Thank you!
jQuery submit accept as parameter a callback that is triggered before submit so, you can do:
$("#NewMessage").submit(function( event ) {
event.preventDefault();
$('#shoutbox-comment').attr('rows', 2);
});
Just couple of changes in your script:
const textarea = $("#shoutbox-comment");
const minRows = textarea.data('minRows');
textarea.on("input", function(e) {
this.rows = 1; // Erm...
this.rows = countRows(this.scrollHeight);
});
function countRows(scrollHeight) {
var toReturn = Math.floor(scrollHeight / 20); // 20px = line-height: 1.25rem
return toReturn > minRows ? toReturn : minRows;
}
// submit by Enter
$(document).ready(function() {
$("#shoutbox-comment").on("input", function(e) {
if (e.keyCode == 10 || e.keyCode == 13) {
e.preventDefault();
chatSubmit();
}
});
});
// submit FORM
function chatSubmit() {
// Send the message via AJAX;
textarea.val('').trigger('input');
return false;
}
#shoutbox-comment {
width: 220px;
outline: none;
resize: none;
line-height: 20px;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="NewMessage">
<textarea id="shoutbox-comment" data-min-rows="2"></textarea>
<button id="send_message" type="submit" onclick="chatSubmit();">send</button>
</form>
I've also included data-min-rows attribute inside the script.
Also on CodePen.
I have a code that works perfectly to move elements from top, left, right or bottom sides, but seems to be, that it doesn't work with display property, here's my javascript code:
$('#icon-for-search').click(function () {
var targetValue;
if ($('#search-wrapper').css('top') == "0px") {
targetValue = '55px';
} else {
targetValue = '0px';
}
$("#search-wrapper").animate({
top: targetValue
}, 500);
});
I have a button with an id called "icon-for-search" and it toggles perfectly the top value of the #search-wrapper if it's clicked, but if I change it to display: block / none it doesn't work. Any particular reason? could someone explain me?
$('#icon-for-search').click(function () {
var targetValue;
if ($('#search-wrapper').css('display') == "none") {
targetValue = 'block';
} else {
targetValue = 'none';
}
$("#search-wrapper").animate({
display: targetValue
}, 500);
});
jQuery.animate works only with numeric CSS properties. You can just toggle element:
$('#icon-for-search').click(function () {
$('#search-wrapper').fadeToggle('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="icon-for-search">Search Icon</div>
<div id="search-wrapper">Search Wrapper</div>
I am trying to implement Ctrl+B for a contenteditable div which should make the text bold.
The only problem I'm getting is that when Ctrl+B is pressed, browser's bookmark tab appears.
(fiddle)
$(document).ready(function() {
$('#editable').designMode = 'on';
$('#editable').on('keyup', function(e) {
console.log(e.which);
if(e.which == 66 && e.ctrlKey) {
e.preventDefault();
console.log('bold');
document.execCommand ('bold', false, null);
return false;
}
});
});
#editable {
width:200px;
height:100px;
border:1px solid #999;
border-radius: 3px;
padding: 10px;
box-sizing:border-box;
}
#editable:focus {
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div contenteditable="true" id="editable"></div>
Please help me find a way to disable that bookmark when I'm focussed inside that editable div.
check this solution
jsFiddle
var g_state = 0;
$(document).ready(function() {
$('body').keydown( function ( eve ) {
if (eve.which === 17) {
eve.preventDefault();
g_state = 1;
}
return true;
});
$('body').keyup( function ( eve ){
if (eve.which === 17) {
eve.preventDefault();
g_state = 0;
}
return true;
});
$('body').keypress( function ( eve ) {
eve.preventDefault();
if (eve.ctrlKey && (eve.which === 78)) {
alert("(eve.ctrl + 'n')");
}
else {
if (g_state && (eve.which === 78)) {
alert("(ctrl tracking by key up/down + 'n', resetting)");
g_state = 0;
}
else {
if (eve.shiftKey && (eve.which === 78)) {
alert("(eve.shift + 'n')");
}
else {
alert("pass");
}
}
}
});
});
Hi Dangling Cruze,
Here there is no any rocket science , What we are doing here is to Prevent the event bubing. And stopping event to reach at web browser.
The preventDefault() method cancels the event if it is cancel-able, meaning that the default action that belongs to the event will not occur.
In single term
For example, this can be useful when:
Clicking on a "Submit" button, prevent it from submitting a form
Clicking on a link, prevent the link from following the URL
At the document level we are binding all main three event
keydown
keyup
keypress
and identifying key combination as well to prevent some key combination that is being used by browser as well.
let me know if you require any further help
Please see a working demo of my form so far: Demo Fiddle
I have it working so that if you do not fill in the fields it will not allow you to move onto the next tabs. However, if you fail to validate and then fill in the details the boxes stay red. I need some assistance with clearing the queried boxes once you fill them in.
jQuery(document).ready(function($) {
var currentTab;
$(".tabs-menu a, .tab-content .next").click(function(event) {
event.preventDefault();
var $this = $(this),
requiredAreFilled = true,
tab = $this.attr("href") || $this.data('next'),
currentTab = $('.tabs-menu .current').children('a').attr('href');
$(currentTab).find('.required').each(function(index, elt) {
if ($(elt).val() === '') {
requiredAreFilled = false;
$(elt).css('border', '2px solid #FB8183'); // This is bad, should be a class
}
});
var tabLink = $this.is('a') ? $this.parent() : $('.' + tab.substring(1)),
$tabLink = $(tabLink);
console.log($tabLink);
if (requiredAreFilled) {
$tabLink.addClass("current")
.siblings().removeClass("current");
$(".tab-content").not(tab).hide();
$(tab).fadeIn();
}
});
});
Your JSFiddle repaired
.required-error { /* new class */
border: 2px solid #FB8183;
}
jQuery(document).ready(function ($) {
var currentTab;
$(".tabs-menu a, .tab-content .next").click(function (event) {
event.preventDefault();
var $this = $(this),
requiredAreFilled = true,
tab = $this.attr("href") || $this.data('next'),
currentTab = $('.tabs-menu .current').children('a').attr('href');
$(currentTab).find('.required').each(function (index, elt) {
if ($(elt).val() === '') {
requiredAreFilled = false;
$(elt).addClass('required-error'); // This is bad, should be a class
} else {
/* this will fix the "corrected" inputs */
$(elt).removeClass('required-error');
}
});
var tabLink = $this.is('a') ? $this.parent() : $('.' + tab.substring(1)),
$tabLink = $(tabLink);
console.log($tabLink);
if (requiredAreFilled) {
$tabLink.addClass("current")
.siblings().removeClass("current");
$(".tab-content").not(tab).hide();
$(tab).fadeIn();
}
});
});
Just trigger the keyUp event on the input fields to remove the border :)
$('input[type="text"]').keyup(function() {
//remove the border
});
Y don't use a validation plugin, if you already use jQuery?
There are a lot of good Plugins out there:
http://formvalidator.net/
If you use Bootstrap i recommend: http://bootstrapvalidator.com/
Try this : DEMO focusout, DEMO keyup
Basically this js is added :
$(".tab-content").on("focusout",".invalidInput",function() {
if($.trim($(this).val()).length>0)
$(this).removeClass("invalidInput");
});
and used a css class :
.invalidInput{
border : 2px solid #FB8183;
}
This removes the border when the textbox focus is taken away, if you need it to happen as soon as user enters data, use keyup instead of focusout
I have some code in jQuery in which I want to make a switch animate on or off by clicking on a div. Here is the code. When I test it, it doesn't work. However if I remove toggle = true on line 7, it just works one way and I can't turn it back off.
$(document).ready(function () {
$("#switch").click(function () {
var toggle = false;
if (toggle == false) {
$("#circle").css("left", "27px");
$("#white_rect").attr("src", "green_rect.png");
toggle = true;
}
if (toggle == true) {
$("#circle").css("left", "1px");
$("#white_rect").attr("src", "white_rect.png");
toggle = false;
}
});
});
You need to declare the toggle variable outside of the click handler... else in every click call the variable will get reinitialized so the value of the variable will always be false.
$(document).ready(function () {
//declare it here
var toggle = false;
$("#switch").click(function () {
if (toggle == false) {
$("#circle").css("left", "27px");
$("#white_rect").attr("src", "green_rect.png");
toggle = true;
//also don't use a separate if block here as it will be affected by the execution of the above if block
} else {
$("#circle").css("left", "1px");
$("#white_rect").attr("src", "white_rect.png");
toggle = false;
}
});
});
$(document).ready(function () {
//declare it here
var toggle = false;
$("#switch").click(function () {
if (toggle) {
$("#circle").css("left", "1px");
$("#white_rect").attr("src", "white_rect.png");
} else {
$("#circle").css("left", "27px");
$("#white_rect").attr("src", "green_rect.png");
}
toggle = !toggle;
});
});
It is better to strictly divide appearance and logic. So use .classes and backgounded <div>s instead of <img>. Then you won't need any state variables and code shall be more simple.
HTML:
<div class="container">
<div class="switch off"></div>
</div>
CSS:
.container {
width:100%; height:100px; padding:40px; text-align:center;
}
.container .switch {
width:94px; height: 27px; display:inline-block; background-color:pink; cursor:pointer;
}
.container .switch.on {
background: url('http://squad.pw/tmp/img/01-on.png') no-repeat 0 0;
}
.container .switch.off {
background: url('http://squad.pw/tmp/img/01-off.png') no-repeat 0 0;
}
JS:
$('.switch').click(function() {
// Do visual logic
$(this).toggleClass('on');
$(this).toggleClass('off');
// Do business logic
window.toggle = !window.toggle;
});
Here is FIDDLE