I'm creating a spoiler-tag script where the user clicks on spoiler text, the text will either blank out or change font-color depending on the class assigned to it. I'm rather a noob at Javascript.
My script only works when I click on the spoilered text when it is blank- so when I have already clicked on it, I can't reclick to change it back.
Here is the code that works:
// Hide Spoiler Individually
var singleHidden = document.getElementsByClassName("hidden");
var hideMe = function () {
var attribute = this.getAttribute("hidden");
this.className = "show";
};
for (var i = 0; i < singleHidden.length; i++) {
singleHidden[i].addEventListener("click", hideMe, false)
};
Here's a link on jsfiddle.
https://jsfiddle.net/o94c00hb/
Try this:
var hideMe = function() {
if(this.className == "hidden")
this.className = "show"
else
this.className = "hidden"
};
If you're not opposed to using jquery i would do something like this:
$('.hidden').on('click', function(){
$(this).toggleClass('show');
});
JSFIDDLE
Related
What I am trying to accomplish is something 'like'
$("button .toggleExcerpt)
.toggle( function FIRST() {
do first function...
} , function SECOND() {
do second function...
But since it's deprecated, I don't know what alternative to use. Ive tried using if/else inside of a .on("click", function()... but didn't seem to work.
jQuery:
var readMore = "<span class='readMore'>read about the solution...</span>";
var readLess = "<span class='readLess'>hide full description...</span>";
//".toggleExcerpt" is an empty <button> in the HTML
$(".toggleExcerpt").append(readMore);
$(".toggleExcerpt")
.on("click", function (event) {
$(this).contents(".readMore")
.replaceWith(readLess);
console.log("readMore ran");
})
.on("click", function (event) {
$(this).contents(".readLess")
.replaceWith(readMore);
console.log("readLess ran");
})
Both of the click events are logging to the console, so I know that the first event is running, and then is quickly replaced by the second event, but I would love to make these (or simply the text inside the span) to alternate....
I've already looked at this suggestion, but I am not sure how to implement it in my example, nor if this particular jQuery implementation is what I need.
To check the class is exists or not , you have to use .hasClass() . if class found,use .remove() to remove that element and .append() to add another.
For example, You can try this code :
var readMore = "<span class='readMore'>read about the solution...</span>";
var readLess = "<span class='readLess'>hide full description...</span>";
//".toggleExcerpt" is an empty <button> in the HTML
$(".toggleExcerpt").append(readMore);
$(".toggleExcerpt")
.on("click", function (event) {
if($(this).find('span').hasClass('readmore') === true){
$(this).find('span.readmore').remove();
$(this).append(readLess);
}else{
$(this).find('span.readLess').remove();
$(this).append(readMore);
}
})
Check this snippet:
var readMore = "read about the solution...";
var readLess = "hide full description...";
var excerptState = true;
//".toggleExcerpt" is an empty <button> in the HTML
$(".toogleExcerpt").html(readMore);
$(".toogleExcerpt").click(function () {
$(this).html( excerptState ? readLess : readMore );
// invert state
excerptState = !excerptState
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="toogleExcerpt"></button>
Why not try letting a boolean swap back and forth for you?
Here's your snippet:
$(document).ready(function() {
var readMore = "<span class='readMore'>read about the solution...</span>";
var readLess = "<span class='readLess'>hide full description...</span>";
var more = true;
//".toggleExcerpt" is an empty <button> in the HTML
$("#toggleExcerpt").append(readMore);
$("#toggleExcerpt")
.on("click", function(event) {
if (more) {
$(this).contents(".readMore")
.replaceWith(readLess);
console.log("readMore ran");
more = false;
} else {
$(this).contents(".readLess")
.replaceWith(readMore);
console.log("readLess ran");
more = true;
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="toggleExcerpt"></button>
I think I created a solution for you.
Just use a flag var that increments by 1, and check if it is odd or even and depending on if it is odd or even it will alternate the text for you onclick:
var readMore = "<span class='readMore'>read about the solution...</span>";
var readLess = "<span class='readLess'>hide full description...</span>";
//".toggleExcerpt" is an empty <button> in the HTML
var flag = 0;
$(".toggleExcerpt").append(readMore);
$(".toggleExcerpt")
.on("click", function(event) {
if (flag % 2 == 0) {
$(this).contents(".readMore")
.replaceWith(readLess);
console.log("readMore ran");
} else {
$(this).contents(".readLess")
.replaceWith(readMore);
console.log("readLess ran");
}
flag++;
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="toggleExcerpt" style="width:300px">
I have put together this piece of JavaScript, but I am struggling with the code as I'm a newbie. What I want to do is when a button is clicked it will change the background color opacity. The code below does this, but now I want the button to be reverted to the normal state when I click it again.
How can I do this? Thanks..
Normal state: background="rgba(255,0,0,0.8)"; Pressed state:
background="rgba(255,0,0,0.6)";
function highlight(id) {
document.getElementById(id).style.background="rgba(255,0,0,0.6)";
}
I would use a CSS class:
.opacityClicked{
background:rgba(255,0,0,0.8);
}
.opacityDefault{
background:rgba(255,0,0,0.6);
}
And change your function to:
function highlight(id) {
var element = document.getElementById(id);
element.class = (element.class == "opacityClicked") ? "opacityDefault" : "opacityClicked";
}
Or if you want to use only JavaScript
var isClicked = false;
function highlight(id) {
isClicked = !isClicked;
var element = document.getElementById(id);
element.style.background = (isClicked == true) ? "rgba(255,0,0,0.6)" : "rgba(255,0,0,0.8)";
}
Update(See comments: if you use 2 buttons):
var buttonClicked = null;
function highlight(id) {
if(buttonClicked != null)
{
buttonClicked.style.background = "rgba(255,0,0,0.8)";
}
buttonClicked = document.getElementById(id);
buttonClicked.style.background = "rgba(255,0,0,0.6)";
}
You could do something really quick like this:
First, add a hidden input element to your page like so:
<input type="button" id="foobar" value="FooBar!" onclick="highlight('foobar')" style="background-color:rgba(255,0,0,0.8);" />
<input type="hidden" id="one_neg_one" value="1" /> <= hidden element
Next, put this in your highlight function:
function highlight(id) {
var a = 7;
var o = document.getElementById("one_neg_one");
var newa = (a + (parseInt(o.value) * -1)) * 0.1;
document.getElementById(id).style.background="rgba(255,0,0," + newa + ")";
o.value = o.value * -1;
}
That should work, although I agree with a previous answer that you should use a css class for this.
#Ruben-J answer works fine. There is a syntax error though - you should instead use element.className rather than element.class.
https://developer.mozilla.org/en-US/docs/Web/API/Element/className
Below is an updated answer using the correct syntax:
function highlight(id) {
var element = document.getElementById(id);
element.className = (element.className == "opacityClicked") ? "opacityDefault" : "opacityClicked";
}
Also noticed that this answer doesn't show the HTML. Make sure to pass through the id element, not the name of the id.
When we refresh or reload the page, you can see a selected text in middle of circle when you click on below image portion:
Discuss Goals & Concern
Cash Flow Analysis
Tax Analysis...
And so on.
Example: http://ivyfa.advisorproducts.com/financial-planning-process
The selected text is only coming on the first click - when you click again on those image portions you will not see selected text. So I want to remove the selection from the text on the first attempt too.
It's difficult for me to explain this issue. Below is the JS code I am using - I think the issue is in the ChangeText() functionality.
/*----------Text change on click - Our Process page---------------*/
var prev;
var IdAry = ['slide1', 'slide2', 'slide3', 'slide5', 'slide8', 'slide9', 'slide12', 'slide13', 'slide14', 'slide15', 'slide16'];
window.onload = function() {
for (var zxc0 = 0; zxc0 < IdAry.length; zxc0++) {
var el = document.getElementById(IdAry[zxc0]);
if (el) {
setUpHandler(el);
el.onmouseover = function() {
$(this).addClass("hover");
}
el.onmouseout = function() {
$(this).removeClass("hover");
}
}
}
}
function setUpHandler(el) {
/*---------This is used to add selected class on clicked id only and remove class selected from rest---------*/
$("#" + IdAry.join(",#")).click(function() {
$(this).addClass("selected");
$("#graphics .selected").not(this).removeClass("selected");
})
/*---------This will add show hide class to thier spans and vise versa-------*/
$("#" + IdAry.join(",#")).click(
function() {
changeText(this, "hide", "show");
},
function() {
changeText(this, "show", "hide");
})
}
function changeText(obj, cl1, cl2) {
obj.getElementsByTagName('SPAN')[0].className = "hide";
obj.getElementsByTagName('SPAN')[1].className = "show";
if (prev && obj !== prev) {
prev.getElementsByTagName('SPAN')[0].className = "show";
prev.getElementsByTagName('SPAN')[1].className = "hide";
}
prev = obj
}
I only want to remove the selected text from the text in the middle when you click on different-2 image tag.
Image to view selected text:
You should clear text selection once you display your control; you can do this by calling this function (should be fully cross-browser):
function clearSelection() {
if (window.getSelection) window.getSelection().removeAllRanges();
else if (document.selection) document.selection.empty();
}
I need to add 2-3 text fields on button click one by one, where 'L' is the ID of the textfield. I am trying this code, but instead of using jQuery I want to use simple javascript because I am implementing this code in a Joomla environment.
function WrapperScript () {
JQuery('#wrapper1 button').click(function(){
for (var i=1;i<=4;i++)
{
var id='#L'+i;
var setting = JQuery(id).css('display');
if (setting=='none')
{
JQuery(id).css('display', 'block');
break;
}
}
});
}
if you need to make the same script without using jQuery here is a sample
function WrapperScript () {
//use an appropriate getter for the button
var button = document.getElementblahblah
button.onclick = function(){
for (var i=1;i<=4;i++)
{
var id='#L'+i;
var element = document.getElementById(id);
var setting = element.style.display;
if ( setting=='none' )
{
element.style.display = 'block';
break;
}
}
}
}
I have a link:
<a id="nextBut" href="somelink" class="button"><span>Next Step</span></a>
And I can control the the <span>Next step</span> part with innerHTML but how could I leave the <span> alone and just change the 'Next step' part?
For example:
var NextButJar = document.getElementById('nextBut');
NextButJar.disabled = true;
NextButJar.style.opacity = .5;
NextButJar.span.innerHTML = 'Read all tabs to continue';
I also have:
NextButJar.onClick = handleClick;
function handleClick(){
if (this.disabled == true) {
alert("Please view all tabs first!");
return;
} else {
alert("allowed to run");
}
};
Which I can't seem to get working either...
UPDATE
NextButJar.addEvent("click", function() {
if (this.disabled == true) {
alert("Please view all tabs first!");
return;
}
});
Works in everything but Explorer...
NextButJar.firstChild.innerHTML = "foo";
Will set the HTML in the first child element. If you might also have other content in the node, do something along the lines of
NextButJar.getElementsByTagName("span")[0].innerHTML = "foo";
To use innerHTML give id to the span and change ite innerHTML
<a id="nextBut" href="somelink" class="button"><span id="nextButSpan">Next Step</span></a>