teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問イベント発生時にtableのセルが右へ移動するのを防ぎたい、他一点

編集履歴

質問編集履歴

9

補記

2018/10/26 07:08

投稿

sakura-shi
sakura-shi

スコア93

test CHANGED
File without changes
test CHANGED
@@ -412,7 +412,7 @@
412
412
 
413
413
 
414
414
 
415
- いくつかセルをポイントしてみると、何度目かでポイントしたセルでは「Loading」となりなにも表示されなくなるという問題（現象）がでてきています。
415
+ いくつかセルをポイントしてみると、何度目かでポイントしたセルでは「Please wait...」となりなにも表示されなくなるという問題（現象）がでてきています。
416
416
 
417
417
 
418
418
 

8

質問を追加

2018/10/26 07:08

投稿

sakura-shi
sakura-shi

スコア93

test CHANGED
File without changes
test CHANGED
@@ -403,3 +403,23 @@
403
403
  https://github.com/vadimsva/popModal/releases
404
404
 
405
405
  からダウンロードしたファイルを参考にしています
406
+
407
+
408
+
409
+ ==============================================
410
+
411
+ 呼び出し側のJSを修正しました。
412
+
413
+
414
+
415
+ いくつかセルをポイントしてみると、何度目かでポイントしたセルでは「Loading」となりなにも表示されなくなるという問題（現象）がでてきています。
416
+
417
+
418
+
419
+ 予想ではありますが、
420
+
421
+ 金額セルにマウスを乗った時はイベントが起きるので、ちょっとマウスを動かしただけでも内部で処理が行われる影響ではないかと思います。
422
+
423
+
424
+
425
+ マウスがセルから離れた時点で、その内部の処理を中断することはできるのでしょうか？

7

JS修正

2018/10/26 07:01

投稿

sakura-shi
sakura-shi

スコア93

test CHANGED
File without changes
test CHANGED
@@ -314,23 +314,39 @@
314
314
 
315
315
  jQuery(function($){
316
316
 
317
- console.log("data-cc326");
318
-
319
317
  $('[data-cc]').mouseover(function(){
320
318
 
321
- console.log("data-cc327");
322
-
323
319
  $('#popModal_result').remove();
324
320
 
325
321
  $(this).popModal({
326
322
 
323
+ html : { url: '/example/list',
324
+
325
+ method: 'GET',
326
+
327
- html : {url: '/example/detail?cc=' + encodeURIComponent($(this).attr('data-cc')) + '&date=' + encodeURIComponent($(this).parent().attr('data-date')), errorText: 'An error has occurred'}
327
+ data: { 'cc': encodeURIComponent($(this).attr('data-cc')),
328
+
329
+ 'date': encodeURIComponent($(this).attr('data-date')) },
330
+
331
+ dataTYpe: 'html',
332
+
333
+ loadingText: 'Please wait...',
334
+
335
+ errorText: 'An error has occurred'
336
+
337
+ }
328
338
 
329
339
  });
330
340
 
341
+ $('.popModal').css({top:"",left:""}).on('click',function(e){
342
+
343
+ e.stopPropagation();
344
+
345
+ });
346
+
331
347
  });
332
348
 
333
-
349
+ });
334
350
 
335
351
 
336
352
 

6

コード修正

2018/10/26 06:52

投稿

sakura-shi
sakura-shi

スコア93

test CHANGED
File without changes
test CHANGED
@@ -222,11 +222,11 @@
222
222
 
223
223
  <td>2018-10-01</td>
224
224
 
225
- <td data-cc="100">123,000円</td>
225
+ <td><span data-cc="100">123,000円</span></td>
226
-
226
+
227
- <td data-cc="101">456,000円</td>
227
+ <td><span data-cc="101">456,000円</span></td>
228
-
228
+
229
- <td data-cc="102">789,000円</td>
229
+ <td><span data-cc="102">789,000円</span></td>
230
230
 
231
231
  </tr>
232
232
 
@@ -234,11 +234,11 @@
234
234
 
235
235
  <td>2018-10-02</td>
236
236
 
237
- <td data-cc="100">123,000円</td>
237
+ <td><span data-cc="100">123,000円</span></td>
238
-
238
+
239
- <td data-cc="101">456,000円</td>
239
+ <td><span data-cc="101">456,000円</span></td>
240
-
240
+
241
- <td data-cc="102">789,000円</td>
241
+ <td><span data-cc="102">789,000円</span></td>
242
242
 
243
243
  </tr>
244
244
 
@@ -246,11 +246,11 @@
246
246
 
247
247
  <td>2018-10-03</td>
248
248
 
249
- <td data-cc="100">123,000円</td>
249
+ <td><span data-cc="100">123,000円</span></td>
250
-
250
+
251
- <td data-cc="101">456,000円</td>
251
+ <td><span data-cc="101">456,000円</span></td>
252
-
252
+
253
- <td data-cc="102">789,000円</td>
253
+ <td><span data-cc="102">789,000円</span></td>
254
254
 
255
255
  </tr>
256
256
 
@@ -258,11 +258,11 @@
258
258
 
259
259
  <td>2018-10-04</td>
260
260
 
261
- <td data-cc="100">123,000円</td>
261
+ <td><span data-cc="100">123,000円</span></td>
262
-
262
+
263
- <td data-cc="101">456,000円</td>
263
+ <td><span data-cc="101">456,000円</span></td>
264
-
264
+
265
- <td data-cc="102">789,000円</td>
265
+ <td><span data-cc="102">789,000円</span></td>
266
266
 
267
267
  </tr>
268
268
 
@@ -270,11 +270,11 @@
270
270
 
271
271
  <td>2018-10-05</td>
272
272
 
273
- <td data-cc="100">123,000円</td>
273
+ <td><span data-cc="100">123,000円</span></td>
274
-
274
+
275
- <td data-cc="101">456,000円</td>
275
+ <td><span data-cc="101">456,000円</span></td>
276
-
276
+
277
- <td data-cc="102">789,000円</td>
277
+ <td><span data-cc="102">789,000円</span></td>
278
278
 
279
279
  </tr>
280
280
 
@@ -282,11 +282,11 @@
282
282
 
283
283
  <td>2018-10-06</td>
284
284
 
285
- <td data-cc="100">123,000円</td>
285
+ <td><span data-cc="100">123,000円</span></td>
286
-
286
+
287
- <td data-cc="101">456,000円</td>
287
+ <td><span data-cc="101">456,000円</span></td>
288
-
288
+
289
- <td data-cc="102">789,000円</td>
289
+ <td><span data-cc="102">789,000円</span></td>
290
290
 
291
291
  </tr>
292
292
 
@@ -312,7 +312,7 @@
312
312
 
313
313
  <script>
314
314
 
315
- $(function(){
315
+ jQuery(function($){
316
316
 
317
317
  console.log("data-cc326");
318
318
 

5

誤字修正

2018/10/22 12:45

投稿

sakura-shi
sakura-shi

スコア93

test CHANGED
File without changes
test CHANGED
@@ -42,6 +42,8 @@
42
42
 
43
43
  <title>popModal</title>
44
44
 
45
+
46
+
45
47
  <style>
46
48
 
47
49
  * {margin:0;font-family:Roboto,sans-serif;outline:0;box-sizing:border-box;font-size:14px}
@@ -202,9 +204,9 @@
202
204
 
203
205
  <div class="page" data-page="popModal">
204
206
 
205
- <div class="exampleContainer">
207
+ <div class="exampleContainer">
206
-
208
+
207
- <div class="exampleLive">
209
+ <div class="exampleLive">
208
210
 
209
211
  　　　　<p>日別売上表</p>
210
212
 
@@ -216,75 +218,75 @@
216
218
 
217
219
  </tr>
218
220
 
219
- <tr date-date="2018-10-01">
221
+ <tr data-date="2018-10-01">
220
222
 
221
223
  <td>2018-10-01</td>
222
224
 
223
- <td date-cc="100">123,000円</td>
225
+ <td data-cc="100">123,000円</td>
224
-
226
+
225
- <td date-cc="101">456,000円</td>
227
+ <td data-cc="101">456,000円</td>
226
-
228
+
227
- <td date-cc="102">789,000円</td>
229
+ <td data-cc="102">789,000円</td>
228
-
230
+
229
- </tr>
231
+ </tr>
230
-
232
+
231
- <tr date-date="2018-10-02">
233
+ <tr data-date="2018-10-02">
232
234
 
233
235
  <td>2018-10-02</td>
234
236
 
235
- <td date-cc="100">123,000円</td>
237
+ <td data-cc="100">123,000円</td>
236
-
238
+
237
- <td date-cc="101">456,000円</td>
239
+ <td data-cc="101">456,000円</td>
238
-
240
+
239
- <td date-cc="102">789,000円</td>
241
+ <td data-cc="102">789,000円</td>
240
-
242
+
241
- </tr>
243
+ </tr>
242
-
244
+
243
- <tr date-date="2018-10-03">
245
+ <tr data-date="2018-10-03">
244
246
 
245
247
  <td>2018-10-03</td>
246
248
 
247
- <td date-cc="100">123,000円</td>
249
+ <td data-cc="100">123,000円</td>
248
-
250
+
249
- <td date-cc="101">456,000円</td>
251
+ <td data-cc="101">456,000円</td>
250
-
252
+
251
- <td date-cc="102">789,000円</td>
253
+ <td data-cc="102">789,000円</td>
252
-
254
+
253
- </tr>
255
+ </tr>
254
-
256
+
255
- <tr date-date="2018-10-04">
257
+ <tr data-date="2018-10-04">
256
258
 
257
259
  <td>2018-10-04</td>
258
260
 
259
- <td date-cc="100">123,000円</td>
261
+ <td data-cc="100">123,000円</td>
260
-
262
+
261
- <td date-cc="101">456,000円</td>
263
+ <td data-cc="101">456,000円</td>
262
-
264
+
263
- <td date-cc="102">789,000円</td>
265
+ <td data-cc="102">789,000円</td>
264
-
266
+
265
- </tr>
267
+ </tr>
266
-
268
+
267
- <tr date-date="2018-10-05">
269
+ <tr data-date="2018-10-05">
268
270
 
269
271
  <td>2018-10-05</td>
270
272
 
271
- <td date-cc="100">123,000円</td>
273
+ <td data-cc="100">123,000円</td>
272
-
274
+
273
- <td date-cc="101">456,000円</td>
275
+ <td data-cc="101">456,000円</td>
274
-
276
+
275
- <td date-cc="102">789,000円</td>
277
+ <td data-cc="102">789,000円</td>
276
-
278
+
277
- </tr>
279
+ </tr>
278
-
280
+
279
- <tr date-date="2018-10-06">
281
+ <tr data-date="2018-10-06">
280
282
 
281
283
  <td>2018-10-06</td>
282
284
 
283
- <td date-cc="100">123,000円</td>
285
+ <td data-cc="100">123,000円</td>
284
-
286
+
285
- <td date-cc="101">456,000円</td>
287
+ <td data-cc="101">456,000円</td>
286
-
288
+
287
- <td date-cc="102">789,000円</td>
289
+ <td data-cc="102">789,000円</td>
288
290
 
289
291
  </tr>
290
292
 
@@ -304,7 +306,7 @@
304
306
 
305
307
 
306
308
 
307
- <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>
309
+ <script src="./js/jquery-2.1.4.min.js"></script>
308
310
 
309
311
  <script src="popModal.js"></script>
310
312
 
@@ -312,9 +314,11 @@
312
314
 
313
315
  $(function(){
314
316
 
317
+ console.log("data-cc326");
318
+
315
319
  $('[data-cc]').mouseover(function(){
316
320
 
317
- console.log("data-cc327");
321
+ console.log("data-cc327");
318
322
 
319
323
  $('#popModal_result').remove();
320
324
 
@@ -324,42 +328,42 @@
324
328
 
325
329
  });
326
330
 
327
-
328
-
329
-
330
-
331
- $(window).scroll(function(){
332
-
333
- getActivePage();
334
-
335
331
  });
336
332
 
333
+
334
+
335
+
336
+
337
+ $(window).scroll(function(){
338
+
337
- getActivePage();
339
+ getActivePage();
340
+
338
-
341
+ });
342
+
339
-
343
+ getActivePage();
340
-
344
+
345
+
346
+
341
- function getActivePage() {
347
+ function getActivePage() {
342
-
348
+
343
- var nav = $('.page');
349
+ var nav = $('.page');
344
-
350
+
345
- for (var i = 0; i < nav.length; i++) {
351
+ for (var i = 0; i < nav.length; i++) {
346
-
352
+
347
- if ($(nav[i]).outerHeight() + $(nav[i])[0].getBoundingClientRect().top > $(window).height()*0.7) {
353
+ if ($(nav[i]).outerHeight() + $(nav[i])[0].getBoundingClientRect().top > $(window).height()*0.7) {
348
-
354
+
349
- $('.tab').removeClass('active');
355
+ $('.tab').removeClass('active');
350
-
356
+
351
- $('.tab[data-tab="' + $(nav[i]).attr('data-page') + '"]').addClass('active');
357
+ $('.tab[data-tab="' + $(nav[i]).attr('data-page') + '"]').addClass('active');
352
-
358
+
353
- break;
359
+ break;
360
+
361
+ }
362
+
363
+ }
354
364
 
355
365
  }
356
366
 
357
- }
358
-
359
- }
360
-
361
-
362
-
363
367
 
364
368
 
365
369
  });

4

補記

2018/10/22 07:24

投稿

sakura-shi
sakura-shi

スコア93

test CHANGED
File without changes
test CHANGED
@@ -6,11 +6,9 @@
6
6
 
7
7
 
8
8
 
9
- ２点目の予想
10
-
11
- ここで掲載したHTMLしたtableのサイズは小さいですが、実際は、300くらいのセルのあるtableです。
9
+ ここで掲載したHTMLしたtableのサイズは小さいですが、実際は、800くらいのセルのあるtableです。縦40＊横20のtableの全セルに対し、パラメータを除き同様のポップアップを表示させるようにする。
12
-
10
+
13
- ポップアップでクリックすると、ポップアップの下に隠れているセルをクリックしてしまい、他のセルでイベントが起きるのではないかとと予想しています。ポップアップ内でクリックしてもポップアップが閉じないようにしたいです。
11
+ ポップアップでクリックすると、ポップアップの下に隠れているセルをクリックしてしまうのか？？ポップアップ内でクリックしてもポップアップが閉じないようにしたいです。
14
12
 
15
13
 
16
14
 

3

補記

2018/10/22 02:08

投稿

sakura-shi
sakura-shi

スコア93

test CHANGED
File without changes
test CHANGED
@@ -14,6 +14,10 @@
14
14
 
15
15
 
16
16
 
17
+ コンソールにエラー出力がなく、ポップアップ自体は正常に表示されるところまでは確認すみ。
18
+
19
+
20
+
17
21
  #やってみたこと
18
22
 
19
23
  ここでは小さなサイズのtableを掲載していますが、実際はもっと大きなtableです。
@@ -328,7 +332,7 @@
328
332
 
329
333
  $(window).scroll(function(){
330
334
 
331
- getActivePage();
335
+ getActivePage();
332
336
 
333
337
  });
334
338
 
@@ -338,21 +342,21 @@
338
342
 
339
343
  function getActivePage() {
340
344
 
341
- var nav = $('.page');
345
+ var nav = $('.page');
342
-
346
+
343
- for (var i = 0; i < nav.length; i++) {
347
+ for (var i = 0; i < nav.length; i++) {
344
-
348
+
345
- if ($(nav[i]).outerHeight() + $(nav[i])[0].getBoundingClientRect().top > $(window).height()*0.7) {
349
+ if ($(nav[i]).outerHeight() + $(nav[i])[0].getBoundingClientRect().top > $(window).height()*0.7) {
346
-
350
+
347
- $('.tab').removeClass('active');
351
+ $('.tab').removeClass('active');
348
-
352
+
349
- $('.tab[data-tab="' + $(nav[i]).attr('data-page') + '"]').addClass('active');
353
+ $('.tab[data-tab="' + $(nav[i]).attr('data-page') + '"]').addClass('active');
350
-
354
+
351
- break;
355
+ break;
352
-
356
+
353
- }
357
+ }
354
-
358
+
355
- }
359
+ }
356
360
 
357
361
  }
358
362
 

2

補記

2018/10/22 02:01

投稿

sakura-shi
sakura-shi

スコア93

test CHANGED
File without changes
test CHANGED
@@ -6,6 +6,14 @@
6
6
 
7
7
 
8
8
 
9
+ ２点目の予想
10
+
11
+ ここで掲載したHTMLしたtableのサイズは小さいですが、実際は、300くらいのセルのあるtableです。
12
+
13
+ ポップアップでクリックすると、ポップアップの下に隠れているセルをクリックしてしまい、他のセルでイベントが起きるのではないかとと予想しています。ポップアップ内でクリックしてもポップアップが閉じないようにしたいです。
14
+
15
+
16
+
9
17
  #やってみたこと
10
18
 
11
19
  ここでは小さなサイズのtableを掲載していますが、実際はもっと大きなtableです。

1

誤記修正

2018/10/22 01:58

投稿

sakura-shi
sakura-shi

スコア93

test CHANGED
File without changes
test CHANGED
@@ -366,7 +366,7 @@
366
366
 
367
367
  ■呼び出されるHTML
368
368
 
369
- 直にアドレスバーでUTLを入力し表示されることを確認済
369
+ 直にアドレスバーでURLを入力し表示されることを確認済
370
370
 
371
371
 
372
372