isotope makes weird transform in element styles which destroys layout, why? - javascript

I want to have different divs with background images aligning next to each other without distances like this:
https://jsfiddle.net/71qpceqb/
I use bootstrap row and col to achieve this.
In the fiddle this somehow works like a charm, with my actually copied css-code!
Here you can see my current project (htaccess temporarely removed)
http://remake.stdesign.eu/projekte/
This makes weird jumps (wrong number of divs in one line at wrong Screenwidth) and has alot of distances between the divs when resizing and I can´t figure out where this comes from. I thought setting this up on fiddle would help me to figure out whats wrong... but fiddle works perfectly with my css!
I guess I miss something very simple.
(for the filter stuff I use isotope.js, but I don´t feel like this is important.)
EDIT: After some trying I came to this: https://jsfiddle.net/71qpceqb/1/ making col-400-12 to adept in all widths and adding it into the isotope masonary. I also updatet the fiddle code with my relevant JS. The resault is: fiddle works, original side doesn´t. The only difference I can find is on the original side when I observe the element there is an elementstyle transform: translate3d(278px, 250px, 0px); which I don´t have in jsFiddle.
I can´t figure out why I have this transform and how to remove/prevent it. If anybody could look into it would be very appreciated!

Alright after many hours spent on this, it seems to work now.
Reason why this occured for me and worked in fiddle:
I used 2.5 and fiddle was the 3.0 version. Never thought about this could be the reason!
Anyway, newest version works fine!

Related

CSS Transition is not triggering after insertBefore

I am trying to create an horizontal carousel that loops.
You can check the code here: https://codepen.io/nobitta/pen/xNOyrj
At the moment I am stuck. I managed to make it work, however the CSS transition that mimics the movement to the right, is not triggering when you click "next".
I already did some research and some say this has to do with browsers optimization and that setting a timeout or calling offsetWidth or getBoundingRect() should do the trick, as it forces the browser to re-render. However, even with those tips, I was not able to make it work...
Am I doing something wrong or missing something here? What should I do?
Thanks in advance ~
I managed to fix it by playing around with the margin-left property.
My bet is that when I prepended the last slider's item, it naturally shifted right due to the new element's size and the space it occupies. Therefore I decided to shift it back to mask the insertion shift. I followed the same reasoning for the appended items.
You can check the codepen in the question for more detail.
I hope this helps someone.

CSS Valid But Not Applying Dynamically

DISCLAIMER: I have searched this topic to no avail, this seems to be a Chrome only issue.
Safari for OSX and Firefox OSX work fine.
So I have some styles for an element which do not dynamically apply, i.e. on page load it works fine but as i use the page, it doesn't.
Here's a pen to demonstrate:
http://codepen.io/craig-wayne01/pen/xcIid
and the selector thats giving me the problem is this one
label.pagination:first-of-type,
label.pagination:last-of-type,
input.pagination[type=radio]:checked+label.pagination,
input.pagination[type=radio]:checked+label.pagination+input[type=radio].pagination+label.pagination
So basically this is an example of a pagination footer area
and what im trying to achieve is simply changing the colour of the next number
so if i click on #4, #5 needs to change colour as well
which doesn't work.
Then pen is quite self explanatory. Additionally I can't fathom why this doesn't work. Any help would be greatly appreciated
The only thing i can think of is that css does not work backwards, but i've used similar selectors in the past and i've had no issue.
From my experience attempting something similar for a CSS only mobile menu, checking or focusing elements doesn't force a redraw for sibling elements. I had this trouble on the iPad.

hoverstate on diagonal jquery grid

I'm trying to create this grid:
I've made some html generated with jQuery and rotated that with jQuery.rotate. Now my div's are overlapping each other causing a problem to my hover state.
Couldn't find any question that looks like this, has anybody done something like this before?
If you need to look into the code I can post the html / css and javascript. Because it's quite a lot of code I'll do that by request.
well stacking too many dives on top of each other isnt that good idea as i think..
why don't you try using svg instead .. those are made for such a situation ..
but if you still want to be using divs then please show us the code for your project .. :)
Why don't you use css transform-rotate for each block with absolute positioning and then you can use jQuery to set top and left properties of all onto your grid. I've found something similar on http://neolab.no/ Here, they also used media-queries to re-positionate each block.

Can someone help fix the non-scrolling scroll bar?

I am trying to use the slimScroll scrollbar plugin, but I had to modify it. I am trying to make it so that you pass the plugin the div that needs scrolling and using the same space as that (in the parent) the scrollbar appears. I have gotten it to add the scrollbar where i want in the dom, but it isnt scrolling. I dont know why. Can anyone help?
Code is here for you to play with/correct.
http://jsfiddle.net/rgmrw/5/
Thanks!
EDIT: The solution should also not add any divs/wrap existing ones. (Doing so messes up other existing javascript code)
Yes, I fixed it;
I actually didn't do anything, I was messing around in code but couldn't get it to work properly, so i copy pasted the code again from the original plugin at http://rocha.la/jQuery-slimScroll and it worked out of the box :)
http://jsfiddle.net/rgmrw/9/
The answer is that you cannot $(el).scrollTop() an element that isnt cutting off its children elements, even if a parent is.
Basic Concept Demo: http://jsfiddle.net/DY9CT/
Plugin Demo: http://jsfiddle.net/rgmrw/11/

What is causing this simple animation script to animate improperly?

I cannot seem to figure out what is making this script go wrong...
You can find a properly animated version of the script here...
http://jsfiddle.net/tTJaM/21/
You may find the live project version here...
http://jsfiddle.net/tTJaM/22/
The live project is located at http://paysonfirstassembly.com/
As you can see, the animation does not have the same visual effect in the second link. The visual effect I wish to achieve is the one in the first link. I am willing to edit the script to do this, or make changes to the CSS that I did not make initially.
min-height:120px; in .dynPanelContent in your css doesn't let it work properly. But I don't really understand why... If you remove it, everything works at least here http://jsfiddle.net/tTJaM/22/
It looks like the min-height:120px; attribute of .dynPanelContent is what's causing it. If you remove that style, it does the rotation properly, but the boxes are no longer properly sized.
The slideUp function is an animation that modifies height, but not min-height. This is a known issue in jQuery and there's a wiki entry on Getting Around The Minimum Height Glitch

Categories