Develop Reference

Jquery code only working when display not none

I have a cart icon. When I hover on the cart icon display of one div changes from display:none to display:block means that div only appears when I hover on cart icon. This div contains one button View Cart on clicking which I need to alert something.
This is my code which I typed in console. But it only works when I first hover the icon (hovering icon changes display:none of a div to display:block) and then write on console. If I write this code in console before hovering it will not work.
$('#qa_cartletCartButton').click( function(){alert('yes');} );
ID of div: cartletDrop
ID of button: qa_cartletCartButton
These codes are also not working.
if ($('#cartletDrop').is(':hidden')) {
$("#qa_cartletCartButton").click(function() {
alert('yes')
});
}
if ($('#cartletDrop').is(':visible')) {
$("#qa_cartletCartButton").click(function() {
alert('yes')
});
}
This is the site HTML code which I am scraping.
<div class="shopping_cart">
<header class="header">
<a href="/chemicals/shop/cart?nocache=1596440273788" class="shopping_cart_icon" id="shopping_cart_icon_cartlet">
<span><img src="/content/dam/fishersci/en_US/images/icon-cart-l-xl-empty.svg"></span>
<span class="shopping_cart_quantity">3</span>
</a>
</header>
<section style="display: none;" id="cartletDrop" data-refresh="0">
<div class="cartlet-display">
<p class="bold cartletMaxMsg" id="qa_cartletMaxMsg">Recently Added to Your Cart</p>
<ul id="cartletItems">
</ul>
<p class="cartletSubtotal"><span class="float_left" id="qa_cartletSubtotalLabel">Subtotal:</span> <span class="float_right" id="qa_cartletSubtotal">41,486.00</span></p>
<p><a class="float_right cartButton btn primary" href="/chemicals/shop/cart?nocache=1596440278170" id="qa_cartletCartButton">view cart</a></p>
</div>
</section>
</div>
This line in html is empty before i hover.
<section style="display: none;" id="cartletDrop" data-refresh="0">
</section>
Once i hover in cart icon it's now like this.Only display property changes.
<section style="display: none;" id="cartletDrop" data-refresh="0">
<div class="cartlet-display">
<p class="bold cartletMaxMsg" id="qa_cartletMaxMsg">Recently Added to Your Cart</p>
<ul id="cartletItems">
</ul>
<p class="cartletSubtotal"><span class="float_left" id="qa_cartletSubtotalLabel">Subtotal:</span> <span class="float_right" id="qa_cartletSubtotal">41,486.00</span></p>
<p><a class="float_right cartButton btn primary" href="/chemicals/shop/cart?nocache=1596440278170" id="qa_cartletCartButton">view cart</a></p>
</div>
</section>
seems html inside section tag is not present before first hover.

On click event backfiring after adding nested anchor tag to section element

I wanted to create a modal of sorts to open when a <li> offering additional information about a topic is clicked. I created a popUpTrigger that responds to a user "click" and then gathers the provided section (and all tags nested inside) and moves it to the popUp div that then appears on the page. I've taken necessary precaution in case the section is empty in which an alert will sound. However, the alert still fires when a section is not empty (it has text and contains an additional anchor tag). I'm not sure why this is happening.
When I console log, I see the nested anchor tag is being viewed by the browser as a separate entity to the section. I've tried nesting the anchor tag further within a div element and rewriting the javascript so the html of the nested anchor tag will be evaluated accordingly as part of the section but all to no avail. This backfiring only occurs when an additional anchor tag is included in the section element of the HTML.
HTML
<li id="card">
<a class="popUpTrigger" href="#">
Get a Library Card
<section class="hide">
<h6> How to Obtain a Library Card:</h6>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<a href="https://docs.wixstatic.com/ugd/858998_1fae2b5d06fa41a3ba3fcb493b349d19.pdf">
<img src="imgs/LibraryCardVector.png" alt="library card">
</a>
</section>
</a>
</li>
<div class="popUp">
<div>
<div id="popUpClose"> <button type="button" class="btn">X</button></div>
</div>
<div id="moreInfo">
<!--WILL BE FILLED IN WITH <section class="hide"> DATA ABOVE-->
</div>
</div>
JavaScript
$('a.popUpTrigger').on('click', function() {
$(this).addClass('selected');
if ($('.selected')) {
let messageArea = $('.selected > section.hide');
let strippedMessage = messageArea.text().replace(/(\r\n|\n|\r)/gm, "").replace(/\s/g, "");
let fullMessage = messageArea.html();
if (strippedMessage === "") {
alert("Sorry that page isn't available right now.");
$(this).removeClass('selected');
} else {
$('.popUp').css('display', 'block');
$('.popUp #moreInfo').html(fullMessage);
}
}
$('.popUp #popUpClose').on('click', function() {
$('.popUpTrigger').removeClass('selected');
$('.popUp').css('display', 'none');
});
});

I removed the children from your anchor, and instead used NEXT. Also your if statement was not needed. I left .selected in the code just in case you wanted to style the anchor when clicked.
$('a.popUpTrigger').on('click', function() {
$('a.popUpTrigger').removeClass("selected");
$(this).addClass('selected');
let messageArea = $(this).next("section");
let strippedMessage = messageArea.text().replace(/(\r\n|\n|\r)/gm, "").replace(/\s/g, "");
let fullMessage = messageArea.html();
if (strippedMessage === "") {
alert("Sorry that page isn't available right now.");
$(this).removeClass('selected');
} else {
$('.popUp').css('display', 'block');
$('.popUp #moreInfo').html(fullMessage);
}
$('.popUp #popUpClose').on('click', function() {
$('.popUpTrigger').removeClass('selected');
$('.popUp').css('display', 'none');
});
});
.selected{color:red;}
.hide{display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="card">
<a class="popUpTrigger" href="#">
Get a Library Card </a>
<section class="hide">
<h6> How to Obtain a Library Card:</h6>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<a href="https://docs.wixstatic.com/ugd/858998_1fae2b5d06fa41a3ba3fcb493b349d19.pdf">
<img src="imgs/LibraryCardVector.png" alt="library card">
</a>
</section>
</li>
<div class="popUp">
<div>
<div id="popUpClose"> <button type="button" class="btn">X</button></div>
</div>
<div id="moreInfo">
<!--WILL BE FILLED IN WITH <section class="hide"> DATA ABOVE-->
</div>
</div>

You have the following code
<a href="#">
</a>
It is not valid to have nested anchors in HTML. So the browser breaks it up when it renders. That is why you are seeing it act weird.
You will need to stick the pop up code outside of the element.
<a class="popUpTrigger" href="#">
Get a Library Card
</a>
<section class="hide">
<p>Foo</p>
Bar
</section>
and reference it with next()
$(".popUpTrigger").on("click", function (e) {
e.preventDefault();
var anchor = $(this);
anchor.next('section').toggleClass("hide");
});

Full Drop up menu OnClick

So I am having a problem with trying to create drop up menu on click.
First of all, there is the real site that I am working on. https://socialmanagement.000webhostapp.com/
under 736px width, the menu will turn to one button. The problem is that on mobile devices it's really buggy. If you click it on phone, it will automatically proceed you to the "href" of the last button in the menu even if it's not showing. Also, the menu won't go down after another clicking the "home" button
I need to drop up to a menu that I click on the button (the button will stay in the same position not like right now where it goes up) and it will stay until user clicks on it once again.
Thank a lot for any advice
HTML:
<div class="navbar" id="myTopnav" >
<div class="dropup">
<img src="images/Icons/home.png" />
<div class="dropup-content" >
<a href="#home" > <img src="images/Icons/home.png" /> Home</a>
<img src="images/Icons/about.png" /> News
<img src="images/Icons/info.png" /> Contact
<img src="images/Icons/menu.png" /> Home
<img src="images/Icons/pic.png" /> Newssssssssssss
<img src="images/Icons/about.png" /> Contact
</div>
</div>
</div>
SCRIPT (the First scrip that I got here was bad so I have to change it to this one, still can't close it from a mobile device):
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.icon')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}

EDITED:
First of all, in your provided HTML code, there is no myDropdown element. So, first we need to add that id to the dropup-content element. Then, we can just toggle a class of show when the a or in your case, the icon, is clicked. So, here it is:
HTML:
<div class="navbar" id="myTopnav" >
<div class="dropup">
<!-- You don't need javascript void here, we just won't include href.-->
<a class="icon" onclick="myFunction()"> <img src="images/Icons/home.png" /> </a>
<!-- We add id="myDropdown" to the dropup-content element.-->
<div class="dropup-content" id="myDropdown">
<a href="#home" > <img src="images/Icons/home.png" /> Home</a>
<img src="images/Icons/about.png" /> News
<img src="images/Icons/info.png" /> Contact
<img src="images/Icons/menu.png" /> Home
<img src="images/Icons/pic.png" /> Newssssssssssss
<img src="images/Icons/about.png" /> Contact
</div>
</div>
</div>
SCRIPT:
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show")
}
// This is all you need to toggle on/off the menu,
// no need of that extra function with a for loop that you have in your code.
Of course, this goes without saying, you must edit the show class in your CSS in a way that you would like it to look.
As for the other question, how to stick the menu in a same position, you just add position: absolute to that element in your CSS, with the top/left/right/bottom coordinates that you like, and give it a z-index: 2(or higher) to make sure its on top of every other element. Hope this clears your issues.

buttons to activate buttons that toggle from one div to another

Apologies in advance if this is a simple trick, but I'm not any good at javascript so I don't know how to do it...
I have two buttons (blue and yellow) that toggle between two divs with content. On another part of the page, I have another two buttons (also blue and yellow) that are supposed to activate the same-colored button of these two toggle buttons. So blue will activate toggle-blue and yellow will activate toggle-yellow. I used the below script I found on here for the toggle feature:
<div class="flr-wrap">
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
<div class="flr-inner">
<div class="container" id="content-a">AAA</div>
<div class="container" id="content-b">BBB</div>
</div>
</div>
// set content on click
$('.button').click(function (e) {
e.preventDefault();
setContent($(this));
});
// set content on load
$('.button.active').length && setContent($('.button.active'));
function setContent($el) {
$('.button').removeClass('active');
$('.container').hide();
$el.addClass('active');
$($el.data('rel')).show();
}
from here:
jsfiddle
What do I add to make the other two buttons trigger the active states of their corresponding toggle buttons?
Many thanks in advance for any help!

Since you said you need the second set of buttons to trigger actions of the first set, this means that buttons do the same thing.
Here's an example of how this works:
http://jsfiddle.net/ivanbatic/b43m405x/
Javascript:
$('.activator').on('click', function () {
var target = $(this).attr('data-target');
$('.panel').removeClass('active');
$(target).toggleClass('active');
});
HTML
<section>
<button class="activator" data-target=".panel-a">Blue</button>
<button class="activator" data-target=".panel-b">Yellow</button>
<section>
<div class="panel active panel-a">First Panel</div>
<div class="panel panel-b">Second Panel</div>
</section>
<section>
<button class="activator" data-target=".panel-a">Blue</button>
<button class="activator" data-target=".panel-b">Yellow</button>
</section>
Also, you are not using buttons in your example, you are using links. Links are meant to take you to another page, buttons are meant to trigger an action.
If you want buttons to look like plain text, use CSS for styling.

You can do pretty much the same, just use the selector based on your data-rel to add the active class and add the active class to the button's data-rel statement, like that it's quite easy to always toggle the matching tags
function setContent($el) {
var rel = $el.data('rel');
$('.active').removeClass('active');
$('.container').hide();
$('[data-rel="' + rel + '"]').addClass('active');
$(rel).show();
}
$(function() {
// the right place to fire the initial setContent (all scripts are ready and page is loaded)
setContent($('.button.active'));
// add event handlers in ready event (DOM is most surely there)
$('.button').click(function(e) {
e.preventDefault();
setContent($(this));
});
});
.container {
display: none;
}
.button.active {
color: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="flr-wrap">
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
<div class="flr-inner">
<div class="container" id="content-a">
AAA
</div>
<div class="container" id="content-b">
BBB
</div>
</div>
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
</div>

Jquery slide hide-show div with an image

I have a banner which I need changing on a click. at the moment I have hidden the 2nd banner and currently banner 1 shows. When I click the arrow I want banner 1 to hide and banner 2 to show etc.. only problem I tried using html.
<div class="homeArrow"><img src="https://cdn1.iconfinder.com/data/icons/defaulticon/icons/png/256x256/arrow-right.png" alt=""/></div>
i want homeArrow to be the click button to show next banner
but not sure how to connect to jquery...
This is JS fiddle:
http://jsfiddle.net/8a7GL/152/

Hide / Show one Banner at a time:
$(".homeArrow").on('click',function () {
$(".homeImage").slideToggle();
});
http://jsfiddle.net/8a7GL/152/
Sliding from left to right can be achieved by a little more code in jQuery see:
http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/
You could also use addClass/removeClass and make the sliding CSS3 transitions. This would greatly improve quality.
UPDATE:
Here is the left / right slidy.
HTML:
<div class="homeBannerContainer" style="display: block">
<div id="a1" class="homeImage">
<h4>Banner 1</h4>
<img src="http://www.nostomachforcancer.org/wp-content/uploads/2013/08/nsfc_scam_banner_50percent.jpg" alt="" />
<div class="homeBanner">
<h3>My banner</h3>
</div>
</div>
<div id="a2" class="homeImage" style="display: none">
<h4>Banner 2</h4>
<img src="http://www.nostomachforcancer.org/wp-content/uploads/2013/08/nsfc_scam_banner_50percent.jpg" alt="" />
<div class="homeBanner" style="display: none">
<h3>My banner 2</h3>
</div>
</div>
<div class="homeArrow">
<img src="https://cdn1.iconfinder.com/data/icons/defaulticon/icons/png/256x256/arrow-right.png" alt="" />
</div>
CSS:
$(".homeArrow").on('click', function () {
$('.homeImage').animate({
width: 'toggle'
});
});
DEMO:
http://jsfiddle.net/8a7GL/174/

You can use the show/hide function provided by jquery and even give it an animation.
Just give the banners a selector and use the .click event.

http://api.jquery.com/toggle/
function change(){
$("#firstbanner").toggle();
$("#secondbanner").toggle();
}
In HTML:
<button onclick="change()" />

try this:
if ($('#Banner2Home').is(":visible")) {
$('#Banner2Home').hide();
} else {
$('#Banner2Home').show();
}
return false;