JQuery :: Trying To Get More Efficient With Coding?
Jul 1, 2009
This is a FAQ page I built with custom jquery function that toggles the answers open/closed on click of a question, and Im just wondering if anyone has a suggestion to make the code leaner and meaner:
I have two grids, they both display buttons. One grid displays numbers, true or false and yes or no, and the other grid displays letters, true, false, yes and no.
The second grid is not displayed in the code (used css to not display second grid buttons (.answerBtns)) Now using the getButtons() function, if the user selects button "1" in first grid (the grid which you have to open using (Open Grid) link, then it should display button "A" in second grid, if user selects button "2" in first grid, then it should displays buttons "A" and "B" in second grid, if "3" then display "A", "B" and "C" and so on.
Now except using if statements and stating which buttons should be displayed and not displayed depending on the button chosen in first grid, is there a more efficent way of coding this so that the display of buttons in second grid depends on what is selected in the first grid?
If it is using an array can somebody show a sample of this in their answer. You can just do it for one example and then I should be able to use that to fill it for the other buttons.
Since jQuery parses the entire dom first, is there any efficiency gain in directing it via the entire CSS chain rather than directly to an ID? That is, if I have a Div with an ID of "foo" and it contains a P with an ID of "bar", is there any speed advantage in using $(div#foo p#bar) as opposed to just using $(p#bar), assuming jQuery would be more efficient if it had both indexes?
I am very exciting about jQuery but a am not programmer and the way I write functions is probably not most efficient. For example I have 12 collapsible panel that I need to control. Is there better way of writing this?
I am populating a number of Select boxes on the server-side with a large number of options. I'd like to get the response size down without taxing the client browser too much. What do you think is the most efficient way to approach this problem?
Here are some considerations: The option text/values do not change very often, but could potentially change in the future. The page that holds the select boxes should never be cached, there are other aspects of the page that need to remain fresh. Firebug with YSlow is saying that the primed cache size of the page is 300Kb with all the select dropdowns and options, if I remove the options, the primed cache size of the page is 80Kb. I am considering breaking out the text/value pairs for the select boxes into a separate file that is cache-able calling it "valueTextPairs.js" and referencing it with a query string and some sort of server-generated MD5 hash of the data, so that if any of the values change, the client's cached version will be replaced by the latest version. Like so:[URL]...
Provided I do this, I anticipate that the primed cache size of the page will be reduced down to 80Kb (which I like) -- however, before I take the plunge, I am curious what you all think the performance effect will be?
I know the number of bytes on the wire will be reduced, but will this put a lot of additional pressure on the client's browser because I'd need to traverse the name/value pairs and add the options to the select boxes dynamically on the client end? If it seems reasonable to do this, what jQuery approach would be the most efficient? $('#selectId').html(options) with options = one big string? Adding each child option to the select in a loop? Something else?
Some client end folks are using IE6 so I am trying to tax the browser as little as possible, while also reducing the size of each request, trying to find a happy medium..
I have been starting to use Javascript a lot lately and I wanted to check with the "group" to get your thoughts on code efficiency. First, is there a good site/book that talks about good and bad ways to code. The reason I ask is because I was just thinking about the following...which is better and/or why?
document.forms["myform"].elements["txtname"].value or document.myform.txtname.value
I have some tables with rows greater than 100 and this brings client-side sorters to their knees... Any recommendations on a good, front-end table sorter?
So basically by using jQuery you are able to completely separate your HTML from your js which is great.
I work with templates most of the times which are maintained by designers who don't code so the code/design separation works marvells for me.
One thing that is not working in my workflow is that in jQuery, since you address HTML using CSS, the designer might feel that all of a sudden those nice divs don't need to have borders any more. So they go out and change the template, removing some classes that you have used to reference the HTML in your js code. Result: your code doesn't work anymore.
I'd like to know how people are dealing with this kind of thing. How do they make sure the designers don't mess with their classes/ids, etc while maintaining the designers' freedom to do their job.
I have a nice search engine but its seems i can't put it twice on the same page: <script language="JavaScript"> function startSearch(){ searchString = document.searchForm.searchText.value; if(searchString != ""){ searchEngine = document.searchForm.whichEngine.selectedIndex + 1; finalSearchString = ""; if(searchEngine == 1){ finalSearchString = "[URL]" + searchString; } .....
How to put the code twice in the html page without creating a conflict as a result of identical codes?
I'm currently modifying a php controlled website and wish to distinguish between javascript and non-javascript browsers in order to decide which pages to display. I have a single php controller script which "includes" a number of html pages. I want to ensure that I cater for both javascript and non-javascript browsers (so functionality is the same, only the javascript pages have a far better look and feel to them).
Therefore I would like to code something along the lines of :
Code: if (javascript_browser=='true') { include './javascript_page1.html.php'; exit();
Firstly it generates two numbers. One is the sum of the CharCodes and the other is the product of multiply each of the charcodes together and usisng the Modulus function.
If the text string is correct, the string is then used to decode (via a relatively simple crypt) another string, which then gives you the correct target url.
I hope that makes sense - if it doesn't, its pretty unimportant as the question I have is as follows :
In javascript, how do I code something that allows me to cycle through all the possible text strings. Ideally, I would like to read from a dictionary file and then start a brute force.
Throughout each cycle, I imagine you just set input_user (in this case) to the value of the next line in the file. For a dictionary attack I imagine. That bit isn't too tricky I don't think but I can't get my head around it. Maybe more coffee would help?
And I'm sure struggling to put together a brute forcer so I turn to you guys and gals to ask if you could help me and point me in the right direction on how to code this.
I'm assuming also that the code we end up with, would be generically useful too as in we could vary the output (going to input_user) in this instance to another variable and use it with another script?
I need advice about creating an order form (I was sent here from the General Web Building forum!) and I have been told that JavaScript is the way to go - can anybody help with the following (I know nothing about Javascript really).
I have an order form and plan to have the data emailed to me (I have FormMail script installed on my server). The form will have the following fields:
Reference Number Size / Cost Quantity Grand Total
Clients will enter the ref no., choose a size/ cost (radio-button), and quantity (text box). I plan to accept details for about different items. I just want the total cost to be displayed in a box at the bottom before the form data is sent to me.
Can anybody point me in the right direction of how I might go about this? Tutorials / sample code etc.
I've created a website for a client for their business, and the javascript is working in Safari & Mozilla, but not in IE. In IE you can click the image, but nothing activates. The ability to move from left to right to view images still works however. I'm wondering if having both of the javascript capabilities is fighting with the IE browser?I would love to hear of a solution - I'm not an expert in Javascript by any means.
Just wondering if someone can point me where I can get the coding for the same style navigation on [URL]..I know its not flash, but I'm guessing its done by javascript?
When I change some JS code I often want to find all the files it might affect. To do this it is easy to search the directory containing my files with Windows Explorer.
But it appears to find only words that would appear on the webpage, and even HTML coding. But it doesn't find JS coding IF the file name ends in .html.
If I change the suffix to .js or .txt it finds the JS coding, but it's not practical to change the sufix of so many files for such a search.
I have to debug the error for eleave system for a company. when i do the testing i define that having an extra day for the service length at the system. i don't want you to settle the problem for me, just tell me where can i find the source to know where is the problem? at least i know where the souce it, so i can repair it.
In my JS file, I made sure to write the necessary html code for a menu using document.write statements (I call the JS file inside a div in my webpages).I know about escape sequences and I put backslashes before every special characters but my menu still does not appear. Maybe only a simple character is missing. The code do work when I write it directly in my html so there should be no errors in the code itself. Must be in the way I put it in my JS file.
I have completed the necessary function and it does not need any changes however from the "alert" I need there has to be double quotes surrounding the search 'Lboro'. (I know I may be making a meal of the coding however the lecturer wants us to follow this due to everyone being at different levels of programming). I have used the '' character however the double quotes do not end up in the position I require them?!
My Coding function findAnyU (s){ var a = s , b , c , d , e = -1; for (var i = 0 ; i < pages.length && e == -1 ; i++){ b = pages[i].indexOf('['); c = pages[i].indexOf(']'); d = pages[i].substring(b+1, c).toLowerCase(); e = d.indexOf(s.toLowerCase()); }
if(e >= 1) a += ' found' else a += ' not found' return (a) } alert (findAnyU('Lboro' , pages)); Current Alert = Lboro found
I need help setting up a form, I want to do some pretty neat things: It will say: What countries do you want to visit? [FIELD] Part 1: I want that when a user starts typing into the field, it will suggest under things that match what you have typed so far, sort of like facebook search does. So I would need a list of recognized country names. Now for example imagine I was using this, and I typed in M, it would list under a max of 5 valid entries begining with M, if I typed in Me, it would list the ones begining with Me, if I typed in Mex, it would show Mexico. Now the user would have to click this drop down suggestion to choose it.Part2: I want once a user clicks on a suggestion, it will "pop under" the input box or somewhere, with a "x" beside it to remove it. The user can now type in another country, and when it is clicked it too appears as a sort of "icon" under the input box or somewhere, with an "x" beside it. Clicking the x removes the country from the current list of countries. Once he is done, he goes on to other fields and the selected countries remain visible. Once a user submits the form, I want to get only the countries that were visible to him.
**An alternative idea, if this one is too complicated, would be to have a drop list with all countries in it, and once a person clicks one, it will remain and a "+" sign will appear under it. When pressed, another dropdown menu will appear so the person can choose another country from the second drop down, etc. OFC all selected countries can have an X to remove them. Idk how to do this either. how to do something like this, where do you recommend I start? Any ideas? I tried searching but I'm not sure what to call this so I couldn't find anything in the search.