javascript - How make something like Facebook Notifications? - Stack Overflow

admin管理员组

文章数量:1429497

Please, read all the question before thinking wrong things.

I'm trying to implement a Facebook Notifications system like, but I need some help for style this. I already make the notifications, the back-end works perfectly, but I'm using a workaround for style - and truste me, this is slow, ugly and can't provide to me a good way to style the source.

What I'm exatcly talking about is the actions that occurs between "user click in Notifications" and "user receive loaded Notifications". I'm talking about the style of this part. Things like "how I can open a box with loaded notifications?" after click in a button/div/image/text.

Okay, let's continue with that. Now I'm using Fancybox to create my notifications box - yes, FANCYBOX! Following is the visual that I get with Fancybox after click in "notifications" button (the "0"):

This may appears beautiful for you, but for me it's ugly - and this is really, really slow. For make this workaround, I disabled the images of Fancybox, so when it loads, it loads without the black background, the "X" to close the window and other things. Following is my code.

Partially responsable for header:

<!-- This is the html generated by Ruby on Rails,number is dynamic-->
<a href="/notifications/index" class="various fancybox.ajax">0</a>

<script>
  $(document).ready(function(){
    $(".various").fancybox({
      openEffect: 'none',
      closeEffect: 'none',
      prevEffect: 'none',
      nextEffect: 'none',
      fitToView : false,
      autoSize: false,
      scrolling: 'auto',
      maxWidth:300,
      maxHeight:500,
      padding: 0,
      leftRatio: 0.86,
      topRatio: 0.18
    });
  });
</script>

This is generated HTML of notifications/index/ (for pratical example):

<div class="post group">
        <div class="notifications-content">
        <div class="group" id="notification-0">
        <div class="post-middle">
          <div class="notifications-title">
            <b>Bruno postou:</b>
          </div>
          <div class="post-middle-text">
               ADO
          </div>
          <div class="post-middle-actions with-dots">
            <label> Postado às 12:34 de 17 de October</label>
          </div>
        </div>
        </div>
        </div>

        <div class="notifications-content">
        <div class="group" id="notification-1">
        <div class="post-middle">
          <div class="notifications-title">
            <b>Fernando Paladini postou:</b>
          </div>
          <div class="post-middle-text">
              hummmmmmmmm #boilo
          </div>
          <div class="post-middle-actions with-dots">
            <label> Postado às 12:36 de 17 de October</label>
          </div>
        </div>
        </div>
        </div>

        <div class="notifications-content">
        <div class="group" id="notification-2">
        <div class="post-middle">
          <div class="notifications-title">
            <b><a href="#">@Ramon Diogo</a> postou:</b>
          </div>
          <div class="post-middle-text">
              
          </div>
          <div class="post-middle-actions with-dots">
              <label></label>
              <label>Comentado às 12:47 de 17 de October</label>
          </div>
        </div>
        </div>
        </div>
</div>

How I can do that with just HTML, CSS and jQuery / JS? I mean, this effects of when click on button open a "box" with the loaded contents, and when click out closes the "box". I really, really have no idea how to make this. Actually I'm using Fancybox opening a modal, but I don't want open a model, I want make this like Facebook and sites like Trello do - just css/jquery.

Note that I'm not asking for code, I need help because I don't have any ideia how to do this. I want the instructions: what I need make to when click the button, open the notifications box. Or when click outside notification box, close the notification box. The concepts behind this, but I will consider if you post some code too, because will help me with the learning.

Please, read all the question before thinking wrong things.

I'm trying to implement a Facebook Notifications system like, but I need some help for style this. I already make the notifications, the back-end works perfectly, but I'm using a workaround for style - and truste me, this is slow, ugly and can't provide to me a good way to style the source.

What I'm exatcly talking about is the actions that occurs between "user click in Notifications" and "user receive loaded Notifications". I'm talking about the style of this part. Things like "how I can open a box with loaded notifications?" after click in a button/div/image/text.

Okay, let's continue with that. Now I'm using Fancybox to create my notifications box - yes, FANCYBOX! Following is the visual that I get with Fancybox after click in "notifications" button (the "0"):

This may appears beautiful for you, but for me it's ugly - and this is really, really slow. For make this workaround, I disabled the images of Fancybox, so when it loads, it loads without the black background, the "X" to close the window and other things. Following is my code.

Partially responsable for header:

<!-- This is the html generated by Ruby on Rails,number is dynamic-->
<a href="/notifications/index" class="various fancybox.ajax">0</a>

<script>
  $(document).ready(function(){
    $(".various").fancybox({
      openEffect: 'none',
      closeEffect: 'none',
      prevEffect: 'none',
      nextEffect: 'none',
      fitToView : false,
      autoSize: false,
      scrolling: 'auto',
      maxWidth:300,
      maxHeight:500,
      padding: 0,
      leftRatio: 0.86,
      topRatio: 0.18
    });
  });
</script>

This is generated HTML of notifications/index/ (for pratical example):

<div class="post group">
        <div class="notifications-content">
        <div class="group" id="notification-0">
        <div class="post-middle">
          <div class="notifications-title">
            <b>Bruno postou:</b>
          </div>
          <div class="post-middle-text">
               ADO
          </div>
          <div class="post-middle-actions with-dots">
            <label> Postado às 12:34 de 17 de October</label>
          </div>
        </div>
        </div>
        </div>

        <div class="notifications-content">
        <div class="group" id="notification-1">
        <div class="post-middle">
          <div class="notifications-title">
            <b>Fernando Paladini postou:</b>
          </div>
          <div class="post-middle-text">
              hummmmmmmmm #boilo
          </div>
          <div class="post-middle-actions with-dots">
            <label> Postado às 12:36 de 17 de October</label>
          </div>
        </div>
        </div>
        </div>

        <div class="notifications-content">
        <div class="group" id="notification-2">
        <div class="post-middle">
          <div class="notifications-title">
            <b><a href="#">@Ramon Diogo</a> postou:</b>
          </div>
          <div class="post-middle-text">
              http://www.youtube./watch?v=A3zPI-DBf7U
          </div>
          <div class="post-middle-actions with-dots">
              <label></label>
              <label>Comentado às 12:47 de 17 de October</label>
          </div>
        </div>
        </div>
        </div>
</div>

How I can do that with just HTML, CSS and jQuery / JS? I mean, this effects of when click on button open a "box" with the loaded contents, and when click out closes the "box". I really, really have no idea how to make this. Actually I'm using Fancybox opening a modal, but I don't want open a model, I want make this like Facebook and sites like Trello do - just css/jquery.

Note that I'm not asking for code, I need help because I don't have any ideia how to do this. I want the instructions: what I need make to when click the button, open the notifications box. Or when click outside notification box, close the notification box. The concepts behind this, but I will consider if you post some code too, because will help me with the learning.

• javascript
• css
• notifications

Share Improve this question Follow edited Oct 19, 2013 at 11:19 C3roe 96.8k1515 gold badges9898 silver badges170170 bronze badges asked Oct 19, 2013 at 1:47 PaladiniPaladini 4,5721616 gold badges5959 silver badges9797 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You can do that with absolute positioning on the div that contains your notifications.

It should be hidden as a default behavior and you make it visible on click with javascript.

This will help you: http://net.tutsplus./tutorials/html-css-techniques/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery/ but you should change the behavior to react to the click event instead of mouseenter (line 14 of the script part). Replace that part with something like:

$(this).click(function(e) {  
    $(this).find("ul").stop(true, true).slideDown();
    e.preventDefault();
});  

notice the "preventDefault part? that is to avoid the browser to enter the link when you click.

本文标签： javascriptHow make something like Facebook NotificationsStack Overflow