I have over 50 simple text messages in a database and I extract them (using PHP) and place them randomly on a page using absolute positioning. Unfortunately some of these messages overlap each other, that I wish to prevent.
Can I use MooTools to find the position of each of these elements and their dimensions so that the new element to be placed on the page won't overlap any of the previous ones?
Using MooTools 1.3 with all core functions.
Have a look at Element.getCoordinates() to get the coordinates and dimensions of your elements.
In your markup you could have a class i.e. message on each message element for the purpose of selection, and a class hidden that sets CSS visibility: hidden on all the messages.
On domready you would then do some simple boundary detection to detect overlapping messages and once you've avoided overlapping you can remove the hidden classes to draw the messages on the page.
I'm unable to comment on this question, probably because I asked it as a "guest" and now I am registered.
My HTML/CSS is extremely simple. http://jsfiddle.net/bDDLt/
PHP does the calculations for the positions and styles and places these variables into the element styles. The values in the jsfiddle are examples (since it doesn't accept PHP)
Related
How do I avoid flashing the un-enhanced DOM-element before my javascript has converted it into another type of element?
To be case specific: I have a select with multiple choices, which is converted via a jquery-plugin to a multi-choice-drop-down. But on page load it renders as the multiselect before the plugin runs.
Right now I'm just hiding the select until it's converted, but that leaves an empty space where the dropdown will show up.
Is there any good way avoid this kind of flickering?
Without Javascript:
So this is the situation, the things I've seen about progressive enhancement so far is just to add some CSS to the flickering dom elements, but since this is rather a transformation I'd like to render something in the place where it's supposed to be.
With Javascript:
I hope it's clear what I'm trying to achieve here, any good solutions? Should I render a normal drop-down on the place as a placeholder and then replace it when the DOM is ready? How do I handle the no-js case in that case? The site needs to be available to everyone.
If you adjust your layout to make the multi-select sit below the label like everything else and then clone the select, rebuild it in memory and then swap it in as #elad.chen suggests (possibly via an embedded script after the element or the whole form), you should reduce the jarring flicker. You could also use transitions to smoothly swap the two: shrink the height of the multi-select then swap or fade out and fade in using opacity.
I wonder how to achieve this effect on http://www.squarespace.com. What I mean is:
you scroll down and at one point the image of computer monitor stays at fixed position
after that, the images keep changing while you scroll.
How can you control content and change CSS using Javascript? It should be on window scroll event:
window.onscroll = function () {
// but I don't know what to use here
}
At smaller browser width, the above elements become a carousel, but I am not interested in that.
Because of the tags on this post I'm going to assume that this question is regarding the skrollr library
Skrollr is controlled via HTML data attributes. What you're seeing when the monitor scrolls, and then becomes fixed at a given position, is referred to as "pinning". How you define data attributes in Skrollr can be pretty confusing at first, but once that is understood, the library is kind of a dream to work with.
I printed and pinned Petr Tichy's cheat sheet next to my monitor the first few weeks of my first skrollr project.
An example of pinning in Skroller would be accomplished as such:
<div id="example"
data-100-top="position:fixed;"
data-anchor-target="#example">
These words are pinned 100px from the top of the screen
</div>
The purpose of Skrollr is that knowledge of jQuery/JavaScript isn't really required. The css is manipulated by the library, and defied in the data elements. The above example shows changing the position to fixed, but if you wanted the div to expand 100px from the top you could input width/height css parameters in there, or just about any other css you'd like.
If you're looking for a more robust skrolling library, in which jQuery knowledge is more of a requirement, I recommend you take a look at ScrollMagic (my lack of reputation prevents me from linking to scrollmagic).
I'm writing my first jQuery plugin and part of the functionality involves dynamically generating a "frame div" around each image on a page. The frame has to fit "snug" around the image, as it serves as the relative parent of an absolutely positioned overlay image that is dynamically added.
I want this to be unobtrusive obviously. What can I do to minimize the side effects it will have on a user's own CSS? I guess there are certain problem situations that will be unavoidable, right? I'm thinking for ex. if the user CSS has targeted images with..
div.gallery > img
..child selectors to give them border/margin/etc, as one example.
Is it impossible to dynamically generate a parent div of an element in a way that is "safe" on unknown pages? Will there always be a risk of breaking the user CSS?
I suppose I can always just give a warning in the documentation, but I would love to make it idiot-proof if possible.
It just occurred to me that I could use JQ to read any CSS on the contained IMG .. and then transfer any properties "up" to the new parent div. Is this crazy?
In theory you could copy all styles. This answer even shows a plugin to get all computed styles cross-browser. But that would be an overkill, wouldn't it? If you really want to have that, add it as an option (that defaults to false, preferably). Then let the users fix it by styling the class you provide, as Blender suggested in the comments.
You could use the selector .css, or .height or .width to get any dimension properties of the image, and then generate the div based on that.
For example,
thisWidth = $('theImage').width();
thisHeight = $('theImage').height();
$('yourFrame').css({'height':thisHeight,'width':thisWidth});
Hope this is of some help...
I have a question on a big # of dom elmenets and performance.
Let's say I have 6000 dom elements on a page and the number of the elements can be increased as a user interact with the page (user scrolls to create a new dom element) like twitter.
To improve the performance of the page, I can think of only two things.
set display to none to invisible items to avoid reflow
remove invisible items from the dom then re-add them as needed.
Are they any other ways of improving a page with a lot of dom elements?
We had to deal with a similar problem on FoldingText. As the document grew larger, more line elements and associated span elements were created. The browser engine just seemed to choke, and so a better solution needed to be found.
Here's what we did, may or may not be useful for your purposes:
Visualize the entire page as a long document, and the browser viewport as the lens for a specific part of the long document. You really only have to show the part within the lens.
So the first part is to calculate the visible view port. (This depends on how your elements are placed, absolute / fixed / default)
var top = document.scrollTop;
var width = window.innerWidth;
var height = window.innerHeight;
Some more resources to find a more cross-browser based viewport:
How to get the browser viewport dimensions?
Cross-browser method for detecting the scrollTop of the browser window
Second, you need a data structure to know which elements are visible in that area
We already had a balanced binary search tree in place for text editing, so we extended it to manage line heights too, so this part for us was relatively easy. I don't think you'll need a complex data structure for managing your element heights; a simple array or object might do fine. Just make sure you can query heights and dimensions easily on it. Now, how would you get the height data for all your elements. A very simple (but computationally expensive for large amounts of elements!)
var boundingRect = element.getBoundingClientRect()
I'm talking in terms of pure javascript, but if you're using jQuery $.offset, $.position, and methods listed here would be quite helpful.
Again, using a data structure is important only as a cache, but if you want, you could do it on the fly (though as I've stated these operations are expensive). Also, beware of changing css styles and calling these methods. These functions force redraw, so you'll see a performance issue.
Lastly, just replace the elements offscreen with a single, say <div> element with calculated height
Now, you have heights for all the elements stored in your Data structure, query all the elements that lie before the visible viewport.
Create a <div> with css height set (in pixels) to the sum of the element heights
Mark it with a class name so that you know its a filler div
Remove all the elements from the dom that this div covers
insert this newly created div instead
Repeat for elements that lie after the visible viewport.
Look for scroll and resize events. On each scroll, you will need to go back to your data structure, remove the filler divs, create elements that were previously removed from screen, and accordingly add new filler divs.
:) It's a long, complex method, but for large documents it increased our performance by a large margin.
tl;dr
I'm not sure I explained it properly, but the gist of this method is:
Know the vertical dimensions of your elements
Know the scrolled view port
Represent all off-screen elements with a single div (height equal to the sum of all element heights it covers for)
You will need two divs in total at any given time, one for elements above the visible viewport, one for elements below.
Keep track of the view port by listening for scroll and resize events. Recreate the divs and visible elements accordingly
No experience myself with this, but there are some great tips here: http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5
I had a look at Facebook and they don't seem to do anything in particular on Firefox. As you scroll down, the DOM elements at the top of the page don't change. Firefox's memory usage climbs to about 500 meg before Facebook doesn't allow you to scroll further.
Twitter appears to be the same as Facebook.
Google Maps is a different story - map tiles out of view are removed from the DOM (although not immediately).
It's 2019. The question is really old, but I think it is still relevant and interesting and maybe something changed as of today, as we all now also tend to use React JS.
I noticed that Facebook's timeline seems to use clusters of content which is hidden with display: none !important as soon as the cluster goes out of view, so all the previously rendered elements of the DOM are kept in the DOM, it's just that those out of view are hidden with display: none !important.
Also, the overall height of the hidden cluster is set to the parent div of the hidden cluster.
Here are some screenshots I've made:
As of 2019, what do you think about this approach? Also, for those who use React, how could it be implemented in React? It would be great to receive your opinions and thoughts regarding this tricky topic.
Thank you for the attention!
I have a design that has several divs at varying widths/heights and I need them to float essentially to the top left. A simple css float:left will not work because it does not take advantage of the vertical space once it drops to a new line.
I assume I will need to use jQuery to dynamically position each div but I was hoping someone could lead me in the right direction.
This is what a standard float left would do:
standard float http://www.media1designs.com/poc/superfloat/diagram_float_left.gif
This is what I need it to do:
what I need http://www.media1designs.com/poc/superfloat/diagram.gif
The sizes of the divs will change as the website's content updates so manually entering the positions is not an option.
Have you tried the masonry plugin?
You need to have an algorithm for determining where to place the next element given a set of existing elements and a bounding box (the container width & height). I'd start with plain english and just writing it down with pen and paper first - it's easier than code.
Once you have that, you'll use the jQuery width and height functions to get the sizes of the elements to position and I believe you'll want the css function for setting the top/left. The position of the elements should be "absolute" and the position of the containing element should be "relative". See all jQuery API methods.
Assuming you've written your layout algorithm as the function calculateOffset(element, container) returning an offset literal (e.g. {left: x, top: y}) and that you have a jQuery element list elements and a jQuery-wrapped container, you can do something like this to position everything:
elements.each(function() {
$(this).css(calculateOffset($(this), container));
});
The hard part, of course, is writing calculateOffset. For that I recommend starting with something simple, like finding the highest possible (lowest top) place to put an element, favoring the left side (lowest left), then going from there.
I don't think I've ever heard of or seen a layout engine that would display things in that fashion. Most likely, you'll just have to write it yourself.
You'll need to create an API (at least in the way you think of things). Most likely, you'll end up with a Block (each div to be laid out) and a Container (the area holding the divs). Apply the appropriate methods, properties, and events to each of them, and you'll probably get there rather quickly.