Header and Footer link to multiple web pages - javascript

I am trying to separate a header and footer of my webpage from the index page. I found a javascript code and html tag for this:
<script>
$(function(){
$("[data-load]").each(function(){
$(this).load($(this).data("load"), function(){
});
});
})
</script>
<nav data-load="header.php"></nav>
It worked out. It displayed the header in the index page. However I just noticed that when I am trying to hover the menu in the index page, the submenu can no longer display. while in header page there seems to be no problem. It displays the menus properly.
I can still see the submenus in header page whenever i hover the mouse. Nonetheless I can no longer do this on index page.
I am thinking maybe there's a conflict between my javascript code with the code I used to link the header in index page.
Please help me figure out what's wrong and what would be the possible code for this in order for it to display the menu properly.
Thank you!

you can use php header function rather than using javascript

Related

loading navbar for the whole site, how should i deal with the links?

I have just started this small project for a website and I thought i should use only one menu bar for the whole site, since it's kinda tedious to have to change all the links for all the pages in the menu bar.
I have found the following code for loading my menu bar:
<div id="nav-placeholder"></div>
<script type="text/javascript">
$(function(){
$("#nav-placeholder").load("navbar.html");
});
</script>
It works fine and I do get my menu, however I find that the links basically work the same as if I just had the menu on the page instead of loading it.
So for example if I am on the root directory everything loads fine, but as soon as I move up one directory the links wont work anymore.
I know this can be fixed by simply changing them, but then I would have to make more than a couple of navbars for the whole site?
Any fix around this?, hope you guys get my idea, would appreciate any help.
If you're using anything that can dynamically create pages on the fly like ASP or PHP then you could make a separate page with just the menu in and include it in each page that needs it. For example:
ASP:
<!-- #Include virtual="menu.aspx" -->
PHP:
<?php include 'menu.php';?>

Link to div not working properly

I'm making a site where almost all the different sections are on the home page and i use jQuery scroll to scroll to them when i click the link in the navigation bar
I had to make a different page and i wanted to link those sections to that page too, like when i click about on the other page it takes me to the home page's about div so i used this code for it
About.
It does take me to the about div on the index but that div is on the middle of my screen instead of top
I mean the starting of the div is supposed to be at the top of the screen (just like it is when i navigate to it using a link on the homepage)
Is there any way to fix this?
Edit:
What it looks like when i use the link on the same page:
https://gyazo.com/b51f24e9a13c6f0c4115bc38df34081f
What it looks like when i use the link on the other page:
https://gyazo.com/3724c7486aeef34cc7be5547fb9ffa53
I hope it makes sense
Edit: It works fine in chrome and the issue only occurs in firefox
I created a plnkr< https://plnkr.co/edit/jmKjbwmKCvKGfz3QuExx?p=preview > !#div2 will be on top after clicking the hyperlink on new.html!
<a href="index.html#div2">
Is there enough content after this About section. If isn't then it won't appear on the top.
What does the other end of the anchor look like? It should go e.g. like this:
<div id="about">...</div>
One of the reasons for this can be that your page does not have enough height to move about to the top of the screen. To overcome this, you can add a min-height to the page or the div.
Another reason can be that a part of the page is populating after page load (for example - images) which is increasing the height of the page. So, then the page is loaded about shows at the correct place, but when you link it from another page, it does not get enough time to populate that part of the page. To solve this, you can make that part of the page of fixed height in CSS.
I can give you code solution if you share code for your page.
You can use document.location place of anchor tag.
<div id="section1_ID">Click Me</div>
<div id="section1_ID">Click Me</div>
<div id="section1_ID">Click Me</div>
Referral link.
<div onClick="document.location='service.html#section1_ID';">
<div onClick="document.location='service.html#section2_ID';">
<div onClick="document.location='service.html#section3_ID';">
For more clearification.
Link a div to a particular section on a different page in HTML

JavaScript navigation

Right so basicly what going on is I have a website I'm trying to build with a ajax navigation so it gets the webpages and loads them into the same page. what the issue is when I put content in normally it works fine but when I try to add content to an external doc and access it from the navigation the boxes split you can see it here http://101.177.243.251/
Does anyone know how to fix this. http://101.177.243.251/ is where it is hosted if you could have a look and see if you could help me.
That gap is from the margin on the first paragraph tag.
The following CSS should fix the issue:
.pageContent {
overflow: hidden;
}

CSS/js cascading Verticle Menu accordion: trying to make my active page show as active

given up tearing my hair out, can anyone help?
I'm trying to get the active page to apply a separate style, in the example same as when you click on test1 ie have the dark background hen on the homepage or about us.
http://www.tait-design.com/devsites/test-nav/index.asp
the main pages don't go anywhere ie test1 but the page test1-1 and test2-1 do as examples
I think the issue will lie in the js
http://www.tait-design.com/devsites/test-nav/js/accordion.js
and maybe the css (can't put the full url in)
/css/black.css
I've made a couple of the classes different colors on the text to help identify
I've picked up someone else's work I suspect it's a template site, which has been altered, the left nav wasn't done as an include so each page had a seperate markup to make the active page ...look active. I've changed this to asp just for the includes to work off my site, it will be php though.
This can be done purely in CSS, no Javascript is required.
First, give unique classes to each of the body tags on your pages.
For instance, on the home page it would be something like <body
class="home">.
Then give the anchor tag of the matching link the same class (ie, - see that I've added a
second class to the link).
Now you can specifically style that link in CSS when it's the active
page:
body.home #menu-1 a.home {
// whatever styling you like
}

Jcarousel and display: none + SEO concern

I am using jcarousel on a page in 3 different sections. I initially show the first section and hide the other two with display: none.
I have done some googling and found this is a common problem because anything that has a display of none automatically has a width of 0 and hence jcarousel cannot set it up properly.
I found this post on SO: Hide a jCarousel when page loads
That deals with it by putting the content you don't wanna show just yet by moving it off the page, I could do that, but was wondering, would that be bad for SEO purposes? As in Google wouldn't like the content being outside of the page?
Do I have any other options?
Ok, I fixed my issue by letting the content load first and then once all the page data was loaded I ran a function to hide the relative content.
Code in header.. this runs the hideHomeCats function once everything on the page has been loaded.
$(window).load(hideHomeCats);
Where hideHomeCats is a function that hides the relevant content.
Hope this helps someone else. :)

Categories

Resources