Jump to content

deldalton

Members
  • Content Count

    83
  • Joined

  • Last visited

Community Reputation

0 Neutral

About deldalton

  • Rank
    Newbie
  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", "collapseNav()"); doesn't have any parameters passed into the the onclick function, and I'm not sure how to pass the correct values into it. I tried this targetTitle.setAttribute("onclick", "collapseNav(this, element)"); But this clearly won't work. I believe the first parameter is fine. It's the second one. I don't know how to target the target element.
  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 classes that define different heights,and switching between them and a different event when triggered. I'm not sure if it's the best approach but it's what I've put together so far. Please make any appropriate suggestions that could improve it. I believe it's possible to create one generic function that can be invoked by each individual trigger (that's the onclick on the initial title) to expand its relevant nav element. But, unfortunately, I don't know how. I can, of course, do it the long way and create a function specific to each nav element and its trigger but that's really not ideal. What would be the key to make my function generic and reusable? Here's my HTML, CSS, and Javascript. <header> <ul <li><a onclick="expandNav()">Title 1</a></li> <li><a onclick="expandNav()">Title 2</a></li> <li><a onclick="expandNav()">Title 3</a></li> </ul></header><nav id="nav1" class="collapsed"> <ul> <li><a>Link A1</a></li> <li><a>Link A2</a></li> <li><a>Link A3</a></li> <li><a>Link A4</a></li> <li><a>Link A5</a></li> </ul></nav><nav id="nav2" class="collapsed"> <ul> <li><a>Link B1</a></li> <li><a>Link B2</a></li> <li><a>Link B3</a></li> <li><a>Link B4</a></li> <li><a>Link B5</a></li> </ul></nav><nav id="nav3" class="collapsed"> <ul> <li><a>Link A1</a></li> <li><a>Link A2</a></li> <li><a>Link A3</a></li> <li><a>Link A4</a></li> <li><a>Link A5</a></li> </ul></nav> header { width: 100%; background-color: white; opacity: 0.9; position: fixed; z-index: 1;}nav { display: inline;; position: fixed; overflow: hidden; z-index: 1; background-color: white; opacity: 0.9; margin: 100px 0 0 0; width: 100%; text-align: center;}ul { display: inline-block; margin: 40px 0 0 50px;}li { display: inline; padding: 0 20px 0 20px; color: grey;}.expanded { height: 200px;}.collapsed { height: 0px;} function expandNav() { targetTitle.setAttribute("onclick", "collapseNav()"); targetElement.setAttribute("class", "expanded");}function collapseNav() { targetTitle.setAttribute("onclick", "expandNav()"); targetElement.setAttribute("class", "collapsed");}
  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> <img src="img/newLogo.png"/> <nav> <ol> <li>Link 1</li> <li>Link 2</li> <li>Link 3</li> </ol> </nav></header> header { width: 100%; height: 100px; background-color: white; opacity: 0.9; position: fixed; z-index: 1;}header img { height: 100px;}nav { display: inline-block;}ol { font-size: 1em; display: inline-block;}li { display: inline-block;} I'd be grateful for any pointers. Thanks.
  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 = slideLinks[0];}
  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'; slideEle.style.transition = '1s'; slideEle.style.left = (-1204) + 'px'; slideLinkEle.href = slideLinks[0]; } I expect the code to be executed line by line. But, it would appear to execute the transitional effects first and then the style.left = 0 + 'px' line. So, it ends up scrolling back to the first image ​(rather than jumping) and then the second style.left line doesn't even appear to be executed.
  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 work on the code to remove the delay.
  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...