I am using a bootstrap carousel with a background image on each slide. Each slide has links displayed on top of it. I have reviewed a number of answers on SO, but none seemed to address this problem. Here is what a slide in the carousel looks like :
<div class="item">
<div class="banner-link">
<img src="myimage.jpg" height="486" width="1024" alt="image-description">
<div class="holder">
<div class="block">
<div class="links">
<strong class="title">The links</strong>
About Us
Contact
</div>
</div>
</div>
<input type="hidden" name="link" readonly value="http://www.google.com/" />
</div>
</div>
jQuery:
$(document).ready(function () {
$('div.banner-link').click(function () {
if ($(this).find("input").length) {
window.open($(this).find("input:first").val(),'_blank');
}
});
});
My problem is that when I click on any of the child links, both the child link AND the background image link are clicked. The child link opens in the main tab, and the background jQuery click event opens in a new tab.
I have tried a few things with z-index but it did not solve my problem. How can I allow the background image to be clicked everywhere BUT on the child links?
Any help is appreciated.
If I well understood your post, you want make it possible to click on the link without the background to be clicked right?
If so, you should have a look at the stopPropagation function (here is the doc : http://www.w3schools.com/jquery/event_stoppropagation.asp) , if not, I guess I misunderstood.
Have a good day !
If you want to only open a new link when the image is clicked you need to change your click event to only fire when the image is clicked and then look for the parent of this rather than this.
$(document).ready(function () {
$('div.banner-link img').click(function () {
if ($(this).parent().find("input").length) {
console.log($(this).parent().find("input:first").val());
}
});
});
You can probably clean this up and I changed it to log to console as open a new window for testing so very annoying. Works with the code you supplied over two different divs.
Edit with lots of words:
So this $(this) object will be the item clicked on. We have defined the element to be trigger on as the img tag inside any div with the class of banner-link. $(this) becomes the img object but we want to then fine the hidden input (Without moving it). To do this you do $(this).parent() to get the relevant div.banner-link, if you don't do it this way you're get any/all of the div.banner-link's due to having multiple on the page. Now you're in the right place you can continue your find as normal to find the first input and get the value of it.
Hope this helps!
Related
I'm working on a Shopify project and am not the original developer, who is unavailable, along with an un-minified version of the javascript file included on every page.
The original site has a page displaying a grid of employee headshots. I have been tasked with enhancing by making it such that each headshot has an overlay that displays some additional info and that clicking on either the headshot image OR the overlay (and its contents) will take some additional action.
Each grid item (headshot) essentially looks like this:
<div class="wrap">
<img src="PATH_TO_IMG">
<div class="info">Danny Testeroni</div>
</div>
and my event listener/handler looks like this:
const $item = document.querySelector('.wrap');
$item.addEventListener('click', (e) => {
console.log(e.target);
});
All works as expected.
Clicking anywhere within the grid item, console.logs the image UNLESS you click anywhere on the overlay, in which case, it console.logs the overlay container. This is what I need.
However when I add this to the actual Shopify template (in which this global JavaScript file gets included), i get different results.
Clicking anywhere within the grid item, console.logs the image UNLESS you click anywhere on the overlay, in which case, it console.logs NOTHING.
The only thing I can conclude is that something in the global JavaScript file is canceling the click event at the <img> so it never makes it to the overlay. Is this the case? If so, is there any way to tell where this is happening and possibly overriding it with my new script? And if not, any ideas why clicks on the overlay may not be registering in the actual Shop as opposed to my bare bones prototype, which can be seen in this Codepen?
You can remove the arrow function on your addEventListener handle and use this, to reference the element it was attached to
const $item = document.querySelector('.wrap');
$item.addEventListener('click', function(e) {
console.log(this);
})
<div class="wrap">
<img src="https://cdn.shopify.com/s/files/1/0598/3089/4765/articles/barber-culture_x700.png?v=1646319227">
<div class="info">Danny Testeroni</div>
</div>
I am using bootstrap for CSS styling and responsive site.
I created a default panel with Bootstrap and the entire panel is made clickable with anchor tag to open in a new tab.
However, there needs to be a close icon to dismiss the panel; and I am using javascript for the same. The problem arises when I click on this close icon - Though the panel is dismissed, I am also having a new tab opened due to the anchor tag. Is there a way to avoid this new page opening.
Code looks something like this:
<div class="panel panel-default">
<div class="panel-body">
<a href="#" target="_blank">
<p>Basic panel example</p>
<button type="button" class="close" id="close">×</button>
</a>
</div>
</div>
So I have the javascript to dismiss panel for id="close". Clicking the same though, also results in anchor redirect. One possible way is to use CSS for relative positioning of the closing icon outside the anchor tag. But that is getting messed up for my requirement for a smaller size screen.
How can I accomplish it with javascript?
If i understand correctly you have to call the method preventdefault on the event object.
Here you can find the specification: jquery preventdefault
So you have to do something like this:
$("#close").click(function(e)
{
e.preventDefault();
$("#mypanel").close();
});
I re-create the case here: http://jsfiddle.net/x4nu0whw/
Hope this helps!
I have implemented some code which works on desktop, but in mobile, it does not work as expected.
In mobile, when you click on a div, it should toggle to open up the contents. However, it opens it, then closes it again automatically so the user doesn't get to see the contents.
Here is what I have so far:
$(document).on('click touchstart', '.contact_Style h2.general_Click', function() {
$(this).next().toggle('slow');
});
<h2 class="general_Click">Search </h2>
<div id="search">The Content</div>
Any help would be appreciated.
Just bind to click, because of mobile browsers trigger it on touch, so you get 2 callback calls (Which open and then close content).
You can read about this behavior here
I've made a small correction in your code.
At first you need to hide your content div by default.
Add this in your style file:
#search{display: none}
Then try to use this js code
<script type="text/javascript">
$(document).on('click', 'h2.general_Click', function() {
$(this).next().toggle('slow');
});
</script>
Your html would be as it is:
<h2 class="general_Click">Search </h2>
<div id="search">The Content</div>
In My case selector "h2.general_Click" is created 2 times (Please check in your view-source) and that is why it is calling 2 times and closed automatically
Please check your view-source code that your selector is not repeating.
If it is repeating then select a sector that do not repeat in your web page.
I have 4 images that when I click them they show information under the images and when I click the last ones the images go under the page and whens the new page loads with that information I have to go down with scroller to see the image and information of the last image.
I want to put focus to the last image when the new page loading.
I do this but it's not working:
<script>
function setFocusToTextBox(){
document.getElementById("abc").focus();
}
</script>
<img src="images/Practidose.fw.png" alt="" width="770" height="150" id="abc" onclick="setFocusToTextBox()"/>
Picture of the 4 images and when I click the last one I want to focus that image when the new page loads:
.focus() can normally only be applied to links or form inputs.
However, you can use it on arbitrary elements by giving the element a tabindex attribute.
This is usually a good idea for accessibility reasons anyway if you want to make use of onClick handlers, as this will help keyboard navigation and other accessibility tools understand that your element is supposed to be clickable.
I am not fully sure of why you want to focus the image you are ON, but try
function setFocusToTextBox(){
document.getElementById("abc").scrollIntoView();
}
If onload:
window.onload=function(){
document.getElementById("abc").scrollIntoView();
}
I have a tab container with tabs, that depending on what tab is selected, i would like a function to run. I have already created the function in Java Script, that will either Hide or Display a window. The function works fine. How do i tell the tabs to run this function? In the code below, i show in the "Contents" of a tab, a function intitled "hidediv". I also have a function called "showdiv". I want to remove it from the contents, and have it run automatically when the tab is selected. any suggestions? I do not want it to affect the contents of the tab at all.
Thank you!
<div dojoType="dijit.layout.ContentPane" title="Setup">
Hide div
</div>
This is well described in the reference guide.
Basically, if your TabContainer has id "myTabs", you can do:
dojo.subscribe("myTabs-selectChild", function(selected){
// Do whatever you need here, hidediv() etc..
console.log(selected.title);
});
Edit: If you only want something triggered for a particular tab, you can check the title inside the function:
dojo.subscribe("myTabs-selectChild", function(selected){
if(selected.title == "Setup")
{
hidediv();
}
});
Perhaps a more elegant way to do it, is to use the ContentPane's onShow event, for example like this:
<div dojoType="dijit.layout.ContentPane" title="Setup"
onShow="hidediv">
<!-- Content -->
</div>