Develop Reference

Distribute text with right-to-left script evenly in 15 lines inside its container

I want to display some text in 15 rows with full width and height regardless of which device or browser you view the page. How to achieve this using Html, CSS and JS ?
Please see screen shots
This is my screen shot which it has more than 15 rows and the last line is not full width.
.aya {
direction: rtl !important;
font-family: "uthmanic","Traditional Arabic", "Montserrat","sans-serif","Times New Roman";
font-weight: normal;
font-size:25px;
}
.ayaNumber {
font-size: 15px;
white-space: nowrap;
color: #050;
cursor: pointer;
font-weight: normal;
padding-left: 5px;
padding-right: 5px;
}
<div class="card h-100 card-body " dir="rtl" align="justify"
style="direction: rtl !important; background-color:#f7fce3;border-color: #f7fce3;">
<div class="card-body">
<!-- using 'text' class below -->
<p class="card-text text" align="justify" style="text-align-last: right;text-align: justify;" >
<span class="aya">
مَثَلُهُمْ كَمَثَلِ ٱلَّذِى ٱسْتَوْقَدَ نَارًا فَلَمَّآ أَضَآءَتْ مَا حَوْلَهُۥ ذَهَبَ ٱللَّهُ بِنُورِهِمْ وَتَرَكَهُمْ فِى ظُلُمَٰتٍ لَّا يُبْصِرُونَ﴿17﴾صُمٌّۢ بُكْمٌ عُمْىٌ فَهُمْ لَا يَرْجِعُونَ﴿18﴾أَوْ كَصَيِّبٍ مِّنَ ٱلسَّمَآءِ فِيهِ ظُلُمَٰتٌ وَرَعْدٌ وَبَرْقٌ يَجْعَلُونَ أَصَٰبِعَهُمْ فِىٓ ءَاذَانِهِم مِّنَ ٱلصَّوَٰعِقِ حَذَرَ ٱلْمَوْتِ ۚ وَٱللَّهُ مُحِيطٌۢ بِٱلْكَٰفِرِينَ﴿19﴾يَكَادُ ٱلْبَرْقُ يَخْطَفُ أَبْصَٰرَهُمْ ۖ كُلَّمَآ أَضَآءَ لَهُم مَّشَوْا۟ فِيهِ وَإِذَآ أَظْلَمَ عَلَيْهِمْ قَامُوا۟ ۚ وَلَوْ شَآءَ ٱللَّهُ لَذَهَبَ بِسَمْعِهِمْ وَأَبْصَٰرِهِمْ ۚ إِنَّ ٱللَّهَ عَلَىٰ كُلِّ شَىْءٍ قَدِيرٌ﴿20﴾يَٰٓأَيُّهَا ٱلنَّاسُ ٱعْبُدُوا۟ رَبَّكُمُ ٱلَّذِى خَلَقَكُمْ وَٱلَّذِينَ مِن قَبْلِكُمْ لَعَلَّكُمْ تَتَّقُونَ﴿21﴾ٱلَّذِى جَعَلَ لَكُمُ ٱلْأَرْضَ فِرَٰشًا وَٱلسَّمَآءَ بِنَآءً وَأَنزَلَ مِنَ ٱلسَّمَآءِ مَآءً فَأَخْرَجَ بِهِۦ مِنَ ٱلثَّمَرَٰتِ رِزْقًا لَّكُمْ ۖ فَلَا تَجْعَلُوا۟ لِلَّهِ أَندَادًا وَأَنتُمْ تَعْلَمُونَ﴿22﴾وَإِن كُنتُمْ فِى رَيْبٍ مِّمَّا نَزَّلْنَا عَلَىٰ عَبْدِنَا فَأْتُوا۟ بِسُورَةٍ مِّن مِّثْلِهِۦ وَٱدْعُوا۟ شُهَدَآءَكُم مِّن دُونِ ٱللَّهِ إِن كُنتُمْ صَٰدِقِينَ﴿23﴾فَإِن لَّمْ تَفْعَلُوا۟ وَلَن تَفْعَلُوا۟ فَٱتَّقُوا۟ ٱلنَّارَ ٱلَّتِى وَقُودُهَا ٱلنَّاسُ وَٱلْحِجَارَةُ ۖ أُعِدَّتْ لِلْكَٰفِرِينَ﴿24﴾
</span>
</p>
</div>
<footer style="text-align: center;">4</footer>
</div>
Below is what I want to achieve (15 rows, full width and height)

You can use a line clamp as well as vw in a font size to force it to 15 lines and also shrink the text size so it will fit in 15 lines or less. Please note though this is only good for so much text, you can't shrink the font size of an entire book to fit into 15 lines. But hopefully its good enough for what you're looking for.
here's the jsfiddle of an example so you can play with it by stretching and shrinking the output box: https://jsfiddle.net/drm6sqfx/
body {
margin: 20px;
}
.text {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 15; /* number of lines to show */
-webkit-box-orient: vertical;
font-size: 5vw;
}
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.

CSS transition animation order issue for accordion

I have exampled below two div boxes with <h4> headers and followed with <p> with text. In an accordion style, I want to click each title and see the text appear, I've done this by setting the text div container box to max-height: 0; and opacity: 0; then max height a value and opacity 1 on click.
My issue is that I expect the animation to happen simultaneously for both boxes (one that slides up and hides, the other that slides down and appears), However, I get the animation running in order slide up and disappear forwarded by slide down and appear.
How can I get them both at the same time?
document.addEventListener('DOMContentLoaded', function() {
// main click handler for the whole page
document.addEventListener('click', function(event) {
var clickedElem = event.target;
if (clickedElem.matches(".slide-card h4")) {
var activeCards = document.querySelectorAll(".card-active");
if (activeCards) {
for (var i = 0; i < activeCards.length; i++) {
if (activeCards[i]) toggle(activeCards[i], "card-active");
}
}
toggle(clickedElem.parentNode, "card-active");
}
});
});
function toggle(el, elClass) {
if (el.matches("." + elClass)) {
el.classList.remove(elClass);
} else {
el.classList.add(elClass);
}
}
h4 {
cursor: pointer !important;
}
.slide-card {
border: 1px solid white;
padding: 1em;
}
.animated-slides-cards {
background: pink;
padding: 1em;
}
.card-body {
opacity: 0;
max-height: 0;
transition: all 0.75s ease-out;
}
.card-active .card-body {
opacity: 1;
max-height: 400px;
}
<div class="animated-slides-cards">
<div data="0" class="slide-card block-padding margin-bottom-05x card-active">
<h4 class="blue">Harness the power of the crowd</h4>
<div class="grey card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mattis eros vitae metus sodales eget suscipit purus rhoncus. Proin ultrices gravida dolor, non porttitor enim interdum vitae. Integer feugiat lacinia tincidunt. Nulla laoreet tristique
tristique. Sed elementum justo a nisl elementum sit amet accumsan nisi tempor. Nulla quis eros et massa dignissim imperdiet a vitae purus.</p>
</div>
</div>
<div data="1" class="slide-card block-padding margin-bottom-05x">
<h4 class="blue">Slots straight into your systems</h4>
<div class="grey card-body">
<p>Using simple APIs, SmartCrowd™ connects to your systems and allocates tasks to ambassadors using your existing digital channels. You can opt for full integration or simply use Limitless Live Messenger on your website to maintain a single customer
view.</p>
</div>
</div>
</div>

How to have one element showing on page load when using a script that shows div onclick of link

I have a div that will show on click of a link, but I need the first element to be showing when the page loads. Right now, it is just a blank space.
Also, the page scrolls to the div and makes it be at the top of the page, how do i prevent that from happening?
Here is the html,
<a href="#expe1" class="fa fa fa-times closer" >Link1</a>
<div class="resume" id="expe1">Open Block 1</div>
<a href="#expe2" class="fa fa fa-times closer" >Link2</a>
<div class="resume" id="expe2">Open Block 2</div>
<a href="#expe3" class="fa fa fa-times closer" >Link3</a>
<div class="resume" id="expe3">Open Block 3</div> here
and here is the javascript
$('.resume') .hide()
$('a[href^="#"]').on('click', function(event) {
$('.resume') .hide()
var target = $(this).attr('href');
$('.resume'+target).toggle();
});

Add .show() in your JQuery like this
$('.resume') .hide()
$('#expe1').show();
$('a[href^="#"]').on('click', function(event) {
$('.resume') .hide()
var target = $(this).attr('href');
$('.resume'+target).toggle();
});
Sample fiddle..

For the first part of your question (showing the first div on load) you could do :
$(function() {
$('.resume').hide()
$('a[href^="#"]').on('click', function(event) {
$('.resume') .hide()
var target = $(this).attr('href');
$('.resume'+target).toggle();
});
$("#expe1").toggle();
});
Then I'm not sure what you mean by 'makes it be at the top of the page'. Keep in mind that using .hide() actually takes the element out of the flow of the page as far as I know, which means that from your browser's standpoint the hidden div simply do not exists (not rendered at all). So the browser only "sees" one div, and naturally puts it at the top of the page.
EDIT:
Jquery's .hide() is equivalent to the css {display: none}, which takes the element out of the page (thus the pretty strange layout with divs always being on top of the page). If you want to be able to toggle on/off your divs while keeping the original layout, you can instead use a css class of {visibility: hidden} and toggle it on/off when clicked.
css
.hidden {
visibility: hidden;
}
html
Link1
<div class="resume" id="expe1">Open Block 1</div>
Link2
<div class="resume hidden" id="expe2">Open Block 2</div>
Link3
<div class="resume hidden" id="expe3">Open Block 3</div>
javascript
$(function() {
$('a[href^="#"]').on('click', function(event) {
var target = $(this).attr('href');
if ($('.resume' + target).hasClass('hidden')) {
$('.resume' + target).removeClass('hidden');
} else {
$('.resume' + target).addClass('hidden');
}
});
});
=> Working fiddle <=

This is how I would do it. I would keep it simple.
1.Change the href links to spans. This will keep the page from flying around.
2. Use css to hide all .resume classes.
3. Make the target of the toggle the next closest .resume so you can get rid of some of the id in you code.
4. Before your click function show the first instance of .resume class.
5. I added a .container div just for house keeping. You dont need it.
$('.resume:first').show(); // show first occurance of the .resume
$('.closer').on('click', function() {
$('.resume').hide(); // clear all .resume classes
var target = $(this).next(".resume"); // get the next div nearest the link.
$(target).toggle(); // toggle the closest div
});
.resume {
display: none;
}
.closer {
cursor: pointer;
width: 100%;
background: #888888;
}
.container {
width: 500px;
background: #CCC;
margin: 4px;
}
<script src="https://use.fontawesome.com/1c5ea170a0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<span class="fa fa fa-times closer">Link1</span>
<div class="resume">Open Block 1<br>
Lorem ipsum dolor sit amet, tortor amet dui vestibulum wisi pellentesque, ipsum fusce suspendisse sed. Donec elit dolor elit adipiscing nec ornare, convallis non non in rutrum pede, et etiam dignissim pellentesque etiam, leo phasellus metus. Id habitant ullamcorper, pede vehicula quisque maecenas pede, ultricies lectus.
</div>
</div>
<div class="container">
<span class="fa fa fa-times closer">Link2</span>
<div class="resume">Open Block 2</div>
</div>
<div class="container">
<span class="fa fa fa-times closer">Link3</span>
<div class="resume">Open Block 3<br>
Penatibus tellus non, volutpat lectus ac vitae, tempus expedita vitae nec, suspendisse nonummy eget tellus pretium penatibus. Neque a. Erat tellus eu sit, praesent donec per quis rutrum, placerat neque laoreet. Quisque nascetur est hymenaeos sagittis, mauris id, odio convallis sem amet, penatibus ligula natoque pede, nunc pellentesque in turpis quis leo mus.
</div>
</div>

Selecting *specific* element in jQuery

I'm new to jQuery and I'd like to add a class to an individual image by hovering over a button - something I thought I knew how to do, turns out I don't.
The problem being I have several .service sections, each with their own .service button. Therefore, the end result is as expected: when I hover over the button, ALL the .service-image are affected. I thought I could resolve this by using $(this) or find() but I just cant figure it out...
$(".service button").hover(function() {
$(".service-image").toggleClass("raise");
});
.raise {
transform: translateY(-10px);
transition: all 0.2s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="service home-service1">
<div class="service-image">
<img src="images/phone.png" alt="" />
</div>
<div class="service-title">
<h2>Kiosk Renovation</h2>
</div>
<div class="service-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat quam sit amet vehicula auctor. Aliquam vel orci hendrerit, vestibulum ligula laoreet, faucibus mi.</p>
</div>
<button class="outline-on-dark">Explore</button>
</div>

Since the <button> element is a sibling of the .service-image you're trying to target (i.e. they both share the same .service parent), you can use siblings(). By specifying the .service-image selector in the siblings() function, you can be sure to only ever target the .service-image inside of the .service element.
$('.service button').hover(function() {
$(this).siblings('.service-image').toggleClass('raise');
});
.raise {
transform: translateY(-10px);
transition: all 0.2s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="service home-service1">
<div class="service-image">
<img src="images/phone.png" alt="" />
</div>
<div class="service-title">
<h2>Kiosk Renovation</h2>
</div>
<div class="service-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat quam sit amet vehicula auctor. Aliquam vel orci hendrerit, vestibulum ligula laoreet, faucibus mi.</p>
</div>
<button class="outline-on-dark">Explore</button>
</div>

Try:
$('service button').on('hover', function(e){
$(this).siblings('.service-image').toggleClass('raise');
});
Your thinking was right, as both button and specific image share the same parent.

JavaScript animate resizing div

I'm trying to put a small animation on a page. I've got 2 divs side by side, the second of which has its content called via Ajax, so the div height varies without page refresh.
<div id="number1" style="float:left; padding-bottom:140px">Static content, 200px or so</div>
<div id="number2" style="float:left">AJAX content here</div>
<div style="clear:left"></div>
<img src="image" margin-top:-140px" />
This basically gives me a 2 column layout, and the image nests up underneath the left hand column no matter what the height. All good!
The thing I'm trying to do though is animate the transition of the image when the page height changes thanks to incoming Ajax content. At present the image jerks around up and down, I'd quite like to have it smoothly glide down the page.
Is this possible? I'm not really into my JavaScript, so I'm not sure how to do this. I'm using the jQuery library on the site, so could that be a way forward?

OK, I've just put together a very quick and dirty example.
Here's the HTML:
<body>
Add content
<div id="outerContainer">
<div id="left" class="col">
<p>Static content</p>
<img src="images/innovation.gif" width="111px" height="20px">
</div>
<div id="right" class="col">
<p>Ajax content</p>
</div>
</div>
</body>
The jQuery used is here
jQuery(function($){
var addedHTML = "<p class='added'>Lorem ipsum dolor sit amet, Nunc consectetur, magna quis auctor mattis, lorem neque lobortis massa, ac commodo massa sem sed nunc. Maecenas consequat consectetur dignissim. Aliquam placerat ullamcorper tristique. Sed cursus libero vel magna bibendum luctus. Nam eleifend volutpat neque, sed tincidunt odio blandit luctus. Morbi sit amet metus elit. Curabitur mollis rhoncus bibendum. Phasellus eget metus eget mi porttitor lacinia ac et augue. Nulla facilisi. Nam magna turpis, auctor vel vehicula vitae, tincidunt eget nisl. Duis posuere diam lacus.</p>";
$("#addContent").click(function(e){
$("#right").append(addedHTML);
var rightHeight = $("#right").height();
//Animate the left column to this height
$("#left").animate({
height: rightHeight
}, 1500);
});});
And CSS:
#outerContainer {
position: relative;
border: 1px solid red;
margin: 20px auto 0;
overflow: hidden;
width: 400px;}
.col {
width: 180px;
display: inline;
padding: 0 0 40px;}
#left {
float: left;
border: 1px solid cyan;
position: relative;}
#left img {
position: absolute;
bottom: 0;
left: 0;}
#right {
position: absolute;
top: 0;
left: 180px;
border: 1px solid green;}
#addContent {
text-align: center;
width: 100px;
margin: 20px auto 0;
display: block;}
I have added a button just to add some 'Ajax' content. When you do this it grabs the new height of the div and animates to that height. You could add some easing to the animation / change the speed to make it a little more polished.
I hope this helps.

Maybe you could use a container around the content divs (with overflow hidden) and resize that one according to the height of the contents, thus achieving what you're trying to do?

I agree with the answer above. You could apply the image as a background image to the container then animate the container. That way the background image will move down with the container (assuming you anchor it to the bottom that is!)