CSS grid sticky not working inside of jQuery .load - javascript

The website I'm building has a menu (i.e. navigation bar). The menu shows up on each page. I will have to edit the menu regularly, and so I wanted to have only one menu.html to edit that would be used on all pages, using jQuery's .load
I used this stackoverflow answer to successfully implement my centralized menu. In my index.html it looks like this:
<div id="menu-placeholder">
</div>
<script>
$(function(){
$("#menu-placeholder").load("menu.html");
});
</script>
The menu is a standard .html that has CSS to back it up. They all worked perfectly before centralizing my menu.
However, I want my menu to be sticky, and this no longer works. I have a menu.css which implements a grid and makes it sticky. It worked before I changed to a centralized menu. Now the menu scrolls up without sticking. Elements inside the grid can be made sticky, but they are only sticky in relationship to the menu, not the page. My theory is that because the menu is being loaded into menu-placeholder, the menu is sticky in relation to menu-placeholder, and not in relation to the webpage/body. I have tried to make menu-placeholder sticky, but it doesn't seem to do anything. Is my theory correct? And if so what is the solution? If not, what is causing the problem?

I have solved it!!! And I am so angry.
<div id="menu-placeholder">
</div>
<script>
$(function(){
$("#menu-placeholder").load("menu.html");
});
</script>
This code must go inside the html element that you want to make sticky, not outside of it. So it looks like this:
<menu>
<div id="menu">
</div>
<script>
$.get("menu.html", function(data){
$("#menu").replaceWith(data);
});
</script>
</menu>
and then menu.html would be a copy of your original menu, but with the menu tag removed. I tried everything, including almost this solution, but it never occurred to me to place the div and script inside the menu.

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';?>

Header and Footer link to multiple web pages

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

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

A Href= "javascript :;"

a href= "javascript :;" class="filter" data-filter="" works fine, but it does not work with responsive meanmenu by meanthemes, can someone please help, thanks in advance.
I tried the option in meanmenu not to remove the class attributes but it failed.
Sorry, but I can't find the begining of something that would start to make any sense in your question.
It seems to be very specific to a particular context. You could perhaps succintly describe that context ...
... and specifically what you are trying to achieve.
Some hints, though :
<a href="javascript:§some code here§;" §other relevant attributes§>;" ...>
is generally not a good idea :
The HTML Anchor Element () defines a hyperlink to a location on the same page or any other page on the Web.
The element that is intended to react to a click by executing JS code is the
<button>
Second best would be a
<div>
or at last resort a
<span>
if you really need your action to be in-line, which would be a bit unorthodox from a UX point of view.
At any rate : give your clickable element an id attribute, then, in a distinct and separate .js file, define what it does like so :
document.getElementById('thatId').addEventListener('click', function(e){
/*
* Your code goes here.
* The event argument e holds all what you need to know about
* what was clicked.
*/
});
In the "Related" side bar, I see this very relevant thread. Read it seriously.
I am creating a webpage with a hyperlinks menu bar on the top of the page. When I click a link in the menu bar I am calling a javascript that will display portfolio item images in the body of the page. Means when I click web design it shows images tagged under web design. When I click mobile it displays images pertaining to mobile. I already have it working from a template that I downloaded. But when I am using the mobile responsive menu bar called meanmenu the javascript does not work. The mobile responsive menu only opens links to Web pages. I hope you are perceiving my problem now...thanks

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
}

Categories

Resources