Our new Indie Games subforum is now open for business in G&T. Go and check it out, you might land a code for a free game. If you're developing an indie game and want to post about it, follow these directions. If you don't, he'll break your legs! Hahaha! Seriously though.
Our rules have been updated and given their own forum. Go and look at them! They are nice, and there may be new ones that you didn't know about! Hooray for rules! Hooray for The System! Hooray for Conforming!
A few intermediate (or not) design techniques using JavaScript/JQuery
splash
Registered User
Registered User
I'm working on a website for a group and I'm stuck on a few minor pieces of code trying to do a few design-related things. I spend a lot of time trying to read online to figure these things out, but it's obvious I need some direct help.
I'd really appreciate it. Since the website is rather simple and the problems rather simple, I think, I'll shan't be wasting any of your time if you're willing to help. Consider it a good test of your knowledge.
See this page for problem #1 and #2: http://www.web.pdx.edu/~ethanp/tester/
1. Because I'm creating this website for people that don't know much code I'm trying to use JQuery that will do a few things automatically for them. When they type this html for example:
<div class="photo"> <img src="images/test-img.jpg" width="225" height="400" alt="State Games Spectators" /> <p>Photo: Players and spectators at the State Games of Oregon.</p> </div>[/CODE] It will automatically place the paragraph so that it's flush with the photo and is like a caption box (the blue box should be flush with the photo width, the styling is done already as you can see). I'm sure I'll create a photo-right class, etc so they can float it to either side as needed. Where I'm stuck is that I can get the JQuery to recognize the width of the img and set the p tag to that width but any <div class="photo"> after the first keep using that same width even though it does everything else fine. How can I get it to go through all photo classes in the #content area taking the img width of that particular div class and applying it to the p tag within that div class? [CODE]if ($("#content .photo").length) { // checks if there are any .photo classes to begin with [INDENT]PhotoSize();[/INDENT] } function PhotoSize() { [INDENT]var imgSize = 0; imgSize = $(".photo img").width(); $(".photo").css("width", imgSize); $(".photo p").addClass("note"); // the css "note" style creates the blue caption box[/INDENT] }[/CODE] 2. See the badminton birdie (shuttlecock) above the home link on the top menu? How could I get that to appear in other correct spots to coincide with the other pages? Nothing about hovering is needed, only after a page has loaded does it need to appear above it's menu link. You don't need to give me specific code for my site, just the general code. See this page for the last problem: [url]http://www.web.pdx.edu/~ethanp/tester/officers.html[/url] 3. Exactly similar to problem #1, I want that blue boxed caption to appear under these peoples pictures. This is really elementary, but after knowing how #1 is resolved does this require creating a table or can it be done more simply? I'd like it so they can easily add another image and caption, pretty much exactly or similar to the html code in problem #1. No more than 3 pictures need to fit per "row". Easy enough? Btw they don't allow server-side languages for these group websites but I'm trying to get them to add it. It probably won't happen. So I have to do everything I can to simplify the code for them.[CODE]<div class="photo">
<img src="images/test-img.jpg" width="225" height="400" alt="State Games Spectators" />
<p>Photo: Players and spectators at the State Games of Oregon.</p>
</div>[/CODE]
It will automatically place the paragraph so that it's flush with the photo and is like a caption box (the blue box should be flush with the photo width, the styling is done already as you can see). I'm sure I'll create a photo-right class, etc so they can float it to either side as needed. Where I'm stuck is that I can get the JQuery to recognize the width of the img and set the p tag to that width but any <div class="photo"> after the first keep using that same width even though it does everything else fine. How can I get it to go through all photo classes in the #content area taking the img width of that particular div class and applying it to the p tag within that div class?
if ($("#content .photo").length) { // checks if there are any .photo classes to begin with [INDENT]PhotoSize();[/INDENT] } function PhotoSize() { [INDENT]var imgSize = 0; imgSize = $(".photo img").width(); $(".photo").css("width", imgSize); $(".photo p").addClass("note"); // the css "note" style creates the blue caption box[/INDENT] }[/CODE] 2. See the badminton birdie (shuttlecock) above the home link on the top menu? How could I get that to appear in other correct spots to coincide with the other pages? Nothing about hovering is needed, only after a page has loaded does it need to appear above it's menu link. You don't need to give me specific code for my site, just the general code. See this page for the last problem: [url]http://www.web.pdx.edu/~ethanp/tester/officers.html[/url] 3. Exactly similar to problem #1, I want that blue boxed caption to appear under these peoples pictures. This is really elementary, but after knowing how #1 is resolved does this require creating a table or can it be done more simply? I'd like it so they can easily add another image and caption, pretty much exactly or similar to the html code in problem #1. No more than 3 pictures need to fit per "row". Easy enough? Btw they don't allow server-side languages for these group websites but I'm trying to get them to add it. It probably won't happen. So I have to do everything I can to simplify the code for them.[CODE]if ($("#content .photo").length) { // checks if there are any .photo classes to begin with
function PhotoSize() {
2. See the badminton birdie (shuttlecock) above the home link on the top menu? How could I get that to appear in other correct spots to coincide with the other pages? Nothing about hovering is needed, only after a page has loaded does it need to appear above it's menu link. You don't need to give me specific code for my site, just the general code.
See this page for the last problem: http://www.web.pdx.edu/~ethanp/tester/officers.html
3. Exactly similar to problem #1, I want that blue boxed caption to appear under these peoples pictures. This is really elementary, but after knowing how #1 is resolved does this require creating a table or can it be done more simply? I'd like it so they can easily add another image and caption, pretty much exactly or similar to the html code in problem #1. No more than 3 pictures need to fit per "row".
Easy enough?
Btw they don't allow server-side languages for these group websites but I'm trying to get them to add it. It probably won't happen. So I have to do everything I can to simplify the code for them.
I'd really appreciate it. Since the website is rather simple and the problems rather simple, I think, I'll shan't be wasting any of your time if you're willing to help. Consider it a good test of your knowledge.
See this page for problem #1 and #2: http://www.web.pdx.edu/~ethanp/tester/
1. Because I'm creating this website for people that don't know much code I'm trying to use JQuery that will do a few things automatically for them. When they type this html for example:
<div class="photo"> <img src="images/test-img.jpg" width="225" height="400" alt="State Games Spectators" /> <p>Photo: Players and spectators at the State Games of Oregon.</p> </div>[/CODE] It will automatically place the paragraph so that it's flush with the photo and is like a caption box (the blue box should be flush with the photo width, the styling is done already as you can see). I'm sure I'll create a photo-right class, etc so they can float it to either side as needed. Where I'm stuck is that I can get the JQuery to recognize the width of the img and set the p tag to that width but any <div class="photo"> after the first keep using that same width even though it does everything else fine. How can I get it to go through all photo classes in the #content area taking the img width of that particular div class and applying it to the p tag within that div class? [CODE]if ($("#content .photo").length) { // checks if there are any .photo classes to begin with [INDENT]PhotoSize();[/INDENT] } function PhotoSize() { [INDENT]var imgSize = 0; imgSize = $(".photo img").width(); $(".photo").css("width", imgSize); $(".photo p").addClass("note"); // the css "note" style creates the blue caption box[/INDENT] }[/CODE] 2. See the badminton birdie (shuttlecock) above the home link on the top menu? How could I get that to appear in other correct spots to coincide with the other pages? Nothing about hovering is needed, only after a page has loaded does it need to appear above it's menu link. You don't need to give me specific code for my site, just the general code. See this page for the last problem: [url]http://www.web.pdx.edu/~ethanp/tester/officers.html[/url] 3. Exactly similar to problem #1, I want that blue boxed caption to appear under these peoples pictures. This is really elementary, but after knowing how #1 is resolved does this require creating a table or can it be done more simply? I'd like it so they can easily add another image and caption, pretty much exactly or similar to the html code in problem #1. No more than 3 pictures need to fit per "row". Easy enough? Btw they don't allow server-side languages for these group websites but I'm trying to get them to add it. It probably won't happen. So I have to do everything I can to simplify the code for them.[CODE]<div class="photo">
<img src="images/test-img.jpg" width="225" height="400" alt="State Games Spectators" />
<p>Photo: Players and spectators at the State Games of Oregon.</p>
</div>[/CODE]
It will automatically place the paragraph so that it's flush with the photo and is like a caption box (the blue box should be flush with the photo width, the styling is done already as you can see). I'm sure I'll create a photo-right class, etc so they can float it to either side as needed. Where I'm stuck is that I can get the JQuery to recognize the width of the img and set the p tag to that width but any <div class="photo"> after the first keep using that same width even though it does everything else fine. How can I get it to go through all photo classes in the #content area taking the img width of that particular div class and applying it to the p tag within that div class?
if ($("#content .photo").length) { // checks if there are any .photo classes to begin with [INDENT]PhotoSize();[/INDENT] } function PhotoSize() { [INDENT]var imgSize = 0; imgSize = $(".photo img").width(); $(".photo").css("width", imgSize); $(".photo p").addClass("note"); // the css "note" style creates the blue caption box[/INDENT] }[/CODE] 2. See the badminton birdie (shuttlecock) above the home link on the top menu? How could I get that to appear in other correct spots to coincide with the other pages? Nothing about hovering is needed, only after a page has loaded does it need to appear above it's menu link. You don't need to give me specific code for my site, just the general code. See this page for the last problem: [url]http://www.web.pdx.edu/~ethanp/tester/officers.html[/url] 3. Exactly similar to problem #1, I want that blue boxed caption to appear under these peoples pictures. This is really elementary, but after knowing how #1 is resolved does this require creating a table or can it be done more simply? I'd like it so they can easily add another image and caption, pretty much exactly or similar to the html code in problem #1. No more than 3 pictures need to fit per "row". Easy enough? Btw they don't allow server-side languages for these group websites but I'm trying to get them to add it. It probably won't happen. So I have to do everything I can to simplify the code for them.[CODE]if ($("#content .photo").length) { // checks if there are any .photo classes to begin with
PhotoSize();
}function PhotoSize() {
var imgSize = 0;
imgSize = $(".photo img").width();
$(".photo").css("width", imgSize);
$(".photo p").addClass("note"); // the css "note" style creates the blue caption box
}[/CODE]imgSize = $(".photo img").width();
$(".photo").css("width", imgSize);
$(".photo p").addClass("note"); // the css "note" style creates the blue caption box
2. See the badminton birdie (shuttlecock) above the home link on the top menu? How could I get that to appear in other correct spots to coincide with the other pages? Nothing about hovering is needed, only after a page has loaded does it need to appear above it's menu link. You don't need to give me specific code for my site, just the general code.
See this page for the last problem: http://www.web.pdx.edu/~ethanp/tester/officers.html
3. Exactly similar to problem #1, I want that blue boxed caption to appear under these peoples pictures. This is really elementary, but after knowing how #1 is resolved does this require creating a table or can it be done more simply? I'd like it so they can easily add another image and caption, pretty much exactly or similar to the html code in problem #1. No more than 3 pictures need to fit per "row".
Easy enough?
Btw they don't allow server-side languages for these group websites but I'm trying to get them to add it. It probably won't happen. So I have to do everything I can to simplify the code for them.
splash on
Posts
[HTML]
$(".photo img").each(function() {
$(this.parentNode.getElementsByTagName("p")).css("width",$(this).width());
});
[/HTML]
For 2. you would set up the image so that it displays based on a css rule, say above the menu item that has class 'active'
Then, if you have static pages, you just have the appropriate menu item having class 'active'. Alternatively you can set that class with jquery, by looking at what the current url is (which you can find in the variable window.location.href)
For 3. You don't need a table. put each image and caption into a div, and style the div's with the CSS style 'float:left;'. Alternatively you can use 'display:inline-block;', although that will have issues in IE 6/7.
Thank you clam2000
1. Simplified code, looks very good. I'll be trying it out tonight.
2. Understood. Nice. Clarification please: they are static pages. After setting the class I should use a relative CSS styling to position the image above? Do I have to create a div and make it a background img or how could I simply place the img?
3. I'll try float! It's mostly for students so they tend to have the latest browsers and such.
I've noticed Lynda.com has JQuery essential training. I think I should definitely get into that. I learned JQuery for a few weeks in a class but it was for forms, using it for design is so confusing to me.
Any last tips or tricks for the #2?
Thanks again
For what it's worth, this can even be made a little shorter.
[HTML]
$(".photo img").each(function() {
$(this).siblings("p").width($(this).width());
});
[/HTML]
Not 100% convinced you can't do this in pure CSS, though.
I'll probably use the parentNode and siblings technique often now that I know about them