SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Fading and Changing text

    I have three image buttons on page.

    text is under buttons and table has it.

    When I click one of buttons, text must change. So, I have 3 distinct text.

    sample (when clicked, visible text in table)

    1st button => a

    2nd button => b

    3rd button => c

    All text will look with fading. I mean jquery library. But I don't know using

    I have a lot example from web, but I really don't know where codes will be


    Could you show simple samples like I described...

    Thanksssss right now!

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what's wrong?

  3. #3
    SitePoint Addict aniltc's Avatar
    Join Date
    Nov 2006
    Location
    INDIA
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can u explain little more?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    I'm going to use this post as an opportunity to have a little rant about better ways to do JavaScript.

    For your image buttons you'll be wanting onclick events for them, and a way of attaching that event to the image. The lazy old way to attach an event to each element with the onclick attribute, but then you are embedding JavaScript directly in the html code which is a bad thing to do. The better way is to use an id attribute and have the JavaScript do the rest from there.

    Code HTML4Strict:
    <!--The bad way-->
    <input type="image" src="..." onclick="doSomething();">
     
    <!--The good way-->
    <input id="myImage" type="image" src="...">

    Code Javascript:
    // The good way continued
    document.getElementById('myImage').onclick = doSomething;

    Why is it bad to have JavaScript in the HTML file? Think about how you handle CSS with HTML. You wouldn't use style attributes in the html, right? You would do it properly with a class name and have the style outside in a .css file to separate the presentation from the content.

    It's the same deal with JavaScript. Have the javascript in a .js file and use id attributes to indicate where you want things to be done. Then the HTML remains the content that it should be, and isn't cluttered with unrelated presentational or behavioural code.

    When there are several elements that you want to attach events to, there are two ways of using id attributes to attach events. One is where you apply a unique id to every element that you want affected, and the other is where you use just one id attribute to indicate a top level, then let the script do the rest for you.

    Code HTML4Strict:
    <!--The bad way-->
    <div id="myImages">
        <img id="myImage1" type="image" src="...">
        <img id="myImage2" type="image" src="...">
        <img id="myImage3" type="image" src="...">
    </div>

    Code Javscript:
    // Code for the bad way
    for (var i = 1; i < 4; i++) {
        document.getElementById('myImage'+i).onclick = doSomething;
    }

    Once again stepping across to relating things to CSS, it's not very good to apply multiple class names when you could use just the one CSS class and use element selectors to indicate what parts to apply the styles to.

    It might seem obvious that using multiple id names is a bad idea (when another one is added the script doesn't work properly), but if it's so obvious then why do people give multiple identifiers to elements they want to use scripts for. Mostly it's because they don't know a better way.

    There is a much better way to work with multiple elements.

    Code HTML4Strict:
    <!--The good way-->
    <div id="myImages">
        <img type="image" src="...">
        <img type="image" src="...">
        <img type="image" src="...">
    </div>

    Code Javascript:
    // Code for the good way
    var container = document.getElementById('myImages');
    var elements = container.getElementsByTagName('img');
    for (var i=0; i < elements.length; i++) {
        elements[i].onclick = doSomething;
    }
    // Or with jQuery
    $('#myImages img').click() = doSomething;

    So, after all of that, the next message gets back to the question at hand.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Apply an identifier around the image buttons so that JavaScript can apply the event to the buttons.

    I know that you're wanting to use jQuery, but it has trouble doing fade techniques on Firefox. Something like Scriptaculous does a much better job across a wide range of browsers. Despite that though, here is how to do what you're after with jQuery.

    With the text, if there is no JavaScript you want the text to still be visible. This is why you should use JavaScript to hide the text. If JavaScript is working the text will be hidden and ready to go, if there is no JavaScript the text will still be available.

    Thanks to these considerations, the HTML for this remains really simple.

    Code HTML4Strict:
    <table>
        <tr id="textReveal">
            <td>
                <input type="image" src="...">
                <p>Some text</p>
            </td>
            <td>
                <input type="image" src="...">
                <p>Some text</p>
            </td>
            <td>
                <input type="image" src="...">
                <p>Some text</p>
            </td>
        </tr>
    </table>

    Let us now use some jQuery to attach the events and hide the text. If you have no other input elements within the id selector you can use just '#revealText input' however if you do have other input elements, '#revealText input[type="image"]' limits the match to just the image buttons.

    Code Javascript:
    $('#revealText input[type="image"]').each(function() {
    	$(this).click(revealText);
    	$(this).next().hide();
    });

    When the button is clicked, we want to fade in that button's text, but also fade out the text for the other buttons. This is easily achieved by walking through each button, fading in the text if it's the one that was clicked, and fading it out if it's not.

    Let's update the above code.

    Code Javascript:
    $('#revealText input[type="image"]').each(function() {
    	$(this).click(function() {
    		var self = this;
    		$('#revealText input[type="image"]').each(function () {
    			if (self === this) { // the one that was clicked
    				$(this).next().fadeIn('slow');
    			} else {
    				$(this).next().fadeOut('slow');
    			}
    		});
    	});
    	$(this).next().hide();
    }
    Last edited by paul_wilkins; Jan 30, 2008 at 16:32.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    WowwwWwW

    Perfect! Thank you a million times ^^


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •