FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ようやく見つけた@Anywhere Twitter のUser 接続状態の確認法


ずっと@Anywhere Twitterでuserの接続を確認するのがうまくいかなくて、苦しみました

いろんなサイトで、公式にでてるif (currentUser isConnected)だとダメってのは分かってて、関数にして

isConnected()に変えなきゃいけないとは知っていたけれど、それを入れても、全然反応しなくて・・

んでまたサイトめぐりをしていてやっとみつけたのが↓のサイト(英文)

http://motyar.blogspot.com/2010/04/set-connect-with-twitter-anywhere.html

ツィッターに接続して無い場合は、コネクトボタンだけ見えてて、接続すると、書き込み覧とログアウト、接続している

アカウント名が表示されます。これよこれ、探していたプログラムは

HTMLの方は、








<div id="user"></div>
<div id="login"></div>
<div id="logout"></div>
<div id="default-tweetbox"></div>
<div id="follow-me"></div>


のようにマークアップしといて

<script src="http://platform.twitter.com/anywhere.js?id=APIKEY&v=1"></script>

@AnywhereでもらったAPIキーをここにいれつつ、headerに配置(@Anywhereでwrite&readの設定にしておく)




function update(T){
if (T.isConnected()) {
document.getElementById('user').innerHTML = 'Logged in as : ' + T.currentUser.data('screen_name');
document.getElementById('logout').innerHTML = '<a href='#' onClick="twttr.anywhere.signOut();">Sign out of Twitter</a>';
//Add tweet box
T('#default-tweetbox').tweetBox();
}
}


これを先に配置してしまうのがポイント

ついで



twttr.anywhere(function(T) {
update(T);
// The follow button
T('#follow-me').followButton('myName');
//connect button
T('#login').connectButton({
authComplete: function(loggedInUser) {
// triggered when auth completed successfully
update(T);
},

signOut: function() {
// triggered when user logs out
document.getElementById('logout').innerHTML = '';
document.getElementById('default-tweetbox').innerHTML = '';
document.getElementById('user').innerHTML = '';
}
});
});



これで完成!!

jqueryにしてみたりいろいろしたけど、分かってみると単純だったのね・・・・

コピペで入れてみると、サンプルと違って、エラー

上から4行目を、



document.getElementById('logout').innerHTML = '<p><a href="javascript:void(0)" onClick="twttr.anywhere.signOut();">Sign out of Twitter</a><p>';


に変えたら、うまく動きました

スポンサーサイト

jqueryつづき

lavalampのページはこちら
http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

びみょーんと動くバーが素敵です

でも本題の、画面遷移なしで、記事の続きが読めて、しかもframeを使わない!

これをどのように実現させるか??(クリック場所は3カラムの一番→部分::当然フロートしてます)

slidetabは普通上部か←に使うっぽいので、画面→に固定部分を作ると、ワイド画面で見られたりすると

ものすごい固定部分との間に大きな溝が;;

しかもブラウザによっての挙動の違いが;;

というわけで、slidetabを断念し、jqueryuiのdialogを使って、問答無用でoverlayの上にcenter表示する

方針に変更

というわけで、次はjqueryui・・・・↓がダウンロードサイトです

http://jqueryui.com/download

↑のページの右上にTheme とかいてある場所があって、Advanced Theme Setting と書いてあるところを押すと、

自分でお好みの配色にできたりもします。

この設定は結構細かく指定できるんだけれど、それが故にだんだん後のほうで面倒くさくなる

適当にやっつけで設定してると、実際にuiを使い始めてから、ハイライトやhoverの時の色が気に食わなくなって、

また作り直しに行く羽目に><。(color-pickerのマウス操作がイライラする原因のひとつ)


とりあえず仕様どおり<div></div>をつくり、適当にidを振って、cssでdisplay:noneを設定

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all"> みたいにdialogで出現させる

divにクラスを与えると、uicostomで選んだ配色テーマで表示されます

<div title="">でタイトルをつけると、上に題名が表示されます。(これはjqueryのほうで指定してもいい)

jqueryの方は、外部jsファイルで、他とまとめて記述します。
 
続きを読むをクリックしたら出現させたいので、autoOpenはfalseに設定。

HTMLでは、続きを読むを<a href="#" id="open"></a>

囲んで、jqueryでクリックイベントを書きます。

dialogを開ける動作や閉じる動作のときに何度も$("div#id") を使うので、最初に  var $id = $("div#id")

と書いちゃいます。



 $(function(){$id.dialog({
bgiframe:true,
autoOpen: false,
width:"200",
minHeight:"300",
modal:true,
show: 'blind',
hide: 'explode',
title:'blog'
});

$('#open').click(function() {
$id.dialog('open');return false;})
$('#close').click(function(event){
event.preventDefault();return false;
});

$('#close').click(function() {
$id.dialog('close');return false;

});
})

そしていざ出陣!
・・・・・・・
・・・・・・・・・できた~~~~ 

一度開くと、次もう反応しません><

うーむ、とり合えずjqueryの本を読む読む読む
ありました。そんな話が!!

destroyをつかわず.collapse()ってのを使うんですと!

次回・・・・さらなる問題がdialogに発生!?

jquery

javascriptもよくわからないままに、jquery・・・・

やっぱり、slidetabを使ってやってもあんまりうまくいかなかった><

IEだと大丈夫な位置にしても、SAFARIやFIREFOXだと思いっきり下に出現><

クロスブラウザ対応じゃないPLUGINって・・・

てか、最初に(display:none)を付け加えたことで、位置判定が思い切り狂ってるらしい(というわけで私の

使い方の問題ね><)


良く分からないままに、せこせこclickeventの起きた座標と現在座標で、位置指定しても、毎回変な場所に><

alertで数字だしてみると、なんか毎回違うし><

というわけでslide.jsを使わないで、jqueryuiのposition.jsを使ってみることに

便利な(my at of)で位置指定すりゃいいんじゃん・・・

と思いきや、やっぱりこれもものすごい変な場所に・・・

collision使っても、なんか画面拡張してるし><


やっぱりこれはDreamweaverで作ったtopのhorizonNavigationBarが、どうにもsafariで階段表示されるんで、

widthを160%に設定してるせいでしょうか??

ってんで、これを撤去。

もうjqueryui入れちゃったんだから、ついでにlavalampのjquery版入れちゃおうって入れてみたり;

************************************

後日わかったこと・・・って、4ヶ月も経ってからだけどw

display:noneに初期設定をしたことで、位置を特定できなかったことがわかりました。margin-left:-10000px;とか、text-indent:9999px;とかしておいて、オフセット測らないと、望んだ位置にslideしてくれないわけでした。

SEO的にあんまり良くないかもだけど

もしくは最初にshow()してclone()して、それからappendTo()とかで持っていけばいいのかな・・・

SAFARIがデザイン狂いまくってた原因は、ブラウザの表示設定で、最小文字14pxという設定をonしていたからでした。

文字設定は%指定じゃないと、こういうことも起こるのね・・・






JQueryのslide

JQueryのslideしてくるTabをダウンロードしてきまして、(sliding login panelというプラグイン)
↓がダウンロードとデモのサイト
sliding login panel

中に、



    // Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");

});

// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});

// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});


こんなjsファイルがあるんですけど、つかってみると意図しないところに、パネルが開く(てかログインパネル用に使って無いからだけど

くっついてきたCSSファイルをいじくりまわして、position操作して、なんとか使いたい場所になったけれど、

ページを読み込んだ段階で、パネルがひらっきぱなしで、下の記事が読めない

Jquery関連のHPを読み漁って、なんとかデフォルトでパネルが閉じておく
   $("div#panel(:first)").css("display","none");
発見!!

これを文頭に書き足して、なんとか初期状態でパネルが閉じておけるようになった!

でも次の問題・・・・・せっかくのパネルを開くTABをクリックすると、ページが頭出しに・・・

このスライドタブを設置した場所が800pxほど↓の場所だったので、

パネルが開くモーションが見れない・・・

それでまたWEBを徘徊して、

$("#open").click(function(event){
event.preventDefault();
});


これを発見!!

ブラウザのデフォルトの行動をやめさせるらしい。この場合ページ頭にもどってしまう行動。

これをおなじOPENのコマンドの下にいれて、ついに完成!!!!

出来上がりのjsは、




  $(document).ready(function() {

// Expand Panel
$("div#panel(:first)").css("display","none");
$("#open").click(function(){
$("div#panel").slideDown("slow");

});
$("#open").click(function(event){
event.preventDefault();
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});

// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});


ふー疲れた
これを外部javascript文書として保存(.js)

HTMLのhead部分でjquery1-4-2に記述します。




<head>
<script type="text/javascript" src="pagejs/jquery-1.4.2.js"></script>
<script type="text/javascript" src="Sliding_login_panel_jquery/js/slide.js"></script>
</head>



あとはHTMLの方の、引っ張り出す前のTABのイメージなり文章に id="toggle" を振って、
引っ張りだすパネルの内容のDIVに、 id="panel" class="open" をつけます。
#toggle のついた場所から、パネルをOPENさせるクリック部分にリンクをつけます。
<a href="#" id="open" class="open">クリック内容-たとえばOPENなど-</a>

そしてパネルが開いたとき、そのクリック部分の内容を変化させて、closeのクリック部分にするために
下に<a id="close" class="close" style="display:none;" herf="#">クリック内容←CLOSEなど</a>
と書きます。
これでできあがり!

とここまで、自分用備忘録でした

検索フォーム
カテゴリ
最新記事
アンケート
月別アーカイブ
お名前.com
リンク
RSSリンクの表示
google
MicroAD
ninja
忍者アド
広がるブログ
blomotion
サンプル・イベント・モニターならBloMotion
プレスブログ
[プレスブログ]価値あるブログに換金可能なポイントを差し上げます。
wadax
ブログ村
フリーエリア
人気ブログランキングへ
ブログランキングドットネット
リンクリックブログランキング
フリーエリア
FC2ブログランキング

FC2Blog Ranking

AMAZON
カラーミーショップ
ブログ広告
ブログ広告ならブログ広告.com
ぐるなび
中古DVD
QRコード
QR
SEO
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。