So the problem is every time I click outside the input focus keeps on
i tried several codes but they didn't work for me
$(document).ready(function(){
$("input").focus(function(){
const background = true;
if(background == true){
$('form').css({
'background-color': '#fff',
'transition': 'background-color 1s ease-out'
});
}
else {
$('input').blur(function(){
if(background == false){
$('form').css({
'background-color': 'transparent'
});
}
})
}
})});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-inline">
<div class="input-group">
<input type="text" class="form-control input" placeholder="How may we help you?">
<div class="input-append">
<button type="button" class="btn"><i class="fas fa-search"></i></button>
</div>
</div>
</form>
I think you wanna do something like this
On Focus- Change color of form background to #fff(White)
On unfocus - Change form background to transparent
$('input').focus(function () {
$('form').css({
'background-color': '#fff',
'transition': 'background-color 1s ease-out'
});
});
$('input').blur(function () {
$('form').css({
'background-color': 'transparent'
});
});
$(document).ready(function(){
$("input").focus(function(){
$('form').css({
'background-color': '#fff',
'transition': 'background-color 1s ease-out'
});
});
$('input').blur(function(){
$('form').css({
'background-color': 'transparent'
});
});
});
Try this.
Related
I am trying to focus a textarea after a click on a another element. desktop browsers seems to be working fine but not the Iphone.
$('.reveal_below').on('change', function(e) {
e.preventDefault();
var item_id = $(this).attr('data-item-id');
if (this.checked) {
$('.hidden_below__' + item_id).css({
'margin-left': '0px',
display: 'block',
opacity: '0'
}).animate({
'margin-left': '15px',
opacity: '1'
},
250, function() {
console.log("-----------");
$("#x").focus();
})
} else {
$('.hidden_below__' + item_id).slideUp();
}
});
here is a little demo
it will focus a textarea on change event of the checkbox. That is the issue and how to can i solve this with the animation as in the demo?
You have to use touchstart event to fix this issue.
$(document).ready(function() {
$('button').on('click', function() {
$('#x').css({
'margin-top': '0px',
display: 'block',
opacity: '0'
}).animate({
'margin-top': '15px',
opacity: '1'
},
100
)
$('#x').trigger('touchstart'); //trigger touchstart
});
$('textarea').on('touchstart', function() {
$(this).focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<textarea id="x" style="width: 100%;height:6em;display: none" placeholder="Return notes..." cols="30" rows="10"></textarea>
<button type="button">focus textarea</button>
I have the following structure:
<input name="20735" class="form-control valid-dateonly error" id="20735" required="" type="text" maxlength="4000" placeholder="" value="">
<label class="error" style="left: 0px; white-space: nowrap; position: absolute;" for="20735">This field is required.</label>
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
<div id="div_20735"></div>
Basically, I have the label control in JQuery $this. Now basically I want to capture the div with id:div_20735. If you observe, this 20735 is the id of the input control also, which is placed above the label.
I am guessing something like $(this).prev().id...but am not getting.But I am getting this value(20735), when I do $(this).prev().context.htmlfor..but I dont think thats the best way to retrieve.
This is what I have tried:
$('label.error').not('.hide').each(function () {
var previousElm = $(this).prev();
if ($(previousElm).hasClass("form-control")) {
$("#div_20735").after($(this));//here I need help to capture the id of the div dynamically
$(this).css({ 'position': 'absolute', 'white-space': 'nowrap', 'left':'0px' });
}
});
Any help to find the best way will be highly appretiated.
Thanks.
Have a try with this - It takes the for attribute value which is what you need
$('label.error').not('.hide').each(function () {
var previousElm = $(this).prev();
if ($(previousElm).hasClass("form-control")) {
var divID = $(this).attr('for');
$("#div_" + divID).after($(this));//here I need help to capture the id of the div dynamically
$(this).css({ 'position': 'absolute', 'white-space': 'nowrap', 'left':'0px' });
}
});
This $("#div_" + previousElm.attr('name')) should do the trick:
$('label.error').not('.hide').each(function () {
var previousElm = $(this).prev();
if ($(previousElm).hasClass("form-control")) {
$("#div_" + previousElm.attr('name')).after($(this));//here I need help to capture the id of the div dynamically
$(this).css({ 'position': 'absolute', 'white-space': 'nowrap', 'left':'0px' });
}
});
I want to style my 'cancel' and 'save' button using Jquery, how can I do that? Here is my code sample (for cropping image):
$("#img-container").dialog({
modal: true,
autoOpen: false,
width: 1220,
height: 730,
title: "CROP IMAGE",
closeOnEscape: false,
dialogClass: "no-close success-dialog",
open: function (event, ui) {
$(".ui-dialog-titlebar-close", $(this).parent()).hide();
},
buttons: {
Cancel: function () { /* style this 'cancel button'*/
$(this).dialog("close");
},
Save: function () { /* style this 'save' button*/
document.getElementById("item-img").src = currentImage;
cropImage(self.imageFiles[0].name, x, y, width, height);
$(this).dialog("close");
}
}
});
Any suggestion?
Here is my working example in FIDDLE
HTML
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This is an example to change button style</p>
</div>
JS
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons:{
"Save":{
text:'Save',
},
"Cancel":{
text:'Cancel',
}
}
});
$('.ui-dialog-buttonpane :button').each(function(){
if($(this).text() === 'Save') {
$(this).css('background', 'green');
}
else if($(this).text() === 'Cancel') {
$(this).css('background', 'red');
}
});
If you are okay with also adding jQuery-UI, it can be very simple:
$('#buttonID').button();
Example:
jsFiddle Demo:
HTML:
<div id="btn">
<div id="middle">
<img src="http://placekitten.com/100/180" />
</div>
<input id="btnOk" type="button" value="OK" />
<input id="btnCancel" type="button" value="Cancel" />
</div>
<input id="mybutt" type="button" value="Open Dialog" />
javascript/jQuery:
$('#btnOk').button();
$('#btnCancel').button();
$('#btn').dialog({
autoOpen: false
});
$('#mybutt').click(function(){
$('#btn').dialog('open');
});
$('#btnOk').click(function(){
alert('you said OK');
$('#btn').dialog('close');
});
$('#btnCancel').click(function(){
alert('you said Cancel');
$('#btn').dialog('close');
});
If you can assign an ID, it would just be:
$('#cancelButton').css('background-color','red');
$('#saveButton').css('background-color','green');
I'm using Jquery-SimpleSlider to make a lightbox out of a group of images each with its respective description.
As you can see in this demo the box has a white space for the description next to the image,
i want to add html code (a bunch of divs to add a title, a descriptiom, price etc) in there instead of the description thats already there but i can't figure out how to do it.
I've tried a couple of things but no success
Here is the relevant html
<ul class="product-gallery">
<li class="gallery-img">
<img src='uploads/img1.jpg' alt="img01">
<div data-desc="Image Descript 1"></div>
</li>
<li class="gallery-img" style="display: none;">
<img src='uploads/img2.jpg' alt="img02">
<div data-desc="Image Descript 2"></div>
</li>
<li class="gallery-img" style="display: none;">
<img src='uploads/img3.jpg' alt="img03">
<div data-desc="Image Descript 3"></div>
</li>
<li class="gallery-img" style="display: none;">
<img src='uploads/img4.jpg' alt="img04">
<div data-desc="Image Descript 4"></div>
</li>
</ul>
This is the div containing the text that appears next to the image, but it's inside an attribute so I can't put html in it, or can i?
<div data-desc="Image Descript 4"></div>
Here is the Simpleslide js file
(function ($) {
jQuery.fn.Am2_SimpleSlider = function () {
//popup div
$div = $('<div class="product-gallery-popup"> <div class="popup-overlay"></div> <div class="product-popup-content"> <div class="product-image"> <img id="gallery-img" src="" alt="" /> <div class="gallery-nav-btns"> <a id="nav-btn-next" class="nav-btn next" ></a> <a id="nav-btn-prev" class="nav-btn prev" ></a></div> </div><div class="product-information"> <p class="product-desc"></p> </div> <div class="clear"></div>X</div></div>').appendTo('body');
//on image click
$(this).click(function () {
$('.product-gallery-popup').fadeIn(500);
$('body').css({ 'overflow': 'hidden' });
$('.product-popup-content .product-image img').attr('src', $(this).find('img').attr('src'));
$('.product-popup-content .product-information p').text($(this).find('div').attr('data-desc'));
$Current = $(this);
$PreviousElm = $(this).prev();
$nextElm = $(this).next();
if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
else { $('.nav-btn.prev').css({ 'display': 'block' }); }
if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
else { $('.nav-btn.next').css({ 'display': 'block' }); }
});
//on Next click
$('.next').click(function () {
$NewCurrent = $nextElm;
$PreviousElm = $NewCurrent.prev();
$nextElm = $NewCurrent.next();
$('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);
$('.product-popup-content .product-information p').text($NewCurrent.find('div').attr('data-desc'));
if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
else { $('.nav-btn.prev').css({ 'display': 'block' }); }
if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
else { $('.nav-btn.next').css({ 'display': 'block' }); }
});
//on Prev click
$('.prev').click(function () {
$NewCurrent = $PreviousElm;
$PreviousElm = $NewCurrent.prev();
$nextElm = $NewCurrent.next();
$('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);
$('.product-popup-content .product-information p').text($NewCurrent.find('div').attr('data-desc'));
if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
else { $('.nav-btn.prev').css({ 'display': 'block' }); }
if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
else { $('.nav-btn.next').css({ 'display': 'block' }); }
});
//Close Popup
$('.cross,.popup-overlay').click(function () {
$('.product-gallery-popup').fadeOut(500);
$('body').css({ 'overflow': 'initial' });
});
//Key Events
$(document).on('keyup', function (e) {
e.preventDefault();
//Close popup on esc
if (e.keyCode === 27) { $('.product-gallery-popup').fadeOut(500); $('body').css({ 'overflow': 'initial' }); }
//Next Img On Right Arrow Click
if (e.keyCode === 39) { NextProduct(); }
//Prev Img on Left Arrow Click
if (e.keyCode === 37) { PrevProduct(); }
});
function NextProduct() {
if ($nextElm.length === 1) {
$NewCurrent = $nextElm;
$PreviousElm = $NewCurrent.prev();
$nextElm = $NewCurrent.next();
$('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);
$('.product-popup-content .product-information p').text($NewCurrent.find('div').attr('data-desc'));
if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
else { $('.nav-btn.prev').css({ 'display': 'block' }); }
if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
else { $('.nav-btn.next').css({ 'display': 'block' }); }
}
}
function PrevProduct() {
if ($PreviousElm.length === 1) {
$NewCurrent = $PreviousElm;
$PreviousElm = $NewCurrent.prev();
$nextElm = $NewCurrent.next();
$('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);
$('.product-popup-content .product-information p').text($NewCurrent.find('div').attr('data-desc'));
if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
else { $('.nav-btn.prev').css({ 'display': 'block' }); }
if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
else { $('.nav-btn.next').css({ 'display': 'block' }); }
}
}
};
} (jQuery));
I have also tried changing the pop up div($div) in the JS file (line 5) adding another 'p' element next to the already existing 'p' element that has the description in it and added another div in the html file with data-title="title" in it instead of data-desc="......". I also added this line:
$('.product-popup-content .product-information p').text($(this).find('div').attr('data-desc'));
inside //onimageclick replacing data-desc with data-title but it didn't work either
Any suggestions?
Somewhere in the code you have this line:
$('.product-popup-content .product-information p').text($(this).find('div').attr('data-desc'));
Why don't just edit this line and use the DIV element content instead of the data-desc attribute? It would be like
$('.product-popup-content .product-information p').text($(this).find('div').html());
If you are concerned about the div content being shown you can hide it by CSS
I have a bootstrap text input and with jquery I would like to:
Expand textform on hover and retract on hover out. ✓ (already done in this jsfiddle)
When textform is focused/selected (insertion point is inside text box), the form is expanded and does not retract on cursor hover out. ✗ (to be compelted)
Html
<div class="col-md-3 col-sm-3">
<div class="input-group">
<input class="form-control" placeholder="Search"></input>
</div>
</div>
Javascript
$(function(){
var form = $('.input-group');
form.mouseenter(function(){
form.animate({ "width": "+=" + form.width() * 1.4}, "slow");
}).mouseout(function(){
form.animate({ "width": '100%'}, "slow");
});
});
try this
$(function(){
var form = $('.input-group');
var start_width = form.width();
form.find('#input-target').mouseenter(function(){
form.animate({ "width": "+=" + start_width * 1.4}, "slow");
}).mouseout(function(){
form.animate({ "width": start_width+'px'}, "slow");
}).focus(function(){
$(this).unbind('mouseout');
$(this).unbind('mouseenter');
}).blur(function(){
form.animate({ "width": start_width+'px'}, "slow");
$(this).mouseout(function(){
form.animate({ "width": start_width+'px'}, "slow");
}).mouseenter(function(){
form.animate({ "width": "+=" + start_width * 1.4}, "slow");
});
});
});
see at this
http://jsfiddle.net/ZQ3nZ/
Solved http://jsfiddle.net/mY8uU/6/
$(function(){
var form = $('.input-group'), w = form.width();
form.mouseenter(function(){
form.animate({'width': '100%'}, 'slow');
}).mouseout(function(){
if(!$('.form-control:focus').length) form.animate({'width': w}, 'slow');
})
$('.form-control').on('blur', function(){
form.animate({'width': w}, 'slow');
});
});
Is CSS3 out of the question?
In that case you can do without Javascript and use
.textbox{
width: 200px;
transition: width 1S;
}
.textbox:hover
{
width:250px;
transition: width 1S;
}
This is just an example, but you can change it to your liking.
You could always employ some CSS3:
input#search {
transition: width .5s;
-webkit-transition: width .5s;
}
input#search:hover, input#search:focus { width:300px; }
this one worked for me:
$(function(){
var form = $('.input-group');
form.mouseenter(function(){
form.animate({ "width": form.width() * 1.8}, "slow");
}).mouseout(function(){
form.animate({ "width": form.width() / 1.8}, "slow");
});
});
jsfiddle: http://jsfiddle.net/mY8uU/2/