WordPress.org

1. Minklet
   Member
   Posted 2 years ago #

   Hello, I'm a student trying to learn by doing so please forgive me for being a bit green.

   I have recently spent quite a lot of time trying to get my head into JQuery after having been introduced to Javascript at Uni. I followed this tutorial and modified it slightly to be able to apply it to my own design (the CSS was a bit messy and very restrictive):

   http://net.tutsplus.com/tutorials/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/

   Anyway, after making that (supposedly) easily placeable into another layout, I tried to create my own theme. Because of my own inadequacies with CSS and floats, I tried modifying a theme that was a similiar layout to my own.

   However, when I try and replace the navigation menu with my own and comment out this line:

   <div class="menu">
   					<ul class="lavaLamp">
   						<li><a href="<?php echo get_settings('home'); ?>">Home</a></li>
   						<?php wp_list_pages('title_li=&depth=1'); ?>
   					</ul>
   				</div>

   and replace it with this one:

   <div id="container">
   					<div id="feed" class="pri-nav active"><div><a href="feed"></a></div></div>
   					<div id="events" class="pri-nav"><div><a href="events"></a></div></div>
   					<div id="photos" class="pri-nav"><div><a href="photos"></a></div></div>
   					<div id="info" class="pri-nav"><div><a href="info"></a></div></div>
   					<div id="contact" class="pri-nav"><div><a href="contact"></a></div></div>
   			</div>

   Nothing below the header image displays. Now I'm assuming this is because the menu of mine is not dynamic. Does this have to be the case? I don't want my number of pages to increase anyway.

   Now the links to my pages I have made static, ie photos points to http://www.mysite.com/photos-php, so the links can be made to point correctly.

   And to make the animation know which is the current page I tried a cimple if else statement:

   <?php if (is_home()) { ?>
   <div id="container">
   					<div id="feed" class="pri-nav active"><div><a href="feed"></a></div></div>
   					<div id="events" class="pri-nav"><div><a href="events"></a></div></div>
   					<div id="photos" class="pri-nav"><div><a href="photos"></a></div></div>
   					<div id="info" class="pri-nav"><div><a href="info"></a></div></div>
   					<div id="contact" class="pri-nav"><div><a href="contact"></a></div></div>
   			</div>
   <php } ?>
   <?php if (is_page('events')) { ?>
   <div id="container">
   					<div id="feed" class="pri-nav"><div><a href="feed"></a></div></div>
   					<div id="events" class="pri-nav active"><div><a href="events"></a></div></div>
   					<div id="photos" class="pri-nav"><div><a href="photos"></a></div></div>
   					<div id="info" class="pri-nav"><div><a href="info"></a></div></div>
   					<div id="contact" class="pri-nav"><div><a href="contact"></a></div></div>
   			</div>
   <?php } ?>

   ...continuing for each potential page.

   But it isn't working and i'm tearing my hair out trying to figure this out.

   I haven't tackled the subject of altering the jquery for use with wordpress yet, I will do that once I can get the rest of it displaying

   Anyway, please help!

2. racer x
   Member
   Posted 2 years ago #

   1. No, the menu does not need to be dynamic. I actually prefer to code the menu manually to save one less wp function, etc.(Depending on the project requirements.)

   2. Your method of dynamically setting the current page with active is very cumbersome. You could do that like this:
   <div id="feed" class="pri-nav <?php if (is_home()) { echo 'active'; } ?>"><div><a href="feed"></a></div></div>

   But it isn't working and i'm tearing my hair out trying to figure this out.

   Are you referring to the menu not displaying at all?

   Semantically speaking, that is also not the best way to lay out a menu.

3. Minklet
   Member
   Posted 2 years ago #

   That makes much more sense, I will use that method. Thanks very much.

   Ive got the menu to display now, I just need to get the scripts running

   Im not sure I understand the advice i'm seeing that tells me to replace the $ in the jquery script with var $j = jQuery.noConflict();

   Do I replace every $ with $j then?

4. racer x
   Member
   Posted 2 years ago #

   I have not needed to use any noConflict in my jQuery in WordPress unless I was using jQuery within the function.php file. Then I would use:
   jQuery(document).ready(function($) {
   If your jQuery (.js) file is loaded like any other external file like a style sheet, you shouldn't have a problem, though, I am not any expert on this.

Topic Closed

This topic has been closed to new replies.