Cant pull attr data with javascript, coming back as undefined - javascript

Im using PrettyPhoto Version 3.1.5 in a prestashop site, and am attempting to add a pinterest button, I would ideally not like to have to change the code in the js file itself.
For some reason media and url is still coming back as undefined...
<script type="text/javascript">
$(document).ready(function() {
{literal}
var photo_options = { social_tools: '<div class="twitter">Tweet<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></' + 'script></div><div class="facebook"><iframe src="//www.facebook.com/plugins/like.php?locale=en_US&href={location_href}&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true"></iframe></div><div class="pinterest"><img border="0" src="http://assets.pinterest.com/images/PinExt.png"; title="Pin It" /></div>' };
{/literal}
$("a[rel^='prettyPhoto']").prettyPhoto(photo_options);
});
</script>
Here is part of the generated html after you click on the image...
<div id="pp_full_res">
<img id="fullResImage" src="/modules/gallery/img/2bf766b19efd5410fa795f452b401186.jpg" style="height: 365px; width: 486px;">
</div>
I tried $('#fullResImage').attr('src') but still nothing

Related

Hide an element inside an <object> tag with JavaScript

I want to hide an element inside an <object> tag , the element is <div class="footer">...</div> I tried this code but still not working, please help me
<div>
<object id="t" type="text/html" data="https://www.example.com/" width="100%" height="600px" style="overflow:auto;">
</object>
</div>
and this is my javascript code
<script>
$(document).ready(function(){
var t = document.querySelector("#t");
var htmlDocument = t.contentDocument;
htmlDocument.getElementsByClassName("footer")[0].style.visibility='hidden';
});
</script>
Thank you I fixed it (hide the footer of example.com inside my website) by using an iframe and css following this code :
<div style="overflow:hidden;">
<iframe src="https://www.example.com/" name="iframe_all" frameborder="0" style="width: 100%; height: 650px; margin-bottom: -120px;" ></iframe>
</div>

How to change iframe src

Please bear with me if i'm asking something very basic as I don't know much about coding. I have a stock charting application which has a built-in web browser. I configured this browser to load a html page, which i coded as below, like this mypage.html?symbol=xzy, What i am trying to do here is to capture the submitted html variable, 'symbol' and use its value as part of the url string to load a portion of another third party webpage. I can't figure out what's wrong with my javascript code that is failing to set the value of the 'src' attribute. Any help is most appreciated.
<html>
<header>
<script>
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
</script>
</header>
<body>
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
</html>
try move the script after html DOM
<body>
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
<script>
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
</script>
A couple of things: 1) start with performing the function onLoad - that way you know the script will run and popluate the src attribute after the browser renders it, and not before.
2) use a function to get the url value.
<html>
<header>
<script>
<!-- source: http://javascriptproductivity.blogspot.com/2013/02/get-url-variables-with-javascript.html -->
function GetUrlValue(VarSearch){
var SearchString = window.location.search.substring(1);
var VariableArray = SearchString.split('&');
for(var i = 0; i < VariableArray.length; i++){
var KeyValuePair = VariableArray[i].split('=');
if(KeyValuePair[0] == VarSearch){
return KeyValuePair[1];
}
}
}
function SetContent(){
var symbol = GetUrlValue('symbol');
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
}
</script>
</header>
<body onLoad="SetContent();">
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
</html>
Move the javascript to the bottom of the page AFTER the iframe. You are trying to change an element before it is created. Also do src="about:blank" initially, so it validates.

Adding a URL to an Iframe being called by Fancybox2-AJAX Based on the Iframe's ID

Okay I have this working minus the fact of having this working once I call in with fancybox via AJAX.
Static Example Works:
<iframe id="videourl1" width="640" height="340" src="" frameBorder="0"></iframe>
<iframe id="videourl2" width="640" height="340" src="" frameBorder="0"></iframe>
<iframe id="videourl3" width="640" height="340" src="" frameBorder="0"></iframe>
$("div.video-container iframe").each(function(){var idAdd=$(this).attr("id");$(this).attr("src","http://www.youtube.com/embed/"+idAdd+"?rel=0&autoplay=0&modestbranding=1&showinfo=0&autohide=1")})
Now when I take this and pull the 3 iframes into .txt files and call them from an index.html file using fancybox2-ajax call it fails:
Index.html:
<a id="1" class="fancybox fancybox.ajax" href="text/1.txt">Link</a>
<a id="2" class="fancybox fancybox.ajax" href="text/2.txt">Link</a>
<a id="3" class="fancybox fancybox.ajax" href="text/3.txt">Link</a>
Text files contain the iframes:
<iframe id="videourl" width="640" height="340" src="" frameBorder="0"></iframe>
How do I code the JS to say run each time when the iframe is called in by AJAX?
You can use the fancybox callback afterLoad to run javascript after the content is loaded.
However, it does seem unnecessary to jump through all these hoops to load a video instead of just using the media helper:
<a class="fancybox-media" href="http://www.youtube.com/watch?v=opj24KnzrWo">Youtube</a>
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox-media').fancybox({
helpers : {
media : {}
}
});
</script>
});
Answer:
$(".fancybox").fancybox({
afterShow: function () {
$("div.video-container iframe").each(function () {
var idAdd = $(this).attr("id");
$(this).attr("src", "http://www.youtube.com/embed/" + idAd‌d + "?rel=0&autoplay=0&modestbranding=1&showinfo=0&autohide=1")
});
}
});

How to lazy load Facebook's Like Box?

I have found a tutorial for lazy loading Facebook's like box, but it's appropriate only if you use one FB widget on a page.
How would it look like if you want to load "like button" normally, but would like to lazy load "like box", i. e. load it only if the user scrolls and like box is in the viewport?
Also, is it possible to do it without any plugins nad possibly without jquery, i. e. using only pure javascript?
Here is the mentioned code:
/**
* check if facebookHolder is in viewport, and then load Like Box widget
*/
$(document).ready(function() {
function checkScrollingForWidget(event) {
$('#facebookHolder:in-viewport').each(function() {
$('#facebookHolder').append('<div id="fb-root"></div>');
$('#facebookHolder').append('<fb:like-box href="http://www.facebook.com/forexagone" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
FB.init({status: true, cookie: true, xfbml: true});
});
$(window).unbind('scroll', checkScrollingForWidget);
}
$(window).bind('scroll', checkScrollingForWidget);
});
Since Facebook's like box is so widely used and can slow down page loading a bit (even if it's async.), I was quite surprised to see that there are no newer tutorials how to do this. Is it possible at all?
Thank you in advance for your ideas.
This is Markus' code in a simple HTML document:
<html><head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Lazy Load</title>
<script src="http://code.jquery.com/jquery-git.js" type="text/javascript"></script>
<script src="http://www.appelsiini.net/download/jquery.viewport.js" type="text/javascript"></script>
<style type="text/css">
.facebookHolder {
height: 50px;
background: #ccc;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
// initiate like boxed already in viewport as soon as fb sdk loaded.
checkScrollingForWidget();
});
function checkScrollingForWidget(event) {
$('.facebookHolder:in-viewport').each(function(index, item) {
if (!$(item).hasClass('fb_loaded')) {
$(item).append('<fb:like-box href="' + $(item).attr('data-url') + '" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
$(item).addClass('fb_loaded');
FB.XFBML.parse();
}
});
}
$(window).bind('scroll', checkScrollingForWidget);
});
</script>
</head>
<body>
<div id="fb-root"></div>
<div class="facebookHolder" data-url="https://www.facebook.com/Google"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/yahoo"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/stackoverflowpage"></div>
</body></html>
You can add a Facebook widget any time dynamically, but you need call FB.XFBML.parse after adding it to the DOM.
This could be inteteresting for me too so I just fixed the tutorial script:
JSFiddle
Of course you need to import jquery and the viewport plugin (if you want to use it).
<script src="jquery.js"></script>
<script src="jquery.viewport.js"></script>
Then include fbroot tag only once and give the holders an specific data-url attribute because loading one url multiple times doesn't seem to be possible. Late we will read out this data-attribute.
<div id="fb-root"></div>
<div class="facebookHolder" data-url="https://www.facebook.com/Google"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/yahoo"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/stackoverflowpage"></div>
Then use the following jQuery code:
$(document).ready(function() {
jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
// initiate like boxed already in viewport as soon as fb sdk loaded.
checkScrollingForWidget();
});
function checkScrollingForWidget(event) {
$('.facebookHolder:in-viewport').each(function(index, item) {
if (!$(item).hasClass('fb_loaded')) {
$(item).append('<fb:like-box href="' + $(item).attr('data-url') + '" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
$(item).addClass('fb_loaded');
FB.XFBML.parse();
}
});
}
$(window).bind('scroll', checkScrollingForWidget);
});

Why the difference in displaying my webcam image across browsers?

I have an IP webcam and upload an image to a weather service. I then capture that image to display in my webpage. In order to do that I searched for some code that would refresh the image without refreshing the page. I found some code (sorry, I don't know who to acknowledge) that I adapted ……..
<script>
var reimg
window.onload=function () {
reimg=document.getElementById('re')
setInterval(function () {
reimg.src=reimg.src.replace(/\?.*/,function () {
return '?'+new Date()
})
},60000)
}
</script>
The next bit is, to a great extent, probably overkill but I have been trying to get it to work (how I want it to look) on all browsers...
<iframe frameborder=0 marginwidth=0 marginheight=0 border=0 width="360" height="270" style="overflow:
hidden;border:0;margin:0;width:360px;height:270px;max-width:100%;max-height:100%"
src="http://icons.wunderground.com/webcamramdisk/g/l/Gluepack/1/current.jpg?" id="re" scrolling="no"
allowtransparency="true">If you can see this, your browser doesn't understand IFRAME. However, we'll
still link
you to the file.</iframe>
It works fine in Firefox, reducing the 640 x 480 original image to fit. However, in IE and Chrome only the centre top part of the image is shown (i.e. the image is not reduced to fit). Is there any additional code required to ensure it displays correctly (i.e. how I want it, reduced to fit) in IE and Chrome or is it not possible?
How images are displayed is really up to the browser, there is not standard for that. The easiest solution would be to create an HTML file that contains the javascript and a <img> tag for the image instead of loading the image directly into the iframe:
<!DOCTYPE HTML>
<html><head>
<script>
window.onload = function() {
var reimg = document.getElementsByTagName('img')[0];
setInterval(function () {
reimg.src = reimg.src.replace(/\?.*/, function () {
return '?'+new Date()
});
}, 60000);
};
</script>
<style type="text/css">
* { margin: 0; padding: 0; }
img { width: 360px; height: 270px; }
</head><body>
<img src="http://icons.wunderground.com/webcamramdisk/g/l/Gluepack/1/current.jpg?">
</body></html>
Save this as "webcam.html" or whatever:
<iframe frameborder=0 marginwidth=0 marginheight=0 border=0
width="360" height="270" style="overflow: hidden; border:0;
margin:0; width:360px; height:270px; max-width:100%; max-height:100%"
src="webcam.html" id="re" scrolling="no"
allowtransparency="true">...</iframe>

Categories

Resources