Develop Reference

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

Website: Same universal menu on different pages

I'm trying to put together a website that no-longer uses frames (my previously preferred method) but a singe page format.
One big problems I've found is that each page on the site will use the same menu. Now it occurs to me that if I amend the menu at a later date, then I'd have to change it on every page manually. This seems very time consuming and Inefficient.
Can anyone suggest ways I can alter the menu code once and have it on every page? I was thinking initially of embedding a javascript anchor to a js file on each page, then I would only have to change the js file. Are there better ways to do this?
The menu is a simple image and mix of text and anchor links.
I can program HTML/JS/CSS/C++ ... and willing to look at others if necessary to achieve my goals.
Thank you.

Make a separate partial view file containing your menu code and than include it on each page you need it to use the menu.
In PHP:
<?php require_once(__ROOT__.'/mainMenu.php'); ?>
In ASP something like:
<%# Register src="~/mainMenu/mainMenu.ascx" tagname="MainMenu" tagprefix="uc" %>
<uc:MainMenu ID="MainMenu" runat="server />
Ideally you can expand this logic and create a master template page and than feed just the dynamic content in it - that keeps all your code on one place and makes changes very simple.

Smooth menu navigation

I'm currently in the midst of developing a site. The current layout is pretty basic.
There's a horizontal menu navigation across the top, and there is a main centered div beneath the menu that holds the rest of the HTML and information and so on.
Now, when a user clicks on an item in the horizontal menu, the page reloads to display the new page with the new HTML as it should. However, on each page I have to copy the menu HTML to it. This seems redundant and unnecessary. So I was thinking about it and thought of this way...
Through javascript, I get the html page and display on the main content div. Like so...
$.get( "newpage.html", function( data ) {
$("#content-div").html( data );
});
All scripts, css, and html and now loaded onto the main original page. I can two immediate benefits...
The page has a seamless, smooth transition when it comes to displaying a new page
I do not have redundant HTML when it comes to the menu
Is this optimal though? Is it a good practice to use a $.get(); call to load a new HTML page as the main method of page navigation? Are there better alternatives?
I've considered Jquery Tabs but this requires all of the HTML to be loaded beforehand, which I was hesitant about.

The answer is that it depends.
If there are multiple pages that have similar layouts and simple elements, then yes, the $.get(); method would work, but could be even faster and smoother.
When I come across this junction, I would rather just keep the existing HTML elements and just load new content into them.
Again, I don't have the full code, so I could show you (and anyone else who sees this) what I mean if you shared, but that's up to you.
Now, if some of the pages had more complex elements, you should navigate by reloading.
In that space, consistency is key.
To not be redundant with your code, you just need to make your site like a template.
For example, you could have three pages (header, footer, and the page itself) and use PHP to load the header and footer in while only writing the code once.
header.html
<html>
<head>
Fill with meta info, title, etc.
</head>
<body>
<div class="nav">
Put the nav here.
</div>
index.php
<?php include_once "header.html"; ?>
<div class="main">
Just fill it with all the page's content.
</div>
<?php include_once "footer.html"; ?>
footer.html
<div class="footer">
Footer info here.
</div>
</body>
</html>
What this allows is, aside from edit once, do everywhere, non-redundant HTML and also for CSS edits to be preserved across the site, as long as in each individual page the <div>'s are in the same class
Again, as I first said, it all depends.
If you have simple content and don't mind spaghetti code, you would be better suited to just replace the div info directly on each navigation use.
But, this method is, at least from what I've experienced, more widespread and versatile, so I'd recommend the template-esque method with PHP being loaded in.

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
}

Javascript ends in Errorpage in Joomla

Currenly I'm trying to animate the component module for a website for a school project. The animation contains a fadeIn/fadeOut and a change of the content without loading a whole new website. After the animation it adds a hashtag to the URL (like #about-me). In Joomla there appears only my 404 Errorpage and the animation doesn't take effect. It works perfectly on the HTML-Only Version and in Typo3 but not in Joomla. Google shows no result to this question, only to special plugins and modules but not for the general modules. How can I use it the right way? You can watch the side under:HTML: http://www.aks-schulinfo.de/gtm3_big/24h/essmannExample of errored jQuery: http://www.aks-schulinfo.de/gtm3_big/24h/essmann/js/dynamicpage.jsThanks for your help.

Okay, you'd like to change the page's content without reloading the page. One of the easiest ways to do this is to load all of the content on the page, and then hide everything that's unrelated. So, setgup your index.php page (or which ever is your main) with all of the content separated into their own divs.
<div id="contentHome"> .... </div>
<div id="contentAnmeldung"> .... </div>
<div id="contentRegelwerk"> .... </div>
<div id="contentSitempa"> .... </div>
Use javascript to find the current hash tag with location.hash, then switch the possibilities and show related content while hiding the other three. If you're really gung-ho, you can do the same with php as the page is being created so that people can link to specific "pages" still.
NOTE: This works well with limited content like the site currently has. Don't even try it if you have a lot of content because page load times will be horrendous.

The contentchange without reloading is now working fluently, thank you! The other half (the fades) are still not working. Why does the fadeeffect apply at the html-only view but not in at the Joomla site?
Links:
HTML-Only: www.aks-schulinfo.de/gtm3_big/24h/essmann/htmlonly
Joomla-version: www.aks-schulinfo.de/gtm3_big/24h/essmann/