Checking if class has active, if so run external .js file? Possible? - javascript

So I'm currently developing a small website for someone over at http://carrotcrunchpvp.comule.com/.
On the 'our ethos' page, I have a svg running for the radial percentage stats. If you load this page, http://carrotcrunchpvp.comule.com/#horizontal/1 you will notice that there is animation on this SVG which loads it round to the defined % which is in the HTML. This is all done by my javascript file - percentagecircles.js.
Now, my question is, as the animation is triggered by running the file percentagecircles.js, is there any way to run this file ONLY when on the 'Our Ethos' page. For example if you load the homepage, the animation will run when you can't see it.
I am using FullPage.js plugin in the backend. I have noticed while developing that when traversing each page, the class="slide fp-slide fp-table" becomes class="slide fp-slide fp-table active" when on that page.
Logically I would imagine I would use an if function which says, if '#fullpage > div > div.fp-slides > div > div.slide.fp-slide.fp-table has class ;active' (our ethos css path), run the percentagecircles.js file. Seems simple to me retrospectively but my Jquery + Javascript knowledge is very very minimal...
Just a note, I've tried using a couple of plugins like Wow.js and onScreen.js to no success, perhaps I wasn't utilising them right.
Any help is appreciated,
Cheers,
Chris

You need to make make use of the callbacks provided by fullPage.js such as afterSlideLoad or afterLoad.
You will find them explained in the documentation.
And you have available examples such as callbacks.html here.
This way you can get the active slide and work with it.

Related

Animation to changing HTML page

I've been trying, for a few days, to add an animation between two different HTML pages/files (index.html -> about.html). My idea is to animate/have a transition when going from one page to the other: in my case from the index.html to the about.html page.
I found a lot of answers on Google and on StackOverflow, but the problem is that the transition happens on the same page which means that the HTML code for both pages is in the same file and my index.html becomes unreadable, especially if I am working on a project that's quite big.
I saw that Google Photos had something quite similar to what I want to achieve. Just open Google Photos and click on an image, and as you might notice, the URL changes from https://photos.google.com to https://photos.google.com/photo/PHOTO_ID and an animation occurs.
Any idea on how Google does this or how I can do it? :)
Any help would be greatly appreciated!
The solutions I'd rather avoid are:
AJAX (but it's ok if Google uses it, and I doubt they do)
Having the HTML for both pages in a single, one file.
AngularJS (I'd prefer pure JS)
( this isn't a duplicate, I'd like to know how Google did it ;) )
You could use jQuery to load an HTML file into the body. Here is some very untested pseudo code to make this boneless, single-page-app work:
jQuery
//disable link action and load HTML inside the body tag
$('a').on('click', function(){
e.preventDefault();
$('body').load($(this).attr('href'));
}
HTML
<body>
<h1>title</h1>
link
</body>
If you wish to add an animation effect, you can prepend new HTML to the body, fade the previous HTML, then remove the hidden content.
While I'm not exactly sure of the method Google uses to achieve this, I do know that many of the solutions you would like to avoid are definitely some of your greater options.
Anyhow, a hack to achieve this would be splitting the code up amongst the two pages. Set up a fade out/any animation after a link is clicked on one page and make the other page fade in/any animation after load on the destination page. This is somewhat similar to how I would do it using an XML request, it's just a bit out of general practice.
Again this is a very 'hacky' method, but it gets the job done with very minimal JavaScript code, depending on how you go about it.

Load sections of a website at specific times

Hello stack overflow community,
I am struggling to get this website to load quickly. It is a one page portfolio site running off the 'Simply' Theme available at Themeforest:
http://themeforest.net/item/simply-one-page-multipurpose-html-template/7788220?WT.ac=search_item&WT.oss_phrase=simply&WT.oss_rank=5&WT.z_author=AliA
With a video header and all of the other content below the header, we are looking at a 5 second load time.
What I am looking for is a way to load just the video header and navigation at first load, and after the video finishes loading and starts playing, the remaining content will start to load.
I am not all too familiar with Ajax or writing Javascript, but if I could get pointed in the right direction it would be greatly appreciated!
From what I've read so far, possibly the .load javascript might do the trick, but I have not found much information on it or where to start.
.load() includes a callback (see here) - so, assuming your content is all on the same domain, you just need to do something like this:
$(document).ready(function() {
$('#div_where_you_want_to_load_the_video').load(
'/path_to_video',
'#video_container',
function() {
//load the rest
}
);
});
Make sure you have jQuery loaded first.

Big Cartel - JQuery Upload/Location

Here is a link to my site, http://johnathonpowers.bigcartel.com
Trying to play around with images on my product pages...well actually created a test page.
Unable to figure out a few things:
Where does one host a jquery file?
Do I need to have the jquery src for both jquery.min.js (many use the one hosted by google, if I am understanding any of this correctly) and jquery.elevatezoom.js?
If I end up not liking the zoom is this still an appropriate way to have a large image with small thumbnails beneath (perhaps I will explore how to click on the big image to open a full-screen version).
Should all my pictures be the same size? Right now I have square format photos and rectangle...it might end up looking horrible.
Do I put any code into CSS or just the layout and the specific page I want the images to take place?
Will these images replace the ones I upload through bigcartel's system?
There is already a jquery entry in the layout...do I just add to the end of this same section the additional src?
This is what I added to layout:
<script src="http://s000.tinyupload.com/index.php?file_id=24823496361920795072" type="text/javascript"></script>
This is my test page:
<img id="zoom_01" src="http://i.imgur.com/1L86Fcms.jpg" data-zoom-image="http://i.imgur.com/1L86Fcm.jpg"/>
$("#img_01").elevateZoom();
<head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script></head>
<img id="product_zoom" src="http://i.imgur.com/1L86Fcms.jpg" data-zoom-image="http://i.imgur.com/1L86Fcm.jpg" class="fade_in">
Thanks again for all the help and honestly probably biting off more than I can chew. I just wanted to play around with it and see if it would work/was something I liked, but seems like I have gone down a rabbit hole into a whole other world, way above my rudimentary html skillset.
Here is where I first saw the jquery stuff:
Can I integrate an Internal zoom on my products in my big cartel store?
The best place to host your javascript files is on a server that you have control over -but if you don't have any webspace, you can easily host files with a service like Dropbox or Google Drive.
The Luna theme you're using already loads jQuery in the <head> portion of your Layout, so you don't need to include that script again (and you'll get errors in your browser's javascript console if you try).
Since you're using a separate image zooming library that has a bunch of custom CSS, you'll probably want to have your CSS file hosted on a separate server as well. It's a good idea to put any files you're including in the Layout section, following the same format as the existing theme files.
It looks like the javascript file you're hosting on tinyupload.com is just bringing up a download page instead of actually loading the javascript content into the page, so you'll definitely need to change how that's loaded. Otherwise the HTML code you're using looks like it should work.

Load a page from within an already loaded page

It seems like this should be a pretty obvious answer but I'm under pressure for portfolio and I think I may be confusing myself here. I couldn't quite find the answer that I was looking for (which I usually am able to on this site).
Basically I want to load an external page with an image into my gallery. The only catch is that the gallery itself is loaded from an external page.
I was able to successfully implement this when I put the gallery code into its own individually loading window. But when I try it with the original setup, of course, I have to delegate. I know how to set that up, it's just defining the function itself that's giving me problems (where "window" calls the div that contains the gallery on its external page):
function showPiece(show) {
window.load(show);
}
How do I "delegate" here?
Also, I wanted to make sure I figured out how to click back to the gallery as well. That wasn't working for me either for some reason. Here's what I was using (you can see on the guitar page on the portfolio2.html page):
window.on('click',"#back", function(e){
e.preventDefault();
showPage('portfolio.html');
manageNavState($(this));
});
Here's my site so you can see in detail what's going on:
Portfolio Site
And here's the other gallery page I made:
Second Gallery Page
Sorry if this is a dumb question. Thanks in advance everyone!
===EDIT===
Nevermind, my code was perfectly fine. I found out I just had to open and close with html tags in the linked image pages, which I didn't expect because I didn't have to do it elsewhere. One image is still not working, but I'll figure it out.

Implementing Infinite Scrolling with jquery

I am working on a project that uses the jQuery Masonry and Infinite Scroll plugins to load "n" amount of pictures from instagram using their API. Looking at this short example my understanding is that I need to have before hand the html pages to be rendered:
<nav id="page-nav">
  
</nav>
The problem is, I dont really know how many pictures will be retrieved. Here is for example how I retrieve 20 pics at a time.
$(document).ready(function(){
var access_token = location.hash.split('=')[1];
if (location.hash) {
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: "https://api.instagram.com/v1/users/MY_USER_ID/media/recent/?access_token=MY_ACCESS_TOKEN",
success: function(data) {
for (var i = 0; i < 20; i++) {
$("#instafeed").append("<div class='instaframe'><a target='_blank' href='" + data.data[i].link +"'><img src='" + data.data[i].images.standard_resolution.url +"' /></a></div>");
}
}
});
} else {
location.href="https://instagram.com/oauth/authorize/?display=touch&client_id=MY_CLIENT_ID&redirect_uri=MY_URI";
}
});
I guess I will need a pagination mechanism but based on the tutorial mentioned above I believe I will first need to pre-define the html pages to be loaded. So now here my questions
Does that mean this plugin (Infinite Scroll) requires to have "n" amount of html files in a directory to achieve infinite scrolling?
Is it possible to implement infinite scrolling with the same plugin if I dont know how many pages I will have. Even better without even having to create physical html files?
How can this kind of pagination is implemented? (i.e loading chunks of 20 pics as long as the user keeps scrolling down) there is not that much documentation online, could you provide a short step through demo or description?
With kind regards
1) Does that mean this plugin (Infinite Scroll) requires to have "n" amount of html files
Absolutely not. You do not need to generate static html pages beforehand, The only think you need is a URL scheme where subsequent page content can be fetched by changing one number in URL.
Think of it from the perspective of the infinite scroll plugin. You load the plugin JavaScript in your page #1 and provide link to page#2 inside page #1. Now when the user scrolls past page#1, the only variable that the plugin has is the current page number, like, 2, or 3 or 4 (N)
The plugin needs to create the URL to fetch content from when user is scrolling. So how does the plugin do that? The plugin looks at the next URL structure provided in page#1, parses it and creates a "base path" to which it will keep adding current_page_number to fetch subsequent content. That is the role of NAV selector.
So let's say I have something like /home/page/2 as next URL in page#1. The plugin will parse this into an array as
[/home/page/,2]
and think that base_path = "/home/page/"
when the plugin attempts to fetch page_number 3, it will just append 3 to the base path, like base_path.join(current_page_num) making it /home/page/3
On server side I can just have a controller that takes care of all the /home/page/1 to /home/page/N links. You can just look inside the plugin, look for _determinePath and retrieve functions.
Now you can see the problem as well. The problem is that there can be an infinite variety of URL structure depending on how you are doing pagination inside your code and how many variables do you need. My way of doing pagination is different from your way of doing pagination. Same holds for frameworks. Drupal pagination scheme may be different from Djanga and wordpress etc.
The plugin cannot possibly cope with all these URL structures. Given a next URL, it cannot possible always deduce the "base path" to which it needs to add current_page_number. Again look at _determinePath() method of plugin to see what kind of URL it can cope with. It can parse simple URL structures, like page2.html or page=2 but you have to provide your own implementation if your URL structure is complicated or something that the plugin cannot handle. Look at pathParse() method as well.
2)Is it possible to implement infinite scrolling with the same plugin if I dont know how many pages I will have.
Again, there is no need to create HTML files. You have two options to signal end of content (without knowing how many pictures you have in advance)
When you have reached the "no content condition" you can return an HTTP 404.
Or you can return an empty string.
Does this answer the question?
How it can work with the plugin
First page - include - NAV SELECTOR - LOAD THNIGS THE USUAL WAY
First page on load - use instagram pagination and store "nextURL" in your javascript somewhere
On Scroll - override _determinePath to provide your own fetch URL using (2) - let plugin retrieve that URL
Override plugin content selector - so it returns new elements to callback
On Plugin fetch content - Use the callback inside plugin to update your page
Update on github repo
I have forked paul's github repo to add documentation for PHP server side integration. I believe that plugin's assumption that next URL is only dependent on current page number is too restrictive. We need to get nextURL from next page content.
Github Repo - https://github.com/rjha/infinite-scroll
Pull request on base repo - https://github.com/paulirish/infinite-scroll/pull/219
My javascript knowledge is very limited and maybe you can do a better job of extending the base plugin. However every drop helps make the ocean :)
Does that mean this plugin (Infinite Scroll) requires to have "n" amount of html files in a directory to achieve infinite scrolling?
Yes, that particular plugin seems to be designed to support only static pages, which otherwise would use a "Next page" link. The tutorial you found even states that it could not handle dynamically generated content with URL-parameters, though I don't really believe that.
Is it possible to implement infinite scrolling with the same plugin if I dont know how many pages I will have. Even better without even having to create physical html files?
By design of that plugin I'd say No. Of course, you should be able to use an (unknown) amount of dynamically generated pages with the pictures. This needs serverside code to be fed from the instagram api, which does not seem to be what you want.
How can this kind of pagination is implemented? (i.e loading chunks of 20 pics as long as the user keeps scrolling down) there is not that much documentation online, could you provide a short step through demo or description?
There are other infinite-scroll plugins. The demos 2 and 5 on that site you found implement a simple "native" (i.e., no plugin) infinite scroll, both loading the new content via ajax. The demos 3 and 4 use the endless-scroll plugin with a few more scrolling options, although the demos do not include ajax.
Now you are free to decide how you would like to implement your script. You seem to want to get all image urls from instagram at first, but append (and therefore load the image files) only chunkwise. If instagram supports a paged api, you might want to combine both load processes.
This can be done with code like in the demos 2 to 5 - when the scroll reaches the page end, trigger your requests to load the images. After that happened, call Masonry's appended method on the new the img elements (or instaframe divs, like in your example).

Categories