I have multiple with various div inside. On click of more or less a tag I want to display specific i.e. display_on_click
And I want to add that class only for 2 minutes after that remove that class and hide div
My HTML code as below:
$('body').on("click", ".more, .less", function() {
var obj = $(this);
obj.closest('.product_info').find('.display_on_click').addClass('display_on_click_show');
});
.display_on_click {
display: none
}
.display_on_click.display_on_click_show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<ol class="item_wrapper">
<li class="product_info">
<div class="title">
<h3>Title here</a>
</div>
<div class="incre_decre">
<a class="more">+</a>
<a class="less">+</a>
</div>
<div class="display_on_click">Updated</div>
</li>
<li class="product_info">
<div class="title">
<h3>Title here</a>
</div>
<div class="incre_decre">
<a class="more">+</a>
<a class="less">+</a>
</div>
<div class="display_on_click">Updated</div>
</li>
<li class="product_info">
<div class="title">
<h3>Title here</a>
</div>
<div class="incre_decre">
<a class="more">+</a>
<a class="less">+</a>
</div>
<div class="display_on_click">Updated</div>
</li>
</ol>
</div>
Anyone have idea what I am doing wrong then let me know.
And I want to add that class only for 2 minutes after that remove that class and hide
I would do it like this:
$('body').on("click", ".more, .less", function() {
let parentLi = $(this).parent().parent();
let elementToManipulate = obj.find('.display_on_click');
elementToManipulate.addClass('display_on_click_show');
setTimeout(()=> {
elementToManipulate.removeClass('display_on_click_show')
}, 120000);
});
Instead of using closests I'm grabbing the parent of the parent which is the <li>. You can use closest to grab it. Once I am in the parent li, I find the child with the .display... class (the elementToManipulate object).
Then I add the classes and create a setTimeout to remove the class after 120.000 miliseconds (60sec * 2 * 1000msec)
<button onClick='OpenDiv'>Open</button>
function OpenDiv(){
let div = document.getElementById('BoxOne')
if (div.style.display == 'flex') {
div.style.display = 'none';
else
div.style.display = 'flex';
}
I hope this will work 👍
Related
Question correction:
I am trying to hide the entire 'li' block if the ptag inside of the 'li' is empty.
The p tag resides inside of the 'li' in a div with the class of
aaProfileDataWrapper
So if that p tag has no text inside of it then the entire 'li' need to hide including the labels and anything else it holds.
var divs = $(".aaProfileDataWrapper");
divs.each(function () {
var div = $(this);
if (div.next().html() === "<p></p>") {
div.hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="aaProfilePhone">
<label>Office 2 Phone:</label>
<div class="aaProfileDataWrapper">
<p></p>
</div>
<div class="aaInlineValidationWrapper">
<div class="aaValidationWrapper-Inner">
<span class="aaInlineValidationIcon"></span>
<span class="aaValidationTxt"></span>
</div>
</div>
</li>
All you need to do is query for al the p elements within any div element that has the aaProfileDataWrapper class that, themselves, are children of a li element. Then, you can loop over those p elements and, if they are empty, hide the li ancestor.
// Loop over all the p elements within the div elements that
// have the right class, that are inside of li elements
$("li div.aaProfileDataWrapper p").each(function (idx, el) {
// Check the p to see if it's empty
if ($(el).html() === "") {
$(el).closest("li").hide(); // Hide the nearest li ancestor
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id="aaProfilePhone">
<label>Office 1 Phone:</label>
<div class="aaProfileDataWrapper">
<p></p>
</div>
<div class="aaInlineValidationWrapper">
<div class="aaValidationWrapper-Inner">
<span class="aaInlineValidationIcon"></span>
<span class="aaValidationTxt"></span>
</div>
</div>
</li>
<li id="aaProfilePhone">
<label>Office 2 Phone:</label>
<div class="aaProfileDataWrapper">
<p>something</p>
</div>
<div class="aaInlineValidationWrapper">
<div class="aaValidationWrapper-Inner">
<span class="aaInlineValidationIcon"></span>
<span class="aaValidationTxt"></span>
</div>
</div>
</li>
</ul>
Plain old JavaScript to the rescue. Pleas let me know if there is any doubt.
const divs = document.getElementsByClassName('some-class');
Array.from(divs).forEach((div) => {
const p = div.querySelector('p');
if (p && !p.innerText) {
div.style.display = 'none';
} else {
div.style.display = null;
}
});
<div class='some-class'>
<p>Show</p>
</div>
<div class='some-class'>
<p></p>
Hide
</div>
<div class='some-class'>
<p>Show</p>
</div>
<div class='some-class'>
<p></p>
Hide
</div>
<div class='some-class'>
<p>Show</p>
</div>
You can use find() to search for a <p> and then use text().length to see if it's empty.
var divs = $(".aaProfileDataWrapper");
divs.each(function () {
var p = $(this).find("p")
if (!p.text().length > 0) {
p.hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="aaProfileDataWrapper">
<p>hello world</p>
</div>
<div class="aaProfileDataWrapper">
<p>hello world</p>
</div>
<div class="aaProfileDataWrapper">
<p></p>
</div>
I'm having difficulty writing the document.querySelector for the following code. Currently I've written this code as querySelector but it does not encompass everything...
Please help me improve this, thank you.
Edit: as there seemed to be some confusion, let me elaborate. I would like all the elements, from div, a, img, everything to be encompassed in the querySelector.
var areaa = document.querySelector("#menu #envelope #links");
<div id="menu">Click here to browse the internet.
<div id="envelope">
<div id="links" >
<div>
<a id="g" class="redirect">
<img id="google" src="assets/google.png" />
</a>
</div>
<div style="width: 20%;"></div>
<div>
<a id="s" class="redirect">
<img id="sava" src="assets/Logo_Sava.png"/>
</a>
</div>
</div>
</div>
</div>
Edit 2 - as more code was required (the href elements are removed / added as needed)...
var menu = document.getElementById("menu");
var areaa = document.querySelectorAll(".areaa");
menu.addEventListener("mouseenter", addHref);
//areaa.addEventListener("mouseleave", remHref);
document.addEventListener("mousemove", function(){
if(this != areaa){
remHref();
}
});
menu.addEventListener("click", addHref);
document.addEventListener("click", function (){
if (this != areaa){
remHref();
}
});
var g = document.getElementById("g");
var s = document.getElementById("s");
function remHref (){
if (g.hasAttribute("href")){
g.removeAttribute("href");
}
if (s.hasAttribute("href")){
s.removeAttribute("href");
}
}
function addHref (){
setTimeout(activate, 250);
}
function activate (){
document.getElementById("g").setAttribute("href", "https://www.google.com");
document.getElementById("s").setAttribute("href", "https://www.example.com");
}
you might want to add a class to all elements you want to be captured, then use document.querySelectorAll
var areaa = document.querySelectorAll(".my-class");
html shoud look like this:
<div id="menu" class="my-class">Click here to browse the internet.
<div id="envelope" class="my-class">
<div id="links" class="my-class">
<div>
<a id="g" class="redirect">
<img class="my-class" id="google" src="assets/google.png" />
</a>
</div>
<div style="width: 20%;"></div>
<div>
<a id="s" class="redirect">
<img id="sava" src="assets/Logo_Sava.png"/>
</a>
</div>
</div>
</div>
If you want to select everything you can use the below:
var areaa = document.querySelectorAll("#menu #envelope #links *");
If you want to be more specific you can do the following (the code below will select all of the anchor tags and images inside #links):
var areaa = document.querySelectorAll("#menu #envelope #links a, #menu #envelope #links img");
You can use querySelectorAll
The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.
Learn more: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
You can use it like this:
var areaa = document.querySelectorAll('*');
This will return all items.
You can replace document with the container if you want to restrict this to a specific div.
2 things, either add a class to every div
<div id="menu" class="area">Click here to browse the internet.
<div id="envelope" class="area">
<div id="links" class="area" >
<div>
<a id="g" class="redirect">
<img id="google" src="assets/google.png" />
</a>
</div>
<div style="width: 20%;"></div>
<div>
<a id="s" class="redirect">
<img id="sava" src="assets/Logo_Sava.png"/>
</a>
</div>
</div>
</div>
</div>
and select all divs by
let areaa = getElementsByClassName("area");
or you can use document.querySelectorAll("yourclassname") to access all divs of that class name
In the HTML structure, i have list of items which are styled as inline-block, and i'm wrapping the list with <marquee> </marquee> tags using JQuery since i'm not able to add id directly from the drupal8 view.
What i'm trying to do is i have 2 buttons left and right, when i click on the respective buttons the marquee should change the direction its moving.
Since its dynamically created element, i'm not able to access the element with jquery, i'm getting the error 'not defined'.
When i click on the right and left buttons i'm getting the below error
marquee.start is not a function
var $j = jQuery;
$j(".item-list > ul").wrap("<marquee class='scrollermarquee'></marquee>");
$j('.view-header').on('click', function() {
var marquee = $j('.scrollermarquee').addClass('mia');
marquee.stop();
marquee.direction = 'left';
marquee.start();
})
$j('.view-footer').on('click', function() {
var marquee = $j('.scrollermarquee').addClass('mia');
marquee.stop();
marquee.direction = 'right';
marquee.start();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="view view-ticker view-id-ticker view-display-id-block_1 js-view-dom-id-95599754f8c1606496d24cbc4e81ab801ba6c7756348defe6e876248e992d5e0">
<div class="view-header">
<p><span class="leftbutton"><</span></p>
</div>
<div class="view-content">
<div class="item-list">
<marquee class="scrollermarquee mia">
<ul>
<li>
<div class="views-field views-field-title"><span class="field-content">test-report-3</span></div>
</li>
<li>
<div class="views-field views-field-title"><span class="field-content">test-report-1</span></div>
</li>
<li>
<div class="views-field views-field-title"><span class="field-content">test-report-2</span></div>
</li>
</ul>
</marquee>
</div>
</div>
<div class="view-footer">
<p><span class="rightbutton">></span></p>
</div>
</div>
Try this:
You are selecting marquee element with jquery class selector and adding class to it which does not return the marque element and hence getting not defined value.
first get element and then add class, see below
$j('.view-header').on('click', function() {
var marquee = $j('.scrollermarquee');
marquee.addClass('mia');
marquee[0].stop();
marquee[0].direction = 'left';
marquee[0].start();
})
$j('.view-footer').on('click', function() {
var marquee = $j('.scrollermarquee');
marquee.addClass('mia');
marquee[0].stop();
marquee[0].direction = 'right';
marquee[0].start();
})
I was trying to remove the whole parent div if it doesn't have the wc-gallery class on it. What I have in my script is the reverse of what I need. Basically it hide everything that has the wc-gallery on it.
SCRIPT:
// Additional Scripts
$(window).load( function() {
$(".gallery-container2 .gallery-item .wc-gallery").hide();
});
$(".gallery-container2 p").click(function() {
var id = $(this).data('id');
$("[data-id=" + id + "].gallery-item .wc-gallery").toggle()
});
$(function(){
$(".gallery-item").each(function(){
$(this).children('.wc-gallery').parents('.gallery-container2').hide();
});
});
Basically this will work fine if I Hide all the containers and display the child div afterwards though my content won't render due to script conflicts. Only way to solve this without conflict is to load first all of the containers then hide() or remove() them.
SCRIPT: (conflict due to onload content rendering)
$('.gallery-container2').hide();
$(function(){
$(".gallery-item").each(function(){
$(this).children('.wc-gallery').parents('.gallery-container2').show();
});
});
HTML: (1st set is the one should be visible 2nd set is the one that needs to be remove or hide.)
<ul>
<li><div class="gallery-container2">
<p data-id="1723"><strong>some text</strong></p>
<div class="gallery-item" data-id="1723">
<div class="wc-gallery" style="display: none;"></div>
</div>
</div></li>
<li><div class="gallery-container2">
<p data-id="2455"><strong>View before and after</strong></p>
<strong></strong>
<div class="gallery-item" data-id="2455">
<div><div></div></div>
</div>
</div></li>
</ul>
Loop through the '.gallery-container2' element and find out whether it has '.wc-gallery' children. if not hide the element.
$('.gallery-container2').each(function(){
var $this = $(this);
//find element with 'wc-gallery' class
var hasGallery = $this.find('.wc-gallery').length > 0;
if(!hasGallery){
$this.hide();
}
});
Pure JS you might do like this in ES6 terms.
var divsToHide = document.querySelectorAll("div div :not(.wc-gallery)");
for (var div of divsToHide) div.parentElement.parentElement.style.display = "none";
<div class="gallery-container2">
<p data-id="1723"><strong>some text</strong>
</p>
<div class="gallery-item" data-id="1723">
<div class="wc-gallery">first container</div>
</div>
</div>
<div class="gallery-container2">
<p data-id="1724"><strong>some text</strong>
</p>
<div class="gallery-item" data-id="1724">
<div>
<div>second container</div>
</div>
</div>
</div>
Try this. If div has children with class .wc-gallery than it will show the parent otherwise hide the parent.
$(function () {
$(".gallery-item").each(function () {
if($(this).children('.wc-gallery').length > 0)
$(this).parents('.gallery-container2').show();
else
$(this).parents('.gallery-container2').hide();
});
});
When I click on a particular tab the other tabs's content should be hidden but it is not hiding. This is all the code I have.
function showStuff(id) {
if (document.getElementById(id).style.display === "block") {
document.getElementById(id).style.display = "none";
} else {
document.getElementById(id).style.display = "block";
}
}
<ul class="side bar tabs">
<li id="tabs1" onclick="showStuff('tabs-1')">City</li>
<li id="tabs2" onclick="showStuff('tabs-2')">Country</li>
<li id="tabs3" onclick="showStuff('tabs-3')">Humanity</li>
</ul>
<div id="tabs-1" style="display : none">
<p>Proin elit m</p>
</div>
<div id="tabs-2" style="display : none">
<p>M massa ut d</p>
</div>
<div id="tabs-3" style="display : none">
<p> sodales.</p>
</div>
Giving all the tab content elements a common CSS class makes selecting and styling them much easier, for example in this demo and code below.
CSS
.tabContent {
display:none;
}
JavaScript
function showStuff(element) {
var tabContents = document.getElementsByClassName('tabContent');
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].style.display = 'none';
}
// change tabsX into tabs-X in order to find the correct tab content
var tabContentIdToShow = element.id.replace(/(\d)/g, '-$1');
document.getElementById(tabContentIdToShow).style.display = 'block';
}
HTML
<ul class="side bar tabs">
<li id="tabs1" onclick="showStuff(this)">City</li>
<li id="tabs2" onclick="showStuff(this)">Country</li>
<li id="tabs3" onclick="showStuff(this)">Humanity</li>
</ul>
<div id="tabs-1" class="tabContent">
<p>Proin elit m</p>
</div>
<div id="tabs-2" class="tabContent">
<p>M massa ut d</p>
</div>
<div id="tabs-3" class="tabContent">
<p> sodales.</p>
</div>
I have also updated the showElement function to be more generic so that there is less code duplication when hiding and showing the correct tab content.
The only caveat is that getElementsByClassName() is not available in IE8 or below. Other (modern) browsers have this function but there are alternatives - see getElementsByClassName & IE8: Object doesn't support this property or method.
You have to first set a display: none for all of your tab contents.
e. g.
<script type="text/javascript">
function showTab(selected, total)
{
for(i = 1; i <= total; i += 1)
{
document.getElementById('tabs-' + i).style.display = 'none';
}
document.getElementById('tabs-' + selected).style.display = 'block';
}
</script>
<div id="tabs-1" style="display: none">tab1</div>
<div id="tabs-2" style="display: none">tab2</div>
<div id="tabs-3" style="display: none">tab3</div>
<ul class="side bar tabs">
<li id = "tabs1" onclick = "showTab(1,3)">City</li>
<li id = "tabs2" onclick = "showTab(2,3)">Country</li>
<li id = "tabs3" onclick = "showTab(3,3)">Humanity</li>
</ul>
If there is something like this with your code, I'm sure that it's going to work. BTW, Check your Console window for JavaScript errors.
you can try this
function showStuff(id){
$('#tabs1').empty();
$('#tab2').show();
}
or the other way
I think that this should do it:
<ul class="side bar tabs">
<li id = "tabs1" onclick = "showStuff('tabs-1')">City</li>
<li id = "tabs2" onclick = "showStuff('tabs-2')">Country</li>
<li id = "tabs3" onclick = "showStuff('tabs-3')">Humanity</li>
</ul>
<script type="text/javascript">
function showStuff (id)
{
document.getElementById("tabs-1").style.display = "none";
document.getElementById("tabs-2").style.display = "none";
document.getElementById("tabs-3").style.display = "none";
document.getElementById(id).style.display = "block";
}
</script>
<div id="tabs-1" style="display:none">tabs 1 content</div>
<div id="tabs-2" style="display:none">tabs 2 content</div>
<div id="tabs-3" style="display:none">tabs 3 content</div>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div id="tabs">
<ul>
<li>City</li>
<li>Country</li>
<li>Humanity</li>
</ul>
<div id="tabs-1">..............</div>
<div id="tabs-2">..............</div>
<div id="tabs-3">..............</div>
</div>