show less or show more in javaScript html [duplicate] - javascript
This question already has answers here:
HTML - How to make a "Read More" button
(3 answers)
Closed 1 year ago.
I have a code like this. I want to show maxlength 100 but when I click button I want to see all text. When I click button again I want to show length is going to be 100 again.
I didn't do it. Can you help me ?
Sorry for my English
function MyButton () {
var x = document.getElementById("p1").maxLength = 300;
document.querySelector('.p1').innerText = x;
$("#More").css("display", "none")
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="p1" >
Breaking India: Western Interventions in Dravidian and Dalit Faultlines is a book written by Rajiv Malhotra and Aravindan Neelakandan which argues that India's integrity is being undermined
</span>
<button onclick="MyButton()" id="More">..Show More</button>
You can do a little trick like this where you assign the full text content to a dataset attribute at page load but display the short version on the page.
When the button is clicked, assign the short text content to another dataset attribute and display the full text. This process then repeats to hide the full text when the button is clicked again.
document.querySelectorAll('button.More').forEach(bttn=>{
bttn.dataset.state=0;
bttn.addEventListener('click',function(e){
let span=this.previousElementSibling;
span.dataset.tmp=span.textContent;
span.textContent=span.dataset.content;
span.dataset.content=span.dataset.tmp;
this.innerHTML=this.dataset.state==1 ? 'Show More...' : 'Show Less...';
this.dataset.state=1-this.dataset.state;
})
});
document.querySelectorAll('span.p1').forEach(span=>{
span.dataset.content=span.textContent;
span.textContent=span.textContent.substr(0,100) + '...';
})
.p1{margin:1rem;display:block;}
<span class="p1" >
Breaking India: Western Interventions in Dravidian and Dalit Faultlines is a book written by Rajiv Malhotra and Aravindan Neelakandan which argues that India's integrity is being undermined
</span>
<button class="More">..Show More</button>
<span class="p1" >
I hate yogurt. It's just stuff with bits in. You hit me with a cricket bat. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? I'm the Doctor, I'm worse than everyone's aunt. *catches himself* And that is not how I'm introducing myself.
All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? The way I see it, every life is a pile of good things and bad things.…hey.…the good things don't always soften the bad things; but vice-versa the bad things don't necessarily spoil the good things and make them unimportant.
</span>
<button class="More">..Show More</button>
<span class="p1" >
Saving the world with meals on wheels. Saving the world with meals on wheels. It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'! I'm nobody's taxi service; I'm not gonna be there to catch you every time you feel like jumping out of a spaceship.
You hit me with a cricket bat. You've swallowed a planet! You know how I sometimes have really brilliant ideas? Heh-haa! Super squeaky bum time! Aw, you're all Mr. Grumpy Face today.
</span>
<button class="More">..Show More</button>
<span class="p1" >
Aw, you're all Mr. Grumpy Face today. I am the last of my species, and I know how that weighs on the heart so don't lie to me! All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong?
You hit me with a cricket bat. No, I'll fix it. I'm good at fixing rot. Call me the Rotmeister. No, I'm the Doctor. Don't call me the Rotmeister. Stop talking, brain thinking. Hush. I am the last of my species, and I know how that weighs on the heart so don't lie to me!
</span>
<button class="More">..Show More</button>
Related
Unable to Clear 'Search' results
I am looking to clear Search results when a new query is entered in the websites search bar.
For example I am developing a TV search website, if I search 'Friends' a list of results will display however if I enter a new query the results will not clear and print at the bottom of the previous list of results.
I have tried features such as resultList.innerHTML = '';
Here is some of my JavaScript:
fetch(`https: //api.tvmaze.com/search/shows?q=${TVShow}`)
.then((response) => response.json())
.then((data) => {
for (const value of data) {
document.querySelector(".TVShowInfo").insertAdjacentHTML('beforeend',
`<div id="TVShow">
<center>
<h1>${value.show.name}</h1>
</center>
</div>`);
}
})
<div class="searchBox">
<input id="TVShowName" type="TV show information" placeholder="Search for a TV show..." />
<button id="search">Search</button>
</div>
<div class="TVShowInfo"></div>
Try this - just replace the innerHTML instead of insertAdjacentHTML.
I also changed the ID to class and removed the deprecated center
document.querySelector(".TVShowInfo").innerHTML = data
.map(({show}) => `<div class="TVShow"><h1>${show.name}</h1></div>`).join('<br/>');
.TVShow { text-align: center; }
<div class="TVShowInfo"></div>
<script>
const data = [{"score":0.9089527,"show":{"id":431,"url":"https://www.tvmaze.com/shows/431/friends","name":"Friends","type":"Scripted","language":"English","genres":["Comedy","Romance"],"status":"Ended","runtime":30,"averageRuntime":30,"premiered":"1994-09-22","ended":"2004-05-06","officialSite":null,"schedule":{"time":"20:00","days":["Thursday"]},"rating":{"average":8.5},"weight":98,"network":{"id":1,"name":"NBC","country":{"name":"United States","code":"US","timezone":"America/New_York"},"officialSite":"https://www.nbc.com/"},"webChannel":null,"dvdCountry":null,"externals":{"tvrage":3616,"thetvdb":79168,"imdb":"tt0108778"},"image":{"medium":"https://static.tvmaze.com/uploads/images/medium_portrait/41/104550.jpg","original":"https://static.tvmaze.com/uploads/images/original_untouched/41/104550.jpg"},"summary":"<p>Six young (20-something) people from New York City (Manhattan), on their own and struggling to survive in the real world, find the companionship, comfort and support they get from each other to be the perfect antidote to the pressures of life.</p><p>This average group of buddies goes through massive mayhem, family trouble, past and future romances, fights, laughs, tears and surprises as they learn what it really means to be a friend.</p>","updated":1641068842,"_links":{"self":{"href":"https://api.tvmaze.com/shows/431"},"previousepisode":{"href":"https://api.tvmaze.com/episodes/40881"}}}},{"score":0.8193341,"show":{"id":46948,"url":"https://www.tvmaze.com/shows/46948/friends","name":"Friends","type":"Scripted","language":"English","genres":["Drama","Comedy"],"status":"Ended","runtime":60,"averageRuntime":60,"premiered":"1979-03-25","ended":"1979-04-22","officialSite":null,"schedule":{"time":"","days":["Sunday"]},"rating":{"average":null},"weight":21,"network":{"id":3,"name":"ABC","country":{"name":"United States","code":"US","timezone":"America/New_York"},"officialSite":"https://"+"abc.com/"},"webChannel":null,"dvdCountry":null,"externals":{"tvrage":null,"thetvdb":76973,"imdb":"tt0078615"},"image":null,"summary":"A comedy-drama series as seen through the eyes of three 11-year-old children from different backgrounds with episodes focusing upon the trials and tribulations of adolescence, and involved subjects such as dating, family, school, growing pains and friendship.","updated":1585366201,"_links":{"self":{"href":"https://api.tvmaze.com/shows/46948"},"previousepisode":{"href":"https://api.tvmaze.com/episodes/1824845"}}}},{"score":0.8159303,"show":{"id":30774,"url":"https://www.tvmaze.com/shows/30774/friends","name":"Friends","type":"Scripted","language":"Japanese","genres":["Drama","Romance"],"status":"Ended","runtime":65,"averageRuntime":65,"premiered":"2002-02-04","ended":"2002-02-05","officialSite":"http://www.tbs.co.jp/friends21/","schedule":{"time":"21:00","days":["Monday","Tuesday"]},"rating":{"average":null},"weight":19,"network":{"id":159,"name":"TBS","country":{"name":"Japan","code":"JP","timezone":"Asia/Tokyo"},"officialSite":"https://www.tbs.co.jp/"},"webChannel":null,"dvdCountry":null,"externals":{"tvrage":null,"thetvdb":99721,"imdb":"tt0315608"},"image":{"medium":"https://static.tvmaze.com/uploads/images/medium_portrait/122/305714.jpg","original":"https://static.tvmaze.com/uploads/images/original_untouched/122/305714.jpg"},"summary":"<p>Left alone on a trip to Hong Kong, Tomoko finds herself the victim of a purse-snatching. The police arrest the man she points out, but it turns out to be the wrong person: a young Korean man named Ji Hoon. Despite his anger and humiliation, he takes her out to dinner since she has lost all her money, and in return, she agrees to model for his amateur film. What follows is a magical and romantic two days. Upon returning to their respective countries, Tomoko must return to her nine-to-five job and Ji Hoon must resume studying to join the family business rather than pursuing his dream of becoming a film director. But soon the two begin to email each other and rekindle their relationship despite the distance and obstacles between them. Marking the very first time in television history that a drama has been co-produced between Japan and South Korea, the story shows us that love has no borders.</p>","updated":1635779876,"_links":{"self":{"href":"https://api.tvmaze.com/shows/30774"},"previousepisode":{"href":"https://api.tvmaze.com/episodes/1260315"}}}},{"score":0.807294,"show":{"id":53703,"url":"https://www.tvmaze.com/shows/53703/friends","name":"Friends","type":"Variety","language":"Korean","genres":[],"status":"Ended","runtime":90,"averageRuntime":90,"premiered":"2021-02-17","ended":"2021-05-12","officialSite":"http://m.ichannela.com/program/menu/prm_menu2_mob.do?pgm_contents=050078&type=02&menuIndex=2&seqIndex=0&realCateCode=05007801&boardType=null&boardId=null&cateName=%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8%20%EC%86%8C%EA%B0%9C","schedule":{"time":"21:10","days":["Wednesday"]},"rating":{"average":null},"weight":16,"network":{"id":538,"name":"Channel A","country":{"name":"Korea, Republic of","code":"KR","timezone":"Asia/Seoul"},"officialSite":null},"webChannel":null,"dvdCountry":null,"externals":{"tvrage":null,"thetvdb":396947,"imdb":null},"image":{"medium":"https://static.tvmaze.com/uploads/images/medium_portrait/297/743857.jpg","original":"https://static.tvmaze.com/uploads/images/original_untouched/297/743857.jpg"},"summary":"<p>Reuniting old friends and introducing new acquaintances, cast members from Heart Signal 2 & 3 are back in a brand new variety series and sparks are sure to fly! Invited to spend a very special winter at Signal House, relationships between Oh Young Joo, Jung Jae Ho, Kim Do Gyun, Kim Jang Mi, Lee Ga Heun, Park Ji Hyun, Seo Min Jae, and Jung Eui Dong are sure to blossom. But which relationships will remain friendly and which will blossom into love? Follow the members through their daily lives and find out! Hosted by Super Junior's Kim Hee Chul and Shindong, Oh My Girl's Seunghee, and Lee Sang Min.</p>","updated":1668808710,"_links":{"self":{"href":"https://api.tvmaze.com/shows/53703"},"previousepisode":{"href":"https://api.tvmaze.com/episodes/2090402"}}}},{"score":0.69863015,"show":{"id":47182,"url":"https://www.tvmaze.com/shows/47182/smiling-friends","name":"Smiling Friends","type":"Animation","language":"English","genres":["Comedy"],"status":"Running","runtime":15,"averageRuntime":15,"premiered":"2020-04-01","ended":null,"officialSite":"http://www.adultswim.com/videos/smiling-friends","schedule":{"time":"","days":["Sunday"]},"rating":{"average":null},"weight":91,"network":{"id":10,"name":"Adult Swim","country":{"name":"United States","code":"US","timezone":"America/New_York"},"officialSite":null},"webChannel":null,"dvdCountry":null,"externals":{"tvrage":null,"thetvdb":379403,"imdb":"tt12074628"},"image":{"medium":"https://static.tvmaze.com/uploads/images/medium_portrait/251/628722.jpg","original":"https://static.tvmaze.com/uploads/images/original_untouched/251/628722.jpg"},"summary":"<p>A small company dedicated to bringing happiness to the world receives a simple request to help a woman's unhappy son smile again, but the job turns out to be more complicated than it seems.</p>","updated":1659887321,"_links":{"self":{"href":"https://api.tvmaze.com/shows/47182"},"previousepisode":{"href":"https://api.tvmaze.com/episodes/2365336"}}}},{"score":0.6878882,"show":{"id":20474,"url":"https://www.tvmaze.com/shows/20474/angels-friends","name":"Angel's Friends","type":"Animation","language":"Italian","genres":["Adventure","Children","Fantasy"],"status":"Ended","runtime":15,"averageRuntime":15,"premiered":"2009-10-12","ended":"2012-04-29","officialSite":"http://www.angelsfriends.it","schedule":{"time":"","days":["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]},"rating":{"average":null},"weight":69,"network":{"id":1272,"name":"Italia 1","country":{"name":"Italy","code":"IT","timezone":"Europe/Rome"},"officialSite":null},"webChannel":null,"dvdCountry":null,"externals":{"tvrage":null,"thetvdb":264933,"imdb":"tt1731708"},"image":{"medium":"https://static.tvmaze.com/uploads/images/medium_portrait/72/180985.jpg","original":"https://static.tvmaze.com/uploads/images/original_untouched/72/180985.jpg"},"summary":"<p>Special school for the Angels is full of secrets! What happens if at the same table will be angels and devils? Raf, Uri, Sweet and Mickey - a company of angels. But to become a real team, they do not have a single person. Friends leave their homes and go down to the Earth in the \"Golden School\". They need to get the last \"missing percentage\", which will make their guardian angels at 100%. Their mission is to accompany selected earthlings in their daily adventures...</p>","updated":1573079445,"_links":{"self":{"href":"https://api.tvmaze.com/shows/20474"},"previousepisode":{"href":"https://api.tvmaze.com/episodes/1382408"}}}},{"score":0.68657506,"show":{"id":65357,"url":"https://www.tvmaze.com/shows/65357/only-friends","name":"Only Friends","type":"Scripted","language":"Thai","genres":["Drama","Romance"],"status":"In Development","runtime":null,"averageRuntime":null,"premiered":null,"ended":null,"officialSite":"https://www.gmm-tv.com/home/","schedule":{"time":"","days":[]},"rating":{"average":null},"weight":66,"network":{"id":1095,"name":"GMM25","country":{"name":"Thailand","code":"TH","timezone":"Asia/Bangkok"},"officialSite":null},"webChannel":null,"dvdCountry":null,"externals":{"tvrage":null,"thetvdb":null,"imdb":null},"image":{"medium":"https://static.tvmaze.com/uploads/images/medium_portrait/431/1079406.jpg","original":"https://static.tvmaze.com/uploads/images/original_untouched/431/1079406.jpg"},"summary":null,"updated":1669158203,"_links":{"self":{"href":"https://api.tvmaze.com/shows/65357"}}}},{"score":0.6837748,"show":{"id":11090,"url":"https://www.tvmaze.com/shows/11090/mutual-friends","name":"Mutual Friends","type":"Scripted","language":"English","genres":["Drama","Comedy"],"status":"Ended","runtime":60,"averageRuntime":60,"premiered":"2008-08-26","ended":"2008-09-30","officialSite":"http://www.bbc.co.uk/programmes/b00d98sz","schedule":{"time":"21:00","days":["Tuesday"]},"rating":{"average":null},"weight":65,"network":{"id":12,"name":"BBC One","country":{"name":"United Kingdom","code":"GB","timezone":"Europe/London"},"officialSite":"https://www.bbc.co.uk/bbcone"},"webChannel":null,"dvdCountry":null,"externals":{"tvrage":18729,"thetvdb":82899,"imdb":"tt1062325"},"image":{"medium":"https://static.tvmaze.com/uploads/images/medium_portrait/37/93077.jpg","original":"https://static.tvmaze.com/uploads/images/original_untouched/37/93077.jpg"},"summary":"<p>Martin has two best friends, Patrick and Carl, who couldn't be more different. One is an irresponsible, unreliable, feckless womaniser and the other is dead. Guess which one slept with his wife?Martin Grantham is happily married to Jen. They have a son Dan, a nice house, the works. One day his best friend Carl throws himself under a train, setting off a disastrous sequence of events that will change Martin's life forever…Into this mess steps Patrick, a friend from way back. Patrick is everything Martin is not – glib, self-confident, popular and pathologically immature. He's the last person Martin needs in his life right now. Or is he?</p>","updated":1555974558,"_links":{"self":{"href":"https://api.tvmaze.com/shows/11090"},"previousepisode":{"href":"https://api.tvmaze.com/episodes/555093"}}}},{"score":0.68103445,"show":{"id":7403,"url":"https://www.tvmaze.com/shows/7403/battlefield-friends","name":"Battlefield Friends","type":"Animation","language":"English","genres":["Comedy","Adventure"],"status":"Ended","runtime":3,"averageRuntime":3,"premiered":"2012-03-20","ended":"2016-08-20","officialSite":"https://www.youtube.com/show/battlefieldfriends","schedule":{"time":"","days":[]},"rating":{"average":null},"weight":56,"network":null,"webChannel":{"id":21,"name":"YouTube","country":null,"officialSite":"https://www.youtube.com"},"dvdCountry":null,"externals":{"tvrage":null,"thetvdb":262928,"imdb":"tt2354667"},"image":{"medium":"https://static.tvmaze.com/uploads/images/medium_portrait/27/68210.jpg","original":"https://static.tvmaze.com/uploads/images/original_untouched/27/68210.jpg"},"summary":"<p><b>Battlefield Friends</b> is a series of animated shorts set in the game world of Battlefield 3 and Battlefield 4. It chronicles the misadventures of four friends and squadmembers, embodying the four soldier classes available in the games. The series often comically attacks/parodies player trends and game mechanics, such as spawnkilling, buggy bipods, Closet Colonels, etc.</p><p>The series follows four players-a medic, an engineer, a sniper, and a noob. The series incorporates surreal humor mixed with cartoon comedy gags.</p>","updated":1657875759,"_links":{"self":{"href":"https://api.tvmaze.com/shows/7403"},"previousepisode":{"href":"https://api.tvmaze.com/episodes/903483"}}}},{"score":0.6768293,"show":{"id":45922,"url":"https://www.tvmaze.com/shows/45922/graceful-friends","name":"Graceful Friends","type":"Scripted","language":"Korean","genres":["Drama","Crime","Mystery"],"status":"Ended","runtime":80,"averageRuntime":80,"premiered":"2020-07-10","ended":"2020-09-05","officialSite":"http://tv.jtbc.joins.com/gracefulfriends","schedule":{"time":"22:50","days":["Friday","Saturday"]},"rating":{"average":null},"weight":55,"network":{"id":268,"name":"jTBC","country":{"name":"Korea, Republic of","code":"KR","timezone":"Asia/Seoul"},"officialSite":null},"webChannel":null,"dvdCountry":null,"externals":{"tvrage":null,"thetvdb":378806,"imdb":"tt12531492"},"image":{"medium":"https://static.tvmaze.com/uploads/images/medium_portrait/262/655331.jpg","original":"https://static.tvmaze.com/uploads/images/original_untouched/262/655331.jpg"},"summary":"<p><b>Graceful Friends</b> is a mystery drama about a murder that occurs in a new town inhabited by married couples in their 40s and follows the story of a group of middle-aged men after their peaceful everyday lives are disrupted.</p>","updated":1655183561,"_links":{"self":{"href":"https://api.tvmaze.com/shows/45922"},"previousepisode":{"href":"https://api.tvmaze.com/episodes/1914740"}}}}]
</script>
just set the innerHtml to blank
<body>
<div class="searchBox">
<input id="TVShowName" type="search" placeholder="Search for a TV show..." />
<button id="search">Search</button>
</div>
<div class="TVShowInfo"></div>
</div>
</div>
<script>
const searchInput = document.getElementById("TVShowName");
const contentArea = document.querySelector(".TVShowInfo");
function searchShow(TVShow) {
fetch(`https://api.tvmaze.com/search/shows?q=${TVShow}`)
.then((response) => response.json())
.then((data) => {
contentArea.innerHTML = "";
for (const value of data) {
contentArea.insertAdjacentHTML(
"beforeend",
`
<div id="TVShow">
<center>
<h1>${value.show.name}</h1>
</center>
</div>`
);
// searchInput.value = "";
}
});
}
document.getElementById("search").onclick = function (e) {
searchShow(searchInput.value);
};
</script>
</body>
Parse HTMLString (with input type text) to String.
I'm really need your helps. I have this form with text and input fields. I did a little bit jquery and get the big htmlString: var StringContent = '<p>I am thrilled to share my new listing with you at <input id="additions_info_0_0" name="additions[0][replace][0]" size="21" type="text" value="Property Address"><input name="additions[0][find][0]" type="hidden" value="(MUST TYPE Property Address HERE)">. To find out more about this exciting property, or to hear about one of the many others currently on the market, call me to set up an appointment at <input id="additions_info_0_1" name="additions[0][replace][1]" size="17" type="text" value="Phone Number"><input name="additions[0][find][1]" type="hidden" value="(MUST TYPE Phone Number HERE)">. I would be happy to answer your questions, discuss your needs, and set you on track to achieving your real estate goals. Looking forward to hearing from you soon!</p>'; I can loop through the htmlString and get the input value, like "1003 Audelia, Houston, TX 75002" for input id = additions_info_0_0 and "469-999-9999" for id additions_info_0_1. But I can't combine all the string and input value into new string, like I am thrilled to share my new listing with you at 1003 Audelia, Houston, TX 75002. To find out more about this exciting property, or to hear about one of the many others currently on the market, call me to set up an appointment at 469-999-9999. I would be happy to answer your questions, discuss your needs, and set you on track to achieving your real estate goals. Looking forward to hearing from you soon! I'm trying to parseHTML but no luck. Any helps would be awesome and much appreciated.
Your question is not very clear I hope this code will work fine for your requirement.
Change your HTML in a similar manner like this,
<div id="contentDiv">
<p>I am thrilled to share my new listing with you at
<input id="additions_info_0_0" name="additions[0][replace][0]" size="21" type="text" value="Property Address">. To find out more about this exciting property, or to hear about one of the many others currently on the market, call me to set up an appointment at
<input id="additions_info_0_1" name="additions[0][replace][1]" size="17" type="text" value="Phone Number"> I would be happy to answer your questions, discuss your needs, and set you on track to achieving your real estate goals. Looking forward to hearing from you soon!</p>
</div>
<input type="button" id="btnSubmit" value="Submit">
and your javascript code like this code
$('#btnSubmit').on('click', function() {
alert('test');
var propertyAdd = $('#additions_info_0_0').val();
var mobile = $('#additions_info_0_1').val();
var StringContent = '<p>I am thrilled to share my new listing with you at ' + propertyAdd + '. To find out more about this exciting property, or to hear about one of the many others currently on the market, call me to set up an appointment at ' + mobile + ' I would be happy to answer your questions, discuss your needs, and set you on track to achieving your real estate goals. Looking forward to hearing from you soon!</p>';
$('#contentDiv').html(StringContent);
});
This piece of code will first show the content from the HTML fine and after entering values you can click the button which will trigger the javascript code and take the two input values from the text boxes and re format the text to be show. Then you can change the initial content in the div to the formatted content according to your need.
Here I have done it with JQuery since you haven't mentioned how you want your code to be.
Quick and easy way to make a button change a variable value?
I need the easiest most amateurish way of making some kind of button or link which, when pressed, changes a variable. So the page looks like this: Value: Not-A Press here to change value to A So I want to make it so when you press the blue link, the only thing which happens is that Not-A changes to A. How do I do it? Oh and I tried this but it doesn't work: <a var value=A href="#" onclick="var value = A">Press here to change value to A</a> P.S: I googled this several times but I can't really figure out, I literally started learning javascript yesterday, sorry.
There you go! The simplest solution I could think of, just like you asked for:
<p id="toBeOrNotToBe">To Be</p>
<button type="button" onClick="document.getElementById('toBeOrNotToBe').innerHTML='Not To Be';">Change It!</button>
EDIT:
var a="blahblahblah";
function showValueOfA(){
document.getElementById("toBeOrNotToBe").innerHTML=a;
console.log(a);
}
showValueOfA();
<p id="toBeOrNotToBe"></p>
<button type="button" onClick="a='Yay I changed a variable!'; showValueOfA();">Change It!</button>
I also was looking into how to make a button do stuff in HTML and I came across this very good websited that walks you through how it works in great detail and it really helped me: https://dev.to/bastionthedev/learning-with-clicker-games-part-1-html-1i4b
Wrap a set of paragraphs with no markup and random <br> in p tags
I'm working on themes for a legacy API that spits out less than wonderful / if not markup-less / markup. I've been able to wrestle most of it back into shape with wrap() and other methods, but for some reason this one is stumping me. Do I really need to get out the for loops for something like this - or is there a cheap and dirty way to get these paragraphs into <p> paragraphs? <div class="bio"> "Some Ember is the new solo project of Man/Miracle's Dylan Travis. "Era of Wind" is only the second song he's released, it is icy and desolate. It's a little bit Lovecraft (From fingertip to dilated eye/ it closes grip on vibrated flesh, Travis sings) and a little bit Fever Ray, propelled by haunted, droning bass. I keep thinking about this lonely guy in a lake, like a 19th century convict rowing through fog, making his great escape from an island prison and sinking halfway to shore. What happens to that guy? What if he had a Moog to play on the way down? " --The Fader <br> <br> "Like some kind of abridged soundtrack to Bergman's Persona pared down to its abstract purity, this ten minute mood piece charts a psychic journey through dissolution and restructure, opening with a searing purge of the sonic palate, only to find itself wading through the aftermath's fog of disarray. Taking cues from the likes of Mazzy Star, Happy New Year and Grouper, the San Francisco duo immerse themselves in a narcotic mixture of sensuality and obliqueness, mostly leaving meaning and catharsis to hover just out of reach while an ominous air of gloom takes hold." --Sonic Masala </div> Feels like trying to get these in shape might not be worth it. Thoughts?
Maybe you can achieve this using the childNodes in DOM .
$("#btnConvert").on("click",function(){
var text = $("#text");
result = $("<div>").html(text.val()).children().contents().filter(function() {
return this.nodeType == 3 && this.data.trim() != "";
}).map(function(){ return "<p>"+this.data+"</p>"}).get().join("");
text.val(result);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>value</p>
<textarea name="text" id="text" cols="30" rows="10">
<div class="bio">
"Some Ember is the new solo project of Man/Miracle's Dylan Travis. "Era of Wind" is only the second song he's released, it is icy and desolate. It's a little bit Lovecraft (From fingertip to dilated eye/ it closes grip on vibrated flesh, Travis sings) and a little bit Fever Ray, propelled by haunted, droning bass. I keep thinking about this lonely guy in a lake, like a 19th century convict rowing through fog, making his great escape from an island prison and sinking halfway to shore. What happens to that guy? What if he had a Moog to play on the way down? " --The Fader
<br>
<br>
"Like some kind of abridged soundtrack to Bergman's Persona pared down to its abstract purity, this ten minute mood piece charts a psychic journey through dissolution and restructure, opening with a searing purge of the sonic palate, only to find itself wading through the aftermath's fog of disarray. Taking cues from the likes of Mazzy Star, Happy New Year and Grouper, the San Francisco duo immerse themselves in a narcotic mixture of sensuality and obliqueness, mostly leaving meaning and catharsis to hover just out of reach while an ominous air of gloom takes hold." --Sonic Masala
</div>
</textarea>
<br>
<input type="button" id="btnConvert" name="btnConvert" value="Convert">
You should look into Regex if you're going to be doing a lot of this. You get much more control over your text and the code is short. I called .match on the innerHTML and using this regex string /".+/g. It finds all text from the left-most quote until a newline. text.match(/".+/g); Here's how the match parses out. https://regex101.com/r/mP7pU9/1 This is how it looks in jQuery. http://jsfiddle.net/jg7cxpy4/2/
Showing only a few elements, others can navigate using the arrows
Good moorning.
I have got a variable $awards = array which contents some data from database from specific users. This variable extracts a set of awards to result set of users.
<div>
<span class="zoom-gallery" n:foreach="$awards as $award" n:if="$award['user_id'] == $solver['id']">
<a href="{$basePath}{$award['link']}">
<img src="{$basePath}{$award['preview']}"/>
</a>
</span>
</div>
However, some users have so much awards -> I would like to show first 4 awards between two arrows allowing going through the other.
Example: arrow_prev AWARD1 AWARD2 AWARD3 AWARD4 arrow_next
Could you help me how to do it? I know it's solvable through javascript but I dont know javascrip much (beginner). Or - does exist some plugin? Thank you