Ajax Navigation and CSS
Regular
Location: Lebanon
Posted: Wed, 2008-04-09 22:45
Dear Programmers.
I have set an Ajax navigation menu in my site. when I click on the ajax menu item the content are dynamically fetched from an external html file and displayed in my content div.
the External html files which the Ajax menu is linked to have their own CSS files which are linked in their html header with .. @import..
The problem is when I press on an ajax link in IE7 the content of html file is displayed but without its CSS layout. In firefox2 browser when I press on an ajax link the external html file content is loaded with its CSS layout, i.e. its working perfect.
Is there something wrong in IE7 so it only loads content of external html files without their corresponding CSS linked files?? Is there something missing?
Has anyone experienced this and found any workaround?
Is there a way in php or javascript so when link is pressed on the ajax menu the corresponding CSS files of the called content get loaded dynamically?
Start Simple Think Big.
Regular
Posts: 12
Joined: 2008-03-29
Location: Lebanon
The code of my question lies
Posted: Thu, 2008-04-10 15:08
The code of my question lies here:
first this is the index.html file where the Ajax navigation is:
<html><head>
<title>AJAX Demo</title>
<script src='getnv.js'></script>
</head>
<body>
<div id='menu'>
<ul>
<li><a href="javascript:void(0);" onClick='check_content("page.php?id=index")'>Home</a></li>
<li><a href="javascript:void(0);" onClick='check_content("page.php?id=portal")'>Portal</a></li>
</ul>
</div>
<div id='content'>Content stuffs.</div>
</body>
</html>
The second file is the external html that I am fetching article1.html this file is linked to two css files "content.css" and "styling-text-1.css":
<html>
<head>
<title>Article1</title>
<link rel="stylesheet" type="text/css" href="content.css">
<link rel="stylesheet" type="text/css" href="styling-text-1.css">
</head>
<body>
<div id="container">
<div>
<h1>Article heading</h1>
<p><span class="dropCap1"><span>L</span></span>orem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
<p>Quisque faucibus lorem eget sapien. In urna sem, vehicula ut, mattis et, venenatis at, velit. Ut sodales lacus sed eros. Pellentesque tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<h2>Curabitur sit amet risus</h2>
</div><div>
<p><span class="dropCap"><span>L</span></span>orem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
<p>Quisque faucibus lorem eget sapien. In urna sem, vehicula ut, mattis et, venenatis at, velit. Ut sodales lacus sed eros. Pellentesque tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<h3>Praesent rutrum</h3>
<p>Nam scelerisque dignissim quam. Ut bibendum enim in orci. Vivamus ligula nunc, dictum a, tincidunt in, dignissim ac, odio. Quisque faucibus lorem eget sapien.</p>
</div>
<div id="col2">
<blockquote>
<p>This is the pull quote. It's really very exciting, so read it now!
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p><cite>Fred Bloggs</cite></p>
</blockquote>
<h3>Habitant morbid</h3>
<p>Nam scelerisque dignissim quam. Ut bibendum enim in orci. Vivamus ligula nunc, dictum a, tincidunt in, dignissim ac, odio.</p>
</div></div>
</body>
</html>
the css files are here "content.css":
/*----------------------------------Content formatting-------------------------------*/
h1, h2, h3, h4 {
margin: 5px;
text-transform: capitalize;
color: #666666;
text-align: left;
}
h1 {
font-size: 1.8em;
line-height: 1em;
padding-bottom: 7px;
border-bottom: 1px solid #cccccc;
margin-bottom: 7px;
font-weight: normal;
}
h2, h3 {
color: #333333;
}
h2 {
font-size: 1.3em;
}
h3 {
font-size: 1.2em;
}
h1+p {
font-weight: bold;
color: #222222;
}
p+p {
text-indent: 1.5em;
}
/*---------------------------Multi column Formatting -------------------*/
#container {
overflow: hidden;
text-align: justify;
}
#container div {
float: left;
border-right: Silver 4px solid;
width: 200px;
border-right-style: dashed;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0px;
overflow: hidden; }
#container .col2 { background: #F7F0BF; }
and "styling-text-1.css":
#container {
margin-left: 22px;
margin-right: 22px;
overflow: hidden;
}
h1 {
font-size: 1.8em;
line-height: 1em;
padding-bottom: 7px;
border-bottom: 1px solid #C9C9C9;
margin-bottom: 7px;
color: #5F5F5F;
font-weight: normal;
}
h2, h3 {
color: #274041;
}
h2 {
font-size: 1.3em;
}
h3 {
font-size: 1.2em;
margin-top: 1.65em;
}
p {
font-size: 1.2em;
margin-bottom: 1.2em;
}
h1+p:first-letter {
float: left;
font-size: 3em;
line-height: 1.0em;
margin-top: -3px;
margin-right: 0.15em;
}
.dropCap {
float: left;
height: 4.7em;
margin-top: -0.2em;
margin-left: -0.4em;
margin-right: 0.5em;
}
.dropCap span {
font-size: 4.8em;
line-height: 1em;
}
.dropCap1 {
float:left;
height: 3.3em;
margin-top: 0.4em;
margin-left: -0.4em;
margin-right: 0.5em;
border: 1px solid #9E9E9E;
background: #D1D1D1;
color: #ffffff;
padding: 0.2em 0.6em;
}
.dropCap1 span {
font-size: 4em;
line-height: 0.746em;
}
blockquote {
background: url(images/quote-open.gif) 0 0 no-repeat;
margin: 2.4em 2em;
}
blockquote p {
color: #5F5F5F;
text-align: justify;
background: url(images/quote-close.gif) 100% 90% no-repeat;
padding: 0 33px;
margin-bottom: 0;
line-height: 1.2em;
}
blockquote>p+p {
background: none;
margin-right:-1em;
margin-top: 1em;
}
cite {
background: none;
display: block;
text-align: right;
font-size: 1.1em;
font-weight: normal;
font-style: italic;
}
abbr, acronym {
border-bottom: 1px dotted #000000;
background-color: yellow;
}
"page.php":
<?php
$id = $_GET['id'];
if ($id == 'index')
{
include 'article1.html';
} else if ($id == 'portal')
{
echo "This is the PORTAL file";
} else
{
echo "No page with that ID exists.";
}
?>
and here is the javascript code "getnv.js":
function makeObject(){
var x;
if (window.ActiveXObject) {
x = new ActiveXObject("Microsoft.XMLHTTP");
}else if (window.XMLHttpRequest) {
x = new XMLHttpRequest();
}
return x;
}
var request = makeObject();
var the_content;
function check_content(the_content){
request.open('get', the_content);
request.onreadystatechange = parseCheck_content;
request.send('');
}
function parseCheck_content(){
if(request.readyState == 1){
document.getElementById('content').innerHTML = 'Loading...';
}
if(request.readyState == 4){
var answer = request.responseText;
document.getElementById('content').innerHTML = answer;
}
}
Start Simple Think Big.
Moderator
Posts: 9209
Joined: 2004-06-30
Location: Milton Keynes
First thing I'd do is slap a
Posted: Thu, 2008-04-10 16:37
First thing I'd do is slap a doctype on each of your HTML pages and see what happens in the browsers.
Regular
Posts: 12
Joined: 2008-03-29
Location: Lebanon
I have slapped the following
Posted: Fri, 2008-04-11 20:13
I have slapped the following doctype on all the files I am using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
nothing happened in IE7 although in Firefox the AJAX links are displaying their corresponding css links.
Start Simple Think Big.
Moderator
Posts: 5685
Joined: 2005-02-22
ajax isn't an iframe. css
Posted: Fri, 2008-04-11 23:20
ajax isn't an iframe. css shouldn't go in the body, what happens if you put it there isn't predictable and isn't governed by any standard. CSS is cached, so really you should add your CSS for each page into the main css that goes into the head of the page.
On Having Layout | The One True Layout | menus by listamatic
Regular
Posts: 12
Joined: 2008-03-29
Location: Lebanon
I would like to share the
Posted: Sat, 2008-04-12 19:54
I would like to share the solution to my above problem guy so if one wants to use AJAX navigation to link external html files with their corresponding CSS files in one shot here is the trick.
first I found a javascript function that loads CSS and JS files it enbeds the CSS files in a link element and embeds JS files in script element.
here is the function:
function loadobjs(){if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
now in your ajax menu you call this function in the href anchor with onclick event like in this example below:
<a class="submenu" href="javascript:ajaxpage('article1.html','mainWrap');" onclick="javascript:loadobjs('cascade/content.css', 'cascade/styling-text-1.css');">Page 1</a>tell me if you find any better alternative solution
Start Simple Think Big.
Enthusiast
Posts: 264
Joined: 2005-06-16
Location: Pilipinas
^Will the solution work if
Posted: Sun, 2008-04-13 22:30
^Will the solution work if the visitor tabs to the link and hits enter instead of pointing and clicking on it?
Arielle
I am a Man of Truth.
I am a Free Human Person.
I am a Peacemaker.
http://www.abcruz.com
newbie
Posts: 1
Joined: 2008-05-09
Location: Romania
external pages script error
Posted: Fri, 2008-05-09 09:44
Hi, I'm have created a web page based on ajax script and it work ok, but with one error.
For an easier analise, my page is http://www.silviugorea.techgenium.ro
It has an left vertical menu who load pages in div called content, and even more then that, I have an external css file wich formal each page independently. And all that works fine.
But external pages with script code (such as browser info) don't load properly. Index file don't load script for those pages.
For instance, I have tried to put a print script in each page, but it don't work.
External pages opened independently, work fine, but opened by index ...
Location of "browser info" link is http://techgenium.ro/admin/link/browser.htm . And opened separately, this is who it should look like.
Is anyone who could tell me why I get this error? Am I the only one with this? Thanks