Has anyone successfully used both libraries together? I can't seem to place the code in the properly sequence to get them to work together.
According to your comment, you are doing this :
jQuery.noConflict(
$(document).ready(function () {
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none'
});
});
);
... try this instead :
jQuery.noConflict();
jQuery(document).ready(function($) {
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
}); // first fancybox
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none'
}); // second fancybox
}); // ready
Have you tried using jquery's noConflict() ? Since you are using two different libraries, it might be causing error. Using jQuery.noConflict() function might help.
Related
Google Recaptcha is not working on fancybox ajax generated form.
Finally found the solution. Bellow code is working fine for me.
Include Google Recaptcha api js
<script src="https://www.google.com/recaptcha/api.js"></script>
Add Element Html
<div class="g-recaptcha" id="recaptcha" ></div>
Add Script
<script type="text/javascript">
$(document).ready(function() {
$("[element_id_or_class]").fancybox({
padding : 0,
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : 'auto',
height : 'auto',
autoSize : true,
openEffect : 'none',
closeEffect : 'none',
ajax: {
complete: function(jqXHR, textStatus) {
grecaptcha.render('recaptcha', {
sitekey: [RECAPTCHA_SITE_KEY],
callback: function(response) {
console.log(response);
}
});
}
}
});
});
</script>
I have a tinymce editor on a textarea of my page. I am initializing it in READONLY mode by setting readonly attribute as true. Please refer init below:
tinyMCE.init({
mode : "exact",
elements : "p_desc",
debug : false,
nowrap : false,
cleanup_on_startup : true,
fix_nesting : true,
readonly : true,
force_br_newlines : true,
force_p_newlines : false,
gecko_spellcheck : true,
forced_root_block : '' ,
...
setup : function(ed) {
ed.onKeyUp.add(function(ed) {
textCounter('p_desc','Charcount',4000);
});}
});
Now depending upon the value of a hidden input field on the same page, i am enabling edit using tinyMCE.get('p_desc').getBody().setAttribute('contenteditable', true);
The editor starts working in editable mode but the onKeyUp event defined in setup is still not working.
Someone please help.
You could try
tinyMCE.init({
readonly : true,
...
setup : function(ed) {
if (!ed.getParam('readonly')) ed.onKeyUp.add(function(ed) {
textCounter('p_desc','Charcount',4000);
});}
});
Fancybox 1.3.4 JS came with my Wordpress theme, Gridlocked. Everything works properly, but the lightbox popup is too big for the screen. I'd like the image to shrink if needed to always fit on screen.
Looking at the Fancybox site instructions, it seems I want to set "autoscale:true" to fix this, either in PHP or in the JS file itself. The javascript file that came with the theme already has this set to true, but it's not working. I don't know where in all the theme php files I should try to include the argument. Any suggestions?
The initialization of fancybox is done in jquery.custom.js.
You can find following lines there:
function tz_fancybox() {
if(jQuery().fancybox) {
jQuery("a.lightbox").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'speedIn' : 300,
'speedOut' : 300,
'overlayShow' : true,
'autoScale' : false,
'titleShow' : false,
'margin' : 10,
});
}
}
tz_fancybox();
Change to:
function tz_fancybox() {
if(jQuery().fancybox) {
jQuery("a.lightbox").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'speedIn' : 300,
'speedOut' : 300,
'overlayShow' : true,
'autoScale' : true,
'titleShow' : false,
'margin' : 10,
});
}
}
tz_fancybox();
To illustrate my problem, I created a jsfiddle page here
http://jsfiddle.net/7HZvS/
Why does the alert function not get fired after the panel slides? Click on the grey box labeled "swiperee" and watch a grey panel slide in. Then click on the one labeled "swiperee2". Nothing. Should cause an alert. :(
Since the first panel slides when you click on the "swiperee" grey button, I see no reason why the second grey button "swiperee2" doesn't handle its .on() event - its generated identically.
Thanks.
EDIT:
Gabe's answer below is not exactly right IMHO. Firstly, his code is using the .on() event list not events-map but that's just syntax. his point is that the events should be delegated because I'm dynamically adding elements.
I'm actually not sure that is really the right thinking, because I have all elements in fact already loaded, they're just not displayed - there is no ajax here. All that happens is that elements move around the DOM hierarchy.
below is the sample code from the jsFiddle above, as requested.
$(function(){
var g = {
func : {
swipeLeft : function($el)
{
$RIGHT = $('<div id="right">')
.appendTo('body')
.addClass('scrollable hwaccel')
.css({
'position' : 'absolute',
'z-index' : '2',
'top' : '0px',
'left' : '640px',
'width' : '640px',
'height' : '960px',
'border' : '1px solid #ccf'
})
;
$el.appendTo($RIGHT);
$('#right, #main').animate(
{
left : '-=640px'
},
500,
function(){
$MAIN.empty();
$el.appendTo($MAIN);
$MAIN.css('left','0px');
$RIGHT.remove();
}
);
}
}
};
$MAIN = $('<div id="main">')
.appendTo('body')
.addClass('scrollable hwaccel')
.css({
'position' : 'absolute',
'z-index' : '1',
'top' : '0px',
'left' : '0px',
'width' : '640px',
'height' : '960px',
'border' : '1px solid #009'
})
;
$start = $('<div id="start">')
.appendTo($MAIN)
.css({
'position' : 'absolute',
'top' : '0px',
'left' : '0px',
'width' : '640px',
'border' : '1px solid #900'
})
.html(
'hello<br/>456'
)
.append(
$('<div id="swiperee">')
.css({
'position' : 'absolute',
'top' : '10px',
'left' : '10px',
'width' : '100px',
'height' : '40px',
'background': '#ccc',
'cursor' : 'pointer'
})
.html('swiperee')
.on({
click : function(){
g.func.swipeLeft($next);
}
})
)
;
$next = $('<div id="next">')
.css({
'position' : 'absolute',
'top' : '0px',
'left' : '0px',
'width' : '640px',
'height' : '960px',
'background': '#ddd'
})
.html(
'sdfjkgh sdklfjgh sdklfjgh skldfj ghskldjgh'
)
.append(
$('<div id="swiperee2">')
.css({
'position' : 'absolute',
'top' : '10px',
'left' : '10px',
'width' : '100px',
'height' : '40px',
'background': '#ccc',
'cursor' : 'pointer'
})
.html('swiperee2')
.on({
click : function(){
alert('sdf');// WHY DOES NOT CALL??
}
})
)
;
});
The problem is the line $MAIN.empty() in the animate callback. Remove that and it works.
The .empty() call apparently does some cleanup where it unbinds event handlers.
I have initialised TinyMCE as follows. I want to force line breaks when user presses enter and not the paragraphs. I'm trying following, but not working. I'm using TinyMCE version 3_3_8.
tinyMCE.init({
mode: "exact",
theme: "advanced",
elements: "textAreaId",
cleanup: false,
theme_advanced_toolbar_location: "",
theme_advanced_buttons1: "",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
height: 200,
width: 300,
forced_root_block : false,
force_br_newlines : true,
force_p_newlines : false,
oninit: InitPosition
}); //init ends
I tried to define forced_root_block : "", but still it is not working.
What am I doing wrong?
Simply add forced_root_block : false
Or if you want a wrapper: forced_root_block : 'div',
Works like a charm!
Instead try:
force_p_newlines : false,
force_br_newlines : true,
convert_newlines_to_brs : false,
remove_linebreaks : true,
I faced the same situation with TinyMCE 4. All my "Enter" (keyboard) resulted in a new <p> </p> injected.
I didn't want to use forced_root_block : false so I figured something out in the tinymce.init function (each empty paragraph will be cleaned directly):
setup : function(editor) {
editor.on('PostProcess', function(ed) {
// we are cleaning empty paragraphs
ed.content = ed.content.replace(/(<p> <\/p>)/gi,'<br />');
});
}
https://www.tinymce.com/docs/configure/integration-and-setup/#setup
https://www.tinymce.com/docs/api/class/tinymce.editor/#postprocess
What worked for me was:
tinymce.init({
...
force_br_newlines : true,
force_p_newlines : false,
forced_root_block : ''
});
Each linebreak is producing br tag with these settings.
SOURCE: http://www.tinymce.com/wiki.php/Configuration3x:force_br_newlines
The "forced_root_block : false" option works fine for TinyMCE 4.0.
Insert in theme functions.php the following code:
add_filter( 'tiny_mce_before_init', 'my_switch_tinymce_p_br' );
function my_switch_tinymce_p_br( $settings ) {
$settings['forced_root_block'] = 'br';
return $settings;
}
TinyMCE On Mozilla Firefox adds <div> instead <br> or <p>.
I found the solution:
Open Mozilla Firefox and put in the address:
about:config
Search the option and turn false:
editor.use_div_for_default_newlines
in tinyMCE 5 I needed to add 1 extra parameter
tinymce.init({
...
valid_elements: 'br',
force_br_newlines : true,
force_p_newlines : false,
forced_root_block : ''
});
Just add
force_br_newlines : true,
force_p_newlines : false,
forced_root_block : false,
anywhere in tinymce.init