How do I rehost the KendoUI phone simulator (Sample included) - javascript

So far I have a semi-working demo here and want to make the skins change when people click on them.
The original is here
KendoUI has a nice demo page that demonstrates their controls in a simulated phone. They also include the ability to "swap" between phone layouts.
I would like to demo a corporate product for people who don't have phones and think this would be a great way for them to get used to the product without navigating to the site.
How do I properly extract and rehost this simulator?

They're doing a $.get request which is why I think your demo isn't working in JSBin.
I haven't really tested this much, but you can change the skin by modifying the code in examples.js. In the code that defines the jQuery plugin $.fn.mobileOsChooser, you can replace the click handler with something like this:
deviceList.find(".osName,.osThumb").click(function () {
window.kendoMobileOS = $(this).text();
applyCurrentMobileOS(options.container);
});
See a (somewhat) working demo here. Note that you may need to change other things to make it fully functional (and you may not want to use the kendo domain for your own demo).

Related

jquery UI simple context menu, callable from button

I'm looking for some combination of a plugin or clever programming technique that will allow me to have a context-style menu in jQuery but rather than actually triggering it from a right-click, I'd like to be able to have it triggered from a button that can potentially move to different locations on my window. I can handle the part of the button itself moving without much trouble. My requirements are:
It should be compatible with jQuery UI 1.8 and my custom themeroller-generated theme
It needs to be relocatable
I either need to have it execute a callback when an element is selected, or have it honor the href on any a tags that make up the menu elements
I looked at Selectmenu and it's close, but it seems to want to always show the currently selected item, which is not quite what I want. Also I had to hack around it in an ugly way to make it relocate properly.
This blog post is also pretty close but the jsEvent.clientX and jsEvent.clientY don't put the dialog in the right place and I'm a little stuck as to what to do about that. Also I don't really want the options to be buttons. The menu-ish plugins have them looking right.
This plugin here is pretty much exactly what I want (I'd have to add the bit about the button, but it doesn't look too hard). But that requires jQuery UI 1.9.
Any thoughts? It may be that this is just such a rare requirement that I have to roll my own, but somehow that seems surprising and I feel like I might be missing something.
I like this plugin. It seems that is more compatible than jQueryUI-contextmenu.
Is a fork of jQueryUI-contextmenu actually
jQuery-contextMenu
I liked it because it has more examples, and it says that only use one footprint in memory so it consume less resources in comparison to others. Works with +jquery 1.6 and don't necessarily need html markup,
The menu plugin you mentioned last seems to work fine with jQuery UI 1.8.x, but not jQuery UI 1.7.x.
jQ-UI 1.8.7: http://jsfiddle.net/william/xxGUW/
jQ-UI 1.8.9: http://jsfiddle.net/william/xxGUW/1/
jQ-UI 1.8.14: http://jsfiddle.net/william/xxGUW/2/
jQ-UI 1.7.2 (broken): http://jsfiddle.net/william/xxGUW/3/

Hovering over option in a select list (window ) in IEs does not generate a tooltip

Hovering over option in a select list (window ) in IEs does not generate a tooltip, but works fine in FireFox and Chrome. I’ve set up a working demonstration on jsbin.com and jsfiddle.net, whichever is more convenient.
Link To jsfiddle.net Demo.
and
Link To jsbin.com Demo.
So you can see it in action.
The function which is in use was not written by me, I found it here: owainlewis.com/blog/post/simple_jquery_tool_tip_plugin. Originally it was written for showing 'tittle' attributes as a tool-tip, but I re-wrote it some of it (replaced 'title' with 'option') to accommodate my needs.
To know exactly what I mean, check out those demos in Firefox or Chrome first.
Sorry, I forgot to mention that this HTML code is generated by PHP. Using title attribute would be great for me, if I was in charge of PHP, then I would not have to re-write the original plugin.
Unfortunately, for now I have to keep looking.
P.S.
I am open to any workarounds. (If there is no hack I will go back to the title attribute.)
You don't need JavaScript to do it, and in fact, you can't use JavaScript to do it. IE does not respond to mouseover on option items. If you need dynamic tooltips just change the title attribute of the option.
Though it's a simple title attribute, this works for me in IE9: http://jsfiddle.net/n5YUk/4/
Check the first option in the list - I changed it to:
<option title="dash dash" Value="">--</option>
I know it's not what you're hoping to get but it's the only way you'll get it in IE.
Paul
Set the title property of the option (you can use jquery for this also by setting the attr) tag and you should be good to go.

Tracking down display errors in IE, when everything looks good in firefox

I am a super newb at developing web pages. Especially pages that are created dynamically from javascript.
I have a page that I have worked on that uses some templates from prototype, and widgets from dojo, as well as plain old javascript. This page looks and acts perfectly in firefox.
It is basically adding rows to a table, and adding widgets to the cells.
The widgets basically seem like they are in the wrong column/wrong place.
Where do I start looking to figure out what the incompatibilities are between firefox and IE?
There are lots of sites that will give you information about compatibility. I'd check google. Also, you can download IETester which will allow you to see how your site looks in most IE versions (5.5+).
Take a look at: http://www.quirksmode.org/
I am currently trying to make a template that displays well with FF do the same in IE.
So far, I am breaking it down div by div with corresponding JS function.
Then it is easier to look up the specifics of that particular piece you are trying to make compatible.
For example, I was implementing the enter key and noticed it worked well in FF and not IE. After I looked at that specific input box in html and gathered there were no problems with it, I dove into that specific JS function. Inside I found that the currentTarget wasn't "working". I did a quick search on current target in IE and got all the info I needed to get it to work.
Get yourself a good JS debugger as well, FireBug works with both browsers.
There just aren't good web standards in the web industry right now. Everyone is doing their own thing, it is like the house and bank market. These guys are trying though.

How to achieve this javascript effect?

On this website: when the user clicks "register now" along the top bar the screen goes dim and a box appears offering the registration form with recaptcha. I have a registration form with recaptcha working on my site and would like to copy the effect seen above.
Can anyone link me to a specific tutorial offering instructions or alternatively provide me with the code?
I am a novice javascript programmer.
Thanks if you can help me.
There's couple of good plugins for that. If you use jQuery you can check Thickbox and even jQuery UI Dialog should probably be enough for what you want.
Take a look at jQuery effects, in case you haven't heard of jQuery before, here is a good introduction.
$('#register').click(function() {
$('#topBar').fadeOut('slow', function() {
// Some Code
});
});
The effect you are talking about is generally described as a "lightbox" - based on one of the earliest implementations (from what I remember). Check out this page on wikipedia and look about - the modal dialog implementation might be what you're talking about.
I'm pretty sure some of the standard frameworks like jQuery and MooTools implement this (directly or via plugins).

PopupWindow in jQuery

I am in need of a popupwindow with the option of a radio button. I have tested with Impromtu. Is any easy made Popupwindow plugin available?
My plugin should work in Internet Explorer, Mozilla and Google Chrome. What would some sample code be?
jqModal is great and easy-to-use for building Modal Popups and the like.
If you want a tutorial on how to build one yourself without jQuery, check out this tutorial.
Check out Thickbox! You can use a div or so on your page as content (see inline content demo).
Here's a list of lightbox like plugins depending on your need:
http://www.fortysomething.ca/mt/etc/archives/006978.php
If you're not absolutely bent on using jQuery, there is another library available that uses the Prototype library that is rather handy. The popup windows are very easy to implement, and the modal dialog boxes are even easier.
On a side note, I have used thickbox before and was rather impressed, but the URL parsing structure that it uses were kind of limiting me for what I needed to do (I was using a ComponentArt object that didn't use anchors).
Anyway, definitely check out this tool. It's probably more than you need, but who knows maybe you'll get inspired to find other uses for it. It's a pretty fun tool:
http://prototype-window.xilinus.com/documentation.html
FaceBox is another option to check out.

Categories

Resources