WordPress.org

Ready to get started?Download WordPress

Forums

WordPress jquery problem (10 posts)

  1. ttmt
    Member
    Posted 2 years ago #

    Hi all

    I have a super simple WP site here as a demo

    http://www.ttmt.org.uk/forum/wordpress

    It's a header.php, footer.php, index.php and page.php.

    I have one page with a title of Page that uses page.php as it's template. The header list the pages so has 'Page' in the header.

    Page.php simple has <h4 id="oneBtn">Red</h4>

    In header.php I have this jquery to change the color of #oneBtn on Page.php when the button in the header in clicked.

    <script type="text/javascript">
    
        $(document).ready(function(){
        	$('#nav li a').click(function(){
    		$('#oneBtn').css('color','red');
    	});
        });  
    
      </script>

    This doesn't work and I can't see why.

    Once the page has loaded and the Page button in the header is clicked again the 'Red' text flashes red then returns to black.

    Can anyone explain why the text in the page won't stay red.

  2. esmi
    Forum Moderator
    Posted 2 years ago #

  3. lee@digitalacorn
    Member
    Posted 2 years ago #

    It's doing exactly what you are asking it to do - Because you have a page reload it is reverting back to before the click event (as it should)

    Basically,

    1. the page loads and the text is black
    2. the click function is fired and the text goes red
    3. the page reloads... starts again from number 1.

    If you were to remove the click function the id="oneBtn" element would be red on doc load

    <script type="text/javascript">
    
        $(document).ready(function(){
    	$('#oneBtn').css('color','red');
        });  
    
      </script>

    Hope that helps.

    Lee.

  4. ttmt
    Member
    Posted 2 years ago #

    lee@digitalacorn thanks i can see whats happening now but removing the click function isn;t going to work for me.

    I need to change the colour of the text on the page when the btw is clicked.

  5. lee@digitalacorn
    Member
    Posted 2 years ago #

    but if the page reloads?

    change the link your using as the click event href value to a hash would work.

  6. nouveller
    Member
    Posted 2 years ago #

    If you don't actually want to navigate anywhere and just change the heading's colour, you need pass the event to the click's callback and call e.preventDefault() to stop it doing it's default action, which is change the page.

    <script type="text/javascript">
    $(document).ready(function(){
      $('#nav li a').click(function(e){
        $('#oneBtn').css('color','red');
        e.preventDefault();
      });
    });
    </script>

    This is of course no good to you if you need the the page to change.

  7. ttmt
    Member
    Posted 2 years ago #

    Thanks for all your responses I think I need another demo to try and explain my problem.

    http://www.ttmt.org.uk/wordpress/

    I'm trying to create a photo portfolio theme.

    I want a portfolio that has more galleries inside it.

    In my demo I have Transport as a portfolio that has Car, Planes and Boats inside it.

    Transport is a page with Cars, Planes and Boats as child pages of Transport.

    Each page has a NextGen slideshow as it's content.

    When you click Transport the child pages are displayed using this code.

    http://pastebin.com/pAnSuJb1

    This also displays the parent page Transport but this was added with

    echo '<li id="firstBtn"><a href="'.get_permalink($post->post_parent).'">'.$parent_title.'</a></li>';

    I can highlight the button clicked with current_page_item and current_page_parent so when the main Transport is clicked or the buttons below they turn red.

    I want to change the color of Transport in the bottom menu when it's clicked

    I was trying to do this with Jquery, so when '#port-nav li a' (Transport at top) is the clicked, '#firstBtn a' (Transport in the bottom menu) would be red.

    jQuery('#port-nav li a').click(function(){
            	jQuery('#firstBtn a').css('color','red');
        	});

    This code flashes the link red until it reloads and returns to black.

    How can I control the color of Transport in the bottom menu like the other links in that menu?

    Hope this makes sense and someone can help - It's driving me mad.

  8. lee@digitalacorn
    Member
    Posted 2 years ago #

    why could you not just style the li?

    #firstBtn {color: red;}
  9. ttmt
    Member
    Posted 2 years ago #

    Yes but I only want it red when it's been clicked, which is why I was using query

    #firstBtn {color: red;}

    This would make it red all the time.

    I'm I missing something here? - I've been trying to change the colour of one button for two days now I could be losing it.

  10. lee@digitalacorn
    Member
    Posted 2 years ago #

    could you not just add 'include=$post->post_parent' to the wp_list_pages query?

    That would probably give you the same classes to style as the children.

    Lee.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.