I'm using kendo ui menu widgets from the web package of kendo ui. There is a problem in hyperlink the k-button is not working with an hyperlink inside.
<button class="k-button">
<a href="http://localhost:5724/map.html">
<font color = 'black'>See All Centers
</a></font>
</button>
the button does not even responding an error: it is behaving as if there is no hyperlink attached with button.
An anchor can directly be formatted as a button by simply adding class="k-button"
You should define it as:
<font color = 'black'>See All Center</fonts>
BTW: The tags in your HTML example are not correctly balanced. Also consider using style attribute instead of fonts.
Related
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?
We have our custom button that is ASP.NET custom server control. We use it on all our pages for action buttons (< NS:OurButton ID='btn' runat="server" Text="Search"/ >).
Now we want to use that button to open our custom search form to filter the records in jqGrid.
Our business requirement that the search button must be a part of jqGrid pager.
How I can do it? I tried to search google and wiki help for jqGrid, but didn't found any way how to add that custom search button to the jqGrid pager.
If it's matters, the button rendered to the client in that markup:
<div id="btn" class="OurCustomButton">
<div class="LeftSide"></div>
<div class="ButtonContent">Search</div>
<div class="RightSide"></div>
</div>
Or maybe it's possible to create totally my own custom pager, with my own design and buttons and then to tell the jqGrid to use it's controls as triggers or to trigger events on my own with correct parameters?
One solution I can think of is to use jQuery's insertBefore()(or insertAfter) and have the html for your button inserted on the document.ready() event.
The code could be:
jQuery(document).ready(function(){
$('<div class="ButtonContent">Search</div>').insertBefore('.RightSide');
});
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
So I have add to cart button, which is comprised of an anchor tag that has an image tag inside it. The anchor tag is using a bunch of javascript effects for mouseover etc that does image swap of this image in question etc.
Now, I have a function "AddCartButton" in my codebehind class that handles click event of this anchor tag. This obviously does not work when javascript is disabled. So I replaced the img tag inside the anchor tag with control, but Those swappings are not working for my though.
What are my options? I want the click to be handled by my C# function irrespective of whether javascript is enabled, and I want the mouseover effect when javascript is enabled.
P.S. It is a repost, but there was only 1 view or something for last post, so I changed the title a lil bit.
<div>
<a id = "addcartButton" href = "#" runat = "server" onMouseOut="MM_swapImgRestore()" onserverclick = "AddCartButton" onMouseOver="MM_swapImage('Image1111111111','','../_images/b_addCart_f2.gif',1)">
<img runat = "server" src='../_images/b_addCart.gif' AlternateText="Add to Cart" name="Image1111111111" width="106" height="29" border="0" />
</a>
</div>
So basically I want something that is working even when javascript is disabled. I still want all those mouseover effects etc when javascript is availabel though.
have you looked at ImageButton class?
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.imagebutton.aspx