I want to make a one page layout for my webpage.
And I want to make that so, when i click a button in my navigation bar, it to display a div i've created for my content, but normally is hidden. Also, when i click on the logo of the page, the page goes to it's original state (without the content div showing).
I have no idea how to do this.
I guess your using Javascript and / or PHP for this?
Can you guys give me an example how to do this?
Example: http://www.basjansenmedia.nl/
When you go to themeforest, there's a separate category called One Page themes. Do have a look at it. Or, why not you Google it for yourself? Anyways, a few tutorials would be:
One Page
15 Useful HTML5 Tutorials and Examples For Beginners
Coding a CSS3 & HTML5 One-Page Website Template
Single Page Apps with AngularJS Routing and Templating
Assuming you use jquery
$('#myButton').click(function() {
$('#myNewDiv').show();
$('#myOldDiv').hide();
}
($'#logo').click(function() {
$('#myOldDiv').show();
$('#myNewDiv').hide();
}
Related
I am working on a website that has around ~20 pages. I also have a nice Navbar at the top that I want to include in every HTML page. I don't want to have to manually paste 30 lines of code in every HTML page just to have a Navbar. Is there a way I can just have a single Navbar HTML page (navbar.html) and include all the lines of code in that single page, and somehow have some HTML or JavaScript code that includes everything in that page at a specific location of my choosing?
If so, I need some direction in incorporating it. This would also be useful for my footer as well.
Thanks in advance!
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';?>
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.
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/
I have website where I need to show a blog inside my website, so i tried doing that by using iframe.Now the problem is since the blog is bigger in size, my iframe shows scroll bars and I don't want that and also I would like to know if there is any other way to show the blog in my website like if I am able to show the website in div that will be cool since div size grows as data grows.
Thanks in advance.
You can easily load any web content into a div using Prototype's AJAX updater. To work around the same origin policy you'll need a script on the server side, which loads the blog content for you, and "reflects" it back to the AJAX code, which is pretty straightforward to do using almost any server side solution (PHP, ASP, whatever).
Can you get a feed of the content in any common standard format (RSS, Atom etc) that you can then display on your site in a style that matches your layout better?
Here's a pretty good tutorial on building a simple RSS reader using jQuery.