Good night, I will be quick in my explanation. I need to get information from the element clicked on the site, for example, I want to get the css information from the elements I clicked, however, they can be div, button, li, etc. Getting the information is not a problem, the problem is being to identify which was the element that received the click, because it can have any id or any class. They are not fixed ids or classes. I'm using this js code but it's not working. He's giving me the html of the whole body.
$("*").click(function() {
console.log($(this).html());
});
Can someone help me please?
Att
if I don't get you wrong, you can view the properties of any element I click on the body thanks to event bubbling.
document.getElementById("body").addEventListener("click", function(e) {
console.log(e.target)
})
<body id="body">
<div class="container">
<div>
<h5>
<button>
ı am a button
</button>
</h5>
</div>
</div>
<div class="container-fluid">
<ul>
<li>
link
</li>
<li>
link
</li>
<li>
link
</li>
<li>
link
</li>
<li>
link
</li>
</ul>
</div>
</body>
Related
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).
I have 2 div's, the first is just a link,
<div id="click1" class="grid-66 mobile-grid-100 user-photo-tag-click" style="display:block" onclick="replace()"> CLICK AND SHOW TAGS
</div>
The second is a list of photo tags,
<div id="click2" class="grid-66 mobile-grid-100 user-photo-tag" style="display:none">
<ul>
<li>RACE SHOP
</li>
<li>AAA
</li>
<li>77
</li>
</ul>
</div>
I am trying to set it up so that when the link is clicked, it disappears and the photo tags show in its place. I have started a JSFIDDLE here, https://jsfiddle.net/patricksharer/g43t1bnh/ so that my code can be viewed cleanly. My javascript function doesnt seem to be working. Can somone please take a look and tell me why? Thanks
I'm doing some work and still fairly new to CSS,
I have some code here,
<div id='ninja-slider'>
<ul>
<li>
<div data-image="images/md/1.jpg" </div> </li>
<li>
<div data-image="images/md/2.jpg"> </div>
</li>
<li>
<div data-image="images/md/3.jpg"></div>
</li>
<li>
<div data-image="images/md/4.jpg"></div>
</li>
</ul>
</div>
I want to know how can i add a hyperlink to each of these images? I've tried however it hasn't worked for me unfortunately.
Please help, I even tried Javascript from a google search. Something to do with onclick
Cheers
wrap the div in <a> tag
<ul>
<li>
<div data-image="images/md/1.jpg"></div>
</li>
</ul>
Use <a></a> tag.
you can do this
<img src="your_image.jpg" width="" height="">
href will contain the page or wherever you want user to redirect.
This approach is better and more widely used than the one's you showed
Sorry if this is a silly question, I'm very new to JS/JQuery and don't know if there's a simple answer to my problem.
I have two toggling divs set up more or less like the following (this is the stripped-down version):
<div id="top-story-panel">
<div id="story-toggle">
<ul>
<li id="top-stories">
Top Stories
</li>
<li id="toc">
All Stories
</li>
</ul>
</div>
</div>
<div id="toc-panel">
<div id="story-toggle">
<ul>
<li id="top-stories">
Top Stories
</li>
<li id="toc">
All Stories
</li>
</ul>
</div>
</div>
With this function, the two divs toggle back and forth without a hitch, but if you click on one of the toggles ("top stories"/"all stories", respectively) and then click it AGAIN it hides the div it just showed and... can't find anything else to replace it with. Both divs are hidden now and there's no way for the user to interact with either div.
jQuery(function($) {
var $contentPanel= $('#top-stories-panel, #toc-panel')
$toggle= $("#top-stories, #toc");
$toggle.on('click', function(e) {
var $id;
e.preventDefault();
$icons.removeClass('hidden');
$id=$('#'+this.id+'-panel'); //get menu id
$contentPanel.fadeOut(10);
if(! $id.is(':visible')) {
$id.fadeIn(450)
preloadImages: 'all';
$(this).addClass('hidden');
}
});
});
I'm assuming that if I place the toggles outside of their respective divs, I won't have this problem -- but is there a code workaround for the toggle to stay within the div?
Thanks so much for all of your help ;_;
I know this is pretty easy, and I am probably missing something very obvious, but here it goes.
I have an <ul> with a bunch of stuff inside.
I have set jquery, so that when <ul> is clicked, to assign it a class name, but it doesn't work.
$(document).ready(function() {
$('#list').click(function(event) {
event.stopPropagation();
$(this).addClass('left');
});
});
It works however, if the <ul> is wider than the stuff in it, and I click where there is no stuff.
Here is the HTML
<ul id="list">
<li>
<a href="#" class="pos1">
<span class="ei_preview"></span>
<span class="ei_image"></span>
</a>
<div class="ei_descr">
<h2>Name</h2>
<h3>Last Name</h3>
<p>
Herp derp derp, hurr durr
</p>
<p>
Herp derp derp, hurr durr
</p>
</div>
</li>
<li>
<a href="#" class="pos2">
<span class="ei_preview"></span>
<span class="ei_image"></span>
</a>
<div class="ei_descr">
<h2>Name</h2>
<h3>Last name</h3>
<p>
Herp derp derp, hurr durr
</p>
<p>
Herp derp derp, hurr durr
</p>
</div>
</li>
</ul>
EDIT:
After looking at the CSS, when I click a <li>, it doesn't work for the <ul> because <li> is set as position: relative;. Any idea how to overcome this without removing the position property ?
CSS as requested : http://hastebin.com/pahaxexabo.css
The .left is the class I want to assign to the <ul>.
Well without the html, its hard to debug your javascript.
Looking at your java script, your function will trigger when an element with id 'list' is clicked.
Does your ul tag have the attribute id="list" ?
If you want clicking of any ul tags to trigger the event, change the 2nd line in your jquery to the following:
...
$('ul').click(function(event) {
...
Also, im unsure why you need this code below, it looks like it is superfluous
event.stopPropagation();
You javascript appears to be fine. The problem likely resides with your css. Try writing your HTML with the class you are adding already added and check if the ul has the desired style. Once it has the desired css style, then attempt using the jquery again.