Jump to content


  • Content Count

  • Joined

  • Last visited

Everything posted by deldalton

  1. Thanks for taking the time to reply, justsomeguy. I've changed my approach a little so that I no longer need to update the onclick attribute value. Instead, rather than updating it to another value so that it can be clicked to collapse, I've used the onmouseleave event to trigger the collapse of the nav bar. It works beautifully now.
  2. I've amended my JavaScript to have two parameters passed into the called function. function expandNav(link, element) { targetTitle.setAttribute("onclick", "collapseNav()"); targetElement.setAttribute("class", "expanded");}function collapseNav(link, element) { targetTitle.setAttribute("onclick", "expandNav()"); targetElement.setAttribute("class", "collapsed");} Now, the HTML elements look like this. <li><a id="Title 1" onclick="expandNav(this, nav1)">Title 1</a></li> It seems to work. Except, of course, that my the targetTitle.setAttribute("onclick", "c
  3. Hello, I'm trying to create a navigation system. I have a header, that includes the main navigation Titles contained within an unordered list. Outside of the header, and directly after it, are multiple nav elements each containing another unordered list. The initial value of their height style attribute is 0px so that the nav is hidden from the user's view. The idea is that when a user clicks on any of the Titles, its relevant sub-titles will appear in an expanding nav element below the header. I already have working JavaScript that can expand a specified element's height, using two cl
  4. Thank you! I've never used the vertical-align property, as I've never normally had an issue positioning elements. I'm extremely glad you've introduced us.
  5. I'm a little stuck with something that should be really simple. I can't figure out the problem. I have a header, containing an img element and an ol element. Although I can get the ol and list elements to sit inline, beside the img element, the list elements' text sits at the bottom of the header. I'm having trouble sitting the text in the center of the header. I've tried negative margins on the ol element, li elements, and the nav element. But, it has no affect. You'll see I've thrown in inline-block display attribute values on everything just to try and get this to work. <header&
  6. That's interesting. The two links take me to two different examples. The original that, upon seeing the last image, scrolled in the opposite direction to the first image. The latest that, upon seeing the last image, jumps to the first image (which is a clone of the last image) without a transition and then repeats the rest of the slides. Maybe I'll put a new Code Pen together, to take advantage of a fresh link.
  7. Here's the original ... http://codepen.io/anon/pen/OPMNVq Here's the latest ... http://codepen.io/anon/pen/KwVzzd The other links I posted between the original and the latest was the same link as the latest but I have updated it since, which is why you can't tell a difference between them.
  8. Please see my latest Code Pen of this example. I've removed the duplicate IDs now. They're no longer required now anyway but I do appreciate the mistake I made. The latest Code Pen is working exactly how I would like it to. Interestingly, however, when I implement the same code locally, on my Apple Mac device using Safari and Chrome, the resetSlide function doesn't seem to work and I'm presented with the same delay I had before. I haven't tested it on my Windows device yet.
  9. Ah. Yes I have! Let me amend that! In fact, the IDs were left from a previous experiment and they're not needed at all now. But, yes, I should have used a class.
  10. Got it! ... function slideIt() { index = (index == maxLinks) ? 0 : ++index; var left = parseInt(slideEle.style.left); if (-2408 <= left){ slideEle.style.transition = '1s'; slideEle.style.left = (left + -1204) + 'px'; slideLinkEle.href = slideLinks[index]; } else { slideEle.style.transition = '0s'; slideEle.style.left = 0 + 'px'; slideLinkEle.href = slideLinks[0]; setTimeout(resetSlide, 0); } setTimeout(slideIt, 3000);}function resetSlide() { slideEle.style.transition = '1s'; slideEle.style.left = -1204 + 'px'; slideLinkEle.href =
  11. I've updated my Code Pen. I'd somehow managed to put an extra if statement that wasn't required. But, there's still a problem; a delay after we jump to the very first image, before proceeding to slide onto the next image. I have tried changing the else statement to look like this but it doesn't appear to execute the lines in the way I expected. if (-2408 <= left){ slideEle.style.transition = '1s'; slideEle.style.left = (left + -1204) + 'px'; slideLinkEle.href = slideLinks[index]; } else { slideEle.style.transition = '0s'; slideEle.style.left = 0 + 'px';
  12. Besides the advantage you've already mentioned (having fewer files to update) I suspect it's because your browser then has fewer files to download, which is always a benefit.
  13. Just to clarify, dsonesuk. In my example, I have cloned the last image (that's image 3) and placed it again at the beginning (we'll call this image 3b), jumping to it when the last image is viewed. There is a slight delay, after image 3 has been swapped for image 3b because of the setTimeout(slideIt, 3000) delay before telling it to slide to the next image. Your suggestion clones image 1 and puts it at the very end ​(which is the opposite of my approach). But, the code will ultimately be the same and I would still end up with the delay I have at the end? Is that correct? I just need to wor
  14. Hi Bert, Have you tried using css @media queries, instead of a different document, to restyle the page based on the queries made by the css? In all honesty, I'm not sure which of the two methods (document redirection or using @media queries) is considered best practice. But, I started playing with css @media queries recently and I'm quite pleased with the results.
  15. justsomeguy. Thanks for the response. I did expect that to be the solution most people agreed with. I'm sure I've seen it suggested somewhere else before ​(which is probably the only reason I thought of it). However, in the mean time, check out a working Code Pen of the second solution I suggested. This works. And, as far as the end user is concerned, does the same thing. Let me know what you think. Do you think it uses less code than trying to implement the first solution?
  16. Here's my Code Pen. At the moment, we have three images in the slideshow. It scrolls to the images container by the width of each image (and a few extra pixels to allow for the whitespace between the images - please let me know how to get rid of the white space if you know how). When it gets to the last image, I've specified that it should return container to its original location. My code works. Great! But, it's not quite what I'd like to achieve. I would like the slideshow to appear as if it continues to slide to the left but starts at the beginning of the loop. At the mo
  17. Thanks, Ingolme. I'll take a closer look at my files, to determine what is the best solution.
  18. Ingolme. Thanks again for your comprehensive response! I will look further into. It is highly likely that i've done something wrong! I would definitely prefer a solution that is already supported in the majority of browsers, without vendor prefixes, so I'll continue to play around with Javascript for the time being. All the best.
  19. On second thoughts, after trying to open the page on my Windows device, I'm finding certain browsers aren't working and none of them are working correctly. Maybe I'll go back to JS, after all. It's much more predictable.
  20. That'll teach me not to read the article properly. I hadn't allowed for browser compatibility. I had assumed that it was fully supported but it's not yet. So, it's now working. I just need to make a few tweaks to make it pretty ...
  21. I've tried creating the same cross fading slideshow. The only difference is the images I use, and the amount of images I use, which means I must amend the animation duration and the percentages for each step. I've done that. But, my code doesn't work. In fact, even if I copy the HTML and CSS exactly ... it doesn't work. I'm totally lost as to why. I'm working on my Apple Mac at the moment, and I've view the site in Safari and Chrome, without any luck. What am I missing? It would seem like the @keyframe isn't starting.
  22. Hello All! I've been looking into creating a JS slideshow, and stumbled across the following article ... Simple Crossfading Slideshow in Pure CSS Is it now considered best practice (that is, simpler and beneficial to browser performance) to use HTML5 and CSS3 to replace JS? Of course, I appreciate that it does depend on what you're trying to achieve. If the JS uses less resources and is faster to run than the CSS then it would defeat the object. But, this particular article has peaked my interest. I've never seen the <figure> tag before, either. Has the author of the article
  23. Oh. Wait. That means that the variables I've defined at the beginning of the ext. .js file, which is located in the <head> tags, aren't going to work because the elements I'm targeting don't exist yet. If I define the variables within the function then it works! Thank you for your help! Is it best practice to place the <script> tags at the end of the HTML document then, instead of within the <head> tags?
  24. Hi Ingolme, Thanks for the post. This is what my opening body tag looks like ... <body onload='slideIt();'> ... which I have always thought meant that after everything in between the opening and closing body tags would load before launching the script, which should allow the script to target the specified/necessary element IDs. Is this not true?
  25. Hello, Once again, I seem to be having an issue with my Javascript. I'd be most grateful if I could have some pointers. Here's my Code Pen ... http://codepen.io/anon/pen/LEpvmL I'm trying to create an image scroller. The example lacks polish but it displays the concept: an initial image is loaded (which will be, in fact, a much wider image than it's container, which has it's overflow: hidden) and will scroll to the left to reveal the next part of the image after a given time frame. In the Code Pen, it works. When I try to put the same code into my html, css, and js files the js
  • Create New...