Search jQuery

jQuery Forum

Screen name:
renzocj
About Me:
Web designer and graphic designer, specializing in HTML, CSS and Javascript, experience in developing independent web pages, business and university portals.

renzocj's Profile

4 Posts

13 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Trying to change a bg image onclick using jQuery
[4Replies]
- 05-Jun-2012 06:25 PM
- Forum: Using jQuery
The idea is to create four triggers (four div's) to display four areas with content related to that trigger. For example imagine the first trigger as "about us", if you click on it an area with the story of the company must appear.

However I am working with background designs in the triggers, the first trigger must be "on" when the page load, so the first trigger has an arrow (as a background image desing) pointing to the area below. When you click the next trigger, the background of the first trigger must return to the "close-background-design" and the background of the clicked one must change to the arrow pointing to the new content that shows.

Seems to be easy, however it's very tricky to me.

All four divs (triggers) has a class:
1. .pestanas {
2. other styles...
3. background-image: url(../images_b/pestana_ultimate.png);
4. }
This is the design of the non-arrows.

Every four triggers have their own ID's with the idea of controling when must appear the arrow in the click event.
1. #pestana_a {
2. styles...
3. }
4. #pestana_b {
5. styles...
6. }
7. #pestana_c {
8. styles...
9. }
10. #pestana_d {
11. styles...
12. }
This is the Jquery:
1. $('.pest_area').hide(); //four areas with four contents must be hide at loading
2. $('#pest_a').show(); //the first area must be shown at loading.
3. $('#pestana_a').css('background-image', 'url(images_b/pestana_arrow.png)'); //the first arrow must be shown at loading in the first trigger
4. $('.pestanas').click(function() {
5. var clicked=$(this).attr('id').split("_")[1]; //pestana_ + [a]
6. var idObj=$(this).attr('id');
7. $(idObj).css('background-image', 'url(images_b/pestana_arrow.png)'); //this is not working
8. var areaID='#pest_' + clicked;
9. $('.pest_area').hide();
10. $(areaID).show();
11. });
I have a fiddle to help helping me better:
http://jsfiddle.net/renzocj/MUP9n/3/

And the real project is:
http://www.arsmodea.com/ff_medicina.html

Thanks in advanced, it's a complicated project for a University website in Perú.

Renzo

Working with background images
[1Reply]
- 04-Jun-2012 04:31 PM
- Forum: Using jQuery
Imagine that the "trigger A" is an arrow pointing to the "Area A" (using a background image), the idea is that when someone clicks on the next trigger, not only the Area will have to change to "B" but the background image of the trigger ("B") must change to his arrow, pointing the area that corresponds. So every "trigger area" has their own arrow as a background image pointing down, there must be a way in order to do so, how can I do this?

Please to understand check my fiddle:

http://jsfiddle.net/renzocj/MUP9n/3/

Simple code not working
[11Replies]
- 29-May-2012 11:43 AM
- Forum: Using jQuery
Actual real code of my project:
1. <body>
2. //three triggers...
3. <div class="circle" id="medicine_a">
4. </div>
5. <div class="circle" id="medicine_b">
6. </div>
7. <div class="circle" id="medicine_c">
8. </div>
  
  //three areas
9. <div class="med_ocultos" id="time_line_dinamics_a">
10. </div>
11. <div class="med_ocultos" id="time_line_dinamics_b">
12. </div>
13. <div class="med_ocultos" id="time_line_dinamics_c">
14. </div>
15. </body>
The Javascript:
1. $(document).ready(function() {
2. //the page must load without them
3. $('.med_ocultos').hide();
5. $('.circle').click(function() {
6. $('.med_ocultos').hide();
7. var clickedID=$('.circle').attr('id'); //medicine_a
8. var idParts=clickedID.split('_'); //medicine_ + a
9. var areaID='#time_line_dinamics_'+idParts(1); //#time_line_dinamics_ + a
10. //animation
11. $(areaID).animate({
12. height: 'toggle',
13. width: 'toggle'
14. }, 1000, function() {
15. });
16. });
17. });
I think the problem might be the selection of the object "circle", is there any way to tell that I want to know the id of a certain div with class "circle" for example ?

Thanks!!
Renzo

Problem about logic, pls help
[6Replies]
- 29-May-2012 02:05 AM
- Forum: Using jQuery
Good day to the forum,
I need to solve this:

I have three divs as triggers, each of one will show/hide a related div with information. For example if trigger "A" is clicked, the div "area_a" will appear.
1. <div id="trigger_a"></div>
2. <div id="trigger_b"></div>
3. <div id="trigger_c"></div>
4. <div id="area_a"></div>
5. <div id="area_b"></div>
6. <div id="area_c"></div>
To do so I tryed this:
1. $(document).ready(function() {
2. // the page must load without them
3. $('#area_a').hide();
4. $('#area_b').hide();
5. $('#area_c').hide();
6. //if click on trigger_a
7. $('#trigger_a').click(function() {
8. $('#area_a').animate({
9. height: 'toggle',
10. opacity: 'toggle'
11. }, 1000, function() {
12. });
13. });
This works fine for the first trigger, the problem is when there are more than one area to show, I need somehow to program something that could evaluate if another "div" besides de choosen one is clicked. The scene is when the user click to show a first area first, then he press the second, the area_b will appear but the first div still there, I need to solve this telling the browser that

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend