How can i catch the "onblur" event of my htmlbox textarea?
I want to be able to get the htmlbox content when it's onblur..
Thank's In Advance.
Try this code, it loops waiting 1 second until htmlbox creates the iframe, then it adds a .blur handler to the iframe, I found out the iframe's id by using IE8's Developer Tools, by clicking on the arrow icon in the developer tools and clicking the box you can see how HTML looks after the page loads and javascript processed. if($("iframe").length) is true then then htmlbox has created the iframe and you can attach the .blur event handler.
<script type="text/javascript">
$(function(){
var check = function(){
if($("iframe").length){
$("#hb_html").blur(function(){
alert('Blur has occurred!');
});
} else {
setTimeout(check, 1000)
}
}
setTimeout(check, 1000)
});
</script>
This example demonstrates:
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript">
$(function(){
$("#bar").blur(function(){
$(this).text("I have been blurred.");
});
});
</script>
<textarea id='bar'>foo</textarea>
Make sure the file jquery-1.5.min.js is in the same folder IF you use the example above.
You can read up on the .blur event at http://api.jquery.com/blur/
It receives a function as an argument and executes it when it becomes blurred.
Related
I am trying to integrate Yammer share button https://developer.yammer.com/docs/share-button, I successfully implemented as instructed, but the only catch is first time it requires two click to fire up, later on single click seems to do the job. Here is the code below.
function clickSaveShare(){
var options = {
customButton : true, //false by default. Pass true if you are providing your own button to trigger the share popup
classSelector: 'homeBtn',//if customButton is true, you must pass the css class name of your button (so we can bind the click event for you)
defaultMessage: 'My custom Message', //optionally pass a message to prepopulate your post
pageUrl: 'www.microsoft.com' //current browser url is used by default. You can pass your own url if you want to generate the OG object from a different URL.
};
yam.platform.yammerShare(options);
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<span href="#" class="homeBtn" onclick="clickSaveShare(339,'Reverse KT')"> Click here to share</a>
<script>
</script>
<script type="text/javascript" src="https://s0.assets-yammer.com/assets/platform_social_buttons.min.js"></script>
<script type="text/javascript">yam.platform.yammerShare();</script>
</body>
</html>
Calling yam.platform.yammerShare() doesn't actually call the share to Yammer function despite its name. What it does is apply a click event to the specified DOM element so that when that element is clicked the Yammer popup will appear.
The reason you have to click the button twice is that the first time clickSaveShare is called, it calls yam.platform.yammerShare() which sets up a click event on the specified DOM element. The next time the button is clicked your click event has been replaced with the Yammer one so it works as expected.
One simple way to fix it given that you are including jQuery would be to use jQuery's document.ready event:
$(document).ready(function() {
var options = {
customButton : true,
classSelector: 'homeBtn',
defaultMessage: 'My custom Message',
pageUrl: 'www.microsoft.com'
};
yam.platform.yammerShare(options);
});
Here is a CodePen example of the above.
The following simple code creates two CKEditor editors. The cancel event function detects and responds to the cancel event of the image dialog regardless of the editor launching the dialog, which, given its semantics, makes sense. And it works (the alert launches on any image dialog but no others, like link dialogs). However, I want to detect and respond to the cancel event of the image dialog on one and only one of the editors (in my case editor1). I cannot figure out, after much googling and searching the CKEditor API documentation, the proper semantics for doing so. I am using CKEditor 4.5.1.
<textarea id="editor1" name="editor1"></textarea>
<script type="text/javascript">
CKEDITOR.replace('editor1', {});
CKEDITOR.on('dialogDefinition', function (e)
{
var dialogName = e.data.name;
if (dialogName != 'image') return;
var dialog = e.data.definition.dialog;
dialog.on('cancel', function ()
{
alert("do something");
});
});
</script>
<textarea id="editor2" name="editor2"></textarea>
<script type="text/javascript">
CKEDITOR.replace('editor2', {});
</script>
Can someone please tell me how to limit the response to the dialog opened by a specific editor? Thank you for your help.
I have a form which populates div elements based on selections from a select box using an AJAX call.
The content of the populated div is a multiselect box that I want Chosen to apply to. Unfortunately it seems that the 'chzn-select' is not firing, no doubt due to this being pulled in dynamically.
I have added this:
<script type="text/javascript">
$(".chzn-select").chosen();
</script>
To the bottom of the code that is pulled in by AJAX, but it is still not firing. Any ideas on how to make this work as desired?
Solved myself. Will post for future reference. I put the Chosen calls in their own function on my original page that calls the AJAX:
<script type="text/javascript">
function doChosen() {
$(".chzn-select").chosen();
$(".chzn-select-deselect").chosen({allow_single_deselect:true});
}
</script>
And in the AJAX script itself, I added a call to the function after the responseText part:
document.getElementById(div).innerHTML=oXmlHttp.responseText
doChosen();
instead of using chosen(), try change() method. It works on change event.
try:
$(".chzn-select").change(function () {
var str = "";
$("select option:selected").each(function () {
// do your coding here
});
})
.trigger('change');
I am using validation engine from http://www.position-absolute.com/ site.
The validation is applied on the div tag which is opened as popup on parent page.
Issue : when error message is shown on a control, it is appearing behind the div.
Search to similar issue suggest the usages of z-index, but how to control the z-index of error message poping from validation engine? Giving high number to div z-index:99999 did not work.
Please help
just change your script as
<script type="text/javascript">
$(function () {
$(".primary").click(function () {
$(".formError").remove();
});
$(".close").click(function () {
$(".formError").remove();
});
$("#yourformid").submit(function (ev) {
ev.preventDefault();
var validForm = $("#yourformid").validationEngine('validate');
$(".formError").css("z-index", 15000);
if (validForm) {
$("#yourformid").submit();
}
});
});
</script>
it works fine
I am using the jQuery TipTip plugin to display tooltips on hrefs using data from the "Title" tag.
Here is the code i am using to invoke TipTip
<script type="text/javascript" src="jquery.tipTip.js"></script>
<!-- ToolTip script -->
<script type="text/javascript">
$(function(){
$(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10});
});
</script>
<!-- End ToolTip script -->
and in the body
sample content. sample,stuff.
This works fine as standalone example. However, when i set the script up to load the content into the body via ajax (using sample.html that contains the original body code), the ToolTip stops working.
<script type="text/javascript">
//loading sample ajax data
$(document).ready(function(){
$('#remote').load('sample.html');
});
</script>
Browsing in the TipTip forums, someone mentioned this could work using the jQuery .live function, but having read the documentation, i dont understand how im supposed to implement this with my code. I understand that jquery-live is an event handler, so supposedly, i could call in the data via ajax as the primary event and then apply TipTip as a secondary event, but i cant figure out how to implement this, and dont know if im definitely going down the right path.
Could someone please advise me?
An easy solution would be to create a function that activates TipTip:
function activateTipTip() {
$(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10});
}
$(document).ready(function(){
activateTipTip();
$('#remote').load('sample.html', function() {
activateTipTip();
});
});
Not very elegant, but should work though.
This code will make it so that any link that has a title attribute will have TipTip's functionality applied to it:
$('a[title]').live('mouseover', function()
{
$(this).tipTip({
delay: 200,
maxWidth: '400px'
});
$(this).trigger('mouseenter');
});
Source: https://drew.tenderapp.com/discussions/tiptip/73-tiptip-and-jquery-live
This is my solution for this problem:
$(ElementParent).on('mouseover', YourElementSelector, function()
{
if($(this).data('hasTipTip') !== true)
{
$(this).tipTip(TipTipOptions);
$(this).data('hasTipTip', true);
$(this).trigger('mouseover');
}
});