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.
Related
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');
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/
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
I have a script that lets you put a link at the bottom of some text so you can reveal more text. It works great in Firefox. When you click the link, the div appears and the other parent divs expand with the growing child div. But the parent divs don't expand in IE. The text actually disappears behind the row (this is in a table created with divs) below. I want it to push the next row down so that the rest of the text appears.
Also, my images seem larger in IE than they are in Firefox. Can I scale the images a little bit with a conditional statement? If so, how?
Have you considered using something like the JQuery Accordion? It's a quick way to accomplish something like you're going for, if I understand correctly.
you have more than one problem, anyway images with fixed sizes should render the same across browsers. For the first problem with the link you should post some code. I suggest you to check if your script throws some errors in IE using the IE developer toolbar (bundled with IE8 or downlodable here from Microsoft)
In a sort of follow up to this question, I have another problem in IE8.
When clicking the gallery and the lightbox appears, the images are overflowing their containing element (by the looks of things).
(source: alexanderdickson.com)
Has anyone ever experienced this before? Of course, the good guys (Firefox/Safari/etc) display it perfectly.
How do I fix this?
Thanks
UPDATE
Should I just got with a new Lightbox?
I ended up using prettyPhoto. Not only does it work, but it provides a much better API. I could skip all my hidden link building and triggering, I passed the array of filepaths straight in and it worked great cross browser.
If it's always just a tiny bit around the borders, it'd be a quick and dirty fix to just add overflow: hidden to the fancybox container.
Set the DOCTYPE, for example xHTML1.1 Transitional for the document and the problem will be solved. Or enable X-Compability mode.