Ajax navigation tab

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
highjo
Forum Contributor
Posts: 118
Joined: Tue Oct 24, 2006 1:07 pm

Ajax navigation tab

Post by highjo »

hello guys!!!
i m doing a ajax site with minimun posback.i have and iframe into which i load the other pages.so for that i have a navigation tab with images doing normal stuffs like onmouseover and mouseout.Since the main page is not loaded, the user will not always know the page he is reading(meaning the one loaded into the iframe).
I want to set the highlighted image to the images clicked and stop the hover behavior.that way the user can knowhe is on the highlighted image page.

i write the hover behavior myself with jquery but the syntax is pretty simple ex.

$('#thelementid') equivalent to our getElementById()
.hover(theonmouseoverfunction , theonmouseoutfunction) the function that does the job
.attr('the attribute', 'its value') equiv to our .style

Code: Select all

 
<script>
//globlal variable setting the state of the tabs true if clicked false if not
                var contactsclick = false;
                var historyclick = false;
                var settingsclick = false;
                var sendclick = false;
 
//there are 4 tabs. so this function set their images to the original
function tabreset()
            {
                 contactsclick = false;
                 historyclick = false;
                 settingsclick = false;
                 sendclick = false;
                $('#fpAnimswapImgFP1').attr('src', 'images/battom2_r1_c2.jpg');
                $('#fpAnimswapImgFP2').attr('src', 'images/battom2_r1_c3.jpg');
                $('#fpAnimswapImgFP3').attr('src', 'images/battom2_r1_c4.jpg');
                $('#fpAnimswapImgFP4').attr('src', 'images/battom2_r1_c5.jpg');
                
            }
 
//this is the onclick function af the image
function fpAnimswapImgFP1_onclick() {
             sendclick = true;
                tabreset();
                //set the highlighted image 
                $('#fpAnimswapImgFP1').attr('src', 'images/battom1_r1_c2.jpg');
               //do other stuffs
            }
 
 
//that's the hover function the first function is for mouseover and the second mouseout
$('#fpAnimswapImgFP1').hover(
                    function(sendclick)
                    {
                        if(sendclick)
                        {
                            alert("true");
                          $(this).attr('src','images/battom1_r1_c5.jpg');  
                        }
                        else
                        {
                            alert("false");
                            $(this).attr('src','images/battom2_r1_c5.jpg');
                        }
                        
                    }, function(){$(this).attr('src','images/battom1_r1_c5.jpg');});
                //$('#fpAnimswapImgFP1').hover(function(){$(this).attr('src','images/battom2_r1_c2.jpg');}, function(){$(this).attr('src','images/battom1_r1_c2.jpg');});
            });
 
</scritpt>
 


this is for only one tab a part from the tabreset function. it seems to not working. so i thing i need a little help guys .you can provide solution in normal javascript if you like thanks.
Post Reply