SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  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 show delete button

    Hello,

    I wanted to show on hover my delete button(X). But it seems its not working. can anyone see my code and tell me what is wrong am doing?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <script>
    
    /* when the dom is ready... */
    window.addEvent('domready',function() {
    	/* hide all controls right away */
    	$$('div.record-controls').setStyle('visibility','hidden');
    	/* add events for show/hide */
    	$$('div.record').each(function(rec) {
    		var controls = rec.getFirst('div.record-controls');
    		rec.addEvents({
    			mouseenter: function() { controls.fade('in') },
    			mouseleave: function() { controls.fade('out') }
    		});
    	});
    });
    </script>
    <style>
    <link >
    .record				{ width:700px; border:1px solid #ccc; padding:15px; margin:0 0 15px 0; }
    .record:hover		{ background:#eee; }
    .record-controls	{ font-size:10px; }
    .unapprove			{ color:#d98500; }
    .delete				{ color:#bc0b0b; }
    </style>
    </head>
    <body>
    <!-- more records above -->
    <div class="record">
    	<p>
    		<strong>Record 1</strong><br />
    		Hello!
    	</p>
    	<div class="record-controls">
    
    		<a href="#" class="delete" title="delete">X</a>
    	</div>
    </div>
    <div class="record">
    	<p>
    		<strong>Record 2</strong><br />
    		Hello World!
    	</p>
    	<div class="record-controls">
    
    		<a href="#" class="delete" title="delete">X</a>
    	</div>
    </div>
    <!-- more records below -->
    </body>
    </html>
    Thanks in advance.

  2. #2
    SitePoint Evangelist
    Join Date
    Mar 2006
    Location
    Sweden
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You set:
    $$('div.record-controls').setStyle('visibility','hidden');

    And then do:
    controls.fade('in')

    Perhaps the fade method doesn't set CSS visibility to 'visible'? What about setting:
    $$('div.record-controls').setStyle('opacity',0);
    instead? That will still hide the div, and allow the fade method to fade in the element without worrying about setting visibility to visible.

  3. #3
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot for your wysiwyg,

    Quote Originally Posted by wysiwyg View Post
    You set:

    $$('div.record-controls').setStyle('opacity',0);
    instead? That will still hide the div, and allow the fade method to fade in the element without worrying about setting visibility to visible.
    I tried replacing this
    $$('div.record-controls').setStyle('visibility','hidden');
    to this
    $$('div.record-controls').setStyle('opacity',0);
    No change. could you please tell me what can i do now?

  4. #4
    SitePoint Evangelist
    Join Date
    Mar 2006
    Location
    Sweden
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, have you tried adding an alert call or something in your event handlers, just to see that the handler is triggered correctly?

  5. #5
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, You are right alert message is not displaying, if i put it in the middle of the JS function.

    Could you please tell me what can i do now?

  6. #6
    SitePoint Evangelist
    Join Date
    Mar 2006
    Location
    Sweden
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, add an alert in the 'domready' callback to see if even that function is fired. If it is, add some debugging inside the each loop to see what the rec variable contains.

  7. #7
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am sorry, what is 'domready'?

    have you tried this code into your machine?

  8. #8
    SitePoint Evangelist
    Join Date
    Mar 2006
    Location
    Sweden
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You add a callback for the domready event here in your code:
    window.addEvent('domready',function() {
    });

    inside that function, add an alert to check that it actually runs.

  9. #9
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    check the javascript error log.

  10. #10
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello wysiwyg,

    I tried what you have suggested to me. but it seems nothing is changing. I am not getting even alert message.
    see here is the code-
    Code JavaScript:
    <script>
     
     
    	/* hide all controls right away */
    	$$('div.record-controls').setStyle('visibility','hidden');
    	/* add events for show/hide */
     
    	$$('div.record').each(function(rec) {
    	window.addEvent('domready',function() {
    });
    		alert("Hello");
     
    		var controls = rec.getFirst('div.record-controls');
    		rec.addEvents({
    	mouseenter: function() { controls.fade('in') },
    	mouseleave: function() { controls.fade('out') }
    		});
    	});
    });
     
    </script>

    Thanks for your reply crmalibu,
    check the javascript error log.
    How can i check that? Can we do that with insect? but it for only for the checking design(CSS) purpose right?

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    re: checking the javascript error log

    Quote Originally Posted by deepson2 View Post
    How can i check that? Can we do that with insect? but it for only for the checking design(CSS) purpose right?
    That depends on which web browser you are using.

    With Firefox, you go to the Tools menu and select Javascript Console

    With Google Chrome, you go to current page icon, and select Developer -> Javascript Console

    With IE8, you go to the Tools menu and select Developer Tools -> Script and move on from there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thnaks for the information pmw57. I ll check it.

    Well, i got the following code. may it ll help for someone who is looking for it.

    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>

  13. #13
    SitePoint Evangelist
    Join Date
    Mar 2006
    Location
    Sweden
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How can that be the code when it doesn't contain any Javascript? Is it mootools that you are using? In your code, your not including any other Javascript files, but you're still using other functions.

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    If CSS is the issue, then I suspect that the CSS Forum will be be a more appropriate venue then.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @wysiwyg,

    Using this code i don't have to use any java script. But the kind of effect i am getting with this code is exactly i want it. So i think i don't have to consider JS here. Anyways thanks for your help.


    @pmw57,

    The issue is already sovled. thank you.


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
  •