<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function GetRadWindow() {
var oWindow = null;
if (window.radWindow) oWindow = window.radWindow;
else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
return oWindow;
}
function onClientClose(arg) {
// Pass the arguments from the dialog to the callback function on the main page.
GetRadWindow().close(arg);
}
function OnClientClicked(sender, args) {
CloseWithRefresh();
}
function CloseWithRefresh() {
GetRadWindow().Close();
}
</script>
</telerik:RadCodeBlock>
I want to resize my radWindow. how can i increase the radWindow size ?
And I've googled , i am not sure that why i have to use telerik:RadCodeBlock before script tag.
Note : i have not found any radwindow in my aspx file.
Search in the whole project for Radwindow or RadWindowManager and once you find the control set its Width and Height properties.
You can also get a reference to the dialog and set its dimensions via JavaScript:
var oWnd = $find("<%= DialogWindow.ClientID %>");
oWnd.show();
//Here set the width and height of RadWindow
oWnd.setSize(400, 400);
This can be set also in the OnClientShow event of the window.
https://www.telerik.com/forums/set-radwindow-height-and-width-at-the-time-on-opning
https://docs.telerik.com/devtools/aspnet-ajax/controls/window/client-side-programming/radwindow-object
Related
I want to show some Infos as HTML in the Caption of a Fancybox.
These information are loaded beside the Image as an HTML element with ajax.
Until now I had an afterload method which loaded the caption content from this HTML Element into the caption by detaching it and append it into the caption after the ajax was loaded.
afterLoad : function (instance, slide) {
$( ".fancybox-slide--current .caption-content" ).detach()
.appendTo( ".fancybox-caption" );
}
This is the workaround I used, is there a cleaner way to do this?
I am not sure if I understand you, but I guess you are looking for a way to correctly update the caption. Here is a demo, you can tweak it to use ajax:
$('[data-fancybox="images"]').fancybox({
afterLoad: function(instance, current) {
if (instance.group[ current.index ].isProcessed !== true ) {
setTimeout(function() {
if ( !instance.isClosing ) {
var caption = 'Another caption for #' + (current.index + 1);
// Set caption permanently for current group item
instance.group[ current.index ].opts.caption = caption;
// Set caption for current slide object
current.opts.caption = caption;
// Update caption HTML element
instance.updateControls();
// Do this only once
instance.group[ current.index ].isProcessed = true;
}
}, 3000);
}
}
});
https://codepen.io/anon/pen/RyGZZE?editors=1010
I've read this excellent answer to pretty much the same question. However, I have tried every technique that #Reinmar recommended, and none of them seem to work.
The situation is that I am taking the current HTML from the editor and wrapping certain pieces in span tags. I then set the now modified HTML back and try to restore the user's cursor location. No technique works.
Here is a very simple example to reproduce the issue:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
</head>
<body>
<textarea id="cktest"><p>Sometimes Lorem. Sometime Ipsum. Always dolor.</p></textarea>
<script type="text/javascript">
(function () {
var checkTimeout;
var bookmark;
var storeCursorLocation = function(editor) {
bookmark = editor.getSelection().createBookmarks();
};
var restoreCursorLocation = function(editor) {
editor.getSelection().selectBookmarks(bookmark);
};
var validateText = function(editor) {
storeCursorLocation(editor);
var data = editor.document.getBody().getHtml();
data = data.replace("Lorem", "<span class='err-item'>Lorem</span>");
editor.document.getBody().setHtml(data);
restoreCursorLocation(editor);
};
CKEDITOR.replace('cktest', {
on: {
'instanceReady': function(evt) {
},
'key' : function(evt) {
clearTimeout(checkTimeout);
checkTimeout = setTimeout(function () {
validateText(evt.editor);
}, 1000);
}
}
});
})();
</script>
</body>
</html>
This code starts a timer when a user presses a key, and then waits for 1 second after they stop pressing keys to do the check.
Copy this to a new .html file and run it in your favorite browser (I am using Chrome).
When the CKEditor loads, use the mouse to place your cursor somewhere in the middle of the text. Then press the CTRL key and wait 1 second. You will see your cursor jump back to the start of the text.
This code example uses
editor.getSelection().createBookmarks();
to create the bookmark. But I have also tried:
editor.getSelection().createBookmarks(true);
and
editor.getSelection().createBookmarks2();
I have also tried just saving the range using
var ranges = editor.getSelection().getRanges();
and
editor.getSelection().selectRanges(ranges);
in the restoreCursorLocation function.
(function () {
var checkTimeout;
var bookmark;
var storeCursorLocation = function( editor ) {
bookmark = editor.getSelection().createBookmarks( true );
};
var restoreCursorLocation = function( editor ) {
//editor.focus();
editor.getSelection().selectBookmarks( bookmark );
};
var validateText = function( editor ) {
storeCursorLocation( editor );
var data = editor.document.getBody().getHtml();
data = data.replace( "spaceflight", "<span class='err-item'>spaceflight</span>" );
editor.document.getBody().setHtml( data );
restoreCursorLocation( editor );
//fire this event after DOM changes if working with widgets
//editor.fire( 'contentDomInvalidated' );
};
var editor = CKEDITOR.replace( 'editor1', {
extraAllowedContent : 'span(err-item)',
on: {
"pluginsLoaded" : function( event ){
editor.on( 'contentDom', function() {
var editable = editor.editable();
editable.attachListener( editable, 'keyup', function( e ) {
clearTimeout( checkTimeout );
checkTimeout = setTimeout(function () {
validateText( editor );
}, 100 );
});
});
}
}
});
})();
I have checked your code, made some corrections and the above seems to work fine. I know you said you have tried it but for me createBookmarks(true) has done the trick.
Explanations and Notes:
You needed to use createBookmarks(true) which inserts unique span into HTML. Such bookmark is not affected by changes you are doing inside the DOM (there are limits of course e.g. your custom changes remove bookmark).
It was clever to use getBody().getHtml() and getBody().setHTML(). If you have used editor.getData() this would have removed empty spans that represent bookmarks.
Please note however that such approach may break widgets so it is required to fire contentDomInvalidated event after such changes.
I was also focusing editor before restoring selection but this is “just in case” solution, as I have noticed that editor selects bookmark without it. If however, for some reason, you are losing the selection, this would be another thing to use.
Here you have working example: http://jsfiddle.net/j_swiderski/nwbsywnn/1/
Check the default behaviour when you set innerHtml in https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
Removes all of element's children, parses the content string and assigns the resulting nodes as children of the element
The bookmarks in CKEDITOR are hidden span elements and setting innerHtml will remove all those elements.
Anyway the solution is very simple.
Change your storeCursorLocation function to this
var storeCursorLocation = function(editor) {
bookmark = editor.getSelection().createBookmarks(true);
};
When you pass true as parameters it will use the ids as the reference instead of storing the DOM elements so you can restore then after an innerHtml change.
{Edit}
Reading Solution 2 from #Reinmar he says
If you can avoid uncontrolled innerHTML changes and instead append/remove/move some nodes, then just remember that you have to preserve these elements and this method will work perfectly. You can also move bookmarks' elements if your modifications should change the selection as well.
This is how you do it if you can't replace the contents of the element innerHtml.
This solution is less efficient but might work in some scenarios
Change the validateText function to this.
var validateText = function(editor) {
storeCursorLocation(editor);
var parent = editor.document.getBody().$.firstChild,
nodes = parent.childNodes,
nodeText,
words,
index = 0,
current,
newElement;
while (index < nodes.length) {
current = nodes[index];
nodeText = current.nodeValue;
if (current.nodeType === Node.TEXT_NODE && nodeText.indexOf('Lorem') !== -1) {
words = nodeText.split('Lorem');
newElement = document.createTextNode(words[0]);
parent.insertBefore(newElement, current);
newElement = document.createTextNode(words[1]);
parent.insertBefore(newElement, current.nextSibling);
newElement = document.createElement('span')
newElement.className = 'err-item';
newElement.innerHTML = 'Lorem';
parent.replaceChild(newElement, current);
break;
}
index++;
}
restoreCursorLocation(editor);
};
Basically I'm transversing the nodes of the first p in the chkeditor body and replacing only the node of type text that contains Lorem with a span and add the remaining text before and after as text elements. If you replace the whole text like you were doing it will remove from the DOM the bookmarks so when you tried to restore they don't exist.
This section of code in my /js/global.js file activate each image to open in a new window when clicked. Is it possible to alter this code to have each open in a FancyBox instead? I have downloaded a FancyBox plugin for a Vanilla forum I am running, and it currently only targets images embedded in posts After You Click On The Post Itself. On the main page, clicking on an image opens a new window.
// Shrink large images to fit into message space, and pop into new window when clicked.
// This needs to happen in onload because otherwise the image sizes are not yet known.
jQuery(window).load(function() {
var props = ['Width', 'Height'], prop;
while (prop = props.pop()) {
(function (natural, prop) {
jQuery.fn[natural] = (natural in new Image()) ?
function () {
return this[0][natural];
} :
function () {
var
node = this[0],
img,
value;
if (node.tagName.toLowerCase() === 'img') {
img = new Image();
img.src = node.src,
value = img[prop];
}
return value;
};
}('natural' + prop, prop.toLowerCase()));
}
jQuery('div.Message img').each(function(i,img) {
var img = jQuery(img);
var container = img.closest('div.Message');
if (img.naturalWidth() > container.width() && container.width() > 0) {
img.wrap('');
}
});
// Let the world know we're done here
jQuery(window).trigger('ImagesResized');
});
Add an specific class to your wrapped images, modifying this line
img.wrap('');
... into this :
img.wrap('<a class="fancybox" href="'+$(img).attr('src')+'"></a>');
Then bind fancybox to that selector (".fancybox") in a custom script like :
$(".fancybox").fancybox();
This assumes that you have properly loaded the fancybox js and css files.
I'm loading a page into a div. I'm also attempting to establish a waypoint, so that when the user scrolls down the page, the menu will change colors.
The problem I am having is the new height of the div is not recognized by the browser once the ajax content is loaded.
Here's what I have:
$(".cta").live('click', function () {
$('#faq').load('about-us/faqs/index.html'),
function () {
$("#faq").waypoint(function (event, direction) {
if (direction === 'up') {
$("#siteNav li a").removeClass("siteNavSelected");
$("#siteNav li.nav3 a").addClass("siteNavSelected");
}
}, {
offset: function () {
return $.waypoints('viewportHeight') - $("#faq").outerHeight();
}
});
}
return false;
});
Any ideas? Thanks.
Use $.waypoints('refresh');, from the documentation:
This will force a recalculation of each waypoint’s trigger point based on its offset option. This is called automatically whenever the window is resized or new waypoints are added. If your project is changing the DOM or page layout without doing one of these things, you may want to manually call it.
I'm not familiar with the intrinsics of the waypoint plugin, but you could also bind a scroll event and then capture the .scrollTop() value. Would look something like this:
$(document).bind('scroll', function(event) {
var scrollTop = $(window).scrollTop();
if (scrollTop < 1000 && $('siteNav li').hasClass('styleA')) { return; }
else {
$('siteNav li').removeClass('styleB');
$('siteNav li').addClass('styleA');
}
if (scrollTop > 1000 && $('siteNav li').hasClass('styleB')) { return; }
else {
$('siteNav li').removeClass('styleA');
$('siteNav li').addClass('styleB');
}
});
You have to play with the values a little to get it acting at the right spot. Also you have to use a greater or less than value in the test as if a user is at the top of the page and uses the scroll-wheel on his mouse to fly down the page, you don't get every value in between.
How can I create a rotator with "FormCode" mode while being able to start that rotator automatically when the page loads? In other words, to start the rotator automatically while enabling end user to stop/start/move next/move back.
I need a complete sample code for the call.
I've used the following JavaScript/JQuery code for FormCode management:
<script type ="text/javascript">
//
function
startRotator(clickedButton, rotator, direction)
{
if
(!rotator.autoIntervalID)
{
refreshButtonsState(clickedButton, rotator);
rotator.autoIntervalID = window.setInterval(
function
()
{
rotator.showNext(direction);
}, rotator.get_frameDuration());
}
}
function
stopRotator(clickedButton, rotator)
{
if
(rotator.autoIntervalID)
{
refreshButtonsState(clickedButton, rotator)
window.clearInterval(rotator.autoIntervalID);
rotator.autoIntervalID =
null
}
}
function
showNextItem(clickedButton, rotator, direction)
{
rotator.showNext(direction);
refreshButtonsState(clickedButton, rotator);
}
// Refreshes the Stop and Start buttons
function
refreshButtonsState(clickedButton, rotator)
{
var
jQueryObject = $telerik.$;
var className = jQueryObject(clickedButton).attr("class"
);
switch
(className)
{
case "start"
:
{
// Start button is clicked
jQueryObject(clickedButton).removeClass();
jQueryObject(clickedButton).addClass(
"startSelected"
);
// Find the stop button. stopButton is a jQuery object
var stopButton = findSiblingButtonByClassName(clickedButton, "stopSelected"
);
if
(stopButton)
{
// Changes the image of the stop button
stopButton.removeClass();
stopButton.addClass(
"stop"
);
}
}
break
;
case "stop"
:
{
// Stop button is clicked
jQueryObject(clickedButton).removeClass();
jQueryObject(clickedButton).addClass(
"stopSelected"
);
// Find the start button. startButton is a jQuery object
var startButton = findSiblingButtonByClassName(clickedButton, "startSelected"
);
if
(startButton)
{
// Changes the image of the start button
startButton.removeClass();
startButton.addClass(
"start"
);
}
}
break
;
}
}
// Finds a button by its className. Returns a jQuery object
function
findSiblingButtonByClassName(buttonInstance, className)
{
var
jQuery = $telerik.$;
var ulElement = jQuery(buttonInstance).parent().parent();
// get the UL element
var allLiElements = jQuery("li", ulElement);
// jQuery selector to find all LI elements
for (var
i = 0; i < allLiElements.length; i++)
{
var
currentLi = allLiElements[i];
var currentAnchor = jQuery("A:first", currentLi);
// Find the Anchor tag
if
(currentAnchor.hasClass(className))
{
return
currentAnchor;
}
}
}
//]]>
And the following code for the calls:
<
a href="#" onclick="stopRotator(this, $find('<%= MyRotator.ClientID %>
')); return false;"
class="stopSelected" title="Stop">Stop
'), Telerik.Web.UI.RotatorScrollDirection.Left); return false;"
class="start" title="Start">Start
However, I cannot start the rotator on the page load. Tried to use this code in the in the MyRotator_DataBoud event, but did not work either:
protected void rrMyRotator_DataBound(object sender, EventArgs
e)
{
Page.RegisterClientScriptBlock(
"MyScript", " startRotator(this, $find('<%= MyRotator.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Left);"
);
}
There are a couple of examples available in the Telerik online demos for this functionality and they have code you can use. See http://demos.telerik.com/aspnet-ajax/rotator/examples/clientapicontrol/defaultcs.aspx and http://demos.telerik.com/aspnet-ajax/button/examples/slideshow/defaultcs.aspx