I have this situation that i need to trigger click on some element from clicking other element. More concretly - i have gallery with thumbnails. When you hover over the thumbnail - the description box covers the whole thumbnail. After that i need to trigger click event on the thumbnail so it can run lightbox. To achieve this i need to do something when i click on the description.
This is the html:
<div id="gallery">
<!-- Content from handlebars that is loaded dynamicaly from template file via ajax -->
<a class="lightbox lightbox-frame" href="img/gallery/{{filename}}.jpg" data-lightbox="gallery" data-category="{{category}}">
<img src="img/gallery/thumbs/{{filename}}.jpg" alt=""/>
</a>
<p class="gallery-image-description">{{description}}</p>
<!-- Content from handlebars -->
</div>
I am trying this but it does not work. It works for statick content but this content is loaded via Ajax and then compiled with Handlebars:
('#gallery').on('click', '.gallery-image-description', function () {
$(this).prev().click();
});
So the question is: Do you have any idea how i can trigger click event on dynamicaly generated content, by clicking on other element ?
I'm not sure this will help because I've never used lightbox, and I can't be sure that there isn't an interaction between lightbox and the JS.
But here is a FIDDLE that
Has a dynamically generated div/image
On hover, covers the image with text
A click on the parent pops up an alert
JS
$('.imagestuff').on('click', function(){
alert('clicked');
});
Related
I've noted that whenever I create a Foundation 6 Reveal Modal the actual HTML is placed at the bottom/end of the document regardless of where the actual reveal modal is placed in my HTML code.
Although this is fine most of the time I've ran into an edge case where I need to place a form partial inside a modal. The issue is that the modal is placed outside the form_tag as the Foundation Javascript moves it to the end of the HTML document. I've been able to work around it but it makes my code much more complicated than it needs to be.
Is there any easy fix to change where the foundation modal is placed in the HTML document? Is there any particular reason that modals are placed at the end of the HTML document? Unfortunately I could not find anything on the docs, Foundation forums or SO.
Example psuedocode:
<div id="first-div">
<div class="reveal" id="modal" data-reveal></div>
</div>
<div id="second-div">
<p>Some stuff here</p>
</div>
Output in browser is:
<div id="first-div">
<!-- this is empty now -->
</div>
<div id="second-div">
<p>Some stuff here</p>
</div>
<!-- reveal modal is moved to end of HTML document -->
<div class="reveal-overlay">
<div class="reveal" id="modal" data-reveal></div>
</div>
Edit:
Attached a Codepen noting the output issue. The modal opens and closes as exected but when inspecting the output HTML the reveal modal is moved to the end of the HTML document - it's actually below the tags at the bottom.
https://codepen.io/matt_hen/pen/RZZBQM
You need to specify where your modal needs to pop up. I forked your codepen
$('#first-div').foundation('reveal', 'open');
https://codepen.io/titse/pen/ayygrW
Let me know if you need more help
This works on Foundation 6:
You need to override the Foundation default appendTo variable for Reveal. That can be done the following ways:
Add a data-append-to="div#first-div" tag on the Reveal div to specify the parent element for the Reveal modal and, if applicable, overlay divs. This allows you to change the parent element individually for each Reveal modal.
Source: Foundation Documentation
Change the default value for the Reveal module globally by specifying the override default value when you initialize Foundation with Foundation.Reveal.defaults.appendTo = "div#first-div"
Source: Foundation Docs
In my testing, setting the parent to a smaller div inside the body element did not adversely affect the positioning of the modal or the display of the background overlay.
Specifying the parent in the call (e.g. $('#myDiv').foundation('reveal','open); does not work in the current release of Foundation.
Hello stackoverflow community. I am using lightGallery plug-in and have a problems with making it running with external kind of button in my case anchor tag, can you suggest what have i done wrong or maybe any other way to get it working right.
HTML
Enter full screen view
<div class="owl-carousel" id="selector1">
<div class="item" data-src="img/1.jpg" name="fullscreen"><img src="img/1.jpg">
</div>
JavaScript
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
$('#selector1').lightGallery({
selector: '.item'
});
lightGallery plug-in: http://sachinchoolur.github.io/lightGallery/docs/#installation
Here are some things that might/will cause problems:
The href attribute does not work like that. The link will just open another website. Instead you need to execute some javascript to activate the fullscreen mode, when the link is clicked.
You have two opening <div> tags, but only one closing. Also, you should close the <img> tag.
You probably want all of your posted javascript in the $(document).ready(function() {}); function
There is no element with the id lightgallery.
I don't know anything about the data-src attribute.
This should fix most of the problems, however it will not enable the fullscreen functionality:
html
<div class="owl-carousel" id="lightgallery">
<div class="item" data-src="img/1.jpg">
<img src="img/1.jpg" />
</div>
</div>
javascript
$(document).ready(function() {
$('#lightgallery').lightGallery({
selector: '.item'
});
});
This is the code for a simple pinterest button.
<div class="myPinterestButton">
<a href="//www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest"
data-pin-do="buttonPin"
data-pin-config="none">
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
</a>
</div>
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
None of the content is iframed. The pinterest button ends up being the <a> tag with some additional data attributes (thanks to the pinit.js which adds it at runtime).
Here's the thing I don't undrestand. If I click the button it works fine. But if I want to trigger a click on it (for example click a different element on the page and use jQuery to do $(".myPinterestButton a").trigger("click") it doesn't work.
Here's a jsfiddle: http://jsfiddle.net/h42vK/2/
What's going on here please?
You can use click event for wrapper div .myPinterestButton instead .myPinterestButton a
$(".myPinterestButton").trigger("click")
Currently, I am dynamically loading HTML via a dropdown click event (via jquery event)
The problem that arises is my .on event function is not finding the selector to fire the "a" tag click event.
If the original page that is loaded contains html with the "a" tag with the specified class, the click event for that "a" tag works fine, BUT if I dynamically load new content via the jquery event, then IF a clickable "a" tag exists and I click it, the original page just posts back, there is no evidence of the "a" tags click event firing.
Here is a sample of the dynamically loaded content;
<div id="recipedirectionsandimage">
<div id="recipedirections">
<h2 class="recipedirectionsheader"> Recipe Directions</h2>
<ol class="recipesteps">
<li>Pre-Heat oven to 350°, Grease two 9" springform pans</li>
<li>Sift all dry ingredients into a large bowl</li>
<li>Add corn oil, eggs and vanilla, mix well</li>
<li>Fold in walnuts, coconut, carrots and pineapple</li>
<li>Pour batter into the greased pans</li>
<li>Bake for 50 minutes on the middle racks</li>
</ol>
<p>Click <a ID="creamcheesefrosting.txt" class="icing"
href="#">here</a> for frosting recipe</p>
</div>
<div id="recipeimage">
<img src="Images/RecipeImages/carrotcake_160x233.png" alt=""/>
</div>
</div>
Here is how the content is loaded, the html is retrieved via a WCF service which I've confirmed is working;
function resetRecipeHtml(html, recipename) {
$("#lblRecipeLegend").text("Recipe for " + recipename);
$("#recipecard").html(html);
}
Here is the jquery event code, for now this code is just in a script block on the page outside the document ready code ( doesn't work if it's in it either) Note: The alert is there only to prove the event is firing.;
$('#recipedirections p').on('click', 'a.icing', function (e) {
e.preventDefault();
var filename = $(this).attr("id");
alert(filename);
getRecipeHtml(filename);
});
Part of your question
Here is a sample of the dynamically loaded content;
<div id="recipedirectionsandimage">
<div id="recipedirections">
As, recipedirections is also a part of dynamically loaded content. You should use document or nearest static container. You should use recipecard
$("#recipecard").on('click', 'a.icing', function (e) {
e.preventDefault();
var filename = $(this).attr("id");
alert(filename);
getRecipeHtml(filename);
});
i use dialog box without dialog ui for show erorr event in web page
<div id="downloadcredit" style="width:100%;position:fixed;height:100%;min-height:overflow:hidden;background-color:rgba(127,127,127,0.4);display:none;" >
<div style="text-align:right;width:466px;position:absolute;left:0;right:0;height:337px;min-height:overflow:hidden;background:url(images/creditbase.png);color:black;margin-left:auto;margin-right:auto;top:200px;font:16px behzad;">
<div style="width:100%;height:40px;background:transparent;font:20px behzad;padding-top:8px;color:#818181;text-align:center;"><span style="float:right;font:12px tahoma;font-weight:bold;color:#75797A;margin-right:15px;cursor:pointer;margin-top:6px;" onclick="$('#downloadcredit').slideUp('slow');">X</span></div>
<div style="margin:175px auto 10px;width:95%;font:11px tahoma;text-align:center;color:white;line-height:165%;">
<p> Erorr Sample ...
</div>
</div>
</div>
<body onload="$('#downloadcredit').slideDown('1000');">
but my page is Slow loading and 3 or 4 second after page complete loaded dialog show :( .
any way for show dialog first and page load in background?
I usualy apply the style "display:none" to the target container, then you can use the .load() function and use the callback to show your container filled with data.
Basically :
$('#target').hide();
$('#target').addClass("loading-layer");
$('#target').load('toto.php',function(){
$('#target').removeClass("loading-layer");
$('#target').show();
});