Javascript Function back to it's original place - javascript

I'm not actually a programmer but I have to do this website work properly. And for that I'll need your help.
I'm messing with some javascript and I manage to maek this:
<script>
function funcaosabores1() {
document.getElementById("testeagora1").innerHTML = "";
document.getElementById('contento1').style.visibility="visible";
document.getElementById('contento2').style.visibility="hidden";
document.getElementById('contento3').style.visibility="hidden";
document.getElementById('contento4').style.visibility="hidden";
document.getElementById('contento5').style.visibility="hidden";
}
function funcaosabores2() {
document.getElementById("testeagora2").innerHTML = "";
document.getElementById('contento2').style.visibility="visible";
document.getElementById('contento1').style.visibility="hidden";
document.getElementById('contento3').style.visibility="hidden";
document.getElementById('contento4').style.visibility="hidden";
document.getElementById('contento5').style.visibility="hidden";
}
function funcaosabores3() {
document.getElementById("testeagora3").innerHTML = "";
document.getElementById('contento3').style.visibility="visible";
document.getElementById('contento1').style.visibility="hidden";
document.getElementById('contento2').style.visibility="hidden";
document.getElementById('contento4').style.visibility="hidden";
document.getElementById('contento5').style.visibility="hidden";
}
function funcaosabores4() {
document.getElementById("testeagora4").innerHTML = "";
document.getElementById('contento4').style.visibility="visible";
document.getElementById('contento1').style.visibility="hidden";
document.getElementById('contento2').style.visibility="hidden";
document.getElementById('contento3').style.visibility="hidden";
document.getElementById('contento5').style.visibility="hidden";
}
function funcaosabores5() {
document.getElementById("testeagora5").innerHTML = "";
document.getElementById('contento5').style.visibility="visible";
document.getElementById('contento1').style.visibility="hidden";
document.getElementById('contento2').style.visibility="hidden";
document.getElementById('contento3').style.visibility="hidden";
document.getElementById('contento4').style.visibility="hidden";
}
</script>
And I can't find on how to make for example: funcaosabores1 is clicked and is now visible, when I click funcaosabores2, the first one is hidden and the second is showing. But I can't click on the first one back because it was already clicked. (Idk if it's called return)
This is the div's called in the script:
<div class="animacao_saborgingerale" id="contento2" style="visibility:hidden;"></div>
<div class="animacao_saboruvasyrah" id="contento3" style="visibility:hidden;"></div>
<div class="animacao_sabortangerina" id="contento4" style="visibility:hidden;"></div>
<div class="animacao_saboruvabranca" id="contento5" style="visibility:hidden;"></div>
<div class="sabor-melancia"><p onclick="funcaosabores1()" id="testeagora1">MELANCIA</p> </div>
<div class="sabor-gingerale"><p onclick="funcaosabores2()" id="testeagora2">GINGER ALE</p></div>
<div class="sabor-uvasyrah"><p onclick="funcaosabores3()" id="testeagora3">UVA SYRAH</p></div>
<div class="sabor-tangerina"><p onclick="funcaosabores4()" id="testeagora4">TANGERINA</p></div>
<div class="sabor-uvabranca"><p onclick="funcaosabores5()" id="testeagora5">UVA BRANCA</p></div>
This seems quite messy but I'm here if you guys can help me! Thanks.
The CodePen of how it is right now. #nielsdebruin

I think you just want to do something like this:
let prevButton;
let prevContent;
function toggle(e) {
if (prevButton) prevButton.style.visibility = 'visible';
prevButton = e.target;
e.target.style.visibility = 'hidden';
let id = e.target.id;
let number = id.slice(-1);
if (prevContent) prevContent.style.visibility = 'hidden';
prevContent = document.getElementById('contento' + number);
prevContent.style.visibility = 'visible';
}
<div class="content animacao_saborgingerale" id="contento1" style="visibility:hidden;">1</div>
<div class="content animacao_saborgingerale" id="contento2" style="visibility:hidden;">2</div>
<div class="content animacao_saboruvasyrah" id="contento3" style="visibility:hidden;">3</div>
<div class="content animacao_sabortangerina" id="contento4" style="visibility:hidden;">4</div>
<div class="content animacao_saboruvabranca" id="contento5" style="visibility:hidden;">5</div>
<div class="button sabor-melancia"><p onclick="toggle(event)" id="testeagora1">MELANCIA</p> </div>
<div class="button sabor-gingerale"><p onclick="toggle(event)" id="testeagora2">GINGER ALE</p></div>
<div class="button sabor-uvasyrah"><p onclick="toggle(event)" id="testeagora3">UVA SYRAH</p></div>
<div class="button sabor-tangerina"><p onclick="toggle(event)" id="testeagora4">TANGERINA</p></div>
<div class="button sabor-uvabranca"><p onclick="toggle(event)" id="testeagora5">UVA BRANCA</p></div>

Related

Show/Hide the same div and close all other divs

I am trying to write a code when click on the link it toggleSlide the relevant div and hide all other divs. But the issue I am facing, when I click to close same div then it reopens.
jQuery(document).ready(function($){
var facetTitle = $('.facetwp-facet-title');
facetTitle.on('click', facetAccordian);
// Facet Accordian Function
function facetAccordian(){
var _this = $(this);
$(".filters-holder .facetwp-facet-title").removeClass("opened");
$(".filters-holder .facetwp-facet").slideUp("opened");
var filters = _this.parent().find('.facetwp-facet');
_this.toggleClass('opened');
filters.slideToggle();
}
});
.facetwp-facet {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filters-holder">
<div class="fl-col">
<div class="facetwp-bb-module">
<h4 class="facetwp-facet-title">Type</h4>
<div class="facetwp-facet">
Content Here
</div>
</div>
</div>
<div class="fl-col">
<div class="facetwp-bb-module">
<h4 class="facetwp-facet-title">Size</h4>
<div class="facetwp-facet">
Content Here
</div>
</div>
</div>
</div>
Basic we have to check if the one you click on already is "opened"
var opened = _this.hasClass("opened");
Then we can use that to determent if we shall toggle the class or not.
if (!opened) {
_this.toggleClass('opened');
filters.slideToggle();
}
Demo
jQuery(document).ready(function($) {
var facetTitle = $('.facetwp-facet-title');
facetTitle.on('click', facetAccordian);
// Facet Accordian Function
function facetAccordian() {
var _this = $(this);
var n = _this.hasClass("opened");
$(".filters-holder .facetwp-facet-title").removeClass("opened");
$(".filters-holder .facetwp-facet").slideUp("opened");
var filters = _this.parent().find('.facetwp-facet');
if (!n) {
_this.toggleClass('opened');
filters.slideToggle();
}
}
});
.facetwp-facet {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filters-holder">
<div class="fl-col">
<div class="facetwp-bb-module">
<h4 class="facetwp-facet-title">Type</h4>
<div class="facetwp-facet">
Content Here
</div>
</div>
</div>
<div class="fl-col">
<div class="facetwp-bb-module">
<h4 class="facetwp-facet-title">Size</h4>
<div class="facetwp-facet">
Content Here
</div>
</div>
</div>
</div>

how to make the button click executes code only one time

I want the button with the id #show-text-area execute the postButton(); function only once so it won't create a second elements whenever clicked (i want it to create it for only one time and won't work again until clicked another button).
Hope my question was clear enough.
HTML
<div id="post-creator" class="creator-container">
<div class="post-type">
<div class="text-post" id="post">
<button onclick="postButton();">Post</button>
</div>
<div class="media-post">Image & Video</div>
<div class="link-post">Link</div>
</div>
<div class="post-title">
<input type="text" class="title-text" name="post-title" placeholder="Title">
</div>
<div class="post-content">
</div>
<div class="post-footer">
<div class="spoiler">Spoiler</div>
<div class="nsfw">NSFW</div>
<button class="post">post</button>
</div>
</div>
Javascript
let postButton = function() {
let textarea = document.createElement('textarea');
textarea.setAttribute('class', 'post-data');
textarea.setAttribute('placeholder', 'Text (optional)');
document.querySelector('.post-content').appendChild(textarea);
}
You could disable the button after activation, this has the benefit of informing the user that further clicks won't do anything.
let postButton = function() {
let textarea = document.createElement('textarea');
textarea.setAttribute('class', 'post-data');
textarea.setAttribute('placeholder', 'Text (optional)');
document.querySelector('.post-content').appendChild(textarea);
document.getElementsByTagName("button")[0].disabled = true;
}
Otherwise you could simply have the function short-circuit if it has already been called.
// alreadyPosted is scoped outside of the function so it will retain its value
// across calls to postButton()
let alreadyPosted = false;
let postButton = function() {
// do nothing if this isn't the first call
if (alreadyPosted) { return; }
// mark the function as called
alreadyPosted = true;
let textarea = document.createElement('textarea');
textarea.setAttribute('class', 'post-data');
textarea.setAttribute('placeholder', 'Text (optional)');
document.querySelector('.post-content').appendChild(textarea);
document.getElementsByTagName("button")[0].disabled = true;
}
The following works.
let postButton = function(event) {
event.target.disabled = true;
let textarea = document.createElement('textarea');
textarea.setAttribute('class', 'post-data');
textarea.setAttribute('placeholder', 'Text (optional)');
document.querySelector('.post-content').appendChild(textarea);
};
document.getElementById('post').addEventListener('click', postButton);
<div id="post-creator" class="creator-container">
<div class="post-type">
<div class="text-post" id="post">
<button>Post</button>
</div>
<div class="media-post">Image & Video</div>
<div class="link-post">Link</div>
</div>
<div class="post-title">
<input type="text" class="title-text" name="post-title" placeholder="Title">
</div>
<div class="post-content">
</div>
<div class="post-footer">
<div class="spoiler">Spoiler</div>
<div class="nsfw">NSFW</div>
<button class="post">post</button>
</div>
</div>
You can also use hide show function on textarea if you do not want to create one.
let postButton = function() {
let d = document.getElementById('post_data').style.display;
if(d=='none'){
document.getElementById('post_data').style.display = 'block';
}
}
document.getElementById('post_data').style.display = 'none';
document.getElementById('post_btn').addEventListener('click', postButton);
<div id="post-creator" class="creator-container">
<div class="post-type">
<div class="text-post">
<button id="post_btn">Post</button>
</div>
<div class="media-post">Image & Video</div>
<div class="link-post">Link</div>
</div>
<div class="post-title">
<input type="text" class="title-text" name="post-title" placeholder="Title">
</div>
<div class="post-content">
<textarea class="post-data" id="post_data" placeholder="Text (optional)"></textarea>
</div>
<div class="post-footer">
<div class="spoiler">Spoiler</div>
<div class="nsfw">NSFW</div>
<button class="post">post</button>
</div>
</div>

Javascript function to rotate some div elements on page

I have some javascript function - shows me a popup with some texts. I try to rotate two "section" elements, but if I add to HTML one more section with class custom, the page shows only first element. Please, help me to add 1-2 more elements and to rotate it. The idea is to have 2 or more elements with class custom and to show it in random order, after last to stop. Thanks.
setInterval(function () {
$(".custom").stop().slideToggle('slow');
}, 2000);
$(".custom-close").click(function () {
$(".custom-social-proof").stop().slideToggle('slow');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="custom">
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
<img src="checkbox.png">
</div>
<div class="custom-notification-content-wrapper">
<p class="custom-notification-content">
Some Text
</p>
</div>
</div>
<div class="custom-close"></div>
</div>
</section>
Set section display none of page load instead of first section. Check below code of second section:
<section class="custom" style=" display:none">
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
<img src="checkbox.png">
</div>
<div class="custom-notification-content-wrapper">
<p class="custom-notification-content">
Mario<br>si kupi <b>2</b> matraka
<small>predi 1 chas</small>
</p>
</div>
</div>
<div class="custom-close"></div>
</div>
</section>
And you need to make modification in your jQuery code as below:
setInterval(function () {
var sectionShown = 0;
var sectionNotShown = 0;
$(".custom").each(function(i){
if ($(this).css("display") == "block") {
sectionShown = 1;
$(this).slideToggle('slow');
} else {
if (sectionShown == 1) {
$(this).slideToggle('slow');
sectionShown = 0;
sectionNotShown = 1;
}
}
});
if (sectionNotShown == 0) {
$(".custom:first").slideToggle('slow');
}
}, 2000);
Hope it helps you.

hide div blocks and show expansion button on menu using cookie

I need some help implementing jQuery cookies.
I made a masonry grid in codepen where you can minimize and maximize the div blocks.
<div class="container">
<br>
<div class="row">
<div id="panel1" class="col-xs-6 col-lg-4">
<div id="title"><b>Block 1</b>
<div class="button" onclick="Close1()">-</div>
</div>
1</div>
<div id="panel2" class="col-xs-6 col-lg-4 tall">
<div id="title"><b>Block 2</b>
<div class="button" onclick="Close2()">-</div>
</div>
2</div>
<div class="col-xs-6 col-lg-4">3</div>
<div class="col-xs-6 col-lg-4 tall">4</div>
<div class="col-xs-6 col-lg-4 taller">5</div>
<div class="col-xs-6 col-lg-4">6</div>
<div class="col-xs-6 col-lg-4 tall">7</div>
<div class="col-xs-6 col-lg-4">8</div>
<div class="col-xs-6 col-lg-4">9</div>
<div class="col-xs-6 col-lg-4 taller">10</div>
</div>
</div>
<div id="footer">
<div id="icon1" class="icon" onclick="Open1()">Open 1</div>
<div id="icon2" class="icon" onclick="Open2()">Open 2</div>
</div
$('.row').masonry({
itemSelector : '.col-xs-6'
});
"use strict";
// End of what's configurable.
var clicked = null;
var pane = document.getElementById('panel1');
function Close1() {
document.getElementById("panel1").style.opacity = "0";
document.getElementById("panel1").style.display = "none";
document.getElementById("icon1").style.display = "inline-block";
}
function Open1() {
document.getElementById("panel1").style.opacity = "1";
document.getElementById("panel1").style.display = "block";
document.getElementById("icon1").style.display = "none";
}
function Close2() {
document.getElementById("panel2").style.opacity = "0";
document.getElementById("panel2").style.display = "none";
document.getElementById("icon2").style.display = "inline-block";
}
function Open2() {
document.getElementById("panel2").style.opacity = "1";
document.getElementById("panel2").style.display = "block";
document.getElementById("icon2").style.display = "none";
}
https://codepen.io/ariellbell/pen/bQMyOX
I want to be able to store these settings using jquery cookies (and/or html web storage) and after the user clicks on the button maybe add an (ajax) refresh setting to reorganize the div blocks in the masonray.
I am new to using jquery (and also cookie settings).
So i have difficulty implementing this in the code.
Any help is appreciated!
Thanks
So i made a new pen with cleaned up jquery functions and added the cookies. However the cookies work partly. I have trouble setting it for multiple divs.
What goes wrong?
if(Cookies.get("cohide")=="Enabled"){
$(".block1").addClass('minimalize');
$(".icon").addClass('inline');
}
if(Cookies.get("coshow")=="Enabled"){
$(".block1").removeClass('minimalize');
$(".icon").removeClass('inline');
}
"use strict";
// End of what's configurable.
//var clicked = null;
$('.block1').click(function(){
// remove set darkmode cookie, add lightmode cookie
Cookies.remove('coshow');
Cookies.set('cohide', 'Enabled');
$(this).addClass('minimalize');
var id1 = $(this).data().value;
//var y = document.getElementById(id1);
document.getElementById(id1).classList.add("inline");
console.log("Setted Cookie cohide");
});
$('.icon').click(function(){
Cookies.remove('cohide');
Cookies.set('coshow', 'Enabled');
$(this).removeClass('inline');
var id2 = $(this).data().value;
document.getElementById(id2).classList.remove("minimalize");
// document.getElementById(id1).style.display = "inline";
console.log("Setted Cookie coshow");
});
https://codepen.io/ariellbell/pen/jQKYaz

How to find elements with attr id after click?

Basically, I'm working with three tabs called 'Monday', 'Tuesday' and 'Favorites'. I have a toggle icon which is an empty heart at start => ('.favorite i') within each box. If I'm in Monday and click on the icon the empty heart turns to be filled out and the parent is cloned and added to the '#fav' tab.
When clicking in the heart within the cloned div the whole box gets removed from '#fav' tab but the icon within the original div doesn't get empty and keeps filled out.
So I thought the only way to do this was to grab the id from the original and cloned div which is the same and change the toggle class from there.
Any help is appreciated!
I've created this fiddle to give a better overview of the issue:
https://fiddle.jshell.net/itsfranhere/nbLLc3L0/44/
HTML:
<div class="container">
<div class="tabs_main">
<div class="col-md-5"><a data-target="#mon" class="btn active" data-toggle="tab">Monday</a></div>
<div class="col-md-5"><a data-target="#tue" class="btn active" data-toggle="tab">Tuesday</a></div>
<div class="col-md-2"><a data-target="#fav" class="btn active" data-toggle="tab"><i class="fa fa-heart" aria-hidden="true"></i></a></div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="mon">
<br>
<div class="spaces">
<div class="box-container">
<div class="box not-selected" id="box1">
<i class="fa fa-heart-o" aria-hidden="true"></i>
</div>
<div class="box-container">
<div class="box not-selected" id="box1">
<i class="fa fa-heart-o" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="tab-pane" id="tue">
<br>
<div class="spaces">
</div>
</div>
<div class="tab-pane" id="fav">
<br>
</div>
</div>
</div>
JS:
// Clones
$('div.tab-pane').on('click', '.favorite', function(e) {
e.preventDefault();
var par = $(this).parents('.box');
var id = $(this).parents('.parent');
var idFind = id.attr("id");
var idComplete = ('#' + idFind);
console.log(idComplete);
//TOGGLE FONT AWESOME ON CLICK
if ($(par).hasClass('selected')) {
par.find('.favorite i').toggleClass('fa-heart fa-heart-o');
} else {
par.find('.favorite i').toggleClass('fa-heart-o fa-heart');
};
if ($(par.hasClass('selected')) && ($('i').hasClass('fa-heart-o'))) {
par.closest('.selected').remove();
var getIcon = $(this).find('.favorite i').toggleClass('fa-heart-o fa-heart');
}
// Clone div
var add = $(this).parent().parent().parent();
add.each(function(){
if ($(add.find('.not-selected .favorite i').hasClass('fa-heart'))) {
var boxContent = $(add).clone(true, true);
var showHide = $(boxContent).find(".session").addClass('selected').removeClass('not-selected');
var get = $(boxContent).html();
var temp = localStorage.getItem('sessions');
var tempArray = [];
tempArray.push(get);
var myJSONString = JSON.stringify(tempArray);
var parseString = $.parseJSON(myJSONString);
var finalString = myJSONString.replace(/\r?\\n/g, '').replace(/\\/g, '').replace(/^\[(.+)\]$/,'$1').replace (/(^")|("$)/g, '');
var myJSONString = localStorage.setItem('sessions', finalString);
$("#fav").append(tempArray);
};
});
});
What I've tried..
var id = $(this).parents('.parent');
var idFind = id.attr("id");
var idComplete = ('#' + idFind);
if ($(par.hasClass('selected')) && ($('i').hasClass('fa-heart-o'))) {
par.closest('.selected').remove();
var getIcon = $(idComplete).find('.favorite i').toggleClass('fa-heart-o fa-heart');
}

Categories