I'm building a large site (30+ pages) and wanting to use a centralized HTML page with 3 columns. I'd like the middle column to change depending on links clicked either via the left column (nav side bar) or a nav at the top of the page.
Here's a simple layout out of what I'm talking about (don't know why the middle section isn't going behind the left-panel though). https://jsfiddle.net/cxLcmfh8/
So, different .middle-panel objects are linked to a .left-panel nav element. The left nav would remain the same and the middle would fade in depending on which link is clicked.
I'm worried something like this would be too large for mobile users. Is there a way to build a large site with a setup like this without having to have mobile users basically download the entire site just to enjoy some neat transitions?
if data is not to large that wont create any difference if large than you should use server side scripting like PHP,JSP or servlet to generate response in same page and apply animation when page load.
or use AJAX to download data as and when required and apply transition. This method would not download all data and won't create over head it take time depending on net speed.
Related
I have very large text files that can reach 10's of gb's(on server side), and want the ability for user to scroll through them on my website.
This will allow them to view it without needing to download a program such as glogg.
I thought about implementing something that shows lines of text based on the users scroll positon, although i dont really know how to start doing this.
My website is build on react and nodejs.
Any ideas?
You can use overflow property in your css
I found this website and impressed on it https://kvellhome.com/
what technology do I need if I want to create a website like that
Is it Ajax? (I tried to remove some article but it can reload itself when I changed article back)
HTML5 history (I found that it can reach by direct link)
Ok, I think this can guide you to the right direction.
1- the homepage is a simple landing page that usese some animations to change colors and display text.
2 - when clicking on discover, it slides on the right and initialize a second slider that uses the projects's name as navigation dots (can easily be done using css pseudo elements using data attribute as content)
3 - you click on the project itself and it load a parallax page for that specific project.
Menu | contacts | about are pretty simple, they are pages on their own.
Some libraries you could possibly use:
fullscreenjs (to create the fullscreen pages and sliders. the home page can be the first slider and then on the second page you initialize a slider inside a slider (so that the animation to the right looks like the one on the website you provided)
animatecss to animate stuff
parallax for all the parallax effects
I think this is personal preference, but if I had to do a website like that, I will tackle it this way. Hope it helps
I have been using the Wicked PDF gem for generating pdfs. It has been working great.
However, I have run into a situation where a need to attach and have visible a large footer to the first page, but not the rest of the pages. To accomplish this I added a margin to the bottom of the body of the pdf as suggested in this post which gives the footer enough room to be visible.
This causes adverse side effects because it adds bottom margin to all of the pages not just this first page. I was hoping to only add margin to the first page and leave the rest of the pages unchanged.
I've tried to accomplish this with the use of javascript and css but have had no luck so far.
Thanks in advance
Checkout the documentation example for numbering pages https://github.com/mileszs/wicked_pdf#page-numbering
So it should be possible to have different footers using javascript
Check this solution
wicked_pdf: Is it possible to have the header only show on the first page & the footer only on the last?
Unfortunately the solution is not straight forward. You would have to strip the pdf out to individual pages create a pdf of each page then stitch the pdfs back together. See this explanation
I saw a site a month or two ago that had anchors fixed to the right side of the page that would not scroll when the page was scrolled. That alone is not hard to do with CSS.
But on that site, the fixed anchors were dynamically generated based on the section headers in the page. And they were proportionately spaced down the right side of the page in relation to their position in the document.
In essence, it created a mini-map of the entire document, giving a visual overview of what was in the document, and the spacing between sections of the document, all within the current viewport. You could quickly see how large each section was in relation to each other. Maybe I should call it a table-of-contents instead of a mini-map.
I believe this was on a documentation page for an API of some sort. I think it worked really well for navigation, and want to build something like it for some documentation I need to do.
In a way, it reminded me of the minimap on the right side of Sublime Text 2, but only major headings were shown and they were depicted as buttons fixed to the right side of the page.
Unfortunately, I can't remember or find the site I saw it on. Has anyone seen an example of something like this? I'd love to see some examples before I start implementing it. Or do any tools exist for doing this, jquery plugins, etc?
So, I'm making a fairly simple on page javascript application. While it's one page, I'd like to have several pages of data. I'd like to have the entire page be a giant horizontal accordion. Clicking on the headers on either side would switch to the requisite page. I'd like to to fill the entire page so it doesn't leave empty space. Does anybody know of such a javascript library?
Thanks for your time.
Edit: I could set the width and height of a normal accordion library from the size of the window at page-load, but that doesn't adapt to page resizing very well (at all.).
Check out iridium.com, a site I worked on a while back. It's using a jQuery plug-in called "slide deck" which may suit your needs. You'd have to style it for full-page of course.
To readjust the main div per window resize:
window.onresize = function(event) { /* adjust fullscreen div here */ }
I recently worked on a fairly similar project for my personal portfolio - much like typical accordions but to prevent user confusion from the extra-tall accordion bits, the window scrolled as the giant accordion opened. check my profile if you care to take a gander