PDA

View Full Version : many grids in one ID



_eldar_
28 Nov 2006, 12:58 AM
hello!

I have a problem.

I have a webshop on my locale net. I have many categories of goods in menu and grid in the second frame with the list of goods and thier properties.

I have one DIV with ID. I need to build many grids with different cols and different properties (diferent amount of cols in grids etc.) but in that one ID (by changing categories of goods - changing the grids).

Animal
28 Nov 2006, 1:45 AM
Wrap the different grids in their own divs, each with a generated ID.

Then use this class to create a stylesheet containing the "#wrapperid .ygrid-col-n" rules for each wrapper div:



/**
An object which encapsulates a dynamically created, modifiable stylesheet.
*/
function CSSStyleSheet()
{
/**
* The array of rules for this stylesheet.
* @private
*/
this.rules = [];

/**
* An associative array, keyed by the selector text containing the rule index number for
* the rule for that selector text.
* @private
*/
this.ruleIndex = [];

this.sheet = this.createSheet();
}

/**
Create the prototype with correct functions for the environment; No testing at runtime.
*/
CSSStyleSheet.prototype = function()
{
var useIEStyle = (document.createStyleSheet !== undefined);
var useDOMStyle = (!useIEStyle && (document.styleSheets !== undefined));

return {
createSheet: useIEStyle ?
function() {
return document.createStyleSheet();
} :
function() {
this.styleElement = document.createElement("style");
document.getElementsByTagName("head")[0].appendChild(this.styleElement);
return this.styleElement.styleSheet ? this.styleElement.styleSheet : this.styleElement.sheet;
},

addRule: useDOMStyle ?
function(selectorText, ruleText) {
if (!/^\{[^\}]*\}$/.test(ruleText))
ruleText = "{" + ruleText + "}";

var r = this.sheet.cssRules.length;
this.sheet.insertRule(selectorText + " " + ruleText, r);
var result = this.sheet.cssRules[r];
this.ruleIndex[selectorText] = r;

if (this.rules.length == 0)
this.rules = this.sheet.cssRules;
return result;
} : useIEStyle ?
function(selectorText, ruleText) {
ruleText = ruleText.replace(/^\{?([^\}])/, "$1");
var r = this.sheet.rules.length;
if (ruleText.length == 0)
ruleText = " "
this.sheet.addRule(selectorText, ruleText);
result = this.sheet.rules[r];
this.ruleIndex[selectorText] = r;

if (this.rules.length == 0)
this.rules = this.sheet.rules;
return result;
} :
// Browsers with no DOM stylesheet support
function(selectorText, ruleText) {
ruleText = ruleText.replace(/^\{?([^\}])/, "$1");

// If it exists, modify it.
if (!this.ruleIndex[selectorText])
this.ruleIndex[selectorText] = this.rules.length;
this.rules[this.ruleIndex[selectorText]] = ruleText;

// Build the innerHTML of the style element from our rules.
var cssText = "";
for (var sel in this.ruleIndex)
cssText = sel + " {" + this.rules[this.ruleIndex[sel]] + "}";
this.styleElement.innerHTML = cssText;
},

/**
* Change a style property in a rule.
* @param selectorText The identifier of the rule to change
* @param property The name of the style property to change
* @param value The new value of the style property.
*/
changeRule: useDOMStyle ?
function(selectorText, property, value)
{
var index = this.ruleIndex[selectorText];

// If the rule is not present, create it.
if (index == undefined)
{
return this.addRule(selectorText, property + ":" + value);
}

var oldRule = this.rules[index];
if (oldRule)
{
var cssText = oldRule.cssText;
var propSearch = new RegExp("^[^\\{]*(\\{.*" + property + "\\s*\\:\\s*)([^};]*)([^}]*})");
var ruleText = propSearch.exec(cssText);

// If the value was in the old rule...
if (ruleText)
{
// And it was different...
if (ruleText[4] != value)
{
cssText = ruleText[1] + value + ruleText[3];
this.sheet.deleteRule(index);
this.sheet.insertRule(selectorText + " " + cssText, index);
}
}
else
{
var propSearch = new RegExp("\\{([^}]*)}");
ruleText = propSearch.exec(cssText);
cssText = "{ " + ruleText[1] + "; " + property + ": " + value + " }";
this.sheet.deleteRule(index);
this.sheet.insertRule(selectorText + " " + cssText, index);
}
}
} :
useIEStyle ?
function(selectorText, property, value)
{
var index = this.ruleIndex[selectorText];

// If the rule is not present, create it.
if (index == undefined)
{
return this.addRule(selectorText, property + ":" + value);
}
var style = this.rules[index].style;
property = property.replace(/-([a-z])/gi, function(m0, m1) {return m1.toUpperCase();});
style[property] = value;
} :
// Browsers with no DOM stylesheet support
function(selectorText, property, value)
{
var index = this.ruleIndex[selectorText];

// If the rule is not present, create it.
if (index == undefined)
{
return this.addRule(selectorText, property + ":" + value);
}
var cssText = this.rules[index];
if (cssText)
{
var propSearch = new RegExp("^(.*" + property + "\\s*\:\\s*)([^;]*)(.*)$");
var ruleText = propSearch.exec(cssText);
// If the value was in the old rule...
if (ruleText)
{
// And it was different...
if (ruleText[4] != value)
{
this.rules[index] = ruleText[1] + value + ruleText[3];
}
}
else
{
this.rules[index] = cssText + "; " + property + ": " + value + ";";
}

// Rebuild the innerHTML of the style element from our rules.
cssText = "";
for (var sel in this.ruleIndex)
cssText = sel + " {" + this.rules[this.ruleIndex[sel]] + "}";
this.styleElement.innerHTML = cssText;
}
},

getRuleProperty: useDOMStyle ?
function(selectorText, property)
{
var index = this.ruleIndex[selectorText];

// If the rule is not present, create it.
if (typeof index == "undefined")
{
return;
}
var oldRule = this.rules[index];
if (oldRule)
{
cssText = oldRule.cssText;
var propSearch = new RegExp("^.*" + property + "\\s*\\:\\s*([^};]*)");
var ruleText = propSearch.exec(cssText);

// If the value was in the old rule...
if (ruleText)
{
return ruleText[1];
}
}
} : useIEStyle ?
function(selectorText, property)
{
var index = this.ruleIndex[selectorText];

// If the rule is not present, create it.
if (typeof index == "undefined")
{
return;
}
var style = this.rules[index].style;
property = property.replace(/-([a-z])/gi, function(m0, m1) {return m1.toUpperCase();});
return style[property];
} :

// Browsers with no DOM stylesheet support
function(selectorText, property)
{
var index = this.ruleIndex[selectorText];

// If the rule is not present, create it.
if (typeof index == "undefined")
{
return;
}
var cssText = this.rules[index];
if (cssText)
{
var propSearch = new RegExp("^.*" + property + "\s*\:\s*([^;]*)");
var ruleText = propSearch.exec(cssText);

// If the value was in the old rule...
if (ruleText)
{
return ruleText[1];
}
}
}
};
}();