Understanding the .toggle function and hiding/unhiding buttons - javascript

I have a text input area that chops the string up into an array and makes buttons out of it for each word. I want to be able to hide each word seperate from eachother on('click') on the button. I tried to use the Jquery.toggle function but this only hides all of my buttons. I cant make them re-appear. Is there a way to fade them out and make them hidden and be able to unhide them.
I already tried searching the internet. Couldn't really come to a solution actually considered writing my own toggle but that just seems off. Is the only way you can use toggle to actually have a static button thats clickable that hides or unhides a piece of code.
Its obviously kinda weird to be able to unhide something thats hidden when there is no button that shows/hides all.
let createText=$('<textarea/>', {
'id':'Text',
'placeholder':'Text',
'class':'form-control col col-md-5',
'rows':'10'
}).on("input", function() {
let woorden = $(this).val().split(/(\s)/g);
$('#outputButtons').empty();
for (let i = 0; i < woorden.length; i++) {
if (woorden[i].replace(/\s/g, "") != "") {
let outputBtn=$('<button/>', {
'class': 'btn btn-secondary mt-2 mr-2'
}).html(woorden[i])
$('#outputButtons').append(outputBtn);
}
}
});
let outputButtons = $('<div/>', {
'class':'col',
'id':'outputButtons'
}).on('click', function() {
$('#outputButtons').toggle(1000);
});
How would I go on, on actually hiding/unhiding the buttons seperate from eachother. Is this possible without a static button that shows/hides all ?
Thanks in advance for reading, I am a new programmer and there is just so much information and things you have to keep in mind at the same time which makes it confusing from time to time. SO sorry if this post is confusing.

You can try this in your code:
Write the below css class:
.hide{
opacity: 0;
}
Then apply on output buttons("on click" function):
$(this).toggleClass("hide")

You don't need to use toggle for buttons!
Add this class to buttons you want to disable
.disable{
cursor: not-allowed;
pointer-events: none;
}
For changing the status you can use jquery
$("#id").toggleClass('disable');

Related

How to display a div/element on mouse hover using external JavaScript?

My divs are nested so i understand i cant display an element if its already hidden. I want the information(p1 inside my html code)to display once the mouse hovers over another element(h1 in my html. I have already made my paragraph 1 style to none in JavaScript, now i need it to re-appear, i have tried the following code to attempt to make it re-appear document.getElementById("1").onmouseover.style.display = "block"; but with no success.
This is My HTML code, ignore the order im new to web dev lol
This is the code i have tried but it doesnt seem to work
This is the end result i want, the circled text on hover display the paragraph
So a few things. For starters, put actual code into your questions instead of screen shots. If we can't reproduce your issue it's difficult to troubleshoot usually from just pictures.
Next, you might familiarize yourself with syntax a bit more since p1 isn't a valid HTML element.
Then, try not to rely on javascript too much and keep presentation stuff on the compositor thread. Here's an example accomplishing your goal with no javascript. Hope it helps, cheers!
p {
display: none;
}
h1:hover + p {
display: block;
}
<h1>Hover me</h1>
<p>PEEK A BOO!</p>
Yes, this is doable without javascript but since the question asked how to do it with, hopefully this helps get OP on the right track.
<div id="bioBlock" style="display:none">
<h2 id="1">
Cameron Lodge
</h2>
<p1 id="para">Im an avid learner of anything computers....</p1>
</div>
function showBioBlock() {
document.getElementById("bioBlock").style.display = "block";
}
https://jsfiddle.net/avL3j765/
document.getByElementId("myH1").onmouseover = function(){
displayH1("myP");
}
document.getByElementId("myH1").onmouseout = function(){
displayH1("myP");
}
function displayH1(myId){
if(document.getByElementId(myId).style.display == "block"){
document.getByElementId(myId).style.display = "none";
}else{
document.getByElementId(myId).style.display = "block";
}
}
This invokes a function that toggles the paragraph's style when the mouse enters and leaves the element. It assumes that you have an id on both your h1 and p tags, in my example myH1 and myP respectively.

Prevent delete of last div in Javascript

I have a slight problem in a feature I am trying to implement on a web page. I have two images, a plus and a minus sign, when plus is clicked it clones a div which consists of a few text box's. The minus image is meant to delete this div.
At the moment, I cannot seem to find a way to stop the last div from being deleted when I click on the minus. I want to just prevent the last row from being deleted and using an alert to inform the user that it cannot be deleted.
Can anyone give me some insight to this? I've searched on here for a while and found something similar, but it's all done using JQuery which I have no experience with.
Here is the code I am using to try and delete the div's.
function deleteRow1() {
// row-to-clone1 is the name of the row that is being cloned
var div = document.getElementById('row-to-clone1');
if (div) {
div.parentNode.removeChild(div);
}
if ((div).length != 1) {
alert("Cannot delete all rows.").remove();
}
}
When I try do delete the row it displays the alert but still deletes the div. I realise this is probably a very easy fix and my implementation of the above may not be correct, if anyone can help I would appreciate it.
ID of an element must be unique, so use a class to fetch them
function deleteRow1() {
// row-to-clone1 is the name of the row that is being cloned
var divs = document.getElementsByClassName('row-to-clone1');
if (divs.length > 1) {
divs[0].parentNode.removeChild(divs[0]);
} else {
alert("Cannot delete all rows.")
}
}
function add1() {
var div = document.getElementById('row-to-clone1');
if (div) {
var clone = div.cloneNode(true);
delete clone.id;
div.parentNode.appendChild(clone);
}
}
<button onclick="add1()">Add</button>
<button onclick="deleteRow1()">Delete</button>
<div id="row-to-clone1" class="row-to-clone1">div</div>

How to bind to 'inview' event on multiple elements

I'm playing around with Velocity.js and jquery.inview, and I want all the titles on my page to slideDownIn when they come into view. This code works fine for the first title:
$('.movies-title').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
if (isInView) {
// element is now visible in the viewport
if (visiblePartY == 'top') {
// top part of element is visible
} else if (visiblePartY == 'bottom') {
// bottom part of element is visible
} else {
// whole part of element is visible
$(this).velocity("transition.slideDownIn", 500);
}
} else {
// element has gone out of viewport
$(this).velocity("reverse");
}
});
If I copy and paste the above several times and replace .movies-title with the classes of the other titles, it works as I want it to.
However, that seems like a lot of extra code. I tried changing $('.movies-title') to $(.movies-title, .tv-title, .books-title) but then the animation only works for the last element in the list. I also tried adding a new class called .title to all of the titles and changing .movie-title to .title but that didn't work either.
What am I doing wrong? How can I condense the code?
The best solution is to use a single class on each of these elements since they have something so in common. You might just add title as a class type and apply it to that class.
<div class="title movie-title"></div>
I know you mentioned this in your question, but I can't see why this wouldn't work.
Try using delegate instead of bind for multiples. Also make a unified class for all of them (I just used title)
so like this -
$('body').delegate('.title','inview', function(event, isInView, visiblePartX, visiblePartY) {
Edit - sorry linked wrong fiddle initially
see fiddle http://jsfiddle.net/d1g7sLxq/3/

Ajax CSS bugg. How do i prevent from double click in order for the css to apply?

i have a div that says "on",
And i created a ajax function that everytime a user click the div. It will change the "on" to "off" (A query based on the users column will echo out if the div id is on or off ) and if the user clicks again it will switch it back to "on" again. This is how my code looks like
$(".buttons2").click(function(){
var d = $(this).attr("id");
if(d == "off")
{
$(".buttons2").css("background-position" , "0 -30px");
$(".buttons2").attr("id", "on");
}
else if(d == "on")
{
$(".buttons2").css("background-position" , "0 -1px");
$(".buttons2").attr("id", "off");
}
});
});
My problem is that, in order for the function to work, i have to click the div 2 times. What's the problem?
But it's a switch button. It depends on what the user has in the column. If the user has for example online= 1, it should start to switch in the opposite way. Off>on , on>Off. The div is based on a query
First, you should not use the ID tag like that! Changing an ID shouldn't really happen (unless you have a very good reason). A reason your code might not work is because the first value of the ID might not be right, or because the ID is not made to be change. The code provided in the question should just work.
One way would be by classes and toggle those. Easier to understand like this (IMO):
.buttons2{
background-position: 0 -30px;
}
.toggled{
background-position: 0 -1px;
}
<div class="buttons2"> Some Content</div>
And then use jquery to toggle it:
$('.buttons2').on('click', function(){
$(this).toggleClass('toggled');
});
I changed the $('.buttons2') in your code to $(this). I'm assuming there is only one .button (which, kinda ironicly, would make id="button2), so we use the 'this' to select it (much like your var d).
It's suggested in the comment you use data-* values for the intent you want. While the data-* attributes are intented for this (eg: data-state="on"), I choose classes because of jQuery's .toggleClass() because I find this easier for toggling.

Underlining a link using JavaScript after it has been clicked twice (not necessarily consecutively)

So far, what I've done is make a link appear underlined after being clicked using this code on Bootply. However, because I'm fairly new to JavaScript, I don't know how to amend my JS function so that for the dropdown-menu link ("2") to be underlined, one must click on it twice (not consecutively necessarily), i.e., click once to let the menu dropdown and then again to underline it. What I was thinking was to include some kind of conditional statement in that function to take into consideration the special conditions that have to be met for "2" to be underlined, but I don't know how to do this.
Any ideas would be greatly appreciated!
Demo
link.onclick = function() {
this.classList.toggle('underline', ++this.dataset.clickTimes >= 2);
};
link.dataset.clickTimes = 0;
.underline {
text-decoration: underline;
}

Categories

Resources