ショッピングカートをついてこさせる

こんばんは。

javaスクリプトを使った「ショッピングカート」を、
常にブラウザウィンドウ右上に表示させる方法を調べています。

http://o-to.nu/Oto%20no%20Omise.html
こちらのページで、 wav や mp3 をクリックすると、
右上にカートが現れると思いますが、
ページを下にスクロールしたり、
ブラウザウィンドウを小さくしたりすると、
見失ってしまいます。
なので、スクロールしても、ウィンドウサイズを変えても、
常にウィンドウの右上に表示させることはできないかと、

https://www.google.co.jp/webhp?sourceid=chrome-i …
このような検索ワードで出たサイトに書いてあること、
java jQuery css といったものを試したのですが、
どれもうまくいきませんでした。

なので、どのみち無理なんじゃないだろうかと、
このカートを作った会社
https://www.easypay.jp/rkrkcart
に問い合わせたところ、
javaに精通していれば、難しいが可能、との回答をもらいました。

もう2日、いろんな参考サイトの方法を試すものの実現できず、
何かヒントを貰えないだろうかと思い、質問させていただきました。

答えでなく、こうしてみてはどうか、
という些細なアイデアでも構いません。
何か思いつく方は、教えていただけないでしょうか？

質問者からの補足コメント

• 

  回答ありがとうございます。
  
  http://o-to.nu/Oto%20no%20Omise.html
  こちらが作ったサイトです。
  スクロールによる追従はできない状態です。
  
  思う疑問は、常に見えているサイドメニューなどであれば、
  position: fixed; で簡単に、固定したり追従させたりできますが、
  上記サイトのカートを出現させているのは、ソース内の
  
  <script type="text/javascript" src="https://www.easypay.jp/easycart/js/1428270386574 …
  
  の部分、つまり、このカートを作っているサイトが持つ
  サーバーにある外部ファイルです。
  こんなものを固定したり、追従させたりできるのか、
  というのが前からの疑問です。

  No.1の回答に寄せられた補足コメントです。 補足日時：2016/06/04 13:58

• 

  回答ありがとうございます。
  
  position:fixedですが、これを適用させたいカートが
  
  <script type="text/javascript" src="https://www.easypay.jp/easycart/js/1428270386574 …
  
  質問内のサイトのソースの上から2行目で確認できますが、
  これで出現させています。
  カートの制作会社のサーバーにある外部ファイルです。
  これに対して固定・追従、というのができません。
  
  それ以前に、
  相手サーバーの外部ファイルをいじることはできませんので、
  会社はできるというものの、そもそも無理であって、
  無駄な努力をしているのでは、という心配があります。
  無理と確定すればもうあきらめることができますので、
  そこだけでも確認できればと思っています。

  No.2の回答に寄せられた補足コメントです。 補足日時：2016/06/04 14:09

• 

  有難うございます。
  おかげさまで、スクロールについてこさせることができました。
  ご覧の通りです。
  
  http://o-to.nu/Oto%20no%20Omise.html
  
  2時間頑張って、できなかった事が2つあります。
  最後のわがままを聞いてもらえないでしょうか。
  
  
  
  ※なんとか実現したいこと※
  
  ウィンドウを最大化などすれば、
  カートの位置は大きくずれ、
  ウィンドウ最大化の状態で出たカートは、
  ウィンドウを小さくしたりすると、消えます。
  消えるというか、右の方、見えないところにあるんですが。
  ウィンドウサイズを変更しても、
  常にカートがウィンドウの右上についている状態にできますか？
  
  
  
  ※できれば実現したいこと※
  
  カートをドラッグして移動できるのですが、
  現状ではウィンドウの外まで動かせます。
  カートの移動をウィンドウ内限定にできますか？
  
  
  
  もし可能でしたら、お願いします。

  No.3の回答に寄せられた補足コメントです。 補足日時：2016/06/04 17:00

No.4 ベストアンサー 回答者： DoubtOwl 回答日時： 2016/06/05 13:12

私の環境ではウインドウサイズ縮小で画面外にカードが行きましたが

最大化では中ほどに表示されました。
現象は違いますがLeftを起点に位置を固定しているのが原因だと思われます。

スクリプトを以下に変更してください。

<script type="text/javascript">
function changeEasyCart(){
var easyCart = document.getElementById("easycart");
easyCart.style.position="fixed";
easyCart.style.left="";
easyCart.style.right="0px";
window.addEventListener("mousemove", easyCartRelocate);
}

function changeEasyCartLater(){
setTimeout("changeEasyCart()", 300);
}

//ウインドウからはみ出したら戻す
function easyCartRelocate(e){
var easyCart = document.getElementById("easycart");
var windowWidth = parseInt($(window).width(), 10);
var windowHeight = parseInt($(window).height(), 10);

var cartY = parseInt(easyCart.style.top, 10);
var cartX = parseInt(easyCart.style.left, 10);

var cartHeight = parseInt(easyCart.clientHeight, 10);
var cartWidth = parseInt(easyCart.clientWidth, 10);

if(cartY < 0){
easyCart.style.top = "0px";
}
if(cartY + cartHeight > windowHeight){
easyCart.style.top = (windowHeight - cartHeight);
}

if(cartX < 0){
easyCart.style.left = "0px";
}
if(cartX + cartWidth > windowWidth){
easyCart.style.left = (windowWidth - cartWidth);
}
}
</script>

~~~~~~~~~~~~~~
<input type="button" value="カートを表示する" onClick="EasyCart.cartShow();changeEasyCartLater();" />

この回答へのお礼

ありがとうございます。
すべて解決いたしました。

この質問ページはブックマークに保存し、
大事にとっておきます。

ｍ（＿　＿）ｍ

お礼日時：2016/06/05 20:10

No.3 回答者： DoubtOwl 回答日時： 2016/06/04 14:53

ご提示の条件なら簡単です。

easycartというIDのdivがposition=absoluteで生成されるので、
生成された後にposition=fixedにしてやりましょう。

具体的には下記スクリプトを追加してボタンのonClickで呼んでください。
(div生成にタイムラグがあるようなのでsetTimeoutで0.3秒後にpositionを書き換えてます。)

<script type="text/javascript">
function changePosition(){
setTimeout("document.getElementById('easycart').style.position='fixed';", 300);
}
</script>

~~~~~~~~~~~~~~
<input type="button" value="カートを表示する" onClick="EasyCart.cartShow();changePosition();" />

No.2 回答者： fujillin 回答日時： 2016/06/04 13:01

こんにちは

よくわかってませんので、意味を取り違えているかもしれませんが、

＞スクロールしても、ウィンドウサイズを変えても、
＞常にウィンドウの右上に表示させることはできないかと
固定位置に表示なさりたいのなら、CSSでposition:fixedにしておけばよさそうに思えますが・・・
その上で、表示したりしなかったりがあるのなら、そちらだけをスクリプトを用いて制御すればこと足りそうな気がしますが。

No.1 回答者： DoubtOwl 回答日時： 2016/06/04 10:27

具体的に何ができていないのか、他の要素が影響してないかが分からないのでアドバイスが難しいです。

・作ったサイトを見せることができますか
・スクロールによる追従もできていないのでしょうか

他の方法であればあまりオススメできませんがフレームを分けてしまうぐらいですかね・・

この回答へのお礼

回答ありがとうございます。

質問中の
http://o-to.nu/Oto%20no%20Omise.html
こちらが作ったサイトです。
wav mp3 を押すと出てくるカートの、
スクロールによる追従などができない状態です。

思う疑問は、
サイドメニュー、ヘッダーメニューなど、常に見えている要素を、
いわゆる position: fixed; でしょうか、
これで固定したり、追従させたりは簡単にできるんですが、
上記サイトのソースを見ると、このカートを出現させているのは、

<script type="text/javascript" src="https://www.easypay.jp/easycart/js/1428270386574 …

つまり、このカートを作った会社が持つサーバーにある外部ファイルです。
こんなものを固定したり、スクロール追従したりできるものなのだろうか、
これが前から思っている疑問です。

お礼日時：2016/06/04 13:50