ラベル CSS の投稿を表示しています。 すべての投稿を表示
ラベル CSS の投稿を表示しています。 すべての投稿を表示

2011年6月4日土曜日

FirefoxにてDIV要素を連続でドラッグ＆ドロップできない問題

FirefoxにてDIV要素を連続でドラッグ＆ドロップできない問題に遭遇しました．一応解決したので，メモしておきます．

DIV要素を水平にドラッグ＆ドロップできるようにしたつもりでしたが，一旦ドロップして再度ドラッグしようとすると，そうならずに半透明になった要素がマウスポインタの動きに合わせて追随してくるという問題にFirefoxで遭遇しました．つまり，次の図のような感じです．


結局，下記のようにCSSを変更すると期待通りの動作をするようになりました．

.scroll_bar-handle {
  position: absolute;
  height: 16px;
  top: 0px;
  background-color: red;
  -moz-user-select: none; /* これを追加 */
}

Firefoxでは，要素に対して操作が行われると，それが選択対象となるようです．続けて選択対象の要素に対して操作を加えようとすると，その分身が表示されます．そして，本体に加えられた操作がその分身に対して適用されるようになるみたいです．その設定を無効にするのが，CSSに新たに加えた1行となります．他のブラウザ（といってもChromeだけですが）では，当初から期待通りに動作していたので，この問題（その仕様を知らなかった僕に問題があるのですが）はFirefoxに固有のもののようです．
投稿者 時刻: 0 件のコメント:
ラベル: , ,

2010年9月2日木曜日

印刷時にWebページ内の特定の要素を出力されないようにする方法

印刷時にWebページ内の特定の要素を出力されないようにする方法をメモしておきます．

test.html
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="test.css"/>
</head>
<body>
<div id="A">A</div>
<div id="B">B</div>
</body>
</html>

test.css
@media print {
    #B {display: none;}
}


上記のtest.htmlをブラウザで表示すると，AとBが上下に並んで表示されます．このページの印刷プレビューを表示すると，Aのみが表示されます．CSSの@mediaルールを使うと，そういうことができます．
投稿者 時刻: 0 件のコメント:
ラベル: ,

2010年8月27日金曜日

ブラウザのフォントサイズをJavaScriptで取得する方法

ブラウザのフォントサイズをJavaScriptで取得する方法をメモしておきます．

まずは，空白1文字を内容とするspan要素を表示するページに仕込んでおきます．
そして，その要素のid属性に適当な名称を，style属性に「visibility: hidden;」を設定します．
あとは，スクリプト内で，その要素のoffsetHeightの値を取得すれば，ブラウザのフォントサイズを取得できます．
具体的なコードは以下のとおりです．

<html>
<head>
<script type="text/javascript">
<!--
console.log(document.getElementById("font").offsetHeight);
//-->
</script>
</head>
<body>
<span id="font" style="visibility: hidden;">&nbsp;</span>
</body>
</html>

[1] JavaScriptでブラウザのフォントサイズを検出する方法
投稿者 時刻: 0 件のコメント:
ラベル: ,

2008年12月28日日曜日

CSSで要素を表示したり非表示にしたりする方法

CSSで要素を非表示にする方法をメモしておきます．

display プロパティに none を指定すると，要素は完全に表示されなくなります．

<span style="{display: none;}">要素</span>を非表示

visibility プロパティに hidden を指定すると，要素は表示されませんが，表示領域は確保されます．

<span style="{visibility: hidden;}">要素</span>を非表示

[1] スタイルシート CSS / ボックス / 表示・非表示を指定する
http://www.tagindex.com/stylesheet/box/visibility.html
投稿者 時刻: 0 件のコメント:
ラベル: ,
登録: 投稿 (Atom)