CODEWITHSUNDEEP
javascriptcss
Raja
Raja

Reputation: 33

Adding CSS to a Javascript Widget

I am developing a Javascript widget for other websites to consume. I have 2 javascripts and one php file. One Javascript for user to consume and other to make a JSON request and the php to digg the data. Things are working great and data is being displayed, as well.

Now I need to add CSS to the widget. I don't want the users to code the CSS in their side. How do I do it? Do I need code all inline css? or Append a css file in the javascript?

I know this is very basic. But, I am not familiar with this stuff. So, if you guys point me to the right direction that would be great. I need the sample code as well. I checked many site. They simply have the javascript code.

Thanks! 

    End user Javascript
------------------------

<script type="text/javascript" src="http://mydomain.com/userwidget.js"></script>
<div id="results">
</div>
<script type="text/javascript">
ajax_get_my_data();
</script>

AJAX Javascripit
----------------

function ajax_get_my_data(){
    var results = document.getElementById("results");
    var hr = new XMLHttpRequest();
    hr.open("POST", "http://mydomain.com/widgets/userwidgetcore.php", true);
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {
            var data = JSON.parse(hr.responseText);
            results.innerHTML = "";
            for(var obj in data){
                results.innerHTML += data[obj].propertyA;
            }
        }
    }
    hr.send("var1=stock&var2=up");
    results.innerHTML = "requesting...";
}


PHP code
------------

<?php
header("Content-Type: application/json");
header("Access-Control-Allow-Origin: *");
...........
Databse logic
.......

         $_out = '<table id=\"rounded-corner\">';
         $_out .= '<thead>';
         $_out .= '<tr>';
         $_out .= '<th colspan=\"3\" scope=\"col\" class=\"rounded-q6\">Stocks Under Accumulation</th>';
         $_out .= '</tr>';      
         $_out .= '<tr>';
     $_out .= '<th scope=\"col\" class=\"rounded-q5\">Ticker</th>';
         $_out .= '<th scope=\"col\" class=\"rounded-q5\">Price % Change</th>'; 
         $_out .= '<th scope=\"col\" class=\"rounded-q5\">Volume % Change</th>'; 
     $_out .= '</tr>';
        $_out .= '</thead>';
    $_out .= '<tbody>';

  ..............  
 ..................
$jsonData = $_out;
echo $jsonData;
?>

now I need to load the css to the tags. How do I do it?

Upvotes: 3

Views: 2489

Answers (2)

Liam Allan
Liam Allan

Reputation: 1115

you could append it to the head of the page via javascript

var fileref=document.createElement("link");
  fileref.setAttribute("rel", "stylesheet");
  fileref.setAttribute("type", "text/css");
  fileref.setAttribute("href", "filename.css");
  document.getElementsByTagName("head")[0].appendChild(fileref);

Upvotes: 2

Robert
Robert

Reputation: 2824

i don`t get your idea but at all css code have 3 ways

first be inside html page like this

<head>
<title>hello</title>
<style type="text/css">
body
{
background-color: #CC0000;
}
</style>
</head>

second have page and include it with html page like this
the page save like name "sheet.css"
and include it before close head like this

<link rel="stylesheet" href="css/sheet.css" media="screen"/>

the last way from js page like this

$("body").css("background-color","#CC0000");

Upvotes: 2

Related Questions