Trigger / send a click event from another html element using jQuery - javascript

Via firebug or chrome I could look into the code of the Fb-Like button. I would like to send a click from another place which is a nicer button.
Nothing to do with a scam or anything like that. I would like my good looking icon to be presented and if so it will send that click to the Fb-Like box
This is the jQuery I tried (via square area on the image of my background as trigger):
$('.fbCustomMadeImageMap').click(function () {
// alert("mapFB");
$(".fb-like").find(".pluginButton button").click();
});
Now I have tested the square area to work on a click event and then I put the faceBook - jQuery find function though could not get hold of the correct element which I am supposed to send that click to..
This is the HTML of Fb-like box
What is the right refference for that element . in order to send it a click ?
RE-Edited
I have 2 sections of Like box... and this is the correct one i was reffering to
<div class="pluginConnectButton"><div class="pluginButton pluginButtonSmall pluginButtonInline pluginConnectButtonDisconnected hidden_elem" title="">
<div>
<button type="submit">
<i class="pluginButtonIcon img sp_like sx_like_fav"> </i>אהבתי
</button>
</div>
</div>
<div class="pluginButton pluginButtonSmall pluginButtonPressed pluginButtonInline pluginButtonX pluginConnectButtonConnected" title="">
<div>
<button type="submit">
<i class="pluginButtonIcon pluginButtonXOff img sp_like sx_like_ch"></i>
<i class="pluginButtonIcon pluginButtonXOn img sp_like sx_like_x" title=""></i>
</button>
</div>
</div>
</div>

Related

How can I add a link to an image opened in a lightbox leading to external ".html"?

I have a gallery in which the images that are clicked open in a lightbox. I want to add the option that the OPENED image can then be clicked again to link to an external page.
I already tried to wrap the tag in another tag - what was of course not successful - and was looking for some "data" code to add to the "href" line... but found nothing so far. Here is the code:
<div class="homepage-portfolio-preview-1 new-animation">
<a class="lightbox"href="img/Portfolio_img/Ele_macs.jpg">
<span class="background full-size" style="background-image: url(img/Portfolio_img/Ele_macs_thumb.jpg);"></span>
<span class="text">
<span class="h4 light"><b>WEBSEITEN LAYOUT</b></span>
<span class="empty-space col-xs-b15"></span>
<span class="simple-article large light transparent">TK Elementa</span>
</span>
</a>
</div>
I want the image link to the page where the project is described in detail BUT also want the viewer to be able to see the zoomed version of the image... Hoping for some help. Thanks
Have you tried putting the link tag inside the span?
<span class="background full-size" style="background-image: url(img/Portfolio_img/Ele_macs_thumb.jpg);">
Visit W3Schools
</span>

ajax cart success hide div and display another

I'm using ajaxify for some add to cart funcionality of my shopify collection page.
All works fine however I need to hide a div once the item has been added to cart and display another.
The Html looks something like this
<div class=“col-add-to-cart”>
<div class="col-add-btn-container">
<button type="submit" name="add" class="add-to-cart-main" data-add-to-cart="">
<span data-add-to-cart-text="">Add to cart</span>
</button>
<p class="ajaxified-cart-feedback success" style=""><i class="fa fa-check"></i> Added to cart! <a href="/cart">View
cart</a> or continue shopping.</p>
</div>
<div class="col-container">
<div class="col-add">
<div class="expand-icon expanded">
</div>
<div class="checkmark">
</div>
</div>
</div>
</div>
And the relevant JS
$addToCartBtn.addClass('inverted');
_setText($addToCartBtn, _config.addedToCartBtnLabel);
_showFeedback('success', '<i class="fa fa-check"></i> Added to cart! View cart or continue shopping.', $addToCartForm);
window.setTimeout(function () {
$addToCartBtn.prop('disabled', false).removeClass('disabled').removeClass('inverted');
$('.col-add-to-cart').find('.expand-icon.expanded').css("display", "none");
$('.col-add-to-cart').find('.checkmark').css("display", "block");
_setText($addToCartBtn, _config.addToCartBtnLabel);
}, _config.howLongTillBtnReturnsToNormal);
So as you can see I'm setting the checkmark to display: block and hide the expand-icon.expanded.
This works for the expand-icon as only one on the page has the .expanded class, however it shows all the .checkmark divs for each product. I only need it to display for the checkmark within the same container div as the .ajaxified-cart-feedback .success div. I've tried to do that with the col-add-to-cart container but doesn't seem to work.
You need to limit your query to a certain scope. From the info you provided I can't tell for sure what is happening, but you could try replacing $('.col-add-to-cart') with $addToCartBtn.closest('.col-add-to-cart')
The first one will select every element on the page with that class, causing the effect you observed. The second will start from $addToCartBtn (which I am assuming is a single element, in the context you need), find its closest parent with 'col-add-to-cart', then allowing you to "find" within the right context.
You could also try starting the query from $addToCartForm. It is not clear which element it refers to, but if it works for _showFeedback, it might work for your case too. That would look like this: $addToCartForm.find('.checkmark').css("display", "block");

HTML onclick div id goto both href

I have the .onclick function bound to a (div id) which will take it to another page once it is clicked ( onclick="location.href='homepage.html';" )
<div id="google">
google
</div>
Once the link in the is clicked it will open a blank page and load google.com but on the original page i need it to go to homepage.html or refresh either one.
You can use a Timeout for this.
HTML:
<div onclick="setTimeout(location.href='YOUR-URL-HERE';, 5000)" id="google">
<a target="_blank" href="www.google.com">google</a>
</div>
#google{width:100px; height:200px;background-color:red;}
<div onclick="setTimeout(location.href='www.houjebek.nl';, 5000)" id="google">
google
</div>

Insert <a> Into a div generated by a plugin with javascript or jQuery

I am working with a plugin that provides IDX data for listings on a WordPress website. The plugin uses jQuery to query a database for information that it displays on the page. The plugin is not very customizable past simple styling and I would like to insert a link to save to favorites
The link for saving to favorites can be found by viewing this page:
http://angelandpatty.com/homes-for-sale-details/8635-La-Entrada-Avenue-Whittier-CA-90605/PW14217291/306/
All the property details pages have the "save to favorites" button at the top of the page. This is what I found with the inspector:
<a data-toggle="modal" data-target="#ihfsaveListing" class="btn btn-primary btn-detail-leadcapture save-listing-btn"> <span class="hidden-xs"> <i class="glyphicon glyphicon-heart fs-12"></i> Save To Favorites </span> <span class="visible-xs fs-12"> Save To<br>Favorites </span> </a>
I am assuming the data-target is what is causing the button to take action.
What I would like to do is find a way to insert this same button, perhaps with a different icon like a thumbs up or a star, into the property stubs.
The property stubs are viewable on pages like this:
http://angelandpatty.com/homes-for-sale-in-friendly-hills/
I would like to find a way to insert this possibly after #ihf-main-container .col-xs-9
If there is any way to do this with Javascript or with jQuery I sure would like to know.
Thank you for all of your assistance. I tried searching for some situation like this but was unlucky
Are you looking for the following answer?
var button = $('<a data-toggle="modal" data-target="#ihfsaveListing" class="btn btn-primary btn-detail-leadcapture save-listing-btn"> <span class="hidden-xs"> <i class="glyphicon glyphicon-heart fs-12"></i> Save To Favorites </span> <span class="visible-xs fs-12"> Save To<br>Favorites </span> </a>');
$('#ihf-main-container .col-xs-9:first').after(button);
See: http://api.jquery.com/after/
.after(content [, content ] )
Description: Insert content, specified by the parameter, after each element in the set of matched elements.
You may need to initialize the button as required.

Jquery pop-up using fancybox

I've a button clicking on which it shows a pop-up message. Code is given below:
<a id="report_button_id" href="#report_form_container" class="form_show_link" style="text-decoration: none; cursor: hand">
<span id="report_button_text_id" class="top_nav_report_button">My Link Here</span>
</a>
<div style="display:none;">
<div id="report_form_container" class="popup_container">
// Some page is displayed here using div tags
</div>
</div>
In Javascript file:
$("a.form_show_link").fancybox({
centerOnScroll:true,
overlayOpacity:0.7,
overlayColor:'#000000',
showCloseButton:false,
hideOnOverlayClick:false,
onStart:resetPopupFormErrors
});
$("#report_form").keypress(function(e) {
if(e.which == 13){
$("#report_form").submit();
}
});
Can any one explain how the above code is displaying pop-up windows on clicking button especially when the style is none????
Thanks!
If I understand your question ('how does this work?'), it is prett simple... Fancybox is moving the target div out of its old container and into a temporary one that it controls. As such, its parent containers no longer have influence on the target (such as 'display:none').

Categories