The White Ghost (nimoloth) wrote in component_help,
The White Ghost
nimoloth
component_help

  • Mood:

Questions: Non-Smooth Scrolling & Non-Uniform Page Widths

I have just changed my layout with the help of this community (many thanks) and it is basically as I want it, however there are a few quirks I would appreciate help with if anyone has any suggestions.

1. My pages do not scroll smoothly. Why is this? Manually added extra components? Images? Is it constantly re-drawing the page? Poorly structured code? I'm afriad I can't see why it's doing this.

2. Annoying but not so important - changing the width of the page (i.e. all the boxes as a whole) does not properly affect the recent page, but does the friends page, i.e. I set overall width of the main table to, say, 900px and the friends page does this, but the recent entries page will not go below a certain width (I think ~ 1165px, on my screens). Or rather, I think it may not be going below a certain percentage, but I am using pixels for the main table, not percentages. As it is, I've just made them both big enough that the effect is not seen (~1165px).



layerinfo "type" = "theme";

layerinfo "name" = "J Component Var 2";



function page_layout(Page p) {

   var string title = $p->title();

"""

<html>

<head>

<link rel="stylesheet" href="$p.stylesheet_url" type="text/css"/>

$p.head_content

"""; $p->print_custom_head(); """

<title>$title</title>

</head>

<body>



<table width="1140px" cellspacing="0" cellpadding="0" border="0" valign="top" align="center">

<tr><td align="center">

  <img  align="center" src="http://www.btinternet.com/~euphbass/ljtop.jpg">

</td></tr>

</table><br>



<table width="1165px" cellspacing="0" cellpadding="0" valign="top" align="center">

<tr valign="top" width="100%">

  <td width="3">

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

  </td>

""";

   if ($*comp_state == "left") {

      print_my_components($p);

"""

  <td width="3">

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

  </td>

""";

   }

   print_my_entries($p, $title);

   if ($*comp_state == "right") {

"""

  <td width="3">

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

  </td>

""";

      print_my_components($p);

   }

"""

  <td width="3">

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

  </td>

</tr>

</table>



</body>

</html>

""";

}





#Code to create custom side components.

function print_free_text(Page p) {

  var Color k1Mbg;



  print_comp_header("Place") ;  

  """

  <div id="Layer1" style="position:relative; width:100%; height:225px; z-index:1; overflow: none; ">

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

    <tr style="background-color:$k1Mbg;">

    <td style="align:center;">

      <img src="http://www.astro.gla.ac.uk/~jennifer/ljsideimage.jpg">

    </td>

    </tr>

  </table>

  </div>  

  """ ;

  print_comp_footer();





  print_comp_header("Book") ;  

  """

  <div id="Layer1" style="position:relative; width:100%; z-index:1; overflow: auto; overflow-x: hidden;">

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

    <tr style="background-color:$k1Mbg;">

    <td style="text-align:justify; padding-top:10; padding-bottom:10">

      "The Grail was invented in the mid-twelfth century by the writer Chretien de Troyes.  There was nothing necessarily holy about Chretien's grail; he did not write about it as the cup or chalice at the Last Supper,

       nor did he give it any other religious association.  For that matter, he did not describe it as a cup or chalice at all, but rather as a serving dish, which is the usual and original meaning of the Old French

       word <i>graal</i>.  But there is something wonderful about the grail's first appearance in the pages of Chretien's story at the beginning because Chretien never finished what he began, so we do not know what the

       secret of the grail was meant to be." <br><br>

       <b>[The Rough Guide To <i>The Da Vinci Code</i>, Michael & Veronica Hagg, pg.105]</b>

    </td>

    </tr>

  </table>

  </div>  

  """ ;

  print_comp_footer();



}





#Code to alter entry formet.

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>""";

  }

  

  # Print the header for the entry.

  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>""";





  # Start the main entry text area

  """<td width="100%" valign="top">""";

  print_content_top();



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

  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">

  """; }



  # Print the entry text.

  """ $e.text """;



  # Print Mood and/or Music Fields:

  # Mood

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

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

    # Print the mood label, followed by a mood icon if one exists, followed by the mood text.

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

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

    print $e.metadata{"mood"};

    """<br/>""";

  }

  # Music

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

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

    # Print the actual music label and the music

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

  }

  

  # Close off the entry text area

  print_content_bottom();



  # Area underneath the entry that holds the comment links.

  """

  <table width="100%">

    <tr>

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

        <div class="entryComments"><center>

        """;

        # Print the comment links if the entry allows comments

        if ($e.comments.enabled) {

          $e.comments->print();

        }

        """

        </center></div>

      </td>

    </tr>

  </table>

  """;



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

  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="10" 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>

         """;

         #Friends view icon borders can be set here.

         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="0" 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 also poster name if we are viewing the friends page or any page on a community.

     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>

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

     """ ;

     $e->print_linkbar() ;  

     """

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

     </center>

     </td>

  """; }





  # 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

    Your reply will be screened

  • 2 comments