pro-web.at » css http://pro-web.at Sat, 06 Mar 2010 13:40:33 +0000 http://wordpress.org/?v=2.9 en hourly 1 Facebook Connect: Display login button only when not connected to site http://pro-web.at/archives/facebook-connect-display-login-button-only-when-not-connected-to-site http://pro-web.at/archives/facebook-connect-display-login-button-only-when-not-connected-to-site#comments Wed, 23 Dec 2009 09:41:12 +0000 Daniel Prieler http://pro-web.at/?p=163 Currently i’m testing the features of Facebook Connect and i ran into troubles:

  • how to display the login button only if a user has not connected
  • how to display the image only if a user has connected

My simplest solution was to add some custom css classes:

  • fb-connecting: when the status of facebook connect is not known. e.g. display a “connecting…” message
  • fb-not-connected: when user is not connected to facebook. e.g. show connect button
  • fb-connected: when user is connected to facebook. e.g. show user picture and name

View the demo page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"> 
<head>
 
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_GB" type="text/javascript"></script>
 
  <script type="text/javascript">
  $(function() {
    FB_RequireFeatures(["XFBML"], function() {
      FB.Facebook.init("[[[INSERT APP ID HERE]]]", "/xd_receiver.htm");
      FB.Connect.ifUserConnected(function(){
        $('body').addClass('fb-is-connected').removeClass('fb-is-not-connected');
      }, function(){
        $('body').removeClass('fb-is-connected').addClass('fb-is-not-connected');
      });
    });
  });
  </script>
 
  <style>
  .fb-connected, .fb-not-connected {
    display: none;
  }
  .fb-is-connected .fb-connecting, .fb-is-not-connected .fb-connecting {
    display: none;
  }
  .fb-is-connected .fb-connected {
    display: block;
  }
  .fb-is-not-connected .fb-not-connected {
    display: block;
  }
  </style>
 
</head>
<body>
 
<!-- fb-connecting: display while facebook is connecting -->
<div class="fb-connecting">Connecting to Facebook</div>
 
<!-- fb-not-connected: display when user is not connected to facebook -->
<div class="fb-not-connected">
  <fb:login-button v="2" size="medium"></fb:login-button>
</div>
 
<!-- fb-connected #1: display when user is connected to facebook -->
<div class="fb-connected">
  <fb:profile-pic uid="loggedinuser" size="square" facebook-logo="true"></fb:profile-pic>
  <fb:name uid="loggedinuser" useyou="false" linked="true"></fb:name>
</div>
 
<!-- fb-connected #2: actually, you can add the class to the xfbml-tags and do not need a sourrounding div-tag -->
<fb:name class="fb-connected" uid="loggedinuser" useyou="false" linked="true"></fb:name>

No related posts.

]]> http://pro-web.at/archives/facebook-connect-display-login-button-only-when-not-connected-to-site/feed 0 CSS Counter Test / Auto numbering your google docs headlines with CSS http://pro-web.at/archives/css-counter-test-auto-numbering-your-google-docs-headlines-with-css http://pro-web.at/archives/css-counter-test-auto-numbering-your-google-docs-headlines-with-css#comments Mon, 20 Jul 2009 11:25:47 +0000 Daniel Prieler http://pro-web.at/?p=143
  • Auto numbering your google docs headings / headlines
    • ]]>     In the firstplace I did the numbering of the google-docs headlines with css. But the numbering in the google-docs always got messed up after some time, which was caused by:
    a) The behaviour of google-docs: It sometimes wraps the headlines in an extra div (which i consider as a bug)
    b) Browser limitations of css numbering, if the numbered elements are not all on the same dom level (because of the extra google-docs div)

    Test-Case

    I wrote up some test-cases with diffeerent order of h1/h2/div elements.
    As you can see (at least in firefox 3 and google chrome), the numbering does not count up for sub-headlines
    (Note: For my post here in wordpress i changed <h1> to <div class="head1">)

    all counters on one level

    h1
    h2
    h2
    h1
    h2
    h2

    all counters wrapped in a separate div

    h1
    h2
    h2
    h1
    h2
    h2

    sub-counters wrapped in a sub-div

    h1
    h2
    h2
    h2
    h2
    h1
    h2
    h2

    h2
    h2

    only h2-counters wrappwed

    h1
    h2
    h2
    h1
    h2
    h2

    My current solution

    If the numbering gets messed up i start firebug and remove the surrounding div of the wrong headline. Maybe i will create a bookmarklet for this task when i get too annoyed at working with google-docs again :)

    css-Stylesheet

    And here’s my last stylesheet, which i add to all my google-docs.

    You can preview a published document here

    * {
 line-height: 160%;
 font-size: 10pt;
}
 
/** HEADLINES **/
h1 {
 font-size: 20pt;
 counter-increment: counter-h1;
 counter-reset: counter-h2;
}
h2 {
 font-size: 17pt;
 counter-increment: counter-h2;
 counter-reset: counter-h3;
}
h3 {
 font-size: 14pt;
 counter-increment: counter-h3;
 counter-reset: counter-h4;
}
h4 {
 font-size: 11pt;
 font-weight: bold;
 counter-increment: counter-h4;
 counter-reset: counter-h5;
}
h5 {
 font-size: 11pt;
 font-weight: bold;
 counter-increment: counter-h5;
 counter-reset: counter-h6;
}
h6 {
 font-size: 11pt;
 font-weight: bold;
 counter-increment: counter-h6;
}
h1:before {
 content: counter(counter-h1) ". ";
 color: #777;
}
h2:before {
 content: counter(counter-h1) "." counter(counter-h2) ". ";
 color: #777;
}
h3:before {
 content: counter(counter-h1) "." counter(counter-h2) "." counter(counter-h3) ". ";
 color: #777;
}
h4:before {
 content: counter(counter-h1) "." counter(counter-h2) "." counter(counter-h3) "." counter(counter-h4) ". ";
 color: #777;
}
h5:before {
 content: counter(counter-h1) "." counter(counter-h2) "." counter(counter-h3) "." counter(counter-h4) "." counter(counter-h5) ". ";
 color: #777;
}
h6:before {
 content: counter(counter-h1) "." counter(counter-h2) "." counter(counter-h3) "." counter(counter-h4) "." counter(counter-h5) "." counter(counter-h6) ". ";
 color: #777;
}
 
/** TEXT **/
p {
 padding: 5pt 0 10pt 0;
 text-align: justify;
}
li {
 text-align: justify;
 padding-bottom: 5pt;
}
li p {
 padding: 5pt 0;
}
li p:first-child {
 padding-top: 0;
}
li p:last-child {
 padding-bottom: 0;
}

    Related posts:

    1. Auto numbering your google docs headings / headlines

    ]]>     http://pro-web.at/archives/css-counter-test-auto-numbering-your-google-docs-headlines-with-css/feed 7