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.
Related
I have a text div and several buttons that I would like the text to smoothly fade in and out when changing and/or hiding.
From checking Google and Stack Overflow, most of the answers suggest applying a CSS class of hide, then toggling that class while using a custom function to wait half a second before changing the text so the timing is perfect when the other text fades back in.
But I've read that can have problems with text that has span tags which mine have, and several people have also suggested there may be some plug-ins to simplify the process.
I can't find one, but is there a better method or a plug-in to handle this without replacing all of my code that updates text with custom functions?
I don't mind doing that if it's the only way, it just seems like there's likely a better/more intuitive option?
About your statement:
I have a text div and several buttons that I would like the text to
smoothly fade in and out when changing and/or hiding.
Fade in / And Fade out can be achieved via CSS itself, or with Javascript or if you are using a JQuery library with that also. And text within buttons will not create any issues at all.
In Pure CSS you may require only two properties:
transition and opacity to be used in proper way.
This link can be helpful from CSStricks https://css-tricks.com/almanac/properties/t/transition/
In JQuery there you have fadeIn() and fadeOut() functions which takes care of all the CSS internally and you only have to call these.
You may check this resource from W3Schools
https://www.w3schools.com/jquery/eff_fadein.asp
And Lastly even in pure Javascript the same can be achieved, depending on the requirement you have.
I'm taking a look to this website http://planetshine.net/demo/regolith-wp/ trying to understand how the horizontal layout is obtained.
I'm just trying to disable the javascript libraries one by one (I want to identify those essential fot the layout and those less important). And beginning to disable only the "buttons.js" library the layout already changes (for example, the vertical scroll bar appears). I would understand why this script "buttons.js" is so influential for the layout.
Some CSS styles may be added by javascript after a page is loaded. This often occurs in plugins: sliders, custom scrollbars etc. You need to inspect places, where this happens and find out, which classes or html elements disappear. Then you can recreate them manually and the whole page will work as expected.
i am currently using angular 1.2 rc3, i used transition for my ng-repeat items.
however, i found that whenever i change my model for the ng-repeat, the transition goes haywired. You'll see the whole list of items pop down and then disappear. What i wanted to have is just a simple fade out the whole list, and fade in the new items list. How can I achieve that effect?
Here's the plunker to reproduce that: http://plnkr.co/edit/lnsxCySFGmUmAnYDqVm3?p=preview
Just add a few lines, and then change model, you'll see that weird behaviour.
Thanks.
The problem appears to be that when you are switching the list content the new elements are immediately inserted at the top and occupy some space although they are not visible yet. An improvement might be to animate the height as well see this modification of your plunker for an example.
Another solution would be to delay the enter animation when you are switching the list contents completely. First the present elements disappear and then the new ones appear. However, you will probably need an extra class attached to the whole list to make this distinction in your CSS. And you will have to manually handle the addition and removal of the class before and after your switch animation since ng-repeat does not distinguish your switch operation and the addition or removal of single elements.
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 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)