I have a page that has 7 image boxes, these boxes are alert boxes for our customers agents for any type of alerts being sent out. I have them all set as a link, when clicked the box turns from orange to blue and an information box is opened next to it, each image has its own info box. I have it partially working but it is not function how I want. I need it so if box1 is opened and the user clicks box2 the box1 should revert back to orange and its info box needs to close so that box2's info box can populate the space. Right now the image boxes stay blue when you click on other boxes and the code I have to close the info boxes is bugging out if you click off another image box. Here is part of my code and my HTML:
(Update) Here is a jsbin link of my example as it should be working. However, the click event is not working on my system, its not even trying to scroll to the top of teh page which normally happens when the trigger breaks but the href=# is there. Here is my new code:) JSBin
//JS
$(document).ready(function () {
function assignClickHandlerFor(boxNum) {
$('#a' + boxNum).click(function (evt) {
// returning false at the end implictly does these two lines.
evt.preventDefault();
evt.stopPropagation();
var $aBox = $(evt.currentTarget); // points to the element
(ie, the link) clicked.
// locate the div that has both the `.active` class and the `.alertBox2` class
var $prevAlert = $('.alertBox2.active');
$prevAlert.find('.blue').hide();
$prevAlert.find('.orange').show();
$prevAlert.removeClass('active');
$('.alertDetails').hide();
$abox.find('.blue').show();
$abox.find('.orange').hide();
$abox.addClass('active');
// show the required alert.
$('#d' + boxNum).show();
});
}
var i;
for (i = 1; i <= 7; i++) {
assignClickHandlerFor('Box' + i);
}
});
//CSS
.alertBox2
{
float:left; display:block;
}
.alertDetails
{
display:none; background-color:#fff; width:250px; height:585px; float:left; position:relative; left:5px; top:8px;
}
//HTML
<div><a href="#" id="aBox1" class="alertBox2" >
<span class="infoBox orange">
<img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
</span>
<span class="infoBox blue" style="display: none;">
<img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
</span>
</a>
</div>
<div><a href="#" id="aBox2" class="alertBox2">
<span class="infoBox orange">
<img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
</span>
<span class="infoBox blue" style="display: none;">
<img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
</span>
</a></div>
<div><a href="#" id="aBox3" class="alertBox2">
<span class="infoBox orange">
<img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
</span>
<span class="infoBox blue" style="display: none;">
<img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
</span>
</a></div>
</div>
<p id="alertDP">Click on any Alert to the left to see details</p>
<div class="alertDetails" id="dBox1">
Box1
</div>
<div class="alertDetails" id="dBox2">
Box2
</div>
<div class="alertDetails" id="dBox3">
Box3
</div>
Edit: A link demonstrating my understanding of your issue. http://jsbin.com/ecelil/1/edit
A few observations, clicking on any one aBox only toggles its own infoBox. In the click handler for aBox2 you seem to have noticed that and tried to fix it by passing three infobox selectors to jQuery. However jQuery doesn't work that way. It accepts only one selector. That selector can however match those three elements.
Replace the first line of each of the three aBox click handlers with $('.infoBox1, .infoBox2, .infoBox3').toggle();
As for the code being too long, well, for loops, variables and css class selectors are your friends :)
$(document).ready(function () {
function assignClickHandlerFor(boxNum) {
$('#a' + boxNum).click(function (evt) {
// returning false at the end implictly does these two lines.
evt.preventDefault();
evt.stopPropagation();
var $aBox = $(evt.currentTarget); // points to the element (ie, the link) clicked.
// locate the div that has both the `.active` class and the `.alertBox2` class
var $prevAlert = $('.alertBox2.active');
$prevAlert.find('.blue').hide();
$prevAlert.find('.orange').show();
$prevAlert.removeClass('active');
$('.alertDetails').hide();
$aBox.find('.blue').show();
$aBox.find('.orange').hide();
$aBox.addClass('active');
// show the required alert.
$('#d' + boxNum).show();
});
};
var i;
for (i = 1; i <= 7; i++) {
assignClickHandlerFor('Box'+i);
}
});
// css
.blue-info-box {
background-image: url('Images/blue_alert_box.jpg');
}
.orange-info-box {
background-image: url('Images/orange_alert_box.jpg');
}
// html
<div>
<a href="#" id="aBox1" class="alertBox2" >
<span class="infoBox orange">
<img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
</span>
<span class="infoBox blue" style="display: none;">
<img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
</span>
</a>
</div>
<div>
<a href="#" id="aBox2" class="alertBox2">
<span class="infoBox orange">
<img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
</span>
<span class="infoBox blue" style="display: none;">
<img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
</span>
</a>
</div>
<div>
<a href="#" id="aBox3" class="alertBox2">
<span class="infoBox orange">
<img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
</span>
<span class="infoBox blue" style="display: none;">
<img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
</span>
</a>
</div>
<div class="alertDetails" id="dBox1">
Box1
</div>
<div class="alertDetails" id="dBox2">
Box2
</div>
<div class="alertDetails" id="dBox3">
Box3
</div>
Related
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.
I'm trying to create 3 simple buttons w/ a shared text area. Each button will display a different message in the shared text area when clicked. I have managed to accomplish this in a codepen here. However, when I tried to implement this into my project, it behaved much differently. The buttons no longer swapped text depending on which button was pressed, and the individual indexes are no longer being correctly tracked. My guess is that its because they're deeply nested within other divs? Not sure. Basically, when you click on one of the image icons, the corresponding text above would show. Thanks so much in advance for any help. Here is my code
$('.benefit-button').first().addClass('active');
$('.benefit-button').on('click', function(){
var $this = $(this);
$siblings = $this.parent().children(),
position = $siblings.index($this);
console.log (position);
$('#blah div').removeClass('active').eq(position).addClass('active');
$siblings.removeClass('active');
$this.addClass('active');
})
div[class*="content-"] {
display: none;
}
div.active {
display: block;
}
<div class="row lt-blue-bg">
<div class="large-12 large-centered columns benefit-section">
<span class="small-11 small-centered large-7 columns info" id="benefit">
<div class="accordionWrapper">
<div id="blah">
<div class="content-1"><h2>Happy</h2></div>
<div class="content-2"><h2>Healthy</h2></div>
<div class="content-3"><h2>Money</h2></div>
</div>
<div class="accordionItem close">
<p class="accordionItemHeading">Sources<br>+</p>
<div class="accordionItemContent">
<p style="color: black;">Yes, the Tobacco Quitline is completely FREE!</p>
</div>
</div>
</div>
</span>
<span class="small-12 large-3 columns benefit-icons">
<span>
<a class="benefit-button"><img src="<?php echo get_template_directory_uri(); ?>/images/rainbowicon.png" class="circle rainbow"></a>
</span>
<span>
<a class="benefit-button"><img src="<?php echo get_template_directory_uri(); ?>/images/hearticon.png" class="circle heart"></a>
</span>
<span>
<a class="benefit-button"><img src="<?php echo get_template_directory_uri(); ?>/images/moneyicon.png" class="circle money"></a>
</span>
</span>
</div>
</div>
It's the extra <span> around the <a> that doesn't correspondend with
$siblings = $this.parent().children(),
there's also a syntax error in that line: , instead of ;.
You need
$siblings = $this.parent().parent().children();
to get from a (=this) to parent (span) to parent (span above).
$('.quick-links').each(function() {
$(this).hover(function() {
$('.img-thumbnail').toggleClass('quick-links-hover');
});
});
So, this works however there is multiple of the .img-thumbnails on the page and I only want it to affect the corresponding one. HTML:
<a href="http://localhost:8888/home/the-last-rays-of-sunlight/" class="thumbnail img-thumbnail" data-slb-group="203_auto_1" data-slb-active="1" data-slb-internal="40">
<img width="296" height="300" src="http://localhost:8888/wp-content/uploads/2014/01/The-Last-Rays-of-Sunlight-296x300.jpg" class="attachment-medium" alt="sold" />
</a>
<div class="pic-options">
<div class="quick-links pull-left">
<span class="icon-star-empty" data-toggle="tooltip" data-placement="top" title="Favourite this painting"></span>
<span class="icon-slideshare"></span>
</div>
<div class="pull-right">
<span class="quick-enquire">
Enquire about this painting</span>
<span id="isSold">sold</span>
</div>
</div>
Thanks for your help!
You're probably looking for something like this
$('.quick-links').hover(function() {
$(this).closest('.pic-options').prev('.img-thumbnail').toggleClass('quick-links-hover');
});
Targets the parent .pic-options, then the previous .thumbnail
I have this jQuery function :
$(".clack").hide();
$('.click').click(function(){
$(".clack").fadeThenSlideToggle();
});
Works great except all clack classes are toggled now.
Any idea how to open only the first class .clack after the clicked class .click?
I tried .clack:first but this results in only the first instance of class .clack being opened.
I want to open the first class .clack found after the clicked class .click.
I know I can rewrite my html and jQuery function with other solutions but the problem is the amount of data already existing for this function is very big.
My HTML :
<img class="click" style="cursor: pointer;" src="someimg.jpg"/>
<div class="clack">TEST TEXT1</div>
<img class="click" style="cursor: pointer;" src="someimg2.jpg"/>
<div class="clack">TEST TEXT2</div>
<img class="click" style="cursor: pointer;" src="someimg3.jpg"/>
<div class="clack">TEST TEXT3</div>
EXACT HTML EXAMPLE :
<strong>
<span>
<img class="aligncenter click" src="img1.jpg" alt="vesteging" width="436" height="36" />
</span>
</strong>
</p>
<div class="clack">
<center>
<span style="font-size: 10pt;">DATA TEXT 1</span>
</center>
</div>
<p> </p>
You can target only the .clack that comes immediately after the clicked .click
$('.click').click(function(){
$(this).next(".clack").fadeThenSlideToggle();
});
how to display some information of image in another div by clicking on image and information should be shown/hidden as clicking on this image.
$(document).ready(function () {
$(".cell").click(function () {
$(this).find("span").toggle("slow");
})
});
<div class="cell">
<div class="inner">
<span style="display:none;"> <img src="Images/sachin.jpg" alt="" width="180" height="180" /></span> <span class="name">Sachin Tendulkar</span>
<input type="hidden" class="friend_id" value="22 " />
</div>
</div>
I want that name displayed in another div when i click on particular image
If I'm understanding correctly, I think what you're asking is for the name to be displayed when you click on its image?
$(document).ready(function () {
$(".inner>img").click(function () {
$(this).parent().find("span").toggle("slow");
})
});
<div class="cell">
<div class="inner">
<img src="Images/sachin.jpg" alt="" width="180" height="180" />
<span class="name" style="display: none;">Sachin Tendulkar</span>
<input type="hidden" class="friend_id" value="22 " />
</div>
</div>
Take notice of the reformatted html that removes the span around the image (it's not necessary) and the style attributes of your image and name span.
Try:
$(.cell).click(function() {
$(this).toggle("slow");
$(otherDiv).html( $(this).find('span.name').html() );
// other processing ...
});
But this is for your current code, which should be cleaned up a bit. So see below.
You shouldn't need a span to wrap your image. I would try something more along the lines of:
<div class="cell">
<div class="inner">
<img src="Images/sachin.jpg" data-name="Sachin Tendulkar" alt="" />
<input type="hidden" name="22" class="friend_id" value="22" />
</div>
</div>
Along with:
$('.cell').click(function() {
var img = $(this).find('img');
$(img).toggle('slow');
$(otherDiv).html( $(img).attr('data-name') );
// other processing ...
});