Develop Reference

Using the duration of mouse press for scrolling

I coded this:
$("#scroll-to-left-button").on("mousedown", function() {
var x = $("#scroll-area").scrollLeft();
$("#scroll-area").scrollLeft(x - 10);
});
$("#scroll-to-right-button").on("mousedown", function() {
var x = $("#scroll-area").scrollLeft();
$("#scroll-area").scrollLeft(x + 10);
});
#container {
width: 50%;
height: 100px;
background-color: grey;
position: relative;
}
#scroll-area {
white-space: nowrap;
overflow-x: auto;
height: 100%;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="container">
<div id="scroll-area">
<div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
</div>
<button id="scroll-to-left-button">Scroll to left</button>
<button id="scroll-to-right-button">Scroll to right</button>
You need to click the buttons pretty often to navigate through this container. Is there a way to let it based on the duration of the mouse press? Like if you keep the mouse pressed, it continues constantly scrolling? And if you stop, it stops.
Would be happy if someone could help me.

Here's a working solution. Also your code was a bit wet, so I refactored it a bit. You only need one mousedown event listener.
let interval;
$('.scroll-btn').on('mousedown', ({ target }) => {
const type = $(target).attr('id');
interval = setInterval(() => {
var x = $('#scroll-area').scrollLeft();
$('#scroll-area').scrollLeft(type === 'left' ? x - 10 : x + 10);
}, 50);
});
$('.scroll-btn').on('mouseout mouseup', () => clearInterval(interval));
#container {
width: 50%;
height: 100px;
background-color: grey;
position: relative;
}
#scroll-area {
white-space: nowrap;
overflow-x: auto;
height: 100%;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="container">
<div id="scroll-area">
<div id="text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua.
</div>
</div>
</div>
<button id="left" class="scroll-btn">Scroll Left</button>
<button id="right" class="scroll-btn">Scroll Right</button>

Well, the mousedown and mouseup make a good pair, although you have used only mousedown :)
Here's a sample how it could be done.
Note that there're couple other things that could be done to this code for it to look nicer:
.on(... is not probably needed, you could just write it as .mousedown(...
the code for the right and left buttons look really similar, you could unite these blocks in one and distinguish by an additional attrubute (let's say like move="10" for the right button and move="-10" for the left one, and then just getting this value in order to add it to scrollLeft)
var tmr;
$(".scroll-button").mousedown(function() {
//let's setup the timer here...
move = +$(this).attr("move");
tmr = setInterval(function(){
$("#scroll-area")[0].scrollLeft+=move;
}, 250)
});
$(".scroll-button").mouseup(function() {
// and destroy the timer here
clearInterval(tmr);
});
#container {
width: 50%;
height: 300px;
background-color: grey;
position: relative;
}
#scroll-area {
white-space: nowrap;
overflow-x: auto;
height: 100%;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="container">
<div id="scroll-area">
<div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
</div>
<button class="scroll-button" move="-10">Scroll to left</button>
<button class="scroll-button" move="10">Scroll to right</button>

CSS simultaneous transition on multiple elements

So, I have 3 flexbox containers of the same dimension. When I click on one of them, it should stretch to become bigger then the others, and then back to normal if I click on it again.
I've made it using JS, and it works.
The problem is that when I already have one the boxes stretched and I try to stretch another one, the transition duration increases. And I can't figure out why. I thought the different transitions would start simultaneously.
This is the code:
/* HTML */
<div class="flexbox">
<div class="box-1" onclick="box1();">
<h3>Box 1</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
</div>
<div class="box-2" onclick="box2();">
<h3>Box 2</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
</div>
<div class="box-3" onclick="box3();">
<h3>Box 3</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
</div>
</div>
/* CSS */
.flexbox {
display: flex;
width: auto;
justify-content: center;
}
.flexbox div {
border: 1px #ccc solid;
border-radius: 10px;
width: 250px;
height: 250px;
padding: 10px;
margin: 2px 10px;
transition: flex-grow 1s linear 0s;
}
.box-1{
flex-grow: 0;
}
.box-2 {
flex-grow: 0;
}
.box-3 {
flex-grow: 0;
}
/* JS */
function box1(){
const box1 = document.getElementsByClassName('box-1')[0];
if(box1.style.flexGrow != '4'){
box1.style.flexGrow = '4';
} else {
box1.style.flexGrow = '0';
}
const box2 = document.getElementsByClassName('box-2')[0];
box2.style.flexGrow = '0';
const box3 = document.getElementsByClassName('box-3')[0];
box3.style.flexGrow = '0';
}
function box2(){
const box2 = document.getElementsByClassName('box-2')[0];
if(box2.style.flexGrow != '4'){
box2.style.flexGrow = '4';
} else {
box2.style.flexGrow = '0';
}
const box1 = document.getElementsByClassName('box-1')[0];
box1.style.flexGrow = '0';
const box3 = document.getElementsByClassName('box-3')[0];
box3.style.flexGrow = '0';
}
function box3(){
const box3 = document.getElementsByClassName('box-3')[0];
if(box3.style.flexGrow != '4'){
box3.style.flexGrow = '4';
} else {
box3.style.flexGrow = '0';
}
const box1 = document.getElementsByClassName('box-1')[0];
box1.style.flexGrow = '0';
const box2 = document.getElementsByClassName('box-2')[0];
box2.style.flexGrow = '0';
}
How can I have the transition duration to be always the same (1s in this example)?

There are a number of improvements that can be made to your code that will reduce duplication, avoid complications of interacting with the live HTMLCollection that getElementsByClassName returns, allow you to avoid using inline onclick assignments, and will cause the transition to only take 1 second.
The example below implements a single grow() function which is called by listeners attached to each box. The listeners are added by iterating over the NodeList returned by querying the DOM with .querySelectorAll('.box') and calling addEventListener() on each element.
In the CSS we declare classes for each state we want our boxes to be able to have - in this case flex-grow: 0 and flex-grow:4. Then in our grow() function we simply add or remove these styles as necessary based on which box was clicked.
function grow(e){
// if the clicked box already has class 'flexgrow4' return
if (e.currentTarget.classList.contains('flexgrow4')) return;
// otherwise find the element in the flexbox container that has
// class 'flexgrow4' and replace it with 'flexgrow0'
const lastActive = flexbox.querySelector('.flexgrow4');
if (lastActive) lastActive.classList.replace('flexgrow4', 'flexgrow0');
// finally, replace 'flexgrow0' with 'flexgrow4' on the clicked box
e.currentTarget.classList.replace('flexgrow0', 'flexgrow4');
}
const flexbox = document.querySelector('.flexbox');
const boxes = document.querySelectorAll('.box')
boxes.forEach(box => box.addEventListener("click", grow, false));
.flexbox {
display: flex;
width: 100vw;
justify-content: center;
}
.flexbox div {
border: 1px #ccc solid;
border-radius: 10px;
width: 100px;
height: 250px;
padding: 10px;
margin: 2px 10px;
transition: all 1s linear 0s;
}
.flexgrow0 {
flex-grow: 1;
}
.flexgrow4 {
flex-grow: 4;
background-color:tomato;
}
<div class="flexbox">
<div class="box flexgrow0">
<h3>Box 1</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
</div>
<div class="box flexgrow0">
<h3>Box 2</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
</div>
<div class="box flexgrow0">
<h3>Box 3</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
</div>
</div>

jQuery slider not going to beginning

I'm working on a little jQuery widget to add to my portfolio/knowledge base. The widget works, and cycles through 5 slides, however, it does not loop back around to slide 1 as it should. It only advances to a blank slide, and the page requires refreshing to move back or forward again. I am a Javascript/jQuery beginner, so I'm sure I'm missing something simple, but I can't figure it out for the life of me. Any assistance is greatly appreciated.
//(document).ready(); makes sure that all elements on the page are
//loaded before loading the script
$(document).ready(function() {
//alert('Doc is loaded');
//specifies speed to change from image to image, in ms
var speed = 500;
//specifies auto slider option
var autoswitch = true;
//Autoslider speed
var autoswitch_speed = 4000;
//Add initial active class
$('.slide').first().addClass('active');
//Hide all slides
$('.slide').hide();
//Show first slide
$('.active').show();
$('#next').on('click', function() {
$('.active').removeClass('active').addClass('oldActive');
if ($('.oldactive').is('slider:last-child')) {
//alert('true');
$('.slide').first().addClass('active');
} else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
});
$('#prev').on('click', function() {
$('.active').removeClass('active').addClass('oldActive');
if ($('.oldactive').is(':first-child')) {
$('.slide').last().addClass('active');
} else {
$('.oldActive').prev().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
});
});
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Arial', sans-serif;
font-size: 14px;
color: #fff;
background: #333;
line-height: 1.6em;
}
a {
color: #fff;
text-decoration: none;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
#container {
width: 980px;
margin: 40px auto;
overflow: hidden;
}
#slider {
width: 940px;
height: 350px;
position: relative;
overflow: hidden;
float: left;
padding: 3px;
border: #666 solid 2px;
border-radius: 5px;
}
#slider img {
width: 940px;
height: 350px;
}
.slide {
position: absolute;
}
.slide-copy {
position: absolute;
bottom: 0;
left: 0;
padding: 20px;
background: 7f7f7f;
background: rgba(0, 0, 0, 0.5);
}
#prev,
#next {
float: left;
margin-top: 130px;
cursor: pointer;
position: relative;
z-index: 100;
}
#prev {
margin-right: -45px;
}
#next {
margin-left: -45px;
}
<!DOCTYPE html>
<html>
<head>
<title>jQuery Content Slider</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="container">
<header>
<h1>jQuery Content Slider</h1>
</header>
<img src="img/arrow-left.png" alt="Prev" id="prev">
<div id="slider">
<div class="slide">
<div class="slide-copy">
<h2>Slider One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="img/slide1.jpg">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="img/slide2.jpg">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Three</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="img/slide3.jpg">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Four</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="img/slide4.jpg">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Five</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="img/slide5.jpg">
</div>
</div>
<img src="img/arrow-right.png" alt="Next" id="next">
</div>
</body>
</html>

var cur = 0, // Start Slide Index. We'll use ++cur to increment index
pau = 2000, // Pause Time (ms)
fad = 500, // Fade Time (ms)
$ga = $('#slider'), // Cache Gallery Element
$sl = $('> div', $ga), // Cache Slides Elements
tot = $sl.length, // We'll use cur%tot to reset to first slide
itv ; // Used to clear on mouseenter
$sl.hide().eq( cur ).show(); // Hide all Slides but desired one
function stopFn() { clearInterval(itv); }
function loopFn() { itv = setInterval(fadeFn, pau); }
function fadeFn() { $sl.fadeOut(fad).eq(++cur%tot).stop().fadeIn(fad); }
$ga.hover( stopFn, loopFn );
loopFn(); // Finally, Start
Add this code in the script. this will enable looping effect. Tried working with your code, but its a little bit complex for me. Try this method, this will work like a charm.
See the DEMO
See the snippet
//(document).ready(); makes sure that all elements on the page are
//loaded before loading the script
$(document).ready(function() {
//alert('Doc is loaded');
//specifies speed to change from image to image, in ms
var speed = 1000;
//specifies auto slider option
var autoswitch = true;
//Autoslider speed
var autoswitch_speed = 4000;
//Add initial active class
$('.slide').first().addClass('active');
//Hide all slides
$('.slide').hide();
//Show first slide
$('.active').show();
$('#next').on('click', function() {
$('.active').removeClass('active').addClass('oldActive');
if ($('.oldactive').is('slider:last-child')) {
//alert('true');
$('.slide').first().addClass('active');
} else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
});
$('#prev').on('click', function() {
$('.active').removeClass('active').addClass('oldActive');
if ($('.oldactive').is(':first-child')) {
$('.slide').last().addClass('active');
} else {
$('.oldActive').prev().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
});
});
var cur = 0, // Start Slide Index. We'll use ++cur to increment index
pau = 1000, // Pause Time (ms)
fad = 500, // Fade Time (ms)
$ga = $('#slider'), // Cache Gallery Element
$sl = $('> div', $ga), // Cache Slides Elements
tot = $sl.length, // We'll use cur%tot to reset to first slide
itv; // Used to clear on mouseenter
$sl.hide().eq(cur).show(); // Hide all Slides but desired one
function stopFn() {
clearInterval(itv);
}
function loopFn() {
itv = setInterval(fadeFn, pau);
}
function fadeFn() {
$sl.fadeOut(fad).eq(++cur % tot).stop().fadeIn(fad);
}
$ga.hover(stopFn, loopFn);
loopFn(); // Finally, Start
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Arial', sans-serif;
font-size: 14px;
color: #fff;
background: #333;
line-height: 1.6em;
}
a {
color: #fff;
text-decoration: none;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
#container {
width: 980px;
margin: 40px auto;
overflow: hidden;
}
#slider {
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
float: left;
padding: 3px;
border: #666 solid 2px;
border-radius: 5px;
}
#slider img {
width: 500px;
height: 300px;
}
.slide {
position: absolute;
}
.slide-copy {
position: absolute;
bottom: 0;
left: 0;
padding: 20px;
background: 7f7f7f;
background: rgba(0, 0, 0, 0.5);
}
#prev,
#next {
float: left;
margin-top: 130px;
cursor: pointer;
position: relative;
z-index: 100;
}
#prev {
margin-right: -45px;
}
#next {
margin-left: -45px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div id="container">
<header>
<h1>jQuery Content Slider</h1>
</header>
<img src="http://leedspromoproducts.com/templates//img/thumbnails_prev_button.png" alt="Prev" id="prev">
<div id="slider">
<div class="slide">
<div class="slide-copy">
<h2>Slider One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="http://www.vectordiary.com/isd_premium/048-hot-air-balloon/hot-air-balloon.jpg">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="http://www.moneyindices.com/admin/upload/50193693.jpg">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Three</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="http://images.china.cn/attachement/jpg/site1007/20110808/000cf1a48f870fa9c75c55.jpg">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Four</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="http://cdn.allsteamboat.com/images/content/5418_gBVhd_Hot_Air_Balloon_Rodeo_in_Steamboat_Springs_md.jpg">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slider Five</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
</div>
<img src="http://www.moneyindices.com/admin/upload/50193693.jpg">
</div>
</div>
<img src="http://thehaircraftersco.com/wp-content/uploads/2015/10/next-button.png" alt="Next" id="next">
</div>
</body>

Your operation has the wrong syntax, it should be "is(':last-child'))"
if($('.oldActive').is(':last-child')){
//alert('true');
$('.slide').first().addClass('active');
} else {
$('.oldActive').next().addClass('active');
}

You can rewrite your code to use function for easy understanding and reading.
var hwSlideSpeed = 700;
var slideNum = 0;
slideCount = $("#slider .slide").size(); //Count of slides
var animSlide = function(arrow){
$('.slide').eq(slideNum).fadeOut(hwSlideSpeed);
if(arrow == "next"){
if(slideNum == (slideCount-1)){slideNum=0;}
else{slideNum++}
}
else if(arrow == "prew")
{
if(slideNum == 0){slideNum=slideCount-1;}
else{slideNum-=1}
}
else{
slideNum = arrow;
}
$('.slide').eq(slideNum).fadeIn(hwSlideSpeed);
}
$('#nextbutton').click(function(){
animSlide("next");
})
$('#prewbutton').click(function(){
animSlide("prew");
})
Hope it helps

Add class to div in rotating carousel style

I have 3 identical divs and I want to add a class to one of those divs every 5 seconds one a rotating carousel type thing.
The following JSFiddle is what I have atm and I want the :hover styles to to be added to one of those divs every 5 seconds in a rotating sequence but still work as an on hover; JSFiddle
.action {
padding: 10px 50px 10px 10px;
background-color: #eaeaea;
color: #525454;
}
.action:hover {
background-color: #b5b5b5;
color: #000;
}
.action h3 {
margin: 0 0 10px 0;
}
.action .corner {
position: absolute;
width: 0;
height: 0;
border-bottom: 50px solid #db7575;
border-left: 50px solid transparent;
bottom: 0;
right: 0;
}
.action:hover .corner {
border-bottom: 50px solid #CC0000;
}
.action i {
position: absolute;
margin-left: -20px;
margin-top: 27px;
color: #fff;
}
<div class="row">
<a href="#">
<div class="col-md-4 action">
<h3> Title 1 </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> <span class="corner "><i class="fa fa-arrow-right"></i></span>
</div>
</a>
<a href="#">
<div class="col-md-4 action">
<h3> Title 2 </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> <span class="corner "><i class="fa fa-arrow-right"></i></span>
</div>
</a>
<a href="#">
<div class="col-md-4 action">
<h3> Title 3 </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> <span class="corner "><i class="fa fa-arrow-right"></i></span>
</div>
</a>
</div>

Something like this ?
http://jsfiddle.net/15od56d3/
CSS
.action:hover,.my_turn { background-color: #b5b5b5; color: #000;}
Javascript
var myTurn = 0;
setInterval(function(){
var i = 0;
$(".action").each(function(){
if(i==myTurn)
$(this).addClass("my_turn");
else
$(this).removeClass("my_turn");
i++;
});
myTurn = (myTurn + 1)%3 ;
},5000);

What I don't get in the accepted answer is that the carousel doesn't pause when the mouse hovers over an item. This is very confusing, especially since the same style is applied. I would create a jQuery object of the rows and use the available jQuery functions to walk over/select them and apply the a class for the hover instead of using the css property.
See the JSFiddle for a demo
var $rows = $('.action');
var $start= $rows.first(); // select one to start with (can be any of the elements in the set)
var $current = $start;
var interval;
var hover = function() {
$current.removeClass('hover');
$current = $rows.eq($rows.index($current)+1);
if (!$current.length) {
$current = $rows.eq($rows.index($start));
}
$current.addClass('hover');
};
The carousel should keep the expected direction and move on from where the hover-style was last applied; from the hovered element (as this is the most natural behavior imho):
$('.action').mouseover(function() {
window.clearInterval(interval);
$current.removeClass('hover');
$current = $(this).addClass('hover');
}).mouseout(function() {
interval = window.setInterval(hover, 2000);
});
$start.addClass('hover').mouseout(); // apply the class immediately to the first row

Show more/less with effect

I found this code: link
$(".show-more a").on("click", function() {
var $this = $(this);
var $content = $this.parent().prev("div.content");
var linkText = $this.text().toUpperCase();
if(linkText === "SHOW MORE"){
linkText = "Show less";
$content.switchClass("hideContent", "showContent", 400);
} else {
linkText = "Show more";
$content.switchClass("showContent", "hideContent", 400);
};
$this.text(linkText);
});​
CSS:
div.text-container {
margin: 0 auto;
width: 75%;
}
.hideContent {
overflow: hidden;
line-height: 1em;
height: 2em;
}
.showContent {
line-height: 1em;
height: auto;
}
.showContent{
height: auto;
}
h1 {
font-size: 24px;
}
p {
padding: 10px 0;
}
.show-more {
padding: 10px 0;
text-align: center;
}
​
It was exactly what I was looking for, but as you can see here, if you modify it (link), the "Show more" link is there if you have only one or two lines, and it is not needed in that case.
Thank you for your answers!

As your sample code was not fully working I decided to enhance one of my own samples I created in a post a while ago.
DEMO - Show more/less and hide the link when not needed
The demo shows the first text to have no link and the second to have a link. If you add a few more characters to the first text you see the link appear when you run the fiddle again.
The idea is to double check the client vs the actual height and determine then if you want to show the link. Similar to the below.
$(".show-more a").each(function() {
var $link = $(this);
var $content = $link.parent().prev("div.text-content");
console.log($link);
var visibleHeight = $content[0].clientHeight;
var actualHide = $content[0].scrollHeight - 1; // -1 is needed in this example or you get a 1-line offset.
console.log(actualHide);
console.log(visibleHeight);
if (actualHide > visibleHeight) {
$link.show();
} else {
$link.hide();
}
});
The demo is using the following HTML:
<div class="text-container">
<h1>Lorem ipsum dolor</h1>
<div class="text-content short-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
</div>
<div class="show-more">
Show more
</div>
</div>
<div class="text-container">
<h1>Lorem ipsum dolor</h1>
<div class="text-content short-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div class="show-more">
Show more
</div>
</div>​
and the following basic CSS:
div.text-container {
margin: 0 auto;
width: 75%;
}
.text-content{
line-height: 1em;
}
.short-text {
overflow: hidden;
height: 2em;
}
.full-text{
height: auto;
}
h1 {
font-size: 24px;
}
.show-more {
padding: 10px 0;
text-align: center;
}
​

See the working fiddle here - http://jsfiddle.net/tariqulazam/hpeyH/
First you have to measure if the content has overflowed or not. I have used the solution from detect elements overflow using jquery.
Finally use this plugin to decide whether to show or hide the 'show more' link.
$("div.content").HasScrollBar() ==true ? $(".show-more").show():$(".show-more").hide();

I don't know whats your real question is, but I suppose you want to deactive the show more link, if the text is only 1 or 2 lines and active it if the text has more than 2 lines.
For this purpose you have to check if the div with the text is bigger than you threshold (2 lines). In my solution I use the height() function which give you the height in pixel. In the original example the link text is not visible if the height is more than 2em.
You better should use also pixel for that or use a tool to convert the units.
Here are my addition lines for a solution with a threshold of 1 line:
var text = $('.text-container');
if (text.height() <= 20) {
$('.show-more').hide();
}
http://jsfiddle.net/JRDzf/

if( $('.text-container').html().indexOf("<br") >= 0 ) {
$(".show-more").hide()
}