Sasha (bleuclair) wrote in component_help,
Sasha
bleuclair
component_help

Scrollbars in entries

Hello there.
I've been  using Shrinking and Centering tutorial plus the Square components one.
Plus I added the scroll bars to entries so the Friendspage won't get stretched out...
But recently I've noticed that when my friends post youtube videos, I would get just empty entries instead...
So I found the updated version of shrinking&centering and the Squarecomponents work fine and I can see the videos now...
But the scrollbars tutorial makes the video disappear again... So I suppose it hasn't been updated...
I used this tutorial for scrollbars
http://community.livejournal.com/component_help/175714.html
And it also makes the Components round again...
I would really appreciate some help on putting the scrollbars into my entries, but so the videos would be shown as well...
Thanks in advance! )


Also I tried to add the scrollbars part from my old code. But it also makes the video disappear...

#####last added part

#########################

 

function Page::print_custom_head() {

"""

<style media="screen" type="text/css">

    table.fixed

    {

     table-layout:fixed;   

    }

    div.scrollentry

    {

     width:100%;

     overflow:auto;

     overflow-y:hidden;

     padding-bottom:17px;

    }

.sideHeader {

  width: 110px;

}

</style>

""";

} #end function#

 

#Once we've done that we can proceed to edit the entries so that they apply these new classes #and do all that stuff that we want them to ;).

 

### Override the printing of entries. This affects the Recent/Day pages, Friends pages, and Entry pages.

function print_entry(Page p, Entry e, Color bgcolor, Color fgcolor, bool hide_text) {

 

 

  # Print the anchor to be used in the page summary.

  if ($p.view=="friends") {

      """<a name="$e.journal.username$e.itemid"></a>""";

  } else { # for recent, day, entry pages.

      """<a name="item$e.itemid"></a>""";

  }

 

  var string noscroll ;

  if ($p.view == "recent" or $p.view == "friends") {

     $noscroll = "class=\"fixed\"" ;

  } 

 

var string content_top = """<td class="entryHolderBg" width="100%" valign="top">

<table cellspacing="0" cellpadding="0" border="0" width="100%">

<tr>

<td width="100%">

<table cellspacing="0" cellpadding="0" border="0" width="100%" $noscroll>

<tr>

<td width="1" class="medLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

<td class="medLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

<td width="1" class="medLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

</tr>

<tr>

<td width="1" class="medLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

<td class="entry">

""";

 

  # Print the header for the entry. It prints in the default form "[<icon> ]<time> <date>" where:

  #   <icon> is the security icon (ie. lock if protected, eye if private, or none if public)

  #   <time> is in the default time format (eg: 03:46 am)

  #   <date> is bold and in the "long" format (eg: November 25th, 2003)

  # The ordering can be adjusted however needed, and you can also modify the formats that date and time print in.

  # This can all be done in the red section below. For specifications of available formats or how to construct

  #   your own formats, you can see: http://www.livejournal.com/doc/s2/siteapi.core1.html#siteapi.core1.dateformats

  print_entry_header((defined $e.security_icon?"$e.security_icon ":"")+$e.time->time_format()+" <b>"+$e.time->date_format("long")+"</b>");

 

  print_system_box_top();

  """<table cellspacing="0" cellpadding="0" border="0" width="100%"><tr>""";

 

  # Check to see if we need to display a usericon and/or journal names, and if so, then print them

  # Cases - 1. We are viewing a friends page, so we need to display icons if they exist and journal/poster names

  #         2. We are viewing a recent/day/entry page, so we display only the icon if it exists and

  #            the user has set recent userpics on.

  # The code in red is the logic to decide whether or not to show the userpics. You can modify it as you see fit.

  if ($p.view=="friends" or ($*show_entry_userpic and defined $e.userpic) or $e.journal.journal_type=="C") {

     # Start the table that will hold the icon and/or names

     """

     <td valign="top" style="padding-right: 8px;">

     <table cellspacing="0" cellpadding="0" border="0" align="center">

       <tr>

         <td><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

       </tr>

     """;

     # Display the icon if it exists

     if (defined $e.userpic) { """

       <tr>

         <td><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="2" alt="" border="0" /></td>

         """;

         # If we are on the friends view, then we want to print the extra border around the image that have the colors

         # which are custom defined. If you don't like the colors or the border on the friends view, then you can just

         # remove the blue segments. By default the recent/day/entry pages have a border around the usericons. If a user

         # has a non-rectangular image, this may look strange, so you can replace the 1 with a 0 to remove the border.

         #

         if ($p.view=="friends") {

            """ <div style="padding-top: 3px; padding-left: 3px; padding-right: 3px; padding-bottom: 3px; background-color: """; print $bgcolor.as_string; """ ;" align="center">

            <img border="1" src="$e.userpic.url" width="$e.userpic.width" height="$e.userpic.height" alt="" style="border-color: """; print $fgcolor.as_string; """ ;" />

            </div> """;

         }else{

            """ <td align="center" class="userpic"><img border="1" src="$e.userpic.url" width="$e.userpic.width" height="$e.userpic.height" alt="" /></td> """;

         }

       """

       </tr>

     """; }

     # Display the journal and possibly poster name if we are viewing the friends page or any page on a community

     # This code will print the journal the entry was made on, and if the poster is different, will print the poster under it.

     # I made the names centered under the image, but if you want to keep them left aligned as in the original, then

     # remove the blue segments

     if ($p.view=="friends" or $e.journal.journal_type=="C") { """

       <tr>

         <td><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="2" alt="" border="0" /></td>

         <td align="center" class="ljuser">$e.journal""";

         if ($e.journal.username!=$e.poster.username) {"""

           <div align="center" class="ljuser">$e.poster</div>""";

         } """

         </td>

       </tr>""";

     }

     """

     </table>

     </td>

  """; }

 

  # Start the main entry text area.

#ATTENTION ALL THOSE ALREADY USING THE PRINT_ENTRY FUNCTION

#YOU HAVE TO REPLACE THIS PART OF YOUR CODE, NOT JUST ADD IT OR IT WON'T WORK.

print $content_top;

 

  # If the subject is not empty, then print it followed by the line to seperate it from the entry text

  # You can modify the lines in red if you want to adjust the way your subject prints, but the other lines must remain as is.

  if ($e.subject!="") { """

        <div class="entryHeader">$e.subject</div>

        <div class="entryDash"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></div>

      </td>

      <td width="1" class="medLine"><img src="http://stat.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

    </tr>

    <tr>

      <td width="1" class="medLine"><img src="http://stat.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

      <td class="entry">

  """; }

 

  """<div class="scrollentry">""";

  # Print the entry text.

  # If you want the entry text to be after the mood and music, then you need to do two things:

  #  - decomment the pink lines by removing the #'s from in front of them

  #  - comment out the blue lines by putting a # in front of them

  """ $e.text """;

 

  # Print Mood and/or Music Fields:

  # If we have a mood to print

  if ($e.metadata{"mood"}!="") {

    # first we need a spacer after the entry text

    """<br/><br/>""";

    # and then we print the mood label, followed by a mood icon if one exists, followed by the mood text.

    # If you want the mood icon to be after the mood text, then you need to change the order of the two lines in red.

    """<b> $*text_meta_mood : </b>""";

    if (defined $e.mood_icon) { """ $e.mood_icon """; }

    print $e.metadata{"mood"};

    """<br/>""";

    # if ($e.metadata{"music"}=="") { """<br/>"""; }

  }

  # If we have music to print

  if ($e.metadata{"music"}!="") {

    # If we didn't print a spacer because the mood was empty, then print one

    if ($e.metadata{"mood"}=="") { """<br/><br/>"""; }

    # then print the actual music label and the music

    """<b> $*text_meta_music : </b>"""; print $e.metadata{"music"};

    # """<br/><br/>""";

  }

 

  # """ $e.text """;

 

  # Close off the entry text area

"""</div>""";

  print_content_bottom();

 

  # This is where the fun stuff is!

  # Now we begin the area underneath the entry that holds the comments, link, and entry related buttons.

  """

  <table width="100%">

    </tr>

      <td width="50%" align="left" valign="center">

        <div class="entryComments">

        """;

        # First we print the comment links if the entry allows comments

        if ($e.comments.enabled) {

          $e.comments->print();

        }

        """

        </div>

      </td>

      <td align="center" valign="center">""";

        # Then print a permanent link to the entry.

        # I have this because I have my journal set to display comment links with "?nc=XX" tacked onto the end,

        # and when I'm copying and pasting links, it's annoying to have there. Also, if you want a link to

        # an entry that has no comments yet, the only link that's shown by default is the reply to link, and that

        # that includes "?mode=reply" which is also annoying to have to remove.

        # Essentially this is here for convenience. If you don't want it, remove the blue segment.

        """

<div class="entryComments"><span style="white-space:nowrap;"><b>( <a href="$e.permalink_url" class="commentLinks">$*text_permalink</a> )<b></span></div>

      </td>

      <td width="50%" align="right" valign="center">""";

        # Then the entry related buttons

        """<div class="entryComments">

          """;

          # The easiest way to do this, which will work for all account types, is as follows, and will display actual buttons.

          # If you'd like text instead of buttons, then remove the following line in blue, decomment the lines in pink,

          # and edit as you see fit. Note that using the print_linkbar function will also add next and previous buttons to the

          # Entry page (with comments), and I've reflected that in the pink lines below.

          $e->print_linkbar();

 

          # var Link prevlink = $e->get_link("nav_prev");

          # if ($p.view=="entry" and defined $prevlink and $prevlink.url!="") { """<a href="$prevlink.url"><img border='0' width="$prevlink.icon.width" height="$prevlink.icon.height" alt="" src="$prevlink.icon.url" /></a>"""; }

          # var Link editlink = $e->get_link("edit_entry");

          # if (defined $editlink and $editlink.url!="") { """<a href="$editlink.url"><img border='0' width="$editlink.icon.width" height="$editlink.icon.height" alt="" src="$editlink.icon.url" /></a>"""; }

          # var Link memlink = $e->get_link("mem_add");

          # if (defined $memlink and $memlink.url!="") { """<a href="$memlink.url"><img border='0' width="$memlink.icon.width" height="$memlink.icon.height" alt="" src="$memlink.icon.url" /></a>"""; }

          # var Link nextlink = $e->get_link("nav_next");

          # if ($p.view=="entry" and defined $nextlink and $nextlink.url!="") { """<a href="$nextlink.url"><img border='0' width="$nextlink.icon.width" height="$nextlink.icon.height" alt="" src="$nextlink.icon.url" /></a>"""; }

        """

        </div>

      </td>

    </tr>

  </table>

  """;

 

  # End the entry component and put a spacer after it so that entry components are seperated.

  """</tr></td></table>""";

  print_system_box_bottom();

  """ <div><img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="3" alt="" border="0"></div> """;

 

} # end of Function print_entry

Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic
  • 6 comments