Skip to content

Commit 3c75988

Browse files
kswedbergkswedberg
committed
Updates to .css() examples
1 parent 03668b8 commit 3c75988

File tree

1 file changed

+36
-33
lines changed

1 file changed

+36
-33
lines changed

‎entries/css.xml

+36-33
Original file line numberDiff line numberDiff line change
@@ -121,10 +121,10 @@ div { height: 50px; margin: 5px; padding: 5px; float: left; }
121121
<p><strong>Note: </strong>If nothing is returned in the setter function (ie. <code>function(index, style){})</code>, or if <code>undefined</code> is returned, the current value is not changed. This is useful for selectively setting values only when certain criteria are met.</p>
122122
</longdesc>
123123
<example>
124-
<desc>To change the color of any paragraph to red on mouseover event.</desc>
124+
<desc>Change the color of any paragraph to red on mouseover event.</desc>
125125
<code><![CDATA[
126-
$("p").mouseover(function () {
127-
$(this).css("color","red");
126+
$("p").on( "mouseover", function() {
127+
$(this).css( "color", "red" );
128128
});
129129
]]></code>
130130
<css><![CDATA[
@@ -137,10 +137,10 @@ div { height: 50px; margin: 5px; padding: 5px; float: left; }
137137
]]></html>
138138
</example>
139139
<example>
140-
<desc>Increase the width of #box by 200 pixels</desc>
140+
<desc>Increase the width of #box by 200 pixels the first time it is clicked.</desc>
141141
<code><![CDATA[
142-
$("#box").one( "click", function () {
143-
$( this ).css( "width","+=200" );
142+
$("#box").one( "click", function() {
143+
$( this ).css( "width", "+=200" );
144144
});
145145
]]></code>
146146
<css><![CDATA[
@@ -151,13 +151,13 @@ div { height: 50px; margin: 5px; padding: 5px; float: left; }
151151
]]></html>
152152
</example>
153153
<example>
154-
<desc>To highlight a clicked word in the paragraph.</desc>
154+
<desc>Highlight a clicked word in the paragraph.</desc>
155155
<code><![CDATA[
156-
var words = $("p:first").text().split(" ");
157-
var text = words.join("</span> <span>");
158-
$("p:first").html("<span>" + text + "</span>");
159-
$("span").click(function () {
160-
$(this).css("background-color","yellow");
156+
var words = $("p").first().text().split( /\s+/ );
157+
var text = words.join( "</span> <span>" );
158+
$("p").first().html( "<span>" + text + "</span>" );
159+
$("span").on( "click", function() {
160+
$(this).css( "background-color", "yellow" );
161161
});
162162
163163
]]></code>
@@ -174,18 +174,22 @@ div { height: 50px; margin: 5px; padding: 5px; float: left; }
174174
</p>]]></html>
175175
</example>
176176
<example>
177-
<desc>To set the text-weight of hovered paragraphs to bolder, background to blue, and different CSS when leave:</desc>
177+
<desc>Change the font weight and background color on mouseenter and mouseleave.</desc>
178178
<code><![CDATA[
179-
$("p").hover(function () {
180-
$(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
181-
}, function () {
182-
var cssObj = {
183-
'background-color' : '#ddd',
184-
'font-weight' : '',
185-
'color' : 'rgb(0,40,244)'
186-
};
187-
$(this).css(cssObj);
179+
$("p")
180+
.on( "mouseenter", function() {
181+
$(this).css({
182+
"background-color": "yellow",
183+
"font-weight": "bolder"
188184
});
185+
})
186+
.on( "mouseleave", function() {
187+
var styles = {
188+
backgroundColor : "#ddd",
189+
fontWeight: ""
190+
};
191+
$(this).css( styles );
192+
});
189193
]]></code>
190194
<css><![CDATA[
191195
p { color:green; }
@@ -196,19 +200,18 @@ div { height: 50px; margin: 5px; padding: 5px; float: left; }
196200
]]></html>
197201
</example>
198202
<example>
199-
<desc>Increase the size of a div when you click it:</desc>
203+
<desc>Increase the size of a div when you click it.</desc>
200204
<code><![CDATA[
201-
$("div").click(function() {
202-
$(this).css({
203-
width: function(index, value) {
204-
return parseFloat(value) * 1.2;
205-
},
206-
height: function(index, value) {
207-
return parseFloat(value) * 1.2;
208-
}
209-
210-
});
205+
$("div").on( "click", function() {
206+
$(this).css({
207+
width: function( index, value ) {
208+
return parseFloat( value ) * 1.2;
209+
},
210+
height: function( index, value ) {
211+
return parseFloat( value ) * 1.2;
212+
}
211213
});
214+
});
212215
]]></code>
213216
<css><![CDATA[
214217
div { width: 20px; height: 15px; background-color: #f33; }

0 commit comments

Comments
 (0)