I have a hexagon menu on this site which is correctly working in chrome but it has rendering issues in FF and IE.
http://wrausch.de.w013b68e.kasserver.com/
When you hover the hexagon menu in FF/IE you can see 2 blue lines which are not fully covered by the hovereffect.
Since I just got the site from a colleague who left I don't know where to begin.
Any help would be appreciated.
Thanks
Transformed elements - like the skewed elements you used to create the hexagons - end up in positions that are measured in fractions of a pixel, and so the browser has to make a judgment about how to display elements on a screen where mathematically perfect shapes need to be represented in a grid of blocky pixels.
Two transparent elements are next to each other and are slightly overlapping due to this rounding. Since the elements are slightly transparent, any overlapping would show up as a dark line.
Mathmatically, the elements are not touching, but due to the expression and simplifications of the browser, they are now slightly overlapping.
On Firefox the lines appear only when the transition is complete. This occurs because the rendering engine behaves differently during an animation than when it is complete.
To fix this I would try using fully opaque background colors when the user hovers. That way even dramatic overlapping would not cause a change in color.
Related
What is a good way of getting stacked progress bars to animate smoothly without flickering?
I'm currently using Bootstrap, changing the width styles (using Knockout).
Example: https://jsbin.com/lewuzewupo/2/edit?html,console,output
My problem is, if you watch that long enough, the green bar on the right flickers. This is seemingly because the animations cause it to get pushed to the right when the middle dark blue bar appears and disappears.
(I have tried everything I can think of to ensure that at no point in time do the total of the stacked bars exceed 100. If I stop using the progress-bar class and use my own that results in a similar look, but with no animation, then there is zero flickering and the bars are stable, always totalling 100.)
So is there a workaround for the problem in Bootstrap, or an alternative way of creating stacked progress bars that look as nice as the Bootstrap ones and animate smoothly?
[edit: added debugging to prove my percentages always total 100]
I think I've come across this kind of thing before - it's down to the 'complete' text. Basically it's not working out the widths quite right. 2 ideas.
Remove the 'complete' text and it should be ok.
Attempt to only display complete after a certain time and the values have dropped to a particular ratio.
Sorry can't be of more help.
Hoping someone can advise a good strategy for this.
I have a page I am trying to code that has five elements on it. The content of these elements will change as one uses the page ... sometimes consisting of text, sometimes images ... and importantly the height of the content will change (all built using JavaScript). The idea is that all of this will be visible on the screen at once.
The issue is that I want the elements to retain their positions on the screen (e.g., upper left, exact center, etc.) regardless of the size of the others. For example, the element in the middle may be a single line of text and may suddenly become a 300 px high image, may then become a 100 px high image. When that happens, I don't want the objects below it to move up or down.
(PS: this will only be used on a desktop computer)
Is there a way to HTML or CSS this to give these elements absolute positions (e.g., the one one in the middle: 50% from top, 50% from left, centered on the screen) regardless of the size of the others? I was previously just using line breaks and position things using line heights, but that causes elements lower on the screen to "move" down when the higher ones resize.
Any help or suggestions would be appreciated!
youc can use CSS for this, you should try with position property(relative/absolute)/ Check this out link and this link
Over the last two days I've been working on manipulating inline text that sits between <span> tags.
For something close to the effect I'm looking for, check this out:
http://jsfiddle.net/6uf96/5/
On JSFiddle, in the "Result" box, hover over the yellow "Activate Div". If you're on Chrome, the pink text rolls up as if it is a tape measure retracting, and the green text rolls out as if it is a tape measure being pulled out. That kind of sliding "appearing" and "disappearing" is the effect I'm going for.
To achieve this I'm using CSS transitions between letter spacing values (see "deletion" and "insertion" classes). The pink highlighted text transitions from normal spacing to highly negative spacing (to go from visible to invisible), and the green highlighted text transitions between highly negative spacing to normal spacing (to go from invisible to visible).
The issue is that this method really trips out the browsers. It works ok on Chrome (although it's quite jittery and there is sometimes trouble with the unhighlighted text). It doesn't seem to work on Safaari at all - the pink and green sections just disappear and appear respectively.
I've tried to achieve the effect using <div> tags with "overflow" and JQuery's .animate() (animating between high width and low width divs and hiding the overflow text that spills out of the low width div). This works really well until you have text that breaks the line - it doesn't work at all then, so this method seems to be out of the question (unless someone knows something that I don't).
So, the million dollar question: does anyone know of a plugin or another technique to do this kind of inline text manipulation, even across line breaks?
To get it working in Safari you need to use the prefixed version of transtions. Which means you need to add -webkit-transition to the regular transition.
I updated your jsFiddle accordingly: http://jsfiddle.net/6uf96/7/
I've came across wunderlist.com site and just fell in love with the zoom-like pop-up they have on the image just beneath the header "Learn more about Wunderlist".
I'd love to implement something like this on my site.
Can somebody tell me how this is done? I tried to reverse-engineer, but with no luck :)
I'm not hoping for the whole ready code, but maybe some guidelines on how to achieve this with CSS/jQuery.
Or maybe you know some jQuery plugin that I could use?
They are using all CSS. Pretty simple really.. I would code a full js fiddle example for you but I don't have the time, so instead I will list out the different elements you need and how they interact.
First the large image is just a div with a background image with set
dimensions.
The circular images themselves are generated from one large image containing all of the circles in one spot, this is called a sprite. The circles are just div's with background images and background positioning to position the correct circle inside the box from the sprite image.
The text boxes themselves are also div's with a standard H2 and P tags for the text.
Everything is absolute positioned in order to achieve the proper layout.
The small circles are div's with :hover states that are absolute positioned over their respective targeted areas.
The animation on :hover is achieved by the use of css3 transition and css3 transforms.
This should get you started.
Comment if you have questions.
Had some time to have some fun: http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/fun-experiment-mh/
Try looking at two main aspects:
Open up your inspector tool of choice and look at what happens to body.login .feature
...more specifically, look at what happens to its transform: scale and opacity values upon :hover.
Hint: the transition is mainly on them.
Still in your inspector, change the scale to (1) and the opacity to 1. How it smoothly gets from one state to the other is dictated by the transition property.
This isn't meant to tell you exactly how to achieve it, but to get you on your way :)
It's not that hard actually. The Wunderlist team has even made it easier. They have a large sprite image with the zoomed images cropped and ready with rounded corners, borders and shadows. You can see it here: https://wunderlist2.s3.amazonaws.com/179510ff7c929bfcc6e9819f3c2539baca5d3325/images/welcome-screen.png
What you do is on mouseover you show a half transparent black background (can be position: fixed with full width and height). Then you create a element with the sprite as the background image (even better, have a class ready in your css and append it to your newly created element). Set position to the position of the hovered element.
When added to the dom animate the transform scale of the element (starting with something like scale(.24) as they do).
Well since you tried reverse engineering. I'll try and guide you along that path.
There is only one div with id overlay which is changes it's place & content, on hover of any div with class feature. Work your way further from their app js, it's not minified.
The content of the popup in this case is an image moved to different positions.
Is there a way to create the effect shown here on msi.com main image? Though done in flash, I'd prefer doing it with jquery. I've also tried with 'mosaic generators', but haven't been able to replicate the effect well, but use of a generator with js would be acceptable too.
[edit] I failed to mention, I'm only interested in emulated the tiled/mosaic aspect of the effect, not animation. I'd like a large image (e.g. 400px by 300px) separated by whitespace (or color customizable borders) into 9 equally sized blocks or tiles each.
While I would like to apply a individual hover effect to each image, giving each the effect they are separate entities, I don't necessarily need any further animation.
Rounded corners aren't important or wanted.
[/edit]
It would be pretty interesting to do it with jquery. You'd have a table of images, each with a hover event that toggled an animation when mousing on and off. The logic isn't too hard; getting the images and the animation to look nice would be a little harder, but not undoable. It depends on how closely you want to replicate the effect. :D
edit: you just want a mosaic of images? you can just use a table to position all of the images, and use js for the events. What else do you want or need js for? :D
Here's an idea. Load a large image into a DIV. Decide on the size of your windows and create a PNG with transparency where you'd like the windows to be. (Opaque at the borders with thickness to control how wide you'd like the whitespace.) To create the effect, use three layers. The image at the bottom layer (which you can swap out as needed). The middle and top layer will be repeated along the x and y axises and controlled individually by jQuery. The middle layer will have the PNG with transparency and on top of that, the top layer with just a solid color (matching your page's background to "seem" invisible?). To create any "pretty" effects, you can adjust the opacity or animate the top layer of the separate boxes to show/hide the image on the bottom layer which will be visible through the middle layer's transparent area in the PNG.
Hope my explanation was clear. With some smart coding, this can be packaged and reused anywhere you'd like.