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
Related
How do I trigger the below fittext.js function
$.fn.fitText = function( kompressor, options ) {
var compressor = kompressor || 1,
settings = $.extend({
'minFontSize' : Number.NEGATIVE_INFINITY,
'maxFontSize' : Number.POSITIVE_INFINITY
}, options);
return this.each(function(){
// Store the object
var $this = $(this);
// Resizer() resizes items based on the object width divided by the compressor * 10
var resizer = function () {
$this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
};
)};
using the change() Method?
$('#drop').change(function(){
$('#tf').css('width', $(this).val());
//resizer(); // does not work
//$('#tf').fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' });// does not work
});
You need to trigger a resize event because the fittext plugin listens to the window's resize event to call the internal resize method
$(window).on('resize.fittext orientationchange.fittext', resizer);
so
$('#tf').fitText(1.2, {
minFontSize: '20px',
maxFontSize: '40px'
});
$('#drop').change(function () {
$('#tf').css('width', $(this).val());
$(window).trigger('resize.fittext');
});
Demo: Fiddle - set the width as 100/300/500
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 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() {
});
});
I did have a look at this quesiton although I could work out how I could implement this.
The basic code overlay is:
jQuery.noConflict();
jQuery(document).ready(function($){
$("button").click(function(e){
popupOverlay();
popupDisplay();
e.preventDefault();
});
function popupOverlay() {
var overlayCss = {
"width" : $(document).width(),
"height" : $(document).height(),
"display" : 'block'
}
$("#popupOverlay").css(overlayCss);
}
function popupDisplay() {
var popup = $("#popup");
etc etc code to work out the central position for popup
$(popup).css({
'top': yPosition + 'px',
'left': xPosition + 'px',
'display' : 'block'
});
}
});
They above works fine, although I want to re-call the above function if the window is resized by adding this below the above:
jQuery(window).resize(function() {
popupOverlay();
popupDisplay();
});
Error I am getting is: popupOverlay is not defined
I have tried moving the popup functions out of the document ready but then I get the error: $ is not a function
I have to be really careful with this code that it does not cause any conflict with other JavaScript libraries that are already used on the website.
It does not work because the functions popupOverlay and popupDisplay are inside $(document).ready and you are trying to access it outside the scope of the declaration.
Rearrange your code like this.
jQuery.noConflict();
// DOM Ready event
jQuery(document).ready(function ($) {
$("button").click(function (e) {
popupOverlay();
popupDisplay();
e.preventDefault();
});
});
//window resize event
jQuery(window).resize(function () {
popupOverlay();
popupDisplay();
});
//custom functions
function popupOverlay() {
var overlayCss = {
"width": $(document).width(),
"height": $(document).height(),
"display": 'block'
}
jQuery("#popupOverlay").css(overlayCss);
}
function popupDisplay() {
var popup = jQuery("#popup");
//etc etc code to work out the central position
//for popup
jQuery(popup).css({
'top': yPosition + 'px',
'left': xPosition + 'px',
'display': 'block'
});
}
This should work.
jQuery.noConflict();
jQuery(document).ready(function(){
var $ = jQuery;
$("button").click(function(e){
popupOverlay();
popupDisplay();
e.preventDefault();
});
function popupOverlay() {
var overlayCss = {
"width" : $(document).width(),
"height" : $(document).height(),
"display" : 'block'
}
$("#popupOverlay").css(overlayCss);
}
function popupDisplay() {
var popup = $("#popup");
etc etc code to work out the central position for popup
$(popup).css({
'top': yPosition + 'px',
'left': xPosition + 'px',
'display' : 'block'
});
}
jQuery(window).resize(function() {
popupOverlay();
popupDisplay();
});
});
declare functions outside of document.ready()
no reason to declare them there,
the "not working" is due to the function belong other namespace
you can still use them if you will add handles to your events also in $(function() {});
I have a deeply-nested form where levels of elements get added and removed dynamically by the user (using the Jquery-deep branch in Ryan Bates' Complex Forms Examples). I have attached to each of these elements some Javascript functions and I am having trouble getting them to stay .live() when new elements are added.
I'm trying to get this to work with James Padolsey's Autoresize:
# This code functions but only for existing elements. How to make it .live()?
<%= javascript_include_tag "autoresize.jquery.min" %>
<script type="text/javascript">
$('#notes, textarea, .optionBox').autoResize({
onResize : function() {
$(this).css({opacity:0.8});
},
// After resize:
animateCallback : function() {
$(this).css({opacity:1});
},
animateDuration : 150,
extraSpace : 0,
limit : 210
});
</script>
I've tried inserting the .live() function a few ways but they haven't worked. How can I get it to function here?
Check out plugin livequery
Example of usage
$('textarea').livequery(function(){
if ($(this).attr("class") != "resized"){
$(this).attr("class","resized");
$(this).autoResize({
// On resize:
onResize : function() {
$(this).css({opacity:0.8});
},
// After resize:
animateCallback : function() {
$(this).css({opacity:1});
},
// Quite slow animation:
animateDuration : 300,
// More extra space:
extraSpace : 40
});
}
});
Have you looked at the more preferred method, delegate
you can use live function in fallowing way
$('#notes, textarea, .optionBox').live('click',autoResize({
onResize : function() {
$(this).css({opacity:0.8});
},
// After resize:
animateCallback : function() {
$(this).css({opacity:1});
},
animateDuration : 150,
extraSpace : 0,
limit : 210 }););
event can be onclick,onfocus...etc.
even you can attach the handler and call autoResize through that handler.
same issue like yours, working with event 'click' but required extra mouse click on textarea, with event 'focus' working excellent but text dissapiar after living textarea(for my case)
$('textarea').live('click', function() {
$(this).autoResize({
// On resize:
onResize : function() {
$(this).css({opacity:0.8});
},
// After resize:
animateCallback : function() {
$(this).css({opacity:1});
},
// Quite slow animation:
animateDuration : 300,
// More extra space:
extraSpace : 10
});
});
my working solution :
$('textarea').live('focus blur', function(event) {
if (event.type == 'focus') {
$(this).autoResize({
// On resize:
onResize : function() {
$(this).css({opacity:0.8});
},
// After resize:
animateCallback : function() {
$(this).css({opacity:1});
},
// Quite slow animation:
animateDuration : 300,
// More extra space:
extraSpace : 10
});
}
else
{
$(this).die();
}
});
better solution for this case:
use this plugin link text
then code is:
$('textarea').live('focus', function() {
$(this).elastic();
});