Forums

rivritt

Oh man, a friend dropped this in my lap and I cant figure it out! I need to get a DIV to load with external code. Is this possible for this situation? THe code is pretty much done and everytime I try something new, I break it even worse! I was hoping someone could look at it and give a hand?

So here is the page it needs to load from [main_content_normal.html]. Trying to get the ul id to load:

<link rel="stylesheet" type="text/css" media="screen" href="scripts/basic.css" />

</head>

<body>
<ul id="main_content">
<div class="main_content">
<div class="image_and_desc 1">
<div class="mainimagediv_v"><img src="portfolio_files/everitt_bikeposter.jpg" alt="Bike Poster" height="533" width="426"></div>
<div class="piece_desc_v" style="margin-top: 420px;">
<h1>the british are coming!</h1>

<p>A flyer for a local annual British bike rally. Organisers wanted an oily vintage garage manual look. Cheerio!</p>
</div>
</div>
<div class="image_and_desc 2">
<div class="mainimagediv_v"><img src="portfolio_files/everitt_homeless.jpg" alt="SKCC" height="533" width="426"></div>
<div class="piece_desc_v" style="margin-top: 456px;">
<h1>skcc for the homeless</h1>

<p>Poster to bring awareness to local community about its homeless situation.</p>
</div>
</div>
</div>
</ul>
</body>
</html>

here is the page it needs to load into...

<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Thomas Cheng › Portfolio › Academic Work</title>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" media="screen" href="scripts/basic.css" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/portfolio.js"></script>
</head>...

...<div class="main_content"></div>

And here is the controller... UGH. I tried to highlight in red here all the related lines I think have to do with my problem???

$(document).ready(function() {
$('.main_content img.multiview').not(":first-child").hide();
var scrolled = false; // for categories with many pieces
var scrolling = false; // for mouse-wheel scrolls
var mw_destination; // for mouse-wheel scrolls
var main_content = $(".main_content");
var doc = $(window);
var rounded_position = Math.round((main_content.scrollTop()/591))+1;
$('.side_panel h1').add('.side_panel h3').click(function(){
document.location.href = "mailto:rich@229productions.com";
})
$('.navigation ul ul li').removeClass("selected");
$('.navigation ul ul').css("opacity","1"); // needed for slideups in IE
$('.navigation ul ul.selected').prev().prepend("<span>« </span>").append("<span> »</span>");
$('.navigation ul ul.selected').animate({opacity: 1.0}, 200).slideDown("normal", function(){
$('.navigation ul ul li.'+rounded_position).addClass("selected");
if ($(this).hasClass("longlist")) {
$(this).scrollTop(0);
$('.prev_pieces').css("top",$(this).offset().top-1);
$('.next_pieces').css("top",$(this).offset().top+$(this).height()-8);
$('.next_pieces').css('opacity','0').css('display','block').fadeTo("normal",0.5);
}
});
$('.navigation li.category p').click(function(){ // change categories
if ($('.navigation ul ul.selected').hasClass('longlist')) { // remove 'next' and 'prev' for long lists if necessary
$('.prev_pieces').fadeOut();
$('.next_pieces').fadeOut();
scrolled = false;
}
var sel_category = $(this).parent().attr("class").split(" ")[1];
$('.navigation ul ul.selected').prev().children().remove(); // remove double angle quotes
$('.navigation ul ul.selected').parent().removeClass("selected");
$('.navigation ul ul.selected').slideUp("normal",function(){
main_content.load("main_content_normal.html ul#"+sel_category,{},function(){
// on loading of new category
$('html,body').scrollTop(0);
$('.main_content img.multiview').not(":first-child").hide();
});
$('.navigation ul ul.selected').removeClass('selected');
$('.navigation ul li.'+sel_category).addClass('selected');
$('.navigation ul ul.'+sel_category).addClass('selected').prev().prepend("<span>« </span>").append("<span> »</span>");
$('.navigation ul ul.selected li.selected').removeClass("selected");
$('.navigation ul ul.selected').slideDown("normal",function(){
$('.navigation ul ul.selected li:first').addClass("selected");
if ($(this).hasClass("longlist")) {
$(this).scrollTop(0);
$('.prev_pieces').css("top",$(this).offset().top-1);
$('.next_pieces').css("top",$(this).offset().top+$(this).height()-8);
$('.next_pieces').css('opacity','0').css('display','block').fadeTo("normal",0.5);
}
});
});
});

$('.navigation ul.pieces li').click(function(){ // scrolling function for pieces
var i = ($(this).attr("class"));
$('html,body').scrollTo((i-1)*591,600);
})
function f_scrollTop() {
return f_filterResults (
window.pageYOffset ? window.pageYOffset : 0,
document.documentElement ? document.documentElement.scrollTop : 0,
document.body ? document.body.scrollTop : 0
);
}
function f_filterResults(n_win, n_docel, n_body) {
var n_result = n_win ? n_win : 0;
if (n_docel && (!n_result || (n_result > n_docel)))
n_result = n_docel;
return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}

doc.scroll(function(){ // highlight displayed piece in navigation
var rounded_position = Math.round(f_scrollTop()/591)+1;
$('.navigation ul.pieces li.selected').removeClass("selected");
$('.navigation ul.pieces li.'+rounded_position).addClass("selected");
if (rounded_position>17&&scrolled==false) { // for long lists
$('ul.selected').scrollTo(200,400);
$('.next_pieces').fadeOut();
$('.prev_pieces').css('opacity','0').css('display','block').fadeTo("normal",0.5);
scrolled=true;
} else if (rounded_position<=7&&scrolled==true) {
$('ul.selected').scrollTo(0,400);
$('.prev_pieces').fadeOut();
$('.next_pieces').css('opacity','0').css('display','block').fadeTo("normal",0.5);
scrolled=false;
}
})
$('.next_pieces').click(function(){ // scroll for more pieces in category
$('ul.selected').scrollTo(200,400);
$(this).fadeOut();
$('.prev_pieces').css('opacity','0').css('display','block').fadeTo("normal",0.5);
scrolled=true;
})
$('.prev_pieces').click(function(){ // scroll for previous pieces in category
$('ul.selected').scrollTo(0,400);
$(this).fadeOut();
$('.next_pieces').css('opacity','0').css('display','block').fadeTo("normal",0.5);
scrolled=false;
})
$('.main_content img.multiview').livequery('click',function(){ //code for multiview items
if ($(this).is(":last-child")) {
$(this).hide().parent().children("img:first").show();
$(this).parents('.image_and_desc').find('.variable').html("1");
} else {
$(this).hide().next().show();
var temp = $(this).parents('.image_and_desc').find('.variable').html();
$(this).parents('.image_and_desc').find('.variable').html(((temp)+1)+'');
}
})
})

toby

WTF!

Why is everything inside a ul tag?

A link might be handy.

pab

"toby" said:

Why is everything inside a ul tag?

A link might be handy.

my first thought as well.

urbanbricks

I'm not 100% clear on your requirements, but if you're looking to load an external html file into a div, check this out:
http://tinyurl.com/zlb8a

Works well. I'm new to Javascript so this may be outdated use of the framework... :?

treehouse : what would you like to learn today?

Forums

Jquery HELP!!