常連

情報収集家

自己紹介

現在あるWeb上のページにcanvasを使ったペイント機能を実装しようと考えております。

意図は、このWebページを第三者に示しながら説明などを行うためにペイント機能で強調したい点を簡単に描画できれば、と考えたからです。

ペイントする場所は画像の上や要素の上となります。


今考えている方法は
ボタンのONOFFによりペイント機能のONOFFが切り替えられるようにします。
そのボタンがONになれば透明のレイヤーをページ全体に貼り、そのレイヤー上に描画します。
そしてボタンがOFFになれば描画した状態を透明なレイヤーごと消してしまいます。
レイヤーを透明にしなければならない理由は、下にある画像や要素を完全に表示させたままにしておきたいからです。

現在の状況は、ボタンのONOFFやcanvasでのペイント機能は作成しました。
完全なる透明のレイヤーを作ることができず。
opacity: * なども試しましたが完全には透明にすることができませんでした。

どのようにすれば透明なレイヤーを作成してその上に描画できるようになりますでしょうか？
よろしくお願い致します。

canvasでWeb上にてペイント。要素の上に描画するには？

QRコードを画像もしくはカメラから読み込み、なおかつその上でARのようにQRコード上に何かしら物体を出現させるようなアプリケーションを計画しています。

QRコード自体の内容の取得はでき、QRコードの解析対象範囲である四点の平面座標は取得できているのですが、そこから「どのように3D空間上に反映させればよいのか」の計算方法が分かりません。

2D空間上の四角形(Vector2の四点)から、3D空間上の座標＆向き（Vector3）に変換する方法はありますでしょうか。

よろしくお願いいたします。

２次元座標空間にある４点の座標を3D座標計算においての正方形に相当する座標に変換する方法

JSONデータ所得を以前こちらで教わった通りに進めてきましたがあと一歩のところでどうしてもつまってしまいました。
下記が作成中のHTMLですURLにJOSN形式でリクエストを送っています。

```javascript
    $(function(){
        $("#response").html("Response Values");

        $("#button").click( function(){
            var url = $("#url_post").val();
            var dept_ids = [$("#dept_ids").val()];
      
            var JSONdata = {};
            JSONdata.dept_ids = dept_ids;

            $.ajax({
              url : url
            , type : "POST"
            , data : JSON.stringify(JSONdata)
            , contentType: "application/json;charset=UTF-8"
            , processData: false
            , dataType : "json"
            , accepts : {json: "application/vnd.glv.v1+json;charset=UTF-8"}
            , crossDomain: false
            }).done(function(data, status, xhr) {
                // 通信成功時の処理
//                alert("成功");
                $("#response").html(JSON.stringify(data));
            }).fail(function(xhr, status, error) {
                // 通信失敗時の処理
                alert("失敗");
            }).always(function(arg1, status, arg2) {
                // 通信完了時の処理
//                alert("完了");
            });
        })
    })
```
```HTML
<h1>HTMLファイルからPOSTでJSONデータを送信</h1>
    <p>URL: <input type="text" id="url_post" name="url" size="100" value="http://52.192.178.185:8280/api/test_accesses"></p>
    <p>value1: <input type="text" id="dept_ids" size="30" value="000002"></p>
    <p><button id="button" type="button">submit</button></p>
    <textarea id="response" cols=120 rows=10 disabled></textarea>
```

上記のHTMLでsubmitすると
「curl -i -v -H "Accept: application/vnd.glv.v1+json" -H "Content-type: application/json" -X GET localhost:8280/api/test_accesses -d '{"dept_ids":["000002"]}'」

というリクエストが送られ望んだデータも返却されます。上記のHTMLに
「~ '{"dept_ids":["000002"],**"start_date":"20151001","end_date":"20151207"**}'」

とリクエストを送るようにしたいのですがどの部分を修正すればいいでしょうか？ご存知の方ご回答御願い致します。

HTMLでJSONデータ取得、あと一歩のところで躓いています。

jQueryを用する上では基本的な事かもしれませんが、質問させていただきます。

あるサイト、はっきり言ってしまうと、ヤフーの「トリプル」というサービスなのですが、jQueryと、それを利用する画像スライダ、jquery.bxslider を設置してもうまく動作しません。
スライダの「送り」や「戻り」をクリックすると、「ファイルがありません」という404エラーのような表示になります。
理由をいろいろ考えたのですが、どうも戻り処理（？）がうまくないような気がします。

まず、通常のHTMLで、Aタグなどにより移動先がある場合、そのリンクにマウスカーソルをホバーの状態で置くと、リンク先の情報などがブラウザの下部（Firefoxだとステータスバー）に表示されると思います。

ところが、jQueryと、jquery.bxslider によって作られた移動先部分にマウスをホバーさせても、そのページがあるディレクトリを示すのみで、どこに移動しているのか判りません。

![イメージ説明](f3cda914eb55a1fbb9fe5b3e888fcfe8.jpeg)

この場合設置先は、[http://8-dai.com/jQuery/](http://8-dai.com/jQuery/)になるのですが、スライダーの＜にマウスを置くと、設置URLそのものがステータスバーに表示されます。

この場合、例えばスライダーの「送り」や「戻り」が選択された という情報は、どこに格納されて送られているのでしょうか？

予想として、この戻りURLがディレクトリまでしか表示していないため、ヤフートリプルのサーバでは、どこに戻したら良いのかがわからず、不明になっているのではないかと思っています。
この部分で、戻るファイルまで指定できれば、エラーが回避出来るのではないかと思うのですが…

よろしくお願いいたします。

jQuery表示のリンクの戻り先

画像の処理に関しての質問ですが，知識がないため必要な情報が抜け落ちているなどの場合はご指摘ください。

* 目標：画像内の特定の人物，物体の輪郭を取得する
* ユーザーの操作：大雑把に画像内の輪郭をマウスでなぞると，補正して対象物の輪郭を範囲指定（マスクする？）する。
* 不明な点：マウスでなぞった範囲を取得はできても，元の画像の輪郭とのずれをどのように修正すればいいのかが不明です。

JavaScriptで解決できると万歳なのですが，他の言語でも学習しますので，皆様のお知恵を拝借できればと思っています。
また，そのようなことが可能なライブラリがありましたら，ご紹介ください。

よろしくお願いいたします。

画像内の特定の物体の輪郭の取得方法

カレンダーの表示を以下のスクリプトと他cssコードで表示しています。
これだと、正常にカレンダーは表示されますが、特定の日時にハイライトや、見た目の装飾がこのままだと出来ません。

例えば、休業日となる
年末年始の12月30日から1月3日の間は赤字に設定したい場合、どの様にいじれば良いでしょうか？

jQueryでそんな便利な物もあるかもしれませんが、javascriptの勉強も兼ねて知りたいので、知識をお持ちでお付き合い頂ける方、教えて下さい。

よろしくお願い致します。

```html
<script src="../js/calendar.js"></script>
```

```javascript

/*======================
日付の取得
======================*/
var Years = new Date();
var Toshi = Years.getFullYear();
var Tsuki = Years.getMonth() + 1;
var dayLoad = Years.getDate();
/*======================
Calendar
======================*/
myWeekTbl = new Array("日","月","火","水","木","金","土");
myMonthTbl= new Array(31,28,31,30,31,30,31,31,30,31,30,31);

if (((Toshi%4)==0 && (Toshi%100)!=0) || (Toshi%400)==0){
  myMonthTbl[1] = 29;
}
myMonth = Years.getMonth();
dayLoad = Years.getDate();
Years.setDate(1);
myWeek = Years.getDay();
myTblLine = Math.ceil((myWeek+myMonthTbl[myMonth])/7);
myTable = new Array(7*myTblLine);
  for(i=0; i<7*myTblLine; i++) myTable[i]=" ";
  for(i=0; i<myMonthTbl[myMonth]; i++)myTable[i+myWeek]=i+1;

function loadCalendar() {
  document.write("<div class='loadCalendarWrapper'><table border='1' class='loadCalendarTable'>");
  document.write("<tr><td colspan='7' bgcolor='#2a2e3e'>");
  document.write("<span class='loadCalendarTitle'>", (myMonth+1),"月"+"営業日カレンダー</span>");
  document.write("</td></tr>");
  document.write("<tr>");
    for(i=0; i<7; i++){
      document.write("<td align='center' ");
        if(i==0)document.write("bgcolor='#fa8072'>");
        else document.write("bgcolor='#f3f3f3'>");
      document.write("<strong>",myWeekTbl[i],"</strong>");
      document.write("</td>");
    }
  document.write("</tr>");
    for(i=0; i<myTblLine; i++){
      document.write("<tr>");
        for(j=0; j<7; j++){
          document.write("<td align='center' ");
          myDat = myTable[j+(i*7)];
          if (myDat==dayLoad)document.write("style='color:#fff;' bgcolor='#007cf9'");
          else if(j==0) document.write("bgcolor='#FF33CC'>");
          else document.write("bgcolor='#fff'>");
          document.write("<strong>",myDat,"</strong>");
          document.write("</td>");
        }
      document.write("</tr>");
    }
  document.write("</table><div class='hosoku'><span class='HolidayMark'>■</span>は休業日です</div></div>");
}

```

javascriptでカレンダーのカスタマイズ

現在HTMLにCSVのデータを持って行って表にしたいと考えてます。

Ajax関数を使ってしまうと使用環境がクローム固定にしたいため、セキュリティの都合ではじかれてしまいます。

FILEAPIを使ってテキスト形式でデータを持っていくことはできたのですがこれでは、配列にも格納されていないので表で表現ができません。

いろいろとしらべては見たのですが打開策がみつかりません。

どなたかご教授お願いします

FileAPIを使ってCSVを表にしたい

今晩は～

bootstrap、selectBoxItのプラグインを入れてデザインの作業をしています。

セレクトボックスをメニューに入れたらデザインが崩れてしまいます。

セレクトボックスの本体に data-toggle='selectbox' を追加することで、<select> タグ本体をhiddenにし
span, ui, liの綺麗なセレクトボックスのデザインを見せるselectboxitというプラグインを使っています。

＊ご参考ください。
[selectBoxItプラグイン](http://gregfranko.com/jquery.selectBoxIt.js/)

プラグインのせいかメニュー側のサイズの問題か
添付のイメージのように崩れがでています。

html変換されたコードも貼り付けますので、是非見てください。

レイアウト
![正常なパターンと崩れのイメージ](376d02b7bad0a1c9d859d00ae1fd1f7b.jpeg)

→ セレクトボックプラグインを使わないと正常に表示されました。
→ メニューでなく本文の中に入れたら正常に表示されます。

htmlコード
```html
<div>
  <select name="select-display" data-toggle="selectbox" data-mst_ledger_id="1" class="select-display" style="display: none;">
    <option value="">画面選択</option>
    <option value="1" selected="selected" data-url="/input/index.html?id=1&amp;display_id=1">test_screen1</option>
    <option value="5" data-url="/input/index.html?id=1&amp;display_id=5">test_screen1-2</option>
    <option value="6" data-url="/input/index.html?id=1&amp;display_id=6">test_screen1-3</option>
  </select>

  <span id="" class="selectboxit-container selectboxit-container" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-owns="">
    <span id="" class="selectboxit select-display selectboxit-enabled selectboxit-btn" name="select-display" tabindex="0" unselectable="on" data-toggle="selectbox" data-mst_ledger_id="1" style="width: 142px;">
      <span class="selectboxit-option-icon-container">
        <i id="" class="selectboxit-default-icon selectboxit-option-icon selectboxit-container" unselectable="on"></i>
      </span>
      <span id="" class="selectboxit-text" unselectable="on" data-val="1" aria-live="polite" style="max-width: 112px;">test_screen1</span>
      <span id="" class="selectboxit-arrow-container" unselectable="on">
        <i id="" class="selectboxit-arrow ion-chevron-down" unselectable="on"></i>
      </span>
    </span>

  <ul class="selectboxit-options selectboxit-list" tabindex="-1" style="min-width: 142px; max-height: 35px; top: auto; display: none;" role="listbox" aria-hidden="true">
    <li data-id="0" data-val="" data-disabled="false" class="selectboxit-option  selectboxit-option-first" role="option">
      <a class="selectboxit-option-anchor">
        <span class="selectboxit-option-icon-container">
          <i class="selectboxit-option-icon  selectboxit-container"></i>
        </span>
        画面選択
      </a>
    </li>
    <li data-id="1" data-val="1" data-disabled="false" class="selectboxit-option selectboxit-selected" data-url="/input/index.html?id=1&amp;display_id=1" role="option" style="display: none;">
      <a class="selectboxit-option-anchor">
        <span class="selectboxit-option-icon-container">
          <i class="selectboxit-option-icon  selectboxit-container"></i>
        </span>
        test_screen1
      </a>
    </li>
    <li data-id="2" data-val="5" data-disabled="false" class="selectboxit-option" data-url="/input/index.html?id=1&amp;display_id=5" role="option">
    <a class="selectboxit-option-anchor">
      <span class="selectboxit-option-icon-container">
        <i class="selectboxit-option-icon  selectboxit-container"></i>
      </span>
      test_screen1-2
      </a>
    </li>
    <li data-id="3" data-val="6" data-disabled="false" class="selectboxit-option  selectboxit-option-last selectboxit-focus" data-url="/input/index.html?id=1&amp;display_id=6" role="option" style="
    width: 100px;
" data-active="">
        <a class="selectboxit-option-anchor">
          <span class="selectboxit-option-icon-container">
            <i class="selectboxit-option-icon  selectboxit-container"></i>
          </span>
          test_screen1-3
        </a>
      </li>
    </ul>
  </span>
</div>
```

いろいろ試していますが、なかなかできないので質問することにしました。

どうかよろしくお願いいたします。

セレクトボックスのui li タグのデザインが崩れます（selectboxitプラグイン）

```function startFunc() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
            } else {
                document.getElementById("geo").innerHTML = "Geolocationが利用できません";
            }
        }

        function successCallback(position) {
            //成功したときの処理
            result = '緯度:' + position.coords.latitude + '<br />';
            result += '経度:' + position.coords.longitude + '<br />';
            document.getElementById("geo").innerHTML = result;
        }
        function errorCallback(error) {
            //失敗のときの処理
            document.getElementById("geo").innerHTML = 'Geolocationが利用できません';
        }
    </script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>

</head>
<body onload="startFunc()">
    <div id="geo"></div>
</body>
<script type="text/javascript">
    var message;

    // 位置情報取得
    function start_func() {
        get_location();
    }

    // ( 1 )位置情報を取得します。
    function get_location() {
        document.getElementById("area_name").innerHTML
              = '位置情報取得します';
        if (navigator.geolocation) {
            // 現在の位置情報取得を実施 正常に位置情報が取得できると、
            // successCallbackがコールバックされます。
            navigator.geolocation.getCurrentPosition
             (successCallback, errorCallback);
        } else {
            message = "本ブラウザではGeolocationが使えません";
            document.getElementById("area_name").innerHTML
                  = message;
        }
    }
    // ( 2 )位置情報が正常に取得されたら
    function successCallback(pos) {
        var Potition_latitude = pos.coords.latitude;
        var Potition_longitude = pos.coords.longitude;

        // 位置情報が取得出来たらGoogle Mapを表示する
       

        initialize(Potition_latitude, Potition_longitude);
    }

    function errorCallback(error) {
        message = "位置情報が許可されていません";
        document.getElementById("area_name").innerHTML = message;
    }

    // ( 3 )Google Map API を使い、地図を読み込み
    function initialize(x, y) {
        document.getElementById("area_name")

        // Geolocationで取得した座標を代入
        var myLatlng = new google.maps.LatLng(x, y);
        var mapOptions = {
            zoom: 17,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        // MapTypeId に、地図タイプを指定

        var map = new google.maps.Map
           (document.getElementById("map_canvas"), mapOptions);

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: "Your position"
        });
        get_area_name(myLatlng);

        // マーカー
        new google.maps.Marker({
            position: new google.maps.LatLng(35.455927, 139.611545),
            map: map,
            icon: "mark4.png"
        });

    }



    function get_area_name(latLng_now) {
        // 座標から住所名を取得
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ latLng: latLng_now }, function (results, status) {
            
        });
    }
コード
```ＧｏｏｇｌｅＭａｐｓAPIを使って、現在地と目的地の二点間の距離を測りながら、閾値を下回った時（目的地に近づいたとき）に処理を実行する動作を行おうとしています。var distance = google.maps.geometry.spherical.computeDistanceBetween(Ａ, Ｂ);を用いて、現在地の緯度経度をＡに、目的地の緯度経度をＢに入れて、二点間の距離を割り出します。その際に、現在地の緯度、経度の数字データを変数に入れたいのですが、なかなかうまく行きません。何か方法がございましたら、どうかご教授願います。初学者なので、コードもぐちゃぐちゃになってますがどうかご容赦ください。。

現在地の緯度経度のデータを変数に入れて、二点間の距離を調べたい。

jqueryプラグイン jqplotで
バブルチャートをズーム表示する方法を教えてください。

下記コードでズーム表示すると、ズームはするのですが、バブル要素がグラフの枠外にまではみ出て表示されてしまいます。
オプションの設定を色々試したり、公式ページも確認したのですが、
解決策がわかりませんでした。

```html
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./dist/jquery.jqplot.css" />
	
	<script language="javascript" type="text/javascript" src="./dist/jquery.min.js"></script>
	<script language="javascript" type="text/javascript" src="./dist/jquery.jqplot.min.js"></script>
	<script language="javascript" type="text/javascript" src="./dist/plugins/jqplot.logAxisRenderer.js"></script>
	<script language="javascript" type="text/javascript" src="./dist/plugins/jqplot.bubbleRenderer.min.js"></script>
	<script language="javascript" type="text/javascript" src="./dist/plugins/jqplot.cursor.min.js"></script>

</head>
<body>

<div id="sample1" style="height: 300px; width: 300px;"></div>
<script>
jQuery( function() {
    jQuery.jqplot(
        'sample1',
        [
            [ [ 1, 1, 1, 'A' ], [ 2, 2, 2, 'B' ], [ 3, 3, 3, 'C' ], [ 4, 4, 4, 'D' ], [ 5, 5, 5, 'E' ], [ 6, 6, 6, 'F' ] ]
        ],
        {
            seriesDefaults: {
                renderer: jQuery . jqplot . BubbleRenderer,
            },
            cursor:{
                show: true,
                zoom: true,
            }            
        }
    );
} );
</script>


</body>
</html>
```

jqplotのバブルチャートでズーム表示する方法

```
<span id="curIndex"><{ページ番号の変数}"/></span>
<ul class="bx_slider">
  <foreach 画像があるだけ>
    <li class="img">
      <img src=""/>
    </li>
  </foreach>
</ul>
```
上記のようなスライド画像を使用しております。
画像には一つ一つIDが振られておりそのID分URLがあります。
そのURL一つ一つがID分画像をスライドできるようになっております。
現在、スライドの画像は「bxSlider」というプラグインを使用しており、画像枚数の表示が本来の枚数より2枚多いため直しています。
そしてbxSlider.jsを呼び出している箇所の下を下記のように修正しました。
----------------------------------------------------------------------
```ここに言語を入力
bxslider.cssファイルの呼び出し。
bxslider.jsファイルの呼び出し。

<script type="text/javascript">
  $(document).ready(function() {
    $('.bx_slider').bxSlider({
      startSlide : <{ページ番号の変数} -1/>,
      pager : false,
      captions : true,
      onSlideNext : function() {
        $('#curIndex').text(pagemax === count ? count = 1 : ++count);
      },
      onSlidePrev : function() {
        $('#curIndex').text(1 === count ? count = pagemax : --count);
      }
    });
    var $img = $('.img'), pagemax = $img.length, count = <{ページ番号の変数}"/>;
  });
</script>

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

bxslider.cssの呼び出し。
bxslider.jsの呼び出し。
<script type="text/javascript">
  $(document).ready(function() {
    var $img = $('.img'), pagemax = $img.length, count = <{ページ番号の変数}"/>;
    $('.bx_slider').bxSlider({
      startSlide : <{ページ番号の変数} -1/>,
      pager : false,
      captions : true,
      onSlideNext : function() {
        $('#curIndex').text(pagemax === count ? count = 1 : ++count);
      },
      onSlidePrev : function() {
        $('#curIndex').text(1 === count ? count = pagemax : --count);
      }
    });
  });
</script>
```
--------------------------------------------------------------------

枚数分カウントが表示されるようになりましたが、
今度は読み込みが終わったところで1枚前の画像が表示されるようになりました。
右にスライドすると最初だけ1枚飛ばしで画像が移動してしまいます。

startSlide : <{ページ番号の変数} -1/>の部分 「-1」を消すとスライドの動作が壊れます。
どのように壊れるかというと最後の画像が1枚目の画像になってしまいます。

どのように修正すれば正常に出来るでしょうか？
調べても解決行かず、すみません、お助け下さい。

スライド画像(bxslider)の修正

かなり的はずれな質問かもしれません．

現在，web上でC++言語の開発(コードは200行程度)が出来る環境を構築したいと考えております．
その際に利用するエディタ(IDE)でWebページに埋め込み可能で個人利用できるものを探しております．
機能としては，インデント補完とテキストのコミット機能があれば問題ありません．

もしご存じの方がおられましたら，教えて頂けると幸いです．

個人利用できるweb上で動作するエディタ(IDE)について

よろしくお願いいたします。
ユーザー認証コードの位置について質問させてください。


先日、以下のような質問をこちらのサイトで行いました。
「認証確認のコードを置いたが、文字化けが生じるので、その原因と解決の助言をお願いします。」

認証コードは次のように設定しておりました。
```ここに言語を入力
<? php
 session_start();
 session_regenerate_id(true);
 if(isset($_SESSION['login']==false)
 {
   print 'ログインされていません。<br/>';
   print'<a href=""../staff_login/staff_login.html><input type="button" onclick="history.back()" class="back-box" value="ログイン画面へ"></a>';
   exit();
 }
 else
 {
   print$_SESSION['staff_name'];
   print'さんログイン中<br/>';
   print'<br/>';
 }
?>

<!DOCTYPE html>
```

それに対する回答として、<!DOCTYPE html>の前に「print」の出力コードがあるため、
文字化けが生じるとの助言をいただき、以下のように試しました。

まず、DOCTYPE以前に
```ここに言語を入力
<?php
 session_start();
 session_regenerate_id(true);
?>
```
と置き、<body>の直後に、以下のコードを置きました。
```ここに言語を入力
<?php
       if(isset($lognin)==false)
         {
             print'ログインされていません.<br/>';
             print'<a href=""../staff_login/staff_login.html><input type="button" onclick="history.back()" class="back-box" value="ログイン画面へ"></a>';
             exit();
         }
         else
         {
            print $staff_name;
            print'さんログイン中<br/>';
            print'<br/>';
        }
      ?>
```
この理解で文字化けは解消しましたが、常に「ログインされていません」が
表示されるようになりました。こちらの原因と解決を教えていただきたい次第です。

以上、何卒よろしくお願いいたします。

ユーザー認証コードの位置についての質問

jQueryについて右も左もわからないため、ご教授いただけると助かります。

```head部分
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="css/codiqa.ext.css" rel="stylesheet">
    <link href="css/jqm-neue.css" rel="stylesheet">
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/jquery.mobile-1.3.1.js"></script>
```

```
<div data-role="fieldcontain" data-controltype="textinput">
 <input name="" id="my" value="" type="text" style="border-style:none;" >
</div>
```




としているのですが、枠線が消えません。大きさ等も変えられないです。実行するとjqueryのフォームデザインで表示されるので、それを変えることはできないものなのでしょうか。
勉強不足ですが、どうぞよろしくお願い致します。

以下は問題部分の切り取ったキャプチャです。

![問題部分を表示したときのキャプチャ](4629616cbbfff3dfba33f41f7b647bdc.png)

jQuery　フォームの枠線

###前提・実現したいこと
jqueryでタブの移動を行うように作成しています。
タブのボタンをクリックするとattrでcssを付与させるような仕組みです。
ページ内のリンクを用意してしまうと、cssが付与できずに困っています。
どのような方法があるかお教えいただけますでしょうか？

jqueryでページ内リンクを作成したい。

javascriptでネストされた連想配列をマージしたいです。

```ここに言語を入力
var tmp1= {id : 1 , name : 'なまえ'} ;
var tmp2= {id : 2 , tel : 11111} ;

var a = { model_name : tmp1 };
var b = { model_name : tmp2 };

console.log( _.extend( a , b ) );

/*
こうなってほしい
  id: 2,
  name: "なまえ",
  tel: 11111
}

が 

こうなってしまう
  id: 2,
  tel: 11111
}
*/

```
 _.extend( a['model_name'] , b['model_name']);

とやれば上手く行くのは分かるのですが、子要素を含めてマージしたいのです。
underscoreとjQueryは使用可能です。

javascriptでネストされた連想配列をマージしたいです。

抽出した文字列で、特定箇所へのページ内ナビゲーションを生成したいです。

具体的には以下の構成で「hoge1_child」が生成されます。
サンプルでは3つですが、生成される個数はランダムで決まっていません。

```lang-html
<div class="hoge1_parent">
<div class="hoge1_child">
<p class="info1">info1_1</p>
<p class="info2">info2_1</p>
</div>
<div class="hoge1_child">
<p class="info1">info1_2</p>
<p class="info2">info2_2</p>
</div>
<div class="hoge1_child">
<p class="info1">info1_3</p>
<p class="info2">info2_3</p>
</div>
</div>
```

「hoge1_child」にidを付与し、別要素「hoge2_parent」内のdtタグにそれぞれの「info1」内の文字列ををコピーしメニュー名として使用したページ内ナビゲーションを作成したいです。
またddタグにはそれぞれの「info2」内の文字列をコピーしたいです。

```lang-html
<div class="hoge1_parent">
<div class="hoge1_child" id="hoge1_child_1">
<p class="info1">info1_1</p>
<p class="info2">info2_1</p>
</div>
<div class="hoge1_child" id="hoge1_child_2">
<p class="info1">info1_2</p>
<p class="info2">info2_2</p>
</div>
<div class="hoge1_child" id="hoge1_child_3">
<p class="info1">info1_3</p>
<p class="info2">info2_3</p>
</div>
</div>

<ul class="hoge2_parent">
<li><dl><dt><a href="#hoge1_child_1">info1_1</a></dt><dd>info2_1</dd></dl></li>
<li><dl><dt><a href="#hoge1_child_2">info1_2</a></dt><dd>info2_2</dd></dl></li>
<li><dl><dt><a href="#hoge1_child_3">info1_3</a></dt><dd>info2_3</dd></dl></li>
</ul>

```

ご教授の程よろしくお願いいたします。

抽出した文字列で特定箇所へのページ内ナビゲーションを生成したい

###前提・実現したいこと
カルーセルのプラグインを入れているのですがその中身をxmlにしたいと考えています。
現状読み込んでいるファイルは、
- jqueryを使うときのjs
- カルーセルのプラグイン（jquery.FlexSlider.js）
- xmlをhtml上に書き出すjs
です。

###発生している問題
xmlの読み込みは正常に行われているのですが、うまくカルーセルのjsと噛み合ってくれません。
現状、xmlで読み込んだ画像が縦に並んでいる状態です（html上に直接書くとカルーセルは動きます）。

###ソースコード
```html
<div class="flexslider">
  <ul class="slides">
  </ul>
</div>
```
```javascript
$(function(){
    $.ajax({
        url:'xml/slide.xml',
        type:'GET',
        dataType:'xml',
        timeout:1000,
        error:function() {
            alert("ロード失敗");
        },
        success:function(xml){
            $(xml).find("item").each(function() {
                $(".slides").append('<li><a href="' + $(this).find('url').text() +  '" target="_blank"><img src="' + $(this).find('imgsrc').text() + '" alt="" width="600" height="333" /></a></li>');
            });
        }
    });
});
```
```xml
<?xml version="1.0" encoding="UTF-8" ?>
<info>
	<item>
		<url>hogehoge</url>
		<imgsrc>hogehoge</imgsrc>
	</item>

	<item>
		<url>hogehoge</url>
		<imgsrc>hogehoge</imgsrc>
	</item>

	<item>
		<url>hogehoge</url>
		<imgsrc>hogehoge</imgsrc>
	</item>
</info>
```

###補足情報
htmlのhead内にカルーセルのプラグインを制御するscriptを記述しています。
```html
<script type="text/javascript">
$("document").ready(function(){
  $('.flexslider').flexslider({
    animation: "slide",
    slideshowSpeed: "5000",
  });
});
</script>
```

【javascript】カルーセルの中身をxmlで管理したい

下記のソースは、別ページのフォームから送られてきたメールアドレスとパスワードのうちメールアドレスをDB内のメールアドレスを格納しているフィールドと照合し、合っていれば同じDB内の暗号化されたパスワードを取り出し、別ページから送信されたパスワードと
取り出した暗号化パスワードを照合、合っていれば会員ページにログインするというものなのですが、何故か暗号化される前のパスワードを入力しているのにも関わらず「メールアドレスかパスワードが間違っています。」と表示されてしまいます。もちろん、メルアドは間違っておりません。因みに、この処理は別日に作成したスタッフページにログインする為プログラムを流用しているのですがそちらは上手く動作するのです。
なぜ、この会員ページにログインするプログラムだけ上手く動作しないのでしょうか。

パスワードが合っているかどうか判定するソース
```php
<?php
try {
require_once '../lib/dbaccess.php';
require_once '../common/common.php';

$post = sanitize($_POST);

$member_email = $post['email'];
$member_pass = $post['pass'];

$dbh = dbaccess();
//まず、前頁から送られてきた二つの情報のうちメールアドレスをデータベースで照合し、一致したらパスワードを呼び出し関数で送られてきたもう一つのパスワードと照らし合わせて合っていれば接続可能とする。
$sql = 'SELECT email,name,password FROM dat_member WHERE email=?';
$stmt = $dbh->prepare($sql);
$data[] = $member_email;
$stmt->execute($data);

$rec = $stmt->fetch(PDO::FETCH_ASSOC);
if(! password_verify($member_pass, $rec['password'])) {
    echo <<<EOL
    <p>メールアドレスかパスワードが間違っています。</p>
    <a href="./member_login.html">戻る</a>
EOL;
}else {
	session_start();
	$_SESSION['member_login'] = 1;
	$_SESSION['member_code'] = $rec['code'];
	$_SESSION['member_name'] = $rec['name'];
	header('Location: ./shop_list.php');
}

$dbh = null;

$rec = $stmt->fetch(PDO::FETCH_ASSOC);
} catch(Exception $e) {
	echo <<<EOL
	   ただいま障害により大変ご迷惑をおかけしております。
EOL;
exit();
}
?>
```
会員登録の際に利用するソース
```php
$lastmembercode = 0;
//会員登録込で商品を購入する際に利用する処理。会員登録に必要な情報をDBに保存させる。
if($chumon == 'chumontouroku') {
	$sql = 'insert into dat_member (password,name,email,postal1,postal2,address,tel,danjo,born) values(?,?,?,?,?,?,?,?,?)';
	$stmt = $dbh->prepare($sql);
	$data = array();
	
	function password($password) {
		$options = array('cost' => 10);
		return $pass = password_hash($password, PASSWORD_DEFAULT, $options);
	}
	$pass = password($pass);
	$data[] = $pass;
	$data[] = $onamae;
	$data[] = $email;
	$data[] = $postal1;
	$data[] = $postal2;
	$data[] = $address;
	$data[] = $tel;
	if($danjo == 'dan') {
		$data[] = 1;
	} else {
		$data[] = 2;
	}
	$data[] = $birth;
	$stmt->execute($data);
	
	$sql = 'select last_insert_id()';
	$stmt = $dbh->prepare($sql);
	$stmt->execute();
	$rec = $stmt->fetch(PDO::FETCH_ASSOC);
	$lastmembercode = $rec['last_insert_id()'];
}

```

正しいパスワードを入力しているのにログインできない

日付(2015/12/01)のデータを取り出したいのですが、わかる方がいましたら、ご教授お願いいたします。