Click button show different text, repeat first text - javascript

HTML:
<button id="slider1next" >Clickme</button>
<p class="text" id="first_one">This is the first text</p>
<p class="text" id="second_one" style="display:none">This is the second text</p>
<p class="text" id="third_one" style="display:none">This is the third text</p>
<p class="text" id="fourth_one" style="display:none">This is the four text</p>
JavaScript:
$("#slider1next").click(function() {
var $next = $(".text:visible").hide().next();
$next.length ? $next.show() : $(".text:first").show();
});
$("#slider2next").click(function() {
var $next = $(".text:visible").hide().prev();
$next.length ? $next.show() : $(".text:last").show();
});
I want to make it where the text is shown, but after the last text, it repeats the first text.
Trying to make something like this
If there's a better way to do this, other than using JavaScript and HTML, please let me know.. But JavaScript and HTML is the only way I can think of, an alternative to JS functions would be jQUERY. Help? ;-;
Looking for suggestions with the use of PHP, too, maybe to mock the code's intended for what I am trying to re-create using a different set of languages.

var count = 0;
$("#sliderNext").click(function() {
count++;
if (count < $('.text').length) {
$(".text:nth(" + count + ")").show().prev().hide();
} else {
$(".text:first").show();
$(".text:last").hide();
count = 0;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<button id="sliderNext">Next</button>
<p class="text" id="first_one">This is the first text</p>
<p class="text" id="second_one" style="display:none">This is the second text</p>
<p class="text" id="third_one" style="display:none">This is the third text</p>
<p class="text" id="fourth_one" style="display:none">This is the four text</p>

Use the modulo function to loop through a set of numbers: (count % 4) + 1. This will cycle through the numbers 1,2,3, and 4 if count starts at 0 and increases with each click of the next button.

Related

Executing JavaScript function from an HTML element (<span>) with no conditions but with arguments

I want to do this
document.getElementById('demo1').style.color = "red";
document.getElementById('demo2').style.color = "blue";
document.getElementById('demo3').style.color = "green";
document.getElementById('demo4').style.color = "fuchsia";
<p id="demo1">Styled text</p>
<p id="demo2">Styled text</p>
<p id="demo3">Styled text</p>
<p id="demo4">Styled text</p>
But don't want to do it that way, this is better:
function style(obj, color) {
obj.style.color = color;
}
<p call="style(this, 'red')">Styled text</p>
<p call="style(this, 'blue')">Styled text</p>
<p call="style(this, 'green')">Styled text</p>
<p call="style(this, 'fuchsia')">Styled text</p>
But this doesn't work. I am looking for some DRY way of styling text, and the first way is very tedious. The JavaScript way is pleasant, as it allows for more flexibility (like adding fontFamily in the parameters). Is there some HTML attribute that can work like call above? Is there some other way of styling text that is just as good? I thought about onload, but that works only for certain selected tags.
This related question comes close, but it is about a web page, not about a specific HTML tag.
You can try creating your own call attribute of the sort. Only thing is this won't work - you'll have to reference it through the parent function.
function style(obj, color) {
obj.style.color = color;
}
document.querySelectorAll('p').forEach(elem => eval(elem.getAttribute('data-call')));
<p data-call="style(elem, 'red');">Styled text</p>
<p data-call="style(elem, 'blue')">Styled text</p>
<p data-call="style(elem, 'green')">Styled text</p>
<p data-call="style(elem, 'fuchsia')">Styled text</p>

Call previous sibling as function parameter?

I'm building a wee letter-writing tool that will have a range of paragraphs the user can choose to add to a letter, but I worry that I'm doing it in a really inefficient way.
Currently, it's structured like this:
<p id="deposit-dispute" class="paragraph">This is a paragraph about deposits not being protected</p>
<button onclick="addPara(depositDispute)" class="add">Add paragraph</button>
and then in the Javascript, I create a const that pulls the inner HTML of that id:
const depositDispute = "\n" + document.getElementById("deposit-dispute").innerHTML + "\n";
which the addPara() function then adds to the textarea:
function addPara(text) {
document.getElementById("text-body").value += text;
}
But would there be a way to make the function just call whatever the previous p element had in it, rather than having to give them all unique IDs and creating a unique variable for them all?
Here it is in a codepen so you can see what I'm trying to do - the paragraphs to be added are in the accordion on the right: https://codepen.io/gordonmaloney/pen/GRWyjOP
Thanks a lot - and big apologies if this is a ridiculously amateurish question, I've spent ages trying to google a solution but can't find a thing!
G
Each box contains a paragraph and a button.
We can get all the boxes and each box paragraph and button, and finally add click event to the button to insert the paragraph html of this box to the textarea
// Get textarea and boxes
var textarea = document.getElementById('textarea');
var boxes = document.querySelectorAll('.box');
// get the button and the paragraph of each box
boxes.forEach(box => {
var btn = box.querySelector('.button');
var paragraph = box.querySelector('.paragraph');
// add the html of the selected box paragraph to the textarea
btn.addEventListener('click', () => {
textarea.value += "\n" + paragraph.innerHTML; + "\n";
});
});
<div class="wrapper">
<div class="box">
<p class="paragraph">This is paragraph 1</p>
<button class="button">Add to textarea</button>
</div>
<div class="box">
<p class="paragraph">This is paragraph 2</p>
<button class="button">Add to textarea</button>
</div>
<div class="box">
<p class="paragraph">This is paragraph 3</p>
<button class="button">Add to textarea</button>
</div>
</div>
<textarea name="" id="textarea" cols="30" rows="10"></textarea>

How to hide a parts of text after a special symbol, using html and Javascript?

I'm trying to hide a part of every user email, registered in a website.
So lets say I have get zero#example.com and I want to hide everything after the "#". And only show it if someone clicks on whats left of the email.
Any help would be appreciated.
This just hides everything.
<p>
<button onclick=".hide('#email')">Hide</button>
<button onclick=".show('#email')">Show</button>
</p>
<div id="email">
<h2>zero#example.com<h2>
</div>
Try following:
<script type="text/javascript">
function show(){
document.getElementById('trail').style.display = 'inline';
}
function hide(){
document.getElementById('trail').style.display = 'none';
}
</script>
<p>
<button onclick="hide()">Hide</button>
<button onclick="show()">Show</button>
</p>
<div id="email">
<h2>zero<span id="trail">#something.com</span></h2>
</div>
You can use split ( => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split ) if you know what character to expect. In this case:
var full; // let's say, it already has a value (f.e. zero#something.com)
var visiblePart = full.split("#")[0];
and eventually you can do something like this on click:
function show(){
document.getElementById("emailH2").innerHTML = full;
}
function hide(){
document.getElementById("emailH2").innerHTML = visiblePart;
}
and
<h2 id = "emailH2">zero#something.com<h2>

Javascript split by spaces, but not within html-tags

My first goal is to split a string by spaces, but not the ones within html-tags.
I've tried to rewrite the following, unsuccessfully: Javascript split by spaces but not those in quotes
What would the regex look like in:
arr = fullHtmlString.split(?);
?
My main goal is to shift an IMG-tag by one space at a time.
After that I'll iterate over the array, search for the img-tag, remove it, and add it the next item, and finally join the array.
The code I use at the moment is quite comprehensive and use jQuery extensively to achive the goal.
Input:
<div>
<p><img class=something>Some text.</p>
<p>Some more text.</p>
</div>
Deisred output first time:
<div>
<p>Some<img class=something> text.</p>
<p>Some more text.</p>
</div>
...second time:
<div>
<p>Some text.<img class=something></p>
<p>Some more text.</p>
</div>
...third time:
<div>
<p>Some text.</p>
<p><img class=something>Some more text.</p>
</div>
You should not try to do this with a regular expression, why explained here.
You can use DOM properties and methods though
function run(){
var img = document.querySelector(".something"),
sibling = img,
parent = img.parentNode,
next = parent.nextElementSibling;
//Search for the next textNode
while((sibling = sibling.nextSibling) && sibling.nodeType !=3);
if(sibling) {
//split the text only once,
//so "some more text" becomes ["some","more text"]
var textParts = sibling.textContent.split(/ (.*)?/,2);
//put the first split item before the sibling
parent.insertBefore(document.createTextNode(textParts[0]+" "),sibling);
//replace the sibling with the img element
parent.replaceChild(img,sibling);
//finally if there was more text insert it after the img
textParts[1] && parent.insertBefore(document.createTextNode(textParts[1]),img.nextSibling);
} else if(!sibling && next) {
//no sibling in the current parent,
//so prepend it to the next available element in parent
next.insertBefore(img,next.firstChild);
} else {
clearInterval(timer);
}
}
var timer = setInterval(run,2000);
<div>
<p><img class="something" src="http://placehold.it/10x10">Some text.</p>
<p>Some <span>skip me</span> more text.</p>
</div>

How to show "back to top" button using jquery only if browser height is shorter than page?

How to add/show "back to top" button at bottom in a div using jquery only if height browser height is shorter than page, other wise it should be hidden?
<p>Back to top</p>
to this
<div id="mainwrapper">
<p> Paragraph 1 </p>
<p> Paragraph 1 </p>
<p> Paragraph 1 </p>
<p> Paragraph 1 </p>
<p>Back to top</p>
</div>
i need almost same like my this question but condition is different How to detect linked PDF on a page and show message to download Adobe reader using jquery?
I need lightweight simple solution
Something like:
var wrapper = $('#mainwrapper');
if (wrapper.outerHeight(true) > $(window).height()) {
wrapper.append('<p>Back to top</p>');
}
Do something like this:
$(document).ready(function(){
showHideControl();
$(window).resize(function(){
showHideControl();
});
});
function showHideControl() {
var h = $(window).height();
var ch = $("#content").height();
if (ch < h) {
$("#backControl").hide();
}
else {
$("#backControl").show();
}
}
The html needs to be updated a little too:
<div id="mainwrapper">
<div id="content">
<p> Paragraph 1 </p>
<p> Paragraph 1 </p>
<p> Paragraph 1 </p>
<p> Paragraph 1 </p>
</div>
<p id="backControl">Back to top</p>
</div>

Categories

Resources