Todays noob css question

I tried a float, but the picture seemed to completely wander out of any of the divs it was supposed to sit in. Although I had probably done it wrong.
 
You have two divs called "contenttext".

And yes, I think there may be too many divs. Although I haven't properly studied his XHTML.

As long as it works for him then great.

Ah ok. So what would one do if you needed a div to cover several areas, would you set it as a class instead? (I think im making sense here). Ive now figured out how to do what I asked in the OP anyway.

Next problem I have, is how would I go about having the topbar and nav menu constant? Ie, each time I click on a link, it takes me to a new page and reloads the flashcontent. what I want is this content to stay, with only the main page content area changing. Sort of frames without frames.
 
Simple, remove the content and you now have a template.

Each time you want a new page, open template, wack in new content and save.

You could also save the top part of the site in its own html file and when you create a new page, include the top part.

Huh? I think you've misunderstood my post there.
 
Sorry, I see what you mean now. Was rushing and didn't read your post properly.

EDIT: I have found this: http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

Seems to be what you are after and it has instructions on how to use the script.

Excellent. Cheers mate, thats perfct.:)

Ive got it 99% as I want it now, however im having problems with loading flash content inside the dynamic div. All the other sections work, but the home.html page that contains the flash object is having problems. Any idea why?
http://www.afowler.co.uk/test/index.html

The index.html currently looks like;

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Alasdair Fowler Photography</title>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

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

</script>
</head>





<body> 
	<div align="center">	
	<script type="text/javascript" src="swfobject.js"></script>

		<div id="pinstripesides">
			<div id="monoSlideshow1">
				<p><strong>Please install Flash and turn on Javascript.</strong></p>
			</div>		
			<div align="center" id="navbar">
				<ul>
				<li><a href="javascript:ajaxpage('Home.html', 'contentarea');">Home</a></li>
				<li><a href="javascript:ajaxpage('About.html', 'contentarea');">About</a></li>
				<li><a href="javascript:ajaxpage('messages.php', 'contentarea');">Messages</a></li>
				<li><a href="javascript:ajaxpage('Links.html', 'contentarea');">Links</a></li>
				<li><a href="javascript:ajaxpage('Contact.html', 'contentarea');">Contact</a></li>			
				</ul>
			</div>
		</div>
	
		<script type="text/javascript">
			var fo = new SWFObject("monoslideshow.swf", "FOmonoSlideshow", "800", "100", "7", "#000000");
			fo.addVariable("showLogo", "false");
			fo.addVariable("dataFile", "monoslideshow2.xml");
			fo.write("monoSlideshow1");
		</script>

		<div id="contentarea"></div>



		<div id="footer">
			<div id="footertext">
				<p>All images and content are the copyright of Alasdair Fowler</p>
			</div>
		</div>
	</div>

</body>
</html>

And the home.html like;

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Alasdair Fowler Photography</title>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>

<body> 
	<div align="center">	
	<script type="text/javascript" src="swfobject.js"></script>

		<div id="pinstripesides">	
			<div id="monoSlideshow2">
			<p><strong>Please install Flash and turn on Javascript.</strong></p>
			</div>
		</div>


		<script type="text/javascript">
			var fo = new SWFObject("monoslideshow.swf", "FOmonoSlideshow", "800", "600", "7", "#000000");
			fo.addVariable("showLogo", "false");
			fo.addVariable("dataFile", "monoslideshow.xml");
			fo.write("monoSlideshow2");
		</script>		
	</div>
</body>
</html>
 
I think im getting closer to an answer;
http://www.dynamicdrive.com/forums/showpost.php?p=92569&postcount=3

It seems its a problem with getting Javascript into the dynamic content. Ive tried stripping the Javascript I need out and calling it with the line;

<li><a href="javascript:ajaxpage('Home.html', 'contentarea'); loadobjs('swfobject.js', 'slideshow1.js', 'slideshow2.js' )">Home</a></li>

Where slideshow1.js is;
Code:
<script type="text/javascript" src="swfobject.js"></script>

and slideshow2.js is;
Code:
<script type="text/javascript">
var fo = new SWFObject("monoslideshow.swf", "FOmonoSlideshow", "800", "600", "7", "#000000");
fo.addVariable("showLogo", "false");
fo.addVariable("dataFile", "monoslideshow.xml");
fo.write("monoSlideshow2");
</script>

But its still not working. Any idea if im way off the mark, or any other suggestions?:(
 
Right, next problem;

http://www.afowler.co.uk

If you go to my site, the homepage contains the gallery. You can then click on any of the other section which changes the dynamic content of the index.html page. However if you are in the 'home' gallery, then click on it again to go back to the start of the flash gallery, it doesn't as that page is already loaded. So.. is there a way to refresh a div tag upon the click of a link? So each time the 'home' link is clicked, the flash content div is refreshed.
 
I am not sure what you mean.

Are you saying you want to go back to the Home page [showing all the galleries] from within one of the sub-galleries by clicking the Home link?

If so, it already works. At least for me anyway...

Yeah, this is what I want. It kinda works now as I played around a bit after posting the question. However the code I put in;

Code:
javascript:history.go(0);

refreshes the entire index.html page, not just the div that contains the flash gallery. this mean that the top flash content restarts which I would like to avoid if possible.
 
Does the flash gallery itself not have a button or control for going back to the top level?

To be honest I didn't notice the slideshow at the top restarting. :p

It does, but its not as obvious as it could be. And logically the user would expect the home button to go back to the start. Yeah, the flash restarting isn't the end of the world, but its something id like to avoid if possible. Im sure there must be a way to reload individual divs on click.
 
Back
Top Bottom