Menu div vertical change

@ProductionNerdJan 01.2023

You can view the website here for help knowing what is happening: https://productionnerd.github.io/chat-dash-preview/

The menu is the column that is the first on the left.

I have these divs inside of a div with a class of nav. the child divs have a class of page. The page divs have an active class when clicked. When a page div is clicked, I want the active class to be on the div that was clicked only, and the active div moves vertically to the one that was clicked, and it changes it’s width to fit it. I know I could simply just remove and add the classes in javascript, but how could I have it transition vertically as if the transition: 0.5s; property in CSS?

You can view the HTML for the many here: `<div class=”nav flex-column”>
<div class=”page”><i class=”fa-solid fa-house-chimney”></i>Home</div>
<div class=”page active”><i class=”fa-solid fa-inbox”></i>Inbox</div>
<div class=”page”> <img class=”botprofile” src=”profile-bot.svg” alt=””>Chatbots</div>
<div class=”page”><i class=”fa-solid fa-people-group”></i>Employees</div>
<div class=”page”><i class=”fa-solid fa-user”></i>Users</div>
<div class=”page”><i class=”fa-solid fa-building”></i>Company Settings</div>
<div class=”page”><i class=”fa-solid fa-gears”></i>Prefrences</div>
</div>`

to post a comment

CSS HTML JavaScript

28 Comments(s) _↴

@SempervivumJan 02.2023 — #> I want the active class to be on the div that was clicked only

I understand this.
>the active div moves vertically to the one that was clicked, and it changes it's width to fit it.

I do not understand this. Should the complete div move or just the rounded borders?

@ProductionNerdauthorJan 02.2023 — #@Sempervivum#1649586 Of course, my apologies for not being clear. The active class has a border. I should probably make it it's own separate div, but if you clicked on a text in the nav, it would look like the blue outline moves vertically from one of the text's to the one that was clicked, but of course it would have to change it's width to fit the new one.

@SempervivumJan 02.2023 — #No reason to apologize.

Check this if it does what you require:

https://jsfiddle.net/Sempervivum/vdbrc6ng/

@ProductionNerdauthorJan 02.2023 — #@Sempervivum#1649607 That works great, thank you so much. If I may ask, how did you learn this? On my first time here, you showed me flexbox which I know now. I'm not as experienced with javascript, and had to ask for help for this, which I don't want to do to inconvenience you.

@SempervivumJan 02.2023 — #>how did you learn this?

Years ago I started on javascriptkit. Tested the examples and tried to understand and modify them. Subsequently I extended my knowledge step by step. Probably, what made learning fairly easy for me, is that I grew up as a coder in Assembler, Pascal and C(++). The basics, conditional statements, functions and their parameters, loops, arrays and so on are the same in any programming language.

@ProductionNerdauthorJan 02.2023 — #@Sempervivum#1649611 Oh so i see, it just takes time. The last thing I had a question about was switching pages. I know I could make the text and icons an anchor element so it links to other pages, but how could I keep the nav on the pages, and have the frame in the same position (on the page that it is) when It moves to other pages?

@SempervivumJan 02.2023 — #This can be done by keeping the nav on one page and loading the content of the other pages by javascript and ajax into that page. This basic procedure can be coded fairly easily, however the back and next buttons of the browser won't work for the navigation on that page. I remember that there are frameworks or libraries that fix this, but I have no detailed knowledge currently.

@SempervivumJan 03.2023 — #PS: I remembered that I found a suitable script on the web some time ago. Unfortunately I didn't note the origin. It sets a hash for each page making it easy to navigate by the next and back buttons of the browser and additionally to bookmark each page. This is a demo:

https://webentwicklung.ulrichbangert.de/_demos/navigate-by-ajax/

@ProductionNerdauthorJan 04.2023 — #@Sempervivum#1649624 oh great perfect, thank you, but how would I find the code to implement that for myself? would I use the chrome developer tools?

@SempervivumJan 04.2023 — #Yes, you can use the developer tools to download the code. Right click anywhere and click "Page Source". Then copy and paste the code. Load the javascript files into the browser and save them to disk.

@CeribenanocheJan 04.2023 — #See daily results of ceribenanoche[](https://)

@ProductionNerdauthorJan 05.2023 — #@Sempervivum#1649639 Right. And how would I load the js files into the browser and save them to the disk? I'm sorry, I just haven't done this before

@SempervivumJan 05.2023 — #@Sempervivum#1649639 After having loaded the source text the code that includes the JS files will be visible:

``<i>
 </i>	&lt;__script src="js/route.js"&gt;&lt;__/script&gt;
 &lt;__script src="js/router.js"&gt;&lt;__/script&gt;<i>
 </i>``

Just click the src attributes and the browser will load the files. Then you can either:

- copy and paste the code or

- use your browser's menu and save the script to disc directly.

(Note that I had to insert underlines into the script tags as the forum software doesn't allow for posting them)

If you are not successful then please post what browser you are using.

@ProductionNerdauthorJan 07.2023 — #@Sempervivum#1649660 awesome, thank you. I implemented the code, but it doesn't switch pages. I updated the github repository here: productionnerd.github.io/flowchat/

@SempervivumJan 08.2023 — #@ProductionNerd#1649705

There is some js and HTML missing.

Unfortunately the forum software didn't allow for posting the code. I entered it in jsfiddle instead (HTML and javascript):

https://jsfiddle.net/Sempervivum/afqkb1ru/2/

One remark: No browser will complain about this but the content of the subpages being loaded by javascript/ajax should not contain the general structure of doctype, head and body.

@ProductionNerdauthorJan 10.2023 — #@Sempervivum#1649720 Thank you, my apologies for a late reply, it didn't email me. I updated the code like you said, it still doesn't work. I do have a question about your remark, do you mean in the other HTML files to have no body tag, or how should the general page look like? I updated it on the previous repository

@SempervivumJan 10.2023 — #My bad, this line in router.js, function goToRoute is wrong:

`document.querySelector('main') = this.responseText;

</C><br/>
 Should read:<br/>
 <C>

document.querySelector('main').innerHTML = this.responseText;

</C>
 
 <QUOTE><i>&gt;</i>do you mean in the other HTML files to have no body tag, or how should the general page look like?</QUOTE>
 
 The other way round: No <C>

<DOCTYPE html>` no head section, no tags <body></body>, just the content inside the body tags.

@ProductionNerdauthorJan 14.2023 — #@Sempervivum#1649793 Great, thank you so much, also my apologies again for the late reply. also, how would I change the name of the tab without using the head element? I also don't understand, I implemented what you said, the page doesn't switch, it just keeps the nav and doesn't load the elements of the other page.

@SempervivumJan 14.2023 — #You **added** the modified function this.goToRoute instead of modifying the **existing** one inside the function `Router</C>. The first one is correct, however it has to be placed inside <C>Router

</C>, replacing the function that's inside already.
 
 Additionally I viewed the source text of Users.html. Still there is no content inside, just the basic structure of doctype, head, etc. You asked:
 <QUOTE><i>&gt;</i>how would I change the name of the tab without using the head element?</QUOTE>
 
 The current version of the script doesn't feature this yet. I recommend to add an additional data attribute containing the title to the link, add this to the array <C>

routes`, then update the title when a new page is loaded as described here:

https://stackoverflow.com/questions/413439/how-to-dynamically-change-a-web-pages-title

@ProductionNerdauthorJan 14.2023 — #@Sempervivum#1649924 So I think I updated the one inside of the Route function, I'm not too sure, you can see I committed the new changes to GitHub, did I do it right? It still doesn't work. My apologies for this by the way.

@AnawilliamJan 14.2023 — #@Sempervivum#1649924 Thanks for the explanation and information about this topic

@SempervivumJan 15.2023 — #@ProductionNerd#1649928 I viewed the latest version now and it's running fine so far: The javascript is loading the content into the main container, no doctype, head etc. in the content of the sub pages.

I loaded inbox as an example and I suspect that you intend to display the main menu and the sub page side by side? If so you would have to add `display: flex;` to body.

As a next step I'm gonna test to add the title to the links in the main menu and change it when loading the subpage.

@ProductionNerdauthorJan 17.2023 — #@Sempervivum#1649945 Ah i see, i seem to have made a mistake. The only thing I found that was wrong was that sometimes if you clicked on a button, it would change the page, but the div wouldn't update. Any idea on how to fix that? And also, do you know how to not have the nav div duplicated on the home page?

@SempervivumJan 17.2023 — #>how to not have the nav div duplicated on the home page?

When clicking the Button "Home" in the menu, the complete index.html, which contains the menu, is loaded into the main container. Thus the menu is duplicated.

Create an additional file home.html, Ccontaining no head, no body and no menu and enter it's url into the menu.

@SempervivumJan 17.2023 — #In the meantime I implemented changing the title.

Please add data attribute for the titles to your links in the nav:

``<i>
 </i>    &lt;div class="nav flex-column"&gt;
 &lt;div class="frame"&gt;&lt;/div&gt;
 &lt;a data-link-name="home" data-link-title="Dashboard - Flow Chat" href="home.html"&gt;
 &lt;div class="page active"&gt;&lt;i class="fa-solid fa-house-chimney"&gt;&lt;/i&gt;Home&lt;/div&gt;
 &lt;/a&gt;
 &lt;a data-link-name="inbox" data-link-title="Inbox - Flowchat" href="inbox.html"&gt;
 &lt;div class="page"&gt;&lt;i class="fa-solid fa-inbox"&gt;&lt;/i&gt;Inbox&lt;/div&gt;
 &lt;/a&gt;
 &lt;!-- And so on, add data attributes to the remaining links --&gt;<i>
 </i>``

Unfortunately the forum software didn't allow for posting the javascript. I inserted it in a jsfiddle instead:

https://jsfiddle.net/Sempervivum/q2xkpacn/

@ProductionNerdauthorJan 17.2023 — #@Sempervivum#1649994 Awesome, thank you, and you saw what I said about the responsiveness of the nav?

@SempervivumJan 17.2023 — #>you saw what I said about the responsiveness of the nav?

Do you mean this issue?

>The only thing I found that was wrong was that sometimes if you clicked on a button, it would change the page, but the div wouldn't update

My first thought is that the result of the Ajax request is cached.

@ProductionNerdauthorJan 17.2023 — #@Sempervivum#1649996 Actually I didn't mention that, my apologies, it was about the responsiveness of the div, which I can fix later. I'll implement what you gave me when I get home, and thank you

Also in #CSS _↴

Cross Browser Box problem word-wrap in firefox1.0pr At my wits end..."I'm never using rounded corners again

Success!

Help @ProductionNerd spread the word by sharing this article on Twitter...

Tweet This

Menu div vertical change

28 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Menu div vertical change

28 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

28 Comments(s) _↴

Also in #CSS _↴