I'm trying to create the effect of zooming in on a webpage but focusing on one particular element and allowing navigating / scrolling to be present.
I found a few plugins online but none do what I'm really looking for and I've found nothing else. Fancybox, Zoomooz etc are great but I need to be able to scroll.
The element in question is a PDF document. I need the user to be able to zoom in and still navigate up/down the page.
Possible?
Here is an example of what you could do... http://www.sitepoint.com/html5-javascript-mouse-wheel/ and http://blogs.sitepointstatic.com/examples/tech/mouse-wheel/index.html
However I would consider the above as a secondary option. There are many other ways to present the presentation and embed it onto your page. A slider is limited to "slide" only. You can for example use a presentation software and embed it onto your page as a widget e.g. http://prezi.com/ as freeware.
Hope that helps.
Related
everyone!
So, I'm trying to implement parallax with skrollr.js. This is my first attempt and I am pulling my hair out. I've been all over the web from searching Google, YouTube and StackOverflow. I'm trying to implement a parallax effect on a header image somewhat similar to this example except the image doesn't need to be the full height of the viewport and I only need one image to have a parallax effect. I'm going for something very similar to this on Squarespace's page.
I've been trying to simply use the code from the examples provided in the Skrollr.js repo. But after hours of failure, I turn to the trusty SO community!
Here is the page I have currently been testing the parallax header image on.
The classes .scollable-between and .scrollable-after are being altered on scroll but nothing is happening. Also, I am trying to implement this for mobile but I can't even scroll the page on mobile.
Any help is certainly appreciated! Thank you so much!
A couple issues:
First, position: fixed really doesn't play well with skrollr... whenever it is enabled on an element, the position relative to the scrolling element basically no longer exists, and skrollr events stop firing.
Second, it looks like the element with the background image (.parallax-image) is both being shown by the class '.skrollr-between' and also has a transform-3d property on it. When I disable the tranform3d property with the inspector, I can see the image.
It seems like you are combining two methods of parallax: Skrollr is one way of doing it via JavaScript, and CSS transforms are a way of doing it without Javascript... it would probably be best to chose one and roll with it.
Skrollr/JS method:
https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/
CSS only method:
http://keithclark.co.uk/articles/pure-css-parallax-websites/
I'm seeking to emulate the on-clickable input forms that pops up when an user clicks on the blue bar as shown above. My experience with front-end development is limited so I don't know what to call these elements exactly, but let's say they are on-clickable input forms contained in a box, which can lead to other on-clickable forms like the date picker as shown.
How do I do this in Javascript? Preferably with AngularJS, since the app I'm working on uses that. I don't mind using JQuery though.
I'm not looking for detailed step-by-step instructions (which I don't mind), but hints to get me started on cloning these features.
Thanks.
The pop-ups you see are going to be HTML elements, probably <div>s. The page will use JavaScript to create event listeners on the bars to hide/show them when the bars are clicked/moused over. The "pop-ups" are really just like any other element in the page, but with a higher Z-index and using CSS positioning (most likely absolute) to make it appear as a pop-up. It also looks like they're using the CSS arrow trick to draw the speech bubble pointer, though it could also be accomplished with images.
If I were to develop this, I'd break it down into stages like this:
Get my pop-up into my HTML page, and make sure it's not appearing anywhere.
Make it show/hide when I wanted it to (either when the blue bar is clicked, or when the user mouses in/mouses out of the blue bar).
Make it show/hide where I want it to (near the blue bar)
Make it look better (work on the CSS and get the pointer to work properly)
Convert that work into a second-level popout. The second level is going to be the exact same technique, but maybe the CSS classes are going to be different so the second bubbles look different and have the pointer at a different position.
Of course, you don't have to develop this functionality yourself. There are also a number of jQuery plugins you could use, as well as Bootstrap's popover component.
I am a beginner at jQuery and I have been trying to place more than one div in one slide bar. Basically, I am working on auction site and I want a DIV which displays more than one item in same div with “Next” and “Previous” button arrows.
For example:
When you visit an auction site, one slide-bar should appear containing more than one item (multiple DIVs). The slide-bar should have a text that appears, saying “newly arrived item or recommended for you etc.”
Here's a screenshot of what I mean:
Is there any way to achieve this using jQuery? I have just recently started working with jQuery and I am stuck. Any help is much appreciated.
Assuming that “building your own” isn't an option for you, you could take a look at jQuery plugins like Smooth DIV Scroll, or any alike plugin that scrolls content horizontally left or right.
Generally, one of the nice places to find a multitude of jQuery plugins would be (for example) the jquery-plugins.net website. There you'll find usable plugins for what you're trying to do. Just one of many available there that also does what you're looking for: Any List Scroller – jQuery Plugin To Scroll Lists.
As said, there's more than a dozen alike plugins scattered all over the internet. All you need to do is to deciding which one fits your individual site best. In case of doubt, fire up your favorite search engine and look for “jquery div scroller”.
There is a piece of functionality that I am trying to emulate on a .net e-commerce site, where you have a target area (I'll use the term "window" here, but I'm not talking about an actual window, more a div) which contains a large image. Next to the large image container, there are several smaller thumbnails. I want to emulate the functionality where as you either mouseover or click on the thumbnails, it refreshes the larger window with the fullsize version of that thumbnail. I guess it's a lightbox at the end of the day.
This isnt one of those cases where I've googled around and can't find any solutions... actually the polar opposite, i've found too many of them. I'm asking the community if there is any prebuilt script that is better than the others, or if anyone has done anything custom like this that's easy to implement. We aren't talking about pages of thumbnails here, maybe 2-3 per image. Again, I'm not trying to pop it in a lightbox, but refresh a div thats already inside the page.
What is structure of those divs?
If I get it right. Each thumb has responding to it 'big div' that is shown when clicked.
I would join then each small div with big via and attach action:
var b1 = $('#big1');
$('#small1').data('big',b1).click(function(){
var big = $(this).data('big');
big.someShowFunction();
});
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?