detect click, check attribute value and text inside, and display element

detect click, check attribute value and text inside, and display element - javascript

I need to detect click of an element(.menuitem), check the text it contains.
And then based on the attribute(is-checked), hide or show other elements.
I need this only when clicking that other button.
<div class="items">
<div class="menuitem" is-checked="true">
<div class="ytp-menuitem-label">Button 1</div></div>
<div class="menuitem" is-checked="false">
<div class="ytp-menuitem-label">Button 2</div></div>
</div>
<div class="element">some content</div>
<div class="element">some more content</div>
$('.menuitem').click(function () {
if ($('.menuitem').text().trim() === "Button 2"){
if ($('[is-checked="true"]'))
$('.element').css('display', 'block');
if ($('[is-checked="false"]'))
$('.element').css('display', 'none'); }
});
Here's a JSFIDDLE, of what I have:

$('.menuitem').click(function() {
console.log($(this).text().trim())
if ($(this).text().trim() === "Button 2") {
if ($(this).attr('is-checked') == 'true') {
$('.element').css('display', 'block');
} else {
$('.element').css('display', 'none');
}
}
});
.items {
height: 30px;
margin-bottom: 5px;
}
.menuitem {
float: left;
margin-right: 10px;
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="items">
<div class="menuitem" is-checked="true">
<div class="ytp-menuitem-label">Button 1</div>
</div>
<div class="menuitem" is-checked="false">
<div class="ytp-menuitem-label">Button 2</div>
</div>
</div>
<div class="element">some content</div>
<div class="element">some more content</div>
<div class="element">even more content</div>
Use $(this).attr('is-checked') to get the value
Also use $(this).text().trim() to get the text of clicked element

You've got it a tad wrong, your if statement isn't actually looking at the element which was clicked. Try something along these lines:
$('.menuitem').click(function () {
// $(this) is a reference to the element which was clicked
if ($(this).attr('is-checked') == "true")
$('.element').css('display', 'block');
if ($(this).attr('is-checked') == "false")
$('.element').css('display', 'none');
});

Related

How can I style an element which shares the same class

I have a page which shares the same class, I want one page (top.cfm) to have a border with a background-color but I don't want the (landing page.cfm) to have the border or background-color. This is my code on jQuery. Where am I going wrong?
$(function(){
if (window.location.pathname == "common/top.cfm") {
$('.content-padding').show('.content-padding').css('background-color', '#fff', 'border', '1px solid #CCCCCC');
} else (window.location.pathname == "common/landing_page.cfm")
{
$('.content-padding').css('background-color', '#E1E1E0', 'border', 'none')
}
});

It looks like you're using an else but with a conditional. try to use an else if instead.
And you can make two separate classes and use a toggle class on them, if you want.
Code
$(document).ready(function () {
if (window.location.pathname == "common/top.cfm") {
$('#content').toggleClass('content-padding-top');
}else if(window.location.pathname == "common/landing_page.cfm"){
$('#content').toggleClass('content-padding-landing-page');
}
});
.content-padding-top{
background-color:#fff;
border:1px solid #CCCCCC;
}
.content-padding-landing-page{
background-color:#E1E1E0;
border:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container main-content content-padding content-bordered container_12 clearfix" id="content">
<div class="grid_12 clearfix">
<div class="clearfix" >
<h1>Page Content</h1>
</div>
</div>
<div>

Click outside of element to hide element

My code does this: when element .pencil is clicked on, it toggles the hidden element .pencilpanel. When clicked outside of this .test element (there are two .test elements), then this .pencilpanel should hide.
However, my problems are that:
1) When the second .test element is clicked on, the first .test element remains visible when it should be hidden. And,
2) When the first .pencil element is clicked on, and its corresponding .pencilpanel is also clicked on, it will hide .pencilpanel, when it's supposed to remain visible. Any element that is currently visible within .test, and if clicked on, should not be hidden, unless that clicked on element lies outside of the current .test element.
So I'm not getting why when a click is made on .pencilpanel, it hides it on this line if(!$(this).closest('.test').length && $('.pencilpanel').is(":visible")) {. And the fact that the first .pencilpanel remains visible when it should be hidden whenever another .pencil is clicked on. This is my code:
$(document).ready(function () {
$('.pencil').on('click', function (event) {
event.stopPropagation();
$(this).parent(".btsdiv").next(".fcmdiv").children(".pencilpanel").toggleClass("displayblock");
});
});
$(document).ready(function () {
$(document).click(function () {
if (!$(this).closest('.test').length && $('.pencilpanel').is(":visible")) {
$('.pencilpanel').removeClass("displayblock");
}
});
});
.pencilpanel {
display: none;
}
.displayblock {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
<div class="btsdiv">
<div class="pencil">✎</div>
</div>
<div class="fcmdiv">
<div class="pencilpanel">
<textarea></textarea>
</div>
</div>
</div>
<div class="test">
<div class="btsdiv">
<div class="pencil">✎</div>
</div>
<div class="fcmdiv">
<div class="pencilpanel">
<textarea></textarea>
</div>
</div>
</div>

You can use the document.activeElement to check before you close the panels. Please find the modified code.
$(document).ready(function() {
$('.pencil').on('click', function(event) {
event.stopPropagation();
closePanel();
$(this).closest(".test").find(".pencilpanel").toggleClass("displayblock");
});
$(document).on("click", function() {
if (document.activeElement.tagName != 'TEXTAREA')
closePanel();
});
});
function closePanel() {
$('.pencilpanel').removeClass("displayblock");
}
.pencilpanel {
display: none;
}
.displayblock {
display: block;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class="test">
<div class="btsdiv">
<div class="pencil">✎</div>
</div>
<div class="fcmdiv">
<div class="pencilpanel">
<textarea></textarea>
</div>
</div>
</div>
<div class="test">
<div class="btsdiv">
<div class="pencil">✎</div>
</div>
<div class="fcmdiv">
<div class="pencilpanel">
<textarea></textarea>
</div>
</div>
</div>

$(document).ready(function () {
$('.pencil').on('click', function (event) {
event.stopPropagation();
$('.pencilpanel').removeClass("displayblock");
$(this).parent().siblings().children(".pencilpanel").addClass("displayblock");
});
$(".pencilpanel").click(function () {
event.stopPropagation();
});
$(document).click(function () {
$('.pencilpanel').not(":focus").removeClass("displayblock");
});
});

$(document).ready(function () {
$('.pencilpanel').hide();
$('.pencil').on('click', function (event) {
event.stopPropagation();
var elm=$(this).parent(".btsdiv").next(".fcmdiv").children(".pencilpanel");
$('.pencilpanel').not(elm).hide();
if(elm.css('display') == 'none') elm.css('display','inline-block');
else elm.css('display','none');
});
$("*").on('click',function (event) {
event.stopPropagation();
if($(this).hasClass("pencil")) return;
if($(this).hasClass("pencilpanel")) return;
if($(this).parent().hasClass("pencilpanel")) return;
$('.pencilpanel').hide();
});
});
.pencil {
cursor: pointer;
}
.pencil, .pencilpanel {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
<div class="btsdiv">
<div class="pencil">✎</div>
</div>
<div class="fcmdiv">
<div class="pencilpanel">
<textarea></textarea>
</div>
</div>
</div>
<div class="test">
<div class="btsdiv">
<div class="pencil">✎</div>
<br>
</div>
<div class="fcmdiv">
<div class="pencilpanel">
<textarea></textarea>
</div>
</div>
</div>

Adding and removing classes depending on other elements

So I have carousel with slides (works on fullPage.js):
<div id="myContainer">
<div class="section" data-anchor="skynet">
<div class="slide one" data-anchor="main">
Slide 1
</div>
<div class="slide two" data-anchor="about_us">
Slide 2
</div>
<div class="slide three" data-anchor="faq">
Slide 3
</div>
<div class="slide four" data-anchor="news">
Slide 4
</div>
</div>
</div>
And I have some blocks with backgrounds
<div class="bg-main" id="bgOne"></div>
<div class="bg-main" id="bgTwo"></div>
<div class="bg-main" id="bgThree"></div>
<div class="bg-main" id="bgFour"></div>
Slides swaps by adding class active to blocks with class .one, .two etc.
I try to add class to blocks with background depend on active slide. For example - if .slide.two has class .active, add class to block #bgTwo.
Here my current JS. It doesn't work:
<script type="text/javascript">
$(document).ready(function(){
if ( $('#myContainer .one').hasClass('active') ) {
$('.bg-main').removeClass('active');
$('#bgOne').addClass('active');
} else if ( $('#myContainer .two').hasClass('active') )
{
$('.bg-main').removeClass('active');
$('#bgTwo').addClass('active');
}
});
</script>

Use the callback onSlideLeave
Demo
$(document).ready(function() {
$('#fullPage').fullpage({
onSlideLeave: function(link, secIdx, sldIdx, dir, next) {
$('.test .bg-main').removeClass('active');
$('.test .bg-main').eq(next).addClass('active');
}
});
});
.slide {
text-align: center
}
.test {
position: fixed;
top: 75%;
right:calc(50% - 220px);
}
.bg-main {
height: 30px;
width: 100px;
background: grey;
display:inline-block;
text-align:center;
outline:1px solid #fff;
margin:0;
}
.one,
#bgOne.active {
background: #fc0;
}
.two,
#bgTwo.active {
background: #f00;
}
.three,
#bgThree.active {
background: #0f0;
}
.four,
#bgFour.active {
background: #00f;
}
<link href='https://cdn.jsdelivr.net/jquery.fullpage/2.9.4/jquery.fullpage.min.css' rel='stylesheet'>
<div id="fullPage">
<div class="section" data-anchor="skynet">
<div class="slide one" data-anchor="main">
Slide 1
</div>
<div class="slide two" data-anchor="about_us">
Slide 2
</div>
<div class="slide three" data-anchor="faq">
Slide 3
</div>
<div class="slide four" data-anchor="news">
Slide 4
</div>
</div>
</div>
<div class='test'>
<div class="bg-main active" id="bgOne">1</div>
<div class="bg-main" id="bgTwo">2</div>
<div class="bg-main" id="bgThree">3</div>
<div class="bg-main" id="bgFour">4</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdn.jsdelivr.net/jquery.fullpage/2.9.4/jquery.fullpage.min.js'></script>

So i found out that fullpage.js use event afterSlideLoad. So thats my solution:
<script type="text/javascript">
$(document).ready(function() {
$('#myContainer').fullpage({
anchors: ['skynet'],
menu: '#menu',
scrollingSpeed: 500,
normalScrollElements: '.modal',
scrollOverflow: true,
afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
var loadedSlide = $(this);
if(slideIndex == 0){
$('.bg-main').removeClass('active');
$('#bgOne').addClass('active');}
if(slideIndex == 1){
$('.bg-main').removeClass('active');
$('#bgTwo').addClass('active');}
if(slideIndex == 2){
$('.bg-main').removeClass('active');
$('#bgThree').addClass('active');}
if(slideIndex == 3){
$('.bg-main').removeClass('active');
$('#bgFour').addClass('active');}
}
})
});
</script>
Class is added only after the slide is changed, and not during the process itself. The background does not change as fast as I'd like, but this is the best thing I could achieve.

The perfect solution is to extend the fullpage.js to handle the feature.
This is a workaround:
<script type="text/javascript">
var updateClasses = function(){
var activeClass = 'active';
var eq = $('#myContainer').children(activeClass).eq();
var bgMain = $('.bg-main').removeClass(activeClass);
bgMain.eq(eq).addClass(activeClass);
};
$(document).ready(function(){
$(".fp-controlArrow").on("click.updateClasses", function(){
updateClasses();
});
});
</script>

Refactoring jQuery repeating pattern

I have painted my self into a corner in order to quickly prototype.
What's the best way to refactor the following jQuery code? Its functionality is to toggle between some sidebar navigation items. I need it to be more dynamic in order to be scalable.
Would you add the IDs inside the if statements, in an array and iterate through them? Use variables? Create a function and call it on the html side onClick? No matter what I think of, it stills leads to a bunch of repeating code.
Thank you!
// TOGGLING LEFT NAVIGATION
$('#settingsClick').click(function() {
if( $('#addContainer, #noteContainer, #logoContainer, #themeContainer').is(':visible') ) {
$('#addContainer').slideUp(350);
$('#noteContainer').slideUp(350);
$('#logoContainer').slideUp(350);
$('#settingsContainer').slideDown(350);
$('#themeContainer').slideUp(350);
} else {
$('#settingsContainer').slideToggle(350);
}
});
$('#addClick').click(function() {
if( $('#settingsContainer, #noteContainer, #logoContainer, #themeContainer').is(':visible') ) {
$('#settingsContainer').slideUp(350);
$('#noteContainer').slideUp(350);
$('#logoContainer').slideUp(350);
$('#addContainer').slideDown(350);
$('#themeContainer').slideUp(350);
} else {
$('#addContainer').slideToggle(350);
}
});
$('#noteClick').click(function() {
if( $('#settingsContainer, #addContainer, #logoContainer, #themeContainer').is(':visible') ) {
$('#settingsContainer').slideUp(350);
$('#addContainer').slideUp(350);
$('#logoContainer').slideUp(350);
$('#noteContainer').slideDown(350);
$('#themeContainer').slideUp(350);
} else {
$('#noteContainer').slideToggle(350);
}
});
$('#logoClick').click(function() {
if( $('#settingsContainer, #addContainer, #noteContainer, #themeContainer').is(':visible') ) {
$('#settingsContainer').slideUp(350);
$('#addContainer').slideUp(350);
$('#noteContainer').slideUp(350);
$('#logoContainer').slideDown(350);
$('#themeContainer').slideUp(350);
} else {
$('#logoContainer').slideToggle(350);
}
});
$('#themeClick').click(function() {
if( $('#settingsContainer, #addContainer, #noteContainer, #logoContainer').is(':visible') ) {
$('#settingsContainer').slideUp(350);
$('#addContainer').slideUp(350);
$('#noteContainer').slideUp(350);
$('#logoContainer').slideUp(350);
$('#themeContainer').slideDown(350);
} else {
$('#themeContainer').slideToggle(350);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="settingsClick">Click Me</a><br>
<div id="settingsContainer">Content...</div>
<br><br>
<a id="addClick">Click Me</a><br>
<div id="addContainer">Content...</div>
<br><br>
<p> Etc... Etc....</p>

You should group using the common CSS class, i.e. header and content. Using the established relationship you can target the others content holder and content associated with the current clicked header element.
$('.container .header').on('click', function() {
//Get the current element
var $this = $(this);
//find the content
var $content = $this.closest('.container').find('.content'); //$this.next()
//get all contents
var content = $('.container .content');
//Slide up others
content.not($content).slideUp(350);
//Slide down
$content.slideToggle(350);
});
.content {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header" id="settingsClick">Click Me</div>
<div class="content" id="settingsContainer">Content...</div>
</div>
<div class="container">
<div class="header" id="addClick">Click Me</div>
<div class="content" id="addContainer">Content...</div>
</div>
<div class="container">
<div class="header" id="noteClick">Click Me</div>
<div class="content" id="noteContainer">Content...</div>
</div>

the best bet would be to do it like so
$(document).on('click', ".trigger", function() {
var sibling_content = $(this).siblings(".content");
if (!sibling_content.hasClass('active')) {
$(".content").slideUp('slow').removeClass('active');
sibling_content.slideDown('slow').addClass('active');
} else {
sibling_content.slideUp('slow').removeClass('active');
}
})
.trigger {
background-color: red;
color: white;
font-size: 16px;
}
.content {
background-color: blue;
color: white;
font-size: 16px;
padding: 20px 0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="trigger">trigger</div>
<div class="content">content</div>
</div>
<div class="container">
<div class="trigger">trigger</div>
<div class="content">content</div>
</div>
<div class="container">
<div class="trigger">trigger</div>
<div class="content">content</div>
</div>
<div class="container">
<div class="trigger">trigger</div>
<div class="content">content</div>
</div>

how to check if it was the last element

how can I check if it was the last div? If it was I need to remove all classes "ready"
html:
<div class="green"></div>
<div class="orange"></div>
<div class="red"></div>
<div class="green"></div>
<div class="orange"></div>
js:
$(function() {
setInterval(showBlock, 1000);
function showBlock() {
var x = $("div:first").addClass("ready");
var c = $("div");
$(".ready").css("display", "block");
if (c.hasClass("ready")) {
$(".ready:last").next().addClass("ready");
}
}
})
;

Looking at your code what I understand is you want display one div after each second. For that I'll suggest following approach.
First add hidden class to all divs and then remove it from first hidden div at each second.
$(function() {
$('div').addClass('hidden');
var i = setInterval(showBlock, 1000);
function showBlock() {
var x = $("div.hidden:first").removeClass("hidden");
if($("div.hidden").length == 0) {
clearInterval(i);
}
}
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="green">Green</div>
<div class="orange">Orange</div>
<div class="red">Red</div>
<div class="green">Green</div>
<div class="orange">Orange</div>

As far as I understand your problem, following solution must work in your case:
$(function() {
setInterval(showBlock, 1000);
function showBlock() {
var ready_divs = $("div.ready").length;
var total_divs = $("div").length;
if(ready_divs!=total_divs){
if(ready_divs==0){
$("div:first").addClass('ready');
}else{
$("div.ready:last").next('div').addClass('ready');
}
}else{
$("div").removeClass('ready')
}
}
});
div{
width: 20px;
height: 20px;
border:1px solid red;
}
div.ready{
border:3px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="green"></div>
<div class="orange"></div>
<div class="red"></div>
<div class="green"></div>
<div class="orange"></div>

Develop Reference

JavaScript is the programming language of the Web.

detect click, check attribute value and text inside, and display element - javascript

Related

How can I style an element which shares the same class

Click outside of element to hide element

Adding and removing classes depending on other elements

Refactoring jQuery repeating pattern

how to check if it was the last element

Categories

Resources