Jump to content


  • Content Count

  • Joined

  • Last visited

Everything posted by Lucy

  1. So, I have a div containing a h1 which has a ::before and ::after pseudoelement. These are basically displaying lines at either side as a decorative feature. The h1 element is set to display as an inline-block, text aligned in the centre, with a maximum width set, so it overflows onto the next line if needed. This is where the problem occurs. Because there is an empty space at the end of a line, the boundary is wider than the text you're actually seeing, and so the space inbetween the h1 text and the decorative lines is much greater when the text breaks onto a new line. I noticed this doesn't happen with inline elements, but that isn't an option as I need the max-width. Can anyone suggest a solution? Edit - I don't think it's actually the spaces in the text anymore, there is too much for that. :/
  2. I know, I know... but still, 10% isn't a tiny number. I'm trying to get freelance work in web development, and want to be prepared for any clients who ask me to support earlier versions of IE. Life would be so very much easier if it didn't seem necessary... I have a few files with a function added to the onload event. The first file detects certain elements that only show up on mobile screen sizes and assigns them to variables/uses them, etc. The other files, which load afterwards, were to use some of these to avoid repeatedly assigning variables... but in IE8, the first files' onload function doesn't actually fire until after that of the other files. It's not that important, I suppose, it just seems a bit messy having to do it this way.
  3. I'm using several Javascript files with (for IE8 and below) window.attachEvent("onload", function). In Firefox, using addEventListener, everything loads as I'd expect. The load function for each file happens in the same order as the files are listed. However, in IE8 the order is wrong. The files are definitely loading in the correct order, but the onload functions don't. Which is a slight problem, as there are a couple of things that depend on the other files. Does anyone have any experience with this?
  4. I'm trying to pick out links with the parent '<p>' - my code isn't picking them up. Here's what I have: if (document.body.getElementsByTagName("a")[ook].parentNode === "p") I've also tried if (document.body.getElementsByTagName("a")[ook].parentNode === "<p>") Does anyone know how you're supposed to do this?
  5. Oh, I get those all the time through my porfolio website. They do seem to come with attached documents but I've never opened them. Personally, I just delete the email and forget about it. I don't think they're particularly directed at the recipient, it's just random spam, as far as I can tell.
  6. From what I've read, it was 'filter' in IE7 and changed to '-ms-filter' in IE8. Though, that said, my version of IE8 (on two computers, in fact) seems to work fine with just 'filter' :/ I wonder if there's any point in trying to put '-ms-filter' in...
  7. I'm using it for opacity, yes (to support IE8).
  8. Does anyone know how you're supposed to write '-ms-filter' in Javascript in order to use it (like element.style.-ms-filter)? I've tried 'msFilter', and variations thereof. I've also tried writing it as a string, but that causes errors. Any ideas?
  9. I have a portfolio set up that is basically a grid of images, where if you hover over them they are covered by a semi-transparent black box with text - a title, and short description. I recently realised that IE8 doesn't support media queries, so it seems I have to set permanant font sizes that don't look awful on differently sized screens. The problem is, I can't find a happy medium with the font size for this 'overlay'. At a reasonable size, it is far too large if the browser is resized down to about 1050px wide. Making it fit into these boxes would take a tiny, tiny font size and it would look ridiculous on a larger screen. I don't want to use Javascript for this, because I remember when I used IE years ago it used to block Javascript and pop up with warnings about how dangerous it could be, so I imagine a lot of people might have it turned off. Is there any solution to this (besides completely re-designing this part of the page just for IE8 and below (I think IE9 supports media queries...))?
  10. Fixing those two things makes the animation run smoothly - thanks very much!
  11. Dsonesuk -Thanks, that works great.I've been watching the animation and there does still appear to be a very slight flicker - or more of a kind of pulsating thing... it really isn't very obvious, but I asked someone else and they said it was distracting, so not sure what to think. I'm going to try it on a different computer and see if it looks any different.I've heard of, but not yet tried, CSS animations - do you think if I used that instead the animation would be any smoother?Hadien -I tried out your updated code, it works really well! Thanks for posting it. The only thing is, this is for a portfolio and I want to show what I can personally do, and I think using your code would be a bit misleading, if you know what I mean? I am going to see if I can try to understand it though, so I can learn from it.
  12. Dsonesuk -I've tried the adjustments you suggested (thanks!) - that does get rid of the new flashing, and I think the flickering thing has gone. In your solution, however, the layers don't fade in/out again, their opacity just gets re-set at the end - the reason I had a layer argument for opacity is that fade in/out happens for both layers.Also, I don't know what's going on here, but if you watch it can you see a kind of double fade in happening? As far as I can tell, that shouldn't be happening but it looks like each changed line in the image flashes in and out twice (or maybe three times, can't quite tell). If you see what I mean?So glad you pointed out about background-position:fixed not being valid CSS. I feel like such a fool, haha. I think I've been trying to use that for about 9 years... no idea where I picked it up.Hadien -Your version looks interesting, I'll have a look at it more later. Possibly might be a bit complex for me to understand at the moment, though.In regards to - I'm not sure what you mean by this, but I'll try to answer. I want the animation to be smooth and not to have extra (unplanned) movements (the flickering). It's supposed to be a matter of, top layer fades out at the same time as the bottom layer fades in, then the bottom layer fades out and the top layer fades in. Then the image on the bottom layer is replaced with a new one where some of the lines are less/more opaque, and then the fade happens again - and so on. Does that help explain it more?
  13. I've slowed the animation and changed to one function in the way you said - there seems to be extra flickering now :/ I've updated the page linked to before so you can see what I mean. I'm starting to think this might not be possible, because the two fades can't ever be carried out instantaneously.
  14. Oh, I didn't realise you meant use one function. I'll try that. I just changed the variable. Thanks for the IE tip I've also tried slowing the animation down - the flickering still happens, just more gradually.
  15. Good idea, though unfortunately that still results in the same problem.
  16. Right, I've made the changes you suggest. Put the step down to 10. At least now it's less variable - the total opacity is basically either 1 or 0.9. It's still flickering though. I've been trying to get it to predict the opacity total and compensate by changing the individual counters, but this ends up resulting in the opacity never actually changing. :/ Do you think this is actually possible to fix?
  17. Got it online. I would recommend loading it in a browser without any other pages up or downloads running - I've had problems with it creating too many intervals and crashing, which should be sorted now, but I'm not completely confident with it yet. Also, I've logged the total opacity between the two images to the console for each iteration of the fade, if you want to look. (Link edited out) You can stop the animation by clicking on the page or moving away from the page.
  18. If I understand what you're saying, that wouldn't work. My images are PNGs with transparent backgrounds, and coloured lines which are translucent (the changes in the images are some of the lines being more/less opaque). So if you reveal the bottom image with the top still in view, the lines overlay one another and, combined, have a greater opacity overall, changing how the images are supposed to look. That's why I'm fading one in and one out, so the total opacity between the two images should always equal 100 total and so it looks exactly as it should - though this obviously isn't quite working correctly. I suspect I'm not explaining this very well, though. I could possibly put it online, if that would help?
  19. I have an animation where one image fades in and the one on top fades out. Both images are PNGs with around 70% opacity (in the image file, not CSS style here) each (hence why I have to have them do this, otherwise the total opacity would go up and down). This works with one problem: the whole thing flickers ever so slightly. I've figured out why, I think - because of threading. So the functions cannot run at exactly the same time, and hence the total opacity keeps being changed ever so slightly, creating a mild flickering effect - does that make any sense? I think this is right. Just checked and the total opacity is varying from either 1, 1.1 or 0.85 So I was wondering if there is any possible solution to this that anyone can think of. Though I'm really not sure there is...
  20. I'm just wondering, if you have a page with a lot of divs and text - but they're not actually currently doing anything - should this slow down Javascript intervals/timeouts considerably? The page I'm having problems with does, admittedly, have CSS transitions, and I can see how they would cause delays, but I'm not sure why the page itself should before any transitions occur.
  21. I want to check I understand how this works. If I set an interval and assign it to variable a, then put 'a' into console.log and it comes out as '2', that means it's the second interval running on the page, yes? I think I'm not managing to cancel intervals in my code so I've been trying to use this method to understand what's going on. One of my intervals keeps coming out as 2 in Firefox, so I thought, that particular one isn't causing a problem... But then I tested my intervals in Internet Explorer 8, and got these values: 3943428 3943435 3943434 3943432 So I wondered if I've gotten the wrong idea about this? There can't possibly be over 2 million intervals running on the page (surely not where there aren't that many in Firefox). (I could happily never use intervals/timeouts ever, ever again at this point....)
  22. Edit - Okay, it was simple maths. Never mind. Nothing to see here...
  23. Do you realise you're mixing CSS and HTML in your examples? They're different languages, they don't work together like that.
  • Create New...