All of your scripts have access to all elements on the page. Because you know the id attribute of the element that controls the width of the grid, you can get a reference to it in JavaScript and then change the id.
Here's a quickie example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<html>
<head>
<title>Modifying Grid Width Scriptologically</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/grids/grids.css" type="text/css">
<style>
.yui-t7 {background-color:#CCCCFF;}
</style>
</head>
<body>
<div id="doc" class="yui-t7 root">
<div id="hd"><h1>Modifying Grid Width Scriptologically</h1></div>
<div id="bd">
<div class="yui-g">
<p><a href="#" id="" class="docswitch">doc</a></p>
<p><a href="#" id="2" class="docswitch">doc2</a></p>
<p><a href="#" id="3" class="docswitch">doc3</a></p>
<p><a href="#" id="4" class="docswitch">doc4</a></p>
</div>
</div>
<div id="ft"></div>
</div>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yuiloader-dom-event/yuiloader-dom-event.js"></script>
<script language="javascript">
(function() {
var root = document.getElementById("doc");
var setRoot = function(e) {
root.id = ("doc" + YAHOO.util.Event.getTarget(e).id);
}
YAHOO.util.Event.on(YAHOO.util.Dom.getElementsByClassName("docswitch", "a"), "click", setRoot);
})();
</script>
</body>
</html>
Regards,
Eric
On May 16, 2008, at 5:06 PM, braz_ford wrote:
I have an application with a relatively static header and I need to
update the yahoo gris body <div id="bd"> with an AJAX call. Since the
grid template information is in the main div, which is outside the
scope of the bd div, I'm not saure how I can switch grid column
settings using AJAX.