Having gotten my site pretty much the way I want it, I then decided to add another aspect, which poses something of a problem … I want to have my left-hand-side vertical menu and my header ‘stick’ and the image gallery and other elements scroll. To wit … I’m trying Walter’s Sticker action.
I am though, having trouble getting it to work. Perhaps I’m not understanding how to. I’ve read what I can find on here, but I’m still failing.
Here’s a test site (with the gallery blank which makes it easier to see what’s going on). Try scrolling the page to see the problem.
If you click the ‘Test’ link at the bottom of the css menu, you can see how the site is currently functioning and will get a better idea of how I want it to work.
on mobile it gives a juicebox error: xml file not found
Op 19 nov. 2014 15:20 schreef “grantsymon” email@hidden:
Having gotten my site pretty much the way I want it, I then decided to add
another aspect, which poses something of a problem … I want to have my
left-hand-side vertical menu and my header ‘stick’ and the image gallery
and other elements scroll. To wit … I’m trying Walter’s Sticker action.
I am though, having trouble getting it to work. Perhaps I’m not
understanding how to. I’ve read what I can find on here, but I’m still
failing.
Here’s a test site (with the gallery blank which makes it easier to see
what’s going on). Try scrolling the page to see the problem.
If you click the ‘Test’ link at the bottom of the css menu, you can see
how the site is currently functioning and will get a better idea of how I
want it to work.
Sticker doesn’t work well with items that don’t have a defined width in pixels. Your menu item is set to undefined width, so it expands to fill the page when the scroll happens. It’s also losing its background because that property is not set on the box itself, and this Action has not been updated for the new world order of Actions that manipulate object styles.
I’d try using a position:fixed in the Inspector first, and see how that works.
Walter
On Nov 19, 2014, at 9:20 AM, grantsymon email@hidden wrote:
Having gotten my site pretty much the way I want it, I then decided to add another aspect, which poses something of a problem … I want to have my left-hand-side vertical menu and my header ‘stick’ and the image gallery and other elements scroll. To wit … I’m trying Walter’s Sticker action.
I am though, having trouble getting it to work. Perhaps I’m not understanding how to. I’ve read what I can find on here, but I’m still failing.
Here’s a test site (with the gallery blank which makes it easier to see what’s going on). Try scrolling the page to see the problem.
If you click the ‘Test’ link at the bottom of the css menu, you can see how the site is currently functioning and will get a better idea of how I want it to work.
So, I found some old threads and picked up some tips (thanks Walter) and managed to get something working, that is pretty much what I’m after and wasn’t really very hard to do at all.
However …
For some reason the fixed header’s text has gone faint/jaggy. Does anyone know why this might be and how to fix it?
(These are just rough test sites)
Here is my test page with the fixed top header and fixed css menus to the left :
It’s probably because something in this page (possibly Prototype as it manipulates the position of these elements) is switching text rendering contexts on your browser, and your text is changing from 2D to 3D rendering, which always messes with the apparent weight. One of the quickest ways around this is to set the opacity of the element to 0.999998 or similar. This forces the rendering to stay in one place.
Walter
On Nov 20, 2014, at 5:12 PM, grantsymon email@hidden wrote:
I’m getting good at answering my own questions.
It’s because I am using a google css font and they don’t work in the fixed items. Right?
Is there a way to use google fonts in a non-css item?
I can’t see how to make an element that opacity/transparency.
However, I’ve made a new empty file and tested various ways of doing this and it seems like a bug to me. The only thing I’ve added, is the Google font.
As you will see, only the 3rd version displays the font correctly.
NB, the whacky effect … scroll the page so that the image is partly above the top bar, then resize narrow the window. The picture jumps in front of the top text bar. I shall ask support what they think.
But I think some Browsers will assume it is there.
But specifically which of the header texts are you noticing it worst with - I do see that some of the text is gif text which comes with its own problems.
I must have messed the closing bracket whilst trying different things, but it was there for most of the time.
Perhaps I’m misunderstanding what happens when an element is ‘fixed in window’, but doing nothing but changing that setting, in the Inspector palette, alters the behaviour of the text.
This test gallery has nothing on it but what you see in this screen-grab movie. As you will also see, changing the setting to ‘fixed in window’ for the container for the top elements, alters the behaviour of the text.
I have no idea where the gif text is coming from. Is this producing it?
A bit of Googling shows that this has been around for a long time and is a webkit bug. So I guess it’s affecting everyone here?
I don’t know if this is the same issue as those that I’ve seen (a few on Stackoverflow) but this screen-recording shows that it is a width percentage problem too.
The problem is using fixed instead of absolute. From there, Safari appears to display 2 problems.
Bold substitute for normal width.
font not antialiasing correctly.
It appears that Chrome has suffered the same issues in the past, but they’ve been fixed.
Yes I did and I tried other variations on the same theme that I found in various places, but they made no difference. It’s highly possible that I’m putting it in the wrong place though.
