Background:
I am using the skrollr plugin as part of a Rails project that is using Slim for markup.
The plugin requires data attributes for start and end points for scrolling animations. Here is an example:
#canvas-1 data-0="top:-80px;" data-1180="top:0px;"
The plugin will basically animate the top css from data-0 (scroll position 0px) to data-1180 (scroll position 1180px).
Question:
A few elements on the page that need to be animated are positioned below containers with varying heights. So, the data-xxxx can be different depending on the content in the preceding containers. I have a javascript function that figures out the height of all the preceding elements and returns a variable of what the data-xxxx should be. This is theoretically what the output should look like in Slim:
#logo.unit data-#{ "<script>logoPosition</script>" }="top:5px" data-#{ "<script>logoPosition + 200</script>" }="top:-8px;"
Slim errors. No matter how I try to add the inline javascript attribute - it errors. My current solution is all javascript (which replaced the attribute completely). However, I would like to know the proper way of doing inline javascript generated attributes.
Possible?
If I'm understanding you correctly, you can do this with skrollr alone. Read the docs about relative mode https://github.com/Prinzhorn/skrollr#absolute-vs-relative-mode
Like this (you get the idea):
#logo.unit data-top="top:5px" data-200-top="top:-8px;"
Using data-anchor-target="#logo.unit" you could even have the animation of other elements depend on the position of the logo.
Related
I am using zoomooz.js, a very dated package, to build a visualisation. (https://jaukia.github.io/zoomooz/)
I am encountering an issue with my zoomContainer. My zoomContainer is powered by a user-selection of the images they'd like to see. From 15 images, users can select one-by-one what they'd like to see. The images not selected are then hidden using CSS.
What I am finding, is that using zoomButtons - despite the fact that these elements are hidden using CSS, zoomooz.js will still 'fly' over to that top left-hand corner, of dimensions 0x0, to that invisible object during the cycle. I don't want them included in the cycle.
I understand that a solution might be to use something like .remove() or .detach(), but when I do that - it doesn't like edgecases where the 'first' image in the html is not included in the parent div. It'll return 0 and not zoom.
We are working on a mobile crossplatform application and want to be able to set an elements height as a percentage of the screenwidth.
So we have to use javascript for it.
To make it a little bit more maintainable we want to implement a custom css property: wheight. This should be a percentage value, the javascript should calculate the correct value and layout the containers.
Now we are stuck at the beginning:
We need to be a able to select all elements with the wheight css attribute. We would like to do this without traversing the dom in it's whole.
Does anybody know a method on how to do this performance friendly?
I'm searching for a jQuery plugin which adds custom scrollbars to a div. I know, there are tons of plugins like this out there and i tried about 10 of them now with no success because i need a plugin with some very special features and i was wondering if anyone knows one which comes near.
Its very important that the plugin does not poll for changes of its content (setInterval) or that it can at least be disabled.
It must be possible to tell the plugin to update itsself manually when i know that its contents has been changed
The most important thing (which seems to be the thing that is missing on most plugins): the original element reference must be kept.
So if i do:
$("#myElement").coolScrollbarPlugin();
$("#myElement").append("<h1>New Content</h1>");
$("#myElement").coolScrollbarPlugin("update");
the plugin needs to recognize this. In the best case, the plugin takes the jquery element i applied the plugin on as its content pane to recognize any manipulation done on the element.
What i can't do:
$("#myElement").coolScrollbarPlugin();
$("#myElement").coolScrollbarPlugin("getConentElement").append("<h1>New Content</h1>");
$("#myElement").coolScrollbarPlugin("update");
This limitation is due to the surrounding application framework which will do manipulations on the scrollable elements that i'm not able to affect.
Are there any plugins that you know matching all this criteria?
Are there other ideas on how to achieve this?
If you get scrollable element by id or assign element to variable before applying scrollbar, you can try jQuery Scrollbar. The only change that is made - element is wrapped into another element with the same classes (to apply CSS styles of source element's height/width & design for scrollbar).
You can disable content/container size cheking using option autoUpdate:false and call init function to recalculate scrollbar sizes after update.
I would like to create screenshots automatically from a browser window and annotate some elements on the website.
I am having in mind to write something like this: (pseudo code)
Place note right of element "#login": "This is the login button"
And the note should be added.
I obviously have to do this directly inside of CSS and/or Javascript because after taking the screenshot the element information would be lost.
What are possible approaches on this?
I am interested in
Relative positioning of notes, arrows and such next to certain HTML elements
Auto Positioning of boxes to avoid overlaps
and anything else which could be useful in this case.
I post one possible draft solution and hope for alternative and better ones
I am also interested in already existing modules (jQuery or others) to help here.
Concerning relative positioning:
We want to add a note right to the element "#login":
Insert a new element, with absolute positioning, as a child of the <body> node.
Obtain the absolute position of the element by iterating from the element back to the <body> and adding up the relative positions. (jQuery's position() would help)
Set left/top for the note-element to the calculated absolute position of #login plus it's current width
Not answered: Auto positioning
My project supports users uploading their own icons to be used for various entities in the system. I'd like to support SVGs, as this means that the same image can be scaled nicely and thus used in multiple places.
Firefox has a current bug that prevents SVG files being used in <img> tags. It was my understanding from my other xhtml work that <object> tags were the (xhtml) way forward for external media (and essentially equivalent - enhanced fall-back functionality support aside), and as Firefox supports SVG in object tags, I switched over to using these.
However, it seems SVG's "features" prevent them being used interchangeably as scalable images as JavaScript events don't seem to bubble up out of the object, amongst a few other things.
Does anyone know if these issues can be resolved? I.e. how can I tell Firefox I just want the picture using the object tag?
The object element "encapsulates" the containing object, that is, the two DOMs are completely separated. Therefore events can't pass through from the SVG DOM to the containig HTML DOM.
However, using JavaScript and AJAX, you can just load the SVG file (since it's XML) and put it directly into the DOM (you might have to set some width/height somewhere):
Using jQuery, the code is something along this:
$.get('icon.svg', function (svg) {
$('#put_svg_here').append(svg.rootElement);
}, 'xml');
I'm not sure if this qualifies as cheating, but I've set the object tag to 'z-index: -1' and the containing div to 'position: relative' (to create a new positioning context without altering the page layout).
Into this, I've added another absolutely-positioned div with height and width set to 100%; this effectively sits above the object tag (and without going behind the container due to the positioning context), with the net result being that mouse events get captured by the overlay div and bubbled up to the container node.
The bonus div could be added by jQuery, but for simplicity's sake I've just stuck it in server-side when the page is composed.
Maybe you can use a DIV of the correct size and set background-image on it.
Edit: this does not seem to work, although I am not sure why.