A small change on a java code...

Discussion in 'JavaScript' started by Website_Playboy, Jul 17, 2011.

  1. #1
    Attached base code which makes this facebook like notify popups on the right side of a smf forum.

    [​IMG]

    All i need is to change the CLOSE X part on the bottom to be on the top as explained on below picture.

    [​IMG]
     

    Attached Files:

    Website_Playboy, Jul 17, 2011 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Without changing the plugin code, you can do it by changing the box styles.
    
    <html>
    <head>
    <title>jGrowl Demo</title>
    <link rel="stylesheet" type="text/css" href="jquery.jgrowl.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.jgrowl_minimized.js"></script>
    <script type="text/javascript">
    	$(document).ready(function() {
    		$.jGrowl.defaults.closerTemplate = '<div style="position: absolute; top: -15px;">[ X ]</div>';
    		$.jGrowl("Hello world!", { sticky: true } );
    		$.jGrowl("Hello world!", { sticky: true } );
    		$('#jGrowl').css( 'top', '15px' );
    	});
    </script>
    </head>
    <body>
    </body>
    </html>
    
    Code (markup):
     
    Cash Nebula, Jul 23, 2011 IP
  3. Website_Playboy

    Website_Playboy Member

    Messages:
    115
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    26
    #3
    I dont get it. Which files, which code im gonna edit exactly?

    I am still an amateur. Would u please explain in details?
     
    Website_Playboy, Jul 24, 2011 IP
  4. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Ok, forget that.

    Try adding this to the bottom of jquery.jgrowl.css
    
    div.jGrowl:first-child {
    	margin-top: 18px;
    }
    
    div.jGrowl div.jGrowl-closer {
    	position: fixed;
    	top: 0;
    }
    
    Code (markup):
    It should be in the css folder of your theme.
     
    Cash Nebula, Jul 24, 2011 IP
  5. Website_Playboy

    Website_Playboy Member

    Messages:
    115
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    26
    #5
    Perfect. Your da man! Thank you.
     
    Website_Playboy, Jul 24, 2011 IP