投稿

モーダルウインドウで隠れないコンテンツがあるバグのコード

 サイドバーのあるウェブページでメインブロックから全面のモーダルウインドウを開いたらサイドバーのコンテンツの一部が隠れなかった問題を再現するためのコード。 メインブロックに z-index:0 があることで、メインウインドウとは親が異なるサイドバーは重なった場合にメインウインドウの上面に表示してしまう。 モーダルウインドウはメインウインドウ内にあるため、z-indexの値を大きくしてもメインウインドウ内で最上面に表示されるだけで、その後にサイドバーを描画したらサイドバーの方が上面になる。htmlのコードでサイドバーの方を先に記述していれば、サイドバーの後にメインウインドウを表示するので、重なった場合もメインウインドウの方が上面になり、モーダルウインドウは最上面になる。 モーダルウインドウをメインウインドウの外に出せば、 z-indexの値が効果を持つようになり、最上面に表示させることができる。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pure Original Code</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <style>     #main{       z-index:0; /* メインのウィンドウ。.sub-inよりも小さくしない */       position: relative; /* z-indexを有効にするため */       border: 3px dashed #000;       padding: 10px;       text-align:...
コメントを投稿
続きを読む

Webページ内のidのinnerHTMLを新しいタブで開くためのブックマークレット

 　Webページの一部（例：id=" kashi_area "）をブラウザの新しいタブで表示するためのブックマークレット。表示しているWebページではテキストを取得できず、その所得したいテキスト部分のidが分かっている場合に利用する。  javascript:(function(){     const element = document.getElementById(" kashi_area ");     if (element) {         const newWindow = window.open();         newWindow.document.write(element.innerHTML);         newWindow.document.close();     } else {         alert("要素が見つかりません");     } })();
コメントを投稿
続きを読む

康煕部首、CJK部首補助、サロゲートペアの検出ブックマークレット

ウェブページに康煕部首、CJK部首補助、サロゲートペアが含まれているか確認するためのブックマークレットをGeminiに作ってもらった。サロゲートペアは「CJK統合漢字拡張B以降」と表現している。 javascript:(function() {     const patterns = {         "康煕部首": /[\u2F00-\u2FDF]/g,         "CJK部首補助": /[\u2E80-\u2EFF]/g,         "CJK統合漢字拡張B以降": /[\u{20000}-\u{2FFFF}]/ug,         "絵文字": /[\u{1F000}-\u{1FFFF}\u{1F300}-\u{1F64F}\u{1F680}-\u{1F6FF}\u{1F700}-\u{1F77F}\u{1F780}-\u{1F7FF}\u{1F800}-\u{1F8FF}\u{1F900}-\u{1F9FF}\u{1FA00}-\u{1FAFF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{1F1E6}-\u{1F1FF}\u{1F191}-\u{1F251}\u{1F004}\u{1F0CF}\u{1F170}-\u{1F171}\u{1F17E}-\u{1F17F}\u{1F18E}\u{3030}\u{3297}\u{3299}\u{FE00}-\u{FE0F}\u{1F018}-\u{1F02F}]/ug     };     const bodyText = document.body.innerText;     const foundChars = [];     for (const [name, pattern] of Object.entries(patterns)) { ...
コメントを投稿
続きを読む

TextAreaのキャレットの位置で行番号を取得するコード

　TextAreaに行番号を付加するのは、折り返しでも行番号が追加されてしまうコードか、折り返しを禁止するコードしか、作ることができず、難しい。そこで、キャレットの位置で行番号が分かるようなコードを用意することにした。この場合、折り返して数行に見えてもそれは同じ行としてカウントされるので、テキストエディタで表示される行番号と同じになる。コードはGeminiに教わった。 <!DOCTYPE html> <html> <head>     <title>TextArea キャレット行番号取得</title> </head> <body>     <textarea id="inputText" rows="10" cols="50"></textarea>     <div id="caretLineNumber">現在のキャレット行番号: 1</div>     <script>         const textarea = document.getElementById('inputText');         const caretLineNumberDiv = document.getElementById('caretLineNumber');         function updateCaretLineNumber() {             const caretPosition = textarea.selectionStart;             con...
コメントを投稿
続きを読む

康煕部首、CJK部首補助、サロゲートペアの検出

康煕部首を検出して修正案を表示するコード をGeminiに作ってもらったが、CJK部首補助やサロゲートペアも問題を起こしそうなので検出する必要が生じた。そこで、CJK部首補助も検出して修正案を表示できるようにコードを変更し、サロゲートペアを検出して表示するコードも作成してもらった後、それらをまとめた。 <!DOCTYPE html> <html lang="ja"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="description" content="康煕部首とCJK部首補助を検出して修正案を示したり、サロゲートペアを検出してUnicodeを示す">     <title>康煕部首、CJK部首補助、サロゲートペアの検出</title>     <style>         body { font-family: sans-serif; }         table { border-collapse: collapse; width: auto; /* テーブルの幅を内容に合わせて調整 */ }         th, td { border: 1px solid #ccc; padding: 8px; text-align: left; white-space: nowrap; /* セルの内容が折り返されないように */ }         th { background-color: #f0f0f0; }  ...
コメントを投稿
続きを読む

康煕部首を検出して修正案を表示するコード

 ウェブページの文章をコピーする際に康煕部首が含まれていることがあって、見た目では気づきにくいので、検出して修正案を表示するコードをGeminiに作ってもらった。 （kangxiToModifiedにずれがあったので修正しました。「戸」も修正しました。） <!DOCTYPE html> <html lang="ja"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>康煕部首検出と修正案 (Unicode表示付き)</title>     <style>         body { font-family: sans-serif; }         table { border-collapse: collapse; width: auto; /* テーブルの幅を内容に合わせて調整 */ }         th, td { border: 1px solid #ccc; padding: 8px; text-align: left; white-space: nowrap; /* セルの内容が折り返されないように */ }         th { background-color: #f0f0f0; }     </style> </head> <body>     <h1>康煕部首検出と修正案 (Unicode表示付き)</h1>   ...
コメントを投稿
続きを読む

紹介されてるコードを右端で折り返すブックマークレット

ウェブページで紹介されているコードの一行が横に長くて横スクロールバーが出ているのを右端で折り返して横スクロールバーが出ないようにするためのブックマークレット。 （折り返せる区切りが無くて折り返せない場合に横スクロールバーが無いと困る。） その１ javascript:(function() {   const elements = document.querySelectorAll('code, pre');   elements.forEach(element => {   const currentWhiteSpace = window.getComputedStyle(element).whiteSpace;   if (currentWhiteSpace === 'pre-wrap') {     element.style.setProperty('white-space', 'pre');     element.style.setProperty('overflow-x', 'auto');   } else {     element.style.setProperty('white-space', 'pre-wrap');      /* element.style.setProperty('overflow-x', 'hidden'); この行は削除する */   }   }); })();  その２ javascript:(function() {   const elements = document.querySelectorAll('code, pre');   elements.forEach(element => {   const currentWhiteSpace = window.getComputedStyle(element).whiteSpace;...
コメントを投稿
続きを読む