jquery
satya - Wednesday, August 05, 2009 10:41:13 AM
can I use JQuery as a templating language
can I use JQuery as a templating language
satya - Wednesday, August 05, 2009 10:44:31 AM
very nice. See this note on JTemplates
satya - Wednesday, August 05, 2009 3:10:50 PM
john resig micro templating engine
satya - Wednesday, August 05, 2009 3:13:36 PM
Another nice article: bleroy
satya - Wednesday, August 05, 2009 3:20:34 PM
Very interesting offering from micrsoft
satya - Thursday, August 06, 2009 2:58:05 PM
well I never seem to get out of the loop. Here is another: JqueryUI
well I never seem to get out of the loop. Here is another: JqueryUI
satya - Thursday, August 06, 2009 10:21:27 PM
The way you select a DOM element forms the basis of JQuery.
Here is a list of selectors.
satya - Thursday, August 06, 2009 10:23:10 PM
Sorry there seems to be a new API
satya - Thursday, August 06, 2009 10:45:59 PM
Examples
$("#MyElementID") // A specific id
$(".MyClass") //all elements matching this class
$("p") // all paragraphs
$("p.MyClass") //paragraphs with MyClass
$("div") // all divs
$(".MyClass1.MyClass2.MyClass3") // locate three classes
$("div,p,p.MyClass,#MyElementID") //matching all those
//Immediate children
$("#Main > *") // All children of Main
$("parent > child")
//Children and grand children
$("ancestor descendents")
$("form input") // all input fields in a form
$("label + input") // all inputs next to a label
$("prev + next")
//starting at myclass find siblings of type div
$(".myclass ~ div")
$("prev ~ next)
satya - Thursday, August 06, 2009 10:49:05 PM
Once you select them, you can do this
$("selector:criteria")
where criteria is
first
last
even
odd
eq(index)
lt(index)
gt(index)
header //(h1, h2 etc)
animated
satya - Thursday, August 06, 2009 10:56:27 PM
Once you select and filter you can do the following wit the css function
$("tr:even").css("background-color", "#bbbbff");
satya - Thursday, August 06, 2009 11:01:13 PM
Or this
$("div").click(function () {
var color = $(this).css("background-color");
$("#result").html("That div is <span style='color:" +
color + ";'>" + color + "</span>.");
});
locate each div, and on click, for each located div (this), get its color, and write it out to an html element whose id is "result".
satya - Thursday, August 06, 2009 11:03:48 PM
and this
$("p").hover(function () {
$(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
}, function () {
var cssObj = {
'background-color' : '#ddd',
'font-weight' : '',
'color' : 'rgb(0,40,244)'
}
$(this).css(cssObj);
});
Every time a mouse passes over a paragraph, apply two colors.
satya - Thursday, August 06, 2009 11:04:50 PM
and this as well
$("p").mouseover(function () {
$(this).css("color","red");
});
satya - Friday, August 07, 2009 1:27:28 PM
Read this article as well where the templating engine becomes an extension of jquery
Read this article as well where the templating engine becomes an extension of jquery
satya - Thursday, July 15, 2010 12:45:20 PM
Looks like there is a new site for jquery docs
satya - Thursday, July 15, 2010 2:20:44 PM
jquery selectors given a node context
jquery selectors given a node context
satya - Thursday, July 15, 2010 2:21:08 PM
here is a post on understanding jquery context
satya - Thursday, July 15, 2010 2:21:29 PM
jquery functions dom objects
jquery functions dom objects
satya - Monday, June 06, 2011 2:24:51 PM
Here is a simple jquery test
<script>
function callme()
{
alert('hello');
jQuery("#MyId").html("Not at all");
}
</script>
<form>
<input type="button" name="button"
value="pressme" onClick="javascript:callme();"/>
</form>
<p id="MyId">
Hello there
</p>
This is in drupal. Replace "jQuery" with a "$" in case of straigt jquery.
satya - Monday, June 06, 2011 3:12:21 PM
here is how to hide/show based on hover
<script>
function callme()
{
// alert('hello');
// jQuery("#MyId").html("Not at all");
alert('start');
var s = jQuery.ajax({
url: "/satyatest",
async: false
}).responseText;
alert(s);
alert('done');
}
function c2()
{
jQuery("#MyId").hover(hoverEnter, hoverLeave);
hoverLeave();
alert('Finished loading');
}
function hoverEnter()
{
jQuery("#MyHoverId").show();
}
function hoverLeave()
{
jQuery("#MyHoverId").hide();
}
jQuery(document).ready(c2);
</script>
<form>
<input type="button" name="button"
value="pressme" onClick="javascript:callme();"/>
</form>
<div>
<p id="MyId">
Hello there
</p>
<div id="MyHoverId">
<p>This stuff</p>
<p>This stuff</p>
<p>This stuff</p>
<p>This stuff</p>
</div>
</div>
satya - Wednesday, June 08, 2011 3:40:42 PM
jquery get html attribute from an element
jquery get html attribute from an element
satya - Wednesday, June 08, 2011 3:44:05 PM
you can use attr method
function stm_hover_setup1()
{
alert('test');
var elementArray = jQuery(".hover_element");
alert(elementArray.length);
for(i=0; i<elementArray.length; i++)
{
element = elementArray[i];
alert(jQuery(element).attr("href"));
}
}
satya - Wednesday, June 08, 2011 3:45:14 PM
how can i add events to an html node through jquery
how can i add events to an html node through jquery
Search for: how can i add events to an html node through jquery