HTML/CSS/JS not displaying correctly on Wordpress website -
i'm trying include simple checkbox feature on wordpress page displays/disappears images when toggle checkboxes. works fine outside of wordpress environment, when put code wp page, checkboxes display, none of images. clicking checkboxes doesn't anything.
i've tried html snippet , raw html plugins, didn't help. here latest attempt, creating page template.
here page see: http://enchantingthedesert.com/10-photo-analysis/ , password is: xx2cnfv6
thanks in advance! here's code:
<?php get_header() ?> <!-- part 1: wrap page content here --> <section class="wrap"> <!-- begin page content --> <div class="container"> <div class="row-fluid"> <html> <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%; width: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"> function initphotolayers(){ console.log("initphotolayers running"); var photosonpage = $(".photo").length; console.log("initphotolayers says " + photosonpage + " photos"); for(var i=1;i<=photosonpage;i++){ var defaultdisplaytemp = $('.photo:nth-child(' + + ')').data('defaultdisplay'); console.log("initphotolayers saysdefaultdisplaytemp " + + " " + defaultdisplaytemp); var currentphotodiv = $('.photo:nth-child(' + + ')'); if(defaultdisplaytemp == "hide"){ //fade out photo hide currentphotodiv.fadeto(0,0); } else { // fade in photo show currentphotodiv.fadeto(1000,1); } // remove display=none in 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 checkbox @ " + checkbox); checktarget = checkbox.split("_")[1]; if($("#" + checkbox).prop('checked')){ console.log(checkbox + " checked!"); //$("#" + checktarget).css("visibility","visible"); $("#" + checktarget).fadeto(200,1); // true } else { console.log(checkbox + " 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 , hot-spot position -- requires default cursor, after url 1 */ 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%; } /* delete-buttons positioned relative */ 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> <body> <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" coords="192,318,267,350" href="#" alt="berry butte"> <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> <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> <label> <input type="checkbox" name="overlays" value="trails" id="overlay_trails" schecked=""> trails</label> <label> <input type="checkbox" name="overlays" value="trailnames" id="overlay_trailnames" schecked=""> trails names</label> <label> <input type="checkbox" name="overlays" value="tint" id="overlay_tint"> tinting</label> </form> </div> </body> </html> </section><!-- wrap page --> </div><!-- row page --> </div><!-- content page --> <?php get_footer() ?>
first of need clear code. take @ page source , you'll see it's complete mess: you've got there "page inside page" (nested <html> tags), jquery lib called 2 times (one outside <header>).
try clear html code make standard-compliant, remove unnecessary jquery call , check out again. there other issues, might impossible find or correct @ current state - first things first :)
Comments
Post a Comment