Develop Reference

Animate div from height: 0px to auto failing on first click

I'm trying to animate a block element from 0px to auto. However, on first click it just instantly shows at its auto height. After the first click, it animates to visible and invisible smoothly just fine.
CSS:
.item .comments {
display: none;
overflow: hidden;
background: #f7f8fb;
padding: 0 10px;
margin: 0;
}
JS:
$(document).on('click', '.btn-comment', function(){
var comments = $(this).closest('.item').find('.comments');
if (!comments.is(':visible')) {
comments.show().velocity({
height: comments.get(0).scrollHeight
}, 250, function(){
$(this).height('auto');
}, 'ease');
} else {
comments.velocity({
height: 0
}, 250, function(){
$(this).hide();
}, 'ease');
}
});

Try using slideToggle() like this:
$(this).closest('.item').find('.comments').slideToggle();

Looks like you've just forgotten to type
height: 0;
in the CSS. This makes it set to auto in the beginning.

I think in jQuery is not such a function you can toggle click so i made for you one, https://jsfiddle.net/moongod101/zobbvm79/ I'm new to JS,and i think the animation you can give it to css,and addClass and removeClass is the main point of this action

horizontal scroll inside container

I'm pretty new to javascript and I'm trying to create a horizontal scrolling div :-
JSfiddle
As you can see the menu links go to each colour but I would like to put this inside a container which is 250x250px so only 1 colour is visible, then you click on whichever link and it scrolls to that colour.
Hope someone can help me with a few pointers.
Thanks!
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
event.preventDefault();
$('html,body').animate({
scrollLeft: $(this.hash).offset().left
}, 200);
});
});
.container {
white-space: nowrap;
}
.child-element {
min-width: 250px;
display: inline-block;
height: 250px;
}
.child1 {
background-color: purple;
}
.child2 {
background-color: orange;
}
.child3 {
background-color: black;
}
.child4 {
background-color: green;
}
.child5 {
background-color: blue;
}
.child6 {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
PURPLE
ORANGE
BLACK
GREEN
BLUE
RED
<div class="container">
<div id="purple" class="child-element child1"></div>
<div id="orange" class="child-element child2"></div>
<div id="black" class="child-element child3"></div>
<div id="green" class="child-element child4"></div>
<div id="blue" class="child-element child5"></div>
<div id="red" class="child-element child6"></div>
</div>

As #Script47 mentioned, you'll want to apply overflow-x as a CSS property to your element, in addition the width (to act as a viewport). Here's what your final CSS might look like:
.container {
white-space: nowrap;
overflow-x: scroll;
width: 250px;
position: relative;
}
After that, you'll need to modify your JS slightly. You'll still want to scroll to the offset of the element, but you'll also need to take into account your current scroll position.
(To clarify, if you clicked orange - which has an offset initially of 250px, post-animation, the offset for orange would be0px, and black would be250px. If you then click black, it will attempt to scroll to 250px, which is the orange element.)
Here's what the updated JS might look like:
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
var current = $('.container').scrollLeft();
var left = $(this.hash).position().left;
event.preventDefault();
$('.container').animate({
scrollLeft: current + left
}, 200);
});
});
A fiddle to demonstrate: https://jsfiddle.net/bpxkdb86/4/
For the fiddle, I removed physical white-space in the HTML (to prevent the divs from having space between them) using <!-- comments -->, and also added position: relative to the containing element (to use position)

A CSS solution, try adding this to you element in CSS,
overflow-x: scroll;
This, should do it for you.

You need two changes for this to work.
First, add height and width for the container and then set overflow in css.
width:250px;
height:250px;
overflow: auto;
Second update jquery to animate the container, now it is animating the body.
$('.single-box').animate({
JSFiddle is avaialble in the following link
https://jsfiddle.net/jym7q0Lu/

just use a css if you want your div to be scrollable..
.container {
white-space: nowrap;
overflow-x: scroll;
width: 250px;
position: relative;
}

Owl carousel full screen doesn't work

I am trying to make owl carousel slider full screen for my site.
This is what I need, feel free to resize Your browser
And this is what I have,
fiddle
$(document).ready(function() {
// carousel setup
$(".owl-carousel").owlCarousel({
navigation : false,
slideSpeed : 300,
paginationSpeed : 400,
singleItem: true,
autoHeight: true,
afterMove: top_align,
});
function top_align() {
$(window).scrollTop(0);
console.log('move');
}
});
is there any solution to fix it?
Thx

When using % for heights, you have to work your way down the DOM chain to your child element for the height to apply.
Another option is to take advantage of vh units. 100vh = 100% of the window height.
Just add 100vh to .owl-item and your div item.
.owl-item, .item {
height: 100vh;
}
A vh unit is defined as:
Equal to 1% of the height of the viewport's initial containing block.

Try this:
html, body {
height: 100%;
margin: 0;
}
.owl-wrapper-outer {
height: 100% !important;
}
.owl-wrapper {
height: 100%;
}
.owl-item {
height: 100%;
}
.b-Amarelo {
height: 100%;
}
.owl-item h1 {
margin: 0;
}
Demo: Fiddle

Animating bars to width of Text

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.

How do I adjust the top margin of a Caroufredsel slider?

I've got a Caroufredsel slider working fine using the "custom" settings from the samples:
<script type='text/javascript'>
$(document).ready(function() {
// Using custom configuration
$("#random_selections").carouFredSel({
items : 3,
direction : "up",
/*wrapper: {
margin:0px,
},*/
scroll : {
items : 1,
easing : "elastic",
duration : 1000,
pauseOnHover : true
}
});
});
</script>
However, the image at the top is not flush with the top border of the container. If I check the debugger, I see that there is CSS styling at the level from within the .js library:
<div class="caroufredsel_wrapper" style="display: block; text-align: start; float: none; position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: auto; width: 400px; height: 1387px; margin: 16px 0px; overflow: hidden;">
I have discovered that this particular element is controlled by the margin attribute. How can I adjust this attribute to reflect "margin: 0px 0px" without altering the code in the library? Is there a way to do this externally?
There is little activity in the Caroufredsel support forums, and it's not clear from the configuration pages how to adjust this.

You could locate the class that controls that element in the stylesheet(s), see if it's generated there. Maybe there's some child elements of your class that are overwriting your inline CSS