Is there any way of keeping border size fixed while scaling an object with CSS ?
I have an object with style below
.myObj{
width:100px;
height:100px;
border:1px solid red
}
when I scale this object the border of this object also scales as normal.But how can I keep it at 1px?
Here is the FIDDLE
I believe you'd have to transition the width and height ( and whatever else you need ) instead of using scale.
.box {
transition: 1s;
}
.box:hover {
width: 200px;
height: 200px;
}
http://jsfiddle.net/GJJp4/65/
This problem could however be solved using CSS3 properties only.
But, this would only be possible if you give a 'border-width' of '2px' at first and then change it to '1px' as you hover over it as 1px is the smallest unit value to render with.
.myObj { border: 2px solid red; }
.myObj:hover { border: 1px solid red; }
Here goes the FIDDLE for better understanding.
Try this fiddle
$(".box").hover( function () {
$( ".box" ).animate({
width: "300px",
height: "300px"
}, 100, function() {
// Animation complete.
});
}, function () {
$( ".box" ).animate({
width: "75px",
height: "75px"
}, 100, function() {
// Animation complete.
});
});
Of course it is possible! I think the easiest way is to change your jQuery code and use the .animate-function instead of the .transition-function:
$(".box").hover( function () {
$('.box').animate({height: 300, width: 300, marginLeft: '-=' + (300-75) / 2, marginTop: '-=' + (300-75) / 2});
}, function () {
$('.box').animate({height: 75, width: 75, marginLeft: '20%', marginTop: '20%'});
});
With a little bit of creativity you'll have the same effect with a thin border ;)
http://jsfiddle.net/GJJp4/71/
Im late to this answer, but I hope it helps. When using css scale, dimensions also scale. You can override this using jQuery (or javascript if you will)
var scale = 0.5, /*value of your scale, as in transform: scale(0.5)*/
absoluteSize = 1/scale + "px"
//absoluteSize = 1/0.5px = 2px
$(".box").css("border", absoluteSize);
This is pure math
1/0.5 = 2
1 = 2(0.5)
1 = 1
Related
When an inline element's text changes, it is usually the case that its computed width or height changes as well.
Usually it's trivial to transition property changes with CSS, for example, adding a transition to change the background-color of an element upon hover.
However, inline element dimensions are really tricky. A simple transition property does not animate the change in computed width.
View example an by clicking here: https://jsfiddle.net/mz103/59s42ys4/ or viewing it below:
$("div").on("click", function() {
$(this).text("Although my width changes, it is not aniamted.");
});
div {
display: inline-block;
background-color: red;
padding: 8px 16px;
transition: width 0.3s; // Notice, this doesn't transition the width upon change.
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Click me.</div>
How, when the text of an inline element changes, can we animate those changes?
Here an Update: https://jsfiddle.net/ky3c5Lec/3/
$("div").on("click", function() {
//get the current Dimensions, as Start-value for the animation
var $this = $(this),
sw = $this.width(),
sh = $this.height();
$this.text("New text");
var tw = $this.width(),
th = $this.height();
$this.css({
//since jQuery.animate() doesn't have sth. like Tween.from()
//we have to reset the styles to the initial values
width: sw, height: sh
}).animate({
//and then animate
width: tw, height: th
}, function(){
//and when the animation is done, we clean up after ourselves
$this.css({
width: "", height: ""
});
})
});
You could try a little bit of jQuery animation:
function changeText(el) {
el.animate(
{
opacity: 0
},
{
duration: 'slow',
complete: function () {
$(this).text('New Text');
$(this).animate({opacity: 1}, 'slow');
}
});
}
Here is a fiddle.
I suppose that you will need two elements to achieve this elegantly:
$(".inner").on("click", function() {
var $this = $(this);
var $par = $this.parent();
$par.css({
width: $par.width()
});
$this.text("New text");
$par.css({
width: $this.outerWidth()
});
});
.inner {
display: inline-block;
padding: 8px 16px;
white-space: nowrap;
}
.outer {
display: inline-block;
transition: width 300ms ease-in-out;
background-color: red;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">Here's some text.</div>
</div>
I am creating a nav bar for my website and I want the slide outs to animate to the width of whatever text is inside it I also want everything on one line. Here is the jsfiddle and my jquery code so far
http://jsfiddle.net/2UEpd/26/
$(document).ready(function () {
$("#test").hide();
$(".title").hide();
$(".home").click(function (){
$("#test").slideToggle("slow");
});
$(".slideWrapper").hover(
function () {
$(this).children(".slideNav:eq(0)").stop().animate({
width: "112px",
height: "30px"
});
$(this).children(".slideBox:eq(0)").stop().animate({
left: "112px",
opacity: "1"
});
$(this).find(".title").show();
}, function () {
var $box = $(this).children(".slideBox:eq(0)");
$(this).children(".slideNav:eq(0)").stop().animate({
width: "0px",
height: "30px"
});
$(this).children(".slideBox:eq(0)").stop().animate({
left: "0px",
opacity: ".7"
});
$(this).find(".title").hide();
});
});
I've been trying for a while now, any help is appreciated.
Display:table propertie or inline-block would help.
An idea would be to play width text-indent and letter-spacing for instance.
Here a sample of the idea via CSS only, using table-layout properties so container fits to width used by its content text. http://codepen.io/gc-nomade/pen/kaEoe
basicly:
.slideNav {
height: 30px;
width: 0px;
padding:0 15px;/* gives it 30px width minimal */
line-height:30px;
display:table;/* shrink /expand to size needed by content */
position: relative;
white-space:nowrap;
text-indent:-3em;
letter-spacing:-1em;
transition:1s; linear ;
opacity: .7;
color: transparent;
}
.slideNav:hover {/* here set back to regular setting to layout text properly */
opacity:1;
text-indent:0em;
letter-spacing:1px;
color: white;
}
the toggle click close/open feature on menu is driven via :focus and pointer-events for demo prpose. javaScript should take care of this for a better/good practice.
So I'm trying to make a simple gallery of photos that enlarge when you click them and then return to their smaller size when you click them a second time. I have the enlarge part working but so far I have only been able to get the picture to scale back down by using ".mouseout" with JQuery, which is not what I want. Also I'd like the image to sit on top off all the other images/divs when it is enlarged, right now it gets covered by any other image to the left or right.
Here's my code, and a jsfiddle link at the bottom
HTML
<div id="Gpic1">
<img id='table' src='http://i.imgur.com/7ESpNI8.jpg'>
</div>
CSS
#Gpic1 {
width: 280px;
height: 187px;
display: block;
background: black;
}
#table {
width: 280px;
height: 187px;
}
JQuery
$('#Gpic1').hover(function () {
$(this).find('img').fadeTo(500, 0.5);
}, function () {
$(this).find('img').fadeTo(500, 1);
});
$('#table').click(function () {
$('#Gpic1').find('img').fadeTo(0, 1);
$("#table").stop().animate({
width: 800,
height: 533
}, 200); //Bigger
}).mouseout(function () {
$("#table").stop().animate({
width: 280,
height: 187
}, 200); //Smaller
});
http://jsfiddle.net/kmx6C/
Thanks
You can add a class enlarged to the element you are enlarging, and then check whether the image is currently enlarged or not.
if($('#table').hasClass('enlarged')){
$('#table').removeClass('enlarged');
$("#table").stop().animate({width: 280, height: 187}, 200 );
}else{
$('#table').addClass('enlarged')
$("#table").stop().animate({width: 800, height: 533}, 200 );
}
Fiddle: http://jsfiddle.net/4LUYM/
You will need to keep track if the image is expanded or normal:
See it here: http://jsfiddle.net/kmx6C/4/
if ($(e.target).hasClass('expanded')) {
$("#table").removeClass('expanded').stop().animate({
width: 280,
height: 187
}, 200);
} else {
$('#Gpic1').find('img').fadeTo(0, 1);
$("#table").addClass('expanded').stop().animate({
width: 800,
height: 533
}, 200);
}
If you're going to still use the mouseout event, then you'll want to make sure to remove the class there:
$("#table").removeClass('expanded').stop().animate({
width: 280,
height: 187
}, 200);
As for making is "sit" a top of other images, you'll want to make sure that the "z-index" and "position" is set accordingly.
I thought this ought to be a straightforward thing to do, but I don't see a clear way to do it.
I would like to make it so that when a user hovers the mouse over an image, the image becomes 10% bigger and then returns to its original size when the user moves the mouse away.
I think that I will want to use the jQuery hover function, but I don't know what functions to pass into hover.
$('.resizableImage').hover(makeBigger, returnToOriginalSize);
jQuery lets you use += and %. So those two together will do what you want.
$('.resizableImage').hover(makeBigger, returnToOriginalSize);
function makeBigger() {
$(this).css({height: '+=10%', width: '+=10%'});
}
function returnToOriginalSize() {
$(this).css({height: "", width: ""});
}
DEMO: http://jsfiddle.net/rZaAE/
You could do it with CSS3 tranform property, for example
$('.resizableImage').hover(function(){
$(this).css("transform", "scale(1.1, 1.1)");
}, function(){
$(this).css("transform", "none");
});
Without CSS3 you could simply get original size using .width() and .height() methods, store it in data attribute(s) and resize. On mouseout just restore the original values.
var hoverRatio = 1.1;
$('.resizableImage').hover(function() {
$(this).data('width', $(this).width());
$(this).data('height', $(this).height());
$(this).css({
width: $(this).width() * hoverRatio,
height: $(this).height() * hoverRatio
});
}, function() {
$(this).css({
width: $(this).data('width'),
height: $(this).data('height')
});
});
See the DEMO.
You should use stop on the animation also so it doesn't get interrupted when the user moves out before the animation has finsihed
html:
<img src="http://placehold.it/350x150" class="resizableImage" width="350" height="150" />
js:
$('.resizableImage').mouseenter(function() {
$(this).stop().animate({ width: "+=10%", height: "+=10%" });
});
$('.resizableImage').mouseleave(function() {
var x = $(this).attr('width'),
y = $(this).attr('height');
$(this).stop().animate({ width: x, height: y });
});
Here is a fiddle:
http://jsfiddle.net/tWdAK/1/
Couldn't you just do this with css:
CSS
.resizable_img {
position: relative; // needed for z-index to work
width: 100%;
height: auto; // will resize image proportionally
}
.resizable_img:hover {
width: 120%;
z-index: 1; // place image on top
}
.img_container {
width: 25%;
position: relative;
overflow: visible; // stops images being shifted
float:left;
}
HTML
<div class="contents">
<div class="img_container">
<img class="resizable_img" src="img.jpg">
</div>
</div>
Fiddle here
If you're not using inline styling, you can omit saving the old values in data and use style attr instead.
$('.element').hover(function() {
var el = $(this);
el.attr('style','width:'+el.width() * 1.1 + 'px;height:'+el.height() * 1.1 + 'px;');
}, function() {
$(this).removeAttr('style');
});
I'm now in problem about how to animate function in jQuery to expand proportionally. Normally, it expand one-sided only just like expand to bottom or expand to right.
What I want is to expand proportionally left-right-top-bottom by using animate.
Following is my coding. What I said above, it expand to bottom only.
$(document).ready(function() {
var theFrame = $("#FrmPatient", parent.document.body);
theFrame.animate({width: 650, height: 485}, 1000);
});
Try this:
<div id="frame"></div>
#frame {
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;
width: 200px;
height: 200px;
background-color: #999;
}
$(function() {
var w = 400, h = 400;
$("#frame").animate({
width: w,
height: w,
marginLeft: -w/2,
marginTop: -h/2
}, 1000);
});
http://jsfiddle.net/GVj83/
You'll need to animate the left and top properties as well. If the original width and height of the box are (w0, h0) and the expanded ones are (w1, h1), animate left to left-(w1-w0)/2, and top to top-(h1-h0)/2. Note that would only work with absolute or relative positioning.