I`m using panoramio api to show some pictures about a destination. Unfortuanatly for some destinations they dont have any images.
How could i test if panoramio doesnt have any results so i can display something else.
I tried replacing it usig livequery:
$('#div_attr_ex_photo').find('.panoramio-wapi-empty-img').livequery(function(){
//replace panoramio with something
})
This work, but only if i click, or press a button ( probably when any event occures ). Can`t imagine why...
Any other method that does the job is welcome.
It is very simple just go to panoramio website and then open World Map from panoramio website.Then go to specified location whichs latitude and longitude required.
Then you found latitude and longitude in address bar for example in this address.
http://www.panoramio.com/map#lt=32.739485&ln=70.491211&z=9&k=1&a=1&tab=1&pl=all
lt=32.739485 =>latitude
ln=70.491211 =>longitude
this Panoramio JavaScript API widget create a bounding box around a lat/long pair and then returning all photos with in those bounds.
Another type of Panoramio JavaScript API widget in which you can also change background color with example and code is here.
It does not show in composing mood.It show after publishing.
<div dir="ltr" style="text-align: center;" trbidi="on">
<script src="https://ssl.panoramio.com/wapi/wapi.js?v=1&hl=en"></script>
<div id="wapiblock" style="float: right; margin: 10px 15px"></div>
<script type="text/javascript">
var myRequest = {
'tag': 'kahna',
'rect': {'sw': {'lat': -30, 'lng': 10.5}, 'ne': {'lat': 50.5, 'lng': 30}}
};
var myOptions = {
'width': 300,
'height': 200
};
var wapiblock = document.getElementById('wapiblock');
var photo_widget = new panoramio.PhotoWidget('wapiblock', myRequest, myOptions);
photo_widget.setPosition(0);
</script>
</div>
Related
So, I have tried for ages now it seems to track multiple Embedded videos on my test-site with Adobes SiteCatalyst.
Below is the link with documentation I've used
https://gist.github.com/KamalChembath/00106eb266c91777c32e
The problem I've tried to solve is that I want to be able to listen/track already embedded videos, and not actually create the videos using the API and THEN listen to them.
But the documentation "appends" an iframe created by the API into an empty div that needs to have the same id as the iframe id.
But since the embedded video is already there, I don't need this part, obviously.
Please feel free to ask questions if I'm not clear enough.
Anyone had this issue before?
Below is some changes I've made to try to make it append two players into two divs(trying to hack the code I've already got) Putting it all into a for-loop.
Regards everyone!
<div id="player123">
iframe id="player123" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/-yKNuU8biQo?enablejsapi=1&origin=http://example.com"
frameborder="0"></iframe>
</div>
<div id="player1234">
<iframe id="player1234" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/VyK-JhjPguY?enablejsapi=1&origin=http://example.com"
frameborder="0"></iframe>
</div>
<script>
var iframeObject = document.getElementsByTagName('iframe');
for ( var i = 0; i < iframeObject.length; i++){
var youtube_id = iframeObject[i].id;
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player(youtube_id, {
videoId: iframeObject[i].src.substring(29, 40),
events: {
'onStateChange': onPlayerStateChange,
'onError' : onPlayerError
}
});
}
</script>
We have implemented google +1 buttons on our site and they have served reliably for some time. However we recently noticed that the buttons are not serving reliably. We rarely see them appear in their designated spaces.
For example on this page: Sample Page : you'll see a gray box of social buttons to left of the page. In it, there is SUPPOSED to be a Google +1 button.
We've requested the button with this code:
<div id="social-google" class="social">
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<g:plusone size="medium"></g:plusone>
</div>
We've also tried this code:
<div id="social-google" class="social">
<!-- Place this tag where you want the share button to render. -->
<div class="g-plus" data-action="share" data-size="small" data-annotation="bubble"></div>
<!-- Place this tag after the last share tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
Occasionally we'll see a Google +1 button render but, more often than not, the space reserved for the button is apparently blank. When you examine things with firebug, you see that Google HAS attempted to render a button, but for some reason it has placed the button far above and left of the page boundaries.
Here is the top of the html Google generates for the button:
<div id="___plusone_0" style="position: absolute; width: 450px; left: -10000px;">
<iframe id="I0_1377554650466" width="100%" scrolling="no" frameborder="0" hspace="0 marginheight="0" marginwidth="0" style="position:absolute;top:-10000px;width:450px;margin:0px;border-style:none" tabindex="0" vspace="0" name="I0_1377554650466" src="https://apis.google.com/_/+1/fastbutton?bsv=o&usegapi=1&size=medium&hl=en-US&origin=http%3A%2F%2Fwww.comicbookresources.com&url=http%3A%2F%2Fwww.comicbookresources.com%2F%3Fpage%3Darticle%26id%3D47537&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps- ...
As you can see Google gave its generated ___plusone_0 div a left position of -10000px and gave the inner iFrame a top position of -10000px. So the button is there. It's just floating out in space. If I manipulate theses position settings (to 0px) the button becomes visible in its appropriate spot.
Any idea why this would happen? Any idea how we can fix this?
You can try adding the following CSS declaration to your stylesheet:
#___plusone_0, #___plusone_0 iframe {
position:static !important;
}
This is a hackaround, so don't depend on it in long term.
Based on an old thread in Drupal Issues.
During the last few days I'm suffering from this problem too. I have a page building app. One of the widgets is google plus: users can enter a url, and the app generates a button. (So there can be more, than 1 button on the page.) Then user saves the page and can see it on Facebook.
Recommendations and observations...
Double check the protocol of google api script. For example, if your website is on https and you are trying to load http://apis.google.com/js/plusone.js, your buttons will probably fail to render.
When I tested this issue on my server, I occasionally opened the app in 2 browser tabs at the same time. Google buttons didn't appear in the first tab, but they did in the second one!
My app requires user to be authorized on Facebook. When I opened the app without authorization, the buttons were shown as expected. But when I logged in and refreshed the page - buttons disappeared.
When I opened the page on Facebook, buttons didn't appear, regardless of whether I was logged in or not.
I beg your pardon, if you think these notices have no sense, but they may save someone's time in future.
Workaround
Suppose, you're parsing the following code:
<!-- google button will be added into this div -->
<div class="googlePlus" data-href="http://google.com"></div>
jQuery function, which parse all .googlePlus divs.
$('.googlePlus').each(function () {
var $googleDiv = $(this);
// check, if button is already parsed
if (!$googleDiv.children().length) {
// add temporary id to the parent div
var $id = 'googlePlus-' + new Date().getTime();
$div.attr({
'id': $id
});
// create, add and render btn (IE compatible method)
var gPlusOne = document.createElement('g:plusone');
gPlusOne.setAttribute('href', $googleDiv.attr('data-href'));
document.getElementById($id).appendChild(gPlusOne);
gapi.plusone.go($id);
// function, correcting css styles
if (!$.isFunction($.fn.fixGooglePlus)) {
$.fn.fixGooglePlus = function () {
$(this).children('div').children('iframe').addBack().css({
position: 'static',
width: 106,
height: 24
});
}
}
// run function, until css is fixed
var $timer = setInterval(function () {
$googleDiv.fixGooglePlus();
if ($googleDiv.find('iframe').css('position') == 'static') {
clearInterval($timer);
$googleDiv.removeAttr('id');
}
}, 100);
} // button hasn't been parsed
});
Put the button code in a a new HTML file and put that file in an iframe. Compared to #U-D13's answer, it's less susceptible to changes by Google.
I'm using the vLine JavaScript API with the uiVideoPanel widget to make WebRTC video calls.
My code looks like this:
window.vlineClient = client_ =
vline.Client.create({"serviceId": serviceId, "ui": true,
'uiVideoPanel':'showvideo'
});
and HTML:
<div class='span5'
style="width:300px;height:300px;background-color: #eeeeee;"
id='showvideo'>
</div>
However when one person calls another, the video takes up the full screen instead of only 300px by 300px.
How can I control the size of the video?
Make sure you set the CSS position to relative or absolute.
For example, with the HTML you provided it would be:
<div class='span5'
style="width:300px;height:300px;background-color: #eeeeee; position: absolute;"
id='showvideo'>
</div>
I'm using Aptana Studio 3 to create a map, I replaced the function init address to the appropriate address needed to link to the map I want to represent. When I Run it on Aptana Studio 3, it brings me to an unfinished build where the map isn't present and only an outline of the Map Area, plus instructional use on the bottom. I tried using other samples from the ArcGIS resource center to only get the same results if I implement it through Aptana or through Root Directory.
Create Map
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
<script type="text/javascript">
dojo.require("esri.map");
function init() {
var map = new esri.Map("map");
var imageParameters = new esri.layers.ImageParameters();
imageParameters.format = "jpeg"; //set the image type to PNG24, note default is PNG8.
//Takes a URL to a non cached map service.
var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://maps.nbtexas.org/ArcGIS/rest/services/Maps/NewBraunfelsBaseMap/MapServer",
{"opacity":0.5, "imageParameters":imageParameters});
map.addLayer(dynamicMapServiceLayer);
}
dojo.addOnLoad(init);
</script> </head> <body class="claro">
<div id="map" style="width:900px; height:600px; border:1px solid #000;"></div>
Creates a map and adds an ArcGISDynamicMapServiceLayer.<br />
Map navigation using mouse:
<ul>
<li>Drag to pan</li>
<li>SHIFT + Click to recenter</li>
<li>SHIFT + Drag to zoom in</li>
<li>SHIFT + CTRL + Drag to zoom out</li>
<li>Mouse Scroll Forward to zoom in</li>
<li>Mouse Scroll Backward to zoom out</li>
<li>Use Arrow keys to pan</li>
<li>+ key to zoom in a level</li>
<li>- key to zoom out a level</li>
<li>Double Click to Center and Zoom in</li>
</ul> </body> </html>
I hope someone can help me. I have colorbox working on a new client site, but I'm having troubles figuring out how to add code that will allow for the image that pops up to be clicked and then linked to an external site in a new tab.
This is what I have so far:
$(document).ready(function(){
$("a[rel='pop']").colorbox({transition:"fade", speed: 250});
});
<span class="h2">Baby Knits Kit</span> (2007)<br>Chronicle Books<br>
In the above, when Baby Knits Kit is clicked a pop-up opens fine with the image I created (about.babyknitskit.png). On top of the pop-up there's "Get it at Chronicle Books" and when I click it will take me to that site (in the same tab which I don't want). Instead, I would like the about.babyknitskit.png image to be clickable and opening up the link in a new window.
Any thoughts much appreciated. I hope I've given you guys enough information as I'm new to all of this and stackoverflow.
Simply use the html property of colorbox. Alternatively you could use the href property with 'inline' set to true. I have defined a custom attribute for the anchor for easier extraction, alternatively you could write a regex pattern to extract it from the title attribute.
$(document).ready(function() {
$("a[rel='pop']").colorbox({transition:"fade", speed: 250, html: function(){
var html = $('<img src="' + $(this).attr('href') + '" />');
return html;
}});
});
<span class="h2">Baby Knits Kit</span> (2007)<br>Chronicle Books<br>