I was wondering if some could help me to produce another case in Fancybox 2 media helper for Soundcloud. I need it to load the soundclooud iframe when the fancybox is triggered - otherwise with a number of embeds things go really slow.
I'm not very familiar with regular expressions - hence my enquiry.
The google part looks like this:
google_maps : {
matcher : /maps\.google\.([a-z]{2,3}(\.[a-z]{2})?)\/(\?ll=|maps\?)(.*)/i,
type : 'iframe',
url : function( rez ) {
return '//maps.google.' + rez[1] + '/' + rez[3] + '' + rez[4] + '&output=' + (rez[4].indexOf('layer=c') > 0 ? 'svembed' : 'embed');
}
}
Now if we take the standard iframe code for soundcloud:
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F91535490"></iframe>
I believe we would take the url from the iframe as the direct link does not contain the id of the track - only string representation of it.
What I've got so far (trying hard ;) - is the following, which doesn't work:
soundcloud : {
matcher : /w\.soundcloud\.([a-z]{2,3}(\.[a-z]{2})?)\/(\?ll=|url\?)(.*)/i,
type : 'iframe',
url : function( rez ) {
return '//w.soundcloud.com/player/?url=$1';
}
}
Could someone point me in the right direction here please?
Ok - for those who also wonder - I've managed to get it to work with the following:
soundcloud : {
matcher : /w\.soundcloud\.com\/player\/(.*)\/?(.*)/,
type : 'iframe',
url : function( rez, params, obj ) {
obj.width = '600px';
obj.height = '166px';
return '//w.soundcloud.com/player/' + rez[1];
}
}
Related
For debug purposes, I wanted my marker to have a pop-up that had the json in it.
The value is something like:
var CarState= {
"height" : 6.2,
"width" : 7.3,
"length" : 9.1,
"color" : {
"r" : 255,
"g" : 200,
"b" : 10
}
}
But this is not working, all I get is a truncated pop-up. The content of CarState is constantly changing, but the same property bag is there.
Notes: self refers to the AMD module that this code is in. I don't use this, since you can get in trouble. self.pop is a variable that holds the L.PopUp
this.update = function () {
var text = "<p>" + JSON.stringify(CarState) + "</p>";
self.pop.setContent(text);
self.pop.update();
}
here is what it looks like:
and here is what Chrome says is the pop-up div size:
OK, this is working for me now. Not completely sure what the problem was.
this.update = function () {
var text = "<pre><code>" + JSON.stringify(CarState, null, '\t') + "</code></pre>";
theCar.setPopupContent(text);
theCar.update();
theCar.setLatLng(L.latLng(CarState.lat, CarState.lon));
theMap.panTo(L.latLng(CarState.lat, CarState.lon));
}
The innerHTML I'm inserting doesn't show up on the browser until I resize the window. Here's the site I'm having the problem on: http://www.granthpark.me/outside
<h1 id="mainz">
<script>
jQuery(document).ready(function($) {
$.ajax({
url : "http://api.wunderground.com/api/c1ea49b3e06dc3b3/geolookup/conditions/q/CA/San_Francisco.json",
dataType : "jsonp",
success : function(parsed_json) {
var weather = parsed_json['current_observation']['weather'];
console.log(weather);
if (weather == "Patches of Fog" || weather == "Shallow Fog" || weather == "Partial Fog" || weather == "Overcast" || weather == "Clear" || weather == "Partly Cloudy" || weather == "Mostly Cloudy" || weather == "Scattered Clouds" || weather == "Light Mist" || weather == "Heavy Mist") {
document.getElementById("mainz").innerHTML = "The weather at Outside Lands is OKAY!";
}
else {
document.getElementById("mainz").innerHTML = "The weather at Outside Lands sucks right now.";
}
}
});
});
</script>
</h1>
<p id="weather" style="font-size:30px;">
<script>
jQuery(document).ready(function($) {
$.ajax({
url : "http://api.wunderground.com/api/c1ea49b3e06dc3b3/geolookup/conditions/q/CA/San_Francisco.json",
dataType : "jsonp",
success : function(parsed_json) {
var location = parsed_json['location']['city'];
var temp_f = parsed_json['current_observation']['temp_f'];
var weather = parsed_json['current_observation']['weather'];
document.getElementById("weather").innerHTML = "Current temperature in " + location + " is " + temp_f + "°" + "F" + " and it's " + weather.toLowerCase() + ".";
}
});
});
</script>
</p>
Here's my CSS in case: http://www.granthpark.me/assets/css/main.css
Strange behaviour indeed.
It seems to come from your #wrapper stylesheet :
remove the position:fixed or replace it to position:absolute and it seems to work.
Don't clearly know why though, since your css is quite complicated.
It works for me in Crome and Firefox, but if you don't find a better solution you could try adding this line $(window).trigger('resize'); to the ajax success functions after modifying innerHTML.
I have a site with a fancyBox gallery. I have added the Facebook like button to the gallery so I have a like for each image in the gallery. Problem is, that when clicking like on one of them, it doens't poste to facebook. However, it saves who likes what, so when others open the same gallery they can see who has liked what, but it's not posted.
I need to have each liked image to be posted on facebook.
I have tried with jsfiddle, but no matter what I do I can't get it to work: http://jsfiddle.net/sZG4L/
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox-button").attr('rel', 'gallery').fancybox({
beforeShow: function () {
if (this.title) {
// New line
this.title += '';
// Add FaceBook like button
this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&layout=standard&show_faces=true&width=450&action=like&font&colorscheme=light&height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true"></iframe>';
}
},
helpers : {
title : { type : 'inside' },
buttons : {}
},
afterLoad : function() {
this.title = (this.index + 1) + ' / ' + this.group.length + ' ';
}
});
});
I guess I need some sort of variable, so my "this.href" points to each image, also after it is closed, maybe some dynamically function. I have been searching for this, but not been able to find out.
I have also tried updating the facebook like to html5, but then I'm not able to get it visible.
Hope someone can help.
I am developing a plugin for video embedding, I put this code when the plugin dialog OK button is clicked.
var embedCode =
'<iframe title="YouTube video player" class="youtube-player" type="text/html"' +
width="' + width + '" height="' + height + '" src="http://www.youtube.com/embed/' + textField + '?rel=0"' +
frameborder="0" width="620" height="200" style="width:' + width + 'px; height:' + height + 'px">' +
'</iframe>';
this.getParentEditor().insertHtml(embedCode);
Now when double click on the iframe in the editor open the iframe properties dialog not my plugin dialog.
How I can develop a fake image for my custom plugin.
I have found a solution for it.
Ckeditor make fake elements from the code generated by the plugins. When the editor loads it takes the code and convert it to fake elements and the default editing is worked on that fake elements the code for it will be defined in the
afterInit : function( editor )
{
function of the the editor and will be called in on OK event of the edior
onOk : function()
{
var embedCode = updatePreview( this,true );
var newFakeImage = editor.createFakeElement( embedCode, 'cke_audio', 'audio', true );
The Code for the fake element example is the following, I have created for an audio embed code plugin
afterInit : function( editor )
{
function createFakeElement( editor, realElement )
{
return editor.createFakeParserElement( realElement, 'cke_audio', 'audio', true );
}
var dataProcessor = editor.dataProcessor,
dataFilter = dataProcessor && dataProcessor.dataFilter;
if ( dataFilter )
{
dataFilter.addRules(
{
elements :
{
'div' : function( element )
{
//alert("here");
var attributes = element.attributes;
if( attributes.class == 'audio' ){
//alert("here");
return createFakeElement( editor, element );
}
return null;
}
}
},
5);
}
}
I want to show an explicit tooltip while drag-drop tree node inside treeview.
example: "Node 1 will be moved before/after/inside Node 2"
From move_node callback argument, we can get the position ("before/after/inside") but not from check_move callback (neither from prepare_move).
Tooltip should be displayed while drag-droping, so move_node is too late.
The same problem when drag-drop external object to treeview, the drag_check callback from dnd plugin has no information about the position (we just know the target node but not if it is before, after or inside).
In that case, even for drag_finish callback we don't have the information.
Is there somebody who can help me solving this issue ?
I just tested this and its working fine for me on prepare_move ...
.bind("prepare_move.jstree",function(event, data) {
console.log("o : " + data.rslt.o.attr("id"));
console.log("r : " + data.rslt.r.attr("id"));
console.log("p : " + data.rslt.p);
})
this is what is logged
o : item_3
r : item_2
p : inside
I am using JSTree v1.0RC2
Here what I use to do it with jQuery plugin jDialog (or you can replace it with a simple jAlert function):
.bind("move_node.jstree", function (e, data) {
var id = data.rslt.o.attr("id").replace("node_","");
var name = data.inst.get_text(data.rslt.obj);
jConfirm('Moving node name:' + name, 'dialog title'), function(answer) {
if (answer == true){
$.post("/js_trees/"+ id,
{
"_method" : "put",
"operation" : "moving_my_node",
"id" : data.rslt.o.attr("id").replace("node_",""),
"ref" : data.rslt.np.attr("id").replace("node_",""),
"position" : data.rslt.cp,
"title" : data.rslt.name,
"copy" : data.rslt.cy ? 1 : 0
},
function (r) {
if(!r.status) {
$.jstree.rollback(data.rlbk);
} else {
$(data.rslt.oc).attr("id", "node_" + r.id);
if(data.rslt.cy && oc.children("UL").length) {
data.inst.refresh(data.rslt.oc);
}
}
}
);
}else{
$.jstree.rollback(data.rlbk);
}
});
})