I would like to know how to trigger the third onclick in Javascript without changing the HTML code. I have tried runCMConversionEventTag(); but no luck.
<div id="cartAction_bottom">
<img src="http://www.footlocker.com/images/fl/shoppingcart/continue_shopping.jpg" alt="Continue Shopping">
<img src="http://www.footlocker.com/images/fl/shoppingcart/checkout.jpg" alt="Checkout">
<div class="centered">or</div>
<img src="https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif" alt="PayPal Checkout">
<p>
</p></div>
This will do it:
$("#cartAction_bottom a:last").click();
$("#cartAction_bottom") chooses that div by its id.
$("#cartAction_bottom a") would choose all of the anchors inside that div
$("#cartAction_bottom a:last") should choose the last anchor in that div.
The .click() function will run the click event as if you clicked on that element.
Here's a very primitive jsfiddle to test it with.
Related
i have a div tag element and a couple of other elements inside it. I have on-click event set at div element, so that i can use its ID in my function. That works, but only if i click direct onto div element.
If i click direct on some of the other elements inside it, my function does not work because than i get id of the clicked tag. Is there any way that i can get divs id, no matter where i click on the div.
This is my code:
<a class="link" href="/userview/{{sendedId}}">
<div id="{{item.user_id}}" class="user" on-click="showUser">
<iron-image src$="{{item.social_accounts.0.profile_image}}"></iron-image>
<span class="username">{{item.full_name}}</span>
<br/>
<span class="followers">{{item.social_accounts.0.followers}} followers</span>
</div>
</a>
I used event.currentTarget and it works like i want it.
I was wondering how I could create a collapsable dropdown menu showing picture links for my website. Perhaps just simply displaying a dropdown symbol which both opens and collapses to show the site's navigation.
Hoping this is possible?
Add a button or image to the document that will serve as the main
list activation button.
Create a div element that contains a ul
element.
In the ul, create li elements that contain the images you
wish to use.
Wrap each image in an a element (to make them
clickable).
Use JQuery's slideToggle() method on the click event of
your button to show/hide the div.
Use jquery, set your links div as hidden then use jquery toggle() or slideToggle() to toggle the hidden div. Here is a fiddle example:
https://jsfiddle.net/edencorbin/x4sw2b6e/2/
HTML
<img src="http://placehold.it/50x50">
<div class="thediv" hidden="hidden">
<img src="http://placehold.it/50x50">
<img src="http://placehold.it/50x50">
<img src="http://placehold.it/50x50">
<img src="http://placehold.it/50x50">
</div>
Javascript
$(document).ready(function() {
$('#dropdownlink').click(function(e) {
e.preventDefault();
$('.thediv').slideToggle();
});
});
On page load I bind Event Handlers with content which is hidden on at the time of page load.
If users clicks on the button, the hidden content is pulled and replaces the main content of the page, Now the event Handlers which were initially binded do not work.
HTML code on Page load
<p> Initial content of the page </p>
<button id="button"> Click Here to change content</button>
<div class="show-later" style="display: none;"> Some Hidden content </div>
After the user clicks a button the new dom looks some thing like this
<p>
<div>Some Hidden content</div>
</p>
After the manipulation the event handlers binded to the div element do not work any more. Please notice that the div goes into the P element after DOM Manipulation.
jQuery Code:
$('#button').click(function(){
var show_later = $('.show-later').html();
$('p').html(show_later);
});
$(document).ready(function(){
$('.show-later').click(function(){
// Do something.....
});
});
You're not moving the <div>, you're just taking its content (a text node) and copying that to the paragraph. Contrary to what you've stated in the question, the resulting DOM will actually look like this:
<p> Some Hidden content </p>
<button id="button"> Click Here to change content</button>
<div class="show-later" style="display: none;"> Some Hidden content </div>
The <div> is still there, it still has content, and it still has the event handler for click bound to it; but it's also still hidden, so there's no way you can click on it.
I'd suggest that you actually move the <div> into the <p> element, like so:
$('.show-later').show().appendTo('p');
That will select the <div>, make it visible, and then move the element itself into the <p>.
have you tried to change your code like this?
$(document).ready(function(){
$(document).on('click', '.show-later', function(){
// Do something.....
});
});
Update2:
$('#button').click(function(){
var show_later = $('.show-later').html();
$('p').html(show_later).addClass('show-later');
});
Update1: I'm not sure, what your problem exactly is. Maybe you want to make a jsfiddle-example...
The 'on'-Method registers events so that even if you remove the element a make a new one, the events is already registered.
If you do
var show_later = $('.show-later').html();
$('p').html(show_later);
then no event handler bound to .show-later will become bound to the p. All you're doing is changing the contents of the p. I suggest changing the HTML as such:
<p class="hide-later"> Initial content of the page </p>
<p class="show-later" style="display: none;"> Some Hidden content </div>
<button id="button"> Click Here to change content</button>
and the javascript as such:
$('.show-later').show();
$('.hide-later').hide();
I have a very simple div with an image inside:
<div class="stack4">
<img src="images/002m.jpg" width=200>
</div>
And a very simple Jquery function for when you hover over the image:
$(function () {
$('.stack4>img').hover(function(){
prompt('hello');
});
});
This all works fine. However, I'm trying to add additional content to the page, and so put the following HTML directly after the end of the first div:
<div id="menucontainer" class="menuContainer">
<div id="menu" class="menuContent">
<img src="images/003m.jpg" />
<img src="images/004m.jpg" />
</div>
</div>
After I add this, the jquery prompt no longer works. Why would adding anothing div break my existing javascript command like that?
There has to be a script error in the page that is causing a failure. Or there is a very slight chance that your new html in some way introduces an invisible element that covers your stack4 image. If you can provide a link somebody could debug it for you.
It breaks because the selector no longer matches any elements (because the class selector .stack4 does no longer match any element).
<div id="menucontainer" class="menuContainer">
<div id="menu" class="menuContent">
<img src="images/003m.jpg" />
<img src="images/004m.jpg" />
</div>
</div>
$(function () {
$('.stack4>img').hover(function(){
prompt('hello');
});
});
If you look at your javascript, it will:
match any child image of an element with class name stack4
Add a hover listener to each image
Display a prompt on hover.
IF you look at your updated DOM structure, class stack4 no longer exists. To make it work again, you have to replace this selector with your new equivalent, which would be the div with id=menu and class=menuContent.
Now, depending on your needs, you can target either #menu>img or .menuContent>img. If you go with the first one, the javascript fragment will only work for a single menu, with the id of menu. However, if you choose the second approach, any content with the class menuContent will have this functionality. So I'd go with:
$(function () {
$('.menuContent>img').hover(function(){
prompt('hello');
});
});
I have a wrapper box which has an onclick event to make the whole box cickable to go to a different page, something like this:
<div onclick="window.location='http://dom.com/page1/'">
<p>Title</p>
<img alt='img' />
<p>Some text</p>
My link
<p>Some more text</p>
</div>
The problem is that the child link will never go to page2 because the parent onclick takes priority and wherever you click on the box you will always end up in page1.
Is there any way to solve this, I need to be able to go to page1 when clicking anywhere on the box but going to page2 when clicking on the link.
The "onclick" handler is old-school. I'd recommend downloading and including jQuery in your HTML, then using it like so:
<script src="main.js"></script>
main.js:
jQuery( document ).ready(function(){
jQuery( "div" ).click( function( e ){
window.location='http://dom.com/page1/';
e.preventDefault();
};
} );
You probably don't need the e.preventDefault(); line, as you're changing the location of the browser before it executes.
Also, it's good practice to avoid applying click handlers to tags. Perhaps you should use two tags and CSS to properly position and layer to the two over-top each other.
You should look into event capturing and event bubbling. Here is a nice article to get you started.
One hack around it is to have anchor tag instead of div and make it block level element:
<a href="http://dom.com/page1/" style="display: block; text-decoration: none;">
<p>Title</p>
<img alt='img' />
...
</a>
This will also work when JS is disabled and the only downside is that it's not really elegant.