Search Results

Search found 18482 results on 740 pages for 'jquery cycle'.

Page 6/740 | < Previous Page | 2 3 4 5 6 7 8 9 10 11 12 13  | Next Page >

  • jquery image slider for jquery mobile website

    - by Kaidul Islam Sazal
    I have found a fancy looking cubic jquery image slider for jquery mobile website here: http://m.jeep.com/en/mobile/vehicles/selector.html?app=bmo#&ui-state=dialog Now I want to use this slider in one of my project.But I didn't found any resource of this kind of slider for mobile website in online.Now I need to know if there are this kind of slider on the internet ? Or do you know any useful resource of image slider for mobile site (I didn't find any effective resource).

    Read the article

  • jquery cycle plugin using RSS feed images?

    - by Chris
    This could well be a terribly ignorant question, if so please forgive me: I'm using jquery cycle plugin to create an image rotator of recently posted images. Im using drupal 6.x and created an RSS feed of the recent images using the views module. I have no idea how to connect the two. Any suggestions? I have a feeling an RSS feed might not be the best way to go about this, but it's all I could come up with. Thanks for the help.

    Read the article

  • Annoying Bug in banner cycle

    - by Davemof
    I have created a rotating banner script for a new site I'm developing View banner here(it rotates every 10 seconds) Unfortunately to the transition seems to be a biut buggy, and the image will fade out, show the same image again and then fade in the new one. I think I have made a simple error somewhere, but can't figure out where it is. the code used to cycle the banners is: In document ready: if ($('.home').length > 0){ $('<img width="100%" />').attr('src', '/assets/img/backgrounds/home/hero'+homecount+'.jpg').load(function(){ $('.hero').append( $(this) ); $('.hero img').fadeIn('medium').delay(10000).fadeOut('slow', loopImages); setHeroHeight(); }); } Outside document ready: function loopImages(){ homecount = homecount+1; if (homecount > 5){ homecount = 1; } $('.hero img') .attr('src', '/assets/img/backgrounds/home/hero'+homecount+'.jpg') .load(function(){ $('.hero img').fadeIn('fast')}).delay(10000).fadeOut('slow', loopImages); } Any help would be greatly appreciated Thanks Dave

    Read the article

  • jQuery Cycle plugin pagerAnchorBuilder images becoming undefined

    - by Casey Becking
    I have a slideshow built in flash that I want to mimic in jQuery. The slide show uses the images from the slideshow as the pager numbers. The problem im having is once i apply links to the slideshow images the pagerAnchorBuilder image returns an undefined for the src of the image. Javascript - $(function() { $('#slideshow').before('<ul id="nav">').cycle({ fx: 'fade', timeout: 7000, pager: '#nav', pagerAnchorBuilder: function(idx, slide) { return '<li><a href="#"><img src="' + slide.src + '" width="100" height="60" /></a></li>'; } }); }); HTML - <div id="slideshow" class="pics"> <a href="http://google.com"><img src="home_1.jpg" width="1000" height="600" /></a> <a href="http://google.com"><img src="home_2.jpg" width="1000" height="600" /></a> <a href="http://google.com"><img src="home_3.jpg" width="1000" height="600" /></a> <a href="http://google.com"><img src="home_4.jpg" width="1000" height="600" /></a> <a href="http://google.com"><img src="home_5.jpg" width="1000" height="600" /></a> </div> If i remove the href's from the slideshow the images in the pager show up without issues. Im not sure if this is a bug or something i need to find a fix for?

    Read the article

  • Client-side templating frameworks to streamline using jQuery with REST/JSON

    - by Tauren
    I'm starting to migrate some html generation tasks from a server-side framework to the client. I'm using jQuery on the client. My goal is to get JSON data via a REST api and use this data to populate HTML into the page. Right now, when a user on my site clicks a link to My Projects, the server generates HTML like this: <dl> <dt>Clean Toilet</dt> <dd>Get off your butt and clean this filth!</dd> <dt>Clean Car</dt> <dd>I think there's something growing in there...</dd> <dt>Replace Puked on Baby Sheets</dt> </dl> I'm changing this so that clicking My Projects will now do a GET request that returns something like this: [ { "name":"Clean Car", "description":"I think there's something growing in there..." }, { "name":"Clean Toilets", "description":"Get off your butt and clean this filth!" }, { "name":"Replace Puked on Baby Sheets" } ] I can certainly write custom jQuery code to take that JSON and generate the HTML from it. This is not my question, and I don't need advice on how to do that. What I'd like to do is completely separate the presentation and layout from the logic (jquery code). I don't want to be creating DL, DT, and DD elements via jQuery code. I'd rather use some sort of HTML templates that I can fill the data in to. These templates could simply be HTML snippets that are hidden in the page that the application was loaded from. Or they could be dynamically loaded from the server (to support user specific layouts, i18n, etc.). They could be displayed a single time, as well as allow looping and repeating. Perhaps it should support sub-templates, if/then/else, and so forth. I have LOTS of lists and content on my site that are presented in many different ways. I'm looking to create a simple and consistent way to generate and display content without creating custom jQuery code for every different feature on my site. To me, this means I need to find or build a small framework on top of jQuery (probably as a plugin) that meets these requirements. The only sort of framework that I've found that is anything like this is jTemplates. I don't know how good it is, as I haven't used it yet. At first glance, I'm not thrilled by it's template syntax. Anyone know of other frameworks or plugins that I should look into? Any blog posts or other resources out there that discuss doing this sort of thing? I just want to make sure that I've surveyed everything out there before building it myself. Thanks!

    Read the article

  • jQuery UI datepicker performance

    - by Richard Ev
    I have a textbox on my web page that is used to specify a date, so I'd like to use the jQuery DatePicker. However, most of my users are locked into using IE6 and the performance of the jQuery DatePicker is a little sluggish in this browser. Can anyone recommend an alternate JavaScript date picker, or any means of improving the display performance of the jQuery DatePicker?

    Read the article

  • jquery pagination

    - by user295189
    We are using jquery for pagination. We are pulling millions of records from the database and then th jquery does the pagination on the front end. that is a very slow process. Can someone advice us of a solution in php and jquery where we pull 50 records at a time? Thanks

    Read the article

  • How to get jQuery draggable elements scroll with mb.imageNavigator

    - by bulltorious
    I am using jQuery mb.imageNavigator (1.8) from http://pupunzi.open-lab.com/mb-jquery-components/mb-imagenavigator/ to implements a Risk type game adjucation system. Using the imageNavigator plugin I am able to scroll around a large game map of the world. My issue is when I declare some elements as draggable and drag them onto the map image, their location does not stay relative to where in the picture I put them. They just stay fixed on the screen no matter where I scroll. Does anyone know how to make the the draggable elements scroll with the image? Matteo posts about "you can add an additional content layer that overlay image and moves with it" and posts an example, but I can't make it work. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ` <head> <script type="text/jscript" src="lib/jquery/jquery-1.3.2.js"> </script> <script type="text/jscript" src="lib/jquery/jquery-ui-1.7.2.custom.min.js"> </script> <script type="text/jscript" src="lib/utilities/mbImgNav.min.js_0.js"> </script> <script type="text/jscript" src="lib/utilities/start.js"> </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> </head> <body> <div id="AdamsAshTray" style="float:right; background-color:red; z-index:999"> test test test </div> <div id="navArea"> <div imageUrl="someimage" navPosition="BR" navWidth="100" style="display:none;" class="imagesContainer"> <span class="title">zuccheriera</span> <div class="description"> <STRONG>description1</STRONG> </div> </div> </div> </body> $(document).ready(function(){ $("#navArea").imageNavigator({ areaWidth:1820, areaHeight:1000, draggerStyle: "1px dotted red", navOpacity: .8 }) $("#AdamsAshTray").draggable({ grid: [20,20] }); })`

    Read the article

  • How can I get jQuery validation plugin Ketchup to stop an Ajax form submission when validation fails?

    - by Marshall Sontag
    I'm using Ruby on Rails, Formtastic gem, jQuery and ketchup to validate my form. I'm submitting the form created by Formtastic inside a modal box using ajax: <% semantic_form_remote_for @contact_form, :url => '/request/contact' do |f| %> I have a validation plugin verifying the fields on the form: $(document).ready(function() { $("#new_contact_form").ketchup(); }); The problem is that semantic_form_remote_for generates an onSubmit ajax request that the jQuery validation plugins won't prevent, since it's not a normal form submission. One question on stackoverflow suggests using :condition on the remote form declaration to fire a javascript function, but I can't do that since I'm not using a function, but rather relying on a jQuery handler. I also tried putting ketchup within a submit event handler: $(document).ready(function() { $("#new_contact_form").submit(function() { $('#new_contact_form').ketchup(); }); }); No luck. Form still submits. I also tried using the beforeSend option of jQuery.ajax: $(document).ready(function() { jQuery.ajax( { beforeSend: function(){ $('#new_contact_form').ketchup(); } }); }); Validation fires off, but form is still submitted. I switched to jQuery Validation plugin just to see if it was due to some limitation in Ketchup. It turns out that Validation has a submitHandler option: $(document).ready(function() { $('#new_contact_form').validate({ submitHandler: function(form) { jQuery.ajax({ data:jQuery.param(jQuery('#new_contact_form').serializeArray()), dataType:'script', type:'post', url:'/request/contact' }); return false; } }); }); This works when I use a regular semantic_form_for instead of semantic_form_remote_for, but alas, I would rather use Ketchup. Is Ketchup just woefully lacking? Am I forced to use jQuery Validation?

    Read the article

  • jQuery - draggable images on iPad / iPhone - how to integrate event.preventDefault();?

    - by Tim
    Hello! I use jQuery, jQuery UI and jQuery mobile to build a web application for iPhone / iPad. Now I create images and they should be draggable, so I did this: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Drag - Test</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script> </head> <body> <div> <div style="width:500px;height:500px;border:1px solid red;"> <img src="http://upload.wikimedia.org/wikipedia/en/thumb/9/9e/JQuery_logo.svg/200px-JQuery_logo.svg.png" class="draggable" alt="jQuery logo" /> <img src="http://upload.wikimedia.org/wikipedia/en/a/ab/Apple-logo.png" class="draggable" alt="Apple Inc. logo" /> </div> </div> </body> <script type="text/javascript"> $(document).ready(function() { $(".draggable").draggable(); }); </script> </html> Here you can see the live example: http://jsbin.com/igena4/ The problem is, that the whole page want to scroll. I searched in Apple's HTML5 examples and found this to prevent the scrolling of the page, so that the image is draggable: ... onDragStart: function(event) { // stop page from panning on iPhone/iPad - we're moving a note, not the page event.preventDefault(); ... } But the problem is for me, how can I include this into my jQuery? Where do I get event? Best Regards.

    Read the article

  • How to display unique success messages on jquery form validation

    - by mastah
    Hi guys, hope you can help me on this one, I'm currently using this: jQuery plugin:validation (Homepage) I've been reading related questions here, but this one is the closest get. http://stackoverflow.com/questions/1863448/jquery-validation-on-success from the plugin's documentation http://docs.jquery.com/Plugins/Validation/validate#toption success String, Callback If specified, the error label is displayed to show a valid element. If a String is given, its added as a class to the label. If a Function is given, its called with the label (as a jQuery object) as its only argument. That can be used to add a text like "ok!". Currently I'm only object given to me is the label, and I can only add text to it. Now what I want is to have unique success message. For example: username field will have a success message: 'username okay!' email = 'email seems right' something along those lines, instead of displaying just one generic success message on all the fields. Thanks in advanced :)

    Read the article

  • jQuery show submit button on input field click

    - by Pjack
    Hi, I'm trying to have a comment input field that will show the submit button on a dynamically created form when you click on the input field. Similar to how facebook comments work. When you click on the input field the submit button appears and when you click off it disappears. All the comment input id's are comment_1 etc and the submit button id's are submit_1 etc. I've tried this, jQuery("#[id^='comment_']").live('click',function(event){ if(jQuery("#[id^='comment_']").val() == ""){ jQuery("#[id^='submit_']").hide(); } else { jQuery("#[id^='submit_']").show(); } }); And that won't work for some reason. Any suggestion or how it can be accomplished would be great.

    Read the article

  • JQuery Mobile Code Snippets 1

    - by Yousef_Jadallah
     I want to share with you some important codes that you may need during JQuery Mobile development.These codes are tested on Alpha 4 version. Beta 1 has been released before two days, Therefore I will test them in my current project and let you know if there is any changes : 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;}    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;} Show and hide back button in your Application    $(document).bind("mobileinit", function () {           $.mobile.page.prototype.options.addBackBtn = true;        });     Customizing the back button text $(document).bind("mobileinit", function () {$.mobile.page.prototype.options.backBtnText = "previous";});       Hide "Close button" for dialog programatically:   $('[data-role=dialog]div[id="YourDiaogdivID"]').live('pagecreate', function (event) {     $("a[data-icon='delete']").hide();          });  Change Select option element index:      var myselect = $("select#foo");       myselect[0].selectedIndex = 0; //The new index        myselect.selectmenu("refresh"); //uset this line of code after any updating on the select element      Change Select optoin elemetn text value:    $("select#foo").parent().contents().children('.ui-btn-text').text('Your Text Here');    Refreshing a checkbox    $("select#foo").parent().contents().children('.ui-btn-text').text('Your Text Here');     Hide select option element  $('#foo').parent().hide();     Hide and Show Page Loading Message :  $.mobile.pageLoading(); //Show $.mobile.pageLoading(true); //hide            overriding $.mobile.loadingMessage  $(document).bind("mobileinit", function () {    $.mobile.loadingMessage = 'My Loading Message';    });    Hide and Show jQuery-Mobile-Themed-DatePicker    $(".ui-datepicker").hide();  $(".ui-datepicker").show();       Build your Custom Loading Message :           $('#CustomeLoadingMessage').hide();//Hide the div               $('# CustomeLoadingMessage').ajaxStart(function () {                $(this).show();            });             $('# CustomeLoadingMessage').ajaxStop(function () {                $(this).hide();            });   I wil publish other important codes soon.Hope that helps.

    Read the article

  • Ajax Control Toolkit Now Supports jQuery

    - by Stephen.Walther
    I’m excited to announce the September 2013 release of the Ajax Control Toolkit, which now supports building new Ajax Control Toolkit controls with jQuery. You can download the latest release of the Ajax Control Toolkit from http://AjaxControlToolkit.CodePlex.com or you can install the Ajax Control Toolkit directly within Visual Studio by executing the following NuGet command: The New jQuery Extender Base Class This release of the Ajax Control Toolkit introduces a new jQueryExtender base class. This new base class enables you to create Ajax Control Toolkit controls with jQuery instead of the Microsoft Ajax Library. Currently, only one control in the Ajax Control Toolkit has been rewritten to use the new jQueryExtender base class (only one control has been jQueryized). The ToggleButton control is the first of the Ajax Control Toolkit controls to undergo this dramatic transformation. All of the other controls in the Ajax Control Toolkit are written using the Microsoft Ajax Library. We hope to gradually rewrite these controls as jQuery controls over time. You can view the new jQuery ToggleButton live at the Ajax Control Toolkit sample site: http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ToggleButton/ToggleButton.aspx Why are we rewriting Ajax Control Toolkits with jQuery? There are very few developers actively working with the Microsoft Ajax Library while there are thousands of developers actively working with jQuery. Because we want talented developers in the community to continue to contribute to the Ajax Control Toolkit, and because almost all JavaScript developers are familiar with jQuery, it makes sense to support jQuery with the Ajax Control Toolkit. Also, we believe that the Ajax Control Toolkit is a great framework for Web Forms developers who want to build new ASP.NET controls that use JavaScript. The Ajax Control Toolkit has great features such as automatic bundling, minification, caching, and compression. We want to make it easy for ASP.NET developers to build new controls that take advantage of these features. Instantiating Controls with data-* Attributes We took advantage of the new JQueryExtender base class to change the way that Ajax Control Toolkit controls are instantiated. In the past, adding an Ajax Control Toolkit to a page resulted in inline JavaScript being injected into the page. For example, adding the ToggleButton control to a page injected the following HTML and script: <input id="ctl00_SampleContent_CheckBox1" name="ctl00$SampleContent$CheckBox1" type="checkbox" checked="checked" /> <script type="text/javascript"> //<![CDATA[ Sys.Application.add_init(function() { $create(Sys.Extended.UI.ToggleButtonBehavior, {"CheckedImageAlternateText":"Check", "CheckedImageUrl":"ToggleButton_Checked.gif", "ImageHeight":19, "ImageWidth":19, "UncheckedImageAlternateText":"UnCheck", "UncheckedImageUrl":"ToggleButton_Unchecked.gif", "id":"ctl00_SampleContent_ToggleButtonExtender1"}, null, null, $get("ctl00_SampleContent_CheckBox1")); }); //]]> </script> Notice the call to the JavaScript $create() method at the bottom of the page. When using the Microsoft Ajax Library, this call to the $create() method is necessary to create the Ajax Control Toolkit control. This inline script looks pretty ugly to a modern JavaScript developer. Inline script! Horrible! The jQuery version of the ToggleButton injects the following HTML and script into the page: <input id="ctl00_SampleContent_CheckBox1" name="ctl00$SampleContent$CheckBox1" type="checkbox" checked="checked" data-act-togglebuttonextender="imageWidth:19, imageHeight:19, uncheckedImageUrl:'ToggleButton_Unchecked.gif', checkedImageUrl:'ToggleButton_Checked.gif', uncheckedImageAlternateText:'I don&#39;t understand why you don&#39;t like ASP.NET', checkedImageAlternateText:'It&#39;s really nice to hear from you that you like ASP.NET'" /> Notice that there is no script! There is no call to the $create() method. In fact, there is no inline JavaScript at all. The jQuery version of the ToggleButton uses an HTML5 data-* attribute instead of an inline script. The ToggleButton control is instantiated with a data-act-togglebuttonextender attribute. Using data-* attributes results in much cleaner markup (You don’t need to feel embarrassed when selecting View Source in your browser). Ajax Control Toolkit versus jQuery So in a jQuery world why is the Ajax Control Toolkit needed at all? Why not just use jQuery plugins instead of the Ajax Control Toolkit? For example, there are lots of jQuery ToggleButton plugins floating around the Internet. Why not just use one of these jQuery plugins instead of using the Ajax Control Toolkit ToggleButton control? There are three main reasons why the Ajax Control Toolkit continues to be valuable in a jQuery world: Ajax Control Toolkit controls run on both the server and client jQuery plugins are client only. A jQuery plugin does not include any server-side code. If you need to perform any work on the server – think of the AjaxFileUpload control – then you can’t use a pure jQuery solution. Ajax Control Toolkit controls provide a better Visual Studio experience You don’t get any design time experience when you use jQuery plugins within Visual Studio. Ajax Control Toolkit controls, on the other hand, are designed to work with Visual Studio. For example, you can use the Visual Studio Properties window to set Ajax Control Toolkit control properties. Ajax Control Toolkit controls shield you from working with JavaScript I like writing code in JavaScript. However, not all developers like JavaScript and some developers want to completely avoid writing any JavaScript code at all. The Ajax Control Toolkit enables you to take advantage of JavaScript (and the latest features of HTML5) in your ASP.NET Web Forms websites without writing a single line of JavaScript. Better ToolkitScriptManager Documentation With this release, we have added more detailed documentation for using the ToolkitScriptManager. In particular, we added documentation that describes how to take advantage of the new bundling, minification, compression, and caching features of the Ajax Control Toolkit. The ToolkitScriptManager documentation is part of the Ajax Control Toolkit sample site and it can be read here: http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ToolkitScriptManager/ToolkitScriptManager.aspx Other Fixes This release of the Ajax Control Toolkit includes several important bug fixes. For example, the Ajax Control Toolkit Twitter control was completely rewritten with this release. Twitter is in the process of retiring the first version of their API. You can read about their plans here: https://dev.twitter.com/blog/planning-for-api-v1-retirement We completely rewrote the Ajax Control Toolkit Twitter control to use the new Twitter API. To take advantage of the new Twitter API, you must get a key and access token from Twitter and add the key and token to your web.config file. Detailed instructions for using the new version of the Ajax Control Toolkit Twitter control can be found here: http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Twitter/Twitter.aspx   Summary We’ve made some really great changes to the Ajax Control Toolkit over the last two releases to modernize the toolkit. In the previous release, we updated the Ajax Control Toolkit to use a better bundling, minification, compression, and caching system. With this release, we updated the Ajax Control Toolkit to support jQuery. We also continue to update the Ajax Control Toolkit with important bug fixes. I hope you like these changes and I look forward to hearing your feedback.

    Read the article

  • jQuery Autocomplete using extraParams to pass additional GET variables

    - by paperclip
    I am referring specifically to the jQuery Autocomplete v1.1 plugin by Jörn Zaefferer [source: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/] as there seems to be quite a few variations of this plugin. I'm trying to pass additional parameters to the server when the user starts typing because I have multiple fields that I want autocomplete to provide suggestions for. In addition to the query, I want to send the input name attribute to the server but I can't seem to use $(this).attr('name') within the extraParams. My jQuery: $('.ajax-auto input').autocomplete('search.php', { extraParams: { search_type: function(){ return $(this).attr('name'); } } }) This is my HTML. <form method="post" action="#" id="update-form" autocomplete="off"> <ol> <li class="ajax-auto"> <label for="form-initials">Initials</label> <input type="text" id="form-initials" name="initials" /> </li> <li class="ajax-auto"> <label for="form-company">Company</label> <input type="text" id="form-company" name="company" /> </li> </ol> </form> Any suggestions?

    Read the article

  • Help with Jquery + Masonry Plugin: How to expand/collapse boxes to reveal content

    - by Jam
    I'm using the masonry jquery plugin on a project: (http://desandro.com/resources/jquery-masonry) Basically I have a set of boxes (thumbnails) in a grid. When one is clicked, I want it to expand to a larger size to show more content (additional images and text). I'm struggling with how to make the thumbnail dissappear and then have new content appear in the expanded box. I don't know how to make the new content appear or where to store it on my page--and it needs to have a close button? The creator of the plugin gave me a quick tip for the expanding part, but the code I'm using has a set height and width and I want them to be variable depending on how much content is in the expanded state. Here's my jquery code so far: http://pastie.org/1002101 This is a similar example of the behaviour I want to achieve (except my boxes will have have varying expanded sizes): (http://www.learnsomethingeveryday.co.uk) You'll also notice from that example that it only allows 1 box to be expanded at a time--I would also like to have that functionality. Sorry for all the questions--I'm pretty new to jquery, any help would be amazing!

    Read the article

  • Formatting Parameters for Ajax POST request to Rails Controller - for jQuery-UI sortable list

    - by Hung Luu
    I'm using the jQuery-UI Sortable Connected Lists. I'm saving the order of the connected lists to a Rails server. My approach is to grab the list ID, column ID and index position of each list item. I want to then wrap this into an object that can be passed as a parameter back to the Rails Controller to be saved into the database. So ideally i'm looking to format the parameter like this: Parameters: {"Activity"=>[{id:1,column:2,position:1},{id:2,column:2,position:2} ,...]} How do I properly format my parameters to be passed in this Ajax POST request? Right now, with the approach below, I'm passing on Parameters: {"undefined"=>""} This is my current jQuery code (Coffeescript) which doesn't work: jQuery -> $('[id*="day"]').sortable( connectWith: ".day" placeholder: "ui-state-highlight" update: (event, ui) -> neworder = new Array() $('[id*="day"] > li').each -> column = $(this).attr("id") index = ui.item.index() + 1 id = $("#" + column + " li:nth-child(" + index + ") ").attr('id') passObject={} passObject.id = id passObject.column = column passObject.index = index neworder.push(passObject) alert neworder $.ajax url: "sort" type: "POST" data: neworder ).disableSelection() My apologies because this seems like a really amateur question but I'm just getting started with programming jQuery and Javascript.

    Read the article

  • JQuery > XSLT Plugin > Component returned failure code: 0x80600011 [nsIXSLTProcessorObsolete.transfo

    - by Sean Ochoa
    So, I'm using the XSLT plugin for JQuery, and here's my code: function AddPlotcardEventHandlers(){ // some code } function reportError(exception){ alert(exception.constructor.name + " Exception: " + ((exception.name) ? exception.name : "[unknown name]") + " - " + exception.message); } function GetPlotcards(){ $("#content").xslt("../xml/plotcards.xml","../xslt/plotcards.xsl", AddPlotcardEventHandlers,reportError); } Here's the modified jquery plugin. I say that its modified because I've added callbacks for success and error handling. /* * jquery.xslt.js * * Copyright (c) 2005-2008 Johann Burkard (<mailto:[email protected]>) * <http://eaio.com> * * Permission is hereby granted, free of charge, to any person obtaining a * copy of this software and associated documentation files (the "Software"), * to deal in the Software without restriction, including without limitation * the rights to use, copy, modify, merge, publish, distribute, sublicense, * and/or sell copies of the Software, and to permit persons to whom the * Software is furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included * in all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN * NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, * DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR * OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE * USE OR OTHER DEALINGS IN THE SOFTWARE. * */ /** * jQuery client-side XSLT plugins. * * @author <a href="mailto:[email protected]">Johann Burkard</a> * @version $Id: jquery.xslt.js,v 1.10 2008/08/29 21:34:24 Johann Exp $ */ (function($) { $.fn.xslt = function() { return this; } var str = /^\s*</; if (document.recalc) { // IE 5+ $.fn.xslt = function(xml, xslt, onSuccess, onError) { try{ var target = $(this); var change = function() { try{ var c = 'complete'; if (xm.readyState == c && xs.readyState == c) { window.setTimeout(function() { target.html(xm.transformNode(xs.XMLDocument)); if (onSuccess) onSuccess(); }, 50); } }catch(exception){ if (onError) onError(exception); } }; var xm = document.createElement('xml'); xm.onreadystatechange = change; xm[str.test(xml) ? "innerHTML" : "src"] = xml; var xs = document.createElement('xml'); xs.onreadystatechange = change; xs[str.test(xslt) ? "innerHTML" : "src"] = xslt; $('body').append(xm).append(xs); return this; }catch(exception){ if (onError) onError(exception); } }; } else if (window.DOMParser != undefined && window.XMLHttpRequest != undefined && window.XSLTProcessor != undefined) { // Mozilla 0.9.4+, Opera 9+ var processor = new XSLTProcessor(); var support = false; if ($.isFunction(processor.transformDocument)) { support = window.XMLSerializer != undefined; } else { support = true; } if (support) { $.fn.xslt = function(xml, xslt, onSuccess, onError) { try{ var target = $(this); var transformed = false; var xm = { readyState: 4 }; var xs = { readyState: 4 }; var change = function() { try{ if (xm.readyState == 4 && xs.readyState == 4 && !transformed) { var processor = new XSLTProcessor(); if ($.isFunction(processor.transformDocument)) { // obsolete Mozilla interface resultDoc = document.implementation.createDocument("", "", null); processor.transformDocument(xm.responseXML, xs.responseXML, resultDoc, null); target.html(new XMLSerializer().serializeToString(resultDoc)); } else { processor.importStylesheet(xs.responseXML); resultDoc = processor.transformToFragment(xm.responseXML, document); target.empty().append(resultDoc); } transformed = true; if (onSuccess) onSuccess(); } }catch(exception){ if (onError) onError(exception); } }; if (str.test(xml)) { xm.responseXML = new DOMParser().parseFromString(xml, "text/xml"); } else { xm = $.ajax({ dataType: "xml", url: xml}); xm.onreadystatechange = change; } if (str.test(xslt)) { xs.responseXML = new DOMParser().parseFromString(xslt, "text/xml"); change(); } else { xs = $.ajax({ dataType: "xml", url: xslt}); xs.onreadystatechange = change; } }catch(exception){ if (onError) onError(exception); }finally{ return this; } }; } } })(jQuery); And, here's my error msg: Object Exception: [unknown name] - Component returned failure code: 0x80600011 [nsIXSLTProcessorObsolete.transformDocument] Here's the info on the browser that I'm using for testing (with firebug v1.5.4 add-on installed): Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 I'm really not sure what to do about this.... any thoughts?

    Read the article

  • jQuery scrollTop not working in chrome but working in Firefox

    - by Maju
    I have used a scrollTop function in jquery for navigating to top. But strangely 'The smooth animated scroll' stopped working in safari and chrome(scrolling without smooth animation) after I made some changes. But it is working smoothly in Firefox. What could be wrong? Here is the jquery function i used, jQuery $('a#gotop').click(function() { $("html").animate({ scrollTop: 0 }, "slow"); //alert('Animation complete.'); //return false; }); HTML <a id="gotop" href="#">Go Top </a> CSS #gotop { Cursor: pointer; position: relative; float:right; right:20px; /*top:0px;*/ }

    Read the article

  • Listening and firing events with Javascript and maybe jQuery

    - by at
    In my Javascript and Flex applications, users often perform actions that I want other Javascript code on the page to listen for. For example, if someone adds a friend. I want my Javascript app to then call something like triggerEvent("addedFriend", name);. Then any other code that was listening for the "addedFriend" event will get called along with the name. Is there a built-in Javascript mechanism for handling events? I'm ok with using jQuery for this too and I know jQuery makes extensive use of events. But with jQuery, it seems that its event mechanism is all based around elements. As I understand, you have to tie a custom event to an element. I guess I can do that to a dummy element, but my need has nothing to do with DOM elements on a webpage. Should I just implement this event mechanism myself?

    Read the article

  • setting min date in jquery datepicker

    - by user1184777
    Hi i want to set min date in my jquery datepicker to (1999-10-25) so i tried the below code its not working. $(function () { $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd', showButtonPanel: true, changeMonth: true, changeYear: true, showOn: "button", buttonImage: "images/calendar.gif", buttonImageOnly: true, minDate: new Date(1999, 10 - 1, 25), maxDate: '+30Y', inline: true }); }); ** if i change the min year to above 2002 than it will work fine but if i specify min year less than 2002{like above eexample 1999} it will show only up to 2002.can someone help me. i am using jquery-1.7.1.min.js and jquery-ui-1.8.18.custom.min.js.

    Read the article

  • Extending a jquery plugins event callback

    - by Greg J
    I'm extending the functionality of a jquery plugin (foo) with another jquery plugin (bar). Essentially, the first plugin specifies an onReady(): var foo = $.foo({ onReady: function() { alert('foo'); }}); Foo is sent to bar as a parameter to bar: var bar = $.bar(foo); I want bar to be able to hook into foo's onReady event: (function($) { $.extend({ bar: function(foo) { var foo = foo; // How to do alert('bar') when foo.onready is called? } }); })(jQuery); I can override foo's onready event: foo.onready = function() { alert('bar'); } But I don't want to override it, I want to extend it so that I'll see both alerts when foo is ready. Thanks in advance!

    Read the article

  • jquery sortable problem with ie

    - by corroded
    i am using jquery to sort my lists and i have run into a dead end. First, I checked the jquery site if theirs work on ie7, thats great, it does. next, i checked mine without the styles(so there possibly wont be anything that's intercepting or affecting jquery stuff). but i still get this weird error in ie7 when you sort items in the inner list(i have nested lists) they overlap each other, destroying the layout. if you sort the contianer lists, they work fine! here's a jsfiddle of what i mean: http://jsfiddle.net/GDUpa/ note that if you drag demonstration one or two spots(in ie), it will overlap with the other links. BUT if you drag POC (it will select the whole thing including the links under it), it works fine! is something wrong with my markup?

    Read the article

  • jQuery Samples

    - by dwahlin
    Here are the jsfiddle samples that John Papa and I covered in our jQuery Fundamentals workshop at DevConnections last week. These were a few of the samples we wrote on the fly (so they’re not “perfect”) using http://jsfiddle.net and wanted to share. Additional jQuery samples covering selectors, DOM manipulation, Ajax techniques, as well as sample applications can be found here. You can also view the talks John gave at the conference here.  Code and slides from my talks can be found at the following links: Building the Account at a Glance ASP.NET MVC, EF Code First, HTML5, and jQuery Application Techniques, Strategies, and Patterns for Structuring JavaScript Code Getting Started Building Windows 8 HTML/JavaScript Metro Apps If you’re interested in learning more about jQuery check out my jQuery Fundamentals course at Pluralsight.com. Using the Data Function   Using Object Literals with jQuery   Using jQuery each() with string concatenation   Using on() to handle child events   jQuery - hover   jQuery - event handling variations   jQuery - Twitter (bind, append, appendTo, each, fadeOut, $.getJSON, callback, success, error, complete)r   jQuery - attr vs prop   jQuery - Simple selectors

    Read the article

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