I have a code for the footer.php
When I add it more / less works but when I try to edit pages with Elementor or Elementor it doesn't work.
I get stuck in the Elementor loading screen as soon as I have the code in the footer.php.
If I remove the code from footer.php, Elementor works again.
What can I do to make both work at the same time?
in snippert it doesn't work but on my side it does hmm..
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
function AddReadMore() {
//This limit you can set after how much characters you want to show Read More.
var carLmt = 140;
// Text to show when text is collapsed
var readMoreTxt = "... <span>More</span>";
// Text to show when text is expanded
var readLessTxt = " <span class='cless'>Less</span>";
//Traverse all selectors with this class and manupulate HTML part to show Read More
$(".addReadMore").each(function() {
if ($(this).find(".firstSec").length)
return;
var allstr = $(this).text();
if (allstr.length > carLmt) {
var firstSet = allstr.substring(0, carLmt);
var secdHalf = allstr.substring(carLmt, allstr.length);
var strtoadd = firstSet + "<span class='SecSec'>" + secdHalf + "</span><span class='readMore' title='Click to Show More'>" + readMoreTxt + "</span><span class='readLess' title='Click to Show Less'>" + readLessTxt + "</span>";
$(this).html(strtoadd);
}
});
//Read More and Read Less Click Event binding
$(document).on("click", ".readMore,.readLess", function() {
$(this).closest(".addReadMore").toggleClass("showlesscontent showmorecontent");
});
}
$(function() {
//Calling function after Page Load
AddReadMore();
});
</script>
<style>
.addReadMore.showlesscontent .SecSec,
.addReadMore.showlesscontent .readLess {
display: none;
}
.addReadMore.showmorecontent .readMore {
display: none;
}
.addReadMore .readMore,
.addReadMore .readLess {
margin-left: 2px;
color: #242424;
cursor: pointer;
}
.addReadMore .readMore span,
.addReadMore .readLess span {text-decoration:underline;}
.addReadMoreWrapTxt.showmorecontent .SecSec,
.addReadMoreWrapTxt.showmorecontent .readLess {
display: block;
}
/* span.cless {
display: block;
text-align: center;
}*/
</style>
<div class="addReadMore showlesscontent">A strong, masculine fragrance, Dylan Blue encapsulates the sensual scents of the Mediterranean. The fragrance bold ambrox notes, refreshed with hints of bergamot and grapefruit. The earthy and citrusy olfactory notes are enveloped with black pepper, papyrus wood and incense, along with mineral musk, tonka beans and saffron. The bold perfume is stored in a blue, geometric bottle enriched with gold tone accents, evoking the Mediterranean Sea and sand.</div>
I have some old code that I am trying to convert to divs. It contains frames that have no target src, just JavaScript to generate a page.
Below is the code...
var editboxHTML =
'<html class="expand close">' +
'<head>' +
'<style type="text/css">' +
'.expand { width: 100%; height: 100%; }' +
'.close { border: none; margin: 0px; padding: 0px; }' +
'html,body { overflow: hidden; }' +
'<\/style>' +
'<\/head>' +
'<body class="expand close" onload="document.f.ta.focus(); document.f.ta.select();">' +
'<form class="expand close" name="f">' +
'<textarea class="expand close" name="ta" wrap="hard" spellcheck="false">' +
'<\/textarea>' +
'<\/form>' +
'<\/body>' +
'<\/html>';
var defaultStuff = 'This top frame is where you put your code.';
var extraStuff = '';
var old = '';
function init() {
window.editbox.document.write(editboxHTML);
window.editbox.document.close();
window.editbox.document.f.ta.value = defaultStuff;
update();
}
function update() {
var textarea = window.editbox.document.f.ta;
var d = dynamicframe.document;
if (old != textarea.value) {
old = textarea.value;
d.open();
d.write(old);
if (old.replace(/[\r\n]/g, '') == defaultStuff.replace(/[\r\n]/g, ''))
d.write(extraStuff);
d.close();
}
window.setTimeout(update, 150);
}
<frameset onload="init();" rows="50%,50%" resizable="no">
<frame name="editbox" src="javascript:'';">
<frame name="dynamicframe" src="javascript:'';">
</frameset>
This code has a user input box at the top to input HTML code into, and the bottom displays what that code would look like in a browser.
How would I manipulate this code to work with divs instead of frames, so I can include extra styling, and so that it is not fully depreciated in HTML5.
If your answer includes AJAX, please can you explain it as I am not familiar with that coding.
EDIT: If there is no div alternative, is there an iframe alternative?
Answer Updated
CSS Fixed
Error fixed
Jquery way:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var editboxHTML =
'<html class="expand close">' +
'<head>' +
'<style type="text/css">' +
'.expand { width: 100%; height: 50%; }' +
'.close { border: none; margin: 0px; padding: 0px; }' +
'html,body { overflow: hidden; }' +
'<\/style>' +
'<\/head>' +
'<body class="expand close">' +
'<form class="expand close" name="f">' +
'<textarea class="expand close" name="ta" wrap="hard" spellcheck="false">qweqwe' +
'<\/textarea>' +
'<\/form>' +
'<\/body>' +
'<\/html>';
var defaultStuff = 'This top frame is where you put your code.';
var extraStuff = '';
var old = '';
function init() {
$("#editbox").html(editboxHTML);
$("#editbox form[name='f'] [name='ta']").focus();
$("#editbox form[name='f'] [name='ta']").val(defaultStuff);
update();
}
function update() {
var textarea = $("#editbox form[name='f'] [name='ta']");
var d = $("#dynamicframe");
if (old != textarea.val()) {
old = textarea.val();
if (old != undefined){
d.html(old);
if (old.replace(/[\r\n]/g, '') == defaultStuff.replace(/[\r\n]/g, '')){
d.append(extraStuff);
}
}
else{
d.html("old undefined");
}
}
setTimeout("update()", 150);
}
</script>
<button onclick="init()">EDIT</button>
<div id="editbox"></div>
<div id="dynamicframe"></div>
you can just create one div tag with id say <div id='editbox' /> and add one line code in your update function document.getElementById("editbox").innerHTML=editboxHTML;
My goal is to have a div that shows content and have a box shadow once clicked. Then I want to click on the div again to hide the content and box shadow. All is working great except for the box shadow that won't be hidden once its been clicked on in my second function that sets it to none. Why will this not work?
The HTML:
<div class="col-md-4 top" id="time">
<div class="clickme" id="clickme" onclick="clickme();
return false;">
<p>Click here for the time and date!</p>
</div>
</div>
The JavaScript:
function clickme(){
document.getElementById("clickme").style.display = 'none';
document.getElementById("time").style.boxShadow = "inset 6em 6em 6em #3B3130";
document.getElementById('time').innerHTML = "<h2 onclick='revert();''>It is " + theTime + " and the date is " + theDate + "</h2>";
}
function revert(){
document.getElementById('time').innerHTML = "";
document.getElementById("clickme").style.display = 'inline';
document.getElementById("time").style.boxShadow = 'none';
}
It's because you "destroy" the div #clickme when you modify the inner HTML of its parent.
See it working just fine when I moved the elements a bit:
function clickme() {
var theTime = 'some time';
var theDate = 'some date';
document.getElementById("clickme").style.display = 'none';
document.getElementById("time").style.boxShadow = "inset 6em 6em 6em #3B3130";
document.getElementById('time').innerHTML = "<h2 onclick='revert();''>It is " + theTime + " and the date is " + theDate + "</h2>";
}
function revert() {
document.getElementById('time').innerHTML = "";
document.getElementById("clickme").style.display = 'inline';
document.getElementById("time").style.boxShadow = 'none';
}
<div class="col-md-4 top" id="time"></div>
<div class="clickme" id="clickme" onclick="clickme();
return false;">
<p>Click here for the time and date!</p>
</div>
And don't forget - stuff like that is usually done using classes, not by applying styles directly.
#Shoms already identified the error in your code but I just want to give you a little more direction. I find it useful to move logic into the CSS wherever possible and just use javascript to add and remove classes. The advantage here is that you can easily fiddle with the CSS to change the look in different states without changing the javascript. Here is a possible solution.
var box = document.getElementById("box");
box.onclick = function() {
if (box.className.indexOf("clicked") == -1) {
box.className = "clicked";
} else {
box.className = "";
}
}
#box #time {
display: none;
}
#box.clicked {
box-shadow: 1em black;
}
#box.clicked #firstMessage {
display: none;
}
#box.clicked #time {
display: block;
}
<div id="box">
<p id="firstMessage">Click here for the time and date!</p>
<p id="time">Time to get a watch!</p>
</div>
Try this
document.getElementById("time").style.boxShadow = null;
I have a table with two columns, the second one sometimes contains big text so I want to show only the first 100 characters and put a show more link to display the remaining text. You can see here what Table I am working on http://jsfiddle.net/j11mj21x/.
For that I am using a code provided in this link (http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/), I put it in a file show_less_more.js :
(function($) {
$.fn.shorten = function (settings) {
var config = {
showChars: 100,
ellipsesText: "...",
moreText: "more",
lessText: "less"
};
if (settings) {
$.extend(config, settings);
}
$(document).off("click", '.morelink');
$(document).on({click: function () {
var $this = $(this);
if ($this.hasClass('less')) {
$this.removeClass('less');
$this.html(config.moreText);
} else {
$this.addClass('less');
$this.html(config.lessText);
}
$this.parent().prev().toggle();
$this.prev().toggle();
return false;
}
}, '.morelink');
return this.each(function () {
var $this = $(this);
if($this.hasClass("shortened")) return;
$this.addClass("shortened");
var content = $this.html();
if (content.length > config.showChars) {
var c = content.substr(0, config.showChars);
var h = content.substr(config.showChars, content.length - config.showChars);
var html = c + '<span class="moreellipses">' + config.ellipsesText + ' </span><span class="morecontent"><span>' + h + '</span> ' + config.moreText + '</span>';
$this.html(html);
$(".morecontent span").hide();
}
});
};
})(jQuery);
$(document).ready(function(){$(".descriptionText").shorten();});
I am using it like this:
<script src="show_less_more.js"></script>"
The HTML is like this for every row:
<tr>
<th>
course1
</th>
<td> <div class="descriptionText">Description of the course</div></td>
</tr>
I have also added the CSS for the more and less links:
a {
color: #0254EB
}
a:visited {
color: #0254EB
}
a.morelink {
text-decoration:none;
outline: none;
}
.morecontent span {
display: none;
}
When I do this in sfiddle it works pretty good as you can see here http://jsfiddle.net/j11mj21x/2/
However, I get nothing when rendering my table with python.
I think the problem is that I don't succeed to load my JS page into the html page, because when I click on it it give nothing.
Here is what is rendered in my html page:
....
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"><!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"><!-- Latest compiled and minified JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">
</script><script src="showLessMore.js"></script>
....
Can anyone tell me what could be the problem behind this because I have the "show_less_more.js" in the same folder as the file generator which in python?
Thank you in advance !
Here's a simple example of doing this relying more on CSS.
$(function() {
$('a').click(function() {
$('div').removeClass('ellipsis');
});
});
div {
border: solid 1px orange;
width: 200px;
overflow: hidden;
}
.ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='ellipsis'>Some really really long text that just is way too long so we must use ellipses to shorten it until the user wants to see it all.</div>
<br>
<a href='#'>Show All</a>
I am needing to create a show more/less text function, but with just JavaScript and HTML.. I can't use any additional libraries such as jQuery and it can't be done with CSS. The sample code I have added displays the 'more' text, but not the 'less'.
If someone could point me in the right direction, it would be much appreciated.
I've spent the majority of the day frying my brain over this, as its clearly not the modern way to do it, however, my HTML is:
<html>
<head>
<script type="text/javascript" src="moreless.js"></script>
</head>
<body>
Lorem ipsum dolor sit amet
<p>
<p id="textarea"><!-- This is where I want to additional text--></div>
</p>
<a onclick="showtext('text')" href="javascript:void(0);">See More</a>
<p>
Here is some more text
</body>
</html>
and my JavaScript is (moreless.js):
function showtext()
{
var text="Here is some text that I want added to the HTML file";
document.getElementById("textarea").innerHTML=text;
}
My answer is similar but different, there are a few ways to achieve toggling effect. I guess it depends on your circumstance. This may not be the best way for you in the end.
The missing piece you've been looking for is to create an if statement. This allows for you to toggle your text.
More on if statements here.
JSFiddle: http://jsfiddle.net/8u2jF/
Javascript:
var status = "less";
function toggleText()
{
var text="Here is some text that I want added to the HTML file";
if (status == "less") {
document.getElementById("textArea").innerHTML=text;
document.getElementById("toggleButton").innerText = "See Less";
status = "more";
} else if (status == "more") {
document.getElementById("textArea").innerHTML = "";
document.getElementById("toggleButton").innerText = "See More";
status = "less"
}
}
With some HTML changes, you can absolutely achieve this with CSS:
Lorem ipsum dolor sit amet
<p id="textarea">
<!-- This is where I want to additional text-->
All that delicious text is in here!
</p>
<!-- the show/hide controls inside of the following
list, for ease of selecting with CSS -->
<ul class="controls">
<li class="show">Show</li>
<li class="hide">Hide</li>
</ul>
<p>Here is some more text</p>
Coupled with the CSS:
#textarea {
display: none; /* hidden by default */
}
#textarea:target {
display: block; /* shown when a link targeting this id is clicked */
}
#textarea + ul.controls {
list-style-type: none; /* aesthetics only, adjust to taste, irrelevant to demo */
}
/* hiding the hide link when the #textarea is not targeted,
hiding the show link when it is selected: */
#textarea + ul.controls .hide,
#textarea:target + ul.controls .show {
display: none;
}
/* Showing the hide link when the #textarea is targeted,
showing the show link when it's not: */
#textarea:target + ul.controls .hide,
#textarea + ul.controls .show {
display: inline-block;
}
JS Fiddle demo.
Or, you could use a label and an input of type="checkbox":
Lorem ipsum dolor sit amet
<input id="textAreaToggle" type="checkbox" />
<p id="textarea">
<!-- This is where I want to additional text-->
All that delicious text is in here!
</p>
<label for="textAreaToggle">textarea</label>
<p>Here is some more text</p>
With the CSS:
#textarea {
/* hide by default: */
display: none;
}
/* when the checkbox is checked, show the neighbouring #textarea element: */
#textAreaToggle:checked + #textarea {
display: block;
}
/* position the checkbox off-screen: */
input[type="checkbox"] {
position: absolute;
left: -1000px;
}
/* Aesthetics only, adjust to taste: */
label {
display: block;
}
/* when the checkbox is unchecked (its default state) show the text
'Show ' in the label element: */
#textAreaToggle + #textarea + label::before {
content: 'Show ';
}
/* when the checkbox is checked 'Hide ' in the label element; the
general-sibling combinator '~' is required for a bug in Chrome: */
#textAreaToggle:checked ~ #textarea + label::before {
content: 'Hide ';
}
JS Fiddle demo.
Try to toggle height.
function toggleTextArea()
{
var limitedHeight = '40px';
var targetEle = document.getElementById("textarea");
targetEle.style.height = (targetEle.style.height === '') ? limitedHeight : '';
}
This is my pure HTML & Javascript solution:
var setHeight = function (element, height) {
if (!element) {;
return false;
}
else {
var elementHeight = parseInt(window.getComputedStyle(element, null).height, 10),
toggleButton = document.createElement('a'),
text = document.createTextNode('...Show more'),
parent = element.parentNode;
toggleButton.src = '#';
toggleButton.className = 'show-more';
toggleButton.style.float = 'right';
toggleButton.style.paddingRight = '15px';
toggleButton.appendChild(text);
parent.insertBefore(toggleButton, element.nextSibling);
element.setAttribute('data-fullheight', elementHeight);
element.style.height = height;
return toggleButton;
}
}
var toggleHeight = function (element, height) {
if (!element) {
return false;
}
else {
var full = element.getAttribute('data-fullheight'),
currentElementHeight = parseInt(element.style.height, 10);
element.style.height = full == currentElementHeight ? height : full + 'px';
}
}
var toggleText = function (element) {
if (!element) {
return false;
}
else {
var text = element.firstChild.nodeValue;
element.firstChild.nodeValue = text == '...Show more' ? '...Show less' : '...Show more';
}
}
var applyToggle = function(elementHeight){
'use strict';
return function(){
toggleHeight(this.previousElementSibling, elementHeight);
toggleText(this);
}
}
var modifyDomElements = function(className, elementHeight){
var elements = document.getElementsByClassName(className);
var toggleButtonsArray = [];
for (var index = 0, arrayLength = elements.length; index < arrayLength; index++) {
var currentElement = elements[index];
var toggleButton = setHeight(currentElement, elementHeight);
toggleButtonsArray.push(toggleButton);
}
for (var index=0, arrayLength=toggleButtonsArray.length; index<arrayLength; index++){
toggleButtonsArray[index].onclick = applyToggle(elementHeight);
}
}
You can then call modifyDomElements function to apply text shortening on all the elements that have shorten-text class name. For that you would need to specify the class name and the height that you would want your elements to be shortened to:
modifyDomElements('shorten-text','50px');
Lastly, in your your html, just set the class name on the element you would want your text to get shorten:
<div class="shorten-text">Your long text goes here...</div>
I hope this helps you. Here is the functionality:
When text characters is less than or equal to 12. Then it displays the whole text and also does not display the more/less button
When text characters is more than 12. Displays only 12 characters of the text and also a More button which when pressed, shows the whole text.
When the More button is pressed the button changes to Less
Read more string manipulation in w3schools: String Manipulation or
Mozila: String Manipulation
var startStatus = "less";
function toggleText() {
var text = "Here is the text that I want to play around with";
if (text.length > 12) {
if (startStatus == "less") {
document.getElementById("textArea").innerHTML = `${text.substring(0, 12)}...`;
document.getElementById("more|less").innerText = "More";
startStatus = "more";
} else if (startStatus == "more") {
document.getElementById("textArea").innerHTML = text;
document.getElementById("more|less").innerText = "Less";
startStatus = "less";
}
} else {
document.getElementById("textArea").innerHTML = text;
}
}
toggleText();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>
<p id="textArea">
<!-- This is where i want text displayed-->
</p>
<span><a
id="more|less"
onclick="toggleText();"
href="javascript:void(0);"
></a
></span>
</div>
</body>
</html>
This should resolve your problem:
function toggleSeeMore() {
if(document.getElementById("textarea").style.display == 'none') {
document.getElementById("textarea").style.display = 'block';
document.getElementById("seeMore").innerHTML = 'See less';
}
else {
document.getElementById("textarea").style.display = 'none';
document.getElementById("seeMore").innerHTML = 'See more';
}
}
The complete working example is here: http://jsfiddle.net/akhikhl/zLA5K/
Hope this Code you are looking for
HTML:
<div class="showmore">
<div class="shorten_txt">
<h4> ##item.Title</h4>
<p>Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text </p>
</div>
</div>
SCRIPT:
var showChar = 100;
var ellipsestext = "[...]";
$('.showmore').each(function () {
$(this).find('.shorten_txt p').addClass('more_p').hide();
$(this).find('.shorten_txt p:first').removeClass('more_p').show();
$(this).find('.shorten_txt ul').addClass('more_p').hide();
//you can do this above with every other element
var teaser = $(this).find('.shorten_txt p:first').html();
var con_length = parseInt(teaser.length);
var c = teaser.substr(0, showChar);
var h = teaser.substr(showChar, con_length - showChar);
var html = '<span class="teaser_txt">' + c + '<span class="moreelipses">' + ellipsestext +
'</span></span><span class="morecontent_txt">' + h
+ '</span>';
if (con_length > showChar) {
$(this).find(".shorten_txt p:first").html(html);
$(this).find(".shorten_txt p:first span.morecontent_txt").toggle();
}
});
$(".showmore").click(function () {
if ($(this).hasClass("less")) {
$(this).removeClass("less");
} else {
$(this).addClass("less");
}
$(this).find('.shorten_txt p:first span.moreelipses').toggle();
$(this).find('.shorten_txt p:first span.morecontent_txt').toggle();
$(this).find('.shorten_txt .more_p').toggle();
return false;
});
<script type="text/javascript">
function showml(divId,inhtmText)
{
var x = document.getElementById(divId).style.display;
if(x=="block")
{
document.getElementById(divId).style.display = "none";
document.getElementById(inhtmText).innerHTML="Show More...";
}
if(x=="none")
{
document.getElementById(divId).style.display = "block";
document.getElementById(inhtmText).innerHTML="Show Less";
}
}
</script>
<p id="show_more1" onclick="showml('content1','show_more1')" onmouseover="this.style.cursor='pointer'">Show More...</p>
<div id="content1" style="display: none; padding: 16px 20px 4px; margin-bottom: 15px; background-color: rgb(239, 239, 239);">
</div>
if more div use like this change only 1 to 2
<p id="show_more2" onclick="showml('content2','show_more2')" onmouseover="this.style.cursor='pointer'">Show More...</p>
<div id="content2" style="display: none; padding: 16px 20px 4px; margin-bottom: 15px; background-color: rgb(239, 239, 239);">
</div>
demo
jsfiddle
I'm not an expert, but I did a lot of looking to implement this for myself. I found something different, but modified it to accomplish this. It's really quite simple:
The function takes two arguments, a div containing only the words "show more" [or whatever] and a div containing the originally hidden text and the words "show less." The function displays the one div and hides the other.
NOTE: If more than one show/hide on page, assign different ids to divs
Colors can be changed
<p>Here is text that is originally displayed</p>
<div id="div1">
<p style="color:red;" onclick="showFunction('div2','div1')">show more</p></div>
<div id="div2" style="display:none">
<p>Put expanded text here</p>
<p style="color:red;" onclick="showFunction('div1','div2')">show less</p></div>
<p>more text</p>
Here is the Script:
<script>
function showFunction(diva, divb) {
var x = document.getElementById(diva);
var y = document.getElementById(divb);
x.style.display = 'block';
y.style.display = 'none';
}
</script>
You can also use details HTML tag which does the work for you.
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
Source W3CSchool