CSS 3マルチカラムにおけるjQueryオフセット()メソッド -- jquery フィールド と css フィールド と uiwebview フィールド と offset フィールド と multiple-columns フィールド 関連 問題

jQuery offset() method in CSS 3 multicolumn












3
vote

問題

日本語

ここでは、ここでは、CSSマルチコイルモジュールを使用していくつかの列を使用してUIWebViewにHTMLページを表示するiOSアプリケーションに取り組んでいます。

マルチカラム

を実現するためにページに次のCSSルールを追加しています。 <事前> <コード> padding: 0px; height: 850.000000px; -webkit-column-gap: 0px; -webkit-column-width: 620.000000px;

その後、ページ内のテキストの画面上の絶対位置を見つける必要があります。 問題は、2列で実行されているテキスト上のものを除いて、jQueryからのOffSet()メソッドの呼び出しがうまくいくことです。

列3の末尾から始まり列4の終わりに終了する文の場合、左の値が3次の列に設定されたオフセットを取得しますが、4番目の列のように上位位置が0に設定されます。列;

正しい左および上位値でoffset()値を取得する方法左の値が3桁目にある場合は、最上位値が3次列の下部にあることを望みます。

また、文が2列の2列で同じ時間内に稼働している場合は、(3列目の終わりから4列目の終了後)

のみです。

私はここで自分自身をクリアしているのかどうかは本当にわかりませんが、誰もが本当に素晴らしいでしょう。

THX前もって

英語

Got some serious issue here, I'am working on an iOS App which has to display an html page in a UIWebView over several columns using CSS multicolum module.

I'm adding the following CSS rule to the page to accomplish the multicolumn

padding: 0px; height: 850.000000px; -webkit-column-gap: 0px; -webkit-column-width: 620.000000px; 

Then I need to find the absolute position on screen for some text in the page. The problem is that any call of the offset() method from jQuery works fine EXCEPT the one on the text running on 2 columns.

For example for a sentence that starts at the end of column 3 and finishes on column 4, I get an offset with the left value set to the 3rd column but the top position is set to 0 as if it was in the 4th column.

How can I get the offset() value with correct left and top values. I mean if the left value is on 3rd column I want the top value to be also at the bottom of the 3rd column.

Again I only have this issue when the sentence is running on two columns in the same time (Starting at the end of the 3rd column and finishing in 4th column)

I really don't know if I'm making myself clear here but any help would be really awesome.

Thx in advance

</div
              
 
 

回答リスト

2
 
vote

私はあなたのニーズに応じて、各文章または段落のすべての最後の文字を囲む特定のスパンを追加するためにテキストを事前に処理しようとします。 オフセット()は、ブロックの開始位置と終了位置を回動するように機能します。その後、文章のような複雑なケースが異なる列から始まり終了するような複雑なケースを計算することができます。

 

I would try to pre process the text to add a specific span around every first and every last character of each sentences or paragraph depending on your needs. The offset() shoud work to retreive the starting and ending positions of your block. You would have then just to compute the complicated cases like sentences starting and ending in different columns.

</div
 
 
0
 
vote

これは私が問題を解決したのかということです。私はまだ多くのコンテンツでそれを検証していませんが、テストケースの数のためにこれが私のために働いています。私のスクリーンの高さが460のときに、3 CSS3列をスパンしている要素を実際にはいくつかあり、それゆえ、私のスクリーンの高さが460の場合には-800のOFFSET.TOPで終わった。

<事前> <コード> $.fn.coffset = function() { var offset = $(this).offset(); if (offset.top < 0) { var winHeight = window.innerHeight; var winWidth = window.innerWidth; var numOfPagesOff = Math.ceil((-offset.top) / winHeight); offset.top += (winHeight * numOfPagesOff); offset.left -= (winWidth * numOfPagesOff); } return offset; };
 

This is how I ended up solving the problem. I have not verified it with a lot of content yet, but for a couple of test cases this has worked for me. I actually had some elements that spanned 3 CSS3 columns and therefore ended up with an offset.top of -800, when my screen height is only 460.

$.fn.coffset = function() {      var offset = $(this).offset();      if (offset.top < 0) {         var winHeight = window.innerHeight;         var winWidth = window.innerWidth;          var numOfPagesOff = Math.ceil((-offset.top) / winHeight);          offset.top += (winHeight * numOfPagesOff);         offset.left -= (winWidth * numOfPagesOff);     }     return offset; }; 
</div
 
 
0
 
vote

これは、エレメントの先頭に空のDIVを追加してから、位置を取得してから空のDIVを取り出すことで簡単にできます。

<事前> <コード> $(element).prepend('<div id="getposition"></div>'); var left = $('#getposition',element).offset().left; $('#getposition',element).remove();
 

This can be done easily by adding an empty div to the beginning of the element, then retrieving the position, and then removing the empty div.

$(element).prepend('<div id="getposition"></div>'); var left = $('#getposition',element).offset().left; $('#getposition',element).remove(); 
</div
 
 

関連する質問

47  MySQL Workbench EER図の複数の列に対する固有の制約を作成する  ( Creating unique constraint on multiple columns in mysql workbench eer diagram ) 
MySQL WorkbenchのEERダイアグラムでは、各列を一意のテーブルにするためのチェックボックスがあり、NOT NULL、主キーなどではありません。 しかし、私は複数の列に一意の制約を持ちたいと思います。 MySQL WorkbenchのEERダイア...

1  背景画像をFAUX列アプローチで表示できない  ( Cant get background image to be visible with faux column approach ) 
私がめちゃくちゃになっているのは非常に単純なものがあるはずですが、それが何であるかを言うことはできません。 2つの列が正しく分離されているように見え、画像が正しい場所に表示されます(イメージをVS2012のCSSコードにドラッグアンドドロップした。)背景画像は...

6  DataTables - 列をまとめてマージします  ( Datatables merge columns together ) 
これらのデータベース列を持っていますが、1列になりたいです。どうやってそれをしますか? mrenderで、私は思いますか? <事前> <コード> /* Address */ {"sTitle": "A...

0  Flex 4.5 Spark DataGridマルチカラムソート  ( Flex 4 5 spark datagrid multi column sort ) 
AnyboyはFlex 4.5 Spark DataGrid SupperPrts Multi-Column Sortableを発表します - ADGのように 私はAPIの資料を見ていて、これで何も見ることができません... ありがとう ...

2  パンダスにおける効率的な列の索引付けと選択  ( Efficient column indexing and selection in pandas ) 
データフレームから複数の列を選択するための最も効率的な方法を探しています。 <事前> <コード> import pandas as pd import numpy as np df = pd.DataFrame(np.random.rand(4,8), col...

1  2つのファイルと最初のファイルの2番目の列の最初の列マッチングテキストと2番目のファイルの2番目の列を比較します。  ( Compare two files with first column matching text and 2nd column of first file ) 
awk 1ライナーを探している: それぞれ2つの列を持つ2つのファイルがあります 最初の列が両方のファイルで一致するレコードを印刷する必要があります そして、2番目のファイル値列がgtの場合最初のファイル値列よりも File1 <事前> <コード> AA...

2  イオンの列スクロールを止める方法  ( How to stop column scrolling in ionic ) 
私は2列の画面に取り組んでいます。カテゴリと別の列を選択するためのものは、基本的にはフィルタリングオプション画面に従って項目を表示することです。カテゴリカラムには2つの列があり、3つのオプションCAT 1、CAT 2、CAT 3があり、他の列のリストは大きく、...

75  複数の列にないでください  ( Select not in multiple columns ) 
次のクエリを実装する必要があります。 <事前> <コード> SELECT * FROM friend WHERE ( friend.id1, friend.id2 ) NOT IN (SELECT id1, ...

241  複数の新しい列を作成するには、Pandas関数を列に適用しますか?  ( Apply pandas function to column to create multiple new columns ) 
Pandasでこれを行う方法: 私は単一のテキスト列に関数 extract_text_features を持っていて、複数の出力列を返します。具体的には、この関数は6つの値を返します。 関数は機能しますが、出力が正しく割り当てられるように、適切な戻り型(Pa...

2  リストからデータフレームの特定の列名のサフィックスを追加する方法  ( How to append a suffix for specific column names of a dataframe from a list ) 
DF2の名前に基づいて、DF1の特定の列名に接尾辞または接頭辞を追加したいと考えていました。 私のDF1はこのように見えます、 <事前> <コード> AE02 AE03 AE04 AE05 AE06 AE07 AE08 ...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有