Search Results

Search found 23364 results on 935 pages for 'jquery ui droppable'.

Page 515/935 | < Previous Page | 511 512 513 514 515 516 517 518 519 520 521 522  | Next Page >

  • TypeError when using v 0.8.1 of FLOT library, but no error with v. 0.7

    - by DanielAttard
    I need some help to figure out why I am getting an error when trying to create a simple graph using the jQuery FLOT library. When I reference version 0.7 of the FLOT library, the page renders correctly: http://attardpropertytax.ca/flot07.html But when I switch to version 0.8.1 of the FLOT library, the page returns an error saying: Uncaught TypeError: Cannot read property 'left' of null http://attardpropertytax.ca/flot81.html The HTML is the same for both pages, so I cannot figure out why the new version 0.8.1 of FLOT returns an error, but the old version 0.7 does not. Any ideas? I somehow stumbled across a work-around that managed to fix my problem. I'm nut sure why, but I had to comment-out the following two sections of code from the v. 0.8.1 FLOT library: This was the first spot: // If the grid is visible, add its border width to the offset for (var a in plotOffset) { if(typeof(options.grid.borderWidth) == "object") { plotOffset[a] += showGrid ? options.grid.borderWidth[a] : 0; } else { plotOffset[a] += showGrid ? options.grid.borderWidth : 0; } } And this was the second spot: if (isNaN(v) || v < axis.min || v > axis.max // skip those lying on the axes if we got a border || (t == "full" && ((typeof bw == "object" && bw[axis.position] > 0) || bw > 0) && (v == axis.min || v == axis.max))) continue; I'm sure eventually @DNS will be taking a look at this question and maybe he will be able to help me understand what is going wrong with my code. Thanks.

    Read the article

  • How do I select dynamic ids in this format?

    - by sjsc
    I'm trying to select dynamic ids when a user types something into the input fields. My app spits out the input fields in the following format: <input id="student_1_first_name" /> <input id="student_1_last_name" /> <input id="student_2_first_name" /> <input id="student_2_last_name" /> <input id="student_3_first_name" /> <input id="student_3_last_name" /> etc. For example, I tried doing this to select the end of the id string: <script type="text/javascript"> $(document).ready( function (){ $("input[id$=_first_name]").bind("keyup", run_some_function_here); run_some_function_here(); $("input[id$=_last_name]").bind("keyup", run_some_function_here); run_some_function_here(); } ); </script> When I do that, Jquery can't seem to select the input ids, so the functions don't run. Do you have any ideas on how I can select the ids correctly?

    Read the article

  • Creating sublines on Joomla menu items

    - by ploughansen
    In my toplevel menu items, I would like to make a subline for each item. I don't think it's possible to do by default, byt YooTheme has done it in many of their templates. The menu output look like this <div class="moduletable_menu"> <ul id="mainmenu" class="menu"> <li class="active item1" id="current"> <a href="URL_HIDDEN"> <span>Services</span> </a> </li> </ul> This basically outputs a one line menu item like so: Services What I would like to do is have a menu item like this: Services Service x, Service y, Service z For reference, have a look at the main menu on the YooTheme demo page. The way YooTheme does this, is using two pipes (||) as a linebreak, so in the Joomla backend you type "Services||Service x, Service y, Service z" as the menu title, and then there must be some fancy javascript that breaks this title into two spans, ready to be styled using css. Does anyone know of an easy way to code this? Please note that I am looking to build this feature into a custom template (ie. non-yootheme). Also note that I am not using MooTools, but Jquery instead.

    Read the article

  • Why do browsers encode special characters differently with ajax requests?

    - by Andrei Oniga
    I have a web application that reads the values of a few input fields (alphanumeric) and constructs a very simple xml that is passes to the server, using jQuery's $.ajax() method. The template for that xml is: <request> <session>[some-string]</session> <space>[some-string]</space> <plot>[some-string]</plot> ... </request> Sending such requests to the server when the inputs contain Finnish diacritical characters (such as ä or ö) raises a problem in terms of character encoding with different browsers. For instance, if I add the word Käyttötarkoitus" in one of the inputs, here's how Chrome and Firefox send EXACTLY the same request to the server: Chrome: <request> <session>{string-hidden}</session> <space>2080874</space> <plot>Käyttötarkoitus</plot> ... </request> FF 12.0: <request> <session>{string-hidden}</session> <space>2080874</space> <plot>Käyttötarkoitus</plot> ... </request> And here is the code fragment that I use to send the requests: $.ajax({ type: "POST", url: url, dataType: 'xml;charset=UTF-8', data: xml, success: function(xml) { // }, error: function(jqXHR, textStatus, errorThrown) { // } }); Why do I get different encodings and how do I get rid of this difference? I need to fix this problem because it's causing other on the server-side.

    Read the article

  • IE ignores added onclick attribute

    - by user357034
    The Jquery code below works ok with firefox, Safari, Opera but not with IE. I kinda know why this isn't working in IE after reading a lot about it but I do not know how to fix it. My understanding (I think) is that this method will assign a attribute of "onclick" in IE rather than an event method. Therefore it will not fire in IE and the href fires instead which in this case is "#" which is exactly what is happening. What is the correct way of adding the onclick event. <a id="product_photo_zoom_url" href="/PhotoGallery.asp?ProductCode=9857%2D116%2D003" title="9857-116-003 Ignition box"><img id="product_photo" src="/v/vspfiles/photos/9857-116-003-2T.jpg" border="0" alt="9857-116-003 Ignition box" /></a> <br /><a id="product_photo_zoom_url2" href="/PhotoGallery.asp?ProductCode=9857%2D116%2D003" title="9857-116-003 Ignition box"> <img src="/v/vspfiles/templates/100/images/buttons/btn_largerphoto.gif" border="0"></a> var global_URL_Encode_Current_ProductCode; var global_Config_ProductPhotosFolder; var global_Current_ProductCode; var titleattr = $("a#product_photo_zoom_url").attr("title"); var picurl='tb_show(titleattr, \'/PhotoDetails.asp?ShowDESC=N&ProductCode=\' + global_URL_Encode_Current_ProductCode + \'&TB_iframe=true&height=600&width=520\');return false;' $("a#product_photo_zoom_url").attr('onclick', picurl); $("a#product_photo_zoom_url").attr('href', '#'); $("a#product_photo_zoom_url2").attr('onclick', picurl); $("a#product_photo_zoom_url2").attr('href', '#');

    Read the article

  • Toggle image based on cookie value

    - by danit
    Im using a couple of JS functions to set a cookie named 'visible' with the value of either yes or no. Essentially Im using these values to decide if a <div> is visible or hidden. I've only just added the cookie, previously I had been using two images 1. Show 2. Hide as a button to hide and show the <div> like this: HTML: <img class="show" title="Show" alt="Show" src="images/show.png" /> <img class="hide" title="Hide" alt="Hide" src="images/hide.png" /> JQUERY: $("#tool").click(function() { $(".help").slideToggle(); $("#wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() { $("#tool img").toggle(); }); }); However I have now added the Cookie into the mix: $("#tool").click(function() { if(get_cookie('visible')== null) { set_cookie('visible','no'); } else { delete_cookie('visible'); } $(".help").slideToggle(); $("#wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() { $("#slider img").toggle(); }); }); So the .toggle() no longer matches the state of the <div> When the cookie value = no the show.png should be visible When the cookie value = yes then the hide.png should be visible Can anyone suggest how i can ammend this?

    Read the article

  • autocomplete: how do I avoid a duplicate search?

    - by dnagirl
    I use JQuery plugin autocomplete as a kind of dataset chooser. If the user chooses a value from the autocomplete lookup, the database is queried for the matching dataset. If the user types in a new value, the user can enter a new dataset. An issue arises when the user types in an existing value rather than choosing it from the autocomplete lookup. When this is done, the autocomplete .result() method is not called and no dataset is retrieved. To fix this I added a .blur(function(){$(this).search();}); to the input element. This fixed the original problem. Now I have the problem that .result() fires on selection from lookup AND on blur. I would like .result() to fire on selection from lookup OR on blur. How do I make that happen? Here is my code: $('#groupset').autocomplete('ajax/php/leeruns.php'); $('#groupset').result( function(event, data, formatted) { if(data){ $('#groupsetdesc').val(formatted); groups.load(data[1]); //retrieve matching dataset } else { $('#groupsetdesc').val(''); } } ).blur(function(){$(this).search();});

    Read the article

  • Making a button click and process using javascript with Asp.Net

    - by user944919
    I'm having two buttons and one button is hidden. Now when I click the visible button I need to do two things 1.Open Iframe. 2.Automatically make the 2nd Button(Hidden)to be clicked. When the second button is clicked I need to display the message on top of the IFrame which I have mentioned as function showStickySuccessToast() Now I am able to open IFrame but I'm unable to make the Hidden button clicked automatically. This is what I'm having: <script type="text/javascript"> $(document).ready(function(){ $("#<%=Button1.ClientID%>").click(function(event){ $('#<%=TextBox1.ClientID%>').change(function () { $('#various3').attr('href', $(this).val()); }); }); function showStickySuccessToast() { $().toastmessage('showToast', { text: 'Finished Processing!', sticky: false, position: 'middle-center', type: 'success', closeText: '', close: function () { } }); } }) </script> Here are my two buttons how I'm working with: <a id="various3" href="#"><asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="Button2_Click"/></a> <asp:Button ID="Button2" runat="server" Text="Button" Visible="False" OnClick="Button2_Click"/> And in the button2_Click event: Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click System.Web.UI.ScriptManager.RegisterClientScriptBlock(Page, GetType(Page), "Script", "showStickySuccessToast();", True) End Sub

    Read the article

  • Controller actions appear to be synchronous though on different requests?

    - by Oded
    I am under the impression that the below code should work asynchronously. However, when I am looking at firebug, I see the requests fired asynchronously, but the results coming back synchronously: Controller: [HandleError] public class HomeController : Controller { public ActionResult Status() { return Content(Session["status"].ToString()); } public ActionResult CreateSite() { Session["status"] += "Starting new site creation"; Thread.Sleep(20000); // Simulate long running task Session["status"] += "<br />New site creation complete"; return Content(string.Empty); } } Javascript/jQuery: $(document).ready(function () { $.ajax({ url: '/home/CreateSite', async: true, success: function () { mynamespace.done = true; } }); setTimeout(mynamespace.getStatus, 2000); }); var mynamespace = { counter: 0, done: false, getStatus: function () { $('#console').append('.'); if (mynamespace.counter == 4) { mynamespace.counter = 0; $.ajax({ url: '/home/Status', success: function (data) { $('#console').html(data); } }); } if (!mynamespace.done) { mynamespace.counter++; setTimeout(mynamespace.getStatus, 500); } } } Addtional information: IIS 7.0 Windows 2008 R2 Server Running in a VMWare virutual machine Can anyone explain this? Shouldn't the Status action be returning practically immediately instead of waiting for CreateSite to finish? Edit: How can I get the long running process to kick off and still get status updates?

    Read the article

  • How do I stop a page from unloading (navigating away) in JS?

    - by Natalie Downe
    Does anyone know how to stop a page from reloading or navigating away? jQuery(function($) { /* global on unload notification */ warning = true; if(warning) { $(window).bind("unload", function() { if (confirm("Do you want to leave this page") == true) { //they pressed OK alert('ok'); } else { // they pressed Cancel alert('cancel'); return false; } }); } }); I am working on an e-commerce site at the moment, the page that displays your future orders has the ability to alter the quantities of items ordered using +/- buttons. Changing the quantities this way this doesn't actually change the order itself, they have to press confirm and therefore committing a positive action to change the order. However if they have changed the quantities and navigate away from the page I would like to warn them they are doing so in case this is an accident, as the changed quantities will be lost if they navigate away or refresh the page. In the code above I am using a global variable which will be false by default (its only true for testing), when a quantity is changed I will update this variable to be true, and when they confirm the changes I will set it to false. If warning is true and the page is unloaded, I offer them a confirmation box, if they say no they would like to stay on this page I need to stop it from unloading. return false isn't working, it still lets the user navigate away (the alerts are there for debugging only) Any ideas?

    Read the article

  • Appending a function to an existing onclick event at page load

    - by tonsils
    Hi, I have the following html code that is pre written by the app I am using, which I do not have access to, i.e. <td align="center" class="shuttleControl"> <img src="/i/mydb/icons/shuttle_reload.png" onclick="g_Shuttlep_v61.reset();" alt="Reset" title="Reset"/> <img src="/i/mydb/icons/shuttle_last.png" onclick="g_Shuttlep_v61.move_all();" alt="Move All" title="Move All"/> <img src="/i/mydb/icons/shuttle_right.png" onclick="g_Shuttlep_v61.move();" alt="Move" title="Move" /> <img src="/i/mydb/icons/shuttle_left.png" onclick="g_Shuttlep_v61.remove();" alt="Remove" title="Remove" /> <img src="/i/mydb/icons/shuttle_first.png" onclick="g_Shuttlep_v61.remove_all();" alt="Remove All" title="Remove All" /> </td> Based on the above code, using jQuery, would it be possible that when the page finishes loading, search for the img src "shuttle_last.png" and append to it's onclick call, my own function get_Count(); ? That is, I would then see the following code when I do a view page source for this particular line, i.e.: <img src="/i/mydb/icons/shuttle_last.png" onclick="g_Shuttlep_v61.move_all();get_Count();" alt="Move All" title="Move All"/> Is this possible - if so, would really appreciate a code sample? Thanks.

    Read the article

  • Selecting an option with given value

    - by Maven
    I am trying to select a particular option from a select list depending on the value, I have following markup: <select name="class" id="class"> <option value="1">679460ED-0B15-4ED9-B3C8-A8C276DF1C82</option> <option value="2">B99BF873-7DF0-4E7F-95FF-3F1FD1A26139</option> <option value="3">1DCD5AD7-F57C-414</option> <option value="4">6B0170AA-F044-4F9C-8BB8-31A51E452CE4</option> <option value="5">C6A8B</option> <option value="6">1BBD6FA4-335A-4D8F-8681-DFED317B8052</option> <option value="7">727D71AB-F7D1-4B83-9D6D-6BEEAAB</option> <option value="8">BC4DE8A2-C864-4C7C-B83C-EE2450AF11B1</option> <option value="9">AIR CONDITIONING SYSTEM</option> <option value="10">POWER GENERATION SYSTEM</option> </select> <script> selectThisValue('#class',3); </script> in .js function selectThisValue(element,value) { console.log(value); var elem = $(element + ' option[value=' + value + ']'); console.log(elem); elem.attr("selected", "selected"); } Results for console.log are as follows: 3 [prevObject: i.fn.i.init[1], context: document, selector: "#class option[value=3]", jquery: "1.10.2", constructor: function…] But this is not working, no errors are given but nothing happens also. Please help identifying the where am I wrong.

    Read the article

  • Increment the number of times an article has been read

    - by r.sendecky
    I have a situation where I need to increase the number of time article has been read. Once someone opens an article it should be reflected in the database by incrementing number of reads by one. Simple. Sending POST request to the server increments the number of reads by one. The article in question is supplied via URL parameter. Doing it manually by typing the URL in a browser works as expected. So server side is not at fault. My problems start with the javascript side of it or rather jquery. I hook the event to the article link. So every time a user clicks on the article link it increments the number of reads like so: $('#list-articles .article-link').click(function(e){ var oid = $(this).parent().parent().attr('data-oid').toString(); //Get the article id $.post( "/articles/viewed/" + oid ); }); Now this does not work! Number is not increased. I don't prevent default action since I need the link to actually open and display the article. Now if I put an alert right after the post like this: $('#list-articles .article-link').click(function(e){ var oid = $(this).parent().parent().attr('data-oid').toString(); //Get the article id $.post( "/articles/viewed/" + oid ); alert(oid); }); This variant works. After I dismiss the alert window, the number is incremented. Why is this so?? How can I fix this to actually work without the alert event present?

    Read the article

  • JS: Object itteration fails

    - by Newbie
    Hello! In my JS, I have an object called box_object. It looks like this: ({ id:"3", text:"this is a box object", connection_parent:["1", "2"], connection_child:["5", "6"], connectiondata_child:{ 0:{id:"5", linepoint:"bottom"}, 1:{id:"6", linepoint:"bottom"}}, connectiondata_parent:{ 0:{id:"1", linepoint:"top"}, 1:{id:"2", linepoint:"top"}} }) Now, I want to add some position values to box_object.connectiondata_parent. Using jQuery I can use the .each() method. So I tried it, but it failed. In my function I do the following: $(box_object.connectiondata_parent).each(function(it, obj){ if(typeof(obj[it]) != "undefined" && obj[it].linepoint == "top"){ var point_position_top = new Object(); point_position_top.left = startingpoint_left; point_position_top.top = startingpoint_top; obj[it].position = point_position_top; }else if(typeof(obj[it]) != "undefined" && obj[it].linepoint == "bottom"){ var point_position_bottom = new Object(); point_position_bottom.left = startingpoint_left; point_position_bottom.top = startingpoint_bottom; obj[it].position = point_position_bottom; }else{} }); After the function my box_object looks like this: ({ id:"3", text:"this is third box", connection_parent:["1", "2"], connection_child:["5", "6"], connectiondata_child:{ 0:{id:"5", linepoint:"bottom"}, 1:{id:"6", linepoint:"bottom"}}, connectiondata_parent:{ 0:{id:"1", linepoint:"top", position:{left:500, top:104}}, 1:{id:"2", linepoint:"top"}} }) It seems it only writes the values to the first "value". Any Ideas why?

    Read the article

  • HREF link that targets nothing, does not want to use hash or void(0)

    - by Mattis
    I have a link that I want to be able to click to trigger a piece of jQuery code. Currently I have <a href="#" id="foo">Link</a> and $('#foo').click(function(){ // Do stuff }); which works well. But, I have always hated using hash in this way. The page flickers and the hash is added to the page url. One alternative is to use <a href="javascript:void(0);" id="foo">Link</a> but I also dislike seeing that piece of code in the browser status bar. It looks tacky. What I'd rather have is an explanatory javascript placeholder that does nothing, like <a href="javascript:zoom();" id="foo">Link</a> which actually works, but throws an ReferenceError in the javascript console since there are no such function. What's the minimum definition of a function that does nothing? Are there any other alternatives? Should I just skip the link and use something like <span id="foo" style="cursor:pointer;cursor:hand;">Link</span> instead?

    Read the article

  • Cross-browser method for getting width and height of a DIV?

    - by thinkthank
    This is my first post, so please go easy on me. I'm sure I'm doing everything wrong. However, I couldn't find any posts that answered the question above. I use jQuery. I'm trying to find a way to get the current width and height of a DIV element, even if they're set to "auto". I've found many ways to do this, but no method returns the same width in IE. It is important that this method is cross-browser, as it will break the layout of the page if different numbers are returned in different browsers. .width() and .height() do not work because in IE, padding is subtracted (e.g. width() returns 25 where width is 30 and padding is 5). .outerWidth() and .outerHeight() are not consistent either. While they work IE (believe it or not) in FF, the padding is added again to the full width (e.g. outerWidth() returns 110 in FF where width is 100px and padding is 10px). Is there any way out of this mess without writing complex browser checks? Thanks!

    Read the article

  • what exactly is this.id ?

    - by kwokwai
    Hi all, I was doing some dynamic effect on DIV using JQuery when I found that the returned value of this.id varied from function to function. I got two sets of simple parent-child DIV tags like this: <DIV ID="row"> <DIV ID="c1"> <Input type="radio" name="testing" id="testing" VALUE="1">testing1 </DIV> </DIV> <DIV ID="row"> <DIV ID="c2"> <Input type="radio" name="testing" id="testing" VALUE="2">testing2 </DIV> </DIV> Code 1. $('#row DIV').mouseover(function(){ radio_btns.each(function() { $('#row DIV).addClass('testing'); // worked }); }); Code 2. $('#row DIV').mouseover(function(){ var childDivID = this.id; radio_btns.each(function() { $('#'+childDivID).parent('DIV').addClass('testing'); // didn't work }); }); I don't understand why only the first code couldn work and highlighted all the "row" DIV, but the first code failed to do so?

    Read the article

  • calling same function on different buttons not loaded yet

    - by Jordan Faust
    I can not get this to work for every button and I cannot find anything explaining why. I guessing it is something small that I am missing $(document).ready(function() { // delete the selected row from the database $(document).on('click', '#business-area-delete-button', { model: "BusinessArea" }, deleteRow); $(document).on('click', '#business-type-delete-button', { model: "BusinessType" }, deleteRow); $(document).on('click', '#client-delete-button', { model: "Client" }, deleteRow); $(document).on('click', '#client-type-delete-button', { model: "ClientType" }, deleteRow); $(document).on('click', '#communication-channel-type', { model: "CommunicationChannelType" }, deleteRow); $(document).on('click', '#parameter-type-delete-button', { model: "ParameterType" }, deleteRow); $(document).on('click', '#validation-method-delete-button', { model: "ValidationMethod" }, deleteRow); } the event function deleteRow(event){ $.ajax( { type:'POST', data: { id: $(".delete-row").attr("id") }, url:"/mysite/admin/delete" + event.data.model, success:function(data,textStatus){ $('#main-content').html(data); }, error:function(XMLHttpRequest,textStatus,errorThrown){ jQuery('#alerts').html(XMLHttpRequest.responseText); }, complete:function(XMLHttpRequest,textStatus){ placeAlerts() } } ); return false }; This works only for a the button with id validation-method-delete-button. I use document and not the button its self because the button is contained in a template that is loaded later via ajax. I have this working for a similar function that is selecting a row in a table however I am not attempting to pass data in that scenario.

    Read the article

  • Adding date to multiple fields via datepicker

    - by Andy
    i have a form in drupal with jquery based date module. there are multiple fields with date picker enabled. i want to set the value of all of them (they all have class .date-popup-init) to the value of the first field (#edit-field, the 'from' date) when that field is set. my code so far: <script type="text/javascript"> var DatePicked = function() { var firstdate = $("#edit-field"); var updater = firstdate.datepicker("getDate"); $(".date-popup-init").each(function(){ $(this).datepicker("setDate", updater); }); } $(function() { $("#edit-field").datepicker({ onSelect: DatePicked }); }); </script> this seems to randomly work; it sets the date of some fields to the value of #edit-field, seemingly different fields each time. also, the form adds more datepicker-enabled fields via ajax. is there any way to ensure that all these new fields, when they load, pick up the value of #edit-field as well? disclaimer: last night was my first attempt at javascript of any kind. i have a basic idea now. the above was cobbled through countless google examples.

    Read the article

  • Modifying DIV CSS properties from within a deeply nested IFRAME.

    - by clintboxe
    I'm working with a business intelligence tool that only gives me access to a deeply nested iframe to add code. Ideally I would like to use jQuery and/or plain old JavaScript to modify the left and position CSS of a div that is 3 iframes above my IFRAME. I have access to add JavaScript/HTML to divArea0_1 within the reportiframe IFRAME. I would like to modify the propdiv DIV contained within the JSTabbedPanel IFRAME. Hopefully the HTML below is legible enough. :) Any ideas or help is greatly appreciated. <html> <div id = "tabs"> <iframe id = "tabbedPanel"> <iframe id = "JSTabbedPanel"> <div id = "treeTypeDiv"> <div id = "treediv"> <iframe id = "treeFrame"></iframe> </div> <div id = "propdiv"> <iframe id = "propFrame"> <div id = "reportpane"> <iframe id = "reportiframe"> <div id = "divEntire"> <div id = "divArea0_1"> <div id = "MyCode goes HERE"></div> </div> </div> </iframe> </div> </iframe> </div> </div> </iframe> </iframe> </div> </html>

    Read the article

  • iFrame in a Content Editor Web Part

    - by Music Magi
    Hi - I'm creating a page with two web parts: one with a search UI and another that displays the results. I'm using Content Editor Web Parts for both, but no matter how hard I try I can't seem to display more than a fraction of the results page in the content editor web part with the iFrame. The width seems to set fine, but no matter how I set the height (I've tried in-line, using CSS and using Javascript/JQuery), I cannot change the height of what is displayed. If I make the height something ridiculous like 3000px, I can see the empty space below, but it still only shows a small amount of the resulting page at the top of this iframe section. I've observed the HTML and the iFrame takes up all the space it's supposed to, but only shows that small sliver of the actual page the iFrame is displaying. I've tried numerous approaches from numerous articles but have come up short (pun intended). Does anyone have any experience with this or have indication as to why it would display this way or what I have to do to make this iFrame fill up the entire web part space? Thanks in advance

    Read the article

  • TableTools only exporting single header row

    - by Rakeesh
    I am using the DataTable jquery plugin from: http://datatables.net/ I have a DataTable that has multi-row table header with colspan. Something like: <thead> <tr> <th>Level 1</th> <th colspan='2'>Level 1 - Item 1</th> <th colspan='2'>Level 1 - Item 2</th> </tr> <tr> <th>Level 2</th> <th>Level 2 - Item 1a</th> <th>Level 2 - Item 1b</th> <th>Level 2 - Item 2a</th> <th>Level 2 - Item 2b</th> </tr> </thead> However when I use the TableTools plugin to export then except for the "Print" option all the rest (Excel, CSV, Pdf etc) only has the "Level 2" header row and not the Level 1. Any suggestions on how to get it to export also Level 1?

    Read the article

  • IE8 problems with .animate() of opacity property - descendant remains opaque throughout

    - by Fabian
    Basically I have something like this: <ul> <li> <a> <div class="trigger-layer"></div> <div class="title-layer">Text here</div> <div class="hover-layer"></div> </a> </li> </ul> I use jQuery to animate the <ul> as follow: $ul = xxx (where I assign the selector to var $ul) $ul.animate({opacity: 0}, 1000, function() {$ul.css("display", "none")}); However in IE8, as the <ul> fades off, the <div class="title-layer">Text here</div> remains clear and opaque. Finally the animation ends, the display: none; property is applied onto the <ul> and the text disappears aburptly.

    Read the article

  • Why does animate not work for the first few 'selections' of my next button?

    - by Josiah
    I'll just start right off the bat and say I'm fairly new to JQuery, so if you see some glaring issues with my code....let me know what I'm doing wrong! Either way, I've been working on a script to fade divs in and out using the z-index and animate. It "works" after about 2-3 clicks, but the first two clicks do not fade or animate as I was hoping....why is that? I'll just throw javascript up here, but if you need/want more code, just let me know. Thanks! $(document).ready(function() { //Slide rotation/movement variables var first = $('#main div.slide:first').attr('title'); var last = $('#main div.slide').length; //Needed for the next/prev buttons var next; //Set the first div to the front, and variable for first div var $active = $('#main div.slide[title='+first+']'); //Hide the links until the div is hovered over and take them away when mouse leaves $('#main').children('a').hide(); $('#main').mouseenter(function() { $('#main').children('a').fadeIn(750); }).mouseleave(function() { $('#main').children('a').fadeOut(750); }); $active.css('z-index', '4'); $('#main #next').click(function() { if ((next = parseInt($active.attr('title')) + 1) > last) { next = 1; } $active.css('z-index', '0').stop().animate({opacity: 0}, 1000); $active = $('#main div[title='+next+']').css('z-index', '4').stop().animate({opacity : 1}, 1000); }); });

    Read the article

  • jqtouch - panels appear on page, class="back" not working in Safari

    - by user564816
    I'm trying to get a demo working that was used in J. Stark's webinar on Safari Books Online (still available for viewing). I think I've followed the code example correctly, but the class="back" objects used to return from the "blog", "contacts", "settings" and "about" panels do not work, though the correct address shows in the nav area at the base of the browser window when I hover the mouse over the respective link. The panels-- which should slide in and out when called by their respective class"arrow" elements-- appear on the main page, nor do they animate correctly. Browser is Safari 5.0.3(6533.19.4); jquery-1.3.2; jqtouch freshly downloaded from the jqt website. Obviously I'm missing something simple. I'd sincerely appreciate anyone's help who sees what I'm doing wrong. Thanks for considering my question. View the app and source code (use view source in your browser) here. Sat 8 January 2011: 1 48 AM UPDATE in response to JS's comments: Most humble thanks for your note. Didn't want to impose on your server, so the URL for jqtouch.min.css points to a version on my server @ fastermac.net. There's something further amiss, I believe. On load, page still shows the elements that should be invisible until called by clicking class="arrow" elements. Animations not yet wiggling. Did get them to wiggle at one point, but "flip," for instance, landed then on a black page-- not the targeted panel. Probably something obvious, but I'm missing it after some considerable due diligence. Again, thanks for your note. Any further illumination would be sincerely appreciated.

    Read the article

< Previous Page | 511 512 513 514 515 516 517 518 519 520 521 522  | Next Page >