deldalton

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.

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.

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");}

You can change the vertical-align of the image to middle or top.

 

Since the elements are inline, how they're positioned relative to each other is by their vertical-align property.

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.

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.

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.

I'm not seeing any difference in any of the links you've posted, they all work like the first one.

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.

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.

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.

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];}

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.

Dsonesuk, why is it seen as better to have just one site which adjusts to different screen widths? Beyond not having to update two sites rather than one, where exactly is the advantage?

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.

What i did is clone first image to end so it give the impression of looping to first smoothly, as soon as the clone image has slid into view, set to first image position, its instant, no delay no stuttering, no continuous swapping of images.

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.

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.

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?

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 moment, it looks like someone made it who doesn't know what they're doing ...

So, I know how I would like it to appear. Unfortunately, I'm not quite sure how to tell Javascript what I want to achieve. Mainly because I don't fully appreciate what I want to achieve (if that makes any sense).

I have two possible solutions.

1. Reorder the elements within the HTML document, so that the slideContainer forever slides left (although could this cause performance issues if it's running for too long?)

2. Add the third image twice. Once at the very beginning of the slideContainer, and then again in its expected location, and change the starting position to -1200px, rather than 0. Then, allow the slideContainer to be moved 1200px left twice. To get me to the third image. Then, disable transitions, change the location of the slideContainer to 0px, and re-enable transitions and then restart the slide?

Would my second example be the best suggestion?

Thanks!

Thanks, Ingolme. I'll take a closer look at my files, to determine what is the best solution.

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.

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.

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 ...

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.

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 used it correctly?

Many thanks.

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?

Is the Javascript at the bottom of your page?

 

Scripts need to be run after the element you're targeting has been loaded.

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?

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 doesn't seem to work. The Dev tools in Chrome suggests that it cannot read property style of parseInt(slideEle.style.left); and I don't know why.

All input is appreciated.