I want only that Accordion load on click - javascript

I googled the shit out of this :), I have a website; http://haagsepopmaand.nl/,
There a lot of events on that page, in every event there are some pictures and some youtube movies. And it gets loaded all at once.
So I'm looking for a solution, I want the accordion to only load when clicked. I don't even know where to begin :(, I tried lazy loading the youtube videos but it doesn't work.
Maye you guys have any (quick and dirty) solutions?

Here are some ugly and dirty ways I could think of....
1. You could separate out the accordion content elsewhere and make an ajax call to load the content when clicked.
2. You can have the content in the page stored in a javascript variable and load it when clicked.

Related

Embedding PDF with flipping pages

I've seen a lot of questions and answers here that help you too embed PDF documents, but they are all "vertical read", where you scroll down to see other pages.
Is there any plugin, or maybe even a simple script that would help you to embed and read the PDF document horizontaly? Like where you see two pages and click next on top to see the next two.
Just like a book. (No fancy animations though)
Thanks.
There are plugins that lets you read pdf documents. But they might be fancy.
http://www.jqueryrain.com/2012/09/best-jquery-pdf-viewer-plugin-examples/
or
http://fliphtml5.com/free-pdf-to-jquery-flipbook.php
I like the last one especially
You can set the initial view of a PDF to show two pages.
If you add Fullscreen view to that, and the user has not deactivated clicking to the next page, it actually should give the effect you want (not verified).
If the Fullscreen view does not work, your user would use the cursorLeft and cursorRight buttons to navigate.

Prevent reloading certain parts of page

I'm fairly new to web development so I don't have much experience with any of this. I currently have a navbar at the top of my website (made with Foundation), but I don't want it to reload every time the page reloads. I've noticed on several websites that certain parts of the page are kept in place when links are clicked and the url changes. How can I achieve this?
Thanks
There are several ways to achieve this. Using AJAX calls is one of them, iframe another. You could even create a one page application and show/hide elements when certain buttons are clicked. This will however force you to load all the data at once so I won't recommend that (depending on the website).
A small article about how you can use the iframe option.
A small article about the AJAX option, they include a small demo to show how it works.
You can set an <iframe> in your code and have the links in your nav target it. When you click on a link, the <iframe> will load the new content, but the rest of your page will not change.

Why is the Facebook button only appears after all the images are loaded?

This is not about loading Facebook asynchronously or any kind of optimization here but to load it as fast as possible rather than as slow as possible ;)
My website contains a LOT of images. And I need the Facebook Like button to show up as soon as possible. But it seems the button doesn't load: it waits for all the images to be loaded before loading itself. Since I have many images, of course the Like button shows up very late. If the connection is really slow, that might even take one minute. You can see the issue here: http://www.totorotimes.com.
Any idea how I could do this?
Thanks a lot!
Take all the javascript code that is for the social media buttons out of your body tags, put them in a file called: "social.js" and then insert that file right above all the js files in yourhead tag. This will make your buttons load before the actual web page loads.

load more content when user scrolls to bottom of page

i have a page on a website that is a giant list of logos. i only want to load the first 12 logos, and load 12 more when the user gets to the bottom of the page. i've seen this done all over the place, but i'm trying to figure out how to do it.
i don't want to load all the logos at once and then hide most of them, because the user is still going to have to wait for them to load...
currently all my images are in the same document, and they are each in their own div (such as #loadContent1, #loadContent2, etc). what is the best way to accomplish this feature?
thanks
There is a jQuery Plugin that called Lazy Load that can maybe assist you.
Lazy Load

Seamless page loads

I've seen some similar questions about this around here but I didn't see anything that might be able to help me here. I am making a web site and I want each page to fade in on load and fade out when someone clicks a link. I have that down with jQuery but between the pages there is a white flash before the pages load. I tried moving around my javascript but in some cases the page didn't load correctly. I'm a bit new to this so I may need a bit of explanation on any possible solutions.
Here is the live site:
http://codyshawdesign.com
The HTML is valid in 4.01 Transitional. I've heard about something like Ajax or pagination but I am unsure how to implement those or what I would have to do to put it in my site or if it would even be the most ideal solution. Thanks for any help!
Shouldn't you only update a portion of a page, not the whole page? Now you have many full scale pages with different file names. The page address changes so the whole page is loaded. It's like refreshing the current with ctrl+r/cmd+r page and that isn't very ajaxy.
One solution would be to have a master page which contains all of the common elements between pages such as header, footer and navigation bar. On that page you have a div (or some other area) where you load information dynamically from a different file. What info is loaded could be determined with GET variables via anchor tags or ajax form buttons.
See for example this link and it's demo.
http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp
It's pretty basic but it demonstrates the idea not to load the whole page but only a portion of it. Add some styles and you're ready to go.
Sorry if this doesn't help. Maybe there is a way to refresh the whole page without the white flash. Easy solution would be to change the background color to white but then again, it wouldn't be very ajaxy...
With do pagination you would have to return all pages right when the the user visits your index.php and then you would use javascript to show and hide the right divs as the user clicks the links in menu, that's not good in your case, it'll make the user wait for the entire site even if he's not willing to look at all of it.
AJAX seems the right way, and u can easily implement it with jQuery load method. Just to get you started:
$(function(){
$("a").click(function(e){
e.preventDefault();
$("#pageContent").load($(this).attr("href"));
);
});
This should cause all your links to replace the content of the pageContent div with the content returned by the link without flashing the screen.

Categories

Resources