7 replies [Last post]
pmathia
pmathia's picture
Offline
Regular
Lebanon
Last seen: 12 years 32 weeks ago
Lebanon
Timezone: GMT+2
Joined: 2008-03-29
Posts: 13
Points: 0

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?

Tags:
pmathia
pmathia's picture
Offline
Regular
Lebanon
Last seen: 12 years 32 weeks ago
Lebanon
Timezone: GMT+2
Joined: 2008-03-29
Posts: 13
Points: 0

The code of my question lies

The code of my question lies here:

first this is the index.html file where the Ajax navigation is:



AJAX Demo




Content stuffs.



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":

Article1

Article heading

Lorem 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.

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.

Curabitur sit amet risus

Lorem 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.

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.

Praesent rutrum

Nam scelerisque dignissim quam. Ut bibendum enim in orci. Vivamus ligula nunc, dictum a, tincidunt in, dignissim ac, odio. Quisque faucibus lorem eget sapien.

This is the pull quote. It's really very exciting, so read it now! Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Fred Bloggs

Habitant morbid


Nam scelerisque dignissim quam. Ut bibendum enim in orci. Vivamus ligula nunc, dictum a, tincidunt in, dignissim ac, odio.


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

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 16 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

First thing I'd do is slap a

First thing I'd do is slap a doctype on each of your HTML pages and see what happens in the browsers.

Verschwindende wrote:
  • CSS doesn't make pies

pmathia
pmathia's picture
Offline
Regular
Lebanon
Last seen: 12 years 32 weeks ago
Lebanon
Timezone: GMT+2
Joined: 2008-03-29
Posts: 13
Points: 0

I have slapped the following

I have slapped the following doctype on all the files I am using:

nothing happened in IE7 although in Firefox the AJAX links are displaying their corresponding css links.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 47 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

ajax isn't an iframe. css

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.

pmathia
pmathia's picture
Offline
Regular
Lebanon
Last seen: 12 years 32 weeks ago
Lebanon
Timezone: GMT+2
Joined: 2008-03-29
Posts: 13
Points: 0

I would like to share the

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

now in your ajax menu you call this function in the href anchor with onclick event like in this example below:

Page 1

tell me if you find any better alternative solution Smile

ABCruz
ABCruz's picture
Offline
Enthusiast
Pilipinas
Last seen: 8 years 15 weeks ago
Pilipinas
Timezone: GMT+8
Joined: 2005-06-16
Posts: 279
Points: 0

^Will the solution work if

^Will the solution work if the visitor tabs to the link and hits enter instead of pointing and clicking on it? Smile

Arielle

I am a Man of Truth.
I am a Free Human Person.
I am a Peacemaker.

http://www.abcruz.com

techgen
Offline
newbie
Romania
Last seen: 13 years 8 weeks ago
Romania
Timezone: GMT+3
Joined: 2008-05-09
Posts: 1
Points: 0

external pages script error

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