We Keep Coding

Truncate text of Twitter Bootstrap carousel

I want to truncate the text of the Bootstrap carousel .carousel-caption element. I am using shave.js to truncate the text. However, the truncating only works on the first .carousel-caption element.
I`ve created a jsfiddle to demonstrate my problem: jsfiddle
When I remove the CSS class carousel-inner from the carousel, the truncating works perfectly on booth .carousel-caption elements.

I am not pretty sure about the issue, but I think it's due to the dynamic behavior of the carousel so the shave code will only work on the first caption because it's visible and its height is set so your code should also be dynamic to call the shave funcion for each slide.
An idea is to use the event provided by the carousel component and call the shave function there.
$('#carousel-example-generic').on('slid.bs.carousel', function () {
$(".carousel-caption").shave(70);
})
slid.bs.carousel : This event is fired when the carousel has completed
its slide transition. ref
Full code : https://jsfiddle.net/dpnpo4o7/2/
I used the jQuery version of the plugin in the code above but it works the same with the JS version:
$('#carousel-example-generic').on('slid.bs.carousel', function () {
shave(".carousel-caption", 70);
})
Full code : https://jsfiddle.net/dpnpo4o7/3/

I went through the fiddle. And shave must be finding those second captions but since it is invisible at that moment, it is failing to do that.
Solution: You might want to capture the prev and next events and then try your code.

How to fold/unfold a DIV like on this website

I really like the way the DIVs fold/unfold from the top to the bottom then left to right when users click on the menu items (about, services, my tools, etc) on this website. Seems that it has been developed by a very talented person.
Any idea how to achieve something like that? I was expecting this to be done via complex CSS animation, but looking at the CSS sheet that doesn't seem to be the case.
Many thank

On that site it is achieved with the use of jQuery UI - more specifically with the Fold Effect.

I think using jQuery UI for this task alone would be an overkill, in fact you don't even need jQuery here, but I think you want to stick to it, since it's relatively easy both to read and to write code:
$("a").click(function() {
$("#fold")
.animate({ width: "500px" }, 1000 )
.animate({ height: "500px" }, 1000 )
});
See:
http://jsfiddle.net/bartkarp/u3qtt6fo/
http://api.jquery.com/animate/

If you don't want to use jQuery UI, I guess you could do it by animating the css...:-??
First state is height: 0; and width :30px; ...then using the animate on click event you could give the height a value and animation time, the width a delay equal o bigger than the height animation time and then it's value...that should do the trick but it's more stiff than actually using the UI

how to add sliding lines inside of an image

Hi I am struggling with a jquery problem what i need is, sliding lines inside of borders of an image. There are four lines and I want them to slide inside the border when the page is loaded. The first line should slide down to up; the second one left-to-right; the third one top-to-down and the fourth from right to left.
I hope that my question is clear.
(the mentioned lines are red)

You don't need JS to do this. Here is a pure CSS way of performing this animation onload, by using keyframes. Unless you want to support older browsers, this method should work.

I'll show the first two, you can do the other two
function slideLine1(){ $('#line1').animate({width: '100%'}, 1000, slideLine2); }
function slideLine2(){ $('#line2').animate({width: '100%'}, 1000, slideLine3); }
This will work. However, you can do this with 1 function, calling itself, and an i variable. That will be up to you.
There are other methods to do, this is a very basic example. A tip: Look into jQuery chaining.

Here is a demo which uses only css.
It basically uses #keyframes to solve the problem.

bgStretcher plugin - multiple instances

Using the jQuery plugin bgStretcher 2 (link to plugin), I am attempting to have various <div>s on one page use its functionality. However the plugin only appears to support one instance per page, if I make more than one $("#element").bgStretcher() call then only the first one works and all others are ignored and "More than one bgStretcher" is logged in the console.
Are there any ways around this, or are there any other plugins which would do something similar, i.e. intelligently stretch an image to fill an element? I've attempted to hack out the relevant parts of this plugin to do this but with no luck.
Using background-size: 100% doesn't work as this won't fill the element space vertically, it just stretches horizontally.

If your design allows you to display only one bgstretcher instance at a time, you can destroy the active one and create another one.
$('#slide1').bgStretcher.sliderDestroy();
$('#slide2').bgStretcher({
images: imagesArray,
imageWidth: 1600,
imageHeight: 800,
});

Did you try adding a containerID?
el1.bgStretcher({
containerId: "bgstretcher1",
images : [...],
... further settings ...
})
el1.bgStretcher({
containerId: "bgstretcher2",
images : [...],
... further settings ...
})

Problem with jerky animation in jQuery

Ive done this a number of times with no problem but for some reason it is a problem on Here. The slide down will begin to work (1/3) normally and than all of a suddenly jerk and finish the animation. slideing up works fine. this is the case for slideDown(), slideToggle and .animate()
strangely if i also toggle opacity in the animate function it does not jerk but my text will briefly change color.
HTML:
<h2>Phthalate Free: </h2><div class="yamikowebsToggler">
<p>
Dibutyl Phthalate is linked to cancer and is present in nail polish, perfume, soft plastics and skin care products.
</p></div>
CSS: i read else were that margins can cause the jerkiness but this isnt helping
h2{color:#76DEFC; margin:0px;}
.yamikowebsToggler{margin:0px;}
p{margin:0px; color;#000000;}
JQUERY:
$(document).ready(function(){
$(".yamikowebsToggler").fadeOut(0);
$("h2").click(function()
{
$(this).next(".yamikowebsToggler").stop(true, true).animate(
{ height: 'toggle' },
{
duration: 1000,
});
})
});

I found the solution. it had nothing to do with my code but a bug in jquery. jquery has trouble getting the height if it is inherited because when it is getting the height the element is hidden. when elements are hidden they are treated with css properties of
position: absolute;
visibility: hidden;
to fix this you need to specify the height in either the animation which is not doable in my case since i have many that are toggled. the alternative is to set the height to the elements. i personally added a note in my jQuery about it and did it all in line simply adding
style="height: <height in px>;"
to the elements being toggled.

I had a similar issue when animating a division from 100% down to 0% width.
What was happening was that at the start of the animation the division got wider to like 110% for some reason.
Anyway I found the solution was to add max-width: 100%; in the CSS styles on the specific division.
Just thought I'd post that here as I came here looking for a fix to this issue. :)

Have you tried increasing your {duration: ...}? Also, you could just use the built-in jQuery function .slideToggle().

I know this is marked as answer, but would like to provide an update on this issue.
The corresponding issue ticket is here:
http://bugs.jquery.com/ticket/4541
However it's been closed by core devs, and seems like it won't be fixed unless there's a patch that has no performance flaws.
In the mean time, if you still wish to use jQuery to do this, you can either set the height or the width of the element you're trying to slideUp or slideDown. It doesn't have to be in "pixel" unit, it can be in percentage as well.