javascript - jQuery: Loaded HTML is invisible -
i try load html code div using jquery , code:
<script language="javascript"> $(function(){ $(".loadmain").click(function(){ $("#main-content").load("startjourney2.html"); }); }); </script>
i have got button here:
<a class="loadmain">play</a>
and div below
<div id="main-content" class="abs dark-template">
and last not least code in startjourney2.html
<div class="page-wrapper"> <!--page sidebar--> <div class="page-side"> <div class="inner-wrapper vcenter-wrapper"> <div class="side-content vcenter"> <div class="title"> <span class="second-part">start your</span> <span>journey</span> </div> <p>some text goes here</p> </div> </div> </div> <!--/page sidebar--> <!--page main content--> <div class="page-main"> <!-- services wrapper --> <div class="vertical-folio"> <!-- services item --> <div class="vf-item tj-hover-3 set-bg inview-animate inview-fadeleft"> <img src="assets/img/portfolio/horizontal/city1.jpg" alt="alt" class="img-responsive"> <!-- item overlay --> <div class="tj-overlay vcenter-wrapper"> <div class="overlay-texts vcenter"> <h3 class="title">tracing lines</h3> <h4 class="subtitle">11 % - last played: 27/08/2014 @ 11:59 p.m.</h4> <br/> <a href="startjourney.html#" class="btn btn-transparent">continue journey</a> <a href="startjourney.html#" class="btn btn-toranj alt">quit journey</a> </div> </div> <!-- /item overlay --> </div> <!-- /services item --> <!-- services item --> <div class="vf-item tj-hover-3 set-bg inview-animate inview-fadeleft"> <img src="assets/img/portfolio/horizontal/city2.jpg" alt="alt" class="img-responsive"> <!-- item overlay --> <div class="tj-overlay vcenter-wrapper"> <div class="overlay-texts vcenter"> <h3 class="title">reveal</h3> <h4 class="subtitle">97 % - last played: 12/11/2014 @ 07:54 a.m.</h4> <br/> <a href="startjourney.html#" class="btn btn-transparent">continue journey</a> <a href="startjourney.html#" class="btn btn-toranj alt">quit journey</a> </div> </div> <!-- /item overlay --> </div> <!-- /services item --> <!-- services item --> <div class="vf-item tj-hover-3 set-bg inview-animate inview-fadeleft"> <img src="assets/img/portfolio/horizontal/city3.jpg" alt="alt" class="img-responsive"> <!-- item overlay --> <div class="tj-overlay vcenter-wrapper"> <div class="overlay-texts vcenter"> <h3 class="title">empty</h3> <h4 class="subtitle">0 %</h4> <br/> <a href="startjourney.html#" class="btn btn-toranj alt">start journey</a> </div> </div> <!-- /item overlay --> </div> <!-- /services item --> </div> <!-- /services wrapper --> </div> <!--/page main content--> </div>
the problem stuff "page-side" visible, else invisible can see in screenshot below:
as far can see code gets loaded correctly, javascript plugin cause that? how correctly load code?
i hope can me. greetz,
Comments
Post a Comment