Hallo,
Op het moment ben ik bezig met een webbased app die een tabel ophaalt uit een database via ajax, nu is die tabel niet altijd even wijd en dit zou dus geresized moeten worden aangezien de div een fixed width heeft. Ik heb al een script om te detecteren welke resolutie wordt gebruikt (inclusief landscape/portrait mode) en ik weet ook de code voor het in en uit zoomen van het rooster. mijn probleem is dus dat mensen op een ipad een net zo'n brede tabel krijgen als iemand op een iphone. Het lukt mij niet om de css automatisch aan te passen via javascript. huidige javascript:
<script type="text/javascript">
function getCSSRule(ruleName, deleteFlag) { // Return requested style obejct
ruleName=ruleName.toLowerCase(); // Convert test string to lower case.
if (document.styleSheets) { // If browser can play with stylesheets
for (var i=0; i<document.styleSheets.length; i++) { // For each stylesheet
var styleSheet=document.styleSheets[i]; // Get the current Stylesheet
var ii=0; // Initialize subCounter.
var cssRule=false; // Initialize cssRule.
do { // For each rule in stylesheet
if (styleSheet.cssRules) { // Browser uses cssRules?
cssRule = styleSheet.cssRules[ii]; // Yes --Mozilla Style
} else { // Browser usses rules?
cssRule = styleSheet.rules[ii]; // Yes IE style.
} // End IE check.
if (cssRule) { // If we found a rule...
if (cssRule.selectorText.toLowerCase()==ruleName) { // match ruleName?
if (deleteFlag=='delete') { // Yes. Are we deleteing?
if (styleSheet.cssRules) { // Yes, deleting...
styleSheet.deleteRule(ii); // Delete rule, Moz Style
} else { // Still deleting.
styleSheet.removeRule(ii); // Delete rule IE style.
} // End IE check.
return true; // return true, class deleted.
} else { // found and not deleting.
return cssRule; // return the style object.
} // End delete Check
} // End found rule name
} // end found cssRule
ii++; // Increment sub-counter
} while (cssRule) // end While loop
} // end For loop
} // end styleSheet ability check
return false; // we found NOTHING!
}
var iosrule = getCSSRule(".tabel_ios");
function changeWidth(){
var mode = window.orientation;
var size = null;
switch(mode){
case 0:
size = screen.width;
break;
case 90:
size = screen.height;
break;
case -90:
size = screen.height;
break;
case 180:
size = screen.width;
break;
}
var lowsize = "zoom: 0.65;-moz-transform: scale(0.65);-moz-transform-origin: 0 0;-o-transform: scale(0.65);-o-transform-origin: 0 0;-webkit-transform: scale(0.65);-webkit-transform-origin: 0 0;height:625px;";
var fullsize = "height:625px;background-color:#000;";
switch(size){
case 320:
iosrule.text = lowsize;
break;
case 480:
iosrule.text = fullsize;
break;
case 640:
iosrule.text = lowsize;
break;
case 768:
iosrule.text = fullsize;
break;
case 1536:
iosrule.text = fullsize;
break;
case 480:
iosrule.text = fullsize;
break;
case 960:
iosrule.text = fullsize;
break;
case 1024:
iosrule.text = fullsize;
break;
case 1136:
iosrule.text = fullsize;
break;
case 2048:
iosrule.text = fullsize;
break;
}
}
</script>
1.750 views
