Member Avatar for 3xxx

I like the sample here

try to click show 1 , show 2, .... (grey / green)

but I don't know how to display different content for different show --- so please help === it should be p (for 1 2 3 and 4)
just have to read the very last line of the following code

$(".handle").bind("click",function() {

                    if($('.handle[@id*='+$(this).attr("id")+"]").attr("rel") != "selected"){
                    $('.handle').attr("rel","");

                    $('.handle').css({background:"url(images/blade.png)"});
                    $(this).css({background:"url(images/blade_sel.png)"});


                    $('div[@id*=content]').animate({className:"content"},500,"backin"); 

                    $('div[@id*=hdiv]').animate({className:"start"},500,"backin");                  
                    $('#hdiv'+$(this).attr("id")).animate({className:"end"},500, 'easein'); 

                    $('#content'+$(this).attr("id")).animate({className:"endcontent"},500,'easein');

                    $('.handle[@id*='+$(this).attr("id")+"]").attr("rel","selected");
                    }

            });

            //      $(".content p").html("Lorem ipsum...CONTENT here.");

====

if the question is not clear, please let me know, I will put all the code download source here , thanks

Edited by happygeek because: fixed formatting
  • 2 Contributors
  • 2 Replies
  • 373 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by 3xxx

Dani AI

Generated

Brief clarification and a practical approach for (and thanks to for the jQuery tip).

The reason every "show" panel currently shows the same text is that a single broad update (for example calling .html() against a selector that matches every panel) replaces all panels at once. The posted selectors also use the old [@id*=...] syntax, which is not valid in modern jQuery — use CSS-style attribute selectors like [id*="..."] or, better, data attributes or explicit IDs for reliability. Also note the animate({className:...}) pattern depends on jQuery UI class-animation support; without that plugin those calls won't do what is expected.

A simple, maintainable pattern is to give each handle a data-target (or a predictable id) and keep one content element per panel. Update or show only that panel on click. Example:

$('.handle').on('click', function(){
  var id = $(this).data('target');    // e.g. "1"
  $('.content').hide();               // hide all panels
  $('#content' + id).show();          // show the one that belongs to the clicked handle
  $('.handle').removeClass('selected');
  $(this).addClass('selected');
});

For dynamic content, store a URL or key in a data-url/data-key on each handle and load it into the corresponding panel with .load() or $.getJSON(); mark the panel as loaded (via .data('loaded', true)) to cache and avoid repeated requests.

Troubleshooting checklist: use a modern jQuery (as suggested); replace any [@...] selectors with standard CSS attribute selectors; prefer .on() instead of .bind(); if animating class changes include jQuery UI class animations or switch to addClass/removeClass with CSS transitions. This removes the need for a switch/case and keeps each panel's content independent and easy to maintain.

Recommended Answers

All 2 Replies

Member Avatar for phper

I'm assuming you have downloaded or got a link to the latest Jquery version on your page. e.g
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

Member Avatar for 3xxx

I think this effect -- it is good enough for you to try out too
try to see whether you could change the word


====

after posting last time

I did look into it, got some 50% success

basically, in the demo, it show same text -- for show 1 , show 2 , show 3 and show 4 (exactly the same)

FAIL BIT -- I can't change the code and become a case statement -- for that file

maybe you could try and let me know


----

however, I bypass the MAIN file and able to get different text into show1, show 2 , show 3.. Although I got success in this method --- it will not be as cool as the ABOVE PROPOSED METHOD

---
for the json thing and the relative path -- - I do know how to get it right

===
it took me about 2-3 hr to understand the program
Now, I am looking into another program that make the menu bar look like VISTA style


===
yesterday, I fail to install RUBY RAIL GEMS instantRAIL -- another ajax development environment -- interested to try that??

Thanks -- let me know whether you could get some break through

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.