StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POJQuery if then else using URL parser plugin quest for elegance take 2
text
Body
copied!<p>This is my second question about this topic, the original question can be found here: <a href="https://stackoverflow.com/questions/788068/jquery-if-then-else-using-url-parser-plugin-there-must-be-a-more-elegant-solutio">JQuery if then else using URL parser plugin, there must be a more elegant solution!</a></p> <p>If you are sitting comfortably I shall begin!</p> <p>I have built a web page which contains a list of questions. Each question has an answer contained in a Div after it. The HTML looks like this:</p> <pre><code><div class="questions_main_box"> <h2>common questions:</h2> <ul> <li> <h3 id="question1">question number 1</h3> <div id="answer1"> answer number 1</div> </li> <li> <h3 id="question2">question number 2</h3> <div id="answer2"> answer number 2</div> </li> etc etc... </ul> </div> </code></pre> <p>I have written some code using jQuery to adjust the way this list behaves. The idea is that all the answer Divs are hidden by jQuery, they are then revealed in one of two ways:</p> <p>Either the user clicks the relevant h3 header</p> <p>or</p> <p>The user clicks on a link to one of the questions from another page.</p> <p>If the user is coming from another page, the question that they clicked should be displayed and all the others hidden.</p> <p>I've made this work but my code is rather inefficient. I was furnished with an answer in my previous go at explaining this issue, but the answers I received had an undesirable side effect: They stopped the menu from displaying any answers unless there was an anchor link in the URL. So for instance:</p> <p><a href="http://mydomain.com/questions.html" rel="nofollow noreferrer">http://mydomain.com/questions.html</a> would not work</p> <p>but </p> <p><a href="http://mydomain.com/questions.html#question1" rel="nofollow noreferrer">http://mydomain.com/questions.html#question1</a> would work!</p> <p>I need for both to work! As I said my version does work in both ways but is pretty clunky and I'm sure there must be a better way of expressing it. Here's the code that could be more efficient:</p> <pre><code>if ($.url.attr('anchor') == 'question1'){ $('#answer2, #answer3, #answer4, #answer5, #answer6, #answer7, #answer8').hide(); $.scrollTo('#question1'); } else if ($.url.attr('anchor') == 'question2'){ $('#answer1, #answer3, #answer4, #answer5, #answer6, #answer7, #answer8').hide(); $.scrollTo('#question2'); } else if ($.url.attr('anchor') == 'question3'){ $('#answer1, #answer2, #answer4, #answer5, #answer6, #answer7, #answer8').hide(); $.scrollTo('#question3'); } else if ($.url.attr('anchor') == 'question4'){ $('#answer1, #answer2, #answer3, #answer5, #answer6, #answer7, #answer8').hide(); $.scrollTo('#question4'); } else if ($.url.attr('anchor') == 'question5'){ $('#answer1, #answer2, #answer3, #answer4, #answer6, #answer7, #answer8').hide(); $.scrollTo('#question5'); } else if ($.url.attr('anchor') == 'question6'){ $('#answer1, #answer2, #answer3, #answer4, #answer5, #answer7, #answer8').hide(); $.scrollTo('#question6'); } else if ($.url.attr('anchor') == 'question7'){ $('#answer1, #answer2, #answer3, #answer4, #answer5, #answer6, #answer8').hide(); $.scrollTo('#question7'); } else if ($.url.attr('anchor') == 'question8'){ $('#answer1, #answer2, #answer3, #answer4, #answer5, #answer6, #answer7').hide(); $.scrollTo('#question8'); } else if ($.url.attr('anchor') != 'question1, question2, question3, question4, question5, question6, question7, question8'){ $('.questions_main_box ul li div').hide(); }; </code></pre> <p>It works fine but is quite clunky, in it's current incarnation it also means that if I want to add more questions and answers I have to add them explicitly to the list(s) of ID's. It would be far better not to have to do this!</p> <p>Just so you have the whole picture here is the rest of the code:</p> <pre><code>$('.questions_main_box h3').addClass('js_main_box'); $('.questions_main_box h3').hover( function(){ $(this).addClass('js_main_box_highlight'); }, function(){ $(this).removeClass('js_main_box_highlight'); } ); $('.questions_main_box h3').click( function(){ if ($(this).next().is(':visible')){ $(this).next().hide('fast'); } else if ($(this).next().is(':hidden')){ $(this).next().show('fast'); } } ); </code></pre> <p>So all of this works as is, and I'm really just fishing for ways to make it more efficient. </p> <p><del>I have found one problem with what I am doing though, and for the life of me I can't work out why it is happening or how I would go about fixing it:</p> <p>The problem is only in Firefox (I have tested 3.0.9 and 3.1b3)</p> <p>When I click on one of the anchor links to be taken to the relevant question and answer, Firefox will jump to the right page, and the right answer will be visible but the page will not be vertically scrolled to the correct place where the anchor tag begins. This means that quite often the question that the user clicked on is not visible on the screen when they first arrive at the question and answer page! This only happens in Firefox. Safari and Opera go to the right place. I'm sure it must have something to do with the Divs being hidden, as when the javascript is turned off and the list is being displayed normally the anchor tags work fine in Firefox. I find this really really odd, and I have no clue how it might be fixed or if it is just a bug with no workaround. Any info on either of my issues would be gratefully received. </del></p> <p>Thanks for taking the time to look at this!</p> <p>Ian.</p> <p>PS </p> <p>I'm using the JQuery URL parser plugin found here: <a href="http://projects.allmarkedup.com/jquery_url_parser/" rel="nofollow noreferrer">http://projects.allmarkedup.com/jquery_url_parser/</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload