忍者ブログ
05 May

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

18 March

アコーディオンパネル　開閉パネル　他全部閉じる

クリックしたら他のサブメニューを閉じる
他のactiveクラスを削除する


jQuery(function(){
    $('.area_btn').on('click', function() {
        $(this).next().stop().slideToggle();
            $(this).toggleClass("active");//追加部分
        // メニューをクリックしたら他のサブメニューを閉じる
        $('.child_area_list').not($(this).next('.child_area_list')).slideUp();
        $('.area_btn').not($(this)).removeClass('active');
    });
});
PR
26 December

firefoxとIEで別ページからのページ内アンカーリンクがずれる

なんか前のコードでIEで強制リロードしてくんねえ
Chrome以外で正常な位置にとばねえ。あーうざすぎ。細かい客に当たるとめんどくせえ
firefoxとChromeでは、このコードで動いたがIEが全然だめ。
検索しまくってやっと原因がわかった。body締め直前に最後に実行させないとIEでちゃんと動かなかった。

ありがたいコードをコピペ
https://entrys.jp/html5/column/2289/
一番下にコードを置く
https://www.drk7.jp/MT/archives/001550.html
https://kumiko-jp.com/archives/215120.html

<script type="text/javascript">
//全て読み込んでからの処理　別ページからのアンカーリンクが正常な位置に飛ばない対策
//html内の一番下に記述しないとIEで動作しない
$(window).on('load', function() {
    var hash = window.location.hash;
    var position = $(hash).offset().top;
    function scroll(position){
      $('html, body').animate({
        scrollTop : position
      }, 200);
    }
    scroll(position);
});
</script>


http://design-ya.net/blog/2015/10/19/35/

<script language=JavaScript>
function now() {
window.location.reload(true);
}
</script>

IE11でも別ページからのアンカーリンクちゃんと飛ばなかった！！2019/10/01
そういえば忘備録に書いてあったかなーと思って検索したらあった！！
ヨカッター。そんでURLとんでみたら記事がなかった
やっぱりコードを自分のとこに引用コピペ寸の大事だな


いつもIEばっかり気にしていていたが、firefoxだけのおかしい点があった
別ページからベージ内アンカーリンクを飛んだとき、ちゃんとidの位置に飛ばなくてずれる
検索するとどうも結構昔からある症状の様子だ

治す方法は見つからず、飛んだ後、強制リロードするというscriptで対処する方法がみつかった
ありがてえ
飛んだ後再リロードすると正常な位置に戻るので、それを自動でする形。
27 August

画像とキャプションをクリックで切り替える

https://teratail.com/questions/96585
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
</head>
<body>
<div class="thumbnails">
    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=1" class="alt_text" alt="1">
    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=2" class="alt_text" alt="2">
    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=3" class="alt_text" alt="3">
</div>
<div class="mainImage">
    <img src="" alt="">
    <p></p>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
    $(function () {
        $('.thumbnails img').hover(function () {
            var $thisImg = $(this).attr('src');
            var $thisAlt = $(this).attr('alt');
            $('.mainImage img').attr({src: $thisImg, alt: $thisAlt});
            $('.mainImage p').text($thisAlt);
        });
    });
</script>
</body>
</html>



いろいろ検索して試してみたけど、くそめんどくさい長いコードだったり、画像だけだったり、画像の切り替えにうざいエフェクトついてたり、楽なコードが全然みつかんない
クリックしたらかわりゃいいんだ。レイアウトなんてcssでどうにかするから、余計なコードはいらねえ
そんな中この回答がすばらしかったです
09 July

スマホ　メニュータップと同時にメニューを閉める　ドロワーメニュー

https://showjinx.hatenablog.com/entry/pagelink_drawer-menu

https://ja.stackoverflow.com/questions/40835/%E3%83%8F%E3%83%B3%E3%83%90%E3%83%BC%E3%82%AC%E3%83%BC%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%92%E3%83%9A%E3%83%BC%E3%82%B8%E5%86%85%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AE%E6%99%82%E3%81%AB%E9%96%89%E3%81%98%E3%82%8B%E3%81%AB%E3%81%AF

https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11158073326


ページ内アンカーリンクだと、スマホメニューが閉じないため、移動状態がよく見えなくなる
移動と同時にメニューを閉じたい