I'm using the jqModal plugin to attach a dialog box to a button click. I'm trying to attach the following box to the page:
suqBoxInner = document.createElement("div");
suqBoxInner.id = "suq_box_inner";
$(suqBoxInner).jqDrag('.jqDrag').jqResize('.jqResize').jqm({
trigger: '#suq_button',
overlay: 0,
onShow: function(h) {
return h.w.css('opacity', 0.92).slideDown();
},
onHide: function(h) {
return h.w.slideUp("slow", function() {
if (h.o) {
return h.o.remove();
}
});
}
});
However this only works if I run this binding code after the div's been inserted into the page. That is I have to use something like $("#div_on_page").after(suqBoxInner) before running the jqDrag code. What are my options for binding it before it's inserted into the page? I could use $.live() but that has to bind to a mouse event and the jqModal plug in uses bind on the trigger listed inside the function call.
It appears that this plugin requires the div (suqBoxInner) to be on the page. So short of modifying the plugin, I'm not sure you have many options as-is. Perhaps you may want to rethink how you are implementing the plugin? How is suqBoxInner being placed on the page? Is it after a specific event, or action?
One solution I can think of off the top of my head is to fire an event after suqBoxInner is placed on the page. The event would then initialize jqModal.
Just a thought. Good luck.
Related
I really like to use KeiichiroHirai's Turnbox.JS script (http://www.noht.co.jp/turnbox),
However, This script seems only to work with a user clicking/hovering on any button this script is appending itself to.
I wish use these animations when DOM is ready,
I tried:
$(function() {
$.turnBoxLink({
box: ".example"
});
});
But since I'm posting here, It's obviously not working.
Thank you in advance!
If you wish to do that when DOM is ready you should wrap your init code into
$(document).ready(function() {
// go when DOM is ready
});
or
$(window).load(function() {
// go when page and images are loaded
});
And also, Turnbox can be initialized like this :
HTML markup
<div class='login_form'>
<h3>My form element<h3>
</div>
With the following code you'll get the extra simple sample, without any options. but for test purposes it could be good to start here :
$(".login_form").turnBox();
If now, you want to launch the animation at specific event (for example to the ready or load event), you'll be able to do so by using :
$(".login_form").turnBoxLink({
box: ,
events: "ready", // you can also try 'load'
dist: "next"
});
After initializing, click the generated .turnBoxButton child element:
$.turnBoxLink({
box: ".example"
});
setInterval(function() {
$(".example .turnBoxButton").click();
}, 1000);
This will spin the box every second.
If You want to programmatically trigger a click event on an element with jQuery You can use the .click() function.
$(document).ready(function() {
$('.sample').turnBox();
...
$('.sample').click();
});
I'd like to initially set the focus onto the text-field of an item when editing it, but cannot overcome TinymMCE'S iframe kickin' in. When disableling TinyMCE, everything works as expected, the text-field is focusable. I tried simulating a click in TinyMCE's body-element, no luck either. Is it possible at all, to focus the body-field via JS?
This is what I tried so far:
(function($) {
$(document).ready(function() {
$('#text').focus() // Only works, when TinyMCE is disabled.
$('body#content').click() // Cannot click into TinyMCE's body.
$('#text_bold').click() // Cannot even click one of the editor's buttons.
setTimeout(function() {
// Tried same as above with time-delay, no luck.
}, 277);
});
$(window).load(function() {
// Tried the same as in doc.ready, no luck.
});
})(jQuery);
I know this is kind of old but I definitely struggled finding a solution for this online, so I'm sharing. Add this, in your tinymce.init() codeblock. Change selector or event if needed.
selector: "textarea.tinymce",
setup: function (editor) {
editor.on('mouseup', function (e) {
this.focus();
});
}
TinyMCE is loaded inside an IFRAME so it's not in the DOM of the main document. Direct jQuery calls will not work.
This is an old code I used (TinyMCE version shipped with Plone 4.3):
(function($) {
function checkTinyMCELoaded () {
if (window.tinymce==undefined || !tinymce.editors.length) {
setTimeout(checkTinyMCELoaded, 100);
return;
}
$('#text_ifr').contents().find(".mceContentBody").get(0).focus();
}
$(document).ready(function() {
setTimeout(checkTinyMCELoaded, 100);
});
})(jQuery);
It's ugly. Best way is to get rid of setTimeout and attach an handler on TinyMCE load event, but when I looked into this I found this is not so easy on Plone as you must change the .init() call of TinyMCE done by Plone JS.
I have a nicEdit (a rich editor) on my page and I'm inserting hyperlinks in the content of nicEdit via setContent() method after creating an instance of class nicEdit. It all works fine. However, some of the content have hyperlinks in them with a class of "someclass." I want to be able to catch the click events of those hyperlinks in the content of nicEdit using jquery. I tried, the following:
$('.someclass').click(function () { });
$('.someclass').on('click', (function () { });
$('.someclass').live('click', (function () { });
$('.someclass').bind('click', (function () { });
But nothing works. May be I'm going about it the wrong way as I really didn't get into the internals of nicEdit. Is it possible to insert hyperlink(s) (or any element) into the content of nicEdit and try to handle the click events (or any events) with jquery? If so any code sample is appreciated. Thanks in advance.
I think I have something - I don't have all of your code for reference, but based on your clues, it seemed like this was fairly easy:
$(function(){
var myEditor = new nicEditor({fullPanel : true }).panelInstance('editor');
nicEditors.findEditor('editor').setContent(
'<a class="someclass" href="http://www.google.com">Click Here</a>'
);
$('.nicEdit-main').on('click','.someclass',function(){
alert('clicked');
});
});
Fiddle Sample
If you want to do anything more specific, you can also pass the event to the click handler and act upon those in a normal fashion.
Let me know if this resolves your issues.
I'm using this plugin - http://plugins.jquery.com/project/styledSelect to style a Select box on my page. Demo page here - http://liepins.org/files/jQuery.styledSelect-1.0/examples.html
I've trying to figure out a way to open and close the select box from another element on the page, something like -
$('#show-lists').styledSelect(); //apply the plugin on page load
$("#another-button").toggle(
function () {
$('#show-lists').clickSelect() //open the dropdown
},
function () {
$('#show-lists').closedSelect() //close it
},
);
The above code doesn't work, it's just there to illustrate. Any idea how I can access these methods externally? Or can anyone suggest an alternative?
Thanks in advance.
You could modify the plugin to expose them as events bound to the control, e.g.
closedSelect();
s.change(closedSelect);
currentZIndex -= 3;
// New lines
s.bind('openSelect', clickSelect);
s.bind('closeSelect', closedSelect);
});
and then trigger the events from your code:
$("#another-button").toggle(
function () {
$('#show-lists').trigger('openSelect');
},
function () {
$('#show-lists').trigger('closeSelect');
},
);
although as you can see closedselect is already bound to the .change() event, so you could just call $('#show-lists').change(); instead for the close case - but I think I'd stick to the separate event myself for clarity.
Tipsy jquery plugin is installed in my app
This is in my load function
$(function() {
tipsy();
});
Below code is in a js file
var htm = '<div id="new_div" onmouseover="tipsy(this);">' ;
function tipsy(tip)
{
if ( '' != sumtitle )
{
tip.title = tip.innerHTML;
}
else if(tip)
{
tip.title = tip.innerHTML;
}
$(tip).tipsy({gravity: 'w'});
}
How is that the normal title shows up first and then the jquery tip later.
This is a known bug and will be fixed in the next version. For now please use the "Download Source" link on this commit:
http://github.com/jaz303/tipsy/commit/88923af6ee0e18ac252dfc3034661674b7670a97
The tipsy plugin seems to remove the title attribute and assign its value to a custom attribute called original-title to avoid the default browser tooltip from showing. Maybe in your case, this happens too late: The mouse hovers over the element, this initiates the native browser tooltip. Then, tipsy() is executed on the element and switches the attribute name, but that is too late because the timeout for the native tooltip has already started.
You should probably prevent the default action of the event, for example:
$('#new_div').bind('mousover', function (e) {
tipsy(this);
e.preventDefault();
});
EDIT: As this does not seem to have the desired effect, please call tipsy($('#new_div')) right after the div is created and remove the mouseover handler. What you have been doing might be a bit problematic anyway: The tipsy plugin probably uses the mouseover event, and you call .tipsy( { gravity: 'w' } ) in an onmouseover event handler. Repeatedly, if you mouseout and then mousover again. That's a lot of unnecessary event assignments.
You're doing it wrong.
Try this:
$('#new_div').tipsy();
jQuery is designed for using the selectors in JS code. No onsomething events in HTML, please.
Another way is, instead of using the 'title' attribute, use 'original-title' attribute.