人に聞けない痔の悩み、これでスッキリ >>

フッター下部を追従しているコンテンツをフォーム入力時に非表示にしたい。

いつもお世話になっております。
掲題のとおりフッター下部を追従しているコンテンツをフォーム入力時に非表示にしたいのですが、jsなどで制御できるのでしょうか。

できればサンプルコードを頂けると幸いです!

A 回答 (1件)

こんにちは



どのような構成なのか不明なので以下を勝手に想定。
(内容に合わせて、適当に修正願います)
 ・フォーム内の鋼製も不明なので、ひとまず<input type="text" />要素の
  focus、blurをトリガーとしています。
 ・fixedの要素はclass="fixed"と仮定しています。

以下、サンプルコードです。(Fx62、Chrome68にて動作確認)
for(let e of document.querySelectorAll("input[type='text']")){
[["focus","none"],["blur","block"]].forEach( t =>{
e.addEventListener(t[0] , ()=>{
document.querySelector(".fixed").style.display = t[1];
});
});
}
    • good
    • 0
この回答へのお礼

ありがとうございます!

お礼日時:2018/09/12 10:49

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Qjavascriptを用いて作成された自動要約のプログラムの内容について教えてください。

大学で自動要約について研究しています。研究を行う上でtiny_summarizerという自動要約システムを使用しているのですが、javascriptには詳しくなく、正直、プログラムの内容がほとんど理解できていません。
とりあえず理解できているのは、tiny_segmenterとTinySplitterで文章を分かち書きし、文分割したものをtiny_summarizerに送り、重要な単語の抽出、重要文の抽出、要約文字数に合った文の抽出を行って要約しているということです。
しかし、tiny_summarizerがどのような基準、手法で単語を選別しているのか、プログラムを見ても理解ができませんでした。

作者様のページでは
「様々な文書ドメインにおいて比較的頑健であると思われる単語頻度のみを用いて重要文の抽出を行っています。TinySegmenter による前処理を想定しているため、品詞による内容語と機能語の選別を行っておらず、内部に保持したストップ・ワードのリストに基づいて重要文の抽出に利用する単語の選別を行います。」
と書かれています。

作者様のページから、tiny_summarizerをダウンロードして頂いて、TinySummarizer.jsの内容について説明していただけるとありがたいです。

参考URL:https://hitoshin.github.io/tiny_summarizer/

大学で自動要約について研究しています。研究を行う上でtiny_summarizerという自動要約システムを使用しているのですが、javascriptには詳しくなく、正直、プログラムの内容がほとんど理解できていません。
とりあえず理解できているのは、tiny_segmenterとTinySplitterで文章を分かち書きし、文分割したものをtiny_summarizerに送り、重要な単語の抽出、重要文の抽出、要約文字数に合った文の抽出を行って要約しているということです。
しかし、tiny_summarizerがどのような基準、手法で単語を選別しているのか...続きを読む

Aベストアンサー

TinySummarizer.prototype.summarize = function(words, length) {
this.preprocess(words);
this.decode(length);
return this.output();
}

とあるので、summarizeに引数をつけて呼び出すとこの順序で実行される

this.preprocessでは、引数の配列 words が評価される。(おそらく行を配列に、その行は単語に分かれ、さらに配列にしてあると推測。二次元配列。)
評価としては 各単語?にstop_wordsが含まれていなければ、その単語の評価値を上げる
行ごとにその行で評価された単語の点数を加算して合計を求める

あとの this.decode は誰かに任せた。

QURLによってHTMLのテキストを変更するコードを教えてください。

お世話になります。
Wordpressで自分のサイトを制作中で、外部JSファイルにてのブログの説明欄をそれぞれ違う言語で表示したいのですが、うまくいきません。
PHPはいじるのが怖いため、jQueryで書いていました。コードは以下になります。
----------------------------------------------------------------------

jQuery(document).ready(function() {

var loc = window.location.href;

if ("loc.includes('ja') > -1") {
jQuery('#header-page-title-inside .byline').replaceWith('<p class="byline"> 日本語説明文</p>');
}

else if("loc.include('pl') > -1") {
jQuery('#header-page-title-inside .byline').replaceWith('<p class="byline"> ポーランド語説明文 </p>');
}

else ("loc.include('en') > -1") {
jQuery('#header-page-title-inside .byline').replaceWith('<p class="byline"> 英語説明文 </p>');
}


});
----------------------------------------------------------------------

上記で試しましたが、取得したURLに関係なくまず日本語の説明文が表示されます。
Elseを抜いてIf文のみで構成するなどしましたが、やはりうまくいきません。
稚拙な構文ではございますが、どなたか力を貸してはいただけないでしょうか?
何卒よろしく願いいたします。

お世話になります。
Wordpressで自分のサイトを制作中で、外部JSファイルにてのブログの説明欄をそれぞれ違う言語で表示したいのですが、うまくいきません。
PHPはいじるのが怖いため、jQueryで書いていました。コードは以下になります。
----------------------------------------------------------------------

jQuery(document).ready(function() {

var loc = window.location.href;

if ("loc.includes('ja') > -1") {
jQuery('#header-page-title-inside .byline').replaceWith('<p class...続きを読む

Aベストアンサー

ほそく
loc.indexOf('ja') > -1
だった場合、
loc の文字列の中が ’jaiko.com' でも日本語の説明になるよ!
どうやってURLから判断するの?

QJavascriptについて

下記のプログラムがうまくいかないのですが、どうすればよいでしょうか

<html lang="ja">
<head>
<title>Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT-JIS;">
</head>
<body>
<div id="sect">
名前 <input name="user" type="text" value="" size="30"><br>
<input name="send" type="submit" value="confirm" size="30" onclick="check();">
<script>
function check(){
var count=10;
document.forms.sect.getElementById('user').value = count;
}
</script>
</div>
</body>
</html>

下記のプログラムがうまくいかないのですが、どうすればよいでしょうか

<html lang="ja">
<head>
<title>Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT-JIS;">
</head>
<body>
<div id="sect">
名前 <input name="user" type="text" value="" size="30"><br>
<input name="send" type="submit" value="confirm" size="30" onclick="check();">
<script>
function check(){
var count=10;
docu...続きを読む

Aベストアンサー

document.querySelector ('input[name="user"]').value = count;
じゃないだろうか。

Qhtml内のjavascript のコメント

html 内に<script type="text/javascript"> ....</script> として、javascript のプログラムを
書きたいのですが、このjavascriptの中でコメントを書くにはどのようにすればよいのでしょうか。
html のコメント <!-- ... -->を使うのでしょうか。あるいはjavascript のコメント //..... を使うのでしょうか。

Aベストアンサー

補足

(JavaScriptに対応しているブラウザでは)JavaScript内で「<!-- … -->」はコメントになりません。
JavaScriptに対応してないブラウザ用にJavaScript内で「<!-- ... // -->」を使う事が推奨されています。

<script language="JavaScript">
<!--



// -->
</script>

↑このように記述する事でJavaScriptに対応してないブラウザに対して、JavaScriptのプログラムがコメントとして扱われます。
JavaScriptに対応しているブラウザに対してはチャントJavaScriptのプログラムとして扱われます。

Qメソッドが返す配列オブジェクト?を分解して、一発で配列の各要素に1個づつ値を入れたい

メソッドが返す配列オブジェクト?を分解して、一発で配列の各要素に1個づつ値を入れるやり方を教えてください。
具体的には次のソースコードで配列「現敵パーティー」が['モンク', 'モンク', '白魔道士', '黒魔道士']になるようにしたいのですが、[[モンク,モンク,白魔道士,黒魔道士], undefined, undefined, undefined]になってしまいます。

var 敵パーティー = [
['ナイト', 'モンク', '白魔道士', '黒魔道士'],
['ナイト', 'モンク', '白魔道士', '青魔道士'],
['モンク', 'モンク', '白魔道士', '黒魔道士'],
['ナイト', 'ナイト', 'モンク', '白魔道士']
]
var 現敵パーティー = [];
現敵パーティー = [敵パーティー.splice(2, 1)]

Aベストアンサー

>[0]を付けることによって、メソッドが返す配列オブジェクト?を分解できるのですね。

分解はslice()メソッドでしてます、[0]を付けることによって2次元配列を1次元配列に次元数をダウンしてます。

QjavascriptでHTMLを絞り込み検索できるようにしたいです

javascriptを使用して、HTMLで書いてある要素を絞り込み検索できるようにしたいです。
具体的なイメージは、下記URLのページです。
これに、リセットボタンを付けたいのですがどのように書けばいいのかわからず困っています。
どうかご教授いただけないでしょうか。

http://cly7796.net/wp/sample/implement-the-process-of-narrowing-down-the-list/index3.html

Aベストアンサー

<input type="button" value="reset" onclick="
var select = document.querySelectorAll ('.serchBox select option:first-of-type');
Array.from (select).forEach (s => s.selected = true);
var ops = document.querySelectorAll ('.serchBox input[type=checkbox]:checked');
Array.from (ops).forEach (o => o.checked = false);
">

Qフィッシャーイェーツのシャッフルで値を出して、別の関数で使いたい

JavaScriptで全くの初心者なのですが、
フィッシャーイェーツのシャッフルをaのリスト内でしてから、
そこから一つ値をとり、
別の関数内で、その関数内での新たな変数に代入するようにしたいです。(function(){var b = this.result;}のような)
プログラミングはやらないのに急に使うことになり困っているのでだれか助けてください。


a = [1,1,1,5,5,5,9,9,9];
for (var a=[],i=0;i<10;++i) a[i]=i;
this.result = a[shuffle(a.length)] ;
function shuffle(array) {
var tmp, current, top = array.length;
if(top) while(--top) {
current = Math.floor(Math.random() * (top + 1));
tmp = array[current];
array[current] = array[top];
array[top] = tmp;
}
return array;
}

JavaScriptで全くの初心者なのですが、
フィッシャーイェーツのシャッフルをaのリスト内でしてから、
そこから一つ値をとり、
別の関数内で、その関数内での新たな変数に代入するようにしたいです。(function(){var b = this.result;}のような)
プログラミングはやらないのに急に使うことになり困っているのでだれか助けてください。


a = [1,1,1,5,5,5,9,9,9];
for (var a=[],i=0;i<10;++i) a[i]=i;
this.result = a[shuffle(a.length)] ;
function shuffle(array) {
var tmp, current, top = arr...続きを読む

Aベストアンサー

答えはあっちに書いといた

そんで
a = [1,1,1,5,5,5,9,9,9];
for (var a=[],i=0;i<10;++i)
a[i]=i;

変数 a を定義しておいてすぐに上書きするのが意味ない。


this.result = a[shuffle(a.length)] ;
this.result は、グローバル変数だからどこでも変数 result ととして参照できる

a[shuffle(a.length)]
シャッフル関数に配列を渡さないで、その配列の大きさを渡しているので意味がない

ちゃんとしたやつをコピペするべ。
というか、そこにこそ目をつけるべきだべ?

Q行き過ぎ量が計算値と実験した値と違うんですけどどうしてですか?

行き過ぎ量が計算値と実験した値と違うんですけどどうしてですか?

Aベストアンサー

計算には無い外乱の影響。

Q【jquery】シングルページでのカレント表示について

お世話になります。
練習でHP制作を行っているのですが行き詰ってしまいました…。
知恵をお貸し頂けませんでしょうか。

http://www.nomatokyo.ayapro.ne.jp/
こちらのページを参考にHP制作を行っています。

こちらのサイトのメインページの右端にあるページのカレント表示(オレンジのつぶつぶ)と
同じものを作りたいのですが自力で調べてみて参考にコードを書いてみるもどうしてもうまくいきません。
<a>タグなどはなく、<ul>の中の<li>にactiveを付与するものですが、スクロール地点の取得の仕方やコードの組み立て方がどうしても頭の中でぐちゃぐちゃになってしまいます。

どなたか教えて頂けないでしょうか。

Aベストアンサー

clientHeightで各コンテンツの位置を取得しておいて、スクロールが発生したらその時の位置と取得しておいた各コンテンツの位置を比較すれば良いかと思います。
とりあえず最低限の実装で再現してみました。

<html lang="ja">
<head>
<meta charset="utf-8" />
<style type="text/css">
.box {
width: 100%;
height: 1500px;
font-size: 40px;
}
.box1, .box7 {
height: 100px;
}
.box1, .box3, .box5, .box7 {
background-color: #ffeeee;
}
.box2, .box4, .box6 {
background-color: #eeffee;
}
.ul {
position: fixed;
right: 20px;
top: 40%;
z-index: 10;
}
.ul > li {
color: red;
opacity: 0.3;
}
.ul > li.active {
opacity: 1;
}
</style>

<script type="text/javascript">
var pos={};
var currentPos = 0;
function heightSet() {
pos[0] = document.getElementById("header").clientHeight;
pos[1] = pos[0] + document.getElementById("contents0").clientHeight;
pos[2] = pos[1] + document.getElementById("contents1").clientHeight;
pos[3] = pos[2] + document.getElementById("contents2").clientHeight;
pos[4] = pos[3] + document.getElementById("contents3").clientHeight;
pos[5] = pos[4] + document.getElementById("contents4").clientHeight;
}

window.onscroll = function(){
var p = window.pageYOffset || document.documentElement.scrollTop;
for(var i=0; i<5; i++){
if(p >= pos[i] && p < pos[i+1] && i != currentPos) {
var li = document.getElementById("ul").children;
li[currentPos].className = '';
li[i].className = 'active';
currentPos = i;
break;
}
}
}
</script>

</head>

<body onload="heightSet()">

<ul class="ul" id="ul">
<li class="active"> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>

<div id="header" class="box box1">header</div>
<div id="contents0" class="box box2">A</div>
<div id="contents1" class="box box3">B</div>
<div id="contents2" class="box box4">C</div>
<div id="contents3" class="box box5">D</div>
<div id="contents4" class="box box6">E</div>
<div id="footer" class="box box7">footer</div>

</body>
</html>

clientHeightで各コンテンツの位置を取得しておいて、スクロールが発生したらその時の位置と取得しておいた各コンテンツの位置を比較すれば良いかと思います。
とりあえず最低限の実装で再現してみました。

<html lang="ja">
<head>
<meta charset="utf-8" />
<style type="text/css">
.box {
width: 100%;
height: 1500px;
font-size: 40px;
}
.box1, .box7 {
height: 100px;
}
.box1, .box3, .box5, .box7 {
background-color: #ffeeee;
}
.box2, .box4, .box6 {
background-color: #eeffee;
}
.ul {
po...続きを読む

Q【javascript,jquery】こちらのコードを解説して頂けないでしょうか...?

<li>で並んでいるimgを上から下へ動かして一番下で上に戻して...ループしているコードなのですが中身が分かりません。
e に代入している $("#movie_pos > li");と 5e3が特によくわかりません

どなたかよろしくお願いします。困っています


function () {
var e = $("#movie_pos > li");
e.removeAttr("style"), e.eq(0).animate({
top: f[0]
}, 5e3, "linear"), e.eq(1).animate({
top: f[1]
}, 5e3, "linear"), e.eq(2).animate({
top: f[2]
}, 5e3, "linear"), e.eq(3).animate({
top: f[3]
}, 5e3, "linear"), e.eq(4).animate({
top: f[4]
}, 5e3, "linear"), e.eq(5).animate({
top: f[5]
}, 5e3, "linear", function () {
e.eq(5).prependTo($("#movie_pos")), e.eq(5).css("top", "-147px"), E.movie_scroll()
})
},

<li>で並んでいるimgを上から下へ動かして一番下で上に戻して...ループしているコードなのですが中身が分かりません。
e に代入している $("#movie_pos > li");と 5e3が特によくわかりません

どなたかよろしくお願いします。困っています


function () {
var e = $("#movie_pos > li");
e.removeAttr("style"), e.eq(0).animate({
top: f[0]
}, 5e3, "linear"), e.eq(1).animate({
top: f[1]
}, 5e3, "linear"), e.eq(2).animate({
...続きを読む

Aベストアンサー

No1です。

>こちらのページのABOUTの項目に使われている処理
右側に表示されている、スクロールを続ける画像の帯のことですね。
これのためのスクリプトだとすると、(No1にも書きましたが)、個々のLI要素をそれぞれ移動することに意味はありません。
全部が同じ位置関係のまま移動するのですから、親要素のULを移動させるアニメーションで充分ですし、その方がはるかに簡単ですから。
これならUL内の要素数(画像数)がいくつであっても、数に関係なく処理できますし。
全体的にLIの数に関係ない(=画像が増減してもそのまま使える)スクリプトにしておいたほうが汎用性が高いので、使いやすいものになるのではないかと思います。

>質問したコードにはインデックス番号が振られているのですが
f[1]やf[5]などのことでしょうか?
変数fは配列なので、その要素を示すためのindexです。ご質問の例ではf[0]は0、f[1]は174・・・という具合です。

とは言え、これって画像の高さ(=174px)の倍数を並べたに過ぎないので、わざわざ配列に入れておいて参照するような数字ではないですね。
しかも、最初のほうの実際のスクリプトとは関係ないところで定義してあるのでわかりにくいですし、固定値での設定なのでまったく融通性がありません。

例えば、使う画像のサイズを変えた際に、この定義部分を修正しなければならない仕組みになってしまっているけれど、わかりにくいと思いませんか。
一方で、そんな定義をしておかなくても、スクリプトから画像のサイズを取得して、それを利用するようにしてしまえば、固定値で定義するなどということをしなくてもよくなります。
さらには、このタイプの動作を目的とするなら、利用する画像サイズは自由にしてあげて、それを幅だけは合わせて表示するような仕組みにしてしまえば、スクリプトを利用する際に気を遣わずに使えるようになることでしょう。

No1の回答の際には不明だった「 E.movie_scroll() 」の意味もわかりました。
変数Eは様々な機能をまとめたラッパーオブジェクトで、movie_scroll()はそのうちのご提示の画像スクロールのメソッド(=一コマ分スクロールする関数)です。
一コマのスクロールが終了した際に、自分自身を再度読んでいるので、エンドレスにスクロールが続くという仕組みになっています。


なお、ご質問とは関係ありませんが・・・
参照サイトを見て気が付きましたが、先日「ナビゲーションのドット」の質問をなさっていた方ですよね?
実際のサイトで使われている仕組みは調べていませんが、固定数でclientHeightを加算してゆくような方式だと何かの都合でレイアウトがずれるとおかしなことになります。(数も固定になっていたみたいですが)
例えば、HTML内の好きな位置に区切りのマーカーとなる要素を置いて(=例えば、決まったclassを付与するなどでも良い)、スクリプト側で、レイアウト後の要素位置を取得して、それをスクロールの区切りにするような処理にしておいた方が、数や位置に固定されない作り方ができるので使う際には便利かと想像します。(その分、スクリプトは少しだけ面倒になりますが)

No1です。

>こちらのページのABOUTの項目に使われている処理
右側に表示されている、スクロールを続ける画像の帯のことですね。
これのためのスクリプトだとすると、(No1にも書きましたが)、個々のLI要素をそれぞれ移動することに意味はありません。
全部が同じ位置関係のまま移動するのですから、親要素のULを移動させるアニメーションで充分ですし、その方がはるかに簡単ですから。
これならUL内の要素数(画像数)がいくつであっても、数に関係なく処理できますし。
全体的にLIの数に関係ない(=画像が増減...続きを読む


人気Q&Aランキング