I am trying to develop an Image slider. I want the images to zoom in until the next image takeover occurs. I am currently using the transform scale property. It is overflowing the width and causes a scrollbar to be displayed. How can this scrollbar be removed?
HTML:
<div id="pn-head">
</div>
JS:
var i = 1;
function tSlide(){
if(i<=5){
jQuery('#pyn-head').attr('class','pn-head head-bg'+i);
}
i = i+1;
if(i==6){
i=1;
}
}
tSlide();
setInterval(tSlide , 5000);
CSS:
.pn-head{
height: 700px;
background-size: cover !important;
background-repeat: no-repeat !important;
-webkit-transition: background 1s ease-out;
-moz-transition: background 1s ease-out;
-o-transition: background 1s ease-out;
transition: background 1s ease-out;
-webkit-transition: transform 2s ease-out 1s;
-moz-transition: transform 2s ease-out 1s;
-o-transition: transform 2s ease-out 1s;
transition: transform 2s ease-out 1s;
}
.head-bg1{
background: url('../img/b1.png');
transform: scale(1.1);
}
.head-bg2{
background: url('../img/b2.png');
transform: scale(1.2);
}
.head-bg3{
background: url('../img/b3.png');
transform: scale(1.3);
}
.head-bg4{
background: url('../img/b4.png');
transform: scale(1.4);
}
.head-bg5{
background: url('../img/b5.png');
transform: scale(1.5);
}
Add this to remove all scrollbars:
<style type="text/css">
body {
overflow:hidden;
}
</style>
I've got a little issue using the animation in angularjs. I can expand and collapse a div but when i collapse it the content of the div disappear after the container collapse. It should be collapse together instead.. I made a jsfiddle here:
http://jsfiddle.net/7tb4g/119/
the css is very simple:
.animate-if.ng-enter, .animate-if.ng-leave {
-webkit-transition: 1s linear all;
-moz-transition: 1s linear all;
-ms-transition: 1s linear all;
-o-transition: 1s linear all;
transition: 1s linear all;
}
.animate-if.ng-enter {
max-height: 0;
opacity: 0;
}
.animate-if.ng-enter.ng-enter-active {
max-height: 999px;
opacity:1;
}
.animate-if.ng-leave {
max-height: 999px;
opacity:1;
}
.animate-if.ng-leave.ng-leave-active {
max-height: 0;
opacity:1;
}
thanks
Simple fix with overflow:hidden;
.animate-if.ng-enter, .animate-if.ng-leave {
-webkit-transition: 1s linear all;
-moz-transition: 1s linear all;
-ms-transition: 1s linear all;
-o-transition: 1s linear all;
transition: 1s linear all;
/* no overflow during animation */
overflow:hidden;
}
DEMO
I have a multilevel dropdown in a Bootstrap project I made. I need it to be so that the dropdowns would slide. How am I to accomplish that?
I have the following code done, but I need to add to it. Here's what the code does:
It opens and closes the specific dropdown if you click its dropdown toggle.
If you click outside the dropdown, but inside its parent, only the child dropdown will close; and if you click outside the parent, the parent will close, and so on.
If you click on the dropdown toggle of a child dropdown, it will only affect that dropdown and its children, not its parents.
I've read onto this answer to try and use it with my current solution, but I don't know how to get it to work properly: https://stackoverflow.com/a/19339162/1934402
I'm sure it does more specifications, but you get the idea. Here is a jsfiddle I made, too: http://jsfiddle.net/hhb9u7db/
For an example, I made the Collections link be a dropdown with T-shirts as another dropdown. I want it all to work exactly like how I have it working now, except that it slides.
$(function() {
$('.dropdown').on({
"click": function(event) {
if ($(event.target).closest('.dropdown-toggle').length && $(this).parents('.dropdown').length === ($(event.target).parents('.dropdown').length - 1)) {
$(this).data('closable', true);
} else {
$(this).data('closable', false);
}
},
"hide.bs.dropdown": function(event) {
hide = $(this).data('closable');
$(this).data('closable', true);
return hide;
}
});
});
Your fiddle is not totally clear for me. Your navbar has no .navbar class and your nav menus no .navbar-nav.
You can try to add the CSS code like that shown below:
.dropdown-menu,
.open > .dropdown-menu,
.dropdown-menu,
.open > .dropdown-menu .dropdown-menu {
display: block;
max-height: 0;
overflow-y:hidden;
visibility: hidden;
-webkit-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
-moz-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
-o-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
max-width: 100%;
}
.navbar-nav > li.open > .dropdown-menu,
.nav-pills > li.open > .dropdown-menu,
.nav-pills > li.open > .dropdown-menu .open .dropdown-menu {
max-height: 500px;
display: block;
visibility: visible;
-webkit-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
-moz-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
-o-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
demo: http://jsfiddle.net/hhb9u7db/1/
resources:
Transitions on the display: property
http://davidwalsh.name/css-slide
For Bootstrap default navbar you can use the following Less code:
.dropdown-menu, .open > .dropdown-menu,
{
display:block;
max-height: 0;
overflow-y:hidden;
visibility:hidden;
transition:max-height 2s ease-in-out, visibility 1.8s ease-in;
max-width: 100%;
}
.navbar-nav > li.open > .dropdown-menu,
{
max-height: 500px;
display:block;
visibility:visible;
transition:max-height 2s ease-in-out, visibility 0s linear 0.5s;
transition-delay:0s;
}
Which compiles with the autoprefix plugin into the following CSS code (lessc --autoprefix="Android 2.3,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8,iOS >= 6,Opera >= 12,Safari >= 6"):
.dropdown-menu,
.open > .dropdown-menu {
display: block;
max-height: 0;
overflow-y:hidden;
visibility: hidden;
-webkit-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
-o-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
max-width: 100%;
}
.navbar-nav > li.open > .dropdown-menu {
max-height: 500px;
display: block;
visibility: visible;
-webkit-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
-o-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
demo: http://www.bootply.com/dd5aFlGTTE
I have:
<div class="button" id="button1">Click</div>
<div class="button" id="button2">Click</div>
and the JS
$('.button').click(function(){
$('.button').removeClass('selected');
$(this).addClass('selected');
});
CSS
.selected {
background-color: green;
}
Can I 'animate' the applying of the class 'selected'? I.e on a click of the div, the background slides in from the right or fades in for example? Is there a decent plugin available that could achieve this? Is there are a CSS workaround/method?
Simply use CSS3
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
Example
http://jsfiddle.net/tw16/JfK6N/
if you don't want to use CSS3 to support older Browsers use the done() callback of animate
$('.button').click(function() {
$('.button').removeClass('selected');
$(this).animate({
backgroundColor: green
}, 1000, "linear", function() {
$(this).addClass('selected');
});
});
You can use css3 for that. Use transition to background color change.
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
Here is the example with your code:
http://jsfiddle.net/mm9mV/
This is a follow up on a previous question...I was helped out by Marcatectura (thanks again!) , and this is the example they gave me: http://jsfiddle.net/rt9d5/10/embedded/result/
I decided to change the 'li' elements to 'div' elements, as it works better for my intended design. But as I'm not that well versed in jquery I've done something wrong in trying to get mine to look the same. http://fiddle.jshell.net/faedince/L4L4N/ (Here's a little bit of my code.)
#panelOne:after {
display: block;
background: red;
opacity: 0.9;
width: 350px;
height: 350px;
content: "";
-webkit-transition: -webkit-transform 500ms ease-out 0s;
-moz-transition: -moz-transform 500ms ease-out 0s;
-o-transition: -o-transform 500ms ease-out 0s;
transition: transform 500ms ease-out 0s;
$( '#panelOne' ).click(function(){
$( '#panelOne' ).removeClass( 'clicked' );
$(this).addClass( 'clicked' );
});
The red covers are sitting underneath the white panels, and are too far down the page. As per the example they're supposed to be on top of the white panels. Could someone tell me what I'm doing wrong please?
It looks like you need to add position: absolute to your :after classes (along with the top and left positioning). You can also get away with simplifying your JS a bit. Instead of trying to code for every possible click combination, make one bit of code that can apply to all of them.
Demo Fiddle
CSS: you can replace all of your individual :after css calls with the following.
.bigbox > div:after {
content: "";
position: absolute;
top: 0px;
left: 0px;
display: block;
background: red;
opacity: 0.9;
width: 350px;
height: 350px;
-webkit-transition: -webkit-transform 500ms ease-out 0s;
-moz-transition: -moz-transform 500ms ease-out 0s;
-o-transition: -o-transform 500ms ease-out 0s;
transition: transform 500ms ease-out 0s;
}
JS:
$('.bigbox div').on('click', function(){
$('.bigbox div').removeClass('clicked');
$(this).addClass('clicked');
});