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
Related
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!
Hey lovely StackOverflow Community.
I have a problem with my website. I added the Bootstrap Carousel from getbootrap.com and it actually works very well. But there is one problem. Everytime the image sitch, my whole website goes up and down.
I don't know what could be the problem, cause i changed nothing on the code from getbootstrap.com :-/
Sorry for my bad english :D Hope you can understand my problem.
Overwrite the Bootstrap class. This will solve your problem
.carousel-inner>.item {
width: 100%;
}
My issue with the Carousel was not directly related to the image, but rather the content within it that was causing the shifting of the page. To avoid it while being elsewhere on the page, I just used JQuery to detect if I had scrolled past my carousel and to make it pause. I know its a workaround but its effective.
$(document).on("scroll",function(){
if($(document).scrollTop()>200){
$('#slider').carousel('pause');
} else{
$('#slider').carousel('cycle');
}});
It is because it changes some class on the carousel items.
You can set a min-height to the carousel container (.carousel-inner) and it won't jump anymore.
Set the value that fits better your needs.
ALSO:
Seam like there is a little effect on the images, so that every time that an image change, it became a bit smaller. If you just want to avoid the all website jump, use what i said above, if you want to change the "change-of-size" behave, you need to check the class .next and (probably) .right/.left and see if there's a change of height. It is hard to inspect them from a live website, that why i'm telling you to check this from the code - Or upload the code if you prefer.
This is a very, very peculiar case. The title before getting a solution was "Extreme force redraw element on jQuery". All the rest below is unmodified.
Using Squarespace (has many YUI elements), I set the footer as display: none on Custom CSS. The footer has a gallery block (lots of scripts there).
Then I move the footer into another page element using prepend. All together is something on those lines:
$yo = $('#yo');
$yo.parent().remove();
$('#here').prepend($yo);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer style="display: none">
delme
<div id="yo">oi</div>
</footer>
<div id="here">
move here
</div>
That, of course, works with no problem here. But in my use case, it doesn't. If I remove the Custom CSS, it kind of works. There's still a bug in which it doesn't properly resize, and keeps the same size as the first parent, not the second as it should. So, the gallery is still not properly redraw! In fact, it's also not the CSS display's fault.
The remove there is not the problem and makes no difference to be removed. I left it there just to give a glimpse of all the noise I'm trying to handle.
Even more, if I add this to the onLoad script:
$('footer').hide()
It works the same as expected. In fact, the later I leave to hide it, the better it will work, but never as perfect as it should. If I hide it on DOMready it will be half broken. And if I hide it on CSS, as I said earlier, it won't even show up ever. That is...
In all cases simply opening up the Console Window or manually resizing the window with the mouse, the gallery will show up exactly as it should, all fixed up properly, no issues whatsoever!
So, I supposed trying to force a redraw should make things work. Well, it doesn't. offsetHeight doesn't work and fiddling with css also do nothing. Of course I also tried trigger('resize') but no luck there! :( Tried for hours, nothing seem to work, even in the console!
I'll keep the bug here for a while. Right now, it shows the problem with hiding it at $(document).ready:
http://www.cregox.com/bugs/bannerify/
Is there a way to "simply" force that redraw so I won't have to keep digging up what in the bleep squarespace is doing with the CSS that does all this mess? I actually bet sqsp does a good job there, but at least in my head it is a big mess.
It seems I was right: Squarespaces' gallery component needs a heads-up that you have moved it into new quarters.
After your call to $('#here').prepend($yo), add this line:
Y.one( $yo.get(0) ).simulate('resize');
If manual resizing works then you can just try:
$(window).trigger('resize');
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.
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/