私的良スレ書庫
不明な単語は2ch用語を / 要望・削除依頼は掲示板へ。不適切な画像報告もこちらへどうぞ。 / 管理情報はtwitterでログインするとレス評価できます。 登録ユーザには一部の画像が表示されますので、問題のある画像や記述を含むレスに「禁」ボタンを押してください。
元スレ[JavaScript]プログラム作成します
JavaScript スレッド一覧へ / JavaScript とは? / 携帯版 / dat(gz)で取得 / トップメニューみんなの評価 :
レスフィルター : (試験中)
1つのウインドウでそれだけのメモリを使用することを許可しているブラウザってあるのか?
JavaScriptにてお願いします。
最初に基準として
2010年9月28日9時
と表示していて、その日時を過ぎると36時間後の
2010年9月29日21時
を表示。また過ぎると次の36時間後
2010年10月1日9時
このように表示時間に現在日時が到達すると
36時間後の日時を繰り返し表示するものができますでしょうか。
何卒宜しくお願い致します。
最初に基準として
2010年9月28日9時
と表示していて、その日時を過ぎると36時間後の
2010年9月29日21時
を表示。また過ぎると次の36時間後
2010年10月1日9時
このように表示時間に現在日時が到達すると
36時間後の日時を繰り返し表示するものができますでしょうか。
何卒宜しくお願い致します。
jQueryでどう書けばいいか解りません。
------------html--------------
<ul class="hoge">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<ul>
------------css--------------
ul,li { list-style-type:none; margin:0; padding:0; }
.hoge { width:700px; }
.hoge li { width:100px; float:left; }
------------------------------
例えば上記のようなソースのhtml&CSSがあったとします。
・(親要素(.hoge)の幅)-(直下子要素の幅×数)=(残り余白)
・(残り余白)÷(直下子要素の数-1)=(直下子要素の右margin)
・(直下子要素の最終要素の右marginを0)
のようにして、hogeの幅に対して(必ずしも指定してあるとは限らない)
直下の子要素が等間隔で配置されるようにしたいのですが可能ですか?
要素から幅を取ってくるとか、最後のliだけmarginを消すとかは出来ますが
それを計算となるとどう書いていいのかサッパリで・・・
可能であればどなたかコードを書いて頂ければと思います。
------------html--------------
<ul class="hoge">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<ul>
------------css--------------
ul,li { list-style-type:none; margin:0; padding:0; }
.hoge { width:700px; }
.hoge li { width:100px; float:left; }
------------------------------
例えば上記のようなソースのhtml&CSSがあったとします。
・(親要素(.hoge)の幅)-(直下子要素の幅×数)=(残り余白)
・(残り余白)÷(直下子要素の数-1)=(直下子要素の右margin)
・(直下子要素の最終要素の右marginを0)
のようにして、hogeの幅に対して(必ずしも指定してあるとは限らない)
直下の子要素が等間隔で配置されるようにしたいのですが可能ですか?
要素から幅を取ってくるとか、最後のliだけmarginを消すとかは出来ますが
それを計算となるとどう書いていいのかサッパリで・・・
可能であればどなたかコードを書いて頂ければと思います。
$('ul.hoge').each(function(){
var ul = $(this);
var li = ul.children();
var rest = ul.width();
li.each(function(){
rest -= $(this).width();
}
var margin = rest / (li.length - 1);
li.not(':last').css('margin-right', margin);
});
テストはしていない
マージンが整数じゃないときに変な表示になるブラウザもあるかと思う
var ul = $(this);
var li = ul.children();
var rest = ul.width();
li.each(function(){
rest -= $(this).width();
}
var margin = rest / (li.length - 1);
li.not(':last').css('margin-right', margin);
});
テストはしていない
マージンが整数じゃないときに変な表示になるブラウザもあるかと思う
>>910
動きました!ありがとうございます。
最終的に以下のようにしてみました。
-------------------
$('ul.hoge').each(function(){
var ul = $(this);
var li = ul.children();
var rest = ul.width();
li.each(function(){
rest -= $(this).width();
})
var margin = rest / (li.length - 1);
var margin2 = margin / ul.width() * 10000;
var margin3 = Math.floor(margin2) / 100;
li.not(':last').css('margin-right', margin3 + '%');
});
-------------------
子要素1子の余白÷親要素幅×100=親要素に対する余白の割合(%)
にして端数を下2ケタ切り捨てにすれば
もっと余りを切り詰められるかなとも思いましたが
知識皆無なせいで多分酷いソースに・・・
動きました!ありがとうございます。
最終的に以下のようにしてみました。
-------------------
$('ul.hoge').each(function(){
var ul = $(this);
var li = ul.children();
var rest = ul.width();
li.each(function(){
rest -= $(this).width();
})
var margin = rest / (li.length - 1);
var margin2 = margin / ul.width() * 10000;
var margin3 = Math.floor(margin2) / 100;
li.not(':last').css('margin-right', margin3 + '%');
});
-------------------
子要素1子の余白÷親要素幅×100=親要素に対する余白の割合(%)
にして端数を下2ケタ切り捨てにすれば
もっと余りを切り詰められるかなとも思いましたが
知識皆無なせいで多分酷いソースに・・・
テーブルの各要素をドラッグ&ドロップで入れ替えさせたいです。
<tablel id="sort_list">
<tr><td>AAA</td><td>BBB</td></tr>
<tr><td>CCC</td><td>DDD</td></tr>
<tr><td>EEE</td><td>FFF</td></tr>
</table>
<script type="text/javascript">
$(function() {
$("#sort_list").sortable({items:"tr"});
});
</script>
で列ごとの入れ替えはできるのですが、td単位での変更ができません。
td単位で変更するためのお知恵を拝借できないでしょうか。
<tablel id="sort_list">
<tr><td>AAA</td><td>BBB</td></tr>
<tr><td>CCC</td><td>DDD</td></tr>
<tr><td>EEE</td><td>FFF</td></tr>
</table>
<script type="text/javascript">
$(function() {
$("#sort_list").sortable({items:"tr"});
});
</script>
で列ごとの入れ替えはできるのですが、td単位での変更ができません。
td単位で変更するためのお知恵を拝借できないでしょうか。
>>913
ライブラリ・プラグインに何を使っているのかを書こう
ライブラリ・プラグインに何を使っているのかを書こう
失礼しました。
<link href="jquery-ui-1.8.5.custom.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.5.custom.min.js"></script>
になります。
<link href="jquery-ui-1.8.5.custom.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.5.custom.min.js"></script>
になります。
>>915
この場合、jquery-uiの何を使っているかまで書くべきだと思われ
この場合、jquery-uiの何を使っているかまで書くべきだと思われ
>>916
すみません。jqueryは初心者なもので、とりあえず
jquery-ui-1.8.5.custom.min.js
をすべて読み込んでおけば、ui関係のどれかが使われているものと考えて
そこに含まれているものの何を使っているかまでは、わかりません。
情報が少なくて申し訳ありません。
すみません。jqueryは初心者なもので、とりあえず
jquery-ui-1.8.5.custom.min.js
をすべて読み込んでおけば、ui関係のどれかが使われているものと考えて
そこに含まれているものの何を使っているかまでは、わかりません。
情報が少なくて申し訳ありません。
ちなみにWEBを調べていたところ、下記のようなサンプルを見つけたのですが
これだとイメージの入れかえで、イメージに付随する文字列(画像名)も一緒に
入れ替えができませんでした。
ソースを見てみましたが、肝心のinterface.jsが読み込めず。。
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./interface.js"></script>
<style type="text/css">
div
{
width: 450px;
height: 500px;
}
div img
{
float: left;
width: 75px;
height: 100px;
margin:10px;
}
これだとイメージの入れかえで、イメージに付随する文字列(画像名)も一緒に
入れ替えができませんでした。
ソースを見てみましたが、肝心のinterface.jsが読み込めず。。
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./interface.js"></script>
<style type="text/css">
div
{
width: 450px;
height: 500px;
}
div img
{
float: left;
width: 75px;
height: 100px;
margin:10px;
}
続きです。
sorthelper
{
background-color: #fff;
float: left;
}
.sortableactive{}
.sortablehover{}
</style>
<div>
<img src="images/01.jpg" class="sortableitem" id="01"/>
<img src="images/02.jpg" class="sortableitem" id="02"/>
<img src="images/03.jpg" class="sortableitem" id="03"/>
</div>
<script type="text/javascript">
$(document).ready(
function () {
$('div').Sortable({
accept : 'sortableitem',
helperclass : 'sorthelper',
activeclass : 'sortableactive',
hoverclass : 'sortablehover',
opacity: 0.8,
revert: true,
floats: true,
tolerance: 'pointer'
})
});
</script>
sorthelper
{
background-color: #fff;
float: left;
}
.sortableactive{}
.sortablehover{}
</style>
<div>
<img src="images/01.jpg" class="sortableitem" id="01"/>
<img src="images/02.jpg" class="sortableitem" id="02"/>
<img src="images/03.jpg" class="sortableitem" id="03"/>
</div>
<script type="text/javascript">
$(document).ready(
function () {
$('div').Sortable({
accept : 'sortableitem',
helperclass : 'sorthelper',
activeclass : 'sortableactive',
hoverclass : 'sortablehover',
opacity: 0.8,
revert: true,
floats: true,
tolerance: 'pointer'
})
});
</script>
jQueryで
<a href="#" class="ChangeImage"><img src="test.jpg"></a>
というリンクされた画像にマウスをのせると、
画像を「test.jpg」から「test_2.jpg」に変更し、
マウスを外すと「test.jpg」に戻す
というのを作りたいのです。(拡張子は固定ではない)
.hoverでアクションを設定して、srcの値を取ってきて「.」で区切って「_2.」を差し込んで…
とおぼろげにはイメージできるんですが、全体を組み上げるには知識が足りず…。
どなたかお願いします。
<a href="#" class="ChangeImage"><img src="test.jpg"></a>
というリンクされた画像にマウスをのせると、
画像を「test.jpg」から「test_2.jpg」に変更し、
マウスを外すと「test.jpg」に戻す
というのを作りたいのです。(拡張子は固定ではない)
.hoverでアクションを設定して、srcの値を取ってきて「.」で区切って「_2.」を差し込んで…
とおぼろげにはイメージできるんですが、全体を組み上げるには知識が足りず…。
どなたかお願いします。
ちょっとイメージと違うかもしれないけど以前作ったもの。
ページ内のすべての.rolloverに適用する。最初に元ファイル名を保持しておいて、適宜置換してる。
ご参考まで。
$(function(){
$(".rollover a img").each(function(i,j){
// はじめに元のimgファイル名をnameに登録してあとで参照可能に
$(j).attr("name",$(j).attr("src"));
});
$(".rollover a")
.mouseover(function(){
$img = $(this).children("img");
hovimg = $img.attr("name").replace(/down/,"").replace(/(\.(gif|jpg|png))$/,"hov$1");
$img.attr("src",hovimg);
}).mouseout(function(){
$img = $(this).children("img");
$img.attr("src",$img.attr("name"));
}).mousedown(function(){
$img = $(this).children("img");
downimg = $img.attr("name").replace(/down/,"").replace(/(\.(gif|jpg|png))$/,"down$1");
$img.attr("src",downimg);
}).mouseup(function(){
$img = $(this).children("img");
hovimg = $img.attr("name").replace(/down/,"").replace(/(\.(gif|jpg|png))$/,"hov$1");
$img.attr("src",hovimg);
});
});
ページ内のすべての.rolloverに適用する。最初に元ファイル名を保持しておいて、適宜置換してる。
ご参考まで。
$(function(){
$(".rollover a img").each(function(i,j){
// はじめに元のimgファイル名をnameに登録してあとで参照可能に
$(j).attr("name",$(j).attr("src"));
});
$(".rollover a")
.mouseover(function(){
$img = $(this).children("img");
hovimg = $img.attr("name").replace(/down/,"").replace(/(\.(gif|jpg|png))$/,"hov$1");
$img.attr("src",hovimg);
}).mouseout(function(){
$img = $(this).children("img");
$img.attr("src",$img.attr("name"));
}).mousedown(function(){
$img = $(this).children("img");
downimg = $img.attr("name").replace(/down/,"").replace(/(\.(gif|jpg|png))$/,"down$1");
$img.attr("src",downimg);
}).mouseup(function(){
$img = $(this).children("img");
hovimg = $img.attr("name").replace(/down/,"").replace(/(\.(gif|jpg|png))$/,"hov$1");
$img.attr("src",hovimg);
});
});
手抜き
$('.rollover img').mouseover(function () {
this.src = this.src.replace('.', '_2.');
}).mouseout(function () {
this.src = this.src.replace('_2.', '.');
});
$('.rollover img').mouseover(function () {
this.src = this.src.replace('.', '_2.');
}).mouseout(function () {
this.src = this.src.replace('_2.', '.');
});
>>923
試してみたところ、ローカルでは上手く動作するのですが
サーバ上に上げるとsrcがブラウザ内ではフルパスになっており
(相対パスで記述してます)
「http://www.~」の「.」を置き換えてしまいました。
現状は
$('.rollover img').mouseover(function () {
this.src = this.src.replace('.jpg', '_2.jpg');
}).mouseout(function () {
this.src = this.src.replace('_2.jpg', '.jpg');
});
にして使っています。
自分なりに改良していってみようと思いますが
何かいい案ありますでしょうか?
試してみたところ、ローカルでは上手く動作するのですが
サーバ上に上げるとsrcがブラウザ内ではフルパスになっており
(相対パスで記述してます)
「http://www.~」の「.」を置き換えてしまいました。
現状は
$('.rollover img').mouseover(function () {
this.src = this.src.replace('.jpg', '_2.jpg');
}).mouseout(function () {
this.src = this.src.replace('_2.jpg', '.jpg');
});
にして使っています。
自分なりに改良していってみようと思いますが
何かいい案ありますでしょうか?
922のように replace部分を正規表現にして
.replace(/(\.(gif|jpg|png))$/,"_2$1");
またはもっと大まかに
.replace(/(\.(\w+)$)/,"_2$1");
とか。
正規表現知らなかったら調べてみるといいよ。超便利だから。
mouseoutの部分は 923 のままでも大抵大丈夫そうだが。
.replace(/(\.(gif|jpg|png))$/,"_2$1");
またはもっと大まかに
.replace(/(\.(\w+)$)/,"_2$1");
とか。
正規表現知らなかったら調べてみるといいよ。超便利だから。
mouseoutの部分は 923 のままでも大抵大丈夫そうだが。
>>927
ありがとうございます。
正規表現ナニソレウマイノ?ってぐらい何も知らなかったです。
調べてみます。
なにぶんjsの知識皆無でいきなりjQuery始めたもので
近いサンプルを探してパクリプトが精一杯なので
こういった具合に具体例出して貰えると助かります。
ありがとうございます。
正規表現ナニソレウマイノ?ってぐらい何も知らなかったです。
調べてみます。
なにぶんjsの知識皆無でいきなりjQuery始めたもので
近いサンプルを探してパクリプトが精一杯なので
こういった具合に具体例出して貰えると助かります。
>>928
data便利
$.fn.rollover = function(){
return this.each(function(){
var target = $(this);
target.data('src', target.attr('src'));
target.hover(function(){
target.attr('src', target.data('src').replace(/\.([^.]+)$/, "_2.$1"));
},function(){
target.attr('src', target.data('src'));
});
});
};
$('img.rollover').rollover();
data便利
$.fn.rollover = function(){
return this.each(function(){
var target = $(this);
target.data('src', target.attr('src'));
target.hover(function(){
target.attr('src', target.data('src').replace(/\.([^.]+)$/, "_2.$1"));
},function(){
target.attr('src', target.data('src'));
});
});
};
$('img.rollover').rollover();
>>930
しました。
しました。
>>930
var src = ['hoge.jpg', 'huga.jpg', 'piyo.jpg'];
var target = document.getElementById('random-image');
setInterval(function(){
target.src = src[Math.floor(Math.random() * src.length)];
}, 10000);
== html ==
~
<table><tr><td><img id="random-image" src="hoge.jpg"></td></tr></table>
テストしてないけどこんな感じじゃね
var src = ['hoge.jpg', 'huga.jpg', 'piyo.jpg'];
var target = document.getElementById('random-image');
setInterval(function(){
target.src = src[Math.floor(Math.random() * src.length)];
}, 10000);
== html ==
~
<table><tr><td><img id="random-image" src="hoge.jpg"></td></tr></table>
テストしてないけどこんな感じじゃね
<ul>
<li><label><input type="radio" checked="checked" /><span>hoge1</span></label></li>
<li><label><input type="radio" /><span>hoge2</span></label></li>
<li><label><input type="radio" /><span>hoge3</span></label></li>
</ul>
上記のhtmlで、ラジオボタンが現在選択状態のリストの<span>にclass="On"が付く
という動作をさせたいのですが、jQueryでどう書けばいいか解りません。
わかる方、お願いします。
<li><label><input type="radio" checked="checked" /><span>hoge1</span></label></li>
<li><label><input type="radio" /><span>hoge2</span></label></li>
<li><label><input type="radio" /><span>hoge3</span></label></li>
</ul>
上記のhtmlで、ラジオボタンが現在選択状態のリストの<span>にclass="On"が付く
という動作をさせたいのですが、jQueryでどう書けばいいか解りません。
わかる方、お願いします。
>>935
var radio = $('input[type=radio]');
radio.click(function(e){
var target = $(e.target);
radio.not(target).next().removeClass('On');
target.next().addClass('On');
});
var radio = $('input[type=radio]');
radio.click(function(e){
var target = $(e.target);
radio.not(target).next().removeClass('On');
target.next().addClass('On');
});
http://www.akatsukinishisu.net/itazuragaki/data/js/i20070801/sample.html
の高さを揃えるjquery-uiを使っているのですが
上記ページの一番下にある「3個ずつ高さを揃える」というのを
もっと簡略化できないかと思い、以下のようにしてみました。
$(function HeightSet(group,setpice){
var sets = [], temp = [], setpice2 = setpice-1;
group.each(function(i) {
temp.push(this);
if (i % setpice == setpice2) {
sets.push(temp);
temp = [];
}
});
if (temp.length) sets.push(temp);
/* 各組ごとに高さ揃え */
$.each(sets, function() {
$(this).flatHeights().css("background","#fcc");
});
$(document).ready(function() {
// 対象の要素とセットの最大数を記述
HeightSet($("ul.hoge li"),4);
HeightSet($("ul.huge li"),5);
});
})
の高さを揃えるjquery-uiを使っているのですが
上記ページの一番下にある「3個ずつ高さを揃える」というのを
もっと簡略化できないかと思い、以下のようにしてみました。
$(function HeightSet(group,setpice){
var sets = [], temp = [], setpice2 = setpice-1;
group.each(function(i) {
temp.push(this);
if (i % setpice == setpice2) {
sets.push(temp);
temp = [];
}
});
if (temp.length) sets.push(temp);
/* 各組ごとに高さ揃え */
$.each(sets, function() {
$(this).flatHeights().css("background","#fcc");
});
$(document).ready(function() {
// 対象の要素とセットの最大数を記述
HeightSet($("ul.hoge li"),4);
HeightSet($("ul.huge li"),5);
});
})
しかしこうすると最初の.hogeはうまく動いたのですが.hugeが動きません…。
どうにかして最後のHeightSetを複数設定できるようにならないでしょうか?
知恵をお貸し下さい。
>>929
気づくの遅くなってスイマセン、ありがとうございます。
まだ実態参照とかも挫折気味ですが、こちらのスクリプトも参考にさせて頂きます。
どうにかして最後のHeightSetを複数設定できるようにならないでしょうか?
知恵をお貸し下さい。
>>929
気づくの遅くなってスイマセン、ありがとうございます。
まだ実態参照とかも挫折気味ですが、こちらのスクリプトも参考にさせて頂きます。
(function($){
function setHeight(target, step){
for(var i = 0; i < target.length; i += step){
var group = [];
for(var j = 0; j < step; j++){
if(target[i + j]){
group.push(target[i + j]);
}
}
$(group).flatHeights();
}
return target;
}
$(function(){
setHeight($('ul.hoge li'), 4).css('background-color', '#ffcccc');
setHeight($('ul.huga li'), 5).css('background-color', '#ccccff');
});
})(jQuery);
要求満たしてるかしらんけどこんなんでいかが?
function setHeight(target, step){
for(var i = 0; i < target.length; i += step){
var group = [];
for(var j = 0; j < step; j++){
if(target[i + j]){
group.push(target[i + j]);
}
}
$(group).flatHeights();
}
return target;
}
$(function(){
setHeight($('ul.hoge li'), 4).css('background-color', '#ffcccc');
setHeight($('ul.huga li'), 5).css('background-color', '#ccccff');
});
})(jQuery);
要求満たしてるかしらんけどこんなんでいかが?
>>944
おかしくないよ?
おかしくないよ?
>>946
おかしくないよ?
おかしくないよ?
>>944
同じく Google Chrome 7 で再現した。
Chrome依存の現象なのが気になるので検証しようかと思ったが、想像以上に読みづらいコードだったのでパス…。
http://sandbox.leigeber.com/table-sorter/script.js
同じく Google Chrome 7 で再現した。
Chrome依存の現象なのが気になるので検証しようかと思ったが、想像以上に読みづらいコードだったのでパス…。
http://sandbox.leigeber.com/table-sorter/script.js
前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ / 要望・削除依頼は掲示板へ / 管理情報はtwitterで / JavaScript スレッド一覧へ
みんなの評価 : 類似してるかもしれないスレッド
- 1行javascriptプログラミング (431) - [43%] - 2022/8/23 15:30
- JavaScript コメントの謎 (122) - [38%] - 2017/12/31 9:32 ○
- JavaScript ライブラリ総合質問所 vol.4 (985) - [37%] - 2015/12/16 15:00
- JavaScript ライブラリ総合質問所 vol.5 (344) - [37%] - 2022/3/14 17:45
- JavaScript Tips コレクション (154) - [36%] - 2023/1/12 17:00
トップメニューへ / →のくす牧場書庫について