Icon Help with HTML & CSS | Get Answers Now!

  • Context: HTML/CSS 
  • Thread starter Thread starter Dave Ritche
  • Start date Start date
  • Tags Tags
    Css Html
Click For Summary

Discussion Overview

The discussion revolves around methods for including an icon or header across multiple web pages using HTML, CSS, jQuery, and server-side scripting. Participants explore various techniques to avoid repetitive code and streamline the process of maintaining web pages.

Discussion Character

  • Technical explanation
  • Exploratory
  • Homework-related

Main Points Raised

  • One participant suggests using a header that is common to all pages to include the icon.
  • Another participant proposes using jQuery to load a header and footer dynamically, providing a code snippet as an example.
  • A participant expresses gratitude for the jQuery method and inquires if it can also be used to add a navigation bar to every page.
  • It is mentioned that placing the script after the body section may resolve loading issues.
  • A participant introduces the idea of using PHP's 'include' or 'require' functions to include common elements across pages.
  • Another participant mentions a similar approach using JSP with the 'jsp:include' directive.

Areas of Agreement / Disagreement

Participants generally agree on the utility of using jQuery and server-side includes to manage common elements across multiple pages. However, there are multiple approaches discussed, including jQuery, PHP, and JSP, indicating that no single method is universally preferred.

Contextual Notes

Some methods depend on specific technologies (e.g., PHP, JSP) and may not be applicable to all users. There are also unresolved considerations regarding loading issues and the best practices for script placement.

Dave Ritche
Messages
70
Reaction score
6
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!
 
Technology news on Phys.org
You could put it in a header that each of your pages uses.
 
  • Like
Likes   Reactions: Dave Ritche
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?
 
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>
 
  • Like
Likes   Reactions: Dave Ritche
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>
<!--Remaining section-->
<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?
 
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.
 
  • Like
Likes   Reactions: Dave Ritche
BTW, if you have any loading issues, try putting the script after the body section.
 
Borg said:
Yes, just add it to the header.html file.
Thanks!
I'm very thankfull to you for this help...
 
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.
 
  • #10
Or, the jsp version:
<jsp:include page="header.jsp"/>
 

Similar threads

HTML/CSS Container shrinks at certain screen widths (CSS)
  • · Replies 5 ·
Replies
5
Views
3K
HTML/CSS [CSS] Why do my containers shrink at screen widths <347px?
  • · Replies 5 ·
Replies
5
Views
3K
HTML/CSS Are HTML and CSS files necessary in the HTDOCS folder for PHP to work in XAMPP?
  • · Replies 3 ·
Replies
3
Views
3K
HTML/CSS Cascading Style Sheets in XHTML 1.0 STRICT
  • · Replies 4 ·
Replies
4
Views
3K
Comp Sci Designing HTML+CSS for 23 toothpicks game
  • · Replies 4 ·
Replies
4
Views
2K
HTML/CSS HTML/CSS: Placing DIVs Next to Each Other
  • · Replies 6 ·
Replies
6
Views
3K
HTML/CSS Help> make an HTML page to solve engineering examples
  • · Replies 12 ·
Replies
12
Views
3K
HTML/CSS I'm trying to center box in CSS and HTML
  • · Replies 1 ·
Replies
1
Views
3K
I'm struggling with the CSS counter mechanism(s)
  • · Replies 1 ·
Replies
1
Views
2K
HTML/CSS Is There a Way to Indent Tables in XHTML?
  • · Replies 3 ·
Replies
3
Views
3K