I want to create a button named Read More
Which will display some more content when clicked. When it displays the content, the button text should be changed to be Read less.
$(".read-more a").on("click", function() {
var $link = $(this);
var $content = $link.parent().prev("div.text-content");
var linkText = $link.text();
$content.toggleClass("short-text, full-text");
$link.text(getShowLinkText(linkText));
return false;
});
function getShowLinkText(currentText) {
var newText = '';
if (currentText.toUpperCase() === "READ MORE") {
newText = "Read More";
} else {
newText = "Read Less";
}
return newText;
}
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;
}
.read-more {
padding: 10px 0;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-container">
<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="read-more">
Read More
</div>
</div>
Does anyone know how to fix this issue?
Any advice and/or help would be really appreciated.
(Here a jfiddle what I have tried)
I updated your answer. Please try this.
https://jsfiddle.net/4cgbLne4/12/
<div class="text-container">
<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>
<button href="#" class="read-more">Read More</button>
</div>
</div>
$(".read-more").on("click", function() {
var $link = $(this);
var $content = $link.parent().prev("div.text-content");
var linkText = $link.text();
$content.toggleClass("short-text, full-text");
$link.text(getShowLinkText(linkText));
return false;
});
function getShowLinkText(currentText) {
var newText = '';
alert(currentText)
if (currentText.toUpperCase() === "READ MORE") {
newText = "Read Less";
} else {
newText = "Read More";
}
return newText;
}
Hope this will work for you.
I usually solve it without Javascript,
.text-container {
padding: 1em;
border: 3px double;
position: relative;
padding-bottom: 3em;
}
.text-container .read-more {
position: absolute;
bottom: .5em;
}
input.read-more-toggle { display: none; }
.read-more span { display: block; color: red; cursor: pointer; text-decoration: underline; }
.read-more span:last-child { display: none; }
input:checked + .read-more span:last-child { display: block; }
input:checked + .read-more span:first-child { display: none; }
.text-content {
overflow: hidden;
line-height: 1.5;
}
.read-more + .text-content {
max-height: 3em;
transition: max-height 1s;
}
input:checked + .read-more + .text-content {
max-height: 50em;
}
<div class="text-container">
<input type=checkbox id=more-text-toggle-1 class=read-more-toggle />
<label class="read-more" for="more-text-toggle-1">
<span>read more</span>
<span>read less</span>
</label>
<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>
You only have to switch the "more" / "less" in your function:
function getShowLinkText(currentText) {
var newText = '';
if (currentText.toUpperCase().trim() === "READ MORE") {
newText = "Read Less";
} else {
newText = "Read More";
}
return newText;
}
Fiddle: https://jsfiddle.net/4cgbLne4/5/
You can try this
HTML
<div class="text-container">
<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="read-more">
<button>Read More</button>
</div>
</div>
Jquery
$(".read-more button").on("click", function() {
var $content = $link.parent().prev("div.text-content");
$content.toggleClass("short-text, full-text");
if ($(this).text() == 'Read More')
$(this).text('Read Less');
else
$(this).text('Read More');
return false;
});
Example Fiddle - UPDATED
There is a mistake in toggling More and Less text:
$(".read-more a").on("click", function() {
var $link = $(this);
var $content = $link.parent().prev("div.text-content");
var linkText = $link.text();
$content.toggleClass("short-text, full-text");
$link.text(getShowLinkText(linkText));
});
function getShowLinkText(currentText) {
var newText = '';
if (currentText.toUpperCase() == "READ MORE") {
newText = "Read Less";
} else {
newText = "Read More";
}
return newText;
}
.short-text{color:#000000}
.full-text{color:#ff8800}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-container">
<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="read-more">
Read More
</div>
</div>
For <button> get text by .text() and set text by .html('text')
For <input type="button"> get text by .val() and set text by .val('text')
Just added one token into this and changed condition on click of a tag
var token = 1;
$(".read-more a").on("click", function() {
var $link = $(this);
var $content = $link.parent().prev("div.text-content");
var linkText = $link.text();
$content.toggleClass("short-text, full-text");
$link.text(getShowLinkText(linkText));
if(token == 1)
{
$(this).text("Read Less");
token = 0;
}
else
{
$(this).text("Read More");
token = 1;
}
return false;
});
Here is jsFiddle
Related
I would need the following:
On button click, the red circle should center in the middle of the
text box.
It should be based on the pixel position of the screen. (No nesting
with flexbox or something like that.)
It should work responsive.
Here is my approach:
$("button").click(function() {
$("#circle").css("left", middle_point_of_box);
$("#circle").css("right", middle_point_of_box);
});
#text {
background-color: lightgray;
width: 40%;
}
#circle {
width: 20vw;
height: 20vw;
background-color: red;
border-radius: 50%;
position: absolute;
top: 0; /* Middle Point of Text Box */
left: 0; /* Middle Point of Text Box */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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. 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. 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.</div>
<div id="circle"></div>
<button>Click me</button>
How is it possible to code that? I would be very thankful for help!
Just use a combination of jQuery's offset() and width()
let targetCenter = {
x: $('#text').offset().left + $('#text').width() / 2 - $('#circle').width() / 2,
y: $('#text').offset().top + $('#text').height() / 2 - $('#circle').height() / 2
}
$("button").click(function(e) {
$("#circle").css("left", targetCenter.x + 'px');
$("#circle").css("top", targetCenter.y + 'px');
});
#text {
background-color: lightgray;
width: 40%;
}
#circle {
width: 20vw;
height: 20vw;
background-color: red;
border-radius: 50%;
position: absolute;
top: 0;
/* Middle Point of Text Box */
left: 0;
/* Middle Point of Text Box */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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. 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. 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.</div>
<div id="circle"></div>
<button>Click me</button>
I'm trying to implement Read More button with animation. Animation working fine after the first click but on the first click, it seems that the animation method doesn't come into consideration.
JSFiddle link for the below code.
Here is my code:
var text = $('.content')
const originalHeight = text.height();
$(".show-more a").on("click", function() {
var $this = $(this);
var $content = $this.parent().prev("div.content");
var linkText = $this.text().toUpperCase();
var fullHeight = text[0].scrollHeight;
if (linkText === "SHOW MORE") {
linkText = "Show less";
$content.addClass('showContent').removeClass('hideContent');
text.animate({
'height': fullHeight
});
} else {
linkText = "Show more";
$content.addClass('hideContent').removeClass('showContent');
text.animate({
'height': originalHeight
});
};
$this.text(linkText);
});
div.text-container {
margin: 0 auto;
width: 75%;
}
.hideContent {
overflow: hidden;
line-height: 1em;
height: 2em;
}
.showContent {
line-height: 1em;
height: auto;
}
.content {
text-align: justify;
}
.show-more {
text-align: center;
display: inline;
float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-container">
<div class="content hideContent">
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>
try this:
var text = $('.content')
const originalHeight = text.height();
//======================
//add this line
text.css("height",originalHeight );
//======================
$(".show-more a").on("click", function() {
var $this = $(this);
var $content = $this.parent().prev("div.content");
var linkText = $this.text().toUpperCase();
var fullHeight = text[0].scrollHeight;
if (linkText === "SHOW MORE") {
linkText = "Show less";
$content.addClass('showContent').removeClass('hideContent');
text.animate({
'height': fullHeight
});
} else {
linkText = "Show more";
$content.addClass('hideContent').removeClass('showContent');
text.animate({
'height': originalHeight
});
};
$this.text(linkText);
});
div.text-container {
margin: 0 auto;
width: 75%;
transition: all 0.15s ease-out;
}
.hideContent {
overflow: hidden;
line-height: 1em;
height: 2em;
}
.showContent {
line-height: 1em;
height: auto;
}
.content {
text-align: justify;
}
.show-more {
text-align: center;
display: inline;
float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-container">
<div class="content hideContent">
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>
Javascript === is a case sensitive comparison. Your code is if (linkText === "SHOW MORE") where your main text is Show more. Thats all.
I'm trying to use this code i found on fiddle.
Original Fiddle Code Here
But when I use it in my website it does not work. I found this possible solution
Code is Working on Fiddle but not on Website
But it either did not work for my case, or I implemented it incorrectly. I'm very new so neither would surprise me. Thank you in advance for the help!
$(".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", 100);
} else {
linkText = "Show more";
$content.switchClass("showContent", "hideContent", 100);
};
$this.text(linkText);
});
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;
}
td {
width:200px;
border: solid 1px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-container">
<h1>Title goes here</h1>
<h2>Subtitle</h2>
</div>
<table class="flat-table flat-table-1" width="100%">
<tr style="background-color:#FFF;">
<td class="table-head">Name</td>
<td class="table-head">Review</td>
<td class="table-head">Rating</td>
</tr>
<tr>
<td class="name">John Doe</td>
<td class="review"> <div class="content hideContent">
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.
<p>Some more text</p>
<ul>
<li>Some more text</li>
<li>Some more text</li>
<li>Some more text</li>
</ul>
</div>
<div class="show-more">
Show more
</div></td>
<td class="rating">5</td>
</tr>
<tr>
<td class="name">John Doe</td>
<td class="review"> <div class="content hideContent">
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.
<p>Some more text</p>
<ul>
<li>Some more text</li>
<li>Some more text</li>
<li>Some more text</li>
</ul>
</div>
<div class="show-more">
Show more
</div></td>
<td class="rating">5</td>
</tr>
</table>
You forgot a Jquery extension.
As you can see in the image, the fiddle has jquery as well as the jquery ui extension. All you need to do is add
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
in your html after importing JQuery.
Here is a working snippet:
$(".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", 100);
} else {
linkText = "Show more";
$content.switchClass("showContent", "hideContent", 100);
};
$this.text(linkText);
});
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;
}
td {
width:200px;
border: solid 1px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
crossorigin="anonymous"></script>
<div class="text-container">
<h1>Title goes here</h1>
<h2>Subtitle</h2>
</div>
<table class="flat-table flat-table-1" width="100%">
<tr style="background-color:#FFF;">
<td class="table-head">Name</td>
<td class="table-head">Review</td>
<td class="table-head">Rating</td>
</tr>
<tr>
<td class="name">John Doe</td>
<td class="review"> <div class="content hideContent">
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.
<p>Some more text</p>
<ul>
<li>Some more text</li>
<li>Some more text</li>
<li>Some more text</li>
</ul>
</div>
<div class="show-more">
Show more
</div></td>
<td class="rating">5</td>
</tr>
<tr>
<td class="name">John Doe</td>
<td class="review"> <div class="content hideContent">
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.
<p>Some more text</p>
<ul>
<li>Some more text</li>
<li>Some more text</li>
<li>Some more text</li>
</ul>
</div>
<div class="show-more">
Show more
</div></td>
<td class="rating">5</td>
</tr>
</table>
switchClass() method is available only in jQuery UI, not present in jQuery.
jQuery UI 1.8.18 is included in the fiddle code and missing in yours.
Try including in your code.
<script type="text/javascript" src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
Hope this helps.
I need a simple read more/less example in pure javascript and CSS. How can I convert this jQuery example to pure Javascript?
https://jsfiddle.net/ngaffer/s75zj385/2/
I have several long paragraphs being generated on a page. In order to shorten the page to minimize scrolling, I want to hide the majority of each paragraph and display a link "read more". When the link is clicked the button will display the hidden text and change the link to "read less".
<section>
<div class="content hideContent">
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>
<a class="show-more" href="#">Show more</a>
</section>
<section>
<div class="content hideContent">
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>
<a class="show-more" href="#">Show more</a>
</section>
<script>
$("a.show-more").on("click", function() {
var $this = $(this);
var $content = $this.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);
});
</script>
<style>
.hideContent {
overflow: hidden;
line-height: 1em;
height: 2em;
}
.showContent {
line-height: 1em;
height: auto;
}
</style>
Here is a pure JS code that select anchors based on the class and with animation css trick:
var anchrorClassShow=document.getElementsByTagName('a');
for(var i=0;i<anchrorClassShow.length;i++){
if(anchrorClassShow[i].className!=='show-more'){
anchrorClassShow[i].remove();
}
}
for(var i=0;i<anchrorClassShow.length;i++){
anchrorClassShow[i].addEventListener('click', function(){
var parentDiv=this.parentElement;
if(parentDiv.children[0].className.match(/hideContent/g)){
parentDiv.children[0].className='content showContent';
}else{
parentDiv.children[0].className='content hideContent';
}
});
}
.hideContent {
max-height: 2em;
transition: max-height 0.15s linear;
overflow: hidden;
background: #d5d5d5;
}
.showContent {
max-height: 500px;
transition: max-height 0.35s linear;
}
<section>
<div class="content hideContent">
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>
<a class="show-more" href="#">Show more</a>
</section>
<section>
<div class="content hideContent">
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>
<a class="show-more" href="#">Show more</a>
</section>
A conversion like this isn't a very lengthy process.
Here is a very useful resource to know how to replace a common jquery code with plain (vanilla) javascript.
At the same time, I also took the liberty of modifying your javascript in a new fiddle.
var click_event = function() {
var linkText = this.innerHTML.toUpperCase();
if (linkText === "SHOW MORE") {
this.innerHTML = "Show less";
this.previousElementSibling.classList.remove("hideContent");
this.previousElementSibling.classList.add("showContent");
}
else {
this.innerHTML = "Show more";
this.previousElementSibling.classList.remove("showContent");
this.previousElementSibling.classList.add("hideContent");
}
};
var elements = document.getElementsByClassName("show-more");
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', click_event, false);
}
This code implements all the basic functionalities in vanilla JS. However, I have left out the 400ms time delay, which I think would be a very interesting exercise for you to work on. I hope this helps you in future events.
I'm making a Php webpage right now and would like to have a little "News" DIV on the right. that has auto scrolling vertical text as soon as the page loads. But, the below code not working in php page.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0.js"
integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo="
crossorigin="anonymous">
</script>
<style>
span
{
display:block;
width:350px;
word-wrap:break-word;
}
.display
{
height:200px;
border:none;
overflow: hidden;
padding:5;
}
</style>
</head>
<body onLoad="scroll()" style="background-color: black;">
<!---***************** Php Code Start ************************--->
<?php
error_reporting(E_ALL ^ E_DEPRECATED);
//********************* DB Configuration Code *********************
ob_start();
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'xxxx');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'MyDb');
$connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());
$database = mysql_select_db(DB_DATABASE) or die(mysql_error());
//************** Selection of Data *********************
$select=mysql_query("SELECT * FROM newsfeedtest order by created asc");
$i=1;
//************* Display Data *********************
while($userrow=mysql_fetch_array($select))
{
$id=$userrow['id'];
$usernews=$userrow['news'];
$created=$userrow['created'];
//******** Div Displays Data *******
echo '<div class="display" id="news" style="width:350px; margin-bottom:-20px;">
<!-------------------- News : --------------------------------->
<p style="color:#fff;">
<span style="color: #fff;font-size:17px;">'.$usernews.'</span> </p><br />
</div>';
}
//********************* End of Php Code *********************
?>
<script language="javascript">
i = 0
var speed = 1
function scroll()
{
i = i + speed
var div = document.getElementById("news")
div.scrollTop = i
if (i > div.scrollHeight - 160) {i = 0}
t1=setTimeout("scroll()",100)
}
</script>
</body>
</html>
Also, can it possible that on Mouseover to stop the scroll and on mouse out scrolling starts continue in a loop.
I've tried searching for the correct code, but nothing has worked thus far.
" I'm just so frustrated now ! "
Any help would be immensely appreciated!
Here's the most simple solution I can come up with - it will achieve what you want, and also adjust to the CSS code you define (so if you change your height in CSS, the script won't have to be altered).
var i = 0;
$(document).ready(function(){
var interval = setInterval(function () {
i += 4; // speed
$('#container').animate({ scrollTop: i }, 1);
if (i >= $('#container').prop('scrollHeight') - $('#container').height()) {
i = 0;
}
}, 100);
});
#container {
background-color: #000;
color: #fff;
height: 180px;
overflow: hidden;
padding: 5px 20px;
width: 350px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<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 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.</p>
<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 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.</p>
</div>
Note that I have set the "speed" to 4 for quicker reviewing of the result - change it to 1 for the outcome you wanted. I also put absolutely everything in it's correct place, meaning have no inline styles or inline scripts, which will be way easier to maintain in your project the more it grows.
Also, in order to wrap everything into a run-able snippet, I omitted the PHP code, but the generation is essentially the same as you've had it in your example, except you'll need the #container element around it for context.
// please add bootstrap.css & jquery.js in the same file folder //
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4" style="min-height:300px">
<ul id="marquee-vertical">
<li style="list-style-type:none">
Breaking News 1
<div class="row">
<div class="col-xs-4"><img src="logo1.png"/></div>
<div class="col-xs-8">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>
</li>
<li style="list-style-type:none">
Breaking News 2
<div class="row">
<div class="col-xs-4"><img src="logo1.png"/></div>
<div class="col-xs-8">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>
</li>
<li style="list-style-type:none">
Breaking News 3
<div class="row">
<div class="col-xs-4"><img src="logo1.png"/></div>
<div class="col-xs-8">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>
</li>
<li style="list-style-type:none">
<a href="" >Breaking News 4</a>
<div class="row">
<div class="col-xs-4"><img src="logo1.png"/></div>
<div class="col-xs-8">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>
</li>
</ul>
</div>
<div class="col-xs-4"></div>
</div>
</div>
<script type="text/javascript">
(function($, window, document, undefined){
var pluginName = "marquee",
defaults = {
enable : true,
direction: 'vertical',
itemSelecter : 'li',
delay: 1000,
speed: 1,
timing: 1,
mouse: true
};
function Widget(element, options) {
this.element = element;
this.settings = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.$element = $(this.element);
this.$wrapper = this.$element.parent();
this.$items = this.$element.children(this.settings.itemSelecter);
this.next = 0;
this.timeoutHandle;
this.intervalHandle
if(!this.settings.enable)return;
this.init();
}
Widget.prototype = {
init:function(){
var that = this;
var totalSize = 0;
$.each(this.$items, function(index, element){
totalSize += that.isHorizontal()
? parseInt($(element).outerWidth())
: parseInt($(element).outerHeight());
});
var elmentTotalSize = this.isHorizontal()
? this.$element.outerWidth
: this.$element.outerHeight;
if(totalSize < elmentTotalSize)return;
this.$wrapper.css({
position : 'relative',
overflow : 'hidden'
});
this.$element.css({
position : 'absolute',
top : 0,
left: 0
});
this.$element.css(this.isHorizontal() ? 'width' : 'height', '1000%');
this.cloneAllItems();
if(this.settings.mouse)
this.addHoverEvent(this);
this.timer(this);
},
timer : function(that){
this.timeoutHandle = setTimeout(function(){that.play(that)}, this.settings.delay);
},
play : function(that){
this.clearTimeout();
var target = 0;
for(var i = 0; i <= this.next; i++){
target -= this.isHorizontal()
? parseInt($(this.$items.get(this.next)).outerWidth())
: parseInt($(this.$items.get(this.next)).outerHeight());
}
this.intervalHandle = setInterval(function(){that.animate(target)},this.settings.timing);
},
animate : function(target){
var mark = this.isHorizontal() ? 'left' : 'top';
var present = parseInt(this.$element.css(mark));
if(present > target)
{
if(present - this.settings.speed <= target)
{
this.$element.css(mark, target);
}else
this.$element.css(mark, present - this.settings.speed);
}else{
this.clearInterval();
if(this.next + 1 < this.$items.length){
this.next++;
}else{
this.next = 0;
this.$element.css(mark,0);
}
this.timer(this);
}
},
isHorizontal : function(){
return this.settings.direction == 'horizontal';
},
cloneAllItems: function(){
this.$element.append(this.$items.clone());
},
clearTimeout : function(){
clearTimeout(this.timeoutHandle);
},
clearInterval : function(){
clearInterval(this.intervalHandle);
},
addHoverEvent : function(that){
this.$wrapper
.mouseenter(function(){
that.clearInterval()
that.clearTimeout();
})
.mouseleave(function(){
that.play(that);
});
}
}
$.fn[pluginName] = function(options) {
return this.each(function() {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new Widget(this, options));
}
});
};
})(jQuery, window, document);
$(function(){
$('#marquee-vertical').marquee();
});
</script>
</body>
</html>
I use marquee with some its properties and the problem is solved !
<marquee behavior="scroll" height="50px" scrollamount="1" direction="up" onmouseover="this.stop();" onmouseout="this.start();">
<!---*********************** Php Code Start ***************************--->
<?php
//********** Php code goes here ***********
?>
<!---******************** Php Code End ********************************--->
</marquee>