4 Replies - 2024 Views - Last Post: 28 September 2010 - 04:30 AM

#1 Guest_Adam*


Reputation:

js doesn't work when new content loaded into div

Posted 27 September 2010 - 08:51 PM

I'm trying to create a new portfolio website and I've setup the framework the way I'd like to have it. I have some slight animation through the use of jquery, but because I want to preserver that animation availability (on click) I'm needing to do the amateur thing and swap content out in a div - similar to if I were to use an iframe *shudders*.

When you come into the site, you click on a link, and the nav moves up, and the content window opens, displaying the content for the link selected. When you click on the other links, the content simply changes. This all works as of current. The problem is though, once that new content is loaded into the main content display div, the assigned js and/ or jquery does not work.

The page is live, and can be seen here: http://www.apd-studios.com/_newport - if you click on the 'about' link, it shows the about page, but has all of the information expanded. If you look at the about page directly, http://www.apd-studi...port/about.html it has some light js that allows the headings of the resume to expand and contract - BUT it doesn't work when loaded into the content window.

Can anyone help with this??

Attached is the code for the main page

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

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="div_swap2.js"></script>
<script type="text/javascript">
$(function() {
	$('ul.hover_block li').hover(function(){
		$(this).find('img').animate({left:'285px'},{queue:false,duration:450});
	}, function(){
		$(this).find('img').animate({left:'-60px'},{queue:false,duration:500});
	});
});

$(document).ready(function(){

$('#content').hide();
$('#headspacer').show();
$('#splashmask').show();

$('a').click(function(){
$('#content').show('slow');
$('#headspacer').hide('slow');
$('#splashmask').fadeOut('slow');
});

$('a#home').click(function(){
$('#headspacer').show('slow');
$('#content').hide('slow');
$('#splashmask').fadeIn('slow');
});

});

</script>

<script type="text/javascript">
$(document).ready(function()
{
$(".r-con").hide();
$(".r0").click(function()
{
$(this).next(".r-con").slideToggle(600);
});
});
</script>



<title>ADAM ANTHONY PFEIFER | design.portfolio</title>

<link rel="stylesheet" href="style.css" type="text/css" />

</head>
<body>

<div id="headspacer">
</div>

<div id="splashmask">
<h1 class="splash">"Architecture is, is a science, is technology, is geography,</h1><br /> 
<h1 class="splash2">is typography, is anthropology, is sociology, is art, is history.<br /><br />
~ Renzo Piano
</h1>
</div>

<div id="header">
<a href="#" class="head" id="home">ADAM ANTHONY PFEIFER</a><br />
<span style="font-family: 'arial narrow', tahoma, verdana; font-size: 10pt; letter-spacing: 1px; display: block;">DESIGN PORTFOLIO</span>
</div>

<div id="nav-wrap">
<ul class="hover_block">
<li><a href="#" onclick="load('folio.html','content');return false;"><img src="images/folio.png" alt="alt" />FOLIO</a></li>
<li><a href="#" onclick="load('about.html','content');return false;"><img src="images/about.png" alt="alt" />ABOUT</a></li>
<li><a href="#" onclick="load('gallery.html','content');return false;"><img src="images/gallery.png" alt="alt" />GALLERY</a></li>
<li><a href="#" onclick="load('contact.html','content');return false;"><img src="images/contact.png" alt="alt" />CONTACT</a></li>
</ul>
</div>



<div id="content">
</div>
</body>
</html>



Is This A Good Question/Topic? 0

Replies To: js doesn't work when new content loaded into div

#2 Nakor  Icon User is offline

  • Professional Lurker
  • member icon

Reputation: 441
  • View blog
  • Posts: 1,488
  • Joined: 28-April 09

Re: js doesn't work when new content loaded into div

Posted 27 September 2010 - 09:13 PM

hard to say for sure without seeing how the about page is coded as well, but if you are trying to pull a complete html page into an existing page using ajax you'll have problems. The header information for the main page is already complete so any javascript in the head section of the imported html page will never get loaded. You could try loading the javascript files for the about page in the main page with the other javascript files.

This post has been edited by Nakor: 27 September 2010 - 09:14 PM

Was This Post Helpful? 0
  • +
  • -

#3 forest51690  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 58
  • View blog
  • Posts: 340
  • Joined: 20-March 09

Re: js doesn't work when new content loaded into div

Posted 27 September 2010 - 10:03 PM

I don't see the load() function in your code that you're calling from your links. If you are using a error console to test the script, it should mention that.
Was This Post Helpful? 0
  • +
  • -

#4 Guest_Adam*


Reputation:

Re: js doesn't work when new content loaded into div

Posted 27 September 2010 - 11:44 PM

my mistake - I forgot to say, the JS for the load() function is in the div_swap2.js file that is linked. here is the code for that:

function ahah(url, target) {
  document.getElementById(target).innerHTML = ' Fetching data...';
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (req != undefined) {
    req.onreadystatechange = function() {ahahDone(url, target);};
    req.open("GET", url, true);
    req.send("");
  }
}  

function ahahDone(url, target) {
  if (req.readyState == 4) { // only if req is "loaded"
    if (req.status == 200) { // only if "OK"
      document.getElementById(target).innerHTML = req.responseText;
    } else {
      document.getElementById(target).innerHTML=" AHAH Error:\n"+ req.status + "\n" +req.statusText;
    }
  }
}

function load(name, div) {
	ahah(name,div);
	return false;
}


Also, the about page is just a simple HTML document. here is its 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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<title>ADAM ANTHONY PFEIFER | design.portfolio</title>

<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="r-con.js"></script>

</head>

<body style="background-image: none">

<div id="con-panel" style="background-image: url('images/about_adam.jpg'); background-repeat: no-repeat; width: 469px; z-index: 100;"></div>
<div id="con-panel" style="margin-left: 23px; width: 469px;">

<p class="r0">+ Education</p>
<div class="r-con">
<p class="r1">Kansas State University</p>
<p class="r2">Master of Architecture, Graduate, May 2009</p>

<p class="r1">Fort Hays State University</p>
<p class="r2">Business and Technology Coursework</p>

<p class="r1">Hays High School</p>
<p class="r2">Industrial Tech. Emphasis, Graduate, May 2004</p>
</div>
<br />

<p class="r0">+ Skill Set</p>
<div class="r-con">
<p class="r1">Digital</p>
<ul class="r2">
	<li>Google Sketchup</li>
	<li>Autodesk AutoCAD</li>
	<li>Autodesk Revit Architecture</li>
	<li>Adobe Creative Suite | <span style="font-style: italic;">Photoshop, Illustrator, InDesign</span></li>
	<li>Microsoft Office Suite</li>
	<li>OpenOffice Production Suite</li>
	<li>Micorosft Windows Operating System</li>
	<li>Apple OSX Operating System</li>
	<li>Web Design | <span style="font-style: italic;">HTML, CSS, jQuery</span></li>
</ul>

<p class="r1">Illustration</p>
<ul class="r2">
	<li>Digital Modeling</li>
	<li>Pencil</li>
	<li>Color Pencil</li>
	<li>Pen & Ink</li>
	<li>Marker</li>
	<li>Watercolor</li>
</ul>

<p class="r1">Mechanical</p>
<ul class="r2">
	<li>Model Building | <span style="font-style: italic;">Museum Board, Foam Core, Chipboard, Plexiglass, Acrylic, Casting Resins</span></li>
	<li>Fiberglass</li>
	<li>Woodworking, Steaming & Bending</li>
	<li>Rapid Prototyping</li>
	<li>Laser Cutter</li>
	<li>Fiberglass</li>
	<li>Residential Construction & Finishing</li>
</ul>

<p class="r1">Core Coursework</p>
<ul class="r2">
	<li>Architectural Design Studio Series</li>
	<li>Structural Systems in Architecture</li>
	<li>Environmental Systems in Architecture</li>
	<li>Building & Construction Systems</li>
	<li>Planning</li>
	<li>Programming, Architectural</li>
</ul>
</div>
<br />

<p class="r0">+ Experience</p>
<div class="r-con">
<p class="r1">apd-studios<br />
Hays, Kansas | Jan 2010 - Present</p>
<p class="r2">My personally owned freelance design studio started to combat the downturn in the economy and introduce contemporary and sustainable design into Western Kansas.</p>
<ul class="r2">
	<li>Oddfellows Building Urban Loft Apartments</li>
	<li>Artist Building Urban Loft Apartment</li>
	<li>Leon's Welding & Fabrication Website</li>
	<li>Styles Dance Centre Building Graphics</li>
	<li>Jacques Micro Residence</li>
	</li>Z-House | Henderson, NV</li>
</ul><br />

<!--
<p class="r1">Kansas State University<br />
Manhattan, Kansas | Spring 2011</p>
<p class="r2">Structural Systems in Architecture Interim Instructor</p><br />
-->

<p class="r1">Kansas State University<br />
Manhattan, Kansas | Aug 2007 - May 2009</p>
<p class="r2">Teaching Assistant</p>
<ul class="r2">
	<li>Structural Systems in Architecture 1</li>
	<li>Structural Systems in Architecture 2</li>
	<li>Computing in Architecture</li>
</ul><br />

<p class="r1">Tate Snyder Kimsey Architecturs<br />
Las Vegas, Nevada | Jan 2008 - Aug 2008</p>
<p class="r2">Architectural Intern</p>
<ul class="r2">
	<li>Construction Administration</li>
	<li>Graphic Design</li>
	<li>Schematic Design</li>
	<li>Design Development</li>
	<li>Model Building</li>
	<li>Code Research</li>
	<li>Construction Documentation</li>
</ul><br />

<p class="r1">Populous, Formerly HOK Sport Venue Event<br />
Kansas City, Missouri | Summer 2007</p>
<p class="r2">Architectural Intern</p>
<ul class="r2">
	<li>Feasibility Studies</li>
	<li>Conceptual Design</li>
	<li>Design Development</li>
	<li>Construction Documentation</li>
	<li><span style="font-weight: bold;">CLIENTS INCLUDED:</span></li>
	<li>Minnesota Twins - Target Field Interiors</li>
	<li>Orland Magic - Amway Arena</li>
	<li>New York Yankees - Marketing Suite</li>
	<li>Pepperdine University - Rec Complex & New Arena</li>
</ul>
<br />
</div>
<br />
<p class="r0">+ Activities & Awards</p>
<div class="r-con">

<p class="r1">Hays Arts Council Spring 2010 Gallery Walk</p>
<p class="r2">Multi-Disciplinary Design Gallery - Academic, Professional and Freelance</p>
<p class="r1">Invited Guest Critic at University of Nevada at Las Vegas</p>
<p class="r2">All Curriculum Levels (4-Year Professional Program)</p>
<p class="r1">Invited Guest Critic at Kansas State University</p>
<p class="r2">Multiple Professors and Curriculum Levels</p>
<p class="r1">KSU CAP+D Ambassador and Mentor</p><br />
<p class="r1">College of Architecture Planning & Design 2010 Delineation Contest</p>
<p class="r2">Digital Media, 2nd place - "Speed, Sound, Style"</p>
<p class="r1">American Institute of Architecture Students</p><br />
<p class="r1">KSU CAP+D Heintzelman Award</p>
<p class="r2">Outstanding Project Nominee, Spring 2009</p>
<br /><br />
</div>

</div>

</body>
</html>


and a link to a live version of it: About page


The whole site, as it sits currently, can be seen here: apds Portfolio

p.s. to Nakor, originally, i was utilizing an AJAX script that pulled in the external html pages. I also added loadobjs() and had it reload the jquery source file and additional JS files that I had created, but it didn't always work. It would work on the first view of that page, but never on the reviews of that page unless you refreshed the whole site.
Was This Post Helpful? 0

#5 Nakor  Icon User is offline

  • Professional Lurker
  • member icon

Reputation: 441
  • View blog
  • Posts: 1,488
  • Joined: 28-April 09

Re: js doesn't work when new content loaded into div

Posted 28 September 2010 - 04:30 AM

You're about page is being loaded through an ajax call, it does not need a doctype and the javascript file in its head section is not going to get loaded. You need to load all javascript on the main page
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1