I would like to add a toolbar button to CKEditor that shows the current color of the selection. Is this possible?
So far I managed to add a new toolbar button by following this tutorial and the colorbutton plugin, but I can't find any example of a toolbar button with dynamic presentation.
You could use a transparent image for the button and set the background color of the button span within your plugins functionality.
It looks like it might be easiest to get that span by finding the anchor tag with the title that you assigned (the tooltip) and then set the background color of the child span with id=cke_icon.
This is what the HTML for one of my plugin buttons looks like, the name of the particular plugin that the button calls isn't used, it's functions are assigned variable function numbers, so the plugin name isn't available:
<a id="cke_33" class="cke_off"
onclick="CKEDITOR.tools.callFunction(71, this); return false;"
onfocus="return CKEDITOR.tools.callFunction(70, event);"
onkeydown="return CKEDITOR.tools.callFunction(69, event);"
onblur="this.style.cssText = this.style.cssText;" aria-haspopup="true"
aria-labelledby="cke_33_label" role="button" hidefocus="true" tabindex="-1"
title="Block Background Color">
<span class="cke_icon" style="background-image:url
(/ckeditor_3.6.1/plugins/cwmarcontentbackcolor/images/contentbackcolor16x16.png?t=B5GJ5GG);
background-position:0 0px;">
</span>
<span id="cke_33_label" class="cke_label">Block Background Color</span>
<span class="cke_buttonarrow"> </span>
</a>
It will be a fair amount of work if you want to determine the color each time the user selects a portion of the content area because they could select multiple elements with multiple colors. Even if they simply click in the content area, you may have to walk up the DOM tree to find the element that the cursor position is inheriting it's color from.
I helped with a plugin for another question that had a different goal, but it involved firing each time a selection was made, creating an object based on the selection, and walking up the DOM tree to look at the class assigned to the elements. You may be able to modify it to fit your goals:
How to block editing on certain part of content in CKEDITOR textarea?
Related
given this:
<span data-v-086f077a="" data-v-bf29e118="" class="toggle undefined-undefined small">
<span data-v-086f077a="" class="toggle-label"></span>
<input data-v-086f077a="" type="checkbox" id="tracked-item-toggle-0">
<label data-v-086f077a="" for="tracked-item-toggle-0"><span data-v-086f077a="" class="on-text">Tracked</span>
<span data-v-086f077a="" class="off-text">Not Tracked</span>
</label>
</span>
How can I get the displayed text of the input checkbox.
clicking on the checkbox toggles it back and forth and displays either Tracked or Not Tracked. I just need to know which one it is so I can toggle it to Tracked if its Not Tracked.
To toggle I use //span[#class='toggle undefined-undefined small']
I have tried many things including //label[#for='tracked-item-toggle-0' and ./span[contains(.,'Not Tracked')]]
but that finds it whether its displayed or not.
None of the code changes based on toggling the checkbox
Thanks!
The label contains two spans which contain the text Tracked and Not Tracked and have class attributes on-text and off-text, respectively. Which of the two labels is displayed is presumably controlled by CSS.
My guess would be that there are CSS rules which control the display or visibility properties of these two spans, presumably using their class attributes in conjunction with some other attribute of the parent element.
Maybe take a look at the CSS (and include it in your question) and see what it reveals?
how can I remove z-index of the kendo window? I don`t want window to be modal, so I did like this .Modal(false). But of no use , window is rendering with z-index of 10003 like a popup. My intention is to render 9 windows on a same page ,put 3 windows per row in a table. Because of z-index , layout is distracting. If I can able to remove z-index, I can succeed.
#(Html.Kendo().Window()
.Name("window")
.Title("About Alvar Aalto")
.Modal(false)
.Content(#<text>
<div class="armchair">
<img src="#Url.Content("~/content/web/window/armchair-402.png")"
alt="Artek Alvar Aalto - Armchair 402" />
Artek Alvar Aalto - Armchair 402
</div>
<p>
Alvar Aalto is one of the greatest names in modern architecture and design.
Glassblowers at the iittala factory still meticulously handcraft the legendary
vases that are variations on one theme, fluid organic shapes that let the end user
ecide the use. Interpretations of the shape in new colors and materials add to the
growing Alvar Aalto Collection that remains true to his original design.
</p>
</text>)
.Draggable()
.Resizable()
.Width(600)
.Actions(actions => actions.Pin().Minimize().Maximize().Close())
)
I don't believe this can be done with the available configuration options. You could try using .Visible(false) and then manually adjust the z-index for each window to make it visible, but I imagine this would be brittle.
So I would recommend extending the window widget to create your own window type which doesn't manipulate the z-index in this way; this would keep your code encapsulated in its own class. See my answer here for some more information regarding extending kendoWindow (and a simple example). As far as I can see, the main method responsible for the z-index behavior is window.toFront(), so you'd probably have to rewrite that.
Since you plan to render the windows in a 3 by 3 grid I guess that you don't want to move or resize them and what you need from a KendoUI window is just the styling, correct? If so, you should take a look into panels styling (see KendoUI demo here) where you can style your code as a KendoUI window but, of course, you can neither move, nor hide nor resize.
You just need to use the following HTML:
<div class="k-block"><div class="k-header">Header</div>Block with header</div>
the z-index is set on the "style" property dynamically of the div.
with css all you need is an !important rule that will override styles defined on the element.
#mycontainer .k-window{
z-index: 3 !important;
}
I'm experiencing a problem ONLY in Chrome where an Ajax response is not being displayed. Oddly, when I hover over the page's main menu, the response shows up and also stays when I move the mouse away again from the main menu.
Here is a more specific description:
The page contains a search box that allows the user to start typing a contact name. As the user types, an ajax request is made to return a list of suggested contacts. The user can then click on a radio button corresponding to a contact in that list to display all the contact information of that one person. Up to that point everything works fine. But now if the user goes back to the search box to change his search, the previously returned list of contacts goes away, but the new one from the new search does not show up. It is the click on the radio button that causes the following search not to display any ajax responses. The odd thing now is that the response does show up if the user hovers over the main menu at the top of the page (which uses css), and it also stays if the user moves the mouse away again from the menu and everything works fine afterwards. Here is the page structure:
<div id="fixedTopBar">
<?php
include("include/mainMenu.php");
?>
</div>
<div id="pageContent">
<div id="contactListContainer">
<form>
<input id="contactSearchBox" type="text" autocomplete="off" onkeyup="showHint(this.value, 'contactList', null , 'include/ajax/getContacts.php')">
</form>
<div id="contactList">
<form>
<?php
echoAllContacts(getContactsFromDatabase());
?>
</form>
</div>
</div>
<div id="profile"></div>
The ajax request is made with the showHint() function in the id="contactSearchBox" input, and the response is displayed within the id="contactList" div.
So in short, the click on a radio button causes the problem, and hovering over the top menu solves the problem (very strange no?).
Please let me know what other code you need to track down the problem if you have any ideas, or if anything I said did not make sense.
Thanks in advance!
I was able to solve my problem with some css:
The id="contactListContainer" div was positioned: fixed ...once I positioned it absolute, the problem was gone. Now, to actually position it fixed and not have the problem, I also had to add the position:fixed or position:absolute property to the child div id="contactList".
I am using WatiN to test an autocomplete drop down.
When a user types in the field after 3 characters have been entered jquery autocomplete is triggered and an un-ordered list is shown. It is mandatory for the user to select from the list.
I am unable to make a selection/trigger the autocomplete from the list using WatiN.
Here is some of the html the developers have used:
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; display: block; width: 275px; top: 301px; left: 262px; ">
<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">ABC DEFGHIJ </a></li>
<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">ABC KLMNOPQ </a></li>
</ul>
They are using the jQuery UI autocomplete widget: http://jqueryui.com/demos/autocomplete/
Googling for jQuery UI autocomplete testing, I found this Stack Overflow Q&A:
Testing JQuery autocomplete ui with cucumber
containing what seemed to be the crucial information: “You need to first trigger a mouseover, then a click”
Then I Googled for WatiN mouseover, and found http://blogs.telerik.com/testing/posts/08-05-29/how_to_select_radcombobox_item_with_watin.aspx
This has a little code sample that includes:
Div divStudent3 = ie.Div(Find.ById("idRadComboBox_c2"));
divStudent3.FireEvent("onmouseover");
divStudent3.Click();
(to be clear our development code does not use telerik controls this is just an example)
At this point I thought I had a plan for how to drive this:
Type part of the desired value into the field (e.g. “ABC”)
Find a <ul> element with class “ui-autocomplete” and display style “block”, waiting until it is present
Within that <ul> element, find the <li> element whose text is the desired value (e.g. “ABC DEFGHIJ”)
Fire the “onmouseover” event on that <li> element
Click the <li> element.
I found two problems: firstly, that WatiN’s typing into the input field was very bad at triggering the appearance of the autocomplete menu,
and secondly that clicking on the menu item isn’t causing the autocomplete to occur.
I found that sending a downarrow key event to the input field encouraged the menu to appear, but didn’t cause the top menu item to highlight
(whereas if you type in manually and hit down arrow it does). Getting the menu item properly activated
(including getting its ID set to ui-active-menuitem) may be the missing link here.
Can anyone help me to understand and solve the two problems I have mentioned?
It took a bit, but here is a working example.
Key points
Call the JQuery object search method. This gets the dropdown list
to show.
then fire onmouseover the item you want.
Then click the item you want.
To get it to select the item correctly, I've needed to do all three above in that specific order.
Code
string searchValue = "c";
string selectItem = "COBOL";
ie.GoTo("http://jqueryui.com/demos/autocomplete/default.html");
ie.TextField("tags").TypeText(searchValue);
ie.Eval(#"$('#tags').autocomplete('search')");
ie.List(Find.ByClass("ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all")).ListItem(Find.ByText(selectItem)).Links[0].FireEvent("onmouseover");
ie.List(Find.ByClass("ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all")).ListItem(Find.ByText(selectItem)).Links[0].Click();
The above works using Watin 2.1. It won't work on WatiN 2.0 RC. I didn't check the actual 2.0 release. 2.0 RC doesn't have the List and ListItem objects. Tested only on IE8.
I have also run into a similar problem in an application that I am testing. When I type in the textfield using TypeText, the characters get typed twice.
What we did is as follows.
string mySubStr = value.Substring(0, value.Length - 3);
datavalue.Value = mySubStr;
datavalue.AppendText(value.Substring(value.Length - 3, 3));
Thread.Sleep(500);
datavalue.KeyDown((char)System.Windows.Forms.Keys.Down);
datavalue.KeyDown((char)System.Windows.Forms.Keys.Enter);
where datavalue is a reference to the textfield and value is the value that is to be keyed in.
Is it possible to add tooltip to the expand/collapse button oJQGrid so that it can change when expanded and vice versa ...
You need to see the documentation for the control but if not i just inspect it and collapse button html is
<span class="ui-icon ui-icon-circle-triangle-n"></span>
and expand is
<span class="ui-icon ui-icon-circle-triangle-s"></span>
so you can get the element by jquery and append what ever kind of html elements you want