Develop Reference

How to make scrollbox responsive?

Hi I'm trying to make a scrollbox in React responsive. It works on web view but when I go to mobile, it doesn't resize. How can I fix this? Here is the CSS code:
.frame {
background-color: rgba(0, 0, 0, 0.349);
padding-top: 10px;
/* margin-top: 20px; */
margin-bottom: 20px;
margin-left: -10px;
margin-right: -10px;
position: relative;
display: table-cell;
}
and the scrollbox HTML code is:
<div class= "frame"
style={{width:"1100px",
height: "415px",
overflow:"auto",
padding:"2px",
paddingTop: "10px"}}>
Thank you!

The issue is that you're hardcoding the width of the scrollbox by applying a fixed pixel width value via the style attribute on the element.
We'd need to see more of your code in action to give precise advice, but here are a few things to try:
width: "100%"
Remove width, and instead use maxWidth: "1100px"
Also, if you're using non-inline CSS to style the element via the .frame classname, consider moving all your other styling properties to the non-inline CSS as well, instead of mixing inline and non-inline styling techniques.

<div id="box">
Deutsches Ipsum Dolor id latine Fußballweltmeisterschaft complectitur pri, mea meliore denique Anwendungsprogrammierschnittstelle id. Elitr expetenda nam an, Apfelschorle ei reque euismod assentior. Odio Freude schöner
Götterfunken iracundia ex pri. Ut vel 99 Luftballons mandamus, quas natum adversarium ei Reinheitsgebot diam minim honestatis eum no
Götterfunken iracundia ex pri. Ut vel 99 Luftballons mandamus, quas natum adversarium ei Reinheitsgebot diam minim honestatis eum no
Deutsches Ipsum Dolor id latine Fußballweltmeisterschaft complectitur pri, mea meliore denique Anwendungsprogrammierschnittstelle id. Elitr expetenda nam an, Apfelschorle ei reque euismod assentior. Odio Freude schöner
Götterfunken iracundia ex pri. Ut vel 99 Luftballons mandamus, quas natum adversarium ei Reinheitsgebot diam minim honestatis eum no
</div>
#box {
position: absolute;
width: 50%;
height: 50%;
top: 10;
left: 10;
overflow: auto;
border: solid red 2px;
}

Image Slider Javascript won't work

I'm currently working on an image slider for my company's new homepage and just can't figure out the error that seems to lie in the javascript part ..
The slider contains 4 images and should, as soon as the last image is reached, begin at the first image again. The problem is that the images are displayed in that order "1-2-1-2-3-4-1-2-3-4..."
Here the code:
$('.slide').first().addClass('active');
$('.slide').hide();
$('.active').show();
$('#next').on('click', nextSlide);
$('#prev').on('click', prevSlide);
// Auto slider
if (options.autoswitch === true) {
setInterval(nextSlide, options.autoswitch_speed);
}
function nextSlide() {
$('.active').removeClass('active').addClass('prevActive');
if ($('.prevActive').is(':last-child')) {
$('.slide').first().addClass('active');
} else {
$('.prevActive').next().addClass('active');
}
$('.prevActive').removeClass('prevActive');
$('.slide').fadeOut(options.speed);
$('.active').fadeIn(options.speed);
}
function prevSlide() {
$('.active').removeClass('active').addClass('prevActive');
if ($('.prevActive').is(':first-child')) {
$('.slide').last().addClass('active');
} else {
$('.prevActive').prev().addClass('active');
}
$('.prevActive').removeClass('prevActive');
$('.slide').fadeOut(options.speed);
$('.active').fadeIn(options.speed);
}
});
and the corresponding CSS:
#slider-container {
height: 600px;
margin: 0 auto;
max-width: 100%;
overflow: hidden;
position: relative;
width: 800px;
}
#sldier {
height: 100%;
width: 100%;
}
#slider .slide img {
height: 100%;
width: auto;
}
#prev, #next {
cursor: pointer;
max-width: 30px;
opacity: 1;
position: absolute;
top: 8%;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
z-index: 999;
}
#prev { left: 12px; }
#next { right: 3px; }
#slider-container:hover #prev, #slider-container:hover #next { opacity: .7; }
.slide {
position: absolute;
width: 100%;
}
.slide-copy {
background: #777;
background: rgba(0, 0, 0, .5);
bottom: 0;
color: #fff;
left: 0;
padding: 20px;
position: absolute;
}
#media (min-width: 600px) {
#prev, #next {
top: 45%;
}
}
and the HTML
<div id="slider-container">
<img src="img/arrowprev" id="prev" alt="prev">
<ul id="slider">
<li class="slide">
<div class="slide-copy">
<h2>Placeholder</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
<img src="img/placeholder" alt="placeholder">
</li>
<li class="slide">
<div class="slide-copy">
<h2>Placeholder2</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
<img src="img/placeholder" alt="placeholder">
</li>
<li class="slide">
<div class="slide-copy">
<h2>Placeholder3</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
<img src="img/placeholder" alt="placeholder">
</li>
<li class="slide">
<div class="slide-copy">
<h2>Placeholder4</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
<img src="img/placeholder" alt="placeholder">
</li>
</ul>
<img src="img/arrownext" id="next" alt="next">
</div>
Maybe it has something to do with
if ($('.prevActive').is(':first-child')) {
$('.slide').last().addClass('active');
I just can't figure out the problem and would appreciate any help.
Thank you in advance :)
This is the page I took as source:
https://www.jqueryscript.net/slider/Tiny-jQuery-Image-Slider-Slideshow-With-Caption-Support.html

I found the fail, the unique thing it wasn't working, is the apply of visibility on each prevActive and active elements on each next/prev actions, so I've added this lines to both functions:
$('.prevActive').hide();
$('.active').show();
(Also I've commented the lines referencing to options variable, as is not defined in the description).
You can see the fiddle working here:
https://jsfiddle.net/a4bssrf5/8/

How to get height of an id-based element div with Javascript?

When hovering an element a div will be shown. I have a couple of this elements. So each div has an unique idand each it's own height. To align the div-class next to the cursor I need to know its individual height.
Here is an extraction of what I got (please note the lines that I have marked with ****):
$('.rsshover').mouseleave(function() {
var id = $(this).attr('id').replace("did_", "");
$("#pre_"+id).hide();
});
// cache the selector
var follower = $(".preview");
var IDHeight = ****???****
var xp = 0, yp = 0;
var loop = setInterval(function(){
xp += (mouseX + 15 - xp) / 12;
yp += (mouseY - ****IDHeight**** - yp) / 12;
follower.css({left:xp, top:yp});
}, 0);
So what I would like to archieve can be seen in that fiddle and when entering a value for a specific height like yp += (mouseY - 200 - yp) / 12;.
The aelements are placed on the bottom of the page. So the hidden divs need to grow upwards what means that the starting reference-point of the div should be the left-bottom-edge and instead building it up downwards it needs to grow upwards.
So I have no clue how to solve this. Would appreciate if there is someone who could help me out. Thanks in advance.
Here is what it should look like and what I want to achieve. I needed to enter two different heights manually by hand in that line yp += (mouseY - **HEIGHTVALUE** - yp) / 12;

Since you're already using jquery, you can get height of any div by $('#someid').height();

The below example provides the functionality you seek.
var mouseX = 0, mouseY = 0, limitX = 320, limitY = 15;
$('.alink').mousemove(function(e){
var id = $(this).attr('id').replace("id_", "");
// get the current hidden div selector
var follower = $("#div_to_id_"+id);
follower.show();
// change 12 to alter damping higher is slower
follower.animate({
left: e.pageX,
top: e.pageY-(follower.height()+30),
height: "auto"
}, 10, function() {
});
});
$('.alink').mouseleave(function() {
$(".hiddendivs").hide();
});
a {
display: inline-block;
width:320px;
height:15px;
position:relative;
margin-top: 150px;
background-color: red;
}
.hiddendivs {
background: green;
color: #fff;
width: 310px;
padding: 15px;
position:fixed;
z-index: 1;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="alink" id="id_1">
<div class="hiddendivs" id="div_to_id_1">
<p>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 temp...</p>
</div>
</a>
<a href="#" class="alink" id="id_2">
<div class="hiddendivs" id="div_to_id_2">
<p>some other content...</p>
</div>
</a>
Updated Fiddle

JavaScript / jQuery mouseover event with delay

I have a code that allows me to show hidden divs after a little delay on mouseover, my problem now is that im not very good with CS, i have elements in that div with that code:
$(document).ready(function() {
var timer;
var delay = 250;
$("#content1").mouseover(function() {
timer = setTimeout(function() {
$("#content.left1").css("display", "block");
}, delay);
});
$("#content1").mouseout(function() {
$("#content.left1").css("display", "none");
clearTimeout(timer);
});
});
.txtmiddle {
border: 1px solid rgba(215, 215, 215, 0.1);
background-color: rgba(245, 245, 245, 0.7);
margin-top: 5px;
opacity: 0.6;
filter: alpha(opacity=60);
padding: 2%;
border-radius: 15px;
position: relative;
overflow: auto;
-webkit-animation: fadeIn 0.1s;
animation: fadeIn 0.1s;
}
.txtmiddle:hover {
border: 1px solid rgba(55, 55, 55, 0.2);
background-color: rgba(255, 255, 255, 0.9);
opacity: 1;
filter: alpha(opacity=100);
}
#content {
display: none;
background: rgba(255, 255, 255, 0.9);
padding: 15px;
border-radius: 15px;
overflow: hidden;
position: relative;
}
#txtleft {
width: 30%;
float: left;
margin-left: 4%;
border-top: 1px solid rgba(0, 0, 0, 0.0);
}
<div id="txtleft"><div id="content" class="left1">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 a</div> </div>
<div id="middlewrapper"><div class="txtmiddle" id="content1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Nuvola_mimetypes_info.png/100px-Nuvola_mimetypes_info.png" id="midcontentleft">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Nuvola_mimetypes_info.png/100px-Nuvola_mimetypes_info.png" id="midcontentimgright" class="1">
</div> </div>
cant get it to run here.... but its working fine my only problem is now that everytime i hover over elements (those images) in the div the hidden content is (re-)shown again (with that delay) (before i didnt had the delay so the hidden element wouldnt disapear and apear again and one couldnt notice the change...

As correctly said by atinder fadeIn and fadeOut functions of jQuery will serve your need:
Try the below code:
jQuery(document).ready(function() {
var delay = 1000;//the delay interval
jQuery("#content1").mouseover(function() {
jQuery( "#content.left1" ).fadeIn(delay);
});
jQuery("#content1").mouseout(function() {
jQuery( "#content.left1" ).fadeOut(delay);
});
});
Hope it helps..

why not simply use fadeIn('slow') and fadeOut('slow') instead

I would usually use jQuery hover() to achieve what you are looking for:
$(document).ready(function () {
var timeout;
$("#content1").hover(function () {
timeout = setTimeout(function () {
$("#content.left1").css("display", "block");
}, 250);
},
function () {
clearTimeout(timeout);
$("#content.left1").css("display", "none");
});
});
Demo here.

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()
}