SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    on hover effect and href

    Hello,

    I am pretty new and bad with designing part. And i am bit skeptical as well about whether it is CSS issue or Php.

    I am trying to show with each record on hover delete button(X). I got one similar code on net. so i thought my designing part is done and i was so happy. but it seems when i add delete record code using JS it seems its not working.

    Here is my code
    Code CSS:
    <style type="text/css">
    html, body {
     font: 12px "Comic Sans MS", cursive;
     xcolor: #333;
     xbackground: #fff;
    }
    * {
     margin: 0;
     padding: 0;
    }
    #wrap {
     width: 345px;
     margin: 50px auto;
    }
    .rb {
     width: 345px;
     height: 20px;
     display: block;
     
    }
     .rb .headline {
      width: 345px;
      float: left;
      text-decoration: none;
      padding-right: 4px;
     }
     
     .rb span.date {
     padding-right: 4px;
     text-decoration: none;
      border:1px solid #000;
     }
     
      .rb a:hover {
       color: #000;
       border:1px solid #000;
     
      }
     
    a span.delete {
     display: none;
    }
    .rb a:hover span.delete {
        display: block;
     float: right;
     margin: 0 20px 0 0;
     color: #f00;
     
    }
    </style>

    then bello is my php code. it shows me proper hover effect on each record it shows me delete button.
    PHP Code:
    <div id="wrap">
         <div class="rb">

              <?for ($j 0$j <$blogcount$j++) {
              
    $blogid$blogid1[$j];
               echo 
    "<a  class='headline' href='/blogs/".$blogurl[$j]."'>".ucfirst(strtolower(stripslashes($bloglist[$j]))). "<span class='delete'>
    X</span></a>"
    ;
               echo 
    "<br/>";
            }
            
    ?>

        </div>
    </div>
    but when i wrote code for delete button, so i wanted to call JS function for it and i need one more href.Something like this

    PHP Code:
    <div id="wrap">
         <div class="rb">

              <?for ($j 0$j <$blogcount$j++) {
              
    $blogid$blogid1[$j];
               echo 
    "<a  class='headline' href='/blogs/".$blogurl[$j]."'>".ucfirst(strtolower(stripslashes($bloglist[$j]))). "<span class='delete'><a href='javascript:remove($blogid)'>
    X</a></span></a>"
    ;
               echo 
    "<br/>";
            }
            
    ?>

        </div>
    </div>
    When i do this. it doesn't show me the hover effect. it means it shows me the record as well as delete button at the same time.

    so, can anyone please tell me how can i call href inside href and what kind of changes i have to do in my css?

    Thnaks in advance.

  2. #2
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In short, I want to show on hover my delete button should come with each record.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Well I'm assuming the latest anchor in there is appearing on top of the first anchor thus it isn't working...but can you show us a site where this is happening? Why did you need another href? You could have just utilized the <span> and made that a clickable thing to use the JS function.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply Ryan,


    Why did you need another href?
    Because, using two href i want to show the first link which would go to user's profile page and the another one ll delete that user from the list.



    You could have just utilized the <span> and made that a clickable thing to use the JS function.
    I have tried the following
    Code:
    echo "<a  class='headline' href='/blogs/".$blogurl[$j]."'>".ucfirst(strtolower(stripslashes($bloglist[$j]))). "<span class='delete' onClick='javascript:remove($blogid)'>
    X</span></a>";
    But on the delete button(X) it shows me the same link (name of the record) instead of showing me the javasript function( may be its right becase it is inside to href.)

    Quote Originally Posted by RyanReese View Post
    but can you show us a site where this is happening?
    I am sorry, but i cant do that. but i can show you the code which i got from net and with the help of i trying to show my record accordingly.

    here is the code

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
     font: 12px "Comic Sans MS", cursive;
     color: #333;
     background: #FC9;
    }
    * {
     margin: 0;
     padding: 0;
    }
    #wrap {
     width: 345px;
     margin: 50px auto;
     background: #ccc;
    }
    .rb {
     width: 345px;
     height: 20px;
     display: block;
    
    }
     .rb .headline {
      width: 345px;
      float: left;
      color: #04a0ee;
      text-decoration: none;
      padding-right: 4px;
     }
     .rb span.date {
     padding-right: 4px;
     text-decoration: none;
     color: #000;
     }
     .rb .a:hover {
      color: #fff;
      border:1px solid #000;
    
     }
    a span.read {
     display: none;
    }
    .rb a:hover span.read {
        display: block;
     float: right;
     margin: 0 20px 0 0;
     color: #f00;
    }
    </style>
    </head>
    <body>
     <div id="wrap">
                    <div class="rb">
                        <a href="http://your/web/site.html/" class="headline">title header of blog
                            <span class="read">read</span>
                            <span class="date">december 26th 2008, 3:09 AM</span>
                        </a>
                    </div>
    <div class="rb">
        <a href="http://your/web/site.html/" class="headline">title header of blog
            <span class="read">read</span>
            <span class="date">december 26th 2008, 3:09 AM</span>
        </a>
    </div>
                    <div class="rb">
    
                       <a href="http://your/web/site.html/" class="headline">title header of blog
                            <span class="read">read</span>
                            <span class="date">december 26th 2008, 3:09 AM</span>
                        </a>
    
                    </div>
     <!--end wrap--></div>
    </body>
    </html>
    here the link as well as the read link are showing the same result. so i just want to show that link and the delete link/button separately.I mean both should work on different functionality. So do you think we can do this as well with CSS?( because in the above code they have used only css to show the effect)

    You must have seen on twitter, on hover of the every tweet we can see the reply button.i want to built up something like this.

    I hope you ll understand what i am trying to tell you.
    Please help me.

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Showing us the HTML that the PHP generates might make it easier to figure out.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply felgall,

    Here is my code:

    PHP Code:
    $sql = $op->runsql(
    "SELECT * FROM info AS b, favourite AS f WHERE b.id = f.id
    AND f.userid ='$data->author'
     ORDER BY f.id DESC ");
    if(mysql_num_rows($sql) > 0){
    while($row1 = $op->select($sql)){
    $list[$i]=$row1['title'];
    $url[$i]=$row1['path'];
    $id1[$i] = $row1['id'];

    $i++;}
    }else{
    $row = $op->select($sql);
    }
    }
    $count=count($list);
    if($count>0){?>
    <h3 class="interestText">My Favourite </h3>

    <div id="wrap">
         <div class="rb">

              <?for ($j 0$j <$count$j++) {
              
    $id$id1[$j];
               echo 
    "<a  class='headline' href='/abc/".$blogurl[$j]."'>".ucfirst(strtolower(stripslashes($list[$j]))). "<span class='delete'>
    X</a></span>"
    ;
               echo 
    "<br/>";
            }
            
    ?>

        </div>
    </div>
    <? }} ?>
    It shows me the list of all favorite lists of user.

    I hope this is what you want to see.

    please help me.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If I understand you correctly you want two destinations then you will need two links.

    Basically you would need the same approach as used in a drop down menu which can be done with CSS except that IE6 needs a small script to helpp it along.

    Something like this should do what you want if i understand correctly

    http://www.pmob.co.uk/temp/single-line-dropdown.htm

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    deepson, you misunderstood felgall. He wanted the HTML, and actually everything you've been posting has been PHP (or HTML with PHP in it).

    And, as I understand it, anchors can't container anchors either way.

    What's nice about Paul's solution is it will work for everyone, even without Javascript. The script he has is just for IE6 to hover correctly.

    You can still dress it up fancier with JS if you want, but at least everything will work for everyone regardless.

  9. #9
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot Paul O'B , you understood me correctly.

    This is what i wanted.

    Now i am trying to put JS on delete button. I hope it wont give me any problem with this design.

    once again thank you so much.

    @Stomme poes, thanks for your reply as well, you are right paul has given me what i wanted.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •