Page not displaying correctly

(@rsun)

Hello,

When using a snippet, one of my divs does not display correctly–the photoContainer div shrinks to a height of 0px. I’d appreciate it if you had any advice on how to resolve the issue.

Here is the page: http://enchantingthedesert.com/10-photo-analysis/
Password: xX2CNFv6

Here’s the code so you can get a sense for how it’s supposed to look:

<html><head>
<meta charset="UTF-8">
<title>Photo Layers Toggling Demo</title>

<style>
  body {
    width:100%;
  }

  .photo {
      position:absolute;
      display:block;
      left:0;
      top:0;
      width:100%;
      swidth:864px;
      height:100%;
      clear: both;

  }

  .photo img {
    width: 100%;
  }

  .hidden {
    display:none;
  }
  #photoContainer{

    display:inline-block;
    position:relative;
    float:right;
    width:100%;
    height:100%;
    clear: both;
  }

</style>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
  //alert("script here!")

  function initPhotoLayers(){
    //var placenames = document.getElementById("placenames");
    //var trails = document.getElementById("trails");
    //var tint = document.getElementById("tint");
    console.log("initPhotoLayers running");

    //$("#placenames").toggleClass("hidden");
    //$("#trails").toggleClass("hidden");
    //$("#tint").toggleClass("hidden");

    var photosOnPage = $(".photo").length;
    console.log("initPhotoLayers says " + photosOnPage + " photos");

    for(var i=1;i<=photosOnPage;i++){

      var defaultDisplayTemp = $('.photo:nth-child(' + i + ')').data('defaultdisplay');
      console.log("initPhotoLayers saysdefaultDisplayTemp for " + i + " is " + defaultDisplayTemp);

      var currentPhotoDiv = $('.photo:nth-child(' + i + ')');

      //if($(".photo")[i].data("defaultdisplay") == "hide"){
      if(defaultDisplayTemp == "hide"){
        //fade out photo to hide it
        currentPhotoDiv.fadeTo(0,0);
      } else {
        // fade in photo to show it
        currentPhotoDiv.fadeTo(1000,1);
      }
      // remove display=none in any case
      currentPhotoDiv.toggleClass("hidden");
    }

  }

  function initCheckboxes(){
    console.log("initCheckboxes running");
    $('#overlay_tint')
      .bind('click',function(event){
        testCheckboxes(this.id);
      });

    $('#overlay_trails')
      .bind('click',function(event){
        testCheckboxes(this.id);
      });

    $('#overlay_placenames')
      .bind('click',function(event){
        testCheckboxes(this.id);
      });
    $('#overlay_trailnames')
      .bind('click',function(event){
        testCheckboxes(this.id);
      }); 

  }

  function testCheckboxes(checkbox){

    console.log("testCheckboxes running with checkbox at " + checkbox);

    checkTarget = checkbox.split("_")[1];

    if($("#" + checkbox).prop('checked')){

      console.log(checkbox + " is checked!");
      //$("#" + checkTarget).css("visibility","visible");
      $("#" + checkTarget).fadeTo(200,1);

     // true

    } else {

      console.log(checkbox + " is not checked!");
      //$("#" + checkTarget).css("visibility","hidden");
      $("#" + checkTarget).fadeTo(200,0);
    }
  }

  /*
var imageNum = 20;

images/Img + imageNum + -base.jpg

photos = {
  ["Img10-base.jpg","base"]
};*/

</script>

<style id="clearly_highlighting_css" type="text/css">/* selection */ html.clearly_highlighting_enabled ::-moz-selection { background: rgba(246, 238, 150, 0.99); } html.clearly_highlighting_enabled ::selection { background: rgba(246, 238, 150, 0.99); } /* cursor */ html.clearly_highlighting_enabled {    /* cursor and hot-spot position -- requires a default cursor, after the URL one */    cursor: url("chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlight--cursor.png") 14 16, text; } /* highlight tag */ em.clearly_highlight_element {    font-style: inherit !important; font-weight: inherit !important;    background-image: url("chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlight--yellow.png");    background-repeat: repeat-x; background-position: top left; background-size: 100% 100%; } /* the delete-buttons are positioned relative to this */ em.clearly_highlight_element.clearly_highlight_first { position: relative; } /* delete buttons */ em.clearly_highlight_element a.clearly_highlight_delete_element {    display: none; cursor: pointer;    padding: 0; margin: 0; line-height: 0;    position: absolute; width: 34px; height: 34px; left: -17px; top: -17px;    background-image: url("chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlight--delete-sprite.png"); background-repeat: no-repeat; background-position: 0px 0px; } em.clearly_highlight_element a.clearly_highlight_delete_element:hover { background-position: -34px 0px; } /* retina */ @media (min--moz-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {    em.clearly_highlight_element { background-image: url("chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlight--yellow@2x.png"); }    em.clearly_highlight_element a.clearly_highlight_delete_element { background-image: url("chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlight--delete-sprite@2x.png"); background-size: 68px 34px; } } </style><style>[touch-action="none"]{ -ms-touch-action: none; touch-action: none; }[touch-action="pan-x"]{ -ms-touch-action: pan-x; touch-action: pan-x; }[touch-action="pan-y"]{ -ms-touch-action: pan-y; touch-action: pan-y; }[touch-action="scroll"],[touch-action="pan-x pan-y"],[touch-action="pan-y pan-x"]{ -ms-touch-action: pan-x pan-y; touch-action: pan-x pan-y; }</style></head>

<body style="">

<div id="photoContainer">
<div class="photo" style="z-index: 1900; opacity: 1; display: block;" id="placenames" data-defaultdisplay="hide"><img src="http://enchantingthedesert.com/wp-content/uploads/2014/02/10-place-labels.png" data-defaultdisplay="hide" alt="" usemap="#locationMap">
  <map name="locationMap">
    <area shape="rect" href="#" alt="berry butte" coords="192,318,267,350">
    <area shape="rect" coords="195,324,273,345" href="#" alt="berry butte">
    <area shape="rect" coords="289,392,384,414" href="#" alt="horseshoe mesa">
    <area shape="rect" coords="104,426,197,446" href="#" alt="grandview trail">
    <area shape="rect" coords="346,316,458,335" href="#" alt="South Kaibob">
  </map>
</div>
<div class="photo" style="z-index: 900; opacity: 1; display: block;" id="trailnames" data-defaultdisplay="hide"><img src="http://enchantingthedesert.com/wp-content/uploads/2014/02/10-trail-names.png" alt=""></div>
<div class="photo" style="z-index: 800; opacity: 1; display: block;" id="trails" data-defaultdisplay="hide"><img src="http://enchantingthedesert.com/wp-content/uploads/2014/02/10-trails.png" alt=""></div>
<div class="photo" style="z-index: 700; opacity: 0; display: block;" id="tint" data-defaultdisplay="hide"><img src="http://enchantingthedesert.com/wp-content/uploads/2014/02/10-tinting.jpg" alt=""></div>
<div class="photo" style="z-index: 600; opacity: 1; display: block;" id="bw" data-defaultdisplay="show"><img src="http://enchantingthedesert.com/wp-content/uploads/2014/02/10-bw-photo.jpg" alt=""></div>
</div>

<script>
$(document).ready(function(){
  initCheckboxes();
  initPhotoLayers()
});
</script>

</body>

<div style="display:inline; position: block; font-family: Adamina" id="imageControls">

  <form name="toggler">

  Display layers:
  <label>
    <input type="checkbox" name="Overlays" value="placenames" id="overlay_placenames">
    Place names</label> &nbsp; 

    <label>
    <input type="checkbox" name="Overlays" value="trails" id="overlay_trails" schecked="">
    Trails</label> &nbsp; 

 <label>
    <input type="checkbox" name="Overlays" value="trailnames" id="overlay_trailnames" schecked="">
    Trails names</label> &nbsp; 

      <label>
    <input type="checkbox" name="Overlays" value="tint" id="overlay_tint">
    Tinting</label>

  </form>
</div>

</html>

https://wordpress.org/plugins/insert-html-snippet/

Viewing 2 replies - 1 through 2 (of 2 total)

Thread Starter rsun
(@rsun)

10 years, 2 months ago

Sorry, I had to change the password because of privacy issues, but please email me at enchantingthedesert@gmail.com to retrieve the password in order to see the site.

Plugin Author f1logic
(@f1logic)

10 years, 1 month ago

could you please send details to support[at]xyzscripts[dot]com so that we could look into this

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Page not displaying correctly’ is closed to new replies.