Как мне проверить, отображается ли div на экранном JavaScript

#javascript #html #jquery #css

#JavaScript #HTML #jQuery #css

Вопрос:

Я работал над этим некоторое время, но, похоже, я не совсем понимаю, как правильно загрузить страницу с изображением…

 <html>
<head>
<script type="text/javascript" language="javascript" src="lytebox.js?version=10-25-2020-2-12" async></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />

<style type="text/css">
html,body {
  height: 100%;
}
#xoverlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
#xloading {
position: absolute;
top: 5%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
color: #fff;
font: 150% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}
</style>

<img src="graphics/morebtn_photospagedarker.jpg" style="display: none">

<script type="text/javascript">
    function clearOverlayOnLoad() {
    var id = "xoverlay";
    if (document.getElementById)
      var obj = document.getElementById(id);
    else if (document.all)
      var obj = document.all[id];
    else if (document.layers)
      var obj = document.layers[id];
    obj.style.display = 'none';

//CALL MOST RECENT PAGE HERE!!
 page7("true");

 document.getElementById("more").innerHTML="<a href='javascript:void(0)' onClick='nextpage();'><img onmouseout='this.src="graphics/morebtn_photospage.jpg"'' onmouseover='this.src="graphics/morebtn_photospagedarker.jpg"' width='60' height='60' src='graphics/morebtn_photospage.jpg' style='border-radius: 100px'></a>"; // Create More Button
 resizephotopage();
}
    
  </script>

  
  </head>



<script type="text/javascript">
maxgalleries=100
evenrow=0;
r=0; e=0; buildcode=""; // Call Variables

function makeholders(){
for (l=0;l<=maxgalleries;l  )
   {
    document.write('<div id="' l 'holder"></div>');
    document.write('<div id="' l 'hidden"></div>');
   }
}


    function insertalbum(location, title, totalpics, tf){ // Create Insert Function Used In "photos_list.htm"
if (tf=="true"){
if(r>=maxgalleries){document.getElementById("more").innerHTML="";return} // If MaxGalleries Do Not Show More Button
    if (evenrow==0){buildcode='<table border="0" cellpadding="0" style="border-collapse: collapse; vertical-align:top;" width="100%"><tr><td width="320px" align="left" style="vertical-align:top"><a id="CurrentAEvent'   location  '" href="javascript:void(0)" onClick="document.getElementById(' String.fromCharCode(39) '' location '-01' String.fromCharCode(39) ').click()" ><img id="CurrentImgEvent'   location  '"  src="albums/' location '/01.jpg" style="box-shadow: 2px 2px 2px #D3D3D3; border-radius: 10px 10px 10px 10px; border: 6px solid #800000;" width="320" height="213" align="left"></a><p align="left"><br></td><td width="80%" align="left" style="vertical-align:center"><a href="javascript:void(0)" onClick="document.getElementById(' String.fromCharCode(39) '' location '-01' String.fromCharCode(39) ').click()">' title '<br>(' totalpics ' Photos)</a><p>'} // Create Slideshow Type 1
if (evenrow==1){buildcode='<table border="0" cellpadding="0" style="border-collapse: collapse" width="100%"><tr><td width="20%" align="right"><td width="80%" align="right" style="vertical-align:center"><a href="javascript:void(0)" onClick="document.getElementById(' String.fromCharCode(39) '' location '-01' String.fromCharCode(39) ').click()">' title '<br>(' totalpics ' Photos)</a></td><td width="320px" align="right"><a id="CurrentAEvent'   location  '" href="javascript:void(0)" onClick="document.getElementById(' String.fromCharCode(39) '' location '-01' String.fromCharCode(39) ').click()" ><img id="CurrentImgEvent'   location  '"  src="albums/' location '/01.jpg" style="box-shadow: 2px 2px 2px #D3D3D3; border-radius: 10px 10px 10px 10px; border: 6px solid #800000;" width="320" height="213" align="right"></a><p align="right"><br><p>'} // Create Slideshow Type 2
buildcode=buildcode '';
if (evenrow==0){buildcode=buildcode '<td width="20%" align="center"></td></tr></table>';} // Separate Tables If They Are Even (gives this a nicer effect)
if (evenrow==1){buildcode=buildcode '</tr></table>'; evenrow=-1;}
document.getElementById(r 'holder').innerHTML=buildcode;
document.getElementById('CurrentAEvent'   location  '').onmouseover = function(){document.getElementById('CurrentImgEvent'   location  '').style = "box-shadow: 4px 4px 4px #D3D3D3; border-radius: 10px 10px 10px 10px; border: 6px solid #616161;"}
document.getElementById('CurrentAEvent'   location  '').onmouseout = function(){document.getElementById('CurrentImgEvent'   location  '').style = "box-shadow: 2px 2px 2px #D3D3D3; border-radius: 10px 10px 10px 10px; border: 6px solid #800000;"}
evenrow  ; r  ; buildcode=""
}
else{
if(e>=maxgalleries){return}
for (i=1;i<=totalpics;i  )
{
    if (i<=9){  
        buildcode=buildcode '<a href="albums/' location '/0' i '.jpg" class="lytebox" data-lyte-options="group:' location '" data-title="' title '" id="' location '-0' i '"></a>';} // Create The Link To Click
        else {
        buildcode=buildcode '<a href="albums/' location '/' i '.jpg" class="lytebox" data-lyte-options="group:' location '" data-title="' title '"></a>';} // Create The Link To Click If Slide Count Is Less Than 10
}
e  
}
}

function nextpage() {
// SET UP CALL FOR ALL SUCCEEDING PAGES HERE!
if (last==7){
   page6("true");
   last--;
   resizephotopage();
   return}

if (last==6){
   page5("true");
   last--;
   resizephotopage();
   return}

if (last==5){
   page4("true");
   last--;
   resizephotopage();
   return}

if (last==4){
   page3("true");
   last--;
   resizephotopage();
   return}

if (last==3){
   page2("true");
   last--;
   resizephotopage();
   return}

   if (last==2){
   page1("true");
   last--;
   document.getElementById("more").innerHTML=""; // If This Is The Last Page Do Not Show The More Button
   resizephotopage();
   return}
   
   
}


function resizephotopage(){ // Resizes Div To Fit Perfectly Into IFRAME
newheight=document.getElementById('thispage').scrollHeight 50;
      if (newheight < 860){newheight=860;}
      window.parent.document.getElementById('photoshere').height=newheight 'px';      
      }

</script>

<body style="background-color:FFFFFF" link="#000000" vlink="#000000" alink="#000000">

<body onload="clearOverlayOnLoad();">
<div id="xoverlay">
  <div id="xloading">
    Loading, please wait...<br>
    <img src="/graphics/xloading.gif" alt="Loading" width=126 height=22>
  </div>
  </div>
<div id="thispage">
<p>amp;nbsp;</p>

<p align="left"><font size="5" color="#800000" face="Verdana"><b>Click On An Album To See The 
Pictures:</font></b></p><p>amp;nbsp;</p>
<div align="center">




<script type="text/javascript">
makeholders(); 


<?php
$sub_req_url = 'https://www.mywebsite.us/photos_list.htm';
$ch = curl_init($sub_req_url);
$encoded = '';
// include GET as well as POST variables; your needs may vary.
foreach($_GET as $name => $value) {
  $encoded .= urlencode($name).'='.urlencode($value).'amp;';
}
foreach($_POST as $name => $value) {
  $encoded .= urlencode($name).'='.urlencode($value).'amp;';
}
// chop off last ampersand
$encoded = substr($encoded, 0, strlen($encoded)-1);
curl_setopt($ch, CURLOPT_POSTFIELDS,  $encoded);
curl_setopt($ch, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']);
curl_setopt($ch, CURLOPT_REFERER, $_SERVER['HTTP_REFERER']);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_POST, 1);
curl_exec($ch);
curl_close($ch);
?>


//INCLUDE ALL PAGES HERE (Marked "false") TO CREATE HOLDERS
last=7;
page7("false");
page6("false");
page5("false");
page4("false");
page3("false");
page2("false");
page1("false");

</script>
</div>
<div id="more" align="center"></div> <!-- Create More Button To Modify -->
<script>document.getElementById(e 'hidden').innerHTML=buildcode;</script>
</div>
</body>
</html>
  

Это все кодирование, которое у меня есть, которое необходимо учитывать…
Мне нужно иметь функцию, которая проверяет, когда кнопка «Еще» находится на экране, однако это немного сложно, учитывая, что это внутри iframe. Я не уверен, возможно ли это физически, но если бы вы могли мне помочь, я был бы очень признателен.

Комментарии:

1. привет. покажите свой код html и css

2. Содержимое iframe размещено на том же сервере, что и ваше основное веб-приложение, или это сторонний сервер?

Ответ №1:

Итак, я просматривал свой код и думаю, что нет способа решить мою проблему. Я думаю, что в будущем я мог бы переделать свой код, однако пока я оставлю его таким, какой он есть. Спасибо всем, кто потратил время на изучение или изучение моей проблемы.