JavaScript/CSS adding picture For VM notification.

So I have it set up for VM messages, but i want to replace the pop-up with this picture.



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.

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.

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:


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!

Glad you posted the solution.

Topic Solved & Locked