I have a dropdownlist that displays just products codes 101,102,103
If the user hovers over a product code I would like the title to appear as a tooltip.
So it's not your normal DataValue & DataText scenerio, because "101" would be both the display text & the value.
I believe I will need to use jQuery to achive this effect.
And I also believe I would need to set the Title attribute of each list item as the Product Title.
My question is, using helper html.dropdownlist how can I set the title attribute?
Thanks, this is my first day using MVC
We used tipsy once for something very similar. http://plugins.jquery.com/project/tipsy
We actually took it a step further and "created" an attribute like this
<span class="tipsyItem" tipsy="This is my tooltip text!">This is my regular text!</span>
The reason was that tipsy would still show the regular tooltip on occasion. We used some of the advanced settings like this.
$('.tipsyItem').tipsy({title: 'tipsy'});
Plus you can theme it. Also were even able to get it to support html embedded in the tooltips for links and such.
$('.tipsyItem').tipsy({html: true });
Twitter used to use tipsy. I'm not sure if they still do.
Related
I need to slightly modify the behavior of a wicket select2Choice dropdown component.
When you've selected a choice if the choice is longer than the window, you see your choice truncated with elipses.
I'm wondering if its possible to do one of the following:
1) Make the choice scrollable
2) Add a title (e.g. tooltip) to the field with the value of the full choice.
Please note that I've attempted to do this through the developer tools in IE and have been mostly unsuccesful as far as scrolling goes. When a manually add a title attribute on the div with the class "select2-drop-mask" in the markup, I'm able to get a title. When I attempt to add that same title in wicket it does not show up. I believe this is because the select2choice is made up of more than one piece of mark up and through wicket there is no way to isolate that one piece of markup.
Any advice would be greatly apprecated.
Here is my Java wicket code for this component.
final FormComponent dictionaryEntryField = form.newSelect2Choice(form, "dictionaryEntry", SimpleAjaxEventHandler.get(),
new PropertyModel<String>(dictModelBean, "dictionaryEntry"),
new DictTextChoiceProvider(dictModelBeans), 300,
new ResourceModel("dictionary.mapping.dictentry.label"), LabeledFormField.LABEL.LEFT);
dictionaryEntryField.setRequired(true);
dictionaryEntryField.add(new AttributeModifier("title", new Model("Test Title")));
I'm never able to see the mouseover.
The following is a section of the markup that is created by wicket.
title="Test Title" was added manually through IE developer tools and
I'm able to see the title on mouseover.
I'd like to use the jQuery plugin dirtyForms to check if my forms are dirty or not.
But it looks like the DropDownList is not based on the standard select HTML tag.
It seems instead that it's using HTML tag.
Why this choice ? Because of that the jquery plugin dirtyForms don't set my forms dirty when I just change a DropDownList value...
I know nothing about kendo-ui or dirtyForms so I will do my best to answer this by looking at the API. The kendo-ui DropDownList has a change event that looks to only get fired whenever the input in a DropDownList is changed. Additionally dirtyForms has a way of you manually setting the form to dirty. Putting the two together I would guess the following should work.
$("#dropdownlist").kendoDropDownList({
change: function(e) {
$('form').dirtyForms('setDirty');
}
});
Edit: Since you seem to want this to effect all DropDownList's, you might be able to do the following.
kendo.ui.DropDownList.fn._change = function(e) {
if(this.element && this.element.form)
$(this.element.form).dirtyForms('setDirty');
}
This seems kind of hackish and I am not sure if I would recommend doing it though. It might break other things.
This sounds like this is a bug that was fixed in pull request 27, which allowed for cross-browser compatibility with select elements.
Or, it could be that you have not properly ignored all of the 3rd party widgets on the page that have anchor elements in their markup.
I have a form within a tab. It is second tab so it doesn't render until you open it.
I have tried to submit data to the form with Ext.getCmp('DetailsForm').getForm().setValues(selections[0]); but it says that it is not a function. Probably because it is not rendered yet. What I have to do?
Set the deferredRender config property of your Ext.tab.Panel to deferredRender: false
That will force the rendering of all tabs instead of just active ones. Now the form will be there. As mentioned before I recommend you also to use myTabPanelRef.down('from').getForm().setValues(selections[0]); to access the form.
subscribe to the second tabs show event OR painted event
then look for the form preferably by using .down() method as this wont look with in the entire DOM.
set the values
Use render event of form panel.
Your code will be something like this -
Ext.getCmp('DetailsForm').on('render', function(){
this.getForm().load(selections[0]);
});
The object is to Show-Hide text located under their respective Titles, so a User reads the title and shows or hides text belonging to that title if the User wants to read more.
I tried whatever I could find so far on here, we're talking dynamically setting text coming from a spreadsheet, can't use IDs, must work with .class, must be missing something, I have this piece of code:
... html.push('<div class="comments">' + comment + '</div></div></div>');
but when I try this Show-Hide code nothing happens, even if the error console shows nothing. Basically I want to Show-Hide the .comments class divs with a show-hide toggle link located under each of them. I say them because the .comments divs are reproduced dynamically while extracting text coming from Google spreadsheet cells/row (one .comments div per spreadsheet row). I tried .next, child and parent but they all divorced me so I dunno looks like a dynamic issue. So far I only managed to globally toggle all divs to a visible or hidden state but I need to toggle independantly individual divs.
I prefer a jQuery solution but whatever worked so far was achieved with native javascript.
Note: If a cross-browser truncate function which would append a more-less link after a number of words (var) in each .comments divs would be easier to implement then I would gladly take that option. Thx for any help, remember I am still learning lol!
I have been working on an entirely JS UI project and have brought myself to using $('', { properties }).appendTo(BaseElement) to work best for adding HTML elements because it appropriately manipulates the DOM every time.
If you are having good luck with push elsewhere, however, breakpointing on the line where you do your $('.class').hide() and see what $('.class').length is. Alternately, you can just add alert($('.class').length) to your code if you are unable to breakpoint the code. If it is 0, then your elements have not been properly added to the DOM. Changing to append will ensure they are part of the DOM and therefore targetable via JQuery.
I have a set of screenshots from a legacy Desktop application that needs to be redeveloped for the web
Although HTML will be used, the end result would have almost the same layout, and same fieds
I was wondering, just like OCR can detect a scanned document's text, tables and even form elements, is there any product that can take a (very accurate and clean by nature) screenshot and create the HTML that will put text fields, drop downs, checkboxes, radio buttons and labels in the same layout as the source screenshot form? I know its techncally feasible, and can be quite accurate, but couldn't find one
It is beyond my current skills to venture into image recognition, otherwise I would have given it a shot
This is not going to be possible - screenshots do not include enough information eg form validation, fields which are shown/hidden based on other options, tooltips, etc.
That said, you can make a form VERY rapidly using something like ASP.Net MVC eg:
Model:
Public Class MyFormModel
<Required()>
Property Username as string
<Required()>
Property Password as string
Property DOB as DateTime
End Class
And then in a view:
<%: html.EditForModel() %>
Which would generate the entire form based on the model - and as you can see the model is very easy to define...