Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I googled, and I can't find any solutions, but i have certainly see implementation of something like this somewhere before.
So basically I have a large spread sheet - like table, generated by the user. It will be very likely that the content will extent past the viewport both horizontally and vertically, so scrolling is needed.
However, I'm trying to find a "prettier" way for the user to scroll (horizontal and vertical scrollbars just don't look nice). So I was thinking of some arrows like the following (see attached). However, I looked around and can't see any example of anyone doing something like this.
So here are my questions:
Can someone tell me if there's any technical reasons I shouldn't replace the browser scrollbar with "scroll buttons"?
Can it be done easily with javascript or are there any (preferably angularjs) plugins that can imitate this behaviour?
I have no idea why you are being downvoted. Also, this is not a UX question.
I think what you are looking for is "scrolling without scrollbar". You can Google this. You will get many results that answer this.
One of the closest answers (and popular ones) I came across is this one right here on stackoverflow.
In this case, it involves scrolling using the keyboard keys or the mouse wheel.
In your case, you will have to carry out something similar. Just that instead of binding to the keyboard keys or the mouse wheel up / down event, you need to create your buttons at the left / right side of the screen and up / down part of the screen. Bind the click event to this button and proceed as shown in the answer linked above.
But note that since you are displaying tables, it will get complicated. You will have to move each row / column of the table depending on where the user clicks. Should be achievable using jQuery or similar javascript library though.
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I am building a web page dedicated to explaining Math and other topics. I'd like to animate the process of doing certain mathematical steps like adding numbers and solving an equation. I know I can create an animated .gif but this comes with the draw back of having to find some way of drawing the symbols in a picture or maybe exporting a LaTeX rendering, etc. I'm wondering if there is some more programmable, systematic solution.
Suppose for concreteness that I want to animate the solution to 2(x-1)=10 and then several other similar equations, and the process of dividing 123 by 45.
For some context, I have some decent but non-pro skills with HTML, CSS, JavaScript, other C-like languages, Python, and similar stuff.
What I'd do (this is broad) is take the input of each number or symbol a person types and moves them to a specific area on a canvas with JavaScript. For example, every time a person enters in a number it will move that input into a small box or something. From there you can just use the symbols to add/subtract/multiply etc. If you wanted to make this smooth so that it goes in multiple steps you could always you the setTimeout function with JavaScript so it shows each part of the equation step by step. Also an added tip would be to check on websites that have similar functions like Cymath
I will choose Canvas with HTML5 and Javascript to create the animations, the good point with Canvas is that you have full control of pixels, the cons is that you will have to deal with all the stuff to create and render every single function.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
Is there anyone who knows if there is a better alternative for the filmroll js library: http://straydogstudio.github.io/film_roll/ ? I use it because it's almost exactly what I'm looking for: It centers the active image in the middle of the screen and it works great with responsive designs.
The reason I'm looking for an alternative is because it contains a few bugs, which I discovered after one hour usage already:
It removes the cover from the beginning or end of the slider before it rotates. It would be better to first duplicate the image, so It won't display a white gap at the end of the slider while rotating. Anyways, I used a dirty fix by just loading the covers multiple times so it contains more images than what fits on the screen.
Every div contains a hardcoded width, which changes so now and then, because I use a bigger size for the active image. The problem is it doesn't always recover the width correctly of the parent div, so it will show white gaps between the images.
With touchSwipe enabled it is very very buggy.
I can't duplicate the slider multiple times with the same classname.
It truly is a great concept, only those bugs are quite bothering me. So before I start making adaptions, I'm just curious: Does anyone know a library which does exactly the same? Or almost the same.
You can try Iscroll as an alternative
http://cubiq.org/iscroll-5
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I have a webpage in which I need to realize something that looks like the following sketch:
As you can see, there are basically two sections:
a side-block (preferably) on the right that serves as image-thumbnails scroller;
a contents-block on the left (in my draw) in which there are text parts and an image that is selected from the right side-scroller.
Side scrolling may be achieved by a browser sidebar or (very much preferably better) by apposite up/down buttons.
When clicking on a different image on the side-scroller that image get shown in place of the previous one.
Last thing, clicking the image selected shall make it show in full-size (not larger than browser window anyway) with a lightbox-like-effect.
Anyone know of a jQuery plugin that already provide all this?
Thank you very much.
Swiper (http://www.idangero.us/swiper/demos/) should help you with this, it covers most (if not all with a bit of a creative layout on your part) of the things you're looking for. It's got some very thorough documentation, for the light box behaviour you're looking for - I'd use one of the baked-in methods to create your own event handler.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
Looking to implement one on a website, just curious what everyone else has used and what kind of experiences they've had
EDIT I'm also not a huge fan, but the client is insistant and for this case they can click on the "hoverable" part and then get to the same pages in the dropdown from there so basically this will just be a way to get to pages with one less click
I really like the Suckerfish dropdown menu from A List Apart. It's really easy to implement (I've done it myself, and I'm not much of a Web programmer), and even works in IE.
I use the YUI Menu. It's quite flexible, offers many methods of declaring what's in the list, and is easy to skin.
Superfish is a jQuery enhancement of Suckerfish and supports several levels of dropdown and various layout options.
It degrades nicely:
With Javascript and CSS, the dropdowns fade in nicely and the menu has other enhancements.
With CSS only, the dropdowns still work (IE6 is supported).
With neither, the menu degrades to an unordered, nested list.
I am using this now and like it.
I use the on on Steve Gibson's site grc.com. It is purely CSS -- uses no Javascript. It's not all that intuitive, and there are parts that are IE-specific, but it works well.
It's worth checking out superfish which expands slightly on suckerfish
I recommend mygosuMenu.
from the page:
- horizontal or vertical menu
- can be positioned statically or absolutely
- delay for showing/hiding menu (can be turned off by setting to 0)
- position of submenus can be changed, so they can for example overflow parent elements
- on the same page there can be many menus created
- seperated into 3 layers: behaviour(javascript), structure(html), presentation(css)
- search engine friendly
- free for any use (BSD license)
I don't like them, tend to avoid them as much as possible.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
Does anyone have a good recommendation for a drop shadow jQuery plugin?
I've been working on a project that had every element on the page with a subtle drop shadow, we started using RUZEE to do the shadows but there was a severe performance hit when you had more then 4 or 5 shadows being calculated on the page.
I went to writing my own plugin, I call it simple shadow and it only uses jQuery to inject images in floating div's around the div you want a drop shadow. Nothing elegant but for the purpose of completing that site it worked without performance hits.
Now my plugin isn't anything special but I am still in search for a good light weight shadow plugin.
CSS 3 will support drop shadow. Firefox and Safari are already supporting the feature.
You might want to use that instead of the jQuery functionality, since it will run in browsers who have turned off javascript.
Take a look at http://www.css3.info/preview/box-shadow/ for a demo of the shadow.
The original site hosting the jQuery Dropshadow plugin has apparently gone down.
For anyone looking for it, I'm currently hosting it on my Dropbox account.
jQuery UI also provides drop shadow functionality.
The JQuery UI no longer supports shadow functionality.
try the FontEffect jQuery Plugin, sorry I can't post the link, but you can find it easily on google or jQuery plugin site.