Fancybox loads halfway down the page - javascript

I am using the fancybox plugin for my web app. I am using it to display a simple tutorial for a first time user. When you first use my app you see the tutorial automatically. I use JQuery to trigger the link to open the modal once the page loads.
jQuery to trigger:
$(document).ready(function() {
$('#tutorial').trigger('click');
});
My link that opens the fancybox modal:
<a id="tutorial" href="#profile-tutorial" class="fancybox-open"> Profile Tutorial </a>
Now, when the page loads it automatically pops up, but some reason it loads halfway down the page. But if I click the link directly, it loads in the middle just fine. I have no idea what could be causing this. What could it be?
Thanks!

Trigger the click on load should solve your problem:
$(window).load(function () { $('#tutorial').trigger('click'); });

Related

How to open a another page in website on click on anchor with a slide effect instead page load directly?

I m trying to open a new page in my website by clicking on a anchor link but instead of directly loading the whole page, i want it to slide the new page from the side, like we often see in mobile applications.
I did tried searching for the related code in stack and others as well. But so far what i got is this....
<a id="add" href="https://www.google.com" class="show_hide">Click</a>
<script type="javascript">$(document).ready(function () {
$('.show_hide').click(function (e) {
e.preventDefault(); //to prevent default action of link tag
$(this).slideToggle(1000);
});
});
</script>
The above code, i tried lead me no where and opened the page as usually, i want the content to slide from side as it loads like in android apps.
Any help is appreciated guys. Sorry if my explanation or my question sounds a bit vague.
You can open the website in an IFRAME, and slide the IFRAME from the side.
For e.g.
<iframe id="myiframe" />
<script>
myiframe.src='http://www.thewebsite'
myiframe.css({position:'absolute',top:0,left:800})
myiframe.animate({left:0})
</script>

Why is my pretty photo script not working?

I have a few Pretty Photo images in my app, but they are opening in a new page instead of in a PrettyPhoto display.
Here's the index of my app, which is stripped down of everything not nescessary to run it.
Click the down arrow in order to view the pretty photo page.
I use the jQuery version from the download. Also PrettyPhoto and it's script are initialised right before the closing div tag.
What could possibly be wrong with it? Why are the images opening in a new page?
Thx in advance!
It's because you are calling the plugin once the document is loaded but not after clicking on the down arrow.
If you go to your site. Click on the down arrow. Open the js inspector and copy/paste this
//jQuery.noConflict();
jQuery(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
social_tools: false,
theme: 'light_square'
});
});
You will see it's working.
So try to trigger the prettyPhoto once the pictures are loaded.

Jquery Mobile - Ajax is enabled by default but I get full page refresh on POST

I created a jQuery mobile application using ASP.NET MVC and in the jQuery mobile documentation it's mentioned that Ajax is enabled by default for page transitions on clicking a link or submitting the form.
In my case, when I submit the form,
I get a full page refresh and I don't see the spinning loader.
I get a flash of blank page and then page gets loaded.
My page is similar to a survey page where one question will be displayed with list of options to select and then click Next.
When user clicks Next it submits form and fetches next question via controller. So I am not sure what I am missing.
Please advise
Thanks in advance
You can try out to turn off the page transitions.Jquery mobile is still not very smooth in page transitions.May be that is causing the problem.
$(document).on( "mobileinit", function() {
$.mobile.defaultPageTransition = "none";
});
Please refer
jQuery Mobile flickering screen during transitions

Loading Fancybox only when clicked

I'm a designer in Fort Lauderdale, and I'm using fancybox.js in one of my projects. I have a main landing page where there is a huge chart of names, and when you click on the name, the fancybox pops up with more information, photos, etc. However, when I load this main page, it tries to load all of the content for the entire site, and it takes forever. Is there a way that I can set the fancybox.js to only load when the fancybox is clicked/visible?
I've read this tutorial about how to launch Fancybox on page load, and I basically want to do the opposite. I only want the fancybox to load when clicked so the main landing page runs faster. How to launch jQuery Fancybox on page load?
I'd appreciate any help you could give. Thanks!
Just do in your html :
<a class="fancybox" href="{target}">the link I want to open on click only</a>
.. and then use this script
$(document).ready(function(){
$(".fancybox").fancybox({
// API options
});
});
Check the documentation for the API options you may need or want to add : For fancybox v1.3.4 http://fancybox.net and for fancybox v2.x http://www.fancyapps.com/fancybox/

Loading a Lightbox variant when page is loaded

Currently a lightbox is triggered when a visitor clicks a certain link on my page. However, as an introduction to new users I'd also like to show the lightbox when a visitor loads a page.
I've been looking into click events, but I can't seem to get it to work. Could somebody please point me in the right direction?
The site is located on http://wandree.websites.xs4all.nl/test, and the lightbox is currently triggered when you press the image of the tv located in the sidebar.
Thanks for any help!
Try this in the head section of the page:
$(document).ready(function(){
// Call the lightbox function.
});

Categories