Recent Topics

Mystique ~ jquery.mystique.js ~ Twitter Functions Updated

Started by on Jun 26, 2011 – Contents updated: Oct 25, 2013

Jun 26, 2011 07:23    

My b2evolution Version: Not Entered

Hey Guys.

I updated the JavaScript for Mystique. The previous version of Mystique had a cleaner and more aesthetically pleasing Twitter display than the updated Mystique Skin. The later version was a bit robust and I decided to get it fixed. No need to worry it functions perfectly with the newer functions.

The Changes:

[list]The Tweet Time/Date is no longer proceeding the tweet, it is followed by the tweet in smaller font (light grey). [/list:u][list]The tweet now displays a twitter icon with every tweet.[/list:u][list]All functions are the same, nothing is removed.[/list:u][list]Only twitter JavaScript is updated starting from :

Code

/* twitter functions  */

[/list:u][list]The file changed: jquery.mystique.js ~ Twitter Functions Updated[/list:u]

Copy all the code below and replace the code found in jquery.mystique.js

If Sam or someone could move this file to the library it would be cool.

http://www.midnightstudios.co.za/downloads/jquery.mystique.js

Jun 27, 2011 19:13

Can you make screenshots before and after the changes? I don't see why the code should be changed. I believe the Twitter widget works fine.

Jun 29, 2011 21:03

It works fine, you are correct. It is just that the Mystique earlier version displayed it a bit nicer.

I am aware that the newer mystique's JavaScript has been updated, that is left intact, it is just basically div tags not JavaScript, but the changes is located within the JavaScript, however, persons who wish to may also style it from external css.

The screenshot has been styled with additional external css, so it will display a bit different than the screenshot, but it does display the changes (circled in red).

http://www.midnightstudios.co.za/downloads/twitter.png

For interest sake I also included the code I made to the widget as seen in the screenshot in:

Code

_skin.class.php

I also moved Javascript in the widget to an external file in the Skin folder, I created the directory:

Code

Skin_folder/w_js

This is where the skin writes the code to, this is just because I prefer cleaner code in my html. I have done this with all Javascript for my skin and plugins, this way I have clean html and no js conflicts.

PHP

function display_twitter_widget$limit '#' )
    {global $skins_url;
        if( (!$user $this->get_setting('twitter_user')) || $this->get_setting('display_my_tweets') == ) return;
        if( $limit == '#' $limit $this->get_setting('display_my_tweets');
        
        echo '<li class="block">
        <div class="block-twitter-wrap">
              <div class="block-twitter">
                <h3 class="title"><span>'.$this->T_('My latest tweets').'</span></h3>
                <div class="block-div"></div>
                <div class="block-div-arrow"></div>
                <div class="clearfix">
                  <div class="avatar"></div>
                  <div class="info"></div>
                </div>';
                
                $twitter_s_code '
                /* <![CDATA[ */
                jQuery(document).ready(function () {
                  jQuery(".twitter-content").getTwitter({
                    username: "'.$user.'",
                    count: '.$limit.',
                    loading_text: "'.$this->T_('Loading tweets...').'"
                  });
 
                  jQuery.jTwitter("'.$user.'", function (userdata) {
                    jQuery(".block-twitter div.avatar").prepend("<a href=\"http://www.twitter.com/'.$user.'\"><img src=\"" + userdata.profile_image_url + "\" /><\/a>");
                    jQuery(".block-twitter div.info").prepend("<a href=\"http://www.twitter.com/'.$user.'\">" + userdata.name + "<\/a><br /><span class=\"followers\">" + userdata.followers_count + " followers<span>");
                  });
                });
                /* ]]> */';
$twitter_s dirname(__FILE__).'/w_js/twitter_s.js';
if (!file_exists($twitter_s)) {$fh fopen($twitter_s'w+');} 
$fh fopen($twitter_s'w') or die("can't open file");
$stringData $twitter_s_code;
fwrite($fh$stringData);
fclose($fh);
                echo '<script type="text/javascript" src="'.$skins_url.'Skin_folder/w_js/twitter_s.js"></script>';
                echo '<div class="twitter-content clearfix"></div>
                <a class="followMe" href="http://www.twitter.com/'.$user.'"><span>'.$this->T_('Follow me on Twitter!').'</span></a>
                
                </div>
                </div>
              </li>';
        
        return;
    }

Note: correctly name the skin directory:(Skin_folder)

PHP

echo '<script type="text/javascript" src="'.$skins_url.'Skin_folder/w_js/twitter_s.js">

here is the css for the widget:(Skin_folder/styles.css)

Code

/* twitter */
.block-twitter {
  -moz-border-radius: 5px;
  border-radius: 5px;
}
 
.tweet_list {
}
 
.tweet_first {
}
.twitter-content {
  padding-top: 15px;
}
.twitter-content ul.tweet_list li.tweet_even {
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #000;
  border: 1px solid #000;
  padding: 1px;
  background-image: url(#666);
  overflow: hidden;
  color: #666;
}
.twitter-content ul.tweet_list li.tweet_odd {
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #333;
  border: 1px solid #333;
  padding: 1px;
  overflow: hidden;
  color: #CCC;
}
 
.block-twitter ul li.tweet_even span.entry a{
  background:transparent url(images/icons.png) no-repeat 6px -146px;
  padding-left:24px;
  display:block;
  text-indent: -9999px;
}
 
.block-twitter ul li.tweet_odd span.entry a{
  background:transparent url(images/icons.png) no-repeat 6px -146px;
  padding-left:24px;
  display:block;
  text-indent: -9999px;
}
 
.block-twitter ul li.tweet_even span.entry a.date{
  background-repeat: no-repeat;
  background-position: -9999px;
  text-indent: 1px;
}
 
.block-twitter ul li.tweet_odd span.entry a.date{
  background-repeat: no-repeat;
  background-position: -9999px ;
  text-indent: 1px;
}
 
.block-twitter ul li.tweet_even span.entry{background:transparent url(images/icons.png) no-repeat 6px -440px;padding-left:24px;display:block;}
 
.block-twitter ul li.tweet_odd span.entry{background:transparent url(images/icons.png) no-repeat 6px -440px;padding-left:24px;display:block;}
 
.block-twitter-wrap {
  background-image: url(images/twitter-bottom.png);
  background-repeat: no-repeat;
  background-position: right bottom;
  padding-bottom: 90px;
}
 
.block-twitter ul, .block-twitter ul li{padding:0;margin:0;list-style-type:none;}
 
.block-twitter ul{
  padding-top:.2em;
}
 
.block-twitter ul li,.block-twitter ul li:hover{background:transparent;margin-bottom:.2em;padding-bottom:.2em;}
 
 
 
.block-twitter div.avatar{float:left;display:block;margin-left:10px;}
 
.block-twitter div.info{float:left;display:block;padding:2px 0 0 10px;line-height:175%;font-weight:bold;}
 
.block-twitter div.info .followers{font-size:125%;}
 
.block-twitter a.date{color:#bbb;text-decoration:none;font-style:italic;font-size:85%;display:block;}
 
.block-twitter a.date:hover{color:#ed1e24;}
 
.block-twitter .links{padding-right:1em;}
 
.block-twitter a.followMe{position:absolute;background:transparent url(images/twitter.png) no-repeat center top;width:45px;height:57px;display:block;top:-14px;right:20px;z-index:4;}
 
.block-twitter a.followMe span{display:none;}
 
.block-twitter h3.title span{padding-right:60px;}
 
.block-twitter .loading{background:transparent url(images/loader-white.gif) no-repeat 6px 6px;padding:6px 10px 6px 28px;float:left;}

I have changed links displayed(css), it displays an icon instead of text.

here is the icons:(Skin_folder/images)

http://www.midnightstudios.co.za/downloads/icons.png
http://www.midnightstudios.co.za/downloads/twitter-bottom.png

Please note: I am running my site on a local test server, once I am going to upload it I may clean my public folder which may result in these links/image links to become absolute.

Jun 29, 2011 21:40

Now I actually like twitter icon with the date "on hover" more than default variant. This is just a matter of taste. Anyone can change the format or style it different. I don't think that adding these changes to release is necessary.

Thanks anyway, it's nice to see someone improving the skin.

Oct 24, 2013 18:38

the same thing is happening to me.

Can you send me the .js file please. The link doesn't work anymore!

Oct 24, 2013 20:00

Twitter has discontinued its unauthenticated v1.0 API, so this widget has stopped working as of 2013-06-11.

Twitter wants your only option for on-page widgets to be their own Embedded Timelines, but there are workarounds which involve installing server-side code to support this widget.

Here is the work around:
https://github.com/StanScates/Tweet.js-Mod


Form is loading...

powered by b2evolution – This forum is powered by b2evolution CMS, a complete engine for your website.