Well I have most of the problem figured out. But there is still a slight problem. The <iframe src="" doesn't seem to be behaving, it won't pick up the url in my data-popupurl="product.asp?itemid=[catalogid].
Anyone know why?
<script>
$( document ).on( "pageinit", "#page1", function() {
$(".popupInfoLink").on("click", function(){
var url = $(this).data("popupurl");
$( "#popupInfo iframe" ).attr("src", url);
});
});
</script>
<a class="popupInfoLink" href="#popupInfo" data-rel="popup" data-position-to="window" data-popupurl="product.asp?itemid=[catalogid]"><img src= "/thumbnail.asp?file=[THUMBNAIL]&maxx=200&maxy=0" width="320" height="300" alt="pot" border="0" /></a>
<div data-role="popup" id="popupInfo" data-overlay-theme="a" data-theme="d" data-tolerance="15,15" class="ui-content">
<iframe src="" width="800px" height="800px"></iframe>
</div>
You can see my problem here:
https://www.kitchenova.com/mobile
Just run a search for lets say "cookie" then click on a product. A blank pop-up comes up where the product.asp?itemid=[catalogid] should be loading.
You can use the jQM popup widget with an iFrame.
Here is a DEMO
The link around the img now links to the popup id. I added a custom data attribute called data-popupurl that has the url for the iFrame and I added a class for a click handler as you will probably have multiple thumbnails on a page (NOTE: the data attribute could just hold the catalog id, or you could use another way to get the url):
<a class="popupInfoLink" href="#popupInfo" data-rel="popup" data-position-to="window" data-popupurl="http://www.houzz.com/photos/6147609/T-Fal-I-Hoffmann-Stock-Pot-8-Qt--contemporary-cookware-and-bakeware-"><img src= "http://st.houzz.com/simgs/a1419d6702561831_3-4003/contemporary-cookware-and-bakeware.jpg" width="320" height="300" alt="pot" border="0" /></a>
<div data-role="popup" id="popupInfo" data-overlay-theme="a" data-theme="d" data-tolerance="15,15" class="ui-content">
<iframe src="" width="400px" height="400px"></iframe>
</div>
The script simply responds to a click on the link by reading the url for the popup and then setting the iFrame src to that url. In your case the url would be product.asp?itemid=[catalogid]
$( document ).on( "pageinit", "#page1", function() {
$(".popupInfoLink").on("click", function(){
var url = $(this).data("popupurl");
$( "#popupInfo iframe" ).attr("src", url);
});
});
Have a look at the target attribute of the anchor (a) tag.
Here is the W3 Schools documentation.
<img src= "/thumbnail.asp?file=[THUMBNAIL]&maxx=200&maxy=0" width="320" height="300" alt="[name]" border="0">
By the way, I strongly urge you not to do this. People don't like that, because they don't have a way of knowing that's the behavior before they do it. If people really want to open it in a new window or tab, then they can right click and do that.
Keep one question per post is the Stack Overflow policy. But the best way to learn is by jumping in and doing tutorials. Don't ask questions until you've gotten seriously stuck. Part of learning to program is learning to figure things out on your own.
So you don't want to pop open a new window, you want a dialog frame to appear overlayed on top of your other content?
Have a look at the PopupControlExtender from the Ajax Control Toolkit. I don't know how well it will work in a jQuery Mobile environment, but it's worth a look.
Sample code.
<asp:Button runat="server" ID="Btn1" Text="Click Here For More Info" />
<ajaxToolkit:PopupControlExtender ID="PopEx" runat="server" TargetControlID="Btn1" PopupControlID="Panel1" Position="Bottom" />
<asp:Panel runat="server" id="Panel1">
Here is some more info!
</asp:Panel>
Or since you're using jQuery Mobile, why don't you stick with what they already provide for this? Have a look at jQuery Mobile panels or jQuery Mobile popups.
Related
I came across similar questions, but it did not have the exact problem/solution I was hoping for. I apologize in advance if this has been answered before and I missed it.
I have dynamic HTML code that I insert on AJAX return from db:
for(var i=0;i<data.Links.length;i++){
$('#vid-list').append('<li class="vid-item" onclick="startVideo(\''+data.Links[i]+'\')"><div class="thumb"><img src="'+ data.Thumb[i]+'"></div><div class="desc">'+data.Name[i]+'</div></li>');
}
data.links is an array of youtube embed links. data.Name is an array of titles, data.thumb is the respective thumbnail images and so on.
startVideo is a fucntion in my JS file defined as this:
$(function(){
function startVideo(srcUrl){
$('#popup2').style.display ='block';
document.getElementById('vid_frame').src=srcUrl;
}
});
It passes the link from the dynamic HTML to play the video in an iframe popup. The HTML code for that is :
<div class="vid-list-container">
<ul id="vid-list">
<!--need to insert videos here-->
</ul>
</div>
<div id="popup2" class="popup">
<iframe id="vid_frame" frameborder="0" height="315" src="" width="560" allowscriptaccess="always">
</iframe>
<a class="close" href="#" onclick="toggleVideo('hide')">
<img id="close-icon" src="../images/info-close-icon.png"></a></div>
</div>
So this is my problem: The HTML looks fine after loading. Data gets properly populated within the HTML elements.
But when I click on the video, no popup appears. i.e. startVideo() does not get called onClick event. This code worked fine with static HTML code. I read other questions and it was said that if the event happens after the dynamic element has completely loaded, there should not be problem with the binding.But that is not the case here.
Are there any other checks that I could do?
I was wondering, I have a div in a htm page(1) that open and display another htm file(2). And I have areas on this page(2). When I click on those areas, it open another page in the div.
I was wondering if there is a way in native JS using a MutationObserver to observe this kind of modification and do something everytime it happen?
I Work on IE11 exclusively.
Page 1 :
<div id="one">
<iframe src="index.htm" style="width:100%; height:100%;" alt="" id="fram"> </iframe>
</div>
Index.htm
<img src="../assets/SM2.png" usemap="#Tr" id="draggable" class="dragme" onload="initiate()">
<map name="Tr" style="z-index=1;" id="mapping">
<area title="2" shape="circle" coords="6426,4171,8" href="2/Tr.xml">
...
And the thing would occur when I click on the area in Index.htm.
I couldn't find the solution on internet since this is a very particular question /:
Thanks in advance!
Have a nice evening!
EDIT 1: Is it possible do it in some awful way such as using "OnPropertyChange" and when I click on the area, I call a function that change some properties in my page? :/
Alright, I'll post this as an answer then:
You can simply listen for the load event on your iframe, as it should be fired each time a (new) pages has finished loading:
document.getElementById('fram').addEventListener('load', function()
{
/* this is called on the iframe's first load,
and every time it has finished loading a new page */
});
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 might be a little confusing to explain, but I've been up all night pondering it and I can't seem to get in right.
I have an Iframe running on my website, inside the iframe is one image with one link. This is what is inside of the iframe from what I grabbed out of FireBug.
<head>
<body style="background-color:transparent; margin:0; outline-offset:0;">
<div style="text-align:center;">
<a onclick="document.location.reload(true);" href="http://randomwebsite.com/THE-URL-I-NEED" target="_blank">
<img width="160" height="600" border="0" src="http://randomwebsite.com/RANDOM-IMAGE.JPG">
</a>
</div>
</body>
</html>
Now, I need to grab that single URL and set it as a variable using Jquery, then set the variable as a link outside the iframe. So I was thinking something like this.
<a id="myiframelink" href=""></a>
<script>$("#myiframelink").attr("href","URL-FROM-INSIDE-IFRAME");</script>
if the embedded iframe url is not same as your domain, there is no way to grab that url. Otherwise, you can use something like
$($('iframe')[0].contentWindow.document.body).search("a").attr('href')
I'm trying to figure out just how a particular function works on a Facebook page, and being no friend of JS syntax, am having trouble. Here's the question mark bit:
<a href="#" clicktoshowdialog="my_dialog" onclick="
(new Image()).src = '/ajax/ct.php?app_id=4949752878&action_type=3&post_form_id=3b933f46f9c4c44981e51b90c754bfce&position=2&' + Math.random();
FBML.clickToShowDialog("app4949752878_my_dialog");
return false;">
<img src="linktopicture" title="Are your friends fans?" width="190" height="230" />
</a>
<div style="display:none">
<div id="app4949752878_my_dialog" fbcontext="aa3fcff8e653">
<div class="app_content_4949752878" style="padding:10px">
<div with hidden then exposed content...
The functionality of this is an image that, when clicked, pops out the previously hidden div. I know that the app###### is prepended to all JS used in Facebook to limit its scope. I'm confused by the anchor parameter of
clicktoshowdialog="mydialog"
What is that identifying, and how is it targeting the div that's exposed when the image is clicked? Thanks for any clarification, and let me know if I can post any more sample code.
According to the wiki it's just for opening the dialog (which is defined at the bottom). Facebook generates the JS to open the dialog. The attribute got post-processed and the JS code (that you see in the onclick= attribute) was generated on it's basis.