attila2452 Posted January 13, 2012 Share Posted January 13, 2012 http://jsfiddle.net/attilahajzer/Marec/30/ How do i achieve this: you click a link and a paragraph shows up (div)and you click the link under it and the first div disappears and a new one appears,then you click the next link, and the content changes again , the previous div disappears, and a new one appears. for some reason my code isn't working... could i please get some help? Link to comment Share on other sites More sharing options...
dsonesuk Posted January 13, 2012 Share Posted January 13, 2012 <div id="quick-links-container"> <div id="quick-links"> <ul> <li><a href="#" id="website-design">Website Design</a></li> <li><a href="#" id="graphic-design">Graphic Design</a></li> <li><a href="#" id="wordpress">Wordpress</a></li> </ul> </div> <div id="quick-information"> <h3>Website Design</h3> <div class="website-design"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <a href="#">Website Design</a> </div><h3>Graphic Design</h3><div class="graphic-design"><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p> <a href="#">Graphic Design</a> </div><h3>Wordpress</h3> <div class="wordpress"> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p> <a href="#">Wordpress.org</a> </div> </div> <div style="clear: both"></div> with $(document).ready(function(){ $(function() { $("#quick-information").accordion(); }); }); Link to comment Share on other sites More sharing options...
attila2452 Posted January 13, 2012 Author Share Posted January 13, 2012 it doesn't do anything..... http://jsfiddle.net/attilahajzer/Marec/39/ Link to comment Share on other sites More sharing options...
dsonesuk Posted January 13, 2012 Share Posted January 13, 2012 Sorry I think i misunderstood what you wanted, I thought you want a accordian effect when you click the header. try this $(document).ready(function(){ $("#quick-information div").not($("#quick-information div").eq(0)).hide(); $('#quick-links ul li a').click(function(){$("#quick-information div").slideUp(); var classref= $(this).attr("id"); $("#quick-information ."+classref).slideDown(); }); }); Link to comment Share on other sites More sharing options...
attila2452 Posted January 13, 2012 Author Share Posted January 13, 2012 is there something wrong with this? http://hajzer.info/ I've sourced the jQuery library in my <head> and same with my jQuery. just visit the link, and view source, you'll see. for some reason its unresponsive Link to comment Share on other sites More sharing options...
dsonesuk Posted January 13, 2012 Share Posted January 13, 2012 You require 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js' or the latest version. EDIT: you have to add respective id ref to menu links as in <a id="website-design" href="#">Website Design</a> to <div class="website-design"> it use id ref to show the content with class name value that matches id value. Link to comment Share on other sites More sharing options...
attila2452 Posted January 13, 2012 Author Share Posted January 13, 2012 Okay, it works, but for some reason not fully. hajzer.info. when you click anything, it goes away. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 13, 2012 Share Posted January 13, 2012 see my last post edit Link to comment Share on other sites More sharing options...
thescientist Posted January 14, 2012 Share Posted January 14, 2012 you should learn to debug and look in your error console. I see two errors there that seem fairly significant. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 14, 2012 Share Posted January 14, 2012 you need two jquery library files to link to <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://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script> these are the two versions i use, but there maybe more up to date versions available. Link to comment Share on other sites More sharing options...
attila2452 Posted January 14, 2012 Author Share Posted January 14, 2012 did it. how do i make the links right? if i leave the link blank, the page refreshes, if i use '#' the page jumps to the top. what do i do in order to keep the page scroll at the same place when i clicked it, rather then it moving or the page refreshing? and is there a way I can have a default one (web design) and have a CURRENT class or something? Link to comment Share on other sites More sharing options...
dsonesuk Posted January 14, 2012 Share Posted January 14, 2012 $(document).ready(function(){$('#quick-links ul li a').each(function(){$(this).attr('href', 'javascript:void(0)');}); $("#quick-information div").not($("#quick-information div").eq(0)).hide(); $('#quick-links ul li a').click(function(){$("#quick-information div").slideUp(); var classref= $(this).attr("id"); $("#quick-information ."+classref).slideDown(); }); }); $('#quick-links ul li a').each(function(){$(this).attr('href', 'javascript:void(0)');});will force it to loop through all the menu list anchor links and replace '#' with 'javascript:void(0)' which will prevent from refreashing/loading the pageORreplace anchor tag with another element <b> or even <span>, the anchor is not require to link anywhere, just change css/jquery to target different element if used. Link to comment Share on other sites More sharing options...
attila2452 Posted January 14, 2012 Author Share Posted January 14, 2012 and then hoe about making an Active class. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 14, 2012 Share Posted January 14, 2012 $(document).ready(function(){ $('#quick-links ul li a').each(function(){$(this).attr('href', 'javascript:void(0)');}); $("#quick-information div").not($("#quick-information div").eq(0)).hide(); $('#quick-links ul li a').click(function(){$("#quick-information div").slideUp();$('#quick-links ul li a').removeClass('active');$(this).addClass('active'); var classref= $(this).attr("id"); $("#quick-information ."+classref).slideDown(); }); }); Link to comment Share on other sites More sharing options...
attila2452 Posted January 14, 2012 Author Share Posted January 14, 2012 One more thing... a default one. (web design) for when the a person first comes on the website, web design will already be active. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 14, 2012 Share Posted January 14, 2012 This part is wrong in your site $("#quick-information div").not($("#quick-information div").eq(0)).hide(); On onload it is set to hide all div content, BUT not the first, It must be exactly as above or it will not work. Link to comment Share on other sites More sharing options...
attila2452 Posted January 14, 2012 Author Share Posted January 14, 2012 are you good in CSS swell because I'm having a float problem with my actual page content and sidebar. ill make a thread. http://w3schools.invisionzone.com/index.php?showtopic=41465 Link to comment Share on other sites More sharing options...
sdoty Posted January 15, 2012 Share Posted January 15, 2012 I am using the jquery show/hide code in a web page in six different spots. All are working fine once the page downloads. The problem is that the page does not download immediately. What could be causing this? Link to comment Share on other sites More sharing options...
dsonesuk Posted January 15, 2012 Share Posted January 15, 2012 The code targets a id, so should really only target one area only, id ref must be unique, within a page. Web page loading, is mainly slowed because of use of large size image files, without having access to page can't give any more advice than that. Link to comment Share on other sites More sharing options...
sdoty Posted January 15, 2012 Share Posted January 15, 2012 After sleeping on it, I thought I'd take out the six references to <script type="text/javascript" src="jquery-1.7.1.js"></script> as it appeared the page was searching for something. I found that having only one reference made the download quicker and all code still worked. Below are two of the six parts of code that I'm using. Is there anything else that could be removed that may be affecting the download time? Also, can you point me in the direction to figure out how to make a hand appear as the student hovers over the "Click here" text so that the mouse pointer changes to a hand signaling that the text is a clickable area? As you can tell, I'm very new to jquery code. The W3Schools tutorial page where we can use trial and error to test the code is a great hands-on learning tool!!! I had optimized all graphics in the page and made pop-up windows to the two files that have audio in them. Thank you for replying and all of your helpful suggestions. <script type="text/javascript" src="jquery-1.7.1.js"></script> <script type="text/javascript">$(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideDown("slow"); });});</script><style type="text/css">div.panel, p.flip { padding:0px; text-align:center; border:0px none #CC3300; font-family: "Times New Roman", Times, serif; font-size: 18pt; font-style: normal; line-height: 200%; font-weight: normal; text-decoration: none; color: #CC0033; vertical-align: middle; white-space: normal; display: inline; height: 50px; width: 400px;}div.panel { height:50px; display:none; font-family: "Times New Roman", Times, serif; font-size: 18pt; font-style: normal; line-height: 200%; color: #CC0033; font-weight: bold; width: 400px; padding: 0px; border: 0px none #CC3300; text-align: center; vertical-align: middle;}</style> Took this out: <script type="text/javascript" src="jquery-1.7.1.js"></script>I had it in there six times for each block of code where I was providing the students a question with a hidden answer, then they could click to see it. <script type="text/javascript">$(document).ready(function(){ $(".flip2").click(function(){ $(".panel2").slideDown("slow"); });});</script><style type="text/css">div.panel2,p.flip2{ padding:0px; text-align:center; border:0px none #CC3300; font-family: "Times New Roman", Times, serif; font-size: 18pt; font-style: normal; line-height: 200%; font-weight: normal; text-decoration: none; height: 50px; width: 400px; color: #CC0033; vertical-align: middle; white-space: normal; display: inline;}div.panel2{ height:50px; display:none; font-family: "Times New Roman", Times, serif; font-size: 18pt; font-style: normal; line-height: 200%; color: #CC0033; font-weight: bold; width: 400px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none;}</style><script type="text/javascript">$(document).ready(function(){ $(".flip3").click(function(){ $(".panel3").slideDown("slow"); });});</script> The code in the body for this is: <center> <div class="panel"> <p>May has 31 days.</p> </div> </center> <center> <p class="flip"><em>"Click here" to check the answer.</em></p> </center> <center> <div class="panel2"> <p>There are seven days in a week.</p> </div> </center> <center> <p class="flip2"><em>"Click here" to check the answer.</em></p> </center> Link to comment Share on other sites More sharing options...
dsonesuk Posted January 15, 2012 Share Posted January 15, 2012 You only require one link to the jquery file, and it must be above any jquery code. To use a pointer cursor for p element add cursor: pointer; Also you are making more work for yourself than required, by duplicating same styling for each flip and panel just use one example below html <center><div class="panel"><p>May has 31 days.</p></div></center><center><p class="flip"><em>"Click here" to check the answer.</em></p></center><center><div class="panel"><p>There are seven days in a week.</p></div></center><center><p class="flip"><em>"Click here" to check the answer.</em></p></center> css p.flip { cursor: pointer;} div.panel, p.flip {padding:0px;text-align:center;border:0px none #CC3300;font-family: "Times New Roman", Times, serif;font-size: 18pt;font-style: normal;line-height: 200%;font-weight: normal;text-decoration: none;color: #CC0033;vertical-align: middle;white-space: normal;display: inline;height: 50px;width: 400px;}div.panel {display:none;font-weight: bold;} jquery $(document).ready(function(){$(".flip").click(function(){$(this).parent().prev("center").children(".panel").slideDown("slow");});}); will give exactly same result with half the css code, which all helps in loading the page quicker. Link to comment Share on other sites More sharing options...
sdoty Posted January 15, 2012 Share Posted January 15, 2012 Thank you, thank you, thank you!!! The code works beautifully! The page now downloads quickly. If you don't mind, could you give me a little explanation on this part of the jquery code and why I don't have to uniquely name each of the panels and flips. When I first experimented with the code, they were working all together, not individually, do that is why I set up six indivual blocks of code for each answer and named them differently. $(this).parent().prev("center").children(".panel").slideDown("slow"); Link to comment Share on other sites More sharing options...
dsonesuk Posted January 15, 2012 Share Posted January 15, 2012 $(this) = the element that was triggered by the onclick ($(".flip")) parent() is the parent element of .flip ('<center>') .prev("center") is the prev sibling element (<center> parent of .panel) .children(".panel") we now tell it to search through child elements with class .panel .slideDown("slow"); if found apply slideDown effect. Link to comment Share on other sites More sharing options...
sdoty Posted January 15, 2012 Share Posted January 15, 2012 Thank you for the explanation. This question is related to our discussion. Instead of clicking on text, the students would click on a button. How do I use my own designed graphic or button instead of the standard button that shows up in this sample code? <html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $(".btn1").click(function(){ $("p").hide(); }); $(".btn2").click(function(){ $("p").show(); });});</script></head><body><p>This is a paragraph.</p><button class="btn1">Hide</button><button class="btn2">Show</button></body></html> Link to comment Share on other sites More sharing options...
thescientist Posted January 15, 2012 Share Posted January 15, 2012 In the future, it would be better etiquette to start your own thread for your own question, rather than just come into someone else's and hijack it. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.