Webpage which moves to new page as we scroll down - css

I am kind of new to webdesign. I observed that recently several companies have starterd getting websites where when we scroll down automatically it goes to the next page. For example something like http://www.extremeheadphones.com/. What is this sort of template called and are there any open source designs for it?

That's not changing pages -- the URL stays the same. It's just one long page with various background colors/images. There's nothing stopping you from doing this yourself; just make a long page
Credits: Joe White

Related

Website doesn't load portfolio content on mobile

I just made a website using a Wordpress theme and it all works good on desktop computers. However, while the site initially loads normally on my phone (I'm using iPhone 6 with iOS9, but the problem is the same on Android phones too, I tried two), once I click on the portfolio item, it loads a blank page (header and footer only).
When I tap on the address bar, I notice that it never went to the right link at first place (the portfolio item link), it just shows the homepage link and there is no content.
I managed to fix the problem by entering the external URL in portfolio item options. It was still internal link from the site but I made the link open the new tab (if it doesn't open new tab, the problem stays the same). However, if I choose to go back to the homepage from that link (the portfolio item link), the homepage is blank, there is only header and footer so the problem returns again.
Just so you know, the first portfolio item contains the external link outside the Wordpress and that one opens normally.
What is wrong with the mobile site?
The site URL is: http://svenharambasic.com
The screenshot is attached. Thank you!
P.S. There are also google ads showing, I never encountered that before, but I'll work on that once this is solved.
I only see a white screen upon clicking any of the homepage portfolio image links (except for the first link which goes to an external site in a new tab) on desktop and on mobile actually. There is a content_inner class with inline styling setting visibility:hidden.
It's unclear to me why it's doing that- maybe to remove focus from the body and draw focus towards something that is supposed to appear in the foreground but does not? If I remove visibility:hidden from the element in the browser, I see a series of additional images appear, which seems to me to be more an expected behavior. Are we on the right track?
I managed to solve this, it was the setting in the theme options; I had to disable grid lines... I can't say I truly understand why, but it worked!

How to load page in background before switching the view in ASP.NET MVC5

lately, when I was using GitHub I've noticed, that if you navigate through the pages before the new page is displayed, the page is firstly loaded in the background (async manners).
No view change is performed until the page is fully loaded. Loading progress is also visually presented to the users (that small blue bar on top of the page).
I was trying to find some info how to achieve something like this but with little to none success. Is anybody able to tell me, how to achieve similar behaviour?

Web page behaves strangely

Have a look at the following site http://www.soe.gr.
The whole page has been built with CSS Page Builder Magic 2 (projectseven.com).
Every button is a link to a different .html page.
However, I do not know why every button press creates a flash effect in the page, the background changes instantly color and generally it gives an impression of abnormal operation. I have not met any site with such behavior except some pages inside projectseven site.
Do you have any idea why that happens? Is it something wrong with Page Builder Magic approach?
I am new to Web Development world and I want to know if there is any problem with these guys.
Thank you very much
I checked it out, it doesn't behave abnormally at all for all those effects you have there, I checked out the size of one of the images it is about 250kb, then imagine the other images which I assume are of the same size, and they are all going to be loaded when the page loads, you definitely should expect some effect

iframe cross-site : "Verified by VISA"

I've just created a tshirt shop to put on my own website. A company called spreadshirt.co.uk (hereafter "SS") runs the shop. They allow me to embed their shop on my site via an iframe, and since they allow the CSS to be fully customisable through their admin panel I've got it looking pretty neatly integrated with my site.
The only catch is the iframe - I've set it to 2000 pixels high at the moment (just right for the longest pages). I'd rather have it resize for each page, but expect that to be "hard" so didn't bother.
Anyway, I've just put the page live, and put a test order through it. All is good, until....
...the "Verified by VISA" page. This motherhubbard turns up right at the end of the order process, and the HTML contained in it puts the little dialogue centred vertically in my iframe. I.e. nearly 1000 pixels down from the top - making less savy users think the page hasn't loaded (all they can see without scrolling down is a white background). I can't customise the CSS on this page like I can the SS pages, as this page isn't served up by SS.
Any clever ideas???
Many thanks people!
I'll put a link to my site if people want to see it, but assumed that might be seen as spammy and frowned upon.
I don't deal with iframes too much as i hate them, but i think you can still write to that document using javascript. Reason i say maybe is because its cross domain, but it should still work.
Check this post out
Resizing an iframe based on content
You could also check out
Resizing iframe to fit its content
and a jquery script:
http://www.lost-in-code.com/programming/jquery-auto-iframe-height/
Again, I really don't know if this will work on a cross-domain website.

Back button loop with IFRAMES

In my (school) website we use Iframes to display class blogs (on blogger). This works well EXCEPT if the user then clicks on (say) a photo inside the iframe. Blogger (in this case) then displays the photo in the whole browser window and the back button loops; that is if the back button is hit, the browser (IE, FF, Chrome) stays on the same page. The only way out is for the user to jump back two pages (which many of our users don't know how to do).
I've read a lot of posts on back buttons and iframes and there doesn't appear to be a simple solution. Bear in mind that I don't have control over the iframe content (so no embedded back buttons in the frame are possible). Ideas anyone?
The solution I would use would be to loop through the iframe content after it has been loaded and set target attributes on links in the iframe so that they open in either the iframe, or in a new window. Here's an example using jQuery:
$('#iframeID').contents().find('a').attr('target', '_blank');
You could do something similar using a loop and DOM methods, I'll post some code to do that if your not sure how to go about it.
EDIT: can't access the content if its cross domain, so this wouldn't work in this case

Resources