parameter not being passed in javascript plugin, html syntax issue? - javascript

I'm using a plugin called Prettyphoto, when you initiate the plugin you can pass a parameter called social_tools where you can enter in html that loads Twitter and Facebook buttons.
The default html in the js file itself works no problem, I can also add in html into the js file and it works.
But when I try and add the code where I initiate the plugin it stops working.
All I end up seeing is }); }); outputted on the screen, as if something is not closing correctly somewhere.
Im working locally.
Here is my code
<script type="text/javascript" charset="utf-8">
$(document).ready(function(pp_settings){
$("a[rel^='prettyPhoto']").prettyPhoto({
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>'
});
});
</script>
Here you can see the list of parameters, if you scroll down to customization, at the end you will social_tools
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation
Thanks

The <script> element actually ends at the 1st use of </script>, despite its placement or usage inside a String literal.
A common trick to prevent this is to break it up:
'...</' + 'script>...'

Does this also not work?
var 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>'};
$(document).ready(function(pp_settings){
$("a[rel^='prettyPhoto']").prettyPhoto(options);
});

Related

Hide header of Sharepoint custom list displayed in iframe

I have a custom list from a different sharepoint site (still the same domain) that I would like to display on my work site without the header (at a minimum, but getting rid of the ribbon would be nice too). I have attempted 4 methods without success listed below:
1) I can't even get it to work on a normal page by adding ?isdlg=1 to the end of my url (ie ..allitems.aspx?isdlg=1)
2) since I mostly work with SQL and not HTML I am sure I may have screwed up some of my tags.
<div class="ms-dlgFrameContainer">
<iframe width="1400" height="600" id="DlgFramee" class="ms-dlgFrame" frameborder="0" src="myurl.aspx">
<html class="ms-dialog">
<head>
<style type="text/css">
.ms-dialog #titleAreaBox { display:none }
</style>`
3) to hide the header of the page inside the iframe.
<script type="text/javascript">
document.getElementById("myiframe1").contentWindow.document.getElementById("titlerow").style.display = "none"; </script>`
4) Most promising. When I add
<iframe id="myiframe1" src="myurl" width="1000" height="450" frameborder="1"></iframe>
<style>
#titleAreaBox { display: none }
</style>
in the same CEWP as my iframe, it removes the title area for current page and not the page in the iframe. This exactly what I want except I want it to do that for the page inside the iframe.
5) I did this as well even just trying to change header color but didn't notice any change. I looked up the correct webpart ID.
<style type="text/css">
#MSOZoneCell_WebPartWPQ2 .ms-WPHeader
{ background-color: pink; }
</style>
You could try below jQuery script, I just hide suiteBarTop in demo.
<iframe id="myiframe" width="1400" height="600" id="DlgFramee" class="ms-dlgFrame" frameborder="0" src="/sites/tst/SitePages/Home.aspx"></iframe>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
$('#myiframe').load(function () {
$(this).contents().find('#suiteBarTop').hide();
});
})
</script>

How do I reference this embedded iframe from javascript

I am using squarespace (in retrospect a poor idea because of the difficulty of customizing with code), and I need to be able to identify the vimeo iframe within this div so I can use it in some javascript calls. However, the javascript does not recognize any such iframe element existing. I feel like either it's impossible to identify the iframe as it is currently shoved into the div (by squarespace), or I am missing a selector. Any help or pointers would be appreciated.
Here's the iframe I am trying to embed into squarespace:
<iframe src="http://player.vimeo.com/video/135481337?api=1&player_id=player1&wmode=opaque" width="500" frameborder="0" id="player1" class="vimeo" height="281"></iframe>
Here's the embedded iframe:
<div class="sqs-video-wrapper" data-load="false" data-html="<iframe src="http://player.vimeo.com/video/135481337?api=1&amp;player_id=player1&amp;wmode=opaque" width="500" frameborder="0" id="player1" class="vimeo" height="281"></iframe>" data-provider-name="" >
</div>
And here is my javascript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
alert("this alert is working");
// Enable the API on each Vimeo video
jQuery('iframe.vimeo').each(function(){
Froogaloop(this).addEvent('ready', ready);
});
function ready(playerID){
Froogaloop(playerID).addEvent('play', play(playerID));
Froogaloop(playerID).addEvent('finish', onFinish);
}
function play(playerID){
alert(playerID + " is playing!");
}
function onFinish() {
document.write('<style>.yui3-lightbox2-content {display: none !important;}</style>');
}
});
</script>
I've taken this from a working example of this api as seen in this link.

Image not Rendering in html on append

I am getting a response from an API like so (This is a part of it)
{
"Content": "<span class="PubAPIAd"><script type="text/javascript" src="http://ru.gwallet.com/r1/ad/MTAuMTAyLjIuNzQgODg4OA==/c366792T246999B22980F24848R13t2?data=zmxnsak48w9msqkeq9hbz4dja7u4sstqxoircsqutictr7inboxhwujhu8n1c9scn5t53xs396h6re6nz4u1a1brbnmzzxjt7qy8difcdkgk9g34ngknd9qky7w5udgzrhm64h74abbpyh47djbgb5acp3f1ghb1kfeysy716j133gqhydk3au6ydj8h14aztefkrjfp7fj3mqj54sntbrhosseh397g7g7ns75ja3rhwcq9gzao5m6g8h9zph5sckzeoahibtru5cbda7bpcfmrra&auction_price=0.05"></script></span> <img src="http://aktrack.pubmatic.com/AdServer/AdDisplayTrackerServlet?operId=1&pubId=51762&siteId=51766&adId=95947&adServerId=243&kefact=0.050000&kaxefact=0.050000&kadNetFrequecy=1&kadwidth=320&kadheight=50&kadsizeid=31&kltstamp=1416004675&indirectAdId=0&adServerOptimizerId=2&ranreq=0.05247270006223126&kpbmtpfact=0.050000&dcId=2&tldId=80779&passback=0&imprId=139A6406-07A0-4DD1-8B76-81C35E5EA412&mobflag=1&ismobileapp=1&modelid=604&osid=7&udidtype=0&campaignId=6575&creativeId=0&pctr=0.000000&wDSPByrId=11&imprCap=1&pageURL=http%3A%2F%2Fatt_1617ee24-7ff6-4402-9e8b-77dcb53f880f.com" width="1" height="1" />"
}
I am trying to append the "content" to a div on my web page using Jquery append or js innerHTML to display an ad. However i do not see an image.
document.getElementById('myDiv').innerHTML = response.Content;
But if i hard code this into my HTML to start with it displays an image.
Would really like to know why this is happening and how i can fix it
Note: I have no control over the backend. Also this image is an ad i am trying to load so please disable ad blocker to try viewing it.
EDIT: This is what is see in the console
Resource interpreted as Image but transferred with MIME type text/html: "http://aktrack.pubmatic.com/AdServer/AdDisplayTrackerServlet?operId=1&pubId…mprCap=1&pageURL=http%3A%2F%2Fatt_1617ee24-7ff6-4402-9e8b-77dcb53f880f.com".
EDIT 2 : Here is an example of it Hard Coded (where it renders properly). Need to disable ad blocker to view --> http://jsfiddle.net/0z1cybrf/
I'm assuming that response.Content returns html that you want to insert into myDiv. In this case you can simply use jQuery.
$('#myDiv').append(response.Content);
also as Samuel Liew pointed out in the comments, your string isn't valid. You can fix this by changing the quotes next to the attributes to ' (single quotes).
EDIT - Try this:
$('#myDiv').append('<span class="PubAPIAd"><script type="text/javascript" src="http://ru.gwallet.com/r1/ad/MTAuMTAyLjIuNzQgODg4OA==/c366792T246999B22980F24848R13t2?data=yydr8ogr3e5zsn1cacgexhma83oaf1xzjfyna3mgdwi473hf3wjcwujhu8n1c9scn5t53xs396h6re6nz4u1a1brbnmzzxjt7qy8difcdkgk9g34ngknd9qky7w5udgzrhm64h74abbpyh47djbgb5acp3f1ghb1kfeysy716j133gqhydksc3h869rc47kzse66wx4hpx4uiqj54sntbrhosseh397g7g7ns75ja3rhwcq9gzao5m6g8h9zph5sckzeoahibtru5cbda7bpcfmrra&auction_price=0.05"></script></span><img src="http://aktrack.pubmatic.com/AdServer/AdDisplayTrackerServlet?operId=1&pubId=51762&siteId=51766&adId=95947&adServerId=243&kefact=0.050000&kaxefact=0.050000&kadNetFrequecy=1&kadwidth=320&kadheight=50&kadsizeid=31&kltstamp=1416004779&indirectAdId=0&adServerOptimizerId=2&ranreq=0.20811005185761733&kpbmtpfact=0.050000&dcId=2&tldId=0&passback=0&imprId=E1FB9573-FF52-4CAC-BFE1-92EDBDC23FD2&mobflag=1&ismobileapp=1&modelid=604&osid=7&udidtype=0&campaignId=6575&creativeId=0&pctr=0.000000&wDSPByrId=11&imprCap=1&pageURL=http%3A%2F%2Fatt_1617ee24-7ff6-4402-9e8b-77dcb53f880f.com" width="1" height="1" />');
Tell me if you get the same result.
### Final Edit ###
It seems the javascript in the script tag isn't executing and that's why the image isn't showing up. To prove this you can insert the Content like you were doing before, and then visit the link given in the <script> src attribute. Copy the script and go to your console. Paste the code into the console and press enter. The image should show up. At least it did for me. You can try hardcoding the script tag into your html, because that wont change.
HTML code
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
<script src="functions.js></script>
<script type='text/javascript' src='http://ru.gwallet.com/r1/ad/MTAuMTAyLjIuNzQgODg4OA==/c366792T246999B22980F24848R13t2?data=yydr8ogr3e5zsn1cacgexhma83oaf1xzjfyna3mgdwi473hf3wjcwujhu8n1c9scn5t53xs396h6re6nz4u1a1brbnmzzxjt7qy8difcdkgk9g34ngknd9qky7w5udgzrhm64h74abbpyh47djbgb5acp3f1ghb1kfeysy716j133gqhydksc3h869rc47kzse66wx4hpx4uiqj54sntbrhosseh397g7g7ns75ja3rhwcq9gzao5m6g8h9zph5sckzeoahibtru5cbda7bpcfmrra&auction_price=0.05'></script>
</head>
<body>
<DIV id="myDiv" ></DIV>
</body>
</html>
jQuery Code functions.js
$(document).ready(function() {
$(window).load(function() {
$('#myDiv').append("<img src='http://aktrack.pubmatic.com/AdServer/AdDisplayTrackerServlet?operId=1&pubId=51762&siteId=51766&adId=95947&adServerId=243&kefact=0.050000&kaxefact=0.050000&kadNetFrequecy=1&kadwidth=320&kadheight=50&kadsizeid=31&kltstamp=1416004779&indirectAdId=0&adServerOptimizerId=2&ranreq=0.20811005185761733&kpbmtpfact=0.050000&dcId=2&tldId=0&passback=0&imprId=E1FB9573-FF52-4CAC-BFE1-92EDBDC23FD2&mobflag=1&ismobileapp=1&modelid=604&osid=7&udidtype=0&campaignId=6575&creativeId=0&pctr=0.000000&wDSPByrId=11&imprCap=1&pageURL=http%3A%2F%2Fatt_1617ee24-7ff6-4402-9e8b-77dcb53f880f.com' width='1' height='1' />");
});
});

How to load jQuery from the iframe to its parent page

I have a below code in my iframe and it contain some jQuery and I want to call it from the iframe to parent page but it not working and path of the iframe is the content/test/doubleimg.html
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.example.com/content/test/base64.js"></script>
<script type="text/javascript" src="https://www.example.com/content/test/doubleimg.js"></script>
And double img contain some jQuery function which is execute onload of the page and it work fine but if i put it in iframe its not working.
And my html markup like and path of the parent file is template/category.html
<div id="Container">
-----------
-----------
<div class="Content" id="LayoutColumn2">
<iframe id="theiframe" allowtransparency="true" target="_top" src="/content/test/doubleimg.html" frameborder="0" height="0" width="0"></iframe>
</div>
</div>
So please suggest me the idea how can I use jQuery from the iframe and my jQuery is execute on the page load.
Actually I am trying to call api of the Bigcommerce but for that I need to set https and I can't set it because it not allowed in the Bigcommerce to set https in category page url
And if I am not set https then the API returns a 401 authentication error
So please help me out from this.
Something like this, if documents are in the same domain:
var iframe = document.getElementsByTagName('iframe')[0];
var jQuery = iframe.contentWindow.jQuery;
alert(jQuery);
See my jsfiddle for more information. It include other jsfiddle in iframe there I inited jQuery.
try this
window.parent.document.wirte('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>');

Google Maps not functioning for me

My Google maps code is all squared away and valid, but it doesn't load on the page. Here is the page in question, I have full availability to code, not sure why it's breaking:
http://whs.rjuhsd.us/calendar/map
The Gmaps JS is in the header, with the correct key. Sensor is set to true, and the element is defined in the document, displayed properly, in the right spot and available to the user.
Halp?
Looks like you have conflict between jQuery and Prototype.
Use the noConflict mode of jQuery.
PS: Why are you using both?
Chetan is right, you are running into a conflict between jquery and Prototype. I see that you have called jquery.noConflict() once, but then after that you import jquery again into your document, thus undoing the noConflict:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
... snip ...
<!-- following scripts are for the jwPlayer installations oct.09 -->
<script type="text/javascript" src="/scripts/swfobject.js"></script>
<script type="text/javascript" src="scripts/jwplaylist/jquery-1.3.2.min.js">
</script>
Is there any reason why you didn't just update the swfobject.js to use the earlier version of jquery?
I see two links to google maps, but I assume you want to display a google map as part of this page right?
There's an empty DIV on your page:
<div id="map_canvas" style="width: 500px; height: 300px;"></div>
Maybe this is where you intended to embed the map? If so, you can try to replace it with the following:
<div id="map_canvas" style="width: 500px; height: 300px;"><iframe width="500" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=2551+Woodcreek+Oaks+Blvd.+Roseville,+CA,+95747&sll=37.0625,-95.677068&sspn=41.767874,58.535156&safe=on&ie=UTF8&t=h&hq=&hnear=2551+Woodcreek+Oaks+Blvd,+Roseville,+Placer,+California+95747&ll=38.764056,-121.330884&spn=0.015209,0.020106&z=16&output=embed"></iframe><br /><small>View Larger Map</small></div>

Categories