WordPress.org

1. glimpse
   Member
   Posted 1 year ago #

   Hi,

   The issue I'm started this letter is 'cos I'm bulding up custom theme
   (based on twentyten - I'm just learning, so it's a good place to start =)

   (i know that it's better to use child theme, don't talk 'bout that. I have my reasons for editing twenty ten that are basicly for self education, to learn and understand full code)

   Recently I've found something really interesting:
   http://demo.flashxml.net/neutral/shortcodes/toggles/

   I figure out, they are using javaScript for that,
   but i couldn't understant how to impliment that function on my own work.

   I'd like to ask anyone who is proficient with Java to point out a piece of code that it's responsible for that and how to implimnet that corectly on let's say default (twentyten) theme?

   You may ask: What I would like to achieve?..
   Well I would like my posts in the loop to be shown only titles that would expand after You click. - that's the thing I want and I found that demo I've posted ealier is just what i need.

   Theme files You can donwload here http://www.flashxml.net/neutral.html

2. doodlebee
   Member
   Posted 1 year ago #

   First off, Java isn't the same thing as javascript. They are two completely different platforms.

   Second, what you're looking for is called "jQuery Toggle". (slideToggle is prettier and requires some easing)

   You can read the documentation there (and see demos, explanations, etc.) that will tell you what's going on/how to use it.

3. glimpse
   Member
   Posted 1 year ago #

   hi, doodlebee.

   ow, feel so stupid..but I heven't got any mind that these two are diferent things =))

   anyway, I found these links ealier today and read down, but..unfortunately, nothing came clear =)))

   Gues, at this particular moment I'm too stupid to conect things..

   I need more reading =)

   Any tips, simple tuts, whatever?..

   tom

4. doodlebee
   Member
   Posted 1 year ago #

   Hi Tom,

   there's lots of tutorials out there already on it. I've used several of them on sites for clients. I actually did it just recently on one site (they wanted the "read more" link to expand further content, rather than go to the single post page). How that was done was...yep - I created my own function. In the index.php file, I used it in place of the_content:

   <?php toggle_read_more('Read the rest of this entry &raquo;'); ?>

   And the function looked like so:

   function expand_header_js() {
     global $post;
     if(have_posts()) : while(have_posts()) : the_post();
       $text = $post->post_content;
       $find = strpos($text, '<!--more-->');
   	if($find !== false) {
   		$ids[] .= $post->ID;
   	}
   		$commentIDs[] .= $post->ID;
   
     endwhile; endif; wp_reset_query;
   
       $header  = "\n" . '<!-- toggle read more -->' . "\n";
       $header .= '<script type="text/javascript">' . "\n";
       $header .= 'var $toggleReadMore = jQuery.noConflict();' . "\n";
       $header .= '$toggleReadMore(document).ready(function() {' . "\n\n";
   
       if(!empty($ids)) {
        foreach($ids as $i) {
            $header .= "\t" . '$toggleReadMore("#expand-content-' . $i . '").hide();' . "\n";
            $header .= "\t" . '$toggleReadMore("#expand-link-' . $i . '").click(function() {' . "\n";
            $header .= "\t\t" . '$toggleReadMore("#expand-content-' . $i . '").toggle("fast");' . "\n";
            $header .= "\t\t" . '$toggleReadMore(this).text($toggleReadMore(this).text() == "Read the full article" ? "Hide the article" : "Read the full article");' . "\n";
            $header .= "\t\t" . 'return false;' . "\n";
            $header .= "\t" . '});' . "\n\n";
          }
       }
   
       foreach($commentIDs as $c) {
          $header .= "\t" . '$toggleReadMore("#comments_div-' . $c . '").hide();' . "\n";
          $header .= "\t" . '$toggleReadMore("#expand-comment-link-' . $c . '").click(function() {' . "\n";
          $header .= "\t\t" . '$toggleReadMore("#comments_div-' . $c . '").toggle("fast");' . "\n";
          $header .= "\t\t" . '$toggleReadMore(this).text($toggleReadMore(this).text() == "Leave a Comment" ? "" : "Toggle Comment Form");' . "\n";
          $header .= "\t\t" . 'return false;' . "\n";
          $header .= "\t" . '});' . "\n\n";
       }
   
       $header .= '});' . "\n";
       $header .= '</script>' . "\n";
   
       $header .= '<!--/end toggle read more -->' . "\n\n";
   
     echo $header;
   }
   
   function toggle_read_more($type = '') {
   	global $post;
   	$text = $post->post_content;
   	$id = $post->ID;
   
   	$find = strpos($text, '<!--more-->');
   	if($find !== false) {
   	  $text = explode('<!--more-->', $text, 2);
   	  $pretext = apply_filters('the_content', $text[0]);
   	  $posttext = apply_filters('the_content', $text[1]);
   
   	  $before = '<div id="expand-content-' . $id . '" class="expand-print">' . "\n";
   
   	  $after  = '<!-- end expandable -->' . "\n" . '</div>' . "\n\n";
   	  $after .= '<a class="more-link" href="" id="expand-link-' . $id . '">Read the full article</a>' . "\n";
   
   	  $content = $pretext . $before . $posttext . $after;
   
   	} else {
   		$content = apply_filters('the_content', $text);
   	}
   
   	if($type == 'return') return $content;
   	else echo $content;
   }

   and you had to have the jquery enqueued. The theme I did for this client is massive (seriously customized) so I *think* I have everything here for just this functionality, but I'm not 100% sure I didn't forget something! bu hope it gets you started, at least. :)

5. glimpse
   Member
   Posted 1 year ago #

   mm, thanks for that, doodlebee. I'll try to impliment this today. I'm still playing with styling issues and trying to get rid as much as I can ( tomglimpse.com ), but I think I'm more or less ready to go and all the styling I'll leave for evergoing proces. Thanks for Your valuable tips*

   tom

Topic Closed

This topic has been closed to new replies.