Would anybody be able to make an "in-div" (as opposed to "in-body") version of the following web page?
http://squareoftwo.com/
In other words, I want this functionality as a part of a bigger web page, with a frame around the rotator, white space left and right from the frame and possibly other information above and beneath the frame.
The page should have a vertical scrollbar and the frame -and the words in it- should respond (reposition) upon moving that scrollbar.
Any (part of) words crossing the frame border should be invisible.
If the mouse is not positioned in the frame, the words should not rotate.
I have tried several things, but I always completely mess up the result (I'm far from a javascript expert).
Any help is welcome.
Thanks in advance
The following blog post seems to provide a very good answer:
http://www.gabrielpillet.com/en/blog/2/2010/08/22/creating-a-3d-cloud-tag-with-jquery-jquery-accessibility-php-seo-development-css
Related
On some sites, you can use limited HTML in your own user profile (or other user-controlled space).
I'm looking for a way to put scrolling text in a profile. If I owned the site I could accomplish this with css and/or javascript.
I attempted to adapt a css-only solution, to fit it into a style attribute. I am able to do some transforms, but I can't seem to get any kind of animation without access to the header. (I even tried a marquee HTML tag.)
Is there a workaround for this?
Clarification: scrolling right to left from off-screen to off-screen, then repeat. OR text bouncing back and forth within its bounds.
I was looking at a website Firstborn website and it's not the first time I've seen this effect, i wonder how it works.
When you scroll down the page, you can see the images "curve" on top and bottom. I know I'm supposed to present some code, but I don't have any clue on how to create this type of curve on scroll effect!
Does anyone have ideas about how to make this effect is javascript? (Not the glitch, only the curvy image)?
I need to disable the bouncy page-level scroll for iOS while preserving the ability to scroll inside a div. The solution to the most popular StackOverflow question on the matter seemed to work for me at first, but I found that with certain positions/transforms, the solution would break.
If I disable -webkit-overflow-scrolling, it works fine, but the user experience without it is greatly diminished in my opinion.
I am using THREE.js's CSS3DRenderer to do the positioning because in the project this is for, I need to composite the dom element on top of a 3D scene and have the cameras match. But essentially, its just adjusting the transforms and nothing more.
I created a CodePen that shows clearly that camera/object position consistently scrolls while blocking page scrolling and another breaks it.
http://codepen.io/aaronmeyers/pen/LKgsG/
please see codepen
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?
I need to determine the width and height of the current mouse cursor used on our webpage.
I need to show a div right under the cursor, and possibly to the right of it.
So I need to determine the offsets of my div from the exact pointer location, so the cursor do not cover up the div.
The mechanism will be used in intranet system, so it can be firefox-only solution.
Unfortunatelly some people here use weird cursors, anyway, big ones, so I cannot just hardcode eg, 16px right, 16px top offsets. Anyway, I don't want if I don't have to.
Thanks for your help.
You can't do it. Anyone can set their cursor to any arbitrary garbage, and there's no API for asking from the browser.
I don't think this it is possible to determine any more than the cursor center within the browser. It surely can be done using a custom-made Firefox extension but I doubt there are any around for this specific task.
While size is not possible, there are jQuery addons like SimpleTip and qTip that let you create fixed-position tool tips that don't close until something happens (like the user clicks on it). The content of the tool tips can be wrapped in divs.