Icon Help with HTML & CSS | Get Answers Now!

Dave Ritche · Jan 1, 2016

Hello!
I have added an icon to my home page and I'm trying to add it to multiple pages without adding it to every time on the page.Is there anyway i can accomplish this task?If yes,then please help me with this.
Thanks!

Borg · Jan 1, 2016

You could put it in a header that each of your pages uses.

Dave Ritche · Jan 1, 2016

Tha

Borg said:

You could put it in a header that each of your pages uses.

thanks borg!i will have to use an iframe for that,then?

Borg · Jan 1, 2016

Dave Ritche said:

thanks borg!i will have to use an iframe for that,then?

Not necessarily. You can use a simple jquery javascript to include a header or footer like this:

JavaScript:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
  $("#header").load("header.html");
  $("#footer").load("footer.html");
});
</script>

<body>
<divid="header"></div>
<!--Remaining section-->
<divid="footer"></div>
</body>

Dave Ritche · Jan 1, 2016

T

Borg said:
Not necessarily. You can use a simple jquery javascript to include a header or footer like this:
JavaScript:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
  $("#header").load("header.html");
  $("#footer").load("footer.html");
});
</script>

<body>
<divid="header"></div>

<divid="footer"></div>
</body>

hAnk you very much!
I was actually unaware of such functions.
Can we use jquery to add the nav bar to every page?

Borg · Jan 1, 2016

Dave Ritche said:

Thank you very much!
I was actually unaware of such functions.
Can we use jquery to add the nav bar to every page?

Yes, just add it to the header.html file.

Borg · Jan 1, 2016

BTW, if you have any loading issues, try putting the script after the body section.

Dave Ritche · Jan 1, 2016

Borg said:

Yes, just add it to the header.html file.

Thanks!
I'm very thankfull to you for this help...

jtbell · Jan 1, 2016

If you're using PHP, you can also use the PHP 'include' or 'require' function. All my pages are PHP and have something like the following at the beginning of the <head> section:

Code:

<?php require 'common_head.php' ?>

This includes code for the traditional favicon, the apple-touch-icon, the android-chrome icon, a link to my master CSS stylesheet, etc. After this 'require' statement comes all the page-specific header stuff: the <title>, meta description, etc.

Borg · Jan 1, 2016

Or, the jsp version:
<jsp:include page="header.jsp"/>

Icon Help with HTML & CSS | Get Answers Now!

Is A.I. more than the sum of its parts?

AI vs. Humans as Processors in an Environment

Sweetspot of data compression

Other than just FizzBuzz to test programmer candidates

How to show RS(U+TRS)* is equivalent to (R+SUT)SU?

Newest Blender features

Insights Revisiting the Velocity-Time Function

Insights Remote Operated Gate Control System

Insights AI Enriched Problem Solving

Insights Thinking Outside The Box Versus Knowing What’s In The Box

Insights Why Entangled Photon-Polarization Qubits Violate Bell’s Inequality

Insights Quantum Entanglement is a Kinematic Fact, not a Dynamical Effect

Icon Help with HTML & CSS | Get Answers Now!

Similar threads