Search Results

Search found 6339 results on 254 pages for 'ready cent'.

Page 186/254 | < Previous Page | 182 183 184 185 186 187 188 189 190 191 192 193  | Next Page >

  • Ruby on Rails + Jquery: Saving data from draggable lists

    - by sjsc
    Hello. I'm trying to save data to the MySQL database in Rails when the user drags items from different lists. I'm using the below Jquery script and HTML: <script> $(document).ready(function() { $("#draggable").draggable( { connectToSortable: 'ul#myList', helper:'clone' } ); $("#myList").sortable(); }); </script> HTML: <ul> <li id="draggable">Drag me to myList</li> </ul> <ul id="myList"> <li id="item-1">item 1</li> <li id="item-2">item 2</li> </ul> I know I probably have to use something like this: $.post({ url: 'lists/update', data: $('#myList').sortable("serialize") }); I've been Googling for the last few hours but can't seem to find how to save data between multiple lists using Rails. Any idea?

    Read the article

  • Javascript problem with iframe that's hidden before loaded

    - by Aistina
    I have a page that contains an iframe that gets loaded using Javascript: index.html <iframe id="myFrame" width="800" height="600" style="display: none;"></iframe> <div id="loader"><!-- some loading indicator --></div> <script type="text/javascript"> function someFunction() { var myFrame = document.getElementById('myFrame'); var loader = document.getElementById('loader'); loader.style.display = 'block'; myFrame.src = 'myFrame.html'; myFrame.onload = function() { myFrame.style.display = 'block'; loader.style.display = 'none'; }; } </script> The page that gets loaded in the iframe contains some Javascript logic which calculates the sizes of certain elements for the purposes of adding a JS driven scrollbar (jScrollPane + jQuery Dimensions). myFrame.html <div id="scrollingElement" style="overflow: auto;"> <div id="several"></div> <div id="child"></div> <div id="elements"></div> </div> <script type="text/javascript"> $(document).load(function() { $('#scrollingElement').jScrollPane(); }); </script> This works in Chrome (and probably other Webkit browsers), but fails in Firefox and IE because at the time jScrollPane gets called, all the elements are still invisble and jQuery Dimensions is unable to determine any element's dimensions. Is there a way to make sure my iframe is visible before $(document).ready(...) gets called? Other than using setTimeout to delay jScrollPane, which is something I definitely want to avoid.

    Read the article

  • Reading JSON with Javascript/jQuery

    - by Josephine
    I'm building a game in javascript/html5 and I'm trying to build a database of locked doors in a maze that can be loaded from and overwritten to throughout gameplay. I've found a large number of tutorials online, but nothing is working. I was wondering if someone could look at what I'm trying and let me know what I'm doing wrong. My JSON file looks like this: { "doors": [ {"left":true, "right":false, "bottom":false}, {"left":false, "right":false, "bottom":false}, {"right":false, "bottom":false, "top":false}, {"left":false, "right":false, "top":false} ] } I want to build the HTML page so that when a player collides with a door it checks if its locked or not like: if (player.x < leftDoor.x + leftDoor.width && player.x + player.width > leftDoor.x && player.y < leftDoor.y + leftDoor.height && player.y + player.height > leftDoor.y) { if(doors[0].left == true) alert("door is locked"); else window.location = ( "2.html?p1="); } However I'm having trouble reading from the JSON file itself. I've tried things like: function loadJson() { $(document).ready(function() { $.getJSON('info.json', function(doors) { alert(doors[0].left); }); }); } But nothing happens, and I need to be able to access the information in the HTML as well. I'd rather use jQuery, but I'm not opposed to straight JS if it works. I've been trying to do this for ages and I'm getting absolutely no where. If someone could help that would be amazing. Thanks!

    Read the article

  • Why is my jQuery event not being triggered when the button is clicked?

    - by Ankur
    I am trying to call the .ajax() method when a button with id=go is clicked. This button is displayed when another jQuery event is triggered, namely that a button with a class called predicate is clicked. The button with id=go is displayed without any problems but on clicking it, there is no call to the alert() or getResults() method which are supposed to occur. Howver if I hard code the button with id=go into the page and don't have it generated by jQuery then the thing works fine. Why does the generated code cause a problem. $(document).ready( function() { $(".predicate").click( function() { makeQuery(this.id); //alert(this.id); }); $(".object").click( function() { //alert(this.id); }); var variables = 0; var queryString = ""; var noOfResults; var formValues=""; var goBegin = ""; var goEnd = "<br/><input name='go' id='go' type='button' value='go'/>"; function makeQuery(value) { queryString = queryString + "val" + variables + "=" + value + "&"; formValues=formValues+"<input type='hidden' name='val"+variables+"' value='"+value+"' />"; variables = variables + 1; $("#resultCount").html(goBegin+formValues+queryString+goEnd); } function getResults(){ $.ajax( { type : "GET", url : "ObjectCount", data : queryString + "count=" + variables, success : function(results) { noOfResults = results; $("#resultCount").html(results - 1 + " results"); } }); } $("#go").click( function() { alert("We have been alerted"); getResults(); }); });

    Read the article

  • CodeIgniter and SimpleTest -- How to make my first test?

    - by Smandoli
    I'm used to web development using LAMP, PHP5, MySQL plus NetBeans with Xdebug. Now I want to improve my development, by learning how to use (A) proper testing and (B) a framework. So I have set up CodeIgniter, SimpleTest and the easy Xdebug add-in for Firefox. This is great fun because maroonbytes provided me with clear instructions and a configured setup ready for download. I am standing on the shoulders of giants, and very grateful. I've used SimpleTest a bit in the past. Here is a the kind of thing I wrote: <?php require_once('../simpletest/unit_tester.php'); require_once('../simpletest/reporter.php'); class TestOfMysqlTransaction extends UnitTestCase { function testDB_ViewTable() { $this->assertEqual(1,1); // a pseudo-test } } $test = new TestOfMysqlTransaction(); $test->run(new HtmlReporter()) ?> So I hope I know what a test looks like. What I can't figure out is where and how to put a test in my new setup. I don't see any sample tests in the maroonbytes package, and Google so far has led me to posts that assume unit testing is already functionally available. What do I do?

    Read the article

  • What is your personal approach/take on commenting?

    - by Trae
    Duplicate What are your hard rules about commenting? A Developer I work with had some things to say about commenting that were interesting to me (see below). What is your personal approach/take on commenting? "I don't add comments to code unless its a simple heading or there's a platform-bug or a necessary work-around that isn't obvious. Code can change and comments may become misleading. Code should be self-documenting in its use of descriptive names and its logical organization - and its solutions should be the cleanest/simplest way to perform a given task. If a programmer can't tell what a program does by only reading the code, then he's not ready to alter it. Commenting tends to be a crutch for writing something complex or non-obvious - my goal is to always write clean and simple code." "I think there a few camps when it comes to commenting, the enterprisey-type who think they're writing an API and some grand code-library that will be used for generations to come, the craftsman-like programmer that thinks code says what it does clearer than a comment could, and novices that write verbose/unclear code so as to need to leave notes to themselves as to why they did something."

    Read the article

  • How to return ArrayList results from an IntentService

    - by gcl1
    I have an IntentService that loads up an ArrayList with data from a network source (AWS SDB tables). The ArrayList is in a global space -- accessible to both the calling Activity and the IntentService (like this: appState = ((App)getApplicationContext())). When the IntentService is done, it notifies the Activity through a ResultReceiver, and the Activity calls adapter.notifyDataChanged() to update the ListView. This solution works most of the time, ... but it violates the rule that only the UI thread should make changes to data underlying a ListView. So as it is, I sometimes get an error: "The content of the adapter has changed but ListView did not receive a notification." I think this must be a common situation. Please let me know if you have any suggestions or best practices for this problem. Here are three options I'm aware of: Keep the IntentService, and have it store the results in another "working" ArrayList, also in the global space. When the result is ready, the IntentService calls the ResultReceiver (on the UI thread), which can then: a) copy the result to the ArrayList associated with the ListView, and b) call adapter.notifyDataChanged(). CONS: I don't like the idea of putting temp/working data in a global space, and copying the result list seems inefficient. Keep the IntentService, and have it pass the results back through a bundle loaded with a ParcelableArrayList. CONS: I'm not sure if this approach would scale for very large result sets. It also requires copying the result list. Switch to a Service which builds a local copy of the result list. Have the Activity directly access the address space of the Service in order to read the result list. CON: Still requires copying results to the ArrayList associated with the ListView. Thank you.

    Read the article

  • Change css when tab has active class

    - by Yunowork
    I'm trying to change the background colour of the <body> depending on what tab specific is active. When a tab is active, a class called 'st_view_active' is added onto the tab content. In the tab content I add a hidden div with the hex code of what my body background colour should be when that tab is active, my jQuery code looks like this: $(document).ready(function() { $(function(){ $('body').css('backgroundColor',$('.st_view_active').find('.background').text()); }); }); And my html code when the tab is active is following: <div class="tab-6 st_view st_view_active" > <div style="display:none" class="background">yellow</div> <div class="st_view_inner"> tab 6 </div> </div> So when tab6 is active the background of the body should be yellow. However, this is not working, the background colour is not changing, what am I doing wrong here? DEMO and JSfiddle Thanks PS: The red and blue square is the next and previous tab handler..

    Read the article

  • Error occurs while validating form input using jQuery in Firebug

    - by Param-Ganak
    I have written a custom validation code in jQuery, which is working fine. I have a login form which has two fields, i.e. userid and password. I have written a custom code for client side validation for these fields. This code is working fine and gives me proper error messages as per the situation. But the problem with this code is that when I enter the invalid data in any or both field and press submit button of form then it displays the proper error message but at the same time when I checked it in Firebug it displays following error message when submit button of the form is clicked validate is not defined function onclick(event) { javascript: return validate(); } (click clientX=473, clientY=273) Here is the JQUERY validation code $(document).ready(function (){ $("#id_login_form").validate({ rules: { userid: { required: true, minlength: 6, maxlength: 20, // basic: true }, password: { required: true, minlength: 6, maxlength: 15, // basic: true } }, messages: { userid: { required: " Please enter the username.", minlength: "User Name should be minimum 6 characters long.", maxlength: "User Name should be maximum 15 characters long.", // basic: "working here" }, password: { required: " Please enter the password.", minlength: "Password should be minimum 6 characters long.", maxlength: "Password should be maximum 15 characters long.", // basic: "working here too.", } }, errorClass: "errortext", errorLabelContainer: "#messagebox" } }); }); /* $.validator.addMethod('username_alphanum', function (value) { return /^(?![0-9]+$)[a-zA-Z 0-9_.]+$/.test(value); }, 'User name should be alphabetic or Alphanumeric and may contain . and _.'); $.validator.addMethod('alphanum', function (value) { return /^(?![a-zA-Z]+$)(?![0-9]+$)[a-zA-Z 0-9]+$/.test(value); }, 'Password should be Alphanumeric.'); $.validator.addMethod('basic', function (value) { return /^[a-zA-Z 0-9_.]+$/.test(value); }, 'working working working'); */ So please tell me where is I am wrong in my jQuery code. Thank You!

    Read the article

  • Simplification / optimization of GPS track

    - by GreyCat
    I've got a GPS track, produces by gpxlogger(1) (supplied as a client for gpsd). GPS receiver updates its coordinates every 1 second, gpxlogger's logic is very simple, it writes down location (lat, lon, ele) and a timestamp (time) received from GPS every n seconds (n = 3 in my case). After writing down a several hours worth of track, gpxlogger saves several megabyte long GPX file that includes several thousands of points. Afterwards, I try to plot this track on a map and use it with OpenLayers. It works, but several thousands of points make using the map a sloppy and slow experience. I understand that having several thousands of points of suboptimal. There are myriads of points that can be deleted without losing almost anything: when there are several points making up roughly the straight line and we're moving with the same constant speed between them, we can just leave the first and the last point and throw anything else. I thought of using gpsbabel for such track simplification / optimization job, but, alas, it's simplification filter works only with routes, i.e. analyzing only geometrical shape of path, without timestamps (i.e. not checking that the speed was roughly constant). Is there some ready-made utility / library / algorithm available to optimize tracks? Or may be I'm missing some clever option with gpsbabel?

    Read the article

  • Kohana 3.2 - Database Session losing data on new Page Request

    - by reado
    I've setup my dev Kohana server to use an encrypted database as the default Session type. I'm also using this in combination with Auth to implement user authentication. Right now my user's are able to authenticate correctly and the authentication keys are being stored in the session. I'm also storing additional data like the user's firstname and businessname during the login procedure. When my login function is ready to redirect the user to the user dashboard, I'm able to see all the data correctly when I do $session::instance()->as_array(); (Array ( [auth_user] => NRyk6lA8 [businessname] => Dudetown [firstname] => Matt )) As soon as I redirect the user to another page, $session::instance()->as_array(); is empty. By dumping out the Session::instance() object, I can see that the Session id's are still the same. When I look at my database table though, i dont see any session records being saved and my session table is empty. My bootstrap.php contains: Session::$default = 'database'; Cookie::$salt = 'asdfasdf'; Cookie::$expiration = 1209600; Cookie::$domain = FALSE; and my session.php config file looks like: return array( 'database' => array( 'name' => 'auth_user', 'encrypted' => TRUE, 'lifetime' => 24 * 3600, 'group' => 'default', 'table' => 'sessions', 'columns' => array( 'session_id' => 'session_id', 'last_active' => 'last_active', 'contents' => 'contents' ), 'gc' => 500, ), ); I've looked high and low for an answer.. if anyone has any suggestions, i'm all ears! Thanks!

    Read the article

  • Jqplot - How to have vertical lines and make xaxis go up in plotted values?

    - by Beginner
    I have plotted a line graph using jqplot. What i would like is vertical lines and to start from 3 and go up in the plotted values along the bottom. so 3, 6, 9, 12 , 15, 29, 36 Also a dash marker along the left. This is what i have at the moment: $(document).ready(function(){ $.jqplot('chart2', [[[3, @(Model.LearnerWeek[0])], [6, @(Model.LearnerWeek[1])], [9, @(Model.LearnerWeek[2])], [12, @(Model.LearnerWeek[3])], [15, @(Model.LearnerWeek[4])], [29, @(Model.LearnerWeek[5])], [36, @(Model.LearnerWeek[6])]], [[3, @(Model.ManagerWeek[0])], [6, @(Model.ManagerWeek[1])], [9, @(Model.ManagerWeek[2])], [12, @(Model.ManagerWeek[3])], [15, @(Model.ManagerWeek[4])], [29, @(Model.ManagerWeek[5])], [36, @(Model.ManagerWeek[6])]]], { axes: { yaxis: { tickOptions: { show: false}, min: 0, max: 100, label: 'Participation Rate', labelRenderer: $.jqplot.CanvasAxisLabelRenderer }, xaxis: { min: 3, max: 36, label: 'Week', tickOptions: { formatString: '%d' } } }, seriesDefaults: { showMarker: false , rendererOptions: { diameter: undefined, // diameter of pie, auto computed by default. padding: 10, // padding between pie and neighboring legend or plot margin. fill: true, // render solid (filled) slices. shadowOffset: 2, // offset of the shadow from the chart. shadowDepth: 15, // Number of strokes to make when drawing shadow. Each stroke // offset by shadowOffset from the last. shadowAlpha: 1 // Opacity of the shadow } }, seriesColors: ['#3591cf', '#ef4058', '#73C774', '#C7754C', '#17BDB8'] }); }); I have played around with render options and xasis but cant seem to work it out

    Read the article

  • Having trouble parsing XML with jQuery

    - by Jack
    Hi Guys, I'm trying to parse some XML data using jQuery, and as it stands I have extracted the 'ID' attribute of the required nodes and stored them in an array, and now I want to run a loop for each array member and eventually grab more attributes from the notes specific to each ID. The problem currently is that once I get to the 'for' loop, it isn't looping, and I think I may have written the xml path data incorrectly. It runs once and I recieve the 'alert(arrayIds.length);' only once, and it only loops the correct amount of times if I remove the subsequent xml path code. Here is my function: var arrayIds = new Array(); $(document).ready(function(){ $.ajax({ type: "GET", url: "question.xml", dataType: "xml", success: function(xml) { $(xml).find("C").each(function(){ $("#attr2").append($(this).attr('ID') + "<br />"); arrayIds.push($(this).attr('ID')); }); for (i=0; i<arrayIds.length; i++) { alert(arrayIds.length); $(xml).find("C[ID='arrayIds[i]']").(function(){ // pass values alert('test'); }); } } }); }); Any ideas?

    Read the article

  • Google Maps: Simple app not working on IE

    - by Peter Bridger
    We have a simple Google Maps traffic application up at: http://www.avonandsomerset.police.uk/newsroom/traffic/ For some reason it's recently stopped working in IE correctly. At this point in time it was using V2 of the API, so I've just upgraded it to use V3 - but it still won't work in IE. It works fine in Chrome & Firefox. But in all versions of IE I've tired (6,7,8) the Google Map doesn't load fully. The problem The Google Map DIV will generally load all the controls (Zoom, Powered by Google, map types) but the actual map tiles do not appear in IE. I can just see the grey background of the DIV What I've tried I've commented down the JavaScript code to just the following on the page, but it still has the same problem: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" > var map; $(document).ready(function () { initialize(); // Set-up Google map }); function initialize() { var options = { zoom: 9, center: new google.maps.LatLng(51.335759, -2.870178), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("googleMap"), options); } </script>

    Read the article

  • Removing empty space with jQuery after deleting Selectable item

    - by Tx3
    I have two ordered lists and user can move items between them. I am using jQuery UI's Selectable for both of them. Problem is that when I move item from the middle of the list it leaves an empty space behind. How can I make list shrink according to the how many items is actually in the list? HTML <ol id="allUnits"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li> </ol> <input id="arrowRight" type="image" alt="Move item to right" src="<%= Url.Content("~/Content/Images/arrowRight.png")%>" /> <input id="arrowLeft" type="image" alt="Move item to left" src="<%= Url.Content("~/Content/Images/arrowLeft.png")%>" /> <ol id="productUnits"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li> </ol> jQuery $().ready(function () { $("#allUnits").selectable(); $("#productUnits").selectable(); $('#arrowRight').click(function () { return !$('#allUnits .ui-selected').remove().appendTo('#productUnits').removeClass(".ui-selected"); }); $('#arrowLeft').click(function () { return !$('#productUnits .ui-selected').remove().appendTo('#allUnits').removeClass(".ui-selected"); }); });

    Read the article

  • Avoiding mass propagation of properties and events for exposure to ViewModels.

    - by firoso
    I have an MVVM application I am developing that is to the point where I'm ready to start putting together a user interface (my client code is largely functional) I'm now running into the issue that I'm trying to get my application data to where I need it so that it can be consumed by the view model and then bound to the view. Unfortunately, it seems that I've either got a few structural oversights, or I'm just going to have to face the reality that I need to be propogating events and raising excessive amounts of errors to notify view models that thier properties have changed. Let me go into some examples of my issue: I have a class "Unit" contained in a class "Test", contained in a class "Session" contained in a class "TestManager" which is contained in "TestDataModel" which is utilized by "TestViewModel" which is databound to by my "TestView" .... WHOA. Now, consider that Unit (the bottom of the heiarchy) has a property called "Results" that is updated periodically, I want to expose that to my viewmodel and then databind it to my view, trouble is, the only way I can really think to do this is to perpetuate events WAY up a chain that say "I've been updated!" and then request the new value... This seems like an aweful way to do this. Alternatively, I could register a static event and raise it, and have the appropriate "Unit view model" grab the event and request the update. This SEEMS better... but... static events? Is that a taboo idea? Also, having an expression like: TestDataModel.TestManager.Session.Test.Unit.Results[i] Seems REALLY gross to have on a View Model. I know this all reeks of a bad design issue, but I can't figure out what I did wrong? Should I be using more singleton/container controlled lifetimes type objects? Register object instances with static helper containers? Obviously these are hard questions to answer without being intimate with the existing structure, but if you've run into situations like this, what did you do to refactor? Should I just live with this, add mass events, and propogate them?

    Read the article

  • jQuery autocomplete on multiple fields

    - by Onigoetz
    Hi all, Surprisingly, I didn't find any answers to my question. I want to make a form on jQuery with two fields. City Code. City Name. and when I enter a city code and go out of the field. I want an autocomplete on the city name. I Installed the jQuery Autocomplete plugin. and I have the following code : $(document).ready(function() { $("#field_localite").autocomplete('admin/ajax/npa', { extraParams: { npa: function() { return $("#field_npa").val(); } } }); $("#field_npa").blur(function() { $("#field_localite").search(); }); }); The problem is that the .search() method. doesnt launch the autocomplete. I'm looking for a method to trigger this autocomplete search on the field. do you know a way or a plugin able to do this search ? thanks in advance BTW : the PHP code behin is totally tested and works, it returns the data when doing the call.

    Read the article

  • How to test jQuery Ajax with php?

    - by vladv
    I tried to just send some information to a php file using Jquery Ajax. I wanted to send some info to the php file every time a click is made. <script> $(document).ready(function() { $('#checkbox').click(function() { $.ajax({type : "POST", url : "test.php", data : "ffs=somedata&ffs2=somedata2", succes : function() { alert("something"); } }); }); }); </script> <body> <input type = "checkbox" name = "checkbox" id = "checkbox"> </body> The php file looks like this: <?php echo $_POST['ffs']; ?> Now, I see the POST going, (using firebug). I get no errors, but nothing happens in the php file. Also success is never reached, so no alert is triggered. What should I do in the php file so that I can trigger success and also see the sent info?

    Read the article

  • Jquery drag /drop and clone

    - by Sajeev
    Hi I need to achive this .. I have a set of droppable items ( basically I am droping designs on a apparel ) and I am dropping a clone.. If I don't like the dropped object (designs) - I want to delete that by doing something like hidden . But I am unable to do that. Please help me.. here is the code var clone; $(document).ready(function(){ $(".items").draggable({helper: 'clone',cursor: 'hand'}); $(".droparea").droppable({ accept: ".items", hoverClass: 'dropareahover', tolerance: 'pointer', drop: function(ev, ui) { var dropElemId = ui.draggable.attr("id"); var dropElem = ui.draggable.html(); clone = $(dropElem).clone(); // clone it and hold onto the jquery object clone.id="newId"; clone.css("position", "absolute"); clone.css("top", ui.absolutePosition.top); clone.css("left", ui.absolutePosition.left); clone.draggable({ containment: 'parent' ,cursor: 'crosshair'}); $(this).append(clone); alert("done dragging "); /lets assume I have a delete button when I click that clone should dissapear so that I can drop another design - but the following code has no effect //and the item is still visible , how to make it dissapear ? $('#newId').css("visibility","hidden"); } }); });

    Read the article

  • jQuery Validate PHP Response

    - by Kurt
    Hello Everybody, my problem is, I want to validate an email adresse with jquery. Not only the syntax but rather if the email is already registrated. There are some tutorials but they are not working! At first the Jquery Code: <script id="demo" type="text/javascript"> $(document).ready(function() { // validate signup form on keyup and submit var validator = $("form#signupform").validate({ rules: { Vorname: { required: true, minlength: 3 }, Nachname:{ required: true, minlength: 4 }, password: { required: true, minlength: 5 }, password_confirm: { required: true, minlength: 5, equalTo: "#password" }, Email: { required: true, email: true, type: "POST", remote: "remotemail.php" }, dateformat: "required", ... </script> And now the PHP Code: <?php include('dbsettings.php'); $conn = mysql_connect($dbhost,$dbuser,$dbpw); mysql_select_db($dbdb,$conn); $auslesen1 = "SELECT Email FROM flo_user"; $auslesen2 = mysql_query($auslesen1,$conn); $registered_email = mysql_fetch_assoc($auslesen2); $requested_email = $_POST['Email']; if( in_array($requested_email, $registered_email) ){ echo "false"; } else{ echo "true"; } ?> I tried return TRUE/ return FALSE as well, but this displays "Email is registrated" all the time. json_encode didn't work as well. Thanks a lot!

    Read the article

  • Image swap with a javascript onclick dropdown menu

    - by AzzyDude
    So I've got this code that has an image and when you click it a dropdown menu appears. Pretty simple. The code works fine but I'm trying to incorporate an image swap on click and I'm having difficulty. Here's the HTML and the JS (there's some CSS too, but I'll leave that out): HTML: <div id="header"> <dl class="dropdown"> <dt><a href="#"><img src="images/cogwheel_btn.png"/></a></dt> <dd> <ul> <li><a href="#">Favorites</a></li> <li><a href="#">History</a></li> </ul> </dd> </dl> </div> JS: $(document).ready(function() { $(".dropdown img.flag").addClass("flagvisibility"); $(".dropdown dt a").click(function() { $(".dropdown dd ul").toggle(); }); $(".dropdown dd ul li a").click(function() { var text = $(this).html(); $(".dropdown dt a span").html(text); $(".dropdown dd ul").hide(); $("#result").html("Selected value is: " + getSelectedValue("sample")); }); function getSelectedValue(id) { return $("#" + id).find("dt a span.value").html(); } $(document).bind('click', function(e) { var $clicked = $(e.target); if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide(); }); $("#flagSwitcher").click(function() { $(".dropdown img.flag").toggleClass("flagvisibility"); }); });? I've tried adding lines like ("dt").empty(); and then ("dt").html("new_image") but it causes the dropdown functionality to stop working. Anyone any ideas?

    Read the article

  • Retreive value stored in array with jquery index

    - by Dustin
    I am trying to retreive the stored value (div id) of an index stored in var "current" when it's div is clicked, so I can use it in a function to iterate through to the next index later. I want to store this stored value in a var so I can use it in a div show/hide function. my html is quite simple: <div class="gallerypreview" id="1"></div> <div class="gallerypreview" id="2"></div> <div class="gallerypreview" id="3"></div> my javascript is something like this: var images = new Array(); $(document).ready( function(){ $('.gallerypreview').each(function() { images.push($(this).attr("id")); }); $('.gallerypreview').click(function() { var current = $('.gallerypreview').index(this); }); }); how would I go about retrieving the div id from this clicked div? nothing I have tried has worked. I can get the index # fine, but I cannot find the value of the index using any functions that utilize the index # yet.

    Read the article

  • Jquery and Prototype Conflict

    - by patrick
    I am having trouble running two javascript files on the same page. I used JQuery.noConflict() (http://api.jquery.com/jQuery.noConflict/) but no luck. <script src="http://www.google.com/jsapi"></script> <script> google.load("prototype", "1.6.0.3",{uncompressed:false}); google.load("scriptaculous", "1.8.1",{uncompressed:false}); </script> <script src="js/jquery.tools.min.js"></script> <script type="text/javascript"> $jQuery.noConflict(); jQuery(document).ready(function($) { $("#download_now").tooltip({ effect: 'slide'}); }); function show_text() { new Ajax.Request('./new.php', { method: 'post', parameters: { userid: $('userid').value }, onSuccess: function(r) { $('update').update(r.responseText) } }); } document.observe("dom:loaded", function() { $('loading').hide(); Ajax.Responders.register({ onCreate: function() { new Effect.Opacity('loading',{ from: 1.0, to: 0.3, duration: 0.7 }); new Effect.toggle('loading', 'appear'); }, onComplete: function() { new Effect.Opacity('loading', { from: 0.3, to: 1, duration: 0.7 }); new Effect.toggle('loading', 'appear'); } }); }); </script>

    Read the article

  • open Fancybox in tabs

    - by Prashant
    Hello all. I am using PHP + jQuery + Fancybox in my project. I have multiple tabs that get created dynamically. I have got a star icon on every tab header and on clicking them I want to open a fancybox. My tabs are basically ul-li with following dynamic code. $("#tabs").append("<li class='current'><a class='tab' id='tab_" + tabCnt + "<a href='#loginBox_div' class='login_link'> <img src='star.png' style='cursor:pointer'/> </a>" + "<a href='javascript:void(0);' class='remove'>x</a></li>"); in my index file : $(document).ready(function() { $("a.login_link").fancybox({ 'titlePosition' : 'inside', 'transitionIn' : 'none', 'transitionOut' : 'none' }); }); The problem is that when I click on star icon of first tab, the loginBox_div (fancybox) opens properly. But when my second tab is created and when I click on its star icon, the fancybox is not opening although the class is applied in second and successive tabs. No javascript errors too. Please show me the way. Thank you.

    Read the article

  • Jquery code breaks page Javascript

    - by Graham
    I required a function to remove URLs from <a> divs found within <div class="rj_insertcode">. Not being familiar with with direction to tackle this, I eventually mustered up the following Jquery code: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('div.rj_insertcode a').each(function() { $(this).replaceWith($(this).html()); }); }); </script> </head> My site uses Joomla CMS and I was able to add the above script to the bottom of the template index.php. It works quite well and removes the links generated between the defined tags. My problem: Pages that also include JavaScript do not operate correctly. JavaScript appears to be disabled or not functioning. What can I change to ensure JavaScript still operates correctly, or is there another method I could adopt?

    Read the article

< Previous Page | 182 183 184 185 186 187 188 189 190 191 192 193  | Next Page >