JavaScript/CSS adding picture For VM notification. Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
3 posters

    JavaScript/CSS adding picture For VM notification.

    avatar
    viper8421
    New Member


    Posts : 13
    Reputation : 1
    Language : English

    Solved JavaScript/CSS adding picture For VM notification.

    Post by viper8421 February 6th 2013, 1:26 am

    So I have it set up for VM messages, but i want to replace the pop-up with this picture.
    JavaScript/CSS adding picture For VM notification. VmS_zps0c0e096e


    JavaScript code
    Code:
    var uid='';
    var uname='';

    function ddginit() {
        var x=document.getElementById('unl');
        x.style.display='none';
        uid=x.childNodes[0].href.substring(x.childNodes[0].href.indexOf('&u=')+3);
        uname=x.childNodes[0].innerHTML;
        x.innerHTML='<span id="uid">'+uid+'</span><span id="uname">'+uname+'</span>';
        document.body.insertBefore(x,document.body.firstChild);
    }


    $(function() {
      var url = 'u' + uid + 'wall',
          count, old;
      if (location.pathname.indexOf(url) >= 0) {
        count = $('.message-footer:first a:first')[0];
        if (count) {
          count = /s=(\d+)/.exec(count.href)[1];
          my_setcookie('bilde-vm', count);
        }
        return;
      }
      $('<div id="bilde-vm"></div>').hide().load(url + ' .message-footer:first a:first', function() {
        count = this.firstChild;
        old = my_getcookie('bilde-vm') || 0;
        if (count) {
          count = /s=(\d+)/.exec(count.href)[1];
          if (count > old) {
            $(this).html('<a href="' + url + '">You have a new visitor message</a>').prependTo(document.body).fadeIn();
          }
        }
      });
    });


    CSS code
    Code:
    /*VM Notification*/
    #bilde-vm {
      position: fixed;
      top: 10px;
      left: 10px;
      background: E9E9E9;
      border: 1px solid #FFF;
      padding: 5px;
      z-index: 999;
      outline: 1px solid #444;
    }
    #bilde-vm a {
      color: #444;
      text-decoration: none;
      text-shadow: 0 1px 0 #FFF;
    }
    #bilde-vm a:hover {
      text-shadow: 0 -1px 0 #FFF;
    }

    All this code works, i just want to replace the popup now with a picture.


    Last edited by viper8421 on February 6th 2013, 4:27 am; edited 1 time in total
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51554
    Reputation : 3523
    Language : English
    Location : United States

    Solved Re: JavaScript/CSS adding picture For VM notification.

    Post by SLGray February 6th 2013, 2:49 am

    Try replacing this part of the JavaScript
    Code:
    $(this).html('<a href="' + url + '">[b][color=#339933]You have a new visitor message[/color][/b]</a>').prependTo(document.body).fadeIn();
    Change
    Code:
    [b][color=#339933]You have a new visitor message[/color][/b]
    to what you want.

    You do know that you do not get a pm. In the picture you said inbox.



    JavaScript/CSS adding picture For VM notification. Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    avatar
    viper8421
    New Member


    Posts : 13
    Reputation : 1
    Language : English

    Solved Re: JavaScript/CSS adding picture For VM notification.

    Post by viper8421 February 6th 2013, 4:06 am

    SLGray wrote:Try replacing this part of the JavaScript
    Code:
    $(this).html('<a href="' + url + '">[b][color=#339933]You have a new visitor message[/color][/b]</a>').prependTo(document.body).fadeIn();
    Change
    Code:
    [b][color=#339933]You have a new visitor message[/color][/b]
    to what you want.

    You do know that you do not get a pm. In the picture you said inbox.

    I tired that and it stays the way it was before. like this:
    JavaScript/CSS adding picture For VM notification. Bluebox_zps0fdc1247

    And yeah, it was just kinda refering to the VM "inbox"

    EDIT: ahh I'm sorry, the other admin changed it so it was in the Announcements
    the actual code is
    Code:
    <div id="LGvms" style="display:none">{USERLINK}</div>
    <script type="text/javascript">
    (function() {
        ('Visitor message notification pop up for Forumotion boards. Copyright © by AvacWeb. All Rights Reserved. Use and  modification of this script is not allowed without this entire copyright notice in the original, copied, or modified script. No distribution without consent.');
      var holder = document.getElementById('LGvms');
      var cookie = my_getcookie('LGvms') || 2000;
      var url = holder.firstChild.href + '&page_profil=messages';
      if(url.indexOf('&u=-1') > 0) return;
      jQuery(holder).load(url + ' #cp-main h1', function() {
          var nums = holder.firstChild.innerHTML.match(/[0-9]+/g);
          var totalVMs = parseInt(nums[nums.length-1]);
          if(totalVMs > cookie) {
            holder.innerHTML = '<a href="' + url + '">You have ' + (totalVMs - cookie) + ' new visitor messages.</a>';
            holder.style.display = '';
          }
          my_setcookie('LGvms', totalVMs, 1);
      });
    })();</script>


    EDIT #2:
    I got it working, here was the solution
    Code:

          if(totalVMs > cookie) {
            holder.innerHTML = '<img src="http://i139.photobucket.com/albums/q292/Sporadic_Bullet/VmS_zps0c0e096e.gif" alt="Pulpit rock" width="304" height="228">';
            holder.style.display = '';
          }</script>

    I just did what you said to do but on this one. Thank you for your help!
    Sanket
    Sanket
    ForumGuru


    Male Posts : 48766
    Reputation : 2830
    Language : English
    Location : Mumbai

    Solved Re: JavaScript/CSS adding picture For VM notification.

    Post by Sanket February 6th 2013, 4:43 am

    Glad you posted the solution.
    Topic Solved & Locked