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/
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've been trying to mimic others' code but with no luck. How can I get Div1 to toggle margin-left:30% when DivButton is clicked? Thank you.
http://jsfiddle.net/3nc62rec/
HTML
<div id="Div1"></div>
<br><br>
<div id="DivButton"></div>
CSS
#Div1{
background:blue;
width:50%;
height:50px;
margin-left:0%;
}
#DivButton{
background:green;
width:20px;
height:20px;
}
JS
$('#DivButton').click(function(){
});
/*
var toggleWidth = $("#Div1").width() == 365 ? "98%" : "365px";
$('#Div1').animate( {'width': toggleWidth}, 300, resize);
*/
/*
var toggleMargin = $("#Div1").marginLeft() == 30% ? "10%" : "30%";
$('#Div1').animate( {'margin-left': toggleMargin}, 300, resize);
*/
var $div1 = $('#Div1')
$('#DivButton').click(function() {
$div1.toggleClass('isOut')
var isOut = $div1.hasClass('isOut')
$div1.animate({marginLeft: isOut ? '30%' : '0'}, 300)
})
http://jsfiddle.net/3nc62rec/2/
You can use a jquery animation.
$('#DivButton').animate({marginleft: "30%"}, 500);
Try this:
$('#DivButton').click(function () {
$("#Div1").animate({
marginLeft: '30%'
}, 500);
});
JSFiddle Demo
I'm trying to set the min-height of each of these sections to the the height of the window. This is the current code...
HTML
<section id="hero">
</section>
<section id="services">
</section>
<section id="work">
</section>
jQuery
jQuery(document).ready(function() {
$("#hero").css('min-height':($(window).height())+'px');
$(window).resize(function() {
$("#hero").css('min-height':($(window).height())+'px');
});
$("#services").css('min-height':($(window).height())+'px');
$(window).resize(function() {
$("#services").css('min-height':($(window).height())+'px');
});
$("#work").css('min-height':($(window).height())+'px');
$(window).resize(function() {
$("#work").css('min-height':($(window).height())+'px');
})
});
Here's a FIDDLE
$(function() {
$("#hero").css({ minHeight: $(window).innerHeight() + 'px' });
$(window).resize(function() {
$("#hero").css({ minHeight: $(window).innerHeight() + 'px' });
});
$("#services").css({ minHeight: $(window).innerHeight() + 'px' });
$(window).resize(function() {
$("#services").css({ minHeight: $(window).innerHeight() + 'px' });
});
$("#work").css({ minHeight: $(window).innerHeight() + 'px' });
$(window).resize(function() {
$("#work").css({ minHeight: $(window).innerHeight() + 'px' });
});
});
or shorter version
$(function() {
$("#hero, #services, #work").css({ minHeight: $(window).innerHeight() + 'px' });
$(window).resize(function() {
$("#hero, #services, #work").css({ minHeight: $(window).innerHeight() + 'px' });
});
});
for jQuery CSS you can use e.g
$("#element").css( minHeight, $(window).innerHeight() + 'px' ); // When you target single property
or
$("#element").css({ minHeight: $(window).innerHeight() + 'px' }); // When you target single or multiple properties comma delmited
also you can use 'min-height' or minHeight
Changed : to ,
Try this:
jQuery(document).ready(function () {
$("#hero").css('min-height': ($(window).height()) + 'px');
$(window).resize(function () {
$('#hero').css("min-height", $(window).height() + "px");
});
$("#services").css('min-height': ($(window).height()) + 'px');
$(window).resize(function () {
$('#services').css("min-height", $(window).height() + "px");
});
$("#work").css('min-height': ($(window).height()) + 'px');
$(window).resize(function () {
$('#work').css("min-height", $(window).height() + "px");
})
});
Hi You don't need for that jquery, just css please see here : http://jsbin.com/filoru/3
CSS:
section {
width:33%%;
float:left;
display:block;
height:100%
}
html, body {
height:100%;
padding : 0;
margin:0;
}
#hero {
background-color:red;
}
#services {
background-color:green;
}
#work {
background-color:orange;
}
html:
<body>
<section id="hero">
hero
</section>
<section id="services">
service
</section>
<section id="work">
work
</section>
</body>
</html>
I am making a slider with divs:
<div class="slider">
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
... A lot more panels hidden by css ...
</div>
The project required them to be spaced equally and fluid. Jquery is being used. I achieved this by:
.slider {
width: 100%;
text-align: justify;
height: fixed-height-here;
overflow: hidden
}
.panel {
display: inline-block
}
I am uncertain how to make them slide. There is a variable amount of elements, and the slider is variable width. I had the following idea:
... A lot more panels hidden by css ...
onclick:
$(".inner").css("width", page * 100); //expand the width
$(".inner").animate({"margin-left", -(page - 1) * $(".inner").innerWidth());
This works "ok" (but not quite idea) when it slides from page 1 to page 2, but it does not work sliding from page 2 to page 1.
How can I achieve the effect I am wanting?
Here's a real simple "slider" with some "animation" you can play with FIDDLE.
JS
var i = 1;
$( ".sliderholder img:nth-child(" + i + ")" ).show(1000);
$('#forward').on('click', function(){
$( ".sliderholder img:nth-child(" + i + ")" ).hide( "slide",
{direction: 'right'},
1000);
i = i+1;
if( i > $('.sliderholder img').length )
{ i = 1; }
$( ".sliderholder img:nth-child(" + i + ")" ).show(1000);
});//end on click
$('#back').on('click', function(){
$( ".sliderholder img:nth-child(" + i + ")" ).hide( "slide",
{direction: 'right'},
1000);
i = i-1;
if( i < 1 )
{ i = $('.sliderholder img').length; }
$( ".sliderholder img:nth-child(" + i + ")" ).show( 1000);
});//end on click
I have the following code which serves to open an image in an overlay div. For some reason whenever I try to add a border to the image object it doesn't work. It only comes out the raw image with no border. How can I implement a border on this and also a close button on top right?
This is my code.
$(document).ready(function(){
$('a.lightbox').click(function(e){
$('body').css('overflow-y',' hidden');
$('<div id="overlay"></div>')
.css('top', $(document).scrollTop())
.css('opacity', '0')
.animate({'opacity': '0.6'}, 'slow')
.appendTo('body');
$('<div id= "lightbox"></div>')
.hide()
.appendTo('body');
$('<img>', {
src: $(this).attr('href'),
load: function() {
positionLightboxImage();
},
click : function() {
removeLightbox();
}
}).appendTo('#lightbox');
return false;
});
});
function positionLightboxImage() {
var top = ($(window).height() - $('#lightbox').height()) / 2;
var left = ($(window).width() - $('#lightbox').width()) / 2;
$('#lightbox')
.css({
'top': top + $(document).scrollTop(),
'left': left
})
.fadeIn();
}
function removeLightbox() {
$('#overlay, #lightbox')
.fadeOut('slow', function() {
$(this).remove();
$('body').css('overflow-y', 'auto'); // show scrollbars!
});
}
<a class="lightbox" href="<?php echo $row_searchHH['imageURL']; ?>"><img src="<?php echo $row_searchHH['imageURL']; ?>" width="90" height="90" style="margin-left:10px" /></a>
Add your border to this chunk:
$('#lightbox')
.css({
'top': top + $(document).scrollTop(),
'left': left
})
For example:
$('#lightbox')
.css({
'top': top + $(document).scrollTop(),
'left': left,
'border': '2px solid white'
})
Check this fiddle for demo
If you have the img inside the div
then probably you can set the style of the image
CSS
.imageclass{
width:98%;
height:98%;
position:absolute;
left:1%;
top:1%;
}
.parentdivclass{
background:rgba(15, 15, 15, .5);
width:200px;
height:200px;
position:absolute;
}
.closebuttonclass
{
left:95%;
top:0.2%;
width:5%;
height:5%;
position:absolute;
}
You can position your close button image on the top right of your div !!
so the final div structure should be something like this
HTML
<div class='parentdivclass'>
<img class='imageclass' src='' />
<img class='closebuttonclass' src='' />
</div>