(JS) SPA-like website behavior with background videos - javascript

Forgive me if another thread like this exists - I couldn't find the answer to that specific problem.
I'll soon be developing the frontend for a vanilla JS AJAX loaded website, with SPA-like behavior similar to the home slider in this one:
- http://clapat.ro/themes/grenada-wordpress
The methodology I will probably utilize is loading the innerHTML of a container from the targeted sub-template, then pushing the state to the history - pretty standard approach to this, I believe.
Now, the slides containing image background are pretty obvious - all it should take is placing the same image in the target subpage hero section, then animating in on load. The problem might be with the video slides - how to make them continue playing seamlessly during and after the reload? Will such approach force them to start all over from the beginning, as soon as the target page is loaded and placed in the view?
I haven't tried it yet, I thought I'd ask in advance, in order not to get myself stuck up all the way into the incorrect approach :)
Thank You in advance,
Peter

Researching the reference templates for the 100th time, I think I came up with some kind of a solution myself:
if both the homepage and target page had structure like:
<body>
<main-container>
<slider-or-hero-container>
...
</slider...>
<content-container>
...
</content...>
</main-container>
</body>
Then, maybe I could replace the whole "main-container" on normal links, but replace only "content-container" clicking the links within the slider? The slider section would basically just stay, and the script would simply modify its appearance (disabling arrows and slide change, perform the transition animations etc)...
If you had any suggestions at this point, I'll really appreciate that :) Otherwise, I will post an update when I'm done coding it - if it works, it may be helpful for someone in the future :)

Related

Animated Shortcut Icons

I was just creating an shortcut icon (the icon displayed in the head part of a page before the page title) (EDIT: I mean favicon...) for a webside, when I was thinking about animated shortcut icons (acually I don't know if they are called like that...).
Even though my intuition told me that this is probably impossible, since I haven't seen it being done on any web pages so far, I wanna be sure :^)
I have actually thought about a things that might in theory help to find out if, or how it's possible:
Using a gif file
There might be a way to make it work using a gif, but probably not. That's too easy. It would be widely-used...
Changing the icon tag using js for every frame of the icon animation
This would actually be my best guess, but I can't get it to work...
Changing the icon image on the server 10 times per second
Forget about this one.
Find out how the loding icon animation is done
Well, it's probably browser side and hasn't todo anything with html/js, but who knows?!
So, that's everything I could think of concerning shortcut icon animations, hopefully you can make sense of it :)

Pagination of Tumblr Theme Posts Using Jquery/Javascript/Ajax?

Still on the same project.
I currently have a theme I'm working on for tumblr. It's incredibly image heavy, so my goal is to load the entire page one (or a few) times while still being able to go to the next page of posts with pagination. The native pagination requires the entire page to load in order to get to older posts. What I believe I'm trying to achieve is loading with ajax, like this?
(Tumblr also does have an established script similar to this, infinite scrolling, which allows you to load more posts by scrolling to the bottom. That convinces me that this is possible, but unfortunately, as far as I know, not created yet.)
So, can anyone help me, if only it is to point me in the direction of an already established plugin somewhere? I've run into quite the problem since i know very little about scripting and nothing about ajax. I'm still quite new at this!
Again, here is the entire code of the theme currently, if that will help you with your answer. (Obviously, my posts render in the "POSTSGOHERE" div.) And, just in case, here is the script for infinite scrolling that definitely works on tumblr.
(No one point out how I haven't chained all my plugins yet, I'm a little cautious since they currently work and I don't want to break anything!)
Thanks again, stackoverflow.
EDIT: To clarify, I don't want infinite scrolling. I want pagination via ajax, like in the example. Infinite scrolling also will slow down my page, since you can only load so many posts before it just harms the speediness of the theme. It's very cumbersome and messy for this page.
Also, guys, I can't comment on your replies, for some reason? I'll just edit up here in order to reply.

Horizontal/Vertical (Anchor) Page Content Scrolling On Link Click

Similar questions, if not exact questions like this have been asked but not often and the answers I have tried to alter with but have had no luck what-so-ever.
Basically, I want to be able to make the content part of my page (so the header remains on each page) change and I'm not sure if this is with anchors using only one html page or if it's multiple html pages or really how it's done at all. Been looking for over 5 hours but to no avail.
I came across this site looking for an answer and it has exactly what I am looking for http://www.aivahthemes.com/themes/gracious/index.html
I looked everywhere and found sites where it did similar things but if you went right by two pages and then went back to the original page, you would see the middle page on the way back. That site above does NOT do this and actually hides the pages between links somehow which is amazing.
This is a bit vague as I havn't posted any code but literally all the code I tried was just from previous questions and it was just me trying to adapt half-answers to what I wanted.
Any help is greatly appreciated, I'm stumped!
Edit:
*Looked a bit more into detail, does look like one whole single HTML page. Why was it so quick to load though if it was an entire page? Thought that would have been a long process.
Edit2:
*Is it also possible to achieve this 'style' by doing it vertically?
The site you listed uses hashes in the URL. You can add them dynamically with javascript or just by using plain anchors. Hash in the url will save it in the browser history and the back/forward buttons will work fine. The only tricky part is reading the hash, which is pretty much straight forward with window.location.hash - it returns everything after '#' sign.
The script for animation/getting pages would be a little bit more complex, but as I see it's all based on getting the right <div id="HASH_FROM_URL">, moving it to 'left: -9999px' and then animating to main container's offsetLeft.

Page flickers on load - hide/show javascript - Total Newbie

Ok so here goes.. I'm totally new to Javascript. I only started on html&css about a month ago. All my htl and css is probably pretty backward and i've got a stack to learn. I'm using two pieces of javascript - one piece loads the nivo slider and the other the hide and show easy tabs:
http://www.kollermedia.at/archive/2007/07/04/easy-tabs-11-free-tab-menu/
Both were fine when I hacked them to hell trying to get them to look the way I wanted. Since i've put them together all hell has broken loose (bit of an exageration) but it may as well have because although they are both working, the page flickers badly on load. I have been researching this and I hear it's called DOM flicker. I know it's due to the hidden divs showing before the script kicks in. I also notice that the increased page height, for the split second (sometimes longer) it takes the content to hide activates the scroll bars and i know this could have an affect. I'm also using background images within the links on mouse over commands.... i didn't know what else to do.
I've read you can add script to only show the content once the script has loaded but I know zero javascript : ) ... yet!
Can somebody please help me fix this? I've read lots of posts around the net but they all put the code with gaps where your supposed to fill in and where it's put is expected to be known. I'm sorry to be such a mong but could someone literally copy and paste my javascript and edit that to show me?
I know it's a lot too ask but i've been trying to fix this all day.
Here's a link showing the problem (when selecting the portfolio links the delay / flicker lasts ages!)
link to the site: http://www.adam-ashton.co.uk/homepage.html
(sorry to be so long winded)
Thanks,
David
Page Flicker can be handled with the help of some css
.hideME {
visibility:hidden;
}
Add this class to the Top Most Element (Mostly a div ) of you html page
And inside the script tag ,
write a window.load function
$(window).load(function() {
$(selector).removeClass('hideMe');
});
this should do the magic :)
Add this one line code at 46th line .. Means first line of window.load
$('.container').removeClass('hideMe');

javascript / jquery slider(carousel)

I'm creating an iphone (web)app.
If user slides tumb left it has to show the settings panel, after modifying settings, user drags thumb to the right and the normal app screen comes back.
However I took as basis some carrousel code which needs (minimal) 3 pages, I only want 2 pages.
Current state:
http://jsfiddle.net/U92wt/
I can't remove the red page without breaking everything....
Edit:
More information about code used here.
I tried cruising through your code but I couldn't identify exactly what the issue was. It's a good idea and I felt like playing around with it so I wrote an implementation that is capable of only two panels that you're welcome to use if you wish.
http://www.netortech.com/plugins/swiper.htm
If you like it please give me a vote on the jQuery website!
http://plugins.jquery.com/project/CarouselSwiper

Categories