hamburger wont work

[Pavel]

please see

Rentals

the hamburger wont click 🙁

i reviewed my code, dont see where my trouble is

note: all the other links work and the footer nav rental works

please help me

 

[Johna]

Hi there,
The first thing to do when code is not working is to check the console. You would've seen that there are lots of errors.

The JavaScript in the script tag after that hamburger button is not valid. You can't put HTML inside script tags.

 

[Pavel]

Hi there,
The first thing to do when code is not working is to check the console. You would've seen that there are lots of errors.

i freely admit i know little JavaScript

i am almost finsihed wit this project

i immediately plan to learn dev tools, so you are aahead of right now 🙂

i alway validate my code on validaters

The JavaScript in the script tag after that hamburger button is not valid. You can't put HTML inside script tags.

anways, i got it to work! its fine now 🙂

thanks!

do i owe you a $0.25 now?

 

[Pavel]

Hi there,
The first thing to do when code is not working is tohttps://forallthetime.com/BI-D/rentals.html You would've seen that there are lots of errors.

i freely admit i know little JavaScript

i am almost finsihed wit this project

i immediately plan to learn dev tools, so you are aahead of right now 🙂

i alway validate my code on validaters


The JavaScript in the script tag after that hamburger button is not valid. You can't put HTML inside script tags.


anways, i got it to work! its fine now 🙂

thanks!

do i owe you a $0.25 now?

SORRY! i checked my file,not the published page... hamburger still wont work...

maybe simplify this so i can follow?

i would apprciate the code and an explanation... those 2 thing are what i want... to have what i need and why i need it

maybe in a code pen?

thanks!

 

[cbreemer]

SORRY! i checked my file,not the published page... hamburger still wont work...

In your published page, as seen with View Source, you still have the HTML for the button inside the <script> tag.

<script>
        function openNav() {
            document.getElementById("mySidenav").style.width = "250px";
        }

        function closeNav() {
            document.getElementById("mySidenav").style.width = "0";
        }

        <a href="#" class="hamburger-button" onclick="openNav()">?</a>
    </script>

As @Johna pointed out, this needs to be corrected and you have not done that. As he also pointed out, you should have checked the console log and it looks like you have not done that either, because the messages are crystal clear about what the error is (the second one appears when you click the button):


Please correct your source code, move the button definition line outside the <script> tag, make sure the page is reloaded (clear the browser cache to be sure, or add some cosmetic change so you're sure to be seeing the corrected page) and you will see your button spring into life.

I don't mean to sound pedantic, but if you ask for advice, and it is given to you, then by all means follow it. Saves you and us a lot of trouble.

I'm less sure about these other two errors shown in the console:

No idea why these two css files are deemed to have mime type text/html. Could be something with your webserver configuration. There's lots of results and solutions if you Google it. Or you could maybe try overriding this on the client side like this:

<link rel="stylesheet" type="text/css" href="location.css">
    <link rel="stylesheet" type="text/css" href="index.css">

HTH.

 

[Pavel]

In your published page, as seen with View Source, you still have the HTML for the button inside the <script> tag.

<script>
        function openNav() {
            document.getElementById("mySidenav").style.width = "250px";
        }

        function closeNav() {
            document.getElementById("mySidenav").style.width = "0";
        }

        <a href="#" class="hamburger-button" onclick="openNav()">?</a>
    </script>

As @Johna pointed out, this needs to be corrected and you have not done that. As he also pointed out, you should have checked the console log and it looks like you have not done that either, because the messages are crystal clear about what the error is (the second one appears when you click the button):

View attachment 2571
Please correct your source code, move the button definition line outside the <script> tag, make sure the page is reloaded (clear the browser cache to be sure, or add some cosmetic change so you're sure to be seeing the corrected page) and you will see your button spring into life.

I don't mean to sound pedantic, but if you ask for advice, and it is given to you, then by all means follow it. Saves you and us a lot of trouble.

I'm less sure about these other two errors shown in the console:
View attachment 2572
No idea why these two css files are deemed to have mime type text/html. Could be something with your webserver configuration. There's lots of results and solutions if you Google it. Or you could maybe try overriding this on the client side like this:

<link rel="stylesheet" type="text/css" href="location.css">
    <link rel="stylesheet" type="text/css" href="index.css">

HTH.

thank you!

again, my next effort is learning my dev tools....

ok, so what i did was copy from

<a href="#" class="closebtn" onclick="closeNav()"></a>

at the bottom


to

<button>

at the top FROM a warking hamburger page (i have more than one page)

to the rentals page

BINGO!

my rentals page hamburger works!

see here

https://forallthetime.com/BI-D/rentals.html#

yes, there are 2 hamburgers 🙁

i am asking for help with that eslewhere

but please, if you can resolve my issue and remove the top hamburger would be appreciated!

please, go slow and simple for me

please explain my dual hamburger problem AND how to fix it

(mind you i know almost no JavaScript)

thanks for your console advice. i am not there yet 🙂

yes, dev tools are my next priority!

seriously, thank you for your help, time and trouble!

 

[cbreemer]

Great that we have some progress. Yes, you have two "hamburger buttons", as you call them, both doing the same. Have you not asked yourself why that could be ? If you look at your code you see that there are two elements that open your hamburger menu:

<button style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; </button>
...
<a href="#" class="hamburger-button" onclick="openNav()">?</a>

The first one is the 'real' button in the top left corner, the second one, some distance below it, is not actually not a button but a <a> link. You need to decide which one you need to keep, and delete the other one. I would assume it's the one in the corner you want, but maybe not. Whether you use a <button> or <a> element is not so relevant, they work the same in this scenario. I would go for <button> which is much clearer. Links are primarily intended to link to other pages.

Why this link with class hamburger-button is positioned where it is I don't know. You did not address these errors saying that your CSS files are not applied, and as long as your CSS doesn't work all bets are off with respect to appearance. Also, make up your mind whether you want to style elements in the HTML (as you did for the button) or in the CSS (as you did for the link). This has nothing to do with JavaScript, it's only a matter of being consistent and precise in your design and HTML code.

 

[Pavel]

Great that we have some progress. Yes, you have two "hamburger buttons", as you call them, both doing the same. Have you not asked yourself why that could be ? If you look at your code you see that there are two elements that open your hamburger menu:

<button style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; </button>
...
<a href="#" class="hamburger-button" onclick="openNav()">?</a>

The first one is the 'real' button in the top left corner, the second one, some distance below it, is not actually not a button but a <a> link. You need to decide which one you need to keep, and delete the other one. I would assume it's the one in the corner you want, but maybe not. Whether you use a <button> or <a> element is not so relevant, they work the same in this scenario. I would go for <button> which is much clearer. Links are primarily intended to link to other pages.

Why this link with class hamburger-button is positioned where it is I don't know. You did not address these errors saying that your CSS files are not applied, and as long as your CSS doesn't work all bets are off with respect to appearance. Also, make up your mind whether you want to style elements in the HTML (as you did for the button) or in the CSS (as you did for the link). This has nothing to do with JavaScript, it's only a matter of being consistent and precise in your design and HTML code.

thanks!

i thought i replied to this, cannot find that post 🙁

i will repeat again

i took your advice and removed the top hamburger, this has not been adjusted on all the pages yet 🙂

tell me, why does the hamburger move as the screen gets smaller and larger?

cannot figure out how to make the hamburger stay put 🙁

to NOT move with the screen to the point it over laps or obscures the code benearth it

i have a problem and need your help

i noticed if i removed

flex

i get the desired result, but loose the code that adjusts the hamburger

i hope i am clear!

thank you!

 

[cbreemer]

Sorry, it is not clear at all to me what your issue is now. I am looking at the main page, the link of which you posted at the beginning. I still see two hamburgers, same as before although I notice you have moved them around in your HTML code:

<body>
    <button style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; </button>
...
    <a href="#" class="hamburger-button" onclick="openNav()">?</a>

Make up your mind which one you want, and whether to use a button or link.

Neither of these 'hamburgers' move when I resize the page !

No idea what you mean with "when I removed flex" - there is no flex to be found, neither in the page source or in the Styles tab in the debugger. Also, some of your CSS files are still being blocked as you can see in the console log. So you probably do not have all styling applied.

I do wonder if you actually have read, considered end understood everything I wrote in my previous posts ? Was anything unclear at all ? If you do not understand something, do ask.

 

[Pavel]

hello,

i take full resposibility for not putting your advice int the code

I still see two hamburgers, same as before although I notice you have moved them around in your HTML code:

i have not adjusted every page of the site, that may be you are seeing 2

No idea what you mean with "when I removed flex"

sorry for not clarifying

i changed the display to flex, and that accomplished what i am after, but the code for placing the hamburger does not apply

Make up your mind which one you want, and whether to use a button or link.

i chose link see here Home

there is no flex to be found, neither in the page source or in the Styles tab in the debugger.

that is beacuse i removed it, brought it back f to fixed

Also, some of your CSS files are still being blocked as you can see in the console log. So you probably do not have all styling applied.

i hope you can still help me here, again the console concept is foriegn to me at the moment...

though i WILL validate the HTML and CSS

If you do not understand something, do ask.

sieriously, i am grateful you wrote that!

please see where the hamburger is? its over the other code

Sorry, it is not clear at all to me what your issue is now

that is my issue 🙂

please see Home... see there is some space between the hamburger and my contatiner, as you decrese the screen, things go wonky

to be clear, i am after spacing out the hamburger fom the rest of my code on a smaller screen

it occured to me.... is that even possible?

i would appreciate your advice here 🙂

 

[cbreemer]

i have not adjusted every page of the site, that may be you are seeing 2

No !!! Half the problem here is that you do not read properly. As I wrote, I am looking at what I believed to be the home page, in the link you posted at the very start start of this thread. It now seems that this is a different page from what you are working on. Anyway, let's focus on one and one page only for now, ok ?

i changed the display to flex, and that accomplished what i am after, but the code for placing the hamburger does not apply

i chose link see here Home

Yes, that's a different page than I was looking at all the time. At least that clears up the confusion about the two buttons, there's only one here. Still I think it is peculiar to use a link and then name its class hamburger-button.

that is beacuse i removed it, brought it back f to fixed

Ok, I see that now in style.css. But whether it's fixed or flex (I tried it out in the Developer Tools), the button does NOT move around when resizing the screen, as you suggested.

i hope you can still help me here, again the console concept is foriegn to me at the moment...

It should not be. Just press F12 to bring up Developer Tools (commonly known as "the debugger") and look for the Console tab, see image. Any messages given there should have your full attention.

please see where the hamburger is? its over the other code

Yes I see. The reason for that is because you have specified that position in style.css. If you keep it fixed but remove the top and left it seems quite ok to me :



It also seems to work well with flex, I still don't understand what exactly your problem is with that.

to be clear, i am after spacing out the hamburger fom the rest of my code on a smaller screen

it occured to me.... is that even possible?

I am not at all sure what you mean here.

 

[Pavel]

No !!! Half the problem here is that you do not read properly. As I wrote, I am looking at what I believed to be the home page, in the link you posted at the very start start of this thread. It now seems that this is a different page from what you are working on. Anyway, let's focus on one and one page only for now, ok ?


Yes, that's a different page than I was looking at all the time. At least that clears up the confusion about the two buttons, there's only one here. Still I think it is peculiar to use a link and then name its class hamburger-button.


Ok, I see that now in style.css. But whether it's fixed or flex (I tried it out in the Developer Tools), the button does NOT move around when resizing the screen, as you suggested.


It should not be. Just press F12 to bring up Developer Tools (commonly known as "the debugger") and look for the Console tab, see image. Any messages given there should have your full attention.

View attachment 2579


Yes I see. The reason for that is because you have specified that position in style.css. If you keep it fixed but remove the top and left it seems quite ok to me :

View attachment 2580

It also seems to work well with flex, I still don't understand what exactly your problem is with that.


I am not at all sure what you mean here.

Just press F12 to bring up Developer Tools (commonly known as "the debugger") and look for the Console tab, see image. Any messages given there should have your full attention.

thanks! i learned something new today!

any tips to make my site more aesthetically pleaseing.. make it look or function better? Thanks!

you may not believe this, but its true, before your latest post here i solved my own problem! seriously! i successfuly got my hamburger where i want it.. great minds, yes 🙂


good news! my project is 99% done (i may add content at a later ponit. i have nothing planned for now).. i see no reason to continue here... i plan to validate my HTML and CSS, read the console, and add some images and call it over!

how great is that?

ok! dev tools next!!! wish me luck 🙂

listen, if this is my last post here, i want to tell you one more time THANK YOU!

i got the sense i have annoyed you 🙁 i dont know if that is the case... if thats real or perceived... i appologize to you in the most sinecere way... please know never once did i try to bug you! i am sorry if i frustrated you 🙁

you have been a help

you never insulted me, never called my stupid, and i sincerely appreciate your patience

you have helped me to be a better coder!


🙂 🙂 🙂

 

[cbreemer]

Just press F12 to bring up Developer Tools (commonly known as "the debugger") and look for the Console tab, see image. Any messages given there should have your full attention.

thanks! i learned something new today!

any tips to make my site more aesthetically pleaseing.. make it look or function better? Thanks!

you may not believe this, but its true, before your latest post here i solved my own problem! seriously! i successfuly got my hamburger where i want it.. great minds, yes 🙂

Great that you have fixed it and learned something along the way !

i got the sense i have annoyed you 🙁 i dont know if that is the case... if thats real or perceived... i appologize to you in the most sinecere way... please know never once did i try to bug you! i am sorry if i frustrated you 🙁

No, not really. Sorry if I unwittingly gave that impression. I do admit I can get a bit frustrated when it seems like my posts (which I spend a lot of time on and take great care to be as precise and complete as possible) are not being read properly. It you want to be a good programmer, start by being a good reader. You know what really annoys me ? People who do not want to learn anything, do not want to make an effort, just expect someone to write their code and fix their problems for them. We see those types here all too often, alas. Luckily, you are not one of them otherwise I would have given up some time ago.

I am not qualified to give tips on how to make your site better looking or more useful. One thing I will say (but it's personal preference, of course) is that your main font is a bad choice, and something like this



is just plain monstrous 😳 Go easy on the fancy fonts, colors and effects - you don't want your site to look amateurish.

Glad I could help. Keep posting.