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');
Related
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.
I am using jquery slimscroll plugin and I have a problem because it is shown even when there is no need, and after I move mouse, or tap on the page it hides (this happen when I navigate to the page where I use it). Is there any work around for this - I tried changing the plugin code, but the problem is it using page dimensions to determine visibility.
I have had the same issue and it's hard to believe what I found as a solution. Ready? Just remove the border on the container where you have applied the slimscroll. That fixed it.
I haven't found it necessary to look into the code but I am sure there's an easy fix for this.
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 have a wordpress theme that i'm building but i've hit a snag with some code and can't seem to get my div to expand correctly. I've tried clearing the floats at different positions, i've tried overflow: hidden, but nothing seems to work.
What i'm trying to do is have the content slide in from either side based on what header you click. The content is based on a wordpress post for each link. So the client can easilly edit it to any size.
Because of this it isn't viable to use pixels in the sizing of it. And i know that absolute positioning means that pixels are very nearly the only option.
I've messed with everything i can think of in firebug and just cannot get it to expand.
You'll find the site here: http://tinyurl.com/okd5wnf
However i couldn't get this to work either. Maybe that'll give you a clue as to what might be wrong.
I know it's a long winded post, and i apologise. If i have time later, i should be able to make a jsfiddle. However time is short at the moment.
Any help would be appreciated. Thank you very much.
Your problems stems from setting the <div class="box"></div>'s position property to absolute. Give the parent element(<div id="body-wrapper"></div>) overflow-x:hidden; to hide children that are not being displayed, and then use negative margins to position child elements within the viewport (the parent element). This is basically how most sliders work.
Remove position absolute from box class. please also mention what desired layout you need for content. we will suggest you classes for that.
Romove position:absolute from div.box
I guess that's all.
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