Jump to content


  • Content Count

  • Joined

  • Last visited

Community Reputation

0 Neutral

About deldalton

  • Rank
  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?
  • Create New...