Search Results

Search found 23450 results on 938 pages for 'jquery ui draggable'.

Page 8/938 | < Previous Page | 4 5 6 7 8 9 10 11 12 13 14 15  | Next Page >

  • Follow the links of the tab in jquery ui tab

    - by Aakash Chakravarthy
    Hello, I have jquery tabs like <ul id="tabsList"> <li><a href="#tab-1">Name 1</a></li> <li><a href="#tab-2">Name 2</a></li> <li><a href="http://www.google.com/">Name 3</a></li> </ul> <div id="tab-1">content 1</div> <div id="tab-2">content 2</div> the first two tabs load the respective divs. But the third one should go to google.com, instead it does nothing. It just adds http://example.com/index.html#ui-tabs-[object Object] to the url. I am developing a wordpress plugin and the admin page needs a tab interface. I tested this in a local server and not working update: i don't want to load google.com inside the page. It should open the webpage in new tab/window like ordinary links do.

    Read the article

  • jQuery Context Menu Plugin and Capturing Right-Click

    - by Ben Griswold
    I was thrilled to find Cory LaViska’s jQuery Context Menu Plugin a few months ago. In very little time, I was able to integrate the context menu with the jQuery Treeview.  I quickly had a really pretty user interface which took full advantage of limited real estate.  And guess what.  As promised, the plugin worked in Chrome, Safari 3, IE 6/7/8, Firefox 2/3 and Opera 9.5.  Everything was perfect and I shipped to the Integration Environment. One thing kept bugging though – right clicks aren’t the standard in a web environment. Sure, when one hovers over the treeview node, the mouse changed from an arrow to a pointer, but without help text most users will certainly left-click rather than right. As I was already doubting the design decision, we did some Mac testing.  The context menu worked in Firefox but not Safari.  Damn.  That’s when I started digging into the Madness of Javascript Mouse Events.  Don’t tell, but it’s complicated.  About as close as one can get to capture the right-click mouse event on all major browsers on Windows and Mac is this: if (event.which == null) /* IE case */ button= (event.button < 2) ? "LEFT" : ((event.button == 4) ? "MIDDLE" : "RIGHT"); else /* All others */ button= (event.which < 2) ? "LEFT" : ((event.which == 2) ? "MIDDLE" : "RIGHT"); Yikes.  The content menu code was simply checking if event.button == 2.  No problem.  Cory offers a jQuery Right Click Plugin which I’m sure works for windows but probably not the Mac either.  (Please note I haven’t verified this.) Anyway, I decided to address my UI design concern and the Safari Mac issue in one swoop.  I decided to make the context menu respond to any mouse click event.  This didn’t take much – especially after seeing how Bill Beckelman updated the library to recognize the left click. First, I added an AnyClick option to the library defaults: // Any click may trigger the dropdown and that's okay // See Javascript Madness: Mouse Events – http: //unixpapa.com/js/mouse.html if (o.anyClick == undefined) o.anyClick = false; And then I trigger the context menu dropdown based on the following conditional: if (evt.button == 2 || o.anyClick) { Nothing tricky about that, right?  Finally, I updated my menu setup to include the AnyClick value, if true: $('.member').contextMenu({ menu: 'memberContextMenu', anyClick: true },             function (action, el, pos) {                 … Now the context menu works in “all” environments if you left, right or even middle click.  Download jQuery Context Menu Plugin for Any Click *Opera 9.5 has an option to allow scripts to detect right-clicks, but it is disabled by default. Furthermore, Opera still doesn’t allow JavaScript to disable the browser’s default context menu which causes a usability conflict.

    Read the article

  • eclipse: want to view a css file but get "Cannot create extension" error

    - by nerdess
    since i rebooted my computer and started eclipse again i can't view css or js files anymore. all i get is this bizarre error, see stack below: org.eclipse.core.runtime.CoreException: Cannot create extension at org.eclipse.ui.internal.WorkbenchPlugin.createExtension(WorkbenchPlugin.java:287) at org.eclipse.ui.internal.registry.EditorDescriptor.createEditor(EditorDescriptor.java:235) at org.eclipse.ui.internal.EditorReference.createPart(EditorReference.java:319) at org.eclipse.ui.internal.e4.compatibility.CompatibilityPart.createPart(CompatibilityPart.java:262) at org.eclipse.ui.internal.e4.compatibility.CompatibilityEditor.createPart(CompatibilityEditor.java:61) at org.eclipse.ui.internal.e4.compatibility.CompatibilityPart.create(CompatibilityPart.java:299) at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:57) at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) at java.lang.reflect.Method.invoke(Method.java:601) at org.eclipse.e4.core.internal.di.MethodRequestor.execute(MethodRequestor.java:56) at org.eclipse.e4.core.internal.di.InjectorImpl.processAnnotated(InjectorImpl.java:861) at org.eclipse.e4.core.internal.di.InjectorImpl.processAnnotated(InjectorImpl.java:841) at org.eclipse.e4.core.internal.di.InjectorImpl.inject(InjectorImpl.java:113) at org.eclipse.e4.core.internal.di.InjectorImpl.internalMake(InjectorImpl.java:321) at org.eclipse.e4.core.internal.di.InjectorImpl.make(InjectorImpl.java:242) at org.eclipse.e4.core.contexts.ContextInjectionFactory.make(ContextInjectionFactory.java:161) at org.eclipse.e4.ui.internal.workbench.ReflectionContributionFactory.createFromBundle(ReflectionContributionFactory.java:102) at org.eclipse.e4.ui.internal.workbench.ReflectionContributionFactory.doCreate(ReflectionContributionFactory.java:71) at org.eclipse.e4.ui.internal.workbench.ReflectionContributionFactory.create(ReflectionContributionFactory.java:53) at org.eclipse.e4.ui.workbench.renderers.swt.ContributedPartRenderer.createWidget(ContributedPartRenderer.java:141) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.createWidget(PartRenderingEngine.java:892) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.safeCreateGui(PartRenderingEngine.java:627) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.safeCreateGui(PartRenderingEngine.java:729) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.access$2(PartRenderingEngine.java:700) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine$7.run(PartRenderingEngine.java:694) at org.eclipse.core.runtime.SafeRunner.run(SafeRunner.java:42) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.createGui(PartRenderingEngine.java:679) at org.eclipse.e4.ui.workbench.renderers.swt.StackRenderer.showTab(StackRenderer.java:1115) at org.eclipse.e4.ui.workbench.renderers.swt.LazyStackRenderer.postProcess(LazyStackRenderer.java:98) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.safeCreateGui(PartRenderingEngine.java:643) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.safeCreateGui(PartRenderingEngine.java:729) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.access$2(PartRenderingEngine.java:700) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine$7.run(PartRenderingEngine.java:694) at org.eclipse.core.runtime.SafeRunner.run(SafeRunner.java:42) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.createGui(PartRenderingEngine.java:679) at org.eclipse.e4.ui.workbench.renderers.swt.SWTPartRenderer.processContents(SWTPartRenderer.java:59) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.safeCreateGui(PartRenderingEngine.java:639) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.safeCreateGui(PartRenderingEngine.java:729) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.access$2(PartRenderingEngine.java:700) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine$7.run(PartRenderingEngine.java:694) at org.eclipse.core.runtime.SafeRunner.run(SafeRunner.java:42) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.createGui(PartRenderingEngine.java:679) at org.eclipse.e4.ui.workbench.renderers.swt.SWTPartRenderer.processContents(SWTPartRenderer.java:59) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.safeCreateGui(PartRenderingEngine.java:639) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine$6.run(PartRenderingEngine.java:518) at org.eclipse.core.runtime.SafeRunner.run(SafeRunner.java:42) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.createGui(PartRenderingEngine.java:503) at org.eclipse.e4.ui.workbench.renderers.swt.ElementReferenceRenderer.createWidget(ElementReferenceRenderer.java:74) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.createWidget(PartRenderingEngine.java:892) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.safeCreateGui(PartRenderingEngine.java:627) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.safeCreateGui(PartRenderingEngine.java:729) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.access$2(PartRenderingEngine.java:700) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine$7.run(PartRenderingEngine.java:694) at org.eclipse.core.runtime.SafeRunner.run(SafeRunner.java:42) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.createGui(PartRenderingEngine.java:679) at org.eclipse.e4.ui.workbench.renderers.swt.SWTPartRenderer.processContents(SWTPartRenderer.java:59) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.safeCreateGui(PartRenderingEngine.java:639) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.safeCreateGui(PartRenderingEngine.java:729) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.access$2(PartRenderingEngine.java:700) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine$7.run(PartRenderingEngine.java:694) at org.eclipse.core.runtime.SafeRunner.run(SafeRunner.java:42) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.createGui(PartRenderingEngine.java:679) at org.eclipse.e4.ui.workbench.renderers.swt.SWTPartRenderer.processContents(SWTPartRenderer.java:59) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.safeCreateGui(PartRenderingEngine.java:639) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.safeCreateGui(PartRenderingEngine.java:729) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.access$2(PartRenderingEngine.java:700) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine$7.run(PartRenderingEngine.java:694) at org.eclipse.core.runtime.SafeRunner.run(SafeRunner.java:42) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.createGui(PartRenderingEngine.java:679) at org.eclipse.e4.ui.workbench.renderers.swt.SWTPartRenderer.processContents(SWTPartRenderer.java:59) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.safeCreateGui(PartRenderingEngine.java:639) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.safeCreateGui(PartRenderingEngine.java:729) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.access$2(PartRenderingEngine.java:700) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine$7.run(PartRenderingEngine.java:694) at org.eclipse.core.runtime.SafeRunner.run(SafeRunner.java:42) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.createGui(PartRenderingEngine.java:679) at org.eclipse.e4.ui.workbench.renderers.swt.SWTPartRenderer.processContents(SWTPartRenderer.java:59) at org.eclipse.e4.ui.workbench.renderers.swt.PerspectiveRenderer.processContents(PerspectiveRenderer.java:59) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.safeCreateGui(PartRenderingEngine.java:639) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.safeCreateGui(PartRenderingEngine.java:729) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.access$2(PartRenderingEngine.java:700) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine$7.run(PartRenderingEngine.java:694) at org.eclipse.core.runtime.SafeRunner.run(SafeRunner.java:42) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.createGui(PartRenderingEngine.java:679) at org.eclipse.e4.ui.workbench.renderers.swt.PerspectiveStackRenderer.showTab(PerspectiveStackRenderer.java:103) at org.eclipse.e4.ui.workbench.renderers.swt.LazyStackRenderer.postProcess(LazyStackRenderer.java:98) at org.eclipse.e4.ui.workbench.renderers.swt.PerspectiveStackRenderer.postProcess(PerspectiveStackRenderer.java:77) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.safeCreateGui(PartRenderingEngine.java:643) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.safeCreateGui(PartRenderingEngine.java:729) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.access$2(PartRenderingEngine.java:700) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine$7.run(PartRenderingEngine.java:694) at org.eclipse.core.runtime.SafeRunner.run(SafeRunner.java:42) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.createGui(PartRenderingEngine.java:679) at org.eclipse.e4.ui.workbench.renderers.swt.SWTPartRenderer.processContents(SWTPartRenderer.java:59) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.safeCreateGui(PartRenderingEngine.java:639) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.safeCreateGui(PartRenderingEngine.java:729) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.access$2(PartRenderingEngine.java:700) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine$7.run(PartRenderingEngine.java:694) at org.eclipse.core.runtime.SafeRunner.run(SafeRunner.java:42) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.createGui(PartRenderingEngine.java:679) at org.eclipse.e4.ui.workbench.renderers.swt.SWTPartRenderer.processContents(SWTPartRenderer.java:59) at org.eclipse.e4.ui.workbench.renderers.swt.WBWRenderer.processContents(WBWRenderer.java:644) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.safeCreateGui(PartRenderingEngine.java:639) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.safeCreateGui(PartRenderingEngine.java:729) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.access$2(PartRenderingEngine.java:700) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine$7.run(PartRenderingEngine.java:694) at org.eclipse.core.runtime.SafeRunner.run(SafeRunner.java:42) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.createGui(PartRenderingEngine.java:679) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine$9.run(PartRenderingEngine.java:985) at org.eclipse.core.databinding.observable.Realm.runWithDefault(Realm.java:332) at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.run(PartRenderingEngine.java:940) at org.eclipse.e4.ui.internal.workbench.E4Workbench.createAndRunUI(E4Workbench.java:86) at org.eclipse.ui.internal.Workbench$5.run(Workbench.java:587) at org.eclipse.core.databinding.observable.Realm.runWithDefault(Realm.java:332) at org.eclipse.ui.internal.Workbench.createAndRunWorkbench(Workbench.java:542) at org.eclipse.ui.PlatformUI.createAndRunWorkbench(PlatformUI.java:149) at org.eclipse.ui.internal.ide.application.IDEApplication.start(IDEApplication.java:124) at org.eclipse.equinox.internal.app.EclipseAppHandle.run(EclipseAppHandle.java:196) at org.eclipse.core.runtime.internal.adaptor.EclipseAppLauncher.runApplication(EclipseAppLauncher.java:110) at org.eclipse.core.runtime.internal.adaptor.EclipseAppLauncher.start(EclipseAppLauncher.java:79) at org.eclipse.core.runtime.adaptor.EclipseStarter.run(EclipseStarter.java:353) at org.eclipse.core.runtime.adaptor.EclipseStarter.run(EclipseStarter.java:180) at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:57) at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) at java.lang.reflect.Method.invoke(Method.java:601) at org.eclipse.equinox.launcher.Main.invokeFramework(Main.java:629) at org.eclipse.equinox.launcher.Main.basicRun(Main.java:584) at org.eclipse.equinox.launcher.Main.run(Main.java:1438) Caused by: java.lang.NullPointerException at org.eclipse.ui.internal.WorkbenchPlugin.createExtension(WorkbenchPlugin.java:263)

    Read the article

  • jQuery: Can't get tooltip plugin to work

    - by Rosarch
    I'm trying to use this tooltip plugin: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/. I can't seem to get it to work. <head> <script type="text/javascript" src="/static/JQuery.js"></script> <script type="text/javascript" src="/static/jquery-ui-1.8.1.custom.min.js"></script> <script type="text/javascript" src="/static/jquery.json-2.2.min.js"></script> <script type="text/javascript" src="/static/jquery.form.js"></script> <script type="text/javascript" src="/static/js-lib/jquery.bgiframe.js"></script> <script type="text/javascript" src="/static/js-lib/jquery.delegate.js"></script> <script type="text/javascript" src="/static/js-lib/jquery.dimensions.js"></script> <script type="text/javascript" src="/static/jquery.tooltip.js"></script> <script type="text/javascript" src="/static/sprintf.js"></script> <script type="text/javascript" src="/static/clientside.js"></script> </head> I try it out in a simple example: clientside.js: $(document).ready(function () { $("#set1 *").tooltip(); }); The target html: <div id="set1"> <p id="welcome">Welcome. What is your email?</p> <form id="form-username-form" action="api/user_of_email" method="get"> <p> <label for="form-username">Email:</label> <input type="text" name="email" id="form-username" /> <input type="submit" value="Submit" id="form-submit" /> </p> </form> <p id="msg-user-accepted"></p> </div> Unfortunately, nothing happens. What am I doing wrong?

    Read the article

  • How to submit the form using JQuery UI?

    - by Vafello
    I have a form in html with a default submit button. After the form is submitted, a php file is run (with action = homelocation). I decided to use JQuery UI dialog to display the form. I have 2 default buttons there - one to save and one to close the dialog. Can anyone tell me how to assign the form submit button action to the JQuery dialog button(i.e. replace the submit button from the form with the one in the dialog)? Here's my code: <div id="userdialog" title="Add"> <form id="add" action="engine.php" method="POST"> <input type="hidden" name="action" value="homelocation" id="action"> <button type="submit">Save this location</button> </form></div> Dialog: $('#userdialog').dialog({ width: 260, position: [250,100], buttons: { "Save": function() { HERE GOES THE REQUIRED FUNCTION $(this).dialog('close'); }, "Don't Save": function() { $(this).dialog("close"); } } });

    Read the article

  • Using jQuery Live instead of jQuery Hover function

    - by hajan
    Let’s say we have a case where we need to create mouseover / mouseout functionality for a list which will be dynamically filled with data on client-side. We can use jQuery hover function, which handles the mouseover and mouseout events with two functions. See the following example: <!DOCTYPE html> <html lang="en"> <head id="Head1" runat="server">     <title>jQuery Mouseover / Mouseout Demo</title>     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>     <style type="text/css">         .hover { color:Red; cursor:pointer;}     </style>     <script type="text/javascript">         $(function () {             $("li").hover(               function () {                   $(this).addClass("hover");               },               function () {                   $(this).removeClass("hover");               });         });     </script> </head> <body>     <form id="form2" runat="server">     <ul>         <li>Data 1</li>         <li>Data 2</li>         <li>Data 3</li>         <li>Data 4</li>         <li>Data 5</li>         <li>Data 6</li>     </ul>     </form> </body> </html> Now, if you have situation where you want to add new data dynamically... Lets say you have a button to add new item in the list. Add the following code right bellow the </ul> tag <input type="text" id="txtItem" /> <input type="button" id="addNewItem" value="Add New Item" /> And add the following button click functionality: //button add new item functionality $("#addNewItem").click(function (event) {     event.preventDefault();     $("<li>" + $("#txtItem").val() + "</li>").appendTo("ul"); }); The mouse over effect won't work for the newly added items. Therefore, we need to use live or delegate function. These both do the same job. The main difference is that for some cases delegate is considered a bit faster, and can be used in chaining. In our case, we can use both. I will use live function. $("li").live("mouseover mouseout",   function (event) {       if (event.type == "mouseover") $(this).addClass("hover");       else $(this).removeClass("hover");   }); The complete code is: <!DOCTYPE html> <html lang="en"> <head id="Head1" runat="server">     <title>jQuery Mouseover / Mouseout Demo</title>     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>     <style type="text/css">         .hover { color:Red; cursor:pointer;}     </style>     <script type="text/javascript">         $(function () {             $("li").live("mouseover mouseout",               function (event) {                   if (event.type == "mouseover") $(this).addClass("hover");                   else $(this).removeClass("hover");               });             //button add new item functionality             $("#addNewItem").click(function (event) {                 event.preventDefault();                 $("<li>" + $("#txtItem").val() + "</li>").appendTo("ul");             });         });     </script> </head> <body>     <form id="form2" runat="server">     <ul>         <li>Data 1</li>         <li>Data 2</li>         <li>Data 3</li>         <li>Data 4</li>         <li>Data 5</li>         <li>Data 6</li>     </ul>          <input type="text" id="txtItem" />     <input type="button" id="addNewItem" value="Add New Item" />     </form> </body> </html> So, basically when replacing hover with live, you see we use the mouseover and mouseout names for both events. Check the working demo which is available HERE. Hope this was useful blog for you. Hope it’s helpful. HajanReference blog: http://codeasp.net/blogs/hajan/microsoft-net/1260/using-jquery-live-instead-of-jquery-hover-function

    Read the article

  • useFastClick in JQuery Mobile

    - by Yousef_Jadallah
      Normal 0 false false false EN-US X-NONE AR-SA /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-qformat:yes; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin-top:0cm; mso-para-margin-right:0cm; mso-para-margin-bottom:10.0pt; mso-para-margin-left:0cm; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:Arial; mso-bidi-theme-font:minor-bidi;} For who want to convert the application from JQM Alpha to JQM Beta 1, needs to bind  click  events to the new vclick one. Click event is working in general browsers butt that is needed for iOS and Android, useFastClick  is (touch + mouse click). Moreover if you have this event alot in your project you can turn useFastClick off in mobileinit event: $(document).bind("mobileinit", function () {             $.mobile.useFastClick = false; });   vclick event is needed to support touch events to make the page changes to happen faster, and to perform the URL hiding. So you need to change something like this  $('btnShow').live("click", function (evt) {   To :  $('btnShow').live("vclick", function (evt) {     For more information : http://jquerymobile.com/test/docs/api/globalconfig.html   Here you can find full example in this case : <!DOCTYPE ><html xmlns="http://www.w3.org/1999/xhtml"><head>    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>    <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>    <script type="text/javascript">     //Here you need to use vclick instead of click event         $('ul[id="MylistView"] a').live("vclick", function (evt) {            alert('list click');        });      </script>    <title></title></head><body>    <div id="FirstPage" data-role="page" data-theme="b">        <div data-role="header">            <h1>                Page Title</h1>        </div>        <div data-role="content">            <ul id="MylistView" data-role="listview" data-theme="g">                <li><a href="#SecondPage">Acura</a></li>                <li><a href="#SecondPage">Audi</a></li>                <li><a href="#SecondPage">BMW</a></li>            </ul>        </div>        <div data-role="footer">            <h4>                Page Footer</h4>        </div>    </div>    <div id="SecondPage" data-role="page" data-theme="b"   >        <div data-role="header" >            <h1>                Page Title</h1>        </div>        Second Page        <div data-role="footer">            <h4>                Page Footer</h4>        </div>    </div></body></html>     Hope that helps.

    Read the article

  • Rebind dymanically created forms after jQuery ajax response

    - by Pjack
    I'm kinda new to jQuery but understand it for the most part. My problem is that when my ajax call which refreshes the entire div is done, all my dynamically created forms don't work. If you try and submit them, the event doens't work properly and just tries to do a normal form submit. I have all the other items such as links bound using the .live() which seem to work great. Just the form dies. How do I rebind the dynamically created forms after the ajax call? They all have id of formname_id. I tried to use bind but it doesn't work as below. Any help is appreciated. Here is the code jQuery(document).ready(function(){ jQuery("form[id^='commentform_']").each(function(){ var id = parseInt(this.id.replace("commentform_", "")); jQuery(this).bind('submit', function(e) { var action = jQuery('#action_' + id).attr('value'); var act_id = ('1'); jQuery.ajax({ type: "POST", url: "ajax/modify.php", data: "action="+ action +"& act_id="+ act_id, success: function(response){ jQuery('#CommentsContainer_' + id).html(response); jQuery('#commentform_' + id)[0].reset(); } }); return false; }); }); });

    Read the article

  • jquery ui datepicker is huge

    - by iggnition
    Hi, im trying to add a datepicker to my symfony application and i got it working, but the size of the datepicker is about 3 times bigger than normal (on the demo page). I have not edited any CSS, i just used the default ui lightness theme no modifications. Does anybody have any idea why the size is blown up so big? CSS: http://paste2.org/p/835414 tough i doubt that will be very usefull.

    Read the article

  • multiple droppable

    - by Sune
    Ive have multiple droppable divs (which all have the same size) and one draggable div. The draggable div is 3 times bigger than one droppable. When I drag the draggable div on the droppables divs I want to find which droppable has been affeckted. My code looks like this: $(function () { $(".draggable").draggable({ drag: function (event, ui) { } }); $(".droppable").droppable({ drop: function (event, ui) { alert(this.id); } }); }); the html <div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div0" class="droppable"> drop in me1! </div> <div style="height:100px; width:200px; border-bottom:1px solid red;" id="Div1" class="droppable"> drop in me2! </div> <div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div2" class="droppable"> drop in me2! </div> <div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div3" class="droppable"> drop in me2! </div> <div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div4" class="droppable"> drop in me2! </div> <div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div5" class="droppable"> drop in me2! </div> <div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div6" class="droppable"> drop in me2! </div> <div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div7" class="droppable"> drop in me2! </div> <div class="draggable" id="drag" style="height:300px; width:50px; border:1px solid black;"><span>Drag</span></div> But my alert only shows the first which my draggable div (Div0) hits, how can I find the missing (Div1 and Div2), which also is affeckted?? Here's a guy with the same problem : http://forum.jquery.com/topic/drop-onto-multiple-droppable-elements-at-once

    Read the article

  • Setting Tab Order on UI Elements in jQuery Dialog

    - by McNamron
    Is there a way to specify the tab order of the elements within a jQuery Dialog which itself contains an Accordion? The dialog also specifies one button in the buttons options. For accessibility, we need to be able to tab through the accordion panes, the form elements in each accordion, the button in the buttons options, and the close icon of the dialog itself, but tabbing seems to be skipping over the button in the buttons options, and I can't find any resource that has a resolution for this sort of problem.

    Read the article

  • jquery ui dialog button

    - by mike
    Hello, With a jQuery UI dialog, I need to be able to set tooltips on buttons... I have the following code: buttons: { 'My Button' : function(e) { $(e.target).mouseover(function() { alert('test'); }); } This allows me to do something on "mouseover" but only once the button has been clicked. What do I need to do in order to make this function before the button has been clicked? Thanks

    Read the article

  • Swapping two jQuery draggable list items not working properly (with jsFiddle example)

    - by Tony_Henrich
    The minimalist working example below swaps the two boxes when box 'one' is dragged and dropped on box 'two'. The problem is that when box 'one' is dropped, its style has 'top' & 'left' values causing it to be placed away from where it should drop. Its class includes 'ui-draggable-dragging'. It seems the top & left values are related to the amount the elements were dragged before the drop. And the dragging was 'interrupted' hence the residual 'ui-draggable-dragging' class? What am I missing to make the swap work seamlessly? full jsfiddle example here <html> <head> <script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="includes/jquery-ui-1.8.2.custom.min.js"></script> <script type="text/javascript"> jQuery.fn.swapWith = function(to) { return this.each(function() { var copy_to = $(to).clone(true); var copy_from = $(this).clone(true); $(to).replaceWith(copy_from); $(this).replaceWith(copy_to); }); }; $(document).ready(function() { options = {revert: true}; $("li").draggable(options) $('#wrapper').droppable({ drop: function(event, ui) { $(ui.draggable).swapWith($('#two')); } }); }); </script> </head> <body> <form> <ul id="wrapper"> <li id='one'> <div style="width: 100px; height: 100px; border: 1px solid green"> one<br /></div> </li> <li id='two'> <div style="width: 110px; height: 110px; border: 1px solid red"> two<br /></div> </li> </ul> <br /> </form> </body> </html>

    Read the article

  • how to avoid jQuery UI draggable from also triggering click event

    - by James Tauber
    A have a large div (a map) that is draggable via jQuery UI draggable. The div has child divs which are clickable. My problem is that if you drag the map, on mouse up, the click event is fired on whatever child div you started the drag from. How do I stop the mouse up from triggering the click event if its part of a drag (as opposed to someone just clicking without a drag, in which case the click event is desired).

    Read the article

  • jQuery tools modal overlay display problem in IE6-8

    - by Michael Stone
    I'm trying to enable the overlay to be modal. It works perfectly fine in FireFox, but the window object is behind the mask when it becomes modal. This prevents any interaction with it and the page is actually useless. I've tried debugging this for a while and can't figure it out. Here is a link to the example on their site: http://flowplayer.org/tools/demos/overlay/modal-dialog.html $.fn.cfwindow = function(btnEvent,modal,draggable){ //error checking if(btnEvent == ""){ alert('Error in window :\n Please provide an id that instantiates the window. '); } if(!modal && !draggable){ $('#'+btnEvent+'[rel]').overlay(); $('#content_overlay').css('cursor','default'); } if(!modal && draggable){ $('#'+btnEvent+'[rel]').overlay(); $('#content_overlay').css('cursor','move'); $('#custom').draggable(); } if(modal){ $('#'+btnEvent+'[rel]').overlay({ // some mask tweaks suitable for modal dialogs mask: { color: '#646464', loadSpeed: 200, opacity: 0.6 }, closeOnClick: false }); $('#content_overlay').css('cursor','default'); //$('#custom').addClass('modal'); } }; That's what I'm referencing when I call through: <script type="text/javascript"> $(document).ready(function(){ $(document).pngFix(); var modal = <cfoutput>#attributes.modal#; var drag = #attributes.draggable#; var btn = '#attributes.selector#'; var src = '#attributes.source#'; var wid = '#attributes.width#'; $('##custom').width(parseInt(wid)); $('div##load_content').load(src); $('##custom').cfwindow(btn,modal,drag,wid); }); </script> CSS for the modal: <style type="text/css"> .modal { display:none; text-align:left; background-color:#FFFFFF; -moz-border-radius:6px; -webkit-border-radius:6px; } </style> Exclude the and the additional pound signs, IE. "##". Screen shot of the problem: http://twitpic.com/1tak06 Note: IE6 and IE8 have the same problem. Any help would be appreciated.

    Read the article

  • jquery ui autocomplete is changing my listbox

    - by oo
    I am trying to change my comboboxes to use autocomplete so i leverage the code listed here (which worked perfectly for my dropdowns) The issue is that i also on the same page have a listbox with the following code: <%= Html.ListBox("Cars", Model.BodyParts.Select( x => new SelectListItem { Text = x.Name, Value = x.Id, Selected = Model.CarsSelected.Any(y => y.Id == x.Id) } ))%> and it appears that the jquery ui code is changing this to a autocomplete dropdown as well (as opposed to keeping it as a multi select list box) any idea how to prevent this from happening?

    Read the article

  • target="_blank" link using jQuery UI Tabs

    - by Tim
    Hello, I would like to use my existing Jquery UI tabs to shoot my users off to a new browser window Unfortunately adding a target="_blank" to the jquery tab code doesn't work. Does anyone have any ideas? Here is the default Tab Code found here <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> <div id="tabs-2"> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> </div> <div id="tabs-3"> <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> </div> Thanks, Tim

    Read the article

  • Jquery UI Slider focus issue

    - by Webbo
    I have a problem with the jQuery UI Slider. The issue also appears on the demo. It is more obvious in Chrome - if you go to http://jqueryui.com/demos/slider/#steps and slide the slider, you'll not see anything wrong. If you then click "New Window" or go to (http://jqueryui.com/demos/slider/steps.html) to view the demo in a new window and try sliding the slider, you'll see the handle of the slider gets a focus box around it during dragging. I am having this problem and I cannot seem to fix it. Can anyone point me in the right direction?

    Read the article

  • jQuery UI tabs link for _blank webpage

    - by Megawolt
    Hi fellas, In our format some pages must be in Tabs that's ok. But some of them must be open in a blank page... So How can i do that. I have try ; $('#tablar #tabs ul li a').filter(function() { return $(this).attr('rel') == 'ex'; }) .unbind() .click(function(e) { location.href = this.href; e.preventDefault(); }); But not working...

    Read the article

  • background image for jquery ui dialog buttons

    - by mcgrailm
    is it possible to give a button a background image really i have an image that I want to use for a button and would be nice if they stayed in place like the default buttons. right now I just have them inside the dialog but the rest of the content is dynamic and I don't want them to disappear when the scroll bar appears

    Read the article

  • jQuery UI AutoComplete remote json response question

    - by Greg-J
    I was using geonames.org to autocomplete city and state but found it to be far too slow to be reliable. My code is as follows, and does work (wait about 10 seconds to see the autocomplete results) Old (working) code here: http://jsbin.com/umewo3/2/edit Now I am using YQL as they provide a much quicker response. The issue is that I don't seem to understand how to properly map the response. You can see I am sending a well formed request, and getting the response back - but I am somehow not dealing with the response properly. New (broken) code here: http://jsbin.com/aqoke3/2/edit Any and all help appreciated.

    Read the article

< Previous Page | 4 5 6 7 8 9 10 11 12 13 14 15  | Next Page >