We Keep Coding

How to minimize the zooming effect in the slider

I'm doing a website and was using this slider for the website http://www.jqueryscript.net/slideshow/Lightweight-Background-Slideshow-Plugin-with-jQuery-CSS3-pureSlider.html ...but I'm unable to control the zooming speed of this slider..I tried various numbers for the animDuration: 8000 in the js file but it is not helping...Can anyone help with this?

In the file pureslider.css change the values of the transition-duration property as you want.
.stage .slide.on {
transition-property: opacity, transform, z-index;
transition-duration: 1000ms, 1000ms, 10ms;
transition-function: linear;
transition-delay: 0ms;
transform: scale(1);
opacity: 1;
z-index: 10;
}

Get preferred height of div

I use a chrome extension to collapse certain divisions on webpages. And ti all works pretty well. I made it so that it is has a height of 50px, and when you hover over it it becomes the height it usually is. In short this is what my code does:
Check the height of a div -> checkedHeight
Apply CSS rule: max-height: 50px
Apply CSS rule on Hover: max-height: checkedHeight
This works like a charm. But!!! When the div loads extra content, it becomes longer. Is there anyway i could set max-height to be the preferred height of an element? I know i could just not use max-height, but i want to use css3 transitions to make the div expand gradually.

Use element.scrollHeight
Here is an example
<script>
function collapse(target) {
target.style.maxHeight = '50px';
}
function expand(target) {
target.style.maxHeight = target.scrollHeight + 'px';
}
</script>
<style>
#test {
max-height: 50px;
background:lightgray;
overflow: hidden;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
</style>
<div id="test" onmouseover="expand(this)" onmouseout="collapse(this)">
text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
</div>

Could you not just set max-height: none when hovering?

Background images opacity fades out the whole element

I have a div element with background image, I'm trying to fade in and out background images with Jquery.
By now the function works well but it fades out the whole div and not only the background as I wish.
function rentPics()
{
$('#d2').css('background-image','url(' + mazdaArr[1] + ')');
interID=setInterval (changeImage,3000);
}
function changeImage()
{
$('#d2').animate({opacity: 0}, 1500, function(){
$('#d2').css('background-image', 'url(' + mazdaArr[x] + ')');
}).animate({opacity: 1}, 1500);
x++;
if (x==mazdaArr.length)
{
x=1;
}
}

If you're looking for a simple and lightweight cross-fading, use the CSS transition. This won't affect the text inside the element, the border and the box-shadow.
transition: background-image 1s ease-in-out;
-webkit-transition: background-image 1s ease-in-out;
-moz-transition: background-image 1s ease-in-out;
-ms-transition: background-image 1s ease-in-out;
-o-transition: background-image 1s ease-in-out;
Check out this fiddle.
It's supported by Chrome, Safari and Opera but I'm not quite sure with Firefox and IE
If you have a larger list of images to loop. You may also want to consider caching the images URL first because I noticed some flickering/blinking on first use. Check solutions here - Preloading CSS Background Images

The fade in applies opacity to the entire div with the background image incluide, you can do this creating a layer behind the div that you want apply the fade in and fade out.

Instead of using jQuery to animate opacity, you could have it add or remove a class. Then add transitions to your CSS, which should produce your desired result. Something like below might work. You can see the documentation of CSS transitions here. The only drawback is IE, per usual.
.element {
-webkit-transition: ease 0.2 all;
-moz-transition: ease 0.2 all;
-o-transition: ease 0.2 all;
-ms-transition: ease 0.2 all;
transition: ease 0.2 all;
}

Use a relative container with an absolute positioned overlay. Your HTML should look like this:
<div id="d2" class="image-wrapper">
<img src="/img/1.jpg" />
<div class="overlay"> your text goes here </div>
</div>
... and your CSS:
.image-wrapper {
position: relative;
}
.image-wrapper .overlay {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: auto;
}
.image-wrapper img {
display: block;
}
Now you can change the opacity of your image without changing the content within the ovelay.

Css3 Webkit css animations: resize a div rectangle

I'm trying to understand if is possible to replicate the method animate in Jquery, using webkit animations
Assuming i have a div 50px by 50 px
using jquery I can easily resize and animate it using:
$('#mybox').animate({'width':'100px','height':'70px'}, 300)
// so from 50x50 it animates to 100x70
// the values 100 and 70 should ba dynamically
// input so i can create a function (Width,Height) to alter my box
I wonder how to do the same, if possible using CSS WebKit animations
PS. I dont need them to work in firefox, is just a project for a Safari/Chrome

You can use this CSS:
div.mybox {
width: 50px;
height: 50px;
background-color: red;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
Then you can update the width and height properties using jQuery:
$(document).ready(function() {
$("div.mybox").css({"width": "100px", "height": "70px"});
});
So, if the browser supports it, this will be animated. But, of course, consider putting these properties to a separate class and adding this class to the element. You can use the .addClass() function, like this.
$(document).ready(function() {
$("div.mybox").addClass("enlarged");
});
Or, for example, you can use it with the toggleClass function and the click event (the box will be enlarged when clicked, and will change to the normal size when click again).
$(document).ready(function() {
$("div.mybox").click(function() {
$(this).toggleClass("enlarged");
});
});
In this case, the properties should be defined in the CSS class.
div.mybox.enlarged {
width: 100px;
height: 70px;
}
Also, if you want the animation to happen on mouse over, then all you have to add is this:
div.mybox:hover {
width: 100px;
height: 70px;
}
Animations of this kind can be performed without using JS at all.
Also, you should read about CSS3 transition attribute and the transform functions (they can be usable in many cases). They are described here.

CSS3 will make this very easy for you! It will add a transition, and you can change the dimensions with :hover. Here's the sample div:
<div id="mydiv">
<!-- Div content goes here -->
</div>
So, your div is "mydiv". The rest is done in CSS3:
#mydiv {
width: 50px;
height: 50px;
background: #f34543;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
#mydiv:hover {
width: 100px;
height: 70px;
}
JSFiddle: http://jsfiddle.net/dakoder/ZGHLM/
That's it! It will resize it from 50x50px to 100x70px. Tested on Chrome, but not Safari, yet.

#keyframes animationName {
0% {width: 50px; height:50px}
100% {width: 100px; height:70px}
}
take a look at this:
http://www.css3files.com/animation/

You can use CSS animations and transitions with "dynamic" values by applying CSS as a new styleSheet or inline style as in this case:
http://jsfiddle.net/4zD74/

CSS3 transitions inconsistent across FF and Chrome

So I have created a CSS3 animation that does not behave consistently across the different browsers. Here is a quick and dirty overview, and I have included a JSFiddle link at the end.
Here is the CSS:
.cloned_object {
position:absolute;
background-color:white;
width: 700px;
height: 640px;
margin: 0; /*for centering purposes*/
-webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
-moz-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
-ms-transition: width 1s, height 1s, top 1s, left 1s, margin 1s ;
transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}
and the JS function:
$('.content_cell').on('click', function(event) {
// if the user is on a browser older then IE9
if ($.browser.msie && $.browser.version.substr(0,1)<10) {
var $clonedElement = $( this ).clone(true).attr('class','cloned_object content_cell').appendTo('#mainContentTable');
$clonedElement.css({left:$(this).position().left,
top:$(this).position().top,
opacity:1.0}) ;
selectedPos = $(this).position();
var currentPos = $('#invitedToChatCell').position();
$clonedElement.animate({
height:640, width:700,
//position:'absolute',
left:currentPos.left,
top:currentPos.top,
opacity:1.0
}, 500, function(){ $('.cloned_object > ul').toggle(); });
} else {
var currentPos = $('#invitedToChatCell').position();
var $clonedElement = $( this ).clone(true).attr('class', 'content_cell').appendTo('#mainContentTable');
$clonedElement.css({left:$(this).position().left,
top:$(this).position().top}) ;
$clonedElement.addClass('cloned_object');
$clonedElement.css({'margin-left':-$(this).position().left+125,
'margin-top':-$(this).position().top,
}) ;
selectedPos = $(this).position();
$('.cloned_object > ul').toggle();
}
event.stopPropagation();
});
I am really at a loss as to why it would be different across browsers. I was hoping someone could enlighten me as to what is going on...
Here is the jsFiddle link. If you run it in both browsers, you will see the animation position is different. In FF, it looks like the box grows, that is what I want. In chrome it's very strange...

Your transitions explicitly request that the "top" and "left" be animated. They've got to start from somewhere, so they start from zero. It's a weird case because the "cloned-element" style is not what's giving the element the "top" and "left" values, it's your code which puts them straight on the element.
You're also animating the margin, however; Chrome doesn't seem to pay much attention to that. If I take the "top" and "left" properties out of the transition, it makes it act a little more like Firefox.
The concept of applying a transition to an element at the same time it comes into existence is a little confusing to me. I hope somebody comes along and provides a better answer.