Search jQuery

jQuery Forum

Screen name:
tn.tylernguyen

tn.tylernguyen's Profile

7 Posts

6 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Cannot read property 'src' of undefined - slide show
[2Replies]
- 25-Feb-2012 05:58 PM
- Forum: Getting Started
1. I'm trying to create a simple slide show that changes picture when the mouse over event is triggered.. though I am getting the error " Cannot read property 'src' of undefined". I'm not sure what is the issue. error is on line 47. I basically created some image objects to preload the images, and assigned the property 'src' their respective url.
2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
3. w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4. <html xmlns="http://www.w3.org/1999/xhtml">
5. <head>
6. <title>Examples</title>
7. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
8. <style type="text/css">
9. body {
10. font-family: arial;
11. }
12. #gallery {
13. width:1000px;
14. height:360px;
15. position:relative;
16. }
17. #gallery img {
18. z-index: 500;
19. }
20. .caption {
21. background-color: #202020;
22. color: white;
23. width:100%;
24. height:25%;
25. position: absolute;
26. bottom:0;
27. opacity: 0.8;
28. }
30. </style>
31. <script src="../../../script/jquery-1.7.1.min.js"></script>
32. <script>
33. $(document).ready(function() {
34. var images = new Array(3);
35. var imageSrc = ['img/default.jpg', 'img/image1.jpg', 'img/image2.jpg'];
36. var imageOpacity = [0.5,0.6,0.7];
37. var imageCaption = ['Caption for Image 1', 'Caption for image 2', 'Caption for image 3'];
38. for (var i = 0; i < 3; i++) {
39. images[i] = [imageSrc[i], imageOpacity[i], imageCaption[i]];
40. }
41. //create image object
42. for (var i = 0; i < 3; i++) {
43. var imgs = [];
44. imgs[i] = new Image();
45. imgs[i].src = images[i][0];
46. }
47. $('#photo').attr('src', imgs[0].src);
49. $('#photo').mouseover(function() {
50. $(this).attr('src', imgs[1].src);
51. }); // end mouseover
53. });
54. </script>
55. </head>
56. <body>
57. <div id="gallery">
58. <img id ="photo" src="" alt="default" title="" width="" height="">
59. <div class="caption"><div class="content">This is a caption!</div></div>
60. </div>
61. </body>
62. </html>

Understanding Objects, Properties, and methods, selector confusion
[4Replies]
- 22-Feb-2012 01:58 PM
- Forum: Getting Started
The DOM is a mapping construct of all the relational objects and its attributes. The 'Document.Body' refers to the 'Document' object and its property the 'Body'. So if you want to wrap/create a jQuery object that reference a particular DOM element you can do this: $(document.body) .

How come you can't wrap a div element like this $(document.body.div) since div is a property of the body... I think there's something wrong with my logic or confusion with the terms.. Could someone clarify?

I suppose you could just do $(div) ( jquery(element) )

jQuery( elementArray) issue
[4Replies]
- 16-Feb-2012 06:13 PM
- Forum: Getting Started
Hi there, I'm having issues with my coding as I try to create jquery objects with $() and passing an array in it.
I get a error:
1. Uncaught RangeError: Maximum call stack size exceeded
Can someone explain the issue I'm currently having. Thanks
1. <script type="text/javascript">
2. //jQuery( elementArray )
3. $(document).ready(function() {
5. var i = ['div.maincontainer', 'div.container'];
6. var z = [];
7. $(i).each(function() {
8. var a = $(this).text();
9. document.write(a);
10. z.push(a);
11. });
13. document.write(z);
15. });//end ready
16. </script>

jquery hover box info
[3Replies]
- 11-Feb-2012 09:20 PM
- Forum: Getting Started
I'm having problem with the creation of a hover box with jquery:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Examples</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="../../../script/jquery-1.7.1.min.js"></script>
<style>
div#infobox {
display: none;
background-color: blue;
}

</style>
<script>
$(document).ready(function() {
var span = $('span#hover');

span.hover(
function() {
$(this).children('#infobox').show();
},
function() {
$(this).children('#infobox').hide();
});//end hover
});//end ready
</script>
</head>
<body>
<p> This is a sentence. <span id="hover">[info] <div id="infobox"> info goes here </div></span> </p>
<p> This is another sentence. <span id="hover">[info] <div id="infobox"> info goes here </div></span> </p>

</body>
</html>

document.body - DOM, JavaScript Object Concept Confusion
[1Reply]
- 09-Feb-2012 04:29 AM
- Forum: Getting Started
I'm trying to understand the concept of DOM and Objects in association with JavaScript. Really confuse with the term object/elements in different contexts.. do you refer elements as objects in the context of DOM..?

Correct me if the statements are false:
1. The DOM is a mapping/representation of the family-tree structure of objects (nodes/elements) => the body element is an example of a object that is the child of the document object (level one)
2. The body object or <a> object has properties/attributes such as href=" "
3. You can access a obj's property by using this formula "objname.propertyname"
4. You can access a obj's functions by using this formula "objname.functionname"
Lastly, I don't understand 'document.body' body is neither a property nor a function...
In this case, does it mean that a object's (document) property can contain an object(body)???!?

Better Approach? Menu Box Switch
[3Replies]
- 07-Feb-2012 08:31 PM
- Forum: Getting Started
Hi there, I created a menu box which basically changes the div content for each click of the menu list. Though my method is not efficient/proper and I'm hoping to improve it some how with the help of someone. For example, if I were to add another menu then I would have to add another case to match up against.
2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
3. w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4. <html xmlns="http://www.w3.org/1999/xhtml">
5. <head>
6. <title>Examples</title>
7. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
8. <style type="text/css">
9. ul, li, div, p {
10. margin: 0;
11. padding: 0;
12. font-size: 100%;
13. }
14. #main {
15. width: 380px;
16. height: 400px;
17. padding: 3px;
18. }
19. #main ul {
20. width: auto;
21. max-width: 90%;
22. height: 19px;
23. padding-left: 5px;
24. padding-top: 1px;
25. overflow: hidden;
26. }
27. #main ul li {
28. display: inline;
29. list-style-type: none;
30. border: 1px solid grey;
31. background-color: grey;
32. border-bottom: none;
33. padding: 0 5px;
34. padding-bottom: -10px;
35. font-family: Arial "sans-serif";
36. color: white;
37. }
38. #main ul li selected {
39. font-family: Arial "sans-serif";
40. color: grey;
41. background-color: white;
42. margin-top: 1px;
43. }
44. #main #container {
45. border: 1px solid grey;
46. background-color: whit;
47. height: inherit;
48. margin-top: -2px;
49. padding: 5px;
50. overflow: hidden;
51. }
52. p.item {
53. display: none;
54. }
56. </style>
57. <script src="../../script/jquery-1.6.3.min.js"></script>
58. <script>
59. $(document).ready(function() {
60. var menuItem = ['Items in menu 1', 'Items in menu 2','Items in menu 3']; //array containing different items for each menu
61. $menu = $('#main ul li');
62. $container = $('#main div#container');
64. $menu.click(function() {
65. var targetli = $(this).index();
66. switch (targetli) {
67. case 0:
68. $('<p class="item">' + menuItem[0] + '</p>').appendTo($container).fadeIn(1000);
69. break;
70. case 1:
71. $('<p class="item">' + menuItem[1] + '</p>').appendTo($container).fadeIn(1000);
72. break;
73. case 2:
74. $('<p class="item">' + menuItem[2] + '</p>').appendTo($container).fadeIn(1000);
75. break;
76. }
77. });
78. });
79. </script>
80. </head>
81. <body>
82. <div id="main">
83. <ul>
84. <li id="menu1">Menu Item</li>
85. <li id="menu2">Menu Item</li>
86. <li id="menu3">Menu Item</li>
88. </ul>
89. <div id="container"></div>
90. </div>
91. </body>
92. </html>

Twitter Feed App with JQuery: How to make a <li> fade in one after another

[3Replies]

05-Feb-2012 04:06 PM
Forum: Developing jQuery Plugins

Hi there, I'm trying to create a twitter feed box that you probably have seen on several sites. This app is basically going to show a list of new twitter feed contained in a box. I'm currently working on making items of a list fade in one after another, every time there's a new update tweet. However I am not sure on how to make the <li> of <ol> fade in one after another without them loading all at the same time. Can someone please give me a better approach to this issue I'm having. The code below works, but I know its not efficient/proper way of producing this.

Here is my code:

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
	w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>Populating List for TwitterBoxFeed</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<script src="../../../script/jquery-1.6.3.min.js"></script>
	<style type="text/css">

	div {
	border: solid 1px;
	margin: 10px;
	}
	#container {
	width: 600px;
	height: 300px;
	}
	ul li {
	display: none;
	}

	</style>
	<script>
	/* This script will demonstrate populating a list of feeds.*/
	var feed = ['Feed 1', 'Feed 2', 'Feed 3'];
	$(document).ready(function() {

	$('ul#twitterlist').prepend('<li>' + feed[0] + '</li>');
	$('ul#twitterlist li').fadeIn(1000, function() {
	$('ul#twitterlist').prepend('<li>' + feed[1] + '</li>');
	$('ul#twitterlist li:first').fadeIn(1000, function() {
	$('ul#twitterlist').prepend('<li>' + feed[2] + '</li>');
	$('ul#twitterlist li:first').fadeIn(1000);
	}
	);
	});


	});//end ready
	</script>
	</head>
	<body>
	<div id="container">
	<ul id="twitterlist">

	</ul>

	</div>
	</body>
	</html>

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend