Search Results

Search found 8794 results on 352 pages for 'prototype js'.

Page 307/352 | < Previous Page | 303 304 305 306 307 308 309 310 311 312 313 314  | Next Page >

  • By Pressing Enter key move to next Textbox in ASP.Net

    - by Malik Usman
    I have two textboxes and one Button control.....In first TextBox when press enter key moves to next textbox(Barcode) and when i press enter in barcode textbox it fires the button click event......till that its ok.... But what happening after fireing the Button click even on enter in Barcode Textbox its going back to focus on first textbox.........But i want this to stay in same Barcode TextBox to scan more barcodes. The code is below. <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"> </script> <Head> <script type="text/javascript"> $(function() { $('input:text:first').focus(); var $inp = $('input:text'); $inp.bind('keydown', function(e) { //var key = (e.keyCode ? e.keyCode : e.charCode); var key = e.which; if (key == 13) { e.preventDefault(); var nxtIdx = $inp.index(this) + 1; $(":input:text:eq(" + nxtIdx + ")").focus(); } }); }); </script> </Head>

    Read the article

  • facebook javascript api

    - by ngreenwood6
    I am trying to get my status from facebook using the javascript api. I have the following code: <div id="fb-root"></div> <div id="data"></div> <script src="http://connect.facebook.net/en_US/all.js"></script> <script type="text/javascript"> (function(){ FB.init({ appId : 'SOME ID', status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); }); getData(); function getData(){ var query = FB.Data.query('SELECT message FROM status WHERE uid=12345 LIMIT 10'); query.wait(function(rows) { for(i=0;i<rows.length;i++){ document.getElementById('data').innerHTML += 'Your status is ' + rows[i].message + '<br />'; } }); } </script> When i try to get my name it works fine but the status is not working. Can someone please tell me what I am doing wrong because the documentation for this is horrible. And yes I replaced the uid with a fake one and yes i put in my app id because like i said when i try to get my name it works fine. Any help is appreciated.

    Read the article

  • document.write Not working when loading external Javascript source

    - by jadent
    I'm trying to load an external JavaScript file dynamically into an HTML element to preview an ad tag. The script loads and executes but the script contains "document.write" which has an issue executing properly but there are no errors. <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script type="text/javascript"> $(function() { source = 'http://ib.adnxs.com/ttj?id=555281'; // DOM Insert Approach // ----------------------------------- var script = document.createElement('script'); script.setAttribute('type', 'text/javascript'); script.setAttribute('src', source); document.body.appendChild(script); }); </script> </head> <body> </body> </html> I can get it to work if If i move the the source to the same domain for testing If the script was modified to use document.createElement and appendChild instead of document.write like the code above. I don't have the ability to modify the script since it being generated and hosted by a 3rd party. Does anyone know why the document.write will not work correctly? And is there a way to get around this? Thanks for the help!

    Read the article

  • qTip jQuery Plugin not always Firing

    - by tonsils
    Hi, I am using the qTip jquery plugin qTip plugin for a website I'm working on based on another thread I raised here: stack overflow thread My question is, I have a navigation bar running along the top of my screen which is basically sets the title attribute based on the tab menu you are in, these are all stored within a javascript array. For example, I have three menu options running along the top of the screen, say Menu A, Menu B and Menu C. I also have an information image positioned at the rightmost position of the nav bar, which I set the title attribute, based on the Menu option selected in the Nav Bar. For example: Menu A => myRole[0] = "Admin" Menu B => myRole[1] = "Manager" Menu C => myRole[2] = "Guest" So basically as the user clicks on each of the menus in the nav bar, I set the title attribute in the information image to either "Admin","Manager" or "Guest". At startup, the qTip plugin works and displays "Admin" when I hover over it but when I change the menu to Menu C, it still displays "Admin" instead of "Guest" From the looks of it, it doesn't seem to be calling the qTip plugin, which I have positioned at the footer of the screen (see actual code below). Any ideas how to ensure that the qTip fires every time I click/change menu options and pickups value within javascript array? <script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('div#infoi img[title]').qtip({ position: { adjust: { x:-110, y:0 }, corner: { target: 'bottomLeft', tooltip: 'topMiddle' } }, style: { width: 250, padding: 5, background: '#E7F1FA', color: 'black', textAlign: 'center', border: { width: 3, color: '#65a9d7' }, tip: 'topRight' } }); }); </script> Thanks.

    Read the article

  • Set value of hidden field in a form using jQuery's ".val()" doesn't work !

    - by texens
    I've been trying to set the value of a hidden field in a form using jQuery, but without success. Here is a sample code that explains the problem. If I keep the input type to "text", it works without any trouble. But, changing the input type to "hidden", doesn't work ! <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("input:text#texens").val("tinkumaster"); }); }); </script> </head> <body> <p>Name: <input type="hidden" id="texens" name="user" value="texens" /></p> <button>Change value for the text field</button> </body> </html> I also tried the following workaround, by setting the input type to "text" and then using a "display:none" style for the input box. But, this also fails ! It seems jQuery has some trouble setting hidden or invisible input fields. Any ideas? Is there a workaround for this that actually works? Thanking in anticipation

    Read the article

  • getting maps to accept a dynamically generated KML file?

    - by arc
    Hi. I have a button that launches the google maps app on my device via an intent. I want to be able to pass it a php page that generates a KML file. I have done this on a website before using the googlemaps api in JS - but it doesn't seem to work on Android. My php file is as follows; <?php echo '<kml xmlns="http://www.google.com/earth/kml/2">'; echo '<Placemark>'; echo '<name>Google Inc.</name>'; echo '<description>1600 Amphitheatre Parkway, Mountain View, CA 94043</description>'; echo '<Point>'; echo '<coordinates>-122.0841430, 37.4219720, 0</coordinates>'; echo '</Point>'; echo '</Placemark>'; echo '</kml>'; ?> Launching with: final Intent myIntent = new Intent(android.content.Intent.ACTION_VIEW, Uri.parse("geo:0,0?q=http://website.com/kml_gen.php")); startActivity(myIntent); It launches maps, finds the file - but won't display it 'because it contains errors'. Is this just not possible, or are there other ways to construct the intent that might work?

    Read the article

  • problem on running script on different operating system

    - by Praveen kalal
    i run use a javascript code for getting browser information it run fine on microsoft windows xp but it not working on microsoft windows server 2003. my code is folowing. plz help. <html> <head> <script type="text/javascript" src="zeroclipboard/ZeroClipboard.js"></script> <script type="text/javascript"> window.onload = function F() { var today = new Date(); var the_date = new Date("December 31, 2012"); var the_cookie_date = the_date.toGMTString(); var the_cookie = screen.width +"x"+ screen.height; var the_cookie = "Screen Resolution:"+the_cookie + ";\nExpires:" + the_cookie_date+";\n Browser CodeName:"+navigator.appCodeName+";\n Browser Name: " + navigator.appName+";\n Browser Version: " + navigator.appVersion+";\n Browser Version: " + navigator.appVersion+"; \n Cookies Enabled: " + navigator.cookieEnabled +";\n Platform: " + navigator.platform+";\n User-agent header: " + navigator.userAgent; / document.getElementById('box-content').value=the_cookie; } </script> </head> <body> <textarea name="box-content" id="box-content" rows="10" cols="70"> </textarea> <br /><br /> <p><input type="button" id="copy" name="copy" value="Copy to Clipboard" /></p> </body> </html> <script type="text/javascript"> //set path ZeroClipboard.setMoviePath('http://192.168.101.135:471/browserinfo/zeroclipboard/ZeroClipboard.swf'); //create client var clip = new ZeroClipboard.Client(); //event clip.addEventListener('mousedown',function() { clip.setText(document.getElementById('box-content').value); }); clip.addEventListener('complete',function(client,text) { alert('text is copied'); }); //glue it to the button clip.glue('copy'); </script>

    Read the article

  • Getting a lightweight installation of java eclipse.

    - by liam
    Having dealt with yet another stupid eclipse problem, I want to try to get the lightest, most minimal eclipse installation as possible. To be clear, I use eclipse for two things: - Editing Java - Debugging Java Everything else I do through emacs/zsh (editing jsp/xml/js, file management, svn check-in, etc). I have not found any aspect of working in eclipse to do these tasks to be efficient or even reliable, so I do not want plug-ins that relate to it. From the eclipse.org site, this is the lightest install of eclipse that they have, and I don't want any of those things (bugzilla, mylyn, cvs, xml_ui), and have actually had problems with each of them even though I do not use them. So what is the minimal build I can get that will: 1) Ignore svn metadata 2) Includes the full-featured editor (intellisense and type-finding) 3) Includes the full-featured debugger (standard eclipse/jdk) Does not have any extra plug-ins, platforms, or "integrations" with other platforms, specifically, I don't want to deal with plug-ins relating to: Maven, JSP Validation, Javascript editing or validation, CVS or SVN, Mylyn, Spring or Hibernate "natures", app servers like a bundled tomcat/glassfish/etc, J2EE tools, or anything of the like. I do primarily spring/hibernate/web-mvc apps, and have never dealt with an eclipse plug-in that handles any of it gracefully, I can work effectively with my own toolset, but eclipse extensions do nothing but get in the way. I have worked with plain eclipse up to Ganymede, MyEclipse (up to 7.5), and the latest version of Spring-SourceTools, and find that they are all saddled with buggy useless plug-ins (though the combination is always different). Switching to netbeans/intellij is not an option, and my teammates work with svn-controlled .class/.project files, so it pretty much has to be eclipse. Does anyone have any good advice on how I can save a few grey hairs?

    Read the article

  • Avoiding Multiple Dialog Calls with htaccess

    - by Jeffrey J Weimer
    OK, I'm new to this, so pardon if the question is already a FAQ. Searching multiple places still leaves me dumbfounded. I have a Web site generated with iWeb09/Mac hosting on an ISP. To secure certain pages, I am trying to set up .htaccess + .htpasswd files. The basic directory structure is ... Main index.html Images.html Images (some css, js stuff) Media Image01 Image01.jpeg ... Image02 Image02.jpeg ... I want to password protect access to the Images directory and all the files therein. The index.html file has a link to the Images.html file that contains the layout for the files in the Images directory. I have put a basic .htaccess file at the Main level that restricts access via ... <Files "Images.html"> AuthType Basic AuthName "Images" AuthUserFile /Main/.htpasswd AuthGroupFile /dev/null Require valid-user </Files> I have then created a valid .htpasswd file. All works at the start, however after the first call to set up the Images.html page, the secure login prompt is displayed multiple times, presumably once for every sub-sub-directory Images/Media/ImageXX (with multiple sub-directories, I just give up after two or three times). I have also tried placing the .htaccess file inside the Images directory with the same problem. Recommendations I have seen suggest a better convention is needed in the basic .htaccess file itself. Alternatively, perhaps a companion .htaccess is needed in the Images directory. So, how do I fix this problem? -- JJW

    Read the article

  • Problem loading scripts from Ajax Response

    - by konathamrajesh
    The problem is I am using get_info() to make a ajax call to Result.lasso and paste the response in div with id 'test'.I am unable to use the sendForm() function from the page where i am calling the get_info(). I have also tried using different versions of jQuery 1.1.1.3 is working fine.But i am facing the problem while using higher versions of jquery. The error with higher versions is as follows missing } in XML expression [Break on this error] alert('hi');\n test.lasso (line 3) sendForm is not defined [Break on this error] sendForm(); get_info() function definition <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> <SCRIPT> function get_info() { $.ajax({url: "Result.lasso", context: document.body, success: function(response){ document.getElementById('test').innerHTML = response ;},dataType:"script"}); } </SCRIPT> The code in Result.lasso is as follows [Content_Type: 'text/html; charset=UTF-8'] <script type="text/javascript"> function sendForm() { alert('hi'); } </script> [Date] form name= "abc" method = "get" action = "abcd.lasso"> input type ="text" name = "element1"/> input type = "button" value="Click" onClick = "javascript: sendForm();"/> </form> Please help me out in resolving this problem Thanks, Rajesh Konatham

    Read the article

  • How to check if JavaScript object is JSON

    - by Wei Hao
    I have a nested JSON object that I need to loop through, and the value of each key could be a String, JSON array or another JSON object. Depending on the type of object, I need to carry out different operations. Is there any way I can check the type of the object to see if it is a String, JSON object or JSON array? I tried using typeof and instanceof but both didn't seem to work, as typeof will return an object for both JSON object and array, and instanceof gives an error when I do obj instanceof JSON. To be more specific, after parsing the JSON into a JS object, is there any way I can check if it is a normal string, or an object with keys and values (from a JSON object), or an array (from a JSON array)? For example: JSON var data = {"hi": {"hello": ["hi1","hi2"] }, "hey":"words" } JavaScript var jsonObj = JSON.parse(data); var level1 = jsonObj.hi; var text = jsonObj.hey; var arr = level1.hello; //how to check if level1 was formerly a JSON object? //how to check if arr was formerly a JSON array? //how to check if text is a string?

    Read the article

  • ios 4.1 doesn't call Phonegap API

    - by Johannes Klauß
    I'm working on a cross platform app for Android 2.2 and iOS 4.1 (dev devices). On Android everything works fine (accelerometer and geolocation) even if it's a little laggy. On iOS it's way more smooth, but he doesn't call the Phonegap functions. That's my JS code: var watchID = null; var shaking = { left: false, right: true }; function startWatch() { // Update acceleration every 100 ms var options = { frequency : 100 }; watchID = navigator.accelerometer.watchAcceleration(function(acceleration) { if(acceleration.x < -8) { shaking.left = true; } else if(acceleration.x > 8) { shaking.right = true; } if(shaking.left && shaking.right) { navigator.notification.vibrate(500); shaking.left = false; shaking.right = false; stopWatch(); } }, null, options); } I just call it with <a href="" onclick="startWatch();">start Accel</a> But iOS doesn't react at all. Is there any special call you need to do in iOS?

    Read the article

  • Passing a var as an argument

    - by Lienau
    On a site I'm making I need to have a progress bar, I found one that suited my needs. By default it will incrementally change the color when a certain percentage is reached (0-30 red, 30-70 orange, etc). My only problem is changing them, I can set them easily with a static number such as 50, but when I try to do it dynamically (ie: 2000*.3 = 600) it fails. I don't know much js/jquery so this is especially difficult for me, if you could help that would be great. I'm pretty sure it's something really simple I'm missing. The code that Fails: var barmax = 2000; var orangeBound = Math.round(barmax * .3); var greenBound = Math.round(barmax * .7); //alert(orangeBound+":"+greenBound); $("#pb1").progressBar({ max: barmax, textFormat: 'fraction', barImage: { 0: 'images/progressbg_red.gif', orangeBound: 'images/progressbg_orange.gif', greenBound: 'images/progressbg_green.gif'} }); The code that works but I can't use because it has to be dynamic: $("#pb1").progressBar({ max: barmax, textFormat: 'fraction', barImage: { 0: 'images/progressbg_red.gif', 600: 'images/progressbg_orange.gif', 1400: 'images/progressbg_green.gif'} }); If you need to see the source, here. Thanks again!

    Read the article

  • How to parse text as JavaScript?

    - by Danjah
    This question of mine (currently unanswered), drove me toward finding a better solution to what I'm attempting. My requirements: chunks of code which can be arbitrarily added into a document, without an identifier: [div class="thing"] [elements... /] [/div] the objects are scanned for and found by an external script: var things = yd.getElementsBy(function(el){ return yd.hasClass('thing'); },null,document ); the objects must be individually configurable, what I have currently is identifier-based: [div class="thing" id="thing0"] [elements... /] [script type="text/javascript"] new Thing().init({ id:'thing0'; }); [/script] [/div] So I need to ditch the identifier (id="thing0") so there are no duplicates when more than one chunk of the same code is added to a page I still need to be able to config these objects individually, without an identifier SO! All of that said, I wondered about creating a dynamic global variable within the script block of each added chunk of code, within its script tag. As each 'thing' is found, I figure it would be legit to grab the innerHTML of the script tag and somehow convert that text into a useable JS object. Discuss. Ok, don't discuss if you like, but if you get the drift then feel free to correct my wayward thinking or provide a better solution - please! d

    Read the article

  • Problem with Railscast #197 - Nested Model Form Part 2

    - by sscirrus
    I'm trying to implement Ryan's Railscast #197 in a system with Questions, Answers, and (multiple choice) Options. http://railscasts.com/episodes/197-nested-model-form-part-2. I have successfully implemented the nesting among these forms/partials. The simpler 'check box' way to delete records works properly. The problem occurs when I try to add/delete records. I have copied the code exactly as it appears in his Railscast: #new.html.erb <%= javascript_include_tag :defaults, :cache => true %> <% f.fields_for :in_options do |builder| %> <%= render "option_fields", :f => builder %> <% end %> #_option_fields.html.erb partial <%= f.hidden_field :_destroy %> <%= link_to_function "remove", "remove_fields(this)" %> #application_helper.rb (exact same as #197) def link_to_remove_fields(name, f) f.hidden_field(:_destroy) + link_to_function(name, "remove_fields(this)") end def link_to_add_fields(name, f, association) new_object = f.object.class.reflect_on_association(association).klass.new fields = f.fields_for(association, new_object, :child_index => "new_#{association}") do |builder| render(association.to_s.singularize + "_fields", :f => builder) end link_to_function(name, h("add_fields(this, \"#{association}\", \"#{escape_javascript(fields)}\")")) end #application.js (exact same as #197. I have an Event.addbehavior below this code.) function remove_fields(link) { $(link).previous("input[type=hidden]").value = "1"; $(link).up(".fields").hide(); } function add_fields(link, association, content) { var new_id = new Date().getTime(); var regexp = new RegExp("new_" + association, "g") $(link).up().insert({ before: content.replace(regexp, new_id) }); } 2 problems: When I click on the 'remove' link it doesn't remove - it just shifts the page up or down. When I include link_to_add_fields "Add Answer", f, :answers, I get undefined method `klass' for nil:NilClass. Thanks everyone.

    Read the article

  • Visual Studio macro to navigate to T4MVC link

    - by shannon
    I use T4MVC and I'm happy with it and want to keep it - it keeps down run time defects. Unfortunately, it makes it harder to navigate to views and content (a.k.a. Views and Links in T4MVC) though. Even using Resharper, I can't navigate to the referenced item: T4MVC and Resharper Navigation Can I get a hand building a macro to do this? Never having built a VS IDE macro before, I don't have a grasp on how to get at some things, like the internal results of the "Go To Definition" process, if that's even possible. If you aren't familiar with T4MVC, here's generally what the macro might do to help: Given the token: Links.Content.Scripts.jQuery_js in the file MyView.cshtml, '(F12) Go To Definition'. This behaves properly. Having arrived at the the related assignment: public readonly string jQuery_js = "~/Content/Scripts/jQuery.js"; in a file generated by T4MVC (which is very nice, thank you David, but we really don't ever need to see), capture the string assigned and close the file. Navigate in Solution Explorer to the PhysicalPath represented by the captured string. This process would also work for views/layouts/master-pages/partials, etc. If you provide a macro or link to a macro to do this, or have another solution, wonderful. Otherwise, hints on how to do step 3 simply in a VS macro would be especially appreciated and receive upvote from me. I'd post the macro back here as an answer when done. Thanks!

    Read the article

  • Redirect uploaded files to another server, using nginx

    - by Serg ikS
    I am creating a web service of scheduled posts to some soc. network.Need help dealing with file uploads under high traffic. Process overview: User uploads files to SomeServer (not mine). SomeServer then responds with a JSON string. My web app should store that JSON response. Opt. 1 — Save, cURL POST, delete tmp The stupid way I made it work: User uploads files to MyWebApp; MyWebApp cURL's the file further to SomeServer, getting the response. Opt.2 — JS magic The smart way it could be perfect: User uploads the file directly to SomeServer, from within an iFrame; MyWebApp gets the response through JavaScript. But this is(?) impossible due to the 'Same Origin Policy', isn't it? Opt. 3 — nginx proxying? The better way for a production server: User uploads files to MyWebApp; nginx intercepts the file uploads and sends them directly to the SomeServer; JSON response is also intercepted by nginx and processed by MyWebApp. Does this make any sense, and what would be the nginx config for, say, /fileupload Location to proxy it to SomeServer ?

    Read the article

  • Same jQuery code returns two different results – Submit Button Text

    - by Lijo
    I have two jQuery codes - http://jsfiddle.net/Lijo/CXGX7/7/ and http://jsfiddle.net/Lijo/CXGX7/8/ . The first code returns undefined whereas the second code returns text of button. QUESTIONS What is the reason for this difference in result? Why is the first code not returning expected text of button? Note: I verified that both are using same version of jQuery (by an alert of jQuery) alert($.fn.jquery); CODE <html xmlns="http://www.w3.org/1999/xhtml"> <head><title> </title> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.1.js"></script> <script type="text/javascript"> alert($('.myButton').attr("value")); </script> </head> <body> <form method="post" action="Test.aspx" id="form1"> <div class="aspNetHidden"> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE0MDM4MzYxMjNkZMycQvsYQ+GPFsQHoQ8j/8vEo2vQbqkhfgPc60kxXaQO" /> </div> <div class="aspNetHidden"> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKqxqqrCgLi/JazDQKM54rGBqgaroRQTXJkD1LyUlVxAmLRCNfTGVe73swQBMemBtvN" /> </div> <div> <input name="txtEmpName" type="text" id="txtEmpName" /> <input type="submit" name="Button1" value="Submit" id="Button1" class="myButton" /> </div> </form> </body> </html> REFERENCES Retrieve Button value with jQuery How to determine and print jQuery version?

    Read the article

  • Jquery problem - cant expand the row above in a table

    - by apg1985
    Hi People, What I cant figure out is how I would toggle a row in a table using the one below it. So say I have a table with 2 rows the first contains content and the one below contains a button, when the page loads the content row is hidden and when you click the button it toggles the content row on and off. In the example the first table works but the second does not, I need the second one to work. <!DOCTYPE HTML> <html> <head> <title>Testing Horizontal Accordion</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".sectionhead").toggle( function() { $(this).next("tr").hide(); }, function() { $(this).next("tr").show(); } ) }); </script> </head> <body> <table> <tr class="sectionhead"><td></td></tr> <tr class="child"><td>child</td></tr> </table> <br> <table> <tr class="child"><td>child</td></tr> <tr class="sectionhead"><td></td></tr> </table> </body> </html>

    Read the article

  • jQuery tooltip: Trouble with remove()

    - by Rosarch
    I'm using a jQuery tooltip plugin. I have HTML like this: <li class="term ui-droppable"> <strong>Fall 2011</strong> <li class="course ui-draggable">Biological Statistics I<a class="remove-course-button" href="">[X]</a></li> <div class="term-meta-data"> <p class="total-credits too-few-credits">Total credits: 3</p> <p class="median-GPA low-GPA">Median Historical GPA: 2.00</p> </div> </li> I want to remove the .course element. So, I attach a click handler to the <a>: function _addDeleteButton(course, term) { var delete_button = $('<a href="" class="remove-course-button" title="Remove this course">[X]</a>'); course.append(delete_button); $(delete_button).click(function() { course.remove(); return false; }).tooltip(); } This all works fine, in terms of attaching the click handler. However, when course.remove() is called, Firebug reports an error in tooltip.js: Line 282 tsettings is null if ((!IE || !$.fn.bgiframe) && tsettings.fade) { What am I doing wrong? If the link has a tooltip attached, do I need to remove it specially? UPDATE: Removing .tooltip() solve the problem. I'd like to keep it in, but that makes me suspect that my use of .tooltip() is incorrect here.

    Read the article

  • Accessing jQuery objects in the module pattern

    - by Stewart
    Hello, Really getting in to javascript and looking around at some patterns. One I have come accross is the module pattern. Its seems like a nice way to think of chucks of functionality so I went ahead and tried to implement it with jQuery. I ran in to a snag though. Consider the following code <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>index</title> <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ var TestClass2 = (function(){ var someDiv; return { thisTest: function () { someDiv = document.createElement("div"); $(someDiv).append("#index"); $(someDiv).html("hello"); $(someDiv).addClass("test_class"); } } })(); TestClass2.thisTest(); }); </script> </head> <body id="index" onload=""> <div id="name"> this is content </div> </body> </html> The above code alerts the html content of the div and then adds a class. These both use jQuery methods. The problem is that the .html() method works fine however i can not add the class. No errors result and the class does not get added. What is happening here? Why is the class not getting added to the div?

    Read the article

  • jQuery check offset

    - by Glister
    HTML: <ul class="clients"> <li> <div class="over left">Description</div> <div class="inner">Image</div> </li> </ul> CSS: .clients { margin-right: -20px; } .clients li { float: left; width: 128px; height: 120px; margin: 0 20px 20px 0; border: 1px solid #c2c2c2; } .clients .over { display: none; position: absolute; width: 250px; font-size: 11px; line-height: 16px; background: #ecf5fb; margin: 3px 0 0 3px; padding: 18px; z-index: 25; } .clients .right { margin: 3px 0 0 -161px; } .clients .inner { width: 128px; height: 120px; overflow: hidden; } So, we have a list of floated squares and a popup blocks in each, which have absolute position. JS: jQuery(function($) { $('input[title!=""]').hint(); $(".clients li").bind('mouseover mouseout',function(){$(this).find("div.over").toggle()}); }); If over - show, else - hide. Quite ok, but it must be more advanced, we should catch an offset and give a class to .over block: if offset from right (corner of browser window) less than 150px, then add class "right" for a .over block. if offset from right more than 150px - add class "left" for a .over block. How can we do it?

    Read the article

  • How can I move TinyMCE's toolbar into a modal popup?

    - by Nate Wagar
    I'm using TinyMCE & jQuery and am having a problem moving TinyMCE's external toolbar to another location in the DOM. To further complicate things, there are multiple TinyMCE instances on the page. I only want the toolbar for the one that's currently being edited. Here's some sample code: $(textarea).tinymce({ setup: function(ed) {setupMCEToolbar(ed, componentID, displaySettingsPane)} ,script_url: '/clubs/data/shared/scripts/tiny_mce/tiny_mce.js' ,theme : "advanced" ,plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template" ,theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect" ,theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor" ,theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen" ,theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak" ,theme_advanced_toolbar_location : "external" ,theme_advanced_toolbar_align : "left" ,theme_advanced_statusbar_location : "bottom" ,theme_advanced_resizing : true }); var setupMCEToolbar = function (mce, componentID, displaySettingsPane) { mce.onClick.add(function(ed,e){ displaySettingsPane($('#' + componentID)); $('#' + componentID).fetch('.mceExternalToolbar').eq(0).appendTo('#settingsPaneContent'); }); } Basically, it seems as though the setupMCEToolbar function cannot track down the mceExternalToolbar to move it. Has anyone ever had success trying to do something like this? EDIT It's a Monday alright... it couldn't find the external toolbar because I was using children() instead of fetch(). There's still an issue in that: 1) Moving it is incredibly slow and 2) Once it moves, TinyMCE breaks. EDIT 2 A bit more clarification: The modal is draggable, thus making any purely-CSS workarounds a bit awkward...

    Read the article

  • Adding class to the UL and LI as per the level

    - by Wazdesign
    I have the following HTML mark up. <ul class="thumbs"> <li> <strong>Should be level 0</strong> </li> <li> <strong>Should be level 1</strong> </li> <li> <strong>Should be level 2</strong> </li> </ul> <ul class="thumbs"> <li> <strong>Should be level 0 -- </strong> </li> <li> <strong>Should be level 1 -- </strong> </li> </ul> and javascript. var i = 0; var j = 0; jQuery('ul.thumbs').each(function(){ var newName = 'ul -level' + i; jQuery(this).addClass('ul-level-'+i) .before('<h2>'+newName+'</h2>'); i = i+1; }); jQuery('ul.thumbs li').each(function(){ jQuery(this).addClass('li-level-'+j) .append('li-level-'+j); j = j+1; }); JS Bin Link But the level of the second UL LI is show diffrent. Please help me out in this.

    Read the article

  • Get count of rows in each table while having more than 1 tables

    - by sneha khan
    I have more then one tables on same page and want to add a line show count of each table as below. I tried something but it gives sum of count of all table rows. <table> <tr> <td>Some data</td> <td>More data</td> </tr> <tr> <td>Some data</td> <td>More data</td> </tr> </table> <table> <tr> <td>Some data</td> <td>More data</td> </tr> <tr> <td>Some data</td> <td>More data</td> </tr> </table> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $().ready(function(){ //I want to add a line after each table showing each table row count $("table").after(??? + " rows found."); }); </script>

    Read the article

< Previous Page | 303 304 305 306 307 308 309 310 311 312 313 314  | Next Page >