4 Replies - 1397 Views - Last Post: 09 February 2013 - 03:36 PM

#1 frieling  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 34
  • Joined: 27-February 09

Fade it not working with div

Posted 09 February 2013 - 02:30 PM

Well I am building this tool for the clan I am in to keep track of each member. I decided to do a 2 panel layout. Far left panel, is the navigation(Add soldier, Modify soldier). and the right panel is where you can add the soldier form, and modify the soldier form. But I am having troubles getting the div to display.

They are all located inside divs like so(index.php):

<html>
<head>
  <title>[1stAD] MILES</title>
  <link rel="stylesheet" type="text/css" href="includes/main.css">
  <script type="text/javascript" src="includes/js/jquery.min.js"></script>
  <script type="text/javascript">
  function mod_soldier(){
   if ($('#mod_form').css('display') == 'none'){
    $('#mod_form').fadeIn('slow');
   }
  }
  </script>
</head>
]<body>

<div class="header">
</div>

<div class="content">
  <!--Left Navigation Panel Start-->
  <div class="Nav">
   <ul>
    <li><a href="javascript:mod_soldier()" id="mod_soldier" class="button">Modify Soldier</a></li>
    <li><a href="#" id="add_link" class="button">Add New Soldier</a></li>
   </ul>
  </div>
  <!--Left Navigation Panel Start-->
  <!--<div class="SoldierList">

  </div>-->

  <!--Right Side Panel Start-->
  <div class="SoldierInfo">
   <!--Modify Soldier Form Start-->
   <div class="mod_form" style="display:none;">
    <form action="" method="">
     Search For Soldier: <input type="text" />
    </form>
   </div>
   <!--Modify Soldier Form End-->
  </div>
  <!--Rigt Side Panel End-->
</div>

<div class="footer">
  Copyright © 2013-<?php echo "".date('Y').""; ?>, 1st Armored Division. All Rights Reserved<br />
  Memebership Information Logistics Electronic System 1.0
</div>
</body>
</html>



And then here is what it looks like:
Posted Image

This post has been edited by frieling: 09 February 2013 - 02:30 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Fade it not working with div

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3177
  • View blog
  • Posts: 10,639
  • Joined: 12-December 12

Re: Fade it not working with div

Posted 09 February 2013 - 02:49 PM

<a href="javascript:mod_soldier()" id="mod_soldier"

You should be cancelling the href behaviour and substituting an onclick event:

<a href="#" onclick="mod_soldier()" id="mod_soldier"

Using '#' attempts to cancel the link-behaviour: your function should also return false; to cancel this default behaviour.

BTW
javascript: within inline events is obsolete.
It is much preferable that you don't use an A-tag for this; use another tag, such as a SPAN, and attach an onclick event to this. You can use CSS to make it look like a link if you want to. (It is unnecessary to use an A-link, and then to cancel its inherent behaviour.)

BTWW Remove that spare ] between the closing head and opening body tags.
Was This Post Helpful? 0
  • +
  • -

#3 frieling  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 34
  • Joined: 27-February 09

Re: Fade it not working with div

Posted 09 February 2013 - 03:07 PM

You specified using a span specifically. Why?

But I did as you said, and changed it to onclick. Still not working. Do you need to see the css file?
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3177
  • View blog
  • Posts: 10,639
  • Joined: 12-December 12

Re: Fade it not working with div

Posted 09 February 2013 - 03:28 PM

I like SPANs :)

I chose a SPAN because it is an inline element, like an A-tag.

mod_form is the class-name so it would be '.mod_form' rather than '#mod_form'. Change it to an ID.
Was This Post Helpful? 1
  • +
  • -

#5 frieling  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 34
  • Joined: 27-February 09

Re: Fade it not working with div

Posted 09 February 2013 - 03:36 PM

I have been trying to get this working for 3 hours...and it was that small of a change. Thanks so much. I will post back when I need more help.

P.S. thats a legit reason..
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1