- 締切済み
スクリプトで<div id="links">
下記スクリプトで<div id="links"></div>のところを 開いた瞬間 <ul> <li><a href="http://foo.com/">foo</a></li> <li><a href="http://bar.com/">bar</a></li> </ul> に変換したいのですがうまくいきません どこをどのように変更すれば変換されるのでしょうか 【スクリプト】 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript"> var URL = new Array("http://foo.com/","http://bar.co.jp/"); var TITLE = new Array("foo","bar"); // 表示用コンテナ var container = document.getElementById('links'); // リセット container.innerHTML=''; var ul=document.createElement('ul'); container.appendChild(ul); for(var i=0;i<URL.length;i++){ var li=document.createElement('li'); var a=document.createElement('a'); // 'href'属性の設定 a.setAttribute('href',URL[i]); // ラベル a.appendChild(document.createTextNode(TITLE[i])); li.appendChild(a); ul.appendChild(li); } </script> </head> <body> <div id="links"></div> </body> </html>
- basi999
- お礼率7% (78/993)
- AJAX
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- tracer
- ベストアンサー率41% (255/621)
逆質問です。 ご自身の質問文を読み返して、何が言いたいのか理解出来ますか？
関連するQ&A
- scriptリンクの別画面表示
はじめまして。 ホームページのトップにブログの件名をニュースとして一覧表示したくて Google AJAX Feed API を利用しました。 表示自体はうまくいったのですが、 この記事へのリンクを別ウィンドウで開くようにするにはどうすればいいのでしょうか？ 当方、JavaScriptは全く分からずで困っております・・・ おわかりの方、いらっしゃいましたらよろしくお願いいたします。 【html header 部分】 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("http://blog.XXXXX.XXX"); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var li = document.createElement("li"); var a = document.createElement("a"); a.href = entry.link ; var date = new Date(entry.publishedDate); var titlelink = entry.title; a.appendChild(document.createTextNode( "・" + date.toDateString() + " " +titlelink)); li.appendChild(a); container.appendChild(li); } } }); } google.setOnLoadCallback(initialize); </script> 【html body 部分】 <div id="feed"></div> 以上、どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- JSONPを処理するにはどうすればいいですか？
http://www.baldanders.info/spiegel/remark/archives/000222.shtml このページの下部のサンプルスクリプトを function getjsonp(url){ で囲ってurlを渡してJSONPデータを処理しようとしたのですが、 hundler is not defined とエラーが出てしまいます。 サンプルスクリプトのそのままのコードでは動くのです。 オブジェクト指向がよくわかっていないのでどうすればいいか、識者の方教えてください。 宜しくお願いします。 下記がエラーするスクリプトです。 <script type="text/javascript" src="/js/jsr_class.js"></script> <div id="bookmark"></div> <script type="text/javascript"> var url ='http://del.icio.us/feeds/json/spiegel?callback=hundler'; getjsonp(url); function getjsonp(url){ var oJsr = new JSONscriptRequest(url); oJsr.buildScriptTag(); oJsr.addScriptTag(); function hundler(data) { var ul = document.createElement('ul'); for (var i=0, post; post = data[i]; i++) { var li = document.createElement('li'); var a = document.createElement('a'); a.setAttribute('href', post.u); a.appendChild(document.createTextNode(post.d)); li.appendChild(a); ul.appendChild(li); } document.getElementById('bookmark').appendChild(ul); oJsr.removeScriptTag(); } } </script>
- ベストアンサー
- JavaScript
- Google AJAX Feed API
Google AJAX Feed APIでRSSを読み込んでタイトルなどの文字のみの表示をすることはできたのですが、（下の記述でやっています。） 画像が投稿されているブログ記事の画像を読み込み、表示させることはできるのでしょうか？ その場合の方法はどのように、すればできるのでしょうか？ お手数をおかけしますが、よろしくお願い致します。 <script type="text/javascript" src="http://www.google.com/jsapi?key="></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("http://"); <!--表示したいエントリー数--> feed.setNumEntries(10); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("li"); var a = document.createElement("a");a.href = entry.link; <!--別窓で表示しない場合は削除してください--> a.target = "_blank" ; a.appendChild(document.createTextNode(entry.title)); div.appendChild(a); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize); </script>
- ベストアンサー
- JavaScript
- Google AJAX Feed APIについて
ブログのRSSを使って自動的にホームページに新着ブログ記事の日付とタイトルを表示されるようにしたいと思い、Google AJAX Feed APIを使用しました。 下記のソースだとこのように表示されます。 ・タイトル(2009年6月22日) ・タイトル(2009年6月20日) 表示方法をもう少し変えたいんですが、文字サイズと行間の変更はどのようにすれば可能か、ご存知の方は教えて下さい。 1.文字サイズをもう少し小さく(10pxに)したい 2.行間がくっ付いているのでもう少し広くしたい <script type="text/javascript" src="http://www.google.com/jsapi?key=APIキー"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("フィードのアドレス"); feed.setNumEntries(10); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("li"); var a = document.createElement("a"); a.href = entry.link; a.target = "_top" ; var date = new Date(entry.publishedDate); a.appendChild(document.createTextNode(entry.title + " (" + date.toLocaleDateString() + ")" )); div.appendChild(a); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize); </script> <div id="feed"></div>
- ベストアンサー
- JavaScript
- 指定位置に要素を追加する
<script type="text/javascript"> function test(){ var hako2 = document.createElement('div'); hako1.innerHTML = "TEST2"; var lk2 = document.getElementById('link2'); var li2 = lk2.parentNode; li2.appendChild(hako2); } </script> </head> <body> <div><a href="1" id="link1">1</a></div> <div><a href="2" id="link2">2</a></div> <div><a href="3" id="link3">3</a></div> <input type="button" onclick="test()" value="test"> </body> みたいなイメージなのですが、いかんせんスマートじゃありません できれば<div>で<a>を囲うのをやめたいのです。 ターゲットになる<a>の位置は固定ではなく前後に他の要素が入ることもあります <a href="2" id="link2">2</a>の次に<div>TEST2</div>を生成できればどんなのでも？いいのですが、何かいいやり方ありませんか？
- ベストアンサー
- JavaScript
- JavaScriptで表示文字数を制御したい
Google Feed APIを使い、JavaScriptで自分のホームページにRSSのニュースを表示しています。 文字の大きさ と 行間 は、以下のような <style type="text/css"> #feed { font-size:16px; } #feed li { height: 4em; } </style> のcssを書くことによって調整できましたが、現在の状態だと全部のニュースを表示してしまうので 表示する文字数を「先頭から40文字」までにしたいのですが、 そのやり方が分かりません。 具体的に、どうすればよいのか、ご教示いただければと思っています。 大変困っているので、何卒よろしくお願い致します。 以下、参考までにjavascriptも載せておきます。 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { //RSSフィードの取得 var feed = new google.feeds.Feed("RSSフィードのアドレス"); //表示したいエントリー数 feed.setNumEntries(4); //実際に読む込む feed.load(function(result) { //読み込めたか判別 if (!result.error) { //表示部分を選択 var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("li"); var a = document.createElement("a");a.href = entry.link; a.target = "_blank" ; //日付を取得 var date = new Date(entry.publishedDate); var yearNum = date.getYear(); if (yearNum < 2000) yearNum += 1900; a.appendChild(document.createTextNode(entry.title)); //タイトルと日付の行を変える a.appendChild( document.createElement( "br" ) ); //a.appendChild(document.createTextNode(" (" + date.toLocaleDateString() + ")" )); //↑chromeで年月日が表示されない a.appendChild(document.createTextNode("(" + yearNum + "年" + (date.getMonth()+1)+"月"+date.getDate()+"日"+")" )); div.appendChild(a); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize); </script>
- ベストアンサー
- JavaScript
- divを中央に寄せたい
恐れ入ります。 現在、修正を加えたいhtmlコードの中で、以下のdiv要素をセンターに寄せることが出来ません。 中央に寄せたい部分は、上部のメニューバーです。 以下がhtmlコードです。 <div id="menune"> <div class="clearfix"> <ul> <li> <a href="index.html" class="first active">HOME</a> </li> <li> <a href="review.html">casino bonus guide</a> <ul> <li><a href="#"> jepang1</a> </li> <li><a href="#"> jepang2</a> </li> <li><a href="#"> jepang33</a> </li> </ul> </li> <li> <a href="top10/top10index.html">Online Casino</a> </li> <li> <a href="#">free casino</a> </li> <li> <a href="top.html">gaming guides</a> </li> <li> <a href="contact/contact-index.html" class="last">Contact Us</a> </li> </ul> <div class="clearfix:after"> </div> </div> </div> どこのcssの表記が邪魔をしているのか分からなくて困っております。 cssの知識が乏しくてご迷惑をおかけしますが、宜しくお願いします。 失礼致します。
- ベストアンサー
- HTML
- innerHTML
JavaScript初心者です。 下記のコード（１）がGoogleの公式サンプルに載っていますが、 私としては（２）の方が分かりやすいと思っています。 コードとして問題がありますでしょうか？ １． var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("div"); div.appendChild(document.createTextNode(entry.title)); container.appendChild(div); } ２． var container=document.getElementById("feed"); var htmlsrc=""; for(var i=0;i<result.feed.entries.length;i++){ var entry=result.feed.entries[i]; htmlsrc+="<div>"+entry.title+"</div>"; } container.innerHTML=htmlsrc; } 参考サイト http://www.ajaxtower.jp/googleajaxfeed/before/index2.html
- ベストアンサー
- JavaScript
- クリックすると内容が展開されるリスト
親項目をクリックすると、隠れていた子項目が表示され、 再び親項目をクリックすると、子項目が隠れる。 といったページを作成するため（http://www.openspc2.org/reibun/javascript/mouse/060/index.html）より、サンプルをいただきました。 これを、さらに ・「ダブルクリックではなく、シングルクリックで開閉」 ・「１つだけ展開し後はたたむのではなく、展開したものは閉じる操作をするまで展開している」 というように変換したいと思っています。 （JavaScript等、かなりの初心者です。できるだけ単純かつ分りやすい方法で作成したいと考えております。） お知恵を貸してください。 自分の要望に近いサンプルコードを探しましたが、コードが複雑で理解できず、皆さんへご質問している次第です。 ＝＝＝＝＝＝＝＝＝＝＝＝＝（以下、コード）＝＝＝＝＝＝＝＝＝＝＝＝＝ <html> <head> <title>ページの名前</title> <script> window.onload=function(){ setNavi(); hideNavi(); } function setNavi(){ var tags=document.getElementById("navi").getElementsByTagName("a"); for(var i=0;i<tags.length;i++){ if(tags[i].href.match(/#$/)) tags[i].onclick=disp; } } function hideNavi(){ var n=document.getElementById("navi").firstChild; while(n){ if(n.nodeName=="LI") n.className="hide"; n=n.nextSibling; } } function disp() { var pp=this.parentNode.parentNode; var flg=pp.className=="hide"; hideNavi(); pp.className=flg?"":"hide"; return false; } </script> <style> #navi,#navi ul{ margin:0px; padding:0px; list-style:none; } #navi li.hide ul{ display:none; } </style> </head> <body> <ul id="navi"> <li> <div><a href="#">☆★☆スパゲッティー☆★☆</a></div> <ul> <li><a href="http://～">・カルボナーラ</a></li> <li><a href="http://～">・ペスカトーレ</a></li> <li><a href="http://～">・ペペロンチーノ</a></li> </ul> </li> <li> <div><a href="#">☆★☆どんぶり☆★☆</</a></div> <ul> <li><a href="http://～">・親子丼</a></li> <li><a href="http://～">・カツ丼</a></li> <li><a href="http://～">・天丼</a></li> </ul> </li> <li> <div><a href="#">☆★☆ファーストフード☆★☆</div> <ul> <li><a href="http://～">・ハンバーガー</a></li> <li><a href="http://～">・ホットドッグ</a></li> <li><a href="http://～">・フライドポテト</a></li> </ul> </li> </ul> </body> </html> ===============＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- Scriptを読み込み中の表示について
HTML <script language="JavaScript" type="text/javascript" src="AAA.js"></script> 外部JS <!-- google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("RSSURL"); feed.setNumEntries(5); feed.load(function(result) { if (!result.error) { var container = document.getElementById("mini_feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("div"); var entry = result.feed.entries[i]; var dd = new Date(entry.publishedDate); // now var yearNum = dd.getYear(); if (yearNum < 2000) yearNum += 1900; var date = yearNum + "年"+(dd.getMonth()+1)+"月"+dd.getDate()+"日"; container.innerHTML += "<div>【"+"<b>" + date+"</b>" +"】<br /><a href='" + entry.link + "'>" + entry.title + "</a></div>"; } } }); } google.setOnLoadCallback(initialize); //--> を設置し、RSSをスクリプトで表示しています。 2秒くらい読込みが遅いので、その部分が、一時空白状態のままになります。 そこで、読み込み中に読込みしていますというぐるぐる回る画像を表示したいのですが、どのように記述すれば宜しいのでしょうか？
- ベストアンサー
- JavaScript
