Navigation bar stays hidden - javascript

I am create a simple navigation bar that runs along the top of the screen but when the display is under 768px it displays as a menu that can be closed with a click of a X or opened by click the Hamburger button.
I also have the site hosted on GitHub and the page can be loaded via here

First of all you should provide snippet code when answer. If you don't share its hard to identify the problem.
Secondly problem with your code is a spalling mistake. instead of menu.addEventListner use menu.addEventListener. You can find these Errors easily if see the console in your browser.

Related

why does the hamburger icon not appear when i click any other page that isn't home?

i have a responsive navbar for my website, where if the media goes below 600px, the menu bar becomes a hamburger bar.
I added two navbars, one for the desktop horizontal nav bar, and another one for the hamburger (originally i only had one navbar that just switched styles when it went below 600px, but i wanted the hamburger bar label to match the page it was on, so i made a new navbar that only appears when it goes below 600px).
However, the three hamburger menu lines disappear whenever I click to go to another page (on the mobile screen). I can see it on the home page, but not the resources or action page. On those two pages, I can still click it, but the icon is not there. I can't figure out how to fix it.
I tried to make separate javascript codes for each page, but I don't think thats the problem.
https://replit.com/#pbrc/asianhate2#style.css
here's the code, its kind of all over the place as I made this website when I was first introduced to html and I'm expanding on it these days.
If you look on your console, when you navigate to a page, for instance to /resources, you can see an error:
script.js:35 Uncaught ReferenceError: $ is not defined at script.js:35:1
I think your problem is that your are only adding jQuery to your home page
Try adding the jquery script on all pages and see if that fixes the problem
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
(you do that for your home page on your index.html on line 22)
By the way, on your home page HTML, on line 21, there is a <head>. That seems strange, because you already open the head on line 3. Maybe you should remove that from line 21

Connect with google plus button

I have implemented Connect with Google plus on a website. It is working fine except the following case: Consider I have logged in to Google account and then I visit my website I can see the popup from Google which is according to the snipped screen shot as below
I don't want this popup to be visible ever. Any
The best way to deal with this problem is by creating a simple JavaScript code and putting it in your pages. If the problem occurs on all pages, create a master file {name}.js and import it on all relevant pages. Right click on the bar, and choose "Inspect Element". Note down the div id/class name and cancel the inspect element dialog. Next, create a JS script, which states onLoad, the div box in concern will not be displayed.

Link to section on page without using #

I am a novice at the moment & learning a few things along the way but I am stuck with this small issue.
Here is the page in question http://www.theremotedoctor.co.uk/accvolvo.html
I am looking to click on my item selection as shown on the page and scroll to the page of which is the loaded upon a click.
Desktop works fine so this is for IOS device where picture loaded is off the screen,hence the scroll of the item.
I have supplied a before & after code to show what happened.
BEFORE CODE WITH WORKING PICTURE LOADED
<li>Remote uncut key</li>
AFTER CODE PICTURE LOADING NOT HAPPENING BUT SCROLL IS WORKING
<li>Remote uncut keyRemote uncut key</li>
I am now not sure how to rectify this.
If the above code of which I have applied is incorrect I am willing to use a different code that will allow the link to be clicked,pictured loaded & also the scroll to the picture working.
I understand its down to the # being used so already but now confused.
Many thanks for your time.

push down navigator like win8 metro

everybody who has worked with widows 8 metro panel knows that when clicking on the arrow appeared on the left bottom of the screen, it will navigate to the applications page which is totally different from the first page.
i wanna do that on my webpage. when user clicks a block it pushes him down to the element related to that block.
is there any Jquery or JavaScript code for that? FYI i searched a lot and find nothing!
If JS/CSS is in any way similar to XAML - you'd probably want to run some translation animations on two overlaid views as described here: Activate css animation/translation with javascript

Slidemenu won't load the first time in JQuery Mobile App

I have a Jquery Mobile app with a slidemenu in the global page, and it appears with the press of a button or a swipe on the screen, facebook style. My problem is that the first time the app loads, the menu never pops out, even if you press the button a thousand times. You have to refresh the page and then in works in all the pages of the app for the lifetime of the session. If you logout and enter again, you need to refresh.
You can see a example here: http://cic-team.no-ip.biz:9090/apex/f?p=112:2 User: Demo Passw: 1234abc
The menu it's in an "After Header" region as a "List: Menu" type with this custom template: http://i236.photobucket.com/albums/ff289/Best1989/template.png
The button has the following attributes:
data-slidemenu="#slidemenu" data-slideopen="false" style="margin-left:0px !important;"
Maybe the Javascript or the CSS are not loading correctly the first time, but inserting the menu in other region has not worked for me. I'll gladly read your suggestions and comments.
I'm using Apex 4.2.0.
Thanks in advance.
With some research I found the answer to my question, please check this:
http://www.gajotres.net/how-jquery-mobile-page-handling-affects-javascript-executions/
The problem was that I wasn't loading the menu classes at the Login page (which is the first of all) and when you actually got to the page where the button and menu is displayed, it didn't load the classes.
Solved the problem loading the components in the first page but keeping them hidden.

Categories