I use slider revolution plugin of wordpress and i load a youtube in a popup when click play button using fancybox. The video is loaded by i receive this message before loading the video :
"youtube api could not be loaded revolution slider"
/* change revapi1 to whatever api number is being used for your slider */
var api = revapi1;
/* no need to edit below unless you want to change the default FancyBox settings */
api.on('revolution.slide.onloaded', function() {
jQuery(this).find('.fancybox').each(function() {
var $this = jQuery(this);
if(!$this.is('a')) $this = $this.removeClass('fancybox').find('a');
$this.addClass('fancybox').fancybox({
/* begin FancyBox options */
width: 960,
height: 540,
autoSize: true,
aspectRatio: true,
fitToView: true,
autoCenter: true,
scrolling: 'no',
type: 'iframe',
onClosed: function() {api.revresume()}
}).on('click', function() {api.revpause()});
});
});
I think your cache might have been the issue, you can use another browser to test it, or switch to incognito mode
Related
I'm using FullCalendar v.3.4.0 with no CSS changes.
I have only the base css and the print version declared.
As you can see on the picture, the last event, that starts near midnight, is getting cut visually.
In Fullcalendar's Github, there is a sticky issue regarding Chrome's rendering of the table, but I'm not sure if the problem lies there.
I haven't tried Firefox, but I'm running this in a webview of a Cordova app on Android, so i'm bound to Chrome.
example of the issue
Init code
$('#events').fullCalendar({
defaultView: 'agendaDay',
allDaySlot: false,
editable: false,
eventLimit: true,
displayEventTime: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
events: "remote.php"
}
Can I add a "ghost" event so it pushes the overflowed view in order to see that event? I would like avoid jquerying my way into the DOM, but if there is no other change I will do so.
Thank you in advance.
Best regards
I have solved with the following steps:
Backend
Added a field called "time" ( or any field you wish to use ) and whenever you detect the end date goes to the next day you set "time" to "23-59".
Frontend
Add the following code to your Fullcalendar init:
eventRender: function(eventObj, $el) {
if (eventObj.time == "23-59") {
$($el).css({"overflow":"inherit","height":"50px"});
}
},
eventAfterAllRender : function (view) {
if (view.type == 'agendaDay') {
$(".fc-agendaDay-view .fc-slats table tbody").append('<tr>\
<td class="fc-axis fc-time fc-widget-content" style="height:100px"></td>\
<td class="fc-widget-content"> </td>\
</tr>');
}
}
This is not an elegant solution for v3 but it suits my requirements.
I try to implement FancyBox 3 in a carousel from the plugin slider revolution. The next code works well with FancyBox 2 but with fancyBox 3 the arrows not work. I want o know if someone has the solution.
Link: https://www.themepunch.com/faq/using-fancybox-with-slider-revolution/
Code that works well in FancyBox2 but not shows the arrows in fancyBox3
/* change revapi1 to whatever API name is being used for your slider */
var api = revapi1;
/* no need to edit below unless you want to change the default FancyBox settings */
api.on('revolution.slide.onloaded', function() {
jQuery(this).find('.fancybox').each(function() {
var $this = jQuery(this);
if(!$this.is('a')) $this = $this.removeClass('fancybox').find('a');
$this.addClass('fancybox').attr('rel', 'gallery').fancybox({
/* begin FancyBox options */
width: 'auto',
height: 'auto',
autoSize: true,
aspectRatio: true,
fitToView: true,
autoCenter: true,
scrolling: 'no',
onClosed: function() {api.revresume()}
}).on('click', function() {api.revpause()});
});
});
fancyBox v3 uses data-fancybox attribute for grouping instead of rel.
So, replace
.attr('rel', 'gallery')
with
.attr('data-fancybox', 'gallery')
Simple demo - https://codepen.io/anon/pen/JyYryd?editors=1010
btw, v3 does not have these options you are using and afterClose callback is used instead of onClosed
I am trying to get a gallery up and running just with css bacground images put in iframes in fancybox.
Thats what I use:
$(".smallimg").click(
function(){
var baseimg = $(this).css('background-image');
var baseimg2 = baseimg.replace('url("','');
var bgimg = baseimg2.replace('")','');
$.fancybox({
helpers : {
overlay : true
},
width: '815px',
height: '550px',
type: 'iframe',
href: bgimg,
fitToView: false, //
scrolling: 'no',
iframe: {
preload: false
}
});
}
);
And I have several divs holding images as background images witht the class .smallimg applied.
For clicking image by image my code works quite good but I would like to have it in gallery style... is that possible?
Need to mention that the names of the images are NOT enumerated like 1.jpg 2.jpg ...
Rgds
Mirko
I'm using TinyMCE 4. Unfortunately the "backcolor" control seems to only allow changes to text, not a whole paragraph. Even when I select a paragraph in the status bar of TinyMCE and apply a background color, it's only applied to the inner span, not the paragraph itself. I would need to set the background color for the complete content, not only parts of it. This should be applied to the HTML output, something like
<div style="background-color: #f00">[complete editor content]</div>
Thanks for any help.
You can use this code to access the tinymce's body to set background color:
tinymce.activeEditor.getBody().style.backgroundColor = '#<yourcolor>';
Disadvantage: Setting the background color that way will not change/affect the html content inside the editor. So you have to treat/update/store that value in a separate way.
You can also add a button on initialising tinymce:
tinymce.init({
...
setup: function (editor) {
editor.addButton('mybutton', {
text: 'Set bgColor',
icon: false,
onclick: function () {
editor.getBody().style.backgroundColor = '#E5FFCC';
}
});
...
});
You have to reach the editable content body in the dynamically generated iframe. The iframe is generated after the initialization of the editor.
If your textarea id is foo, the id of the iframe is foo_ifr.
You may also open the editor with firebug or developer tools and use dom explorer, you may see the inner dynamically generated components.
use:
var iframe = document.getElementsByTagName("iframe")[0];
// or
var iframe = document.getElementsById("foo_ifr");
// check if iframe.contentDocument is cross-browser, i tested with IE 11.
var innerBody = iframe.contentDocument.getElementsByClassName("mceContentBody")[0];
innerBody.style.backgroundColor="red";
To get the custom styling that you want, you have to create new custom style formats when the editor is being initialized. This gives you the ability to define css styling to the element. For example
HTML
<form>
<textarea></textarea>
</form>
JS
tinymce.init({
selector: 'textarea',
//merge with default formats
style_formats_merge: true,
//set up custom style formats
style_formats: [
{title: 'Red Background', block: 'p', styles: {
'background-color': '#ff0000',
'color':'white',
'padding': '7px'}
},
{title: 'Blue Background', block: 'p', styles: {
'background-color': '#0000ff',
'color':'white',
'padding': '7px'}
}
]
});
This merges two new custom formats with the default formats. See this DEMO
I'm using google map API v3. I want to disable click action on default google landmark/poi. For example, when I zoom to UCLA, the school icon shows up (that's fine) but I don't want user to click and view details of that location. Which API function should I use?
Google has exposed an option for this. See clickableIcons of google.maps.MapOptions in the docs.
Example initialization code:
map = new google.maps.Map(document.getElementById('map'), {
clickableIcons: false
});
add this option to mapOption
clickableIcons: false
this is more options i think you will
draggable: true, // this is for disable the Draggable
disableDefaultUI: true, // this for disable Default UI
fullscreenControl: false, // this is for disable Full Screen
scrollwheel: true, // this is for disable Scroll Wheel
disableDoubleClickZoom: false, // this is for disable Double Click Zoom
draggableCursor:'crosshair',// this is for cursor type
draggingCursor:'move', // this is for dragging cursor type
minZoom: 3, // this is for min zoom for map
maxZoom: 18 , // this is for max zoom for map
//note : max, min zoom it's so important for my design.
zoom: 14, // this is to make default zoom
clickableIcons: false, // this is to disable all labels icons except your custom infowindow or Infobox.
I encountered this same problem.
Google appears to have recently changed their api to make the base map labels "clickable" and there is not yet a simple API call to disable their clickablility.
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/f1ac9ad4da3606fe
I would like to see google add a simple map option like this, but alas it doesn't exist yet
var opts = { clickableLabels:false };
var map = new maps.google.com.map(div,opts);
The following solution works, but because it relies on custom styled map tiles, free maps are limited to (2,500 maps loads per day) - See Google Maps FAQ.
function initialize() {
// For more details see
// http://code.google.com/apis/maps/documentation/javascript/styling.html
var noPOILabels = [
{
featureType: "poi",
elementType: "labels",
stylers: [ { visibility: "off" } ]
}
];
// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
var noPOIMapType = new google.maps.StyledMapType(noPOILabels,
{name: "NO POI"});
// Create a map object, and include the MapTypeId to add
// to the map type control.
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(55.6468, 37.581),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'no_poi']
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('no_poi', noPOIMapType);
map.setMapTypeId('no_poi');
}
This issue has been logged with google at:
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3866
Please star and comment your needs on this issue there.
I understand that the OP wants a solution that persists the labels/icons but suspends the click events. I'm not sure this is possible; please star this issue
However, some of us are drawing shapes sans Drawing Manager and labels/icons are obstructing the additions of new points. If it meets your requirements, you can temporarily remove the icons/labels. I've found that transit, poi, and landscape all need to be toggled:
var map = new google.maps.Map(document.getElementById("map"), {});
map.poi = function(state){
var styles = [
{
"featureType": "transit",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "landscape",
"stylers": [
{ "visibility": "off" }
]
}
];
this.set("styles", (state)? {} : styles );
}
And the usage:
//turn the labels/icons off
map.poi(false);
//turn them back on
map.poi(true);
I understand that this question is old, but maybe this answer will help others:
I'm not sure if this is legal, but I ended up exploring the code and made this:
$("#google-map").on("mousedown",function(){
setTimeout(function(){
disableInfoWindows();
},500);
});
function disableInfoWindows()
{
$(".gm-iw.gm-sm").parent().parent().remove();
$("[style='position: absolute; left: -2px; top: -336px; width: 59px; height: 492px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px;']")
.parent()
.parent()
.remove();
}
It worked for me, no infoWindow showing up, while preserving all the icons. Anyone who has an idea enhancing the code is welcome, the infoWindow is showing up just a bit the first time it is about to open, after that first one, it is completely gone.
Yeah, the other solutions work but you can also want to have ability to hide/disable only part of that pins or disable ability to go to details from popups, please see my post here with some tips how you can do that CLICK
Right, to sum up, if you want to "remove" popups, you can just use:
clickableIcons: false
for map options object. But if you want to have a popup, but without "View on Google Maps" label, you can use a hacky CSS trick:
google-map {
.view-link {
display: none !important;
}
}
That was my requirements, and it works!
If you want to define which icons/pins (elements or labels, however you call it) should be visible, you can use this site to generate proper JSON with map settings: https://mapstyle.withgoogle.com/