i currently have 1 editor that will always be on the page when it loads, the page has a feature to add multiple editors by clicking a add button.
my code works on the first editor only that is loaded with the page, how can i adapt this to work on all the editors on the page, even if dynamically created after the page has been loaded? (the dynamically created editors)
$(document).ready(function(){
$.each(CKEDITOR.instances, function(instance){
var editor = CKEDITOR.instances[instance];
if (editor) {
editor.on( 'focus', function( e ) {
$('.hint').show();
});
editor.on( 'blur', function( e ) {
$('.hint').hide();
});
}
});
});
eidt 1 - fullcode minus html
$(document).ready(function(){
$('textarea').each(function(i) {
var editorId = $(this).attr('id');
if(editorId != 'master'){
if( $(this).hasClass('main') ){
ckeditor_simple_toolbar(editorId);
}
if( $(this).hasClass('extras') ){
ckeditor_advanced_toolbar(editorId);
}
}
});
$.each(CKEDITOR.instances, function(instance){
var editor = CKEDITOR.instances[instance];
if (editor) {
editor.on( 'focus', function( e ) {
$('.hint').show();
});
editor.on( 'blur', function( e ) {
$('.hint').hide();
});
}
});
$('.add_extra').live('click',function(){
ckeditor_advanced_toolbar(this.id);
});
});
function ckeditor_simple_toolbar(textA_id){
CKEDITOR.replace(textA_id,{
tabSpaces : 4
});
}
function ckeditor_advanced_toolbar(textA_id){
CKEDITOR.replace(textA_id,{
emailProtection : 'encode',
tabSpaces : 4,
extraPlugins : 'autogrow',
height : 100,
autoGrow_minHeight : 100,
autoGrow_maxHeight : 400,
removePlugins : 'resize',
toolbarLocation : 'bottom',
});
}
edit 2
here is a test setup of what is happening, the focus and blur aren't working on the dynamically added editors
http://elhalawa.net/editor/index.html
just added the on instanceReady code and it worked great
CKEDITOR.replace(textA_id,{
emailProtection : 'encode',
tabSpaces : 4,
extraPlugins : 'autogrow',
height : 100,
autoGrow_minHeight : 100,
autoGrow_maxHeight : 400,
removePlugins : 'resize',
toolbarLocation : 'bottom',
}).on("instanceReady", function (e) {
this.on("focus", function () {
});
this.on("blur", function () {
});
this.on( 'change', function() {
});
});
Related
I have the following js code:
This code is used on a FAQ toggle page.
It works basically as every toogle code, but I would like to add the auto-close function when clicking to an other question.
Hide the prev question content, then show the next one.
Any ideas?
if ( 'function' !== typeof(window[ 'vc_toggleBehaviour' ] ) ) {
window.vc_toggleBehaviour = function ( $el ) {
function event( e ) {
e && e.preventDefault && e.preventDefault();
var title = jQuery( this );
var element = title.closest( '.vc_toggle' );
var content = element.find( '.vc_toggle_content' );
if ( element.hasClass( 'vc_toggle_active' ) ) {
content.slideUp( {
duration: 300,
complete: function () {
element.removeClass( 'vc_toggle_active' );
}
} );
} else {
content.slideDown( {
duration: 300,
complete: function () {
element.addClass( 'vc_toggle_active' );
}
} );
}
}
if ( $el ) {
if ( $el.hasClass( 'vc_toggle_title' ) ) {
$el.unbind( 'click' ).click( event );
} else {
$el.find( ".vc_toggle_title" ).unbind( 'click' ).click( event );
}
} else {
jQuery( ".vc_toggle_title" ).unbind( 'click' ).on( 'click', event );
}
}
}
Whenever any of the questions are clicked, if you were to hide all active questions you won't have to worry about which one -if any- are currently active.
(on question click):
$('.vc_toggle_active').each(function(){
$(this)slideUp( {
duration: 300,
complete: function () {
$(this).removeClass( 'vc_toggle_active' );
}
});
});
After sliding up any currently active question, go ahead and show the clicked one.
NB. Code not tested, since you have no fiddle and no html. Hope you get the concept though.
I am not being able to attach Click Event with a Popup form that contains an input button. Code is given below:
<a id="btnEditSummary" href=#>Edit Summary </a>
<div id="editSummary" class="hidden">
<input type=button id="btnEdit" value="Update" />
</div>
function openPoPup(clickHandle,contentHandle,width,height)
{
width = typeof a !== 'undefined' ? a : 600;
height = typeof b !== 'undefined' ? b : 300;
$.fancybox(
$(contentHandle).html(),
{
'width' : width,
'height' : height,
'minWidth' : width,
'minHeight' : height,
'autoScale' : true,
'transitionIn' : 'none',
'transitionOut' : 'none',
'hideOnContentClick': false,
'onStart': function () {
//On Start callback if needed
}
}
);
}
$("#btnEditSummary").click(function()
{
openPoPup('#btnEditSummary','#editSummary',300,300);
$( "#btnEdit" ).on( "click", function() {
alert( $( this ).text() );
});
}
$( "#btnEdit" ).on( "click", function() {
alert( $( this ).text() );
});
The problem with your method is that you are actually displaying in fancybox a clone of your #editSummary selector, passed as parameter within the openPoPup() function so the click event is bound to the original selector in your document flow but not to the clone inside fancybox.
As a workaround, you could use the fancybox onComplete callback (I am assuming you are using v1.3.4 because the API options in your code) to bind the click event to the element #btnEdit inside fancybox like :
function openPoPup(clickHandle, contentHandle, width, height) {
width = typeof a !== 'undefined' ? a : 600;
height = typeof b !== 'undefined' ? b : 300;
$.fancybox($(contentHandle).html(), {
width: width,
height: height,
// minWidth: width, // not valid in v1.3.x but 2.x
// minHeight: height, // not valid in v1.3.x but 2.x
autoScale: true,
transitionIn: 'none',
transitionOut: 'none',
hideOnContentClick: false,
onStart: function () {
//On Start callback if needed
},
onComplete: function () {
// bind click event to element inside fancybox
$("#fancybox-content").on("click", "#btnEdit", function () {
alert("click event bound");
});
}
});
}
jQuery(document).ready(function ($) {
$("#btnEditSummary").click(function () {
openPoPup('#btnEditSummary', '#editSummary', 300, 300);
});
}); // ready
Notice I am using .on() in its delegated form :
$("#fancybox-content").on("click", "#btnEdit", function (){ ... });
See JSFIDDLE
I have code
$(function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = $( "#effectTypes" ).val();
// most effect types need no options passed by default
var options = {};
// some effects have required parameters
if ( selectedEffect === "scale" ) {
options = { percent: 100 };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 280, height: 185 } };
}
// run the effect
$( "#effect" ).show( selectedEffect, options, 500, callback );
};
//callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect:visible" ).removeAttr( "style" ).fadeOut();
}, 1000 );
};
// set effect from select menu value
$( "#button" ).click(function() {
runEffect();
});
like dis i want to change dis on click function into on load function am a beginner so please help me
If I am understanding you correctly you want to run the runEffect function on page load?
You can do this by calling the function from within the jQuery ready event.
// This is shorthand for $(document).ready(function() { ... })
$(function() {
// Declare the runEffect function here
runEffect();
});
I am trying to implement this grid, however I do not wish to use the Masonry plugin, so the article states I need to remove the initialisation, however I do not know how to do this.
The function is as follows...
_init : function() {
this.items = Array.prototype.slice.call( document.querySelectorAll( '#' + this.el.id + ' > div' ) );
this.itemsCount = this.items.length;
this.itemsRenderedCount = 0;
this.didScroll = false;
var self = this;
imagesLoaded( this.el, function() {
// initialize masonry
new Masonry( self.el, {
itemSelector: 'div',
transitionDuration : 0
} );
if( Modernizr.cssanimations ) {
// the items already shown...
self.items.forEach( function( el, i ) {
if( inViewport( el ) ) {
self._checkTotalRendered();
classie.add( el, 'shown' );
}
} );
// animate on scroll the items inside the viewport
window.addEventListener( 'scroll', function() {
self._onScrollFn();
}, false );
window.addEventListener( 'resize', function() {
self._resizeHandler();
}, false );
}
});
},
How can I successfully remove the initialisation of the masonry script?
How about removing the lines
// initialize masonry
new Masonry( self.el, {
itemSelector: 'div',
transitionDuration : 0
});
[edit] After removing the lines above and you need to make the following changes to your HTML:
<script src="js/EventEmitter.min.js"></script>
<!-- <script src="js/masonry.pkgd.min.js"></script> -->
Simply download and include EventEmitter.min.js from https://github.com/Wolfy87/EventEmitter.
I'm writing a jquery plugin to display a jquery ui dialog when links are clicked to provide a confirmation dialog before the link is followed.
The problem i'm having is that when closing the dialog using the "Yes" button, the plugin uses $(element).trigger( 'click' ); to fire the click event on the original anchor element.
This does not cause the browser to follow the link, however a second click with my mouse after the dialog closes does work.
The plugin is used like this $('a').submitConfirm();
Here is the plugin
;(function ( $, window, document, undefined )
{
var pluginName = "submitConfirm";
var Plugin = function( element )
{
var confirmed = false;
var dialog = $( '<div style="display:none;">' )
.html( 'Visit this link?' )
.dialog(
{
modal: true,
title: 'Visit Link?',
autoOpen: false,
buttons :
[
{
text: 'Yes',
click: function( event )
{
confirmed = true;
dialog.dialog( "close" );
$(element).trigger( 'click' );
}
},
{
text: 'No',
click: function( event )
{
confirmed = false;
dialog.dialog( "close" );
}
}
]
});
$(element).bind( 'click',
function( event )
{
if ( ! confirmed )
{
dialog.dialog( "open" );
event.preventDefault();
}
});
};
// Init the plugin
$.fn[pluginName] = function( options )
{
return this.each(function ()
{
// Prevent re-instantiation
if ( !$.data(this, 'plugin_' + pluginName) )
{
$.data(this, 'plugin_' + pluginName,
new Plugin( this, options ));
}
});
};
})( jQuery );
You have to pass a function containing what you want to do to the plugin.
Add this line when you are setting the default parameters for the plugin at the bottom of your javascript.
$(function()
{
$('a').submitConfirm(
{
html: 'Are you sure?',
onConfirm: function(event){ // Do what you want in this function.
alert('Confirmed.. Now what?.. Redirect?.. ?? ');
// window.location = $(this).attr('href'); // redirect
},
beforeShow: function( dialog )
{
dialog.html( 'visit google?' );
}
});
});
Update
Check out this JSfiddle --> http://jsfiddle.net/kmTtQ/6/
I changed the lines below. Basically, we want to add a .click event to the element, then .trigger('click') that click.
if ( confirmed ){
console.log( element, elementEvent, event.isDefaultPrevented );
// .on() = jQuery 1.7+, for < 1.7 use .bind or .live. Aliases of .on() as of 1.7
$(element).on('click', function(){ // bind our element with the click
event.view.window.location = element.href; // on click redirect
});
$(element).trigger( 'click' ); // We want to trigger the ^ click event ^
}