Sabry Guen
Top achievements
Rank 1
Rank 1
Sabry Guen
asked on 08 Mar 2011, 05:28 PM
Hi,
I'd like to get hold of the toolbar position of a RadEditor when the Mode is set to:
re.ToolbarMode = EditorToolbarMode.PageTop;
I've added a custom save button to the toolbar and I'd like to flash a confirmation message just below the save button in the toolbar.
Currently, when the user scrolls, the toolbar moves to ensure that it is always at the top of the page. (I assume that this is re-positioned based on the scroll event).
Currently, I have code that looks like this but GetTopLeftPosition(el) always returns zero.
My question is how do I get hold of the new position of the toolbar (after scroll) so that I can display a message just below the save button?
function OnClientCommandExecuting(editor, args)
{
var name = args.get_name();
if (name == "Save")
{
var tool = args.get_tool();
var attributes = tool.get_attributes();
SaveCommentary(editor,
attributes["templateid"],
attributes["controlid"],
attributes["commentaryid"],
attributes["param1"],
attributes["param2"],
attributes["param3"]);
args.set_cancel(true);
}
}
function setOpacity(id, level)
{
var element = document.getElementById(id);
element.style.display = 'inline';
element.style.zoom = 1;
element.style.opacity = level;
element.style.MozOpacity = level;
element.style.KhtmlOpacity = level;
element.style.filter = "alpha(opacity=" + (level * 100) + ");";
}
function fadeIn(id, steps, duration, interval, fadeOutSteps, fadeOutDuration)
{
var fadeInComplete;
for (i = 0; i <= 1; i += (1 / steps))
{
setTimeout("setOpacity('" + id + "', " + i + ")", i * duration);
fadeInComplete = i * duration;
}
// Set the timeout to start after the fade in time and the interval to display the
// message on the screen have both completed
setTimeout("fadeOut('" + id + "', " + fadeOutSteps + ", " + fadeOutDuration + ")", fadeInComplete + interval);
}
function fadeOut(id, steps, duration)
{
var fadeOutComplete;
for (i = 0; i <= 1; i += (1 / steps))
{
setTimeout("setOpacity('" + id + "', " + (1 - i) + ")", i * duration);
fadeOutComplete = i * duration;
}
// Completely hide the displayed message after the fade effect is complete
setTimeout("hide('" + id + "')", fadeOutComplete);
}
function hide(id)
{
document.getElementById(id).style.display = 'none';
}
function SaveCommentary(editor,reportID,controlID,commID,param1,param2,param3)
{
debugger;
var result;
var str = editor.get_element().id;
var text = editor.get_html();
var firstStripText = text.replace("<BODY contentEditable=true>","");
var secondStripText = firstStripText.replace("</BODY>","");
if(param1==undefined)
{
param1 = '';
}
if(param2==undefined)
{
param2 = '';
}
if(param3==undefined)
{
param3 = '';
}
result = Winston.SaveWithAjax(reportID, controlID, commID, param1, param2, param3, secondStripText);
if (result.error == null)
{
var statusLabelID = "ctl00_commentaryMessage";
var statusLabelText = document.getElementById(statusLabelID);
var date = new Date();
var d = date.getDate();
var day = (d < 10) ? '0' + d : d;
var m = date.getMonth() + 1;
var month = (m < 10) ? '0' + m : m;
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
var hour = date.getHours();
var min = date.getMinutes();
if (min < 10)
{
min = "0" + min;
}
var window = editor.get_toolAdapter().get_window();
var oPos = GetTopLeftPosition(window);
// Position the label just below the save button
statusLabelText.style.left = oPos.x;
statusLabelText.style.top = oPos.y;
statusLabelText.innerText = "Commentary Text Last saved at " + day + "-" + month + "-" + year + " " + hour + ":" + min
fadeIn(statusLabelID, 20, 1000, 1000, 20, 200);
}
else
{
statusLabelText.innerText = "Failed to save commentary text. Please contact your system administrator.";
fadeIn(statusLabelID, 20, 1000, 1000, 20, 200);
}
}
function GetTopLeftPosition(el)
{
var left = 0;
var top = 0;
while (el.offsetParent)
{
left += el.offsetLeft;
top += el.offsetTop;
elel = el.offsetParent;
}
if (el.x) left = el.x;
if (el.y) top = el.y;
var oPos = new Object();
oPos.x = left;
oPos.y = top;
return oPos;
}
I'd like to get hold of the toolbar position of a RadEditor when the Mode is set to:
re.ToolbarMode = EditorToolbarMode.PageTop;
I've added a custom save button to the toolbar and I'd like to flash a confirmation message just below the save button in the toolbar.
Currently, when the user scrolls, the toolbar moves to ensure that it is always at the top of the page. (I assume that this is re-positioned based on the scroll event).
Currently, I have code that looks like this but GetTopLeftPosition(el) always returns zero.
My question is how do I get hold of the new position of the toolbar (after scroll) so that I can display a message just below the save button?
function OnClientCommandExecuting(editor, args)
{
var name = args.get_name();
if (name == "Save")
{
var tool = args.get_tool();
var attributes = tool.get_attributes();
SaveCommentary(editor,
attributes["templateid"],
attributes["controlid"],
attributes["commentaryid"],
attributes["param1"],
attributes["param2"],
attributes["param3"]);
args.set_cancel(true);
}
}
function setOpacity(id, level)
{
var element = document.getElementById(id);
element.style.display = 'inline';
element.style.zoom = 1;
element.style.opacity = level;
element.style.MozOpacity = level;
element.style.KhtmlOpacity = level;
element.style.filter = "alpha(opacity=" + (level * 100) + ");";
}
function fadeIn(id, steps, duration, interval, fadeOutSteps, fadeOutDuration)
{
var fadeInComplete;
for (i = 0; i <= 1; i += (1 / steps))
{
setTimeout("setOpacity('" + id + "', " + i + ")", i * duration);
fadeInComplete = i * duration;
}
// Set the timeout to start after the fade in time and the interval to display the
// message on the screen have both completed
setTimeout("fadeOut('" + id + "', " + fadeOutSteps + ", " + fadeOutDuration + ")", fadeInComplete + interval);
}
function fadeOut(id, steps, duration)
{
var fadeOutComplete;
for (i = 0; i <= 1; i += (1 / steps))
{
setTimeout("setOpacity('" + id + "', " + (1 - i) + ")", i * duration);
fadeOutComplete = i * duration;
}
// Completely hide the displayed message after the fade effect is complete
setTimeout("hide('" + id + "')", fadeOutComplete);
}
function hide(id)
{
document.getElementById(id).style.display = 'none';
}
function SaveCommentary(editor,reportID,controlID,commID,param1,param2,param3)
{
debugger;
var result;
var str = editor.get_element().id;
var text = editor.get_html();
var firstStripText = text.replace("<BODY contentEditable=true>","");
var secondStripText = firstStripText.replace("</BODY>","");
if(param1==undefined)
{
param1 = '';
}
if(param2==undefined)
{
param2 = '';
}
if(param3==undefined)
{
param3 = '';
}
result = Winston.SaveWithAjax(reportID, controlID, commID, param1, param2, param3, secondStripText);
if (result.error == null)
{
var statusLabelID = "ctl00_commentaryMessage";
var statusLabelText = document.getElementById(statusLabelID);
var date = new Date();
var d = date.getDate();
var day = (d < 10) ? '0' + d : d;
var m = date.getMonth() + 1;
var month = (m < 10) ? '0' + m : m;
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
var hour = date.getHours();
var min = date.getMinutes();
if (min < 10)
{
min = "0" + min;
}
var window = editor.get_toolAdapter().get_window();
var oPos = GetTopLeftPosition(window);
// Position the label just below the save button
statusLabelText.style.left = oPos.x;
statusLabelText.style.top = oPos.y;
statusLabelText.innerText = "Commentary Text Last saved at " + day + "-" + month + "-" + year + " " + hour + ":" + min
fadeIn(statusLabelID, 20, 1000, 1000, 20, 200);
}
else
{
statusLabelText.innerText = "Failed to save commentary text. Please contact your system administrator.";
fadeIn(statusLabelID, 20, 1000, 1000, 20, 200);
}
}
function GetTopLeftPosition(el)
{
var left = 0;
var top = 0;
while (el.offsetParent)
{
left += el.offsetLeft;
top += el.offsetTop;
elel = el.offsetParent;
}
if (el.x) left = el.x;
if (el.y) top = el.y;
var oPos = new Object();
oPos.x = left;
oPos.y = top;
return oPos;
}
1 Answer, 1 is accepted
0
Hello Sabry,
Here is an example how to obtain the top and left coordinates of the RadWindow PageTop toolbar of RadEditor when the page is scrolled:
Note that the string window is reserved word in JavaScript and you should not name your variables with it.
All the best,
Rumen
the Telerik team
Here is an example how to obtain the top and left coordinates of the RadWindow PageTop toolbar of RadEditor when the page is scrolled:
var radWindow = editor.get_toolAdapter().get_window(); var popup = radWindow.get_popupElement(); if (!popup) return; var oPos = GetTopLeftPosition(popup);... function GetTopLeftPosition(el) { var left = 0; var top = 0; if (el.style.left) left = el.style.left; if (el.style.top) top = el.style.top; var oPos = new Object(); oPos.x = left; oPos.y = top; return oPos; }Note that the string window is reserved word in JavaScript and you should not name your variables with it.
All the best,
Rumen
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!