Below is my simple page. What I'd like to do, as you can see from the code in red is to call a jQuery plugin. The plugin find the message parameter sent to a page and apply its value to the #message div. So the call to the page would be something like this mypage.html?message=Hello+world
Then the words 'Hello world' would appear inside the div.
<!DOCTYPE html>
<html lang="en">
<head>
<body>
<div class="id="message"></div>
<script src="jquery/1.11.2/jquery.min.js"></script>
<script src="js/receiveget.plugin.js"></script>
<script>
(function()
{
$('#message').receiveget('message');
})();
</script>
</body>
</html>
So here is my receiveget.plugin.js
(function($)
{
$.fn.extend(
{
receiveget:function(getvar)
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == getvar)
{
$(this).text(decodeURIComponent(sParameterName[1].replace('+', ' ')));
}
}
}
});
})(jQuery);
Showing posts with label parameters. Show all posts
Showing posts with label parameters. Show all posts
Thursday, 19 February 2015
Friday, 21 January 2011
No I'm not going to title this post less is more
I have started to use less. No, I'm not completely useless. Less from lesscss.org "extends CSS with dynamic behavior such asvariables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js."
So below is an example of how to get started. First, you need to download less.js from lesscss.org. Let's say that we are going to put this .js file, our HTML file and our css file all in the same folder.
Once downloaded, I tend to rename the file less.js.
We then need to create our stylesheet. Our stylesheet can be named however we like but it must have the .less extension, so let's call it style.less. Once created we'll add the following lines:
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }
You can see from the lines above, that we have created a variable called @nice-blue and assigned it a value of #5B83AD. We have then created another variable called @light-blue and assigned it the value of @nice-blue + #111. We have then assigned the variable colour of @light-blue to the property color for the selector #header, which we will be using in our HTML page.
As you can imagine, once you've declared your variables this way, it's easier to use them over and over again. An this is just the start. You can also use 'mixins' such as two or more css classes being combined into one greater class. You can add 'Parametric Mixins', allowing you to pass parameters to css classes. There is so much more so go to the website and have a look.
We are now about to create our HTML page. At this stage, I should warn you that it's very important what order you declare the stylesheet and the script tag, otherwise it won't work, so please follow the example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Less example</title>
<link rel="stylesheet/less" type="text/css" href="style.less" />
So below is an example of how to get started. First, you need to download less.js from lesscss.org. Let's say that we are going to put this .js file, our HTML file and our css file all in the same folder.
Once downloaded, I tend to rename the file less.js.
We then need to create our stylesheet. Our stylesheet can be named however we like but it must have the .less extension, so let's call it style.less. Once created we'll add the following lines:
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }
You can see from the lines above, that we have created a variable called @nice-blue and assigned it a value of #5B83AD. We have then created another variable called @light-blue and assigned it the value of @nice-blue + #111. We have then assigned the variable colour of @light-blue to the property color for the selector #header, which we will be using in our HTML page.
As you can imagine, once you've declared your variables this way, it's easier to use them over and over again. An this is just the start. You can also use 'mixins' such as two or more css classes being combined into one greater class. You can add 'Parametric Mixins', allowing you to pass parameters to css classes. There is so much more so go to the website and have a look.
We are now about to create our HTML page. At this stage, I should warn you that it's very important what order you declare the stylesheet and the script tag, otherwise it won't work, so please follow the example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Less example</title>
<link rel="stylesheet/less" type="text/css" href="style.less" />
<script src="less.js"></script>
</head>
<body>
<p id="header">This should now be a nice light blue.</p>
</body>
</html>
<body>
<p id="header">This should now be a nice light blue.</p>
</body>
</html>
Subscribe to:
Posts (Atom)