fancybox html on load
pierre23
this working.. What I want it to do it load the fancybox with html
content as soon as the page loads.
I've copied this code from the faq section but it just doesn't work..
it has a loading bar and just stays as it.
<a id="autostart" href="http://www.google.com/"></a>
<script type="text/javascript">
$(document).ready(function() {
$("#autostart").fancybox({frameWidth:
838,frameHeight:540}).trigger('click');
});
</script>
Thats the exact script copied from another post, he also mentioned he
added that in the body section which I have done but still doesn't
work.
please help!! thank you.
Regards
Pierre
pierre23
JFK
inline (hidden in your page) or an external html file ?
the script above is wrong
the scrip below is for v1.3.0
1) inline
<script type="text/javascript" >
$(document).ready(function(){
$("#autostart").fancybox({
'width': 640, //or whatever
'height': 400
});
}); // document ready
</script>
<body onload="$('#autostart').trigger('click');">
<a href="#mycontent" id="autostart">something here maybe</a>
<div style="display: none">
<p id="mycontent">I want to display this</p>
</div>
1) external html page:
<script type="text/javascript" >
$(document).ready(function(){
$("#autostart").fancybox({
'width': 640, //or whatever
'height': 400.
'type': 'iframe' // see this?
});
}); // document ready
</script>
<body onload="$('#autostart').trigger('click');">
<a href="http://domain.com/page-to-display.html"
id="autostart">something here maybe ... or not</a>
pierre23
It was the external html page I wanted to load.. works a charm. Your
post is much clearer than the previous ones posted on this subject and
I think it should be pinned.
Thanks again mate.
Pierre
> > > Pierre- Hide quoted text -
>
> - Show quoted text -
Hemanth Gowda
Hope u guys can help me out
Thanks in advance
Though fancy box looks simple....feeling difficulty to incorporate in to our app.
done with loading fancy box plugins
here is my jsp's
eventCalender.jsp from this jsp i am trying to display table content which is in another jsp pls find it below
<script>
$('a#tripsAll').click(function(event){
event.preventDefault();
$.ajax({
type : 'GET',
url : '/tems/api/tr/e/viewAlltrips',//from contrller i am returning alltrip.jsp as mentioned below
dataType : 'html',
async : false,
success: function(responseText) {
var h= $("div#tablecontent").empty().append(responseText);
$.fancybox({
'content' : h,
'width': 640,
'height': 400,
'type': 'iframe'
});
}
});
});
});
</script>
<div align="right" class="vpad_5">
<a id="tripsAll" class="fancybox" href="#tablecontent"><span class='bold small'> View All Trips </span> </a>
</div>
alltrips.jsp
<div style="display: none">
<div id="tablecontent">
<div><span class="bold" style="text-align: left;">UpcomingTravel</span></div>
<div class="grid_5">
<table class="viewAllTripTable" border="1">
<tr>
<td colspan="1"><span class="medium"><span class="bold">Trip Request</span></span></td>
<td colspan="1"><span class="medium"> <span class="bold">Start Date:</span></span></td>
<td colspan="1"><span class="medium"> <span class="bold">End Date:</span></span></td>
<td colspan="1" style="width:36%"><span class="medium"> <span class="bold">Purpose Of Visit</span></span></td>
</tr>
<c:forEach items="${events}" var="event">
<tr>
<td><c:out value="${event.tripNumber}" /></td>
<td><c:out value="${event.start}" /></td>
<td><c:out value="${event.end}"/></td>
<td>${event.title}</td>
</tr>
</c:forEach>
</table>
</div>
</div>
</div>