JavaScript navigation - javascript

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;
}

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

<a href> not working, after adding some jquery javascript based image sliders

My Web-Design was working perfectly, however i added a trendy image slider within it from some other template, and now my links have stopped responding. I think it is because of the Order of calling jquery scripts etc, but im not sure how should i order them to fix this issue.
I tried many solutions available on internet, and finally worked it out. The reason links stopped working was because of Positioning of some jquery scripts that overlapped the whole page.
So i used z-index:100 for all in my page, and that enabled them. Now they are working fine.
<style>
body a {
z-index: 100;
}
</style>

Using media.js on CI

I was still newbie at CI, currently try to make elearning just using one page,
using 2 div on the main body, left and right.
on the left I give just the title and when clicking on the title, the div on the right will show the pdf viewer using media.js from http://github.com/malsup/media/tree/master
But when I tried, the result just show on the next page in full page.
any body could help me or suggest to the right links?
Thanks
Here is a simple PDF viewer for php websites check it out :
http://flexpaper.devaldi.com/

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