Showing the div dynamically on the even page

Question

I have a site where I need to add a 'menu' block on every page. I have an html code:

<div id="menuHead">
    <a href="./index.html"><img src="./images/logotype_850_250.jpg" width="auto" height="100%" align="left"></a>
    <a href="./index.html"><button class="menuButton">Search</button></a>
    <a href="./about.html"><button class="menuButton">About</button></a>
    <a href="./directs.html"><button class="menuButton">Directories</button></a>
    <a href=""><button class="menuButton">Support</button></a>
    <a href=""><button class="menuButton">Advertisment</button></a>
    <a href=""><button class="menuButton">Updates</button></a>
    <a href=""><button class="menuButton" id="helpB">Help the project</button></a>
</div>

So, how can I add this block on every page automatically using JS (jQuery)?

set this shole html code snippet into a JS variable. And then using jquery nd`append`method, put this on all the pages on `document.ready` event.\ — Himanshu Upadhyay, Sep 25 '17 at 09:11
If this is on every page, why not include it in the html or template...why bother to add it dynamically if there is no restriction rule? Do you want to add it on certain rule? Title says something and then in the description you say "every page"... What path do you want to take? — Dinca Adrian, Sep 25 '17 at 09:35
I did it! Here is an error within the browser (localhost). Everything now is working perfectly! Thanks! — Eugene Zolotuhin, Sep 25 '17 at 10:50

Stefan · Answer 1 · 2017-09-25T09:35:14.660

0

You can do this with jquery. Create a file called something like menu.html, and put your html of your menu in there. Then on every page where you want it to appear, create a div with the id menuand add this javascript to your page.

<script> 
   $("#menu").load("menu.html"); 
</script>

Be sure to import jQuery in every page with the menu

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>

edited Sep 25 '17 at 09:35

answered Sep 25 '17 at 09:17

Stefan

81
1
8

I tried to use this, but it didn't work. It's showing nothing. White field. Maybe you know another way? – Eugene Zolotuhin Sep 25 '17 at 09:21
The answer you've linked is already mentioned in the comments. No need to copy paste it again. – adiga Sep 25 '17 at 09:22
I created an menuBlock.html and included it in #menuBlock. It's showing nothing – Eugene Zolotuhin Sep 25 '17 at 09:24
Now I'm trying to use it with an iframe. It works but I don't know how comfortable it will. – Eugene Zolotuhin Sep 25 '17 at 09:29
Stefan, look: i have an menuBlock.html. And I need to add this to the every page (one menu to multiple pages). Those code doesn't work, iframe is bad, i don't need a php. I have no ideas how to solve this a little problem) – Eugene Zolotuhin Sep 25 '17 at 09:39
Create a `
` and make the id menu. then add this code to your page ``
– Stefan Sep 25 '17 at 09:41
Stefan, okay. It works, but not fine. Now it shows me only a #menuHead div (written in menuBlock.html), but not a buttons and an image inside the div. What's wrong now?) Do I need an .appendChild(), and If yes - how to do this?) – Eugene Zolotuhin Sep 25 '17 at 09:45
Not sure why that would be, you can try to put the javascript code that loads the HTML into the div into a function that runs if the page is loaded: `$(function() { $("#menu").load("menuBlock.html"); });` – Stefan Sep 25 '17 at 09:50
Stefan, it still doesn't show me a content in the div from the menuBlock.html. hmmm – Eugene Zolotuhin Sep 25 '17 at 09:54

Showing the div dynamically on the even page

1 Answers1