SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast amboy00's Avatar
    Join Date
    Jun 2006
    Location
    Dallas, TX
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show Label with scriptaculous

    The goal is to make the "label" appear when the main div is clicked.

    Code HTML4Strict:
    <div class="photo" onclick="showlabel(this);">
    	<img src="names_02.jpg" alt="image" width="561" height="52" />
    	<div class="label"><img src="names_01.jpg" alt="image" width="590" height="52" /></div>
    </div>

    Code JavaScript:
    function showlabel(div) {
    	var label = div.childNodes;
    	new Effect.BlindRight(label[1]); 
    }

    This will affect the first <img>, but I want the <div> surrounding the second <img> to get the effect.
    --chris

  2. #2
    SitePoint Addict scoobasteve1982's Avatar
    Join Date
    Apr 2007
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Try this...

    Quote Originally Posted by amboy00 View Post
    The goal is to make the "label" appear when the main div is clicked.

    Code HTML4Strict:
    <div class="photo" onclick="showlabel(this);">
    	<img src="names_02.jpg" alt="image" width="561" height="52" />
    	<div class="label"><img src="names_01.jpg" alt="image" width="590" height="52" /></div>
    </div>

    Code JavaScript:
    function showlabel(div) {
    	var label = div.childNodes;
    	new Effect.BlindRight(label[1]); 
    }

    This will affect the first <img>, but I want the <div> surrounding the second <img> to get the effect.
    Chris...

    Scriptaculous is great, isn't it? Anyway, here's what I would do. First off, I prefer to use ID's because scriptaculous makes it that much easier. I've provided two different ways to do this. Once quick note, I'm using a fade in. I haven't messed with the BlindRight or BlindLeft in Scriptaculous because they are effects written by outside sources and aren't in the orig. Framework (at least I think so). For these types of effects I typically use the EXT framework (http://www.extjs.com) which is absolutely CRAZY and RAD. Anyway, I've use a fade in effect to demo. Here goes:

    First way:

    JavaScript function:
    Code:
    function fadeElementIn(objectID) {
         new Effect.Appear(objectID, {duration: .3});
    }
    Then you can call this function on basically any element...so your HTML code could look something like this:

    HTML Code:
    <div class="photo" onclick="fadeElementIn('imgDiv');">
    	<img src="names_02.jpg" alt="image" width="561" height="52" />
    	<div class="label" id="imgDiv" style="display:none;"><img src="names_01.jpg" alt="image" width="590" height="52" /></div>
    Notice that I added an ID to the inner div and added an inline style to not display it when the page loads. The Effect class will take care of finding the element for you. It's worth nothing though that you can access elements via the class and id attributes using the following:

    Code:
    <script language="javascript">
    // to access by id the long way
    document.getElementById('idNameOfElement');
    
    // or w/ scriptaculous
    var obj = $('idNameOfElement');
    
    // or by class
    document.getElementByClass('classNameOfElement');
    </script>
    The other way to do these effects inline is like so...

    HTML Code:
    <div class="photo" onclick="new Effect.Appear('imgDiv',{duration: .3});">
    	<img src="names_02.jpg" alt="image" width="561" height="52" />
    	<div class="label" id="imgDiv" style="display:none;"><img src="names_01.jpg" alt="image" width="590" height="52" /></div>
    Hope this helps...

  3. #3
    SitePoint Enthusiast amboy00's Avatar
    Join Date
    Jun 2006
    Location
    Dallas, TX
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That works very well. When I manually set the id value then, yes, I can make this happen. At least now I know it can be done. :-)

    I suppose my problem really is that I'm working with repeating chunks of HTML that I want to apply this effect to.

    In this case I have repeating block similar to this:
    Code HTML4Strict:
    <div class="guest">
    	<h2 class="accordion_toggle">Headline 1</h2>
    	<div class="accordion_content">
    		<p>Some content here</p>
    	</div>
    </div>
     
    <div class="guest">
    	<h2 class="accordion_toggle">Headline 2</h2>
    	<div class="accordion_content">
    		<p>Some content here</p>
    	</div>
    </div>

    Without really knowing what I'm doing (again, just enough to be dangerous), I've gotten the html to change to this:

    Code HTML4Strict:
    <div class="guest">
    	<h2 class="accordion_toggle name1">Headline 1</h2>
    	<div class="label"><img src="images/on/names_1.jpg"/></div>
    	<div class="accordion_content">
    		<p>Some content here</p>
    	</div>
    </div>
     
    <div class="guest">
    	<h2 class="accordion_toggle name2">Headline 2</h2>
    	<div class="label"><img src="images/on/names_2.jpg"/></div>
    	<div class="accordion_content">
    		<p>Some content here</p>
    	</div>
    </div>

    I've added a unique class to each H2 and inserted a DIV after it.

    Code JavaScript:
    var verticalAccordions = $$('.accordion_toggle');
     
    verticalAccordions.each(function(h2, idx) {
    	h2.addClassName('name' + ++idx)
    	$(h2.next(0)).setStyle({
    	  height: '0px'
    	});
        h2.insert({
          after: (new Element('div', { className: 'label-off' }).insert(new Element('img',{ 
              src:'images/on/names_' + idx + '.jpg'
            })))
        });
    });


    The big idea is when I click on H2 the label behind it does its effect and the content does its effect (appears). When the label is clicked, every goes back.

    When I write it out manually (using individual ids and onclicks for each one), bravo, it works and my client thinks I'm cool. Since I'm pulling this from a table that changes, I suppose its just a matter of setting my template to populate the right info. But what I'm left with is not very good looking HTML.

    If that makes any sense.
    --chris

  4. #4
    SitePoint Addict scoobasteve1982's Avatar
    Join Date
    Apr 2007
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If an accordian is what you're looking for I suggest using the Ext framework (http://www.extjs.com). The crew over there just came out with version 2 and they have accordians, etc.


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
  •