iGoogle風サイトの作り方
- 初心者、JS学習中の方にiGoogle風のサイト作り方を解説します！HTML内のdiv要素をドラッグアンドドロップで移動し、座標をCookieに保存して読み込む方法を紹介します。
- iGoogleのようなサイトを作りたい初心者の方へ！HTML内の要素をドラッグアンドドロップで移動させる方法と、その座標をCookieに保存して読み込む方法を解説します。
- 初心者の方にiGoogle風のサイト作り方を解説します！HTML内の要素をドラッグアンドドロップで移動させる方法と、座標をCookieに保存して読み込む方法を紹介します。
- ベストアンサー
iGoogle風サイトの作り方
初心者、JS学習中です。 iGoogleのように、HTML内のdiv要素をドラッグアンドドロップで移動し、座標をCookieに記憶して、またそのサイトを訪問したとき読み込めるようにしたいのですが、なかなかうまくいきません。 要素を移動させるJSの紹介をしているサイトはたくさんあり、私も移動はできたのですが、その座標を記憶し読み込みできるように紹介している文章がなくて困っています。 利用しているライブラリは prototype.js scriptaculous.js で、 http://script.aculo.us/ からとって来ています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="js/lib/prototype.js"></script> <script type="text/javascript" src="js/src/scriptaculous.js"></script> <script type="text/javascript"> window.onload = function(){ set_draggable('testbox1'); set_draggable('testbox2'); set_cookie('testbox1'); set_cookie('testbox2'); } //以上をhead部分に書き、以下をbody部に書きました。 </script> </head> <body> <div id="testbox1" class="box1" style="z-index:10;width:150px;height:150px;background:#bbf;"> <span id="handle1">drag here</span><br/> <input type="checkbox" id="shouldrevert1"/> Revert? </div> <div id="testbox2" class="box1" style="z-index:100;width:150px;height:150px;background:#bbf;"> <span id="handle2">drag here</span><br/> <input type="checkbox" id="shouldrevert2"/> Revert? </div> <script type="text/javascript" language="javascript" charset="utf-8"> function set_cookie(cookie_name,cookie_value){ var cookie_data = cookie_name+"="+escape(cookie_value)+";"; cookie_data+="expires=Fri,1-Jan-2038 00:00:00;"; document.cookie = cookie_data; } function set_draggable(box_id){ new Draggable(box_id,{endeffect:function(){ var pos_top = $(box_id).style.top; var pos_left = $(box_id).style.left; set_cookie(box_id,pos_top+"-"+pos_left); }}); var cookies = document.cookie.split(";"); for(var i=0;i<cookies.length;i++){ var cookie_name = cookies[i].split('=')[0]; if (cookie_name == box_id){ var cookie_value = cookies[i].split('=')[1]; $(box_id).style.top = cookie_value.split('-')[0]; $(box_id).style.left = cookie_value.split('-')[1]; } } } </script> </body> </html> 現在の問題として、以上のスクリプトでそれぞれにcookieを作成して保存されたのは確認できたのですが、ページを更新するとcookieをひとつしか読み込んでくれません。 クッキーの読み込みのスクリプトが間違っているのでしょうか？ 最終的に１０の要素の座標を記憶・読み込みたいので、複数のcookieを扱うことができるようにするためにはどのようにすればいいか教えていただきたいと思います。 もう2週間もこの問題を考えているのですが、いまだに解けません。 できればソースも載せていただけると助かります。 どうか、よろしくお願いします。
- deumode
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
cookieをバラす時 var cookies = document.cookie.split(";"); ↓ var cookies = document.cookie.split(/\s*;\s*/); ・・・ 「;」の前後に空白が適当に付きますので、空白を含めて区切り文字とします。 なお、onloadの set_cookie('testbox1'); set_cookie('testbox2'); これは何を意図してますか？ 第二引数(value)が無いために、 testbox1=undefind; testbox2=undefind というゴミみたいなcookieが出来上がりますが？
関連するQ&A
- ＪＳの記述を別ファイルに移す
下記のＨＴＭＬ内の <script type="text/javascript">～</script> をtest.jsとして別ファイルに移す場合にどのように、記述するればよいのでしょうか。単純にコピペしたのですがうまくいきません。 初歩的だとは思いますが、ご指導をお願いします。 --------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/Draggable.js"></script> </head> <body> <div id="test1" class="test"></div> <div id="test2" class="test"></div> <script type="text/javascript"> var test1 = new Draggable("test1"); var test2 = new Draggable("test2"); </script> </body> </html>
- ベストアンサー
- JavaScript
- jQueryで質問です。
jQueryで質問です。 オブジェクトA、Bがあるとします。 Aをドラッグすると、mousedownかdragstartの段階で要素がBに置き換わってドラッグさせるような動きは可能でしょうか。 作成中のソースを記載します。 <html> <head> <title>test</title> <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./ui/jquery.ui.core.js"></script> <script type="text/javascript" src="./ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="./ui/jquery.ui.mouse.js"></script> <script type="text/javascript" src="./ui/jquery.ui.draggable.js"></script> <script type="text/javascript" src="./ui/jquery.ui.droppable.js"></script> <script type="text/javascript"> $(function(){ obj1 = $("#box"); obj2 = $('<div style="width:200px;height:200px;background:red;">B</div>'); obj1 .mousedown( function(){ obj1.replaceWith(obj2); obj2.draggable(); } ); }); </script> </head> <body> <div style="width:200px; height:100px; background: #cccccc;" id="box">A</div> </body> </html> これだと、Aのドラッグを一度解除して、Bをドラッグすると上手くいきますが、1回のモーションでBをドラッグさせたいのです。 宜しくお願いします。
- ベストアンサー
- JavaScript
- jquery uiが動かない
jquery uiが動きません。 何度も見直し、プログラムを書いてもどこがいけないかわかりません。 教えていただけたら幸いです。お願いいたします <html> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> </head> <body> <div id="box">box</div> <style> #box{ width:100px; height:100px; background:red; } </style> <script> $(function(){ $("#box").draggable( axis: 'x'; ); }); </script> </body> </html>
- ベストアンサー
- JavaScript
- jQueryのタブにスクロールバーをつけたい
jQueryのタブにスクロールバーをつけたい jQueryの「ui.tabs.js」を使ってタブを制作し、「jquery.cookie.js」でタブの内容を記憶し。 さらに、そのタブの中身が設定した枠を超えると「jScrollPane.js」を使って横にスクロールバーがでるようにしたいのですがうまくいきません。 <script src="./js/jquery-1.2.6.js" type="text/javascript"></script> <script src="./js/jquery.cookie.js" type="text/javascript"></script> <script src="./js/ui.core.js" type="text/javascript"></script> <script src="./js/ui.tabs.js" type="text/javascript"></script> <script src="./js/jScrollPane.js" type="text/javascript"></script> <script src="./js/jquery.mousewheel.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#container1 > ul').tabs({ event: 'click' ,cookie: { expires: 30 } , cache: true}); $('#fra_sl').jScrollPane({scrollbarWidth:13, scrollbarMargin:9}); }); </script> <body> <div id="container1"> <ul> <li id="tab1"><a href="#tab_categry">タブ1</a></li> <li id="tab2"><a href="#tab_all">タブ2</a></li> </ul> <div id="pane1"> <div id="tab_categry"> <p>中身１(省略)</p> </div> <div id="tab_all"> <p>中身2(省略)</p> </div> </div> </div> </body> 以前同じような質問をされていた方がいたのでそちらも参考にして試してみたのですが→http://okwave.jp/qa/q4819862.html javascriptは初心者なものでよくわかりませんでしたorz どなたかわかる方がいましたら教えてもらえないでしょうか？？
- ベストアンサー
- JavaScript
- jQuery UIのdraggableについて
こちらでは初めて質問させていただきます。 よろしくお願いします。 現在、jQuery UI の draggable を使用してWebブラウザ上での ドラッグ＆ドロップを実装中なのですが、 期待通りに動作させることが出来ません。 <script></script> …… (1) <html> <head> <script type="text/javascript" src="jQuery/jquery-1.3.2.js"></script> <script type="text/javascript" src="jQuery/jquery-ui-1.7.2/development-bundle/ui/ui.core.js"></script> <script type="text/javascript" src="jQuery/jquery-ui-1.7.2/development-bundle/ui/ui.draggable.js"></script> <style> #a { height:100px; width:300px; overflow:scroll; border:solid 1px Black; } #b { width:60px; height:40px; background:lime; position:absolute; top:10px; left:50px } #c { width:60px; height:40px; background:lime; position:absolute; top:60px; left:50px } </style> <script type="text/javascript"> $j = jQuery.noConflict(); $j(function($) { $('#b').draggable(); }); $j(function($) { $('#c').draggable(); }); </script> </head> <body> <div id="a"> <span id="b">Drag Element1</span> <span id="c">Drag Element2</span> </div> </body> </html> ドラッグ対象は複数存在するため、ドラッグ対象を<div>エリア内で スクロール（必須です）させています。 ドラッグ対象を<div>エリア外にドラッグしたいのですが、 <div>エリア内しかドラッグできません。 ((1)の記述がないと、ドラッグ対象が<div>エリア内でスクロール しませんでした。？？？) どなたか、よきアドバイスをお願いします。
- 締切済み
- JavaScript
- Flashの表示について
FlashをSWFオブジェクトで表示しています。 回線が遅い場合、Flashが読み込まれる前に一瞬、Flashの表示領域の高さ(CSS)が反映されていない?のか、Flashの下に表示すべき領域がFlashの部分に表示されレイアウトが崩れます。 下記にFlashを表示させる部分に関係のあるHTMLとCSSを記載いたします。 ---------- HTML ---------- ・・・・・・・・・・・・・ <head> <script type='text/javascript' src='js/jquery-1.2.6.min.js'></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript" src="js/swfobject.js"></script> </head> <body> ・・・・・・・・・・・・・ ・・・・・・・・・・・・・ <div id="top">・・・・・</div> <div id="flash"></div> <script type="text/javascript"> var flashvars = null; var params = { bgcolor: "#●●●"}; swfobject.embedSWF("movie.swf", "movie", "840", "250", "9.0.0","expressInstall.swf", flashvars, params); </script> <div id="buttom">・・・・</div> ---------- CSS ---------- #flash { width: 840px; height: 250px; } CSSの250pxが効いていないのかFlash領域の高さがない状態で、上のコンテンツ(div id="top">・・・・</div>)のすぐ下にコンテンツ(<div id="buttom">・・・・</div>)が表示されてしまいます。 解決策に関してどのようなことでも良いので教えてください。 よろしくお願いいたします。
- ベストアンサー
- その他([技術者向] コンピューター)
- PHP内にJavaScript
下記のようなはじめての訪問者に対してようこそ！と表示するJavaScriptをPHP内で動かすにはどのように記入すればよいのでしょうか？ ==================================================== <script language="JavaScript"> var key = "freekeyword"; var n = 0; var cookies = document.cookie.split("; "); for(var i=0;i<cookies.length;i++){ var str = cookies[i].split("="); if(str[0] == key){ // n = str[1]; } } window.onload = function() { if(n == 0){ document.getElementById('welcome').innerHTML = 'ようこそ！'; } n++; setCookie(key,n); } function setCookie(key,val){ document.cookie = key + "=" + escape(val) + "; "; } </script> ==================================================== このスクプリトを下記<head>内にどのように記入すればよいので しょうか？ PHPの文法などほとんど分からないレベルなのでそもそも質問 自体間違ってるかもしれませんがPHP内で同様の動作をさせたい のです。よろしくお願いします ==================================================== <?php echo ' <html> <head> </head>'; echo ' <body> <div id="welcome"></div> </body></html>'; ?> ====================================================
- ベストアンサー
- PHP
- Event.observeで、入れ子divタグでのmouseoutイベントについて
box1の中にbox2、box2の中にbox3と入れ子になったDIVタグがあります。 box1の外側へカーソルが外れた際にイベント発生させたくて以下のような コードを用意しましたが、box1の内側へカーソルを移動し、box2へカーソルが重なった時にもイベントが発生してしまいます。 box1の外側に外れたときだけイベントが発生するようにしたいのですが、どのように記述したらよいのでしょうか？ また、入れ子になったbox2、3でイベントが発生しないよう、イベントを発生させたいオブジェクトとイベントが発生したオブジェクトを比較していますが、もっとスマートな方法はあるのでしょうか？ ご助力お願いいたします。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>mouseout</title> <script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript"> <!-- window.onload = function () { Event.observe( $("box1"), "mouseout",out,true ); } function out(event) { var p = Event.findElement(event,'div.parent'); var e = Event.element(event); if(p!=e) return; $("tt").innerHTML = e.id+"からmouseout<br />"+$("tt").innerHTML; Event.stop(e) } // --></script> <style> #box1{ background: #ccc; padding: 10px; } #box2{ background: #ddd; padding: 10px; } #box3{ background: #eee; padding: 10px; } </style> </head> <body> <h1>mouseout</h1> <div id="box1" class="parent">ボックス1 <div id="box2">ボックス2 <div id="box3">ボックス3</div> </div> </div> </div> </body> <div id="tt"></div> </html>
- 締切済み
- JavaScript
- Camera slideshowの使い方について
jQueryプラグイン"Camera slideshow"を試しに使ってみたのですが、まったく動きません。 どこが間違っているのか見当もつかなく困っています。 【head内】 <head> <!--省略--> <link rel="stylesheet" id="camera-css" href="/camera.css" type="text/css" media="all"> <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.mobile.customized.min.js"></script> <script type="text/javascript" src="/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="/js/camera.js"></script> <script type="text/javascript" charset="utf-8"> <script type="text/javascript"> jQuery(function(){ jQuery('#camera').camera(); }); }); </script> </head> 【HTML部】 <div class="camera_wrap camera_blue_skin" id="camera"> <div data-src="../images/slides/bridge.jpg"></div> <div data-src="../images/slides/leaf.jpg"></div> <div data-src="../images/slides/road.jpg"></div> </div> この情報だけで質問をするのが失礼だったらすいません。 初心者なもので誠に申し訳ございませんが、改善方法をどなたかご教授いただければ大変助かります。 よろしくお願いしますm(_ _)m
- ベストアンサー
- JavaScript
- prototype.js で $ is not defined になってしまう！
JSバージョン：prototype1.6 ブラウザ：Firefox2.0、IE7.0 OS：WinXPpro でシンプルに <html> <head> <title>$ - 指定idのエレメントを取得</title> </head> <script type="text/javascript" src="/js/prototype.js?aaads"></script> <script type="text/javascript"> function test1() { var element = $('div1'); alert(element.innerHTML); } </script> <body> <div id="div1">DIV1の中身</div> </body> </html> を実行したところ、$ is not defined と エラーになってしまいます。 あるレンタルサーバにUPして動かすと問題なく、 ローカルPCで実行するとエラーになってしまうようです。 どなたか教えて下さい！！！
- ベストアンサー
- JavaScript
お礼
できました！すごいです！ネ申！！笑。 本当に感謝しています。 スペースがつくんですね、知りませんでした。 ありがとうございました！
補足
はい、確かにset_cookieはいらないですね f(^_^;) 試しにいろいろやってみた残りがあったみたいです。