I've searched all over and I'm unable to get this to work. I've got a button which I want to use as the main control to load up a lightbox image.
Here is my HTML
<li class="span1">
<a href="https://farm4.static.flickr.com/3760/18492500814_4597807b9e_b.jpg" title="FLAG4_km003" class=" thumbnail" target="_blank" data-lightbox="lightbox">
<img alt="FLAG4_km003" src="https://farm4.static.flickr.com/3760/18492500814_4597807b9e_z.jpg">
</a>
<div class="hover-box">
<p>Title</p>
<button class="view box-button">Zoom</button>
<button class="request box-button">Request</button>
</div>
</li>
As you can see the required lightbox link is in place but I want to trigger the click of it when a user clicks on the 'Zoom' button.
Here is my jQuery which currently isn't working:
$(document).on('click', '.view', function(){
$(this).closest("li.span1 a").click();
});
closest doesn't work like that. It selects the first/closest matching parent of the element. You should at first select the closest li element and then select the child/descendant a element.
$(this).closest("li.span1").children('a').click();
You could also use the parent and siblings methods for selecting the target element:
$(this).parent("div.hover-box").siblings('a.thumbnail').click();
Related
I'm working on portfolio items, where every item looks like this
<div class="item">
<div class="item-title"></div>
<div class="item-subtitle"></div>
<div class="item-image"></div>
<div class="item-site"></div>
</div>
Previous div is hidden and items are shown by this code
<a class="project" :href="`http://www.${item.site}`" >
So, if I put like "mysite.com" in item-site div and hover over item output is www.mysite.com and that is ok if item-site is not empty. But if that div is empty output is www. and I dont want that.Is there a way to prevent that?
How to dissable click if item-site class is empty, so if I click on it nothing happens, but if is not empty and has link then if I click it's opens that link in new window.
You can use the pointer-events: none CSS statement to disable the hover and click events on an element.
In your case, it might look something like this:
HTML:
<div class="item">
<div class="item-title"></div>
<div class="item-subtitle"></div>
<div class="item-image"></div>
<div class="item-site not-clickable"></div>
</div>
CSS:
.not-clickable{
pointer-events: none;
}
If the DOM element (in this case <div class="item-site"></div>) is empty, then add the class not-clickable. If the element has content, then remove the class not-clickable.
Please also note that <div> tags are not clickable by default. It sounds like you want these to be links which are <a> tags. Also, an <a> tag without the href attribute has no pointer events - so an alternative would be to provide the href when you want the element to be clickable, and remove it when you want the element to not be clickable.
<div class="item">
<div class="item-title"></div>
<div class="item-subtitle"></div>
<div class="item-image"></div>
<a class="item-site">I should not be clickable</a>
<a class="item-site" href="https://www.example.com" target="_blank">
I should be clickable, and I will also open in a new tab
</a>
</div>
Here is a pen that might explain further:
https://codepen.io/mikeabeln_nwea/pen/yZQLaj?editors=1111
I have a list of products for which I am using below li:
When user clicks anywhere on the li I want use to send to product details page e.g. /product/id/. When user mouse over the li I also display an icon which when clicked allows users to add product in Favorites.
<ul>
<li class="media">
<div class="media-left">
<a href="/product/123/">
<thumb>
<div class="thumb">
<img src="/images/company-logo.jpg">
</div>
</thumb>
</a>
</div>
<div class="media-body">
<div class="item-actions autohide pull-right">
<a title="Add to Favorites"><i class="material-icons">favorite</i></a>
</div>
<div class="media-heading b">
Demo Product
</div>
<div class="text-sm">
<div style="height:16px;overflow:hidden;">Demo Manufacturer</div>
</div>
</div>
</li>
</ul>
I know I can make the whole li clickable and send user to product details page using javascript.
<li (click)="sendToproductDetailsPage(123)">
.....
</li>
But the issue with this approach is that when I click on Favorite icon, it also send users to product details page.
Can anyone please guide how to achieve this with pure JavaScript?
You clearly have an event handler for the "Favorite" a link that handles adding the thing to the favorites. Have that event handler stop propagation. Since the click stops as of that a, it never bubbles up to the li, and you don't have to worry about it triggering the li's click handler.
If you're hooking up events through addEventListener, your handler gets an event object that has stopPropgation, so:
yourEventArgument.stopPropagation();
If you're using onxyz-style event handlers, return false from the handler; it does the same thing stopPropgation does (more on my blog: The true story on return false).
The field Description is optional and only appears when the user clicks on the + Description button. However when another div is generated the code loses the focus of the element it should hide and the button doesn't work anymore.
<script>
$(document).ready(function(e){
$(document).on('click', '#hide-desc', function(e) {
$("#description").slideToggle();
});
});
</script>
I have a button to remove and add the following div:
<div class="item-wrapper">
<div class="item-inner-wrapper">
<!-- Among other stuff -->
<div id="description" class="item-child-desc">
{{ form }}
</div>
</div>
<div class="item-action-button">
<!-- Deletes item-wrapper and another button adds it -->
<a id="delete" href="#" class="button alt small special">Remove</a>
<a id="hide-desc" class="button alt small">+ Description</a>
</div>
</div>
I know the function must be able to identify which description I am talking about, but I don't know how to do that. I tried to get the parent div of the button and specify the div with method find() but I could not make it work.
I have the same problem happening with an autocomplete function. I believe I will get both working if I can figure out what I have to do.
Based on your comments, I assume your html sort of looks like this (note that we use .description rather than #description since those are not unique elements):
<div class="item-wrapper">
<div class="item-action-button">
<a id="delete" href="#" class="button alt small special">Remove</a>
<a id="hide-desc" class="button alt small">+ Description</a>
</div>
<div class="description" class="item-child-desc">
blergh
</div>
</div>
We just have to look for the parent .item-wrapper using e.target to reference the source of the event then search the child .description:
$(e.target).parents(".item-wrapper").find(".description").slideToggle();
Based on the sample html you've added, the following should also work without modification:
$(e.target).parents(".item-wrapper").find(".item-child-desc").slideToggle();
It's also possible to just use this:
$(this).parents(".item-wrapper").find(".item-child-desc").slideToggle();
In all cases, the crucial part is parents(".item-wrapper").
I'm not entirely certain of the question, but if my understanding is correct I believe I may have found a solution for you. Using jQuery Event Delegation, it's relatively simple!
Run this code snippet and see if I'm close to a solution:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
<div class="item-child-desc">{{ form }}</div>
</div>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
</div>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
<div class="item-child-desc">{{ form }}</div>
</div>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
</div>
<script>
$(document).ready(function (e) {
$(".item-action-button").on('click', '.hide-desc', function (e) {
$(e.delegateTarget).find(".item-child-desc").slideToggle();
});
});
</script>
<style>
.item-child-desc {
display: none;
}
</style>
The problem with using ids for event handling is that they are only ever registered with the last element with that matching id. If you want one event handler for all elements of a certain type, register an event handler with elements of a certain class or tag. You'd be doing yourself a disservice otherwise.
Hope this helps!
I have many div's on a page, like the one below with different information, using the same classes.
<div class="one-third">
<ul class="img-list">
<a href="#" target="_blank">
<li>
<img src="#" alt="" />
<span class="text-content"><h3 style="color:white" id="one">BRIAN FARGO</h3></span>
<h5 class="text-content-desc" id="two">CEO, inXile entertainment</h5>
<a href="https://twitter.com/BrianFargo">
<img class="speaker-twitter-profile" src="#"></a>
<div class="info-btn" onClick="swap('one','two')">info</div>
</li>
</a>
</ul>
</div>
And a javascript functions is:
function swap(one, two) {
document.getElementById(one).style.display = 'block';
document.getElementById(two).style.display = 'none';
}
The problem is, when I click on the "info" button, it effects on all div's, but I need it to only effect on the div which button is clicked.
Like if I click on info of BRIAN FARGO, it should only show/hide/effect BRIAN FARGO'S bio. Not all other speakers.
I don't understand why is your function named swap() when all it does is changes the display attribute of one element to block (which it already is by default) and changes another elements display to none effectively hiding it.
If you have many divs with the same id, that too could be your problem. Id should be unique for each element
I'm creating a dropdown in my navbar which contains a video player, however when I hide the video player by toggling the dropdown button, I'm still able to click on the hidden div element.
So when I'm trying to navigate other elements on the page, sometimes I click on the hidden div video player. How do I make the hidden div element in droppable unclickable? and then clickable again when I show the element using the dropdown.
Thanks!
EDIT:
I'm using the following code:
<a ng-cloak class="dropdown-toggle player-btn btn btn-large" data-toggle="dropdown">TOGGLE</a>
<div class="dropdown-menu">
<div style='position:relative;height:210px'>
<div style='position:relative;height:210px'>
<div id="player"></div>
</div>
</div>
</div>