https://jsfiddle.net/jeeyi345/uchhjz7L/3/
I want to connect a JSP web service I built and return parsed elements, as follows, but the result return slowly.
When I parsed only 1 element the page response a lot faster, but I don't know why when I parsed them all, maybe like a few minutes or longer.
There is only a line of JSON array from the JSP page, like the following:
[{"UID":11,"UrlDate":"2016-10-24","UrlTime":"15:00:00","Drug":2,"AttLevel":43.2864439246683,"AttLevel_Lab":"普通","Allpoint":5,"PVTRuleBase":2,"MemLevel":87}]
Is there something wrong with my code? Thanks in adavance.
// https://jsfiddle.net/vobmzdgr/7/
function json_decode(json) {
return $.parseJSON(json);
}
function json_format(json) {
return JSON.stringify(json_decode(json), null, 2);
}
function json_highlight(json) {
/*
pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
*/
if (typeof json != 'string') {
json = JSON.stringify(json, undefined, 2);
}
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
var cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'color: red;'; //key
} else {
cls = 'color: green;'; //string
}
} else if (/true|false/.test(match)) {
cls = 'color: blue;'; //boolean
} else if (/null/.test(match)) {
cls = 'color: magenta;'; //null
}
return '<span style="' + cls + '">' + match + '</span>';
});
}
function json_AttLevel(json) {
var obj = json_decode(json);
return obj[0].AttLevel;
}
function json_AttLevel_Lab(json) {
var obj = json_decode(json);
return obj[0].AttLevel_Lab;
}
function json_PVTRuleBase(json) {
var obj = json_decode(json);
return obj[0].PVTRuleBase;
}
function json_Drug(json) {
var obj = json_decode(json);
return obj[0].Drug;
}
function json_Allpoint(json) {
var obj = json_decode(json);
return obj[0].Allpoint;
}
$(document).ready(function() {
// var URL="http://140.138.77.151:8080/personalAssementNEW";
var URL = "http://140.138.77.151:8080/FallRiskAPI/getInputData.jsp?ID=11&DATEINFO=2016-10-24&TIMEINFO=15:00:00";
$.ajaxPrefilter(function(options) {
if (options.crossDomain && jQuery.support.cors) {
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
}
});
setInterval(function() {
$.get(URL, function(response) {
//原內容
$("#output").text(response);
var bodydata = response;
bodydata = $("<p>" + bodydata + "</p>").text();
var jdata = json_format(bodydata);
$("#output_data").html("<pre>" + json_highlight(jdata) + "</pre>");
$("#output_AttLevel").html("<pre>" + json_AttLevel(jdata) + "</pre>");
$("#output_AttLevel_Lab").html("<pre>" + json_AttLevel_Lab(jdata) + "</pre>");
$("#output_PVTRuleBase").html("<pre>" + json_PVTRuleBase(jdata) + "</pre>");
$("#output_Drug").html("<pre>" + json_Drug(jdata) + "</pre>");
$("#output_Allpoint").html("<pre>" + json_Allpoint(jdata) + "</pre>");
});
// alert("reloaded");
}, 1500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- https://jsfiddle.net/vobmzdgr/7/ -->
<script language="javascript" src="http://3wa.tw/inc/javascript/jquery/jquery-1.11.3.min.js"></script>
收到的內容:<br>
<div id="output"></div>
<hr>
解算的內容:<br>
<div id="output_data"></div>
專注力等級:<div id="output_AttLevel_Lab"></div>
專注力測驗等級:<div id="output_PVTRuleBase"></div>
用藥分數:<div id="output_Drug"></div>
整體分數:<div id="output_Allpoint"></div>
Related
QGIS2WEB exports a map that allows to query by click multiple layers and multiple features at the same time, showing all the result in the outgoing popup as in this example where 6 different layers are queried.
I would like to add the ability to selectively highlight the query feature.
Do you know how to do it? I thought of a graphic with a button (I did it with photoshop):
example of 6 features queried in different layers
example whit highlight button for any feature
The code for highlighting is already present in qgis2web as pointermove, could this be reused and applied in the popup? I leave it written as an example:
if (doHighlight) {
if (currentFeature !== highlight) {
if (highlight) {
featureOverlay.getSource().removeFeature(highlight);
}
if (currentFeature) {
var styleDefinition = currentLayer.getStyle().toString();
if (currentFeature.getGeometry().getType() == 'Point') {
var radius = styleDefinition.split('radius')[1].split(' ')[1];
highlightStyle = new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: 'rgba(255,255,0,1)'
}),
radius: radius,
stroke: new ol.style.Stroke({
color: 'rgba(255, 255, 0, 1)',
width: 3
}),
})
})
} else if (currentFeature.getGeometry().getType() == 'LineString') {
var featureWidth = styleDefinition.split('width')[1].split(' ')[1].replace('})','');
highlightStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255,255,0,1)',
lineDash: null,
width: featureWidth
})
});
} else {
highlightStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 0, 0)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(255, 255, 0, 1)',
lineDash: [10, 10],
width: 3
}),
})
}
featureOverlay.getSource().addFeature(currentFeature);
featureOverlay.setStyle(highlightStyle);
}
highlight = currentFeature;
}
}
This is the graphical output
The entire current popup code, which I ask you to change, is this:
var onSingleClick = function(evt) {
if (doHover) {
return;
}
if (sketch) {
return;
}
var pixel = map.getEventPixel(evt.originalEvent);
var coord = evt.coordinate;
var popupField;
var currentFeature;
var currentFeatureKeys;
var clusteredFeatures;
var popupText = '<ul>';
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
if (feature instanceof ol.Feature && (layer.get("interactive") || layer.get("interactive") == undefined)) {
var doPopup = false;
for (k in layer.get('fieldImages')) {
if (layer.get('fieldImages')[k] != "Hidden") {
doPopup = true;
}
}
currentFeature = feature;
clusteredFeatures = feature.get("features");
var clusterFeature;
if (typeof clusteredFeatures !== "undefined") {
if (doPopup) {
for(var n=0; n<clusteredFeatures.length; n++) {
clusterFeature = clusteredFeatures[n];
currentFeatureKeys = clusterFeature.getKeys();
popupText += '<li><table>'
for (var i=0; i<currentFeatureKeys.length; i++) {
if (currentFeatureKeys[i] != 'geometry') {
popupField = '';
if (layer.get('fieldLabels')[currentFeatureKeys[i]] == "inline label") {
popupField += '<th>' + layer.get('fieldAliases')[currentFeatureKeys[i]] + ':</th><td>';
} else {
popupField += '<td colspan="2">';
}
if (layer.get('fieldLabels')[currentFeatureKeys[i]] == "header label") {
popupField += '<strong>' + layer.get('fieldAliases')[currentFeatureKeys[i]] + ':</strong><br />';
}
if (layer.get('fieldImages')[currentFeatureKeys[i]] != "ExternalResource") {
popupField += (clusterFeature.get(currentFeatureKeys[i]) != null ? autolinker.link(clusterFeature.get(currentFeatureKeys[i]).toLocaleString()) + '</td>' : '');
} else {
popupField += (clusterFeature.get(currentFeatureKeys[i]) != null ? '<img src="images/' + clusterFeature.get(currentFeatureKeys[i]).replace(/[\\\/:]/g, '_').trim() + '" /></td>' : '');
}
popupText += '<tr>' + popupField + '</tr>';
}
}
popupText += '</table></li>';
}
}
} else {
currentFeatureKeys = currentFeature.getKeys();
if (doPopup) {
popupText += '<li><table>';
for (var i=0; i<currentFeatureKeys.length; i++) {
if (currentFeatureKeys[i] != 'geometry') {
popupField = '';
if (layer.get('fieldLabels')[currentFeatureKeys[i]] == "inline label") {
popupField += '<th>' + layer.get('fieldAliases')[currentFeatureKeys[i]] + ':</th><td>';
} else {
popupField += '<td colspan="2">';
}
if (layer.get('fieldLabels')[currentFeatureKeys[i]] == "header label") {
popupField += '<strong>' + layer.get('fieldAliases')[currentFeatureKeys[i]] + ':</strong><br />';
}
if (layer.get('fieldImages')[currentFeatureKeys[i]] != "ExternalResource") {
popupField += (currentFeature.get(currentFeatureKeys[i]) != null ? autolinker.link(currentFeature.get(currentFeatureKeys[i]).toLocaleString()) + '</td>' : '');
} else {
popupField += (currentFeature.get(currentFeatureKeys[i]) != null ? '<img src="images/' + currentFeature.get(currentFeatureKeys[i]).replace(/[\\\/:]/g, '_').trim() + '" /></td>' : '');
}
popupText += '<tr>' + popupField + '</tr>';
}
}
popupText += '</table>';
}
}
}
});
if (popupText == '<ul>') {
popupText = '';
} else {
popupText += '</ul>';
}
var viewProjection = map.getView().getProjection();
var viewResolution = map.getView().getResolution();
for (i = 0; i < wms_layers.length; i++) {
if (wms_layers[i][1]) {
var url = wms_layers[i][0].getSource().getGetFeatureInfoUrl(
evt.coordinate, viewResolution, viewProjection,
{
'INFO_FORMAT': 'text/html',
});
if (url) {
popupText = popupText + '<iframe style="width:100%;height:110px;border:0px;" id="iframe" seamless src="' + url + '"></iframe>';
}
}
}
if (popupText) {
overlayPopup.setPosition(coord);
content.innerHTML = popupText;
container.style.display = 'block';
} else {
container.style.display = 'none';
closer.blur();
}
};
You can help me?
Thank you
I'm using Vanilla JavaScript to iterate through a JSON object. Some properties inside the object are not defined and these are appearing as undefined when populated the page with the data.
Is this the best way to iterate through a large data-set using native JavaScript and what am I doing wrong so that the keys that are not defined inside the data-set are ignored?
Also, is forEach the best way or for ... in?
Condensed version of my code below:
/* Sample data:
[{
"bhp": 354,
"model": "a45",
"make": "mercedes"
}, {
"model": "m4",
"make": "bmw"
}]
*/
xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.myjson.com/bins/1cjhoe');
xhr.onload = function() {
var cars = JSON.parse(xhr.responseText);
if (xhr.status === 200) {
populate(cars);
} else {
console.log('Request failed. Returned status of ' + xhr.status);
}
};
xhr.send();
function populate(cars) {
var list = document.getElementById('list');
cars.forEach(function(car) {
var carDiv = document.createElement('div');
carDiv.className = 'car';
carDiv.innerHTML = '<div>' + car.make + ' </div>';
carDiv.innerHTML += '<div>' + car.model + ' </div>';
carDiv.innerHTML += '<div>' + car.bhp + ' </div>';
list.appendChild(carDiv);
});
}
.car {
margin-bottom: 30px;
}
.car div {
display: inline-block;
margin-right: 20px;
font-size: 20px;
}
<div id="list">
</div>
You can just short circuit each property to an empty string.
/* Sample data:
[{
"bhp": 354,
"model": "a45",
"make": "mercedes"
}, {
"model": "m4",
"make": "bmw"
}]
*/
xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.myjson.com/bins/1cjhoe');
xhr.onload = function() {
var cars = JSON.parse(xhr.responseText);
if (xhr.status === 200) {
populate(cars);
} else {
console.log('Request failed. Returned status of ' + xhr.status);
}
};
xhr.send();
function populate(cars) {
var list = document.getElementById('list');
cars.forEach(function(car) {
var carDiv = document.createElement('div');
carDiv.className = 'car';
if (car.make) { carDiv.innerHTML = '<div>' + car.make + ' </div>'; }
if (car.model) { carDiv.innerHTML += '<div>' + car.model + ' </div>'};
if (car.bhp) { carDiv.innerHTML += '<div>' + car.bhp + ' </div>'; }
list.appendChild(carDiv);
});
}
.car {
margin-bottom: 30px;
}
.car div {
display: inline-block;
margin-right: 20px;
font-size: 20px;
}
<div id="list">
</div>
Why don't you just check if the data exists before you do anything with it?
/* Sample data:
[{
"bhp": 354,
"model": "a45",
"make": "mercedes"
}, {
"model": "m4",
"make": "bmw"
}]
*/
xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.myjson.com/bins/1cjhoe');
xhr.onload = function() {
if (xhr.status === 200) { // You need this before you parse your JSON
var cars = JSON.parse(xhr.responseText);
populate(cars);
} else {
console.log('Request failed. Returned status of ' + xhr.status);
}
};
xhr.send();
function populate(cars) {
var list = document.getElementById('list');
cars.forEach(function(car) {
var carDiv = document.createElement('div');
carDiv.className = 'car';
if (car.make) {
carDiv.innerHTML = '<div>' + car.make + ' </div>';
}
if (car.model) {
carDiv.innerHTML += '<div>' + car.model + ' </div>';
}
if (car.bhp) {
carDiv.innerHTML += '<div>' + car.bhp + ' </div>';
}
list.appendChild(carDiv);
});
}
.car {
margin-bottom: 30px;
}
.car div {
display: inline-block;
margin-right: 20px;
font-size: 20px;
}
<div id="list">
</div>
The only change to your code, is if it exists, add it. Additionally your xhr.status check was in the wrong place.
In this coding I showed progress bar on the text box. but i need loading indicator in span tag when searching for something. I added two images to better understand about it. please answer me the question.
this is flat progress in text box:
but i need the progress on span
CSS:
<style type="text/css">
.loader
{
background: url(resources/images/loader.gif);
background-repeat: no-repeat;
background-position: right;
}
</style>
JS:
try {
console.log('connections url ' , urlHolder.getconnectedusersByName);
$("#auto-complete-tag").autocomplete({
source: function(request, respond) {
$("#auto-complete-tag").addClass('loader');
var givenUserName = $("#auto-complete-tag").val();
$.post(urlHolder.getconnectedusersByName, {
userId : signedUserId,
username : givenUserName
}, function(response) {
$('#auto-complete-tag').removeClass('loader');
if(!response){
respond([]);
length = 0;
}
this.connectionsList = new Array();
for (var counter = 0; counter < response.users.length; counter++) {
var getConnectedUsers = new Object();
getConnectedUsers = {
value : response.users[counter].name,
//profileId : "onclick=return false",
image : response.users[counter].defaultImageFileName,
id:response.users[counter].id
}
this.connectionsList.push(getConnectedUsers);
}
respond (this.connectionsList);
});
},
delay: 0 ,
search: function (e, u) {
},
select : function(event, ui) {
return false;
},
response: function(event, ui) {
length = ui.content.length;
console.log('length',length );
if(length === 0) {
var noResult = {label:"No results found for you" };
ui.content.push(noResult);
}
},
}) .data('ui-autocomplete')._renderItem = function(ul, item) {
if(length !== 0){
return $('<li>')
.data( "ui-autocomplete-item", item)
.append(
'<a style="background-color: #E0F0EF; color:#0d78a3; margin-bottom: 3px; margin-top: 3px; margin-left: 3px; margin-right: 3px; font-weight: bold;">' +
'<span style="color:#86BBC9; font-weight: normal;">' +
item.label + '</span>' + '<br>'+'<span>Text message</span>'+
'<button style="margin-bottom:14px; margin-right:5px;" class=\"yellow-btn apply-btn\" id=\"apply-user-' + item.id + '\" onclick=\"openDFAChatWithUser(\'' + item.id + '\')\">Chat</button>'
+ '<span class="ui-autocomplete-icon pull-right"></span>' +
'</a>'
)
.appendTo(ul);}else{
return $('<li>')
.data( "ui-autocomplete-item", item)
.append('<a>' +
'<span class="ui-autocomplete-user">' +
item.label + '</span>' +
'<span class="ui-autocomplete-divider"></span>' +
'<span class="ui-autocomplete-icon pull-right"></span>' +
'</a>')
.appendTo(ul);
}
};
//console.log(' this.connectionsList >>> ', this.connectionsList);
} catch (e) {
console.log('getAllConnections error >>> ', e);
}
I'm writing a remote/in-browser logging tool (basically an in browser console so I can remote debug mobile devices and whatnot) and I am having trouble printing/accessing some raw DOM elements and objects (They appear to be objects when I log them to the console). When call bronsole (don't judge me) on the event object some of the DOM objects are not being looped through as if the for loop doesn't recognise it as an object. One of the objects in question is the HTMLpropertiescollection. I don't have any particular need for this oject specifically but I am logging touch events and it would be nice to be able to read all of the properties of the event object.
(function ($) {
$('body').prepend('<div id="eoenuitn345n34ntdhiu45dnth" style="position: fixed; top:0; left: 0; width: 100%; height: 100px; background-color: rgba(0,0,0,0.5); z-index: 1000000; overflow-y: auto; padding-top: 40px;"><div id="seouihtoeuitnei98e797etuiST" style="position:absolute; top: 5px; right: 5px; background-color: #C0504D; height: 20px; width: 20px;"></div></div>');
$('#eoenuitn345n34ntdhiu45dnth').click(function(e){
if($(this).height() <= 150){
$(this).animate({height: '100%'});
}else{
$(this).animate({height: '150px'});
}
});
$('#seouihtoeuitnei98e797etuiST').click(function(e){
e.stopPropagation();
if($(this).parent().height() <= 30){
$(this).parent().animate({height: '100%'});
}else{
$(this).parent().animate({height: '0px'});
}
});
$('#eoenuitn345n34ntdhiu45dnth').on('click','.oseu098oaeuno7e089',function(e){
e.stopPropagation();
if($(this).height() > 15){
$(this).css('height', '15px');
$.each($(this).children('.oseu098oaeuno7e089'), function(){
$(this).css('height', '15px');
});
}else{
$(this).css('height', 'auto');
}
if($('#eoenuitn345n34ntdhiu45dnth').height() <= 100){
$('#eoenuitn345n34ntdhiu45dnth').animate({height: '100%'});
}
});
$('#eoenuitn345n34ntdhiu45dnth').on('click','.oeusn0eui0HTDRh98oeui',function(e){
e.stopPropagation();
});
window.uonteuho8o6e8ued68uou8Color = ['#6BC3FF','#FF494F','#00D3D3','#77FF6B','#DBD300','#D470FF'];
var entityMap = {
"&": "&",
"<": "<",
">": ">",
'"': '"',
"'": ''',
"/": '/'
};
function escapeHtml(string) {
return String(string).replace(/[&<>"'\/]/g, function (s) {
return entityMap[s];
});
}
function htmlConsole(param){
var obj = (typeof param.NTDNTH8oe8uidu98NT != 'undefined') ? param.NTDNTH8oe8uidu98NT : param;
var index = (typeof param.sjtnhxsSTHxsnheu9isTH != 'undefined') ? param.sjtnhxsSTHxsnheu9isTH : null;
var preKey = (typeof param.sntuhinegdukx0euetkhe989 != 'undefined') ? '[' + param.sntuhinegdukx0euetkhe989 + ']: ' : '';
var spaceAdd = (typeof param.sNDGHBn788rnFI9 != 'undefined') ? param.sNDGHBn788rnFI9 + '____' : '';
var depth = (typeof param.netnuxie0xbenuihtdNT09 != 'undefined') ? param.netnuxie0xbenuihtdNT09 + 1 : '0';
var element = '';
if(typeof obj != null){
if(typeof obj == 'string' || typeof obj == 'number' || typeof obj == 'boolean'){
element += ('<p class="oeusn0eui0HTDRh98oeui" style="color: white; padding:2px;margin:2px; background-color: orange;"><span style="visibility:hidden">' + spaceAdd + '</span>' + preKey + escapeHtml(String(obj)) + '</p>');
}else{
var end = ('<p style="color: white; padding:2px;margin:2px;"><span style="visibility:hidden">' + spaceAdd + '</span>' + ')</p></div>');
element += ('<div id="oestniSTHSseti897e_' + depth + '" class="oseu098oaeuno7e089" style="color: white; padding:2px;margin:2px; height: 15px; overflow:hidden; cursor: pointer; background-color: ' + window.uonteuho8o6e8ued68uou8Color[depth%6] + '"><span style="visibility:hidden">' + spaceAdd + '</span>' + preKey + Object.prototype.toString.call( obj ) + '(<br>');
if(Object.prototype.toString.call( obj ) == '[object Function]'){
element += ('<p class="oeusn0eui0HTDRh98oeui" style="color: white; padding:2px;margin:2px; background-color: orange;"><span style="visibility:hidden">' + spaceAdd + '___' + '</span>' + escapeHtml(String(obj)) + '</p>');
}
if(depth < 10){ // this is because I fudge up the script with "too much recursion" on big objects. I'm in the middle of solving this, hence the redundant properties
for(var key in obj){
element += htmlConsole({NTDNTH8oe8uidu98NT: obj[key], sNDGHBn788rnFI9: spaceAdd, sntuhinegdukx0euetkhe989: key,netnuxie0xbenuihtdNT09: depth,sjtnhxsSTHxsnheu9isTH: index}).element;
}
}else{
element += end;
return {element: element, obj:obj};
}
element += end;
}
}
return {element: element};
}
$.bronsole = function(obj){
$('#eoenuitn345n34ntdhiu45dnth').prepend(htmlConsole(obj).element);
};
$.fn.bronsole = function(text){
var _this = this;
if(typeof text != 'undefined'){
$('#eoenuitn345n34ntdhiu45dnth').prepend(htmlConsole(text).element);
}
$('#eoenuitn345n34ntdhiu45dnth').prepend(htmlConsole(_this).element);
return this;
};
}( jQuery ));
I have a function to edit the style properties of a class
Unfortunately IE does not seem to like it but it does not give me an error.
Does anyone know what the issue is?
Thanks in advance
function myRemoveElement(id) {
var Node = document.getElementById(id);
Node.parentNode.removeChild(Node);
}
function boolyChangeFoo(width1, width2, width3, width4) {
if(typeof style == 'undefined') {
var append = true;
myStyle = document.createElement('style');
} else {
while (myStyle.hasChildNodes()) {
myStyle.removeChild(myStyle.firstChild);
}
}
if (document.getElementById('my_custom_styles'))
{
myRemoveElement('my_custom_styles');
}
var head = document.getElementById('myltd_popup_1');
var rules = document.createTextNode('.my_price_comp_inner { width: ' + width1 + '}' +
'.merch_coupons_summary { width: ' + width2 + '}' +
'.merch_coupons_data { width: ' + width3 + '}' +
'.my_coupon_prod_item { width: ' + width4 + '}'
);
myStyle.setAttribute('type','text/css');
myStyle.setAttribute('id', 'my_custom_styles');
if(myStyle.styleSheet) {
myStyle.styleSheet.cssText = rules.nodeValue;
} else {
myStyle.appendChild(rules);
}
//alert(myStyle);
if(append === true) head.appendChild(myStyle);
}
#Pointy - I didn't really need the top part
function myRemoveElement(id) {
var Node = document.getElementById(id);
Node.parentNode.removeChild(Node);
}
function boolyChangeFoo(width1, width2, width3, width4) {
var append = true;
myStyle = document.createElement('style');
if (document.getElementById('my_custom_styles'))
{
myRemoveElement('my_custom_styles');
}
var head = document.getElementById('myltd_popup_1');
var rules = document.createTextNode('.my_price_comp_inner { width: ' + width1 + '}' +
'.merch_coupons_summary { width: ' + width2 + '}' +
'.merch_coupons_data { width: ' + width3 + '}' +
'.my_coupon_prod_item { width: ' + width4 + '}'
);
myStyle.setAttribute('type','text/css');
myStyle.setAttribute('id', 'my_custom_styles');
if(myStyle.styleSheet) {
myStyle.styleSheet.cssText = rules.nodeValue;
} else {
myStyle.appendChild(rules);
}
//alert(myStyle);
if(append === true) head.appendChild(myStyle);
}