Wrox Programmer Forums
|
BOOK: Beginning ASP.NET 4 : in C# and VB
This is the forum to discuss the Wrox book Beginning ASP.NET 4: in C# and VB by Imar Spaanjaars; ISBN: 9780470502211
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning ASP.NET 4 : in C# and VB section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old April 22nd, 2013, 11:10 PM
Registered User
 
Join Date: Jan 2013
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts
Smile Jquery

hello and thanks for taking the time to answer my question.

In chaper 11 page 378 the following sintax is used to fade the color of the banner image
$('#Sidebar img').fadeto(500, 0.1);
The section on the master page with an ID of #sidebar contains the bannner control, so i don't understand if img is a standard jquery syntax to change the image property of any control containing an image or what.
I know that jquery has weird sintax but i can't figure out if by using img the keyword it references the asp:Image inside of the banner control or if it's doing something else.

Thanks again.
 
Old April 23rd, 2013, 02:34 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Hi there,

jQuery follows standard CSS selector syntax. So, #Sidebar img refers to all image elements (elements that use the the <img> tag) within an element with an ID of Sidebar.

Remember, jQuery runs at the client and thus targets client side HTML elements. It doesn't directly "reference the asp:Image inside of the banner control"; Server side the asp:Image control is processed and converted to a client side <img /> element. That image is then targeted by the jQuery code. The net effect is of course that it does target the banner, but not as a server side control, but as a client side element. The effect is the same, but the technology, and where the code executes is completely different.

Note that #Sidebar img targets all images within #Sidebar. In this demo there is only one, but if you had more, all would be affected.

Finally, #Sidebar img is, from a jQuery perspective nothing special. It's just a way to find elements with a specific tag within another element. Likewise, this:

Code:
#Sidebar a
would find all links in the Sidebar. This:

Code:
#Sidebar table
would find all tables in the sidebar, and this:

Code:
img
would find all images in the page and so on.

Does this clarify things?

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
 
Old April 23rd, 2013, 09:17 AM
Registered User
 
Join Date: Jan 2013
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts
Smile

Thank you so much for your reply!!!, it makes total sense.
 
Old April 24th, 2013, 07:38 PM
Registered User
 
Join Date: Jan 2013
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Quote:
Originally Posted by Imar View Post
Hi there,

jQuery follows standard CSS selector syntax. So, #Sidebar img refers to all image elements (elements that use the the <img> tag) within an element with an ID of Sidebar.

Remember, jQuery runs at the client and thus targets client side HTML elements. It doesn't directly "reference the asp:Image inside of the banner control"; Server side the asp:Image control is processed and converted to a client side <img /> element. That image is then targeted by the jQuery code. The net effect is of course that it does target the banner, but not as a server side control, but as a client side element. The effect is the same, but the technology, and where the code executes is completely different.

Note that #Sidebar img targets all images within #Sidebar. In this demo there is only one, but if you had more, all would be affected.

Finally, #Sidebar img is, from a jQuery perspective nothing special. It's just a way to find elements with a specific tag within another element. Likewise, this:

Code:
#Sidebar a
would find all links in the Sidebar. This:

Code:
#Sidebar table
would find all tables in the sidebar, and this:

Code:
img
would find all images in the page and so on.

Does this clarify things?

Imar
Sorry to bother you again, but is the following even possible with Jquery.

Based on your answer above you said that #Sidebar img would select all the images within #sidebar. so in order to limit the selection to one specific item is it possible to use the item's ID for instance the banner control above will generate an html with and image ID of Banner1_image1 so is there a Jquery equivalent to GetelementbyId? so as as to limit the change to the image with an ID of #Banner1_image1 such as:
$('#Sidebar $(#Image1)').fadeTo(5000, 0.1);
 
Old April 24th, 2013, 08:31 PM
Registered User
 
Join Date: Jan 2013
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts
Default

My apologies for having asked the question without doing a little bit more research. I found that the following code
$('[id$=Image1]').fadeTo(5000, 0.1);
will let me specify a specific Item by using it's ID.

Thanks for your attention.
 
Old April 25th, 2013, 02:42 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Quote:
so is there a Jquery equivalent to GetelementbyId?
jQuery *is* the equivalent of getElementById, and much more. Consider this:

Code:
$('#Sidebar img').fadeto(500, 0.1);
How do you think it finds the image inside Sidebar? This is actually a two part selector:

#Sidebar

and

img

#Sidebar is "getElementById" and the img is "getElementsByTagName". So this:

Code:
$('#Sidebar')
is getElementById, just like how CSS lets you reference a single item by its ID.

In your final solution, you're using the EndsWith selector (http://api.jquery.com/attribute-ends-with-selector/) to match items on part of the ID. Depending on your code and requirements, this could be exactly what you want or not (it could select multiple objects, all those with an ID ending with Image1). If you only want to find the single element by its full ID, simply use the ID selector:

Code:
$('#Banner1_image1').fadeTo(5000, 0.1);
Aside: since Banner1_image1 is the only image inside #Sidebar, this does the exact same thing as the original code: change that single image.

You may want to reread the intro section of the jQuery chapter that deals with all the various selectors.

Hope this helps,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!

Last edited by Imar; April 25th, 2013 at 02:45 AM..
 
Old April 25th, 2013, 08:57 AM
Registered User
 
Join Date: Jan 2013
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thank you for your suggestion and explanation.

I am re-reading the intro to Jquery. It had been a while. I understand that by using '#Banner1_image1' will allow me to use the full ID. I was just wondering if there was a way to get an element without fully specifying the container's ID. But i understand your explanation, it is very clear.
Again i should have done a bit more research before posting the question. My apologies.
 
Old April 25th, 2013, 09:06 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Quote:
I was just wondering if there was a way to get an element without fully specifying the container's ID.
Banner1_image1 is *not* a container ID. It's the full client side ID of the image (just check the final source in the browser to see what I mean). At the server Image1 is placed in Banner1 so the concept of the container applies there. However, once this is sent to the client, the IDs are concatenated resulting in one ID for this specific image.

If you had two banner controls on the page, each with an Image1, your code (using Ends With) would find both images (Banner1_image1 and Banner2_image1) while $('#Banner1_image1') would only find the image inside the Banner1 element, working like a true getElementById (since it only returns a single item).

Hope this further clarifies things.

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!





Similar Threads
Thread Thread Starter Forum Replies Last Post
jquery Khalil BOOK: Beginning ASP.NET 4 : in C# and VB 1 August 20th, 2012 05:39 AM
JQuery Khalil BOOK: Beginning ASP.NET 4 : in C# and VB 2 January 20th, 2012 11:39 PM
presence without jquery badinar BOOK: Professional XMPP Programming with JavaScript and jQuery 2 January 17th, 2011 08:20 PM
Please I need some help on jquery on usercontrols, thanks... ysfkay ASP.NET 3.5 Professionals 8 August 27th, 2010 09:30 AM
Jquery issue FileFound Javascript How-To 0 December 28th, 2009 07:00 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.