Total members 11777 |It is currently Sat May 18, 2019 5:38 pm Login / Join Codemiles

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka





stick message even when user scrolls down or up , the message remains appearing to him . it is called stick (fixed ) popup message. Can used for footer too using JQuery.
javascript code
<html>
<head>
<title>stick message </title>
<!--
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
Note you can download the JQuery package instead of using Google version. -->
<script src="jquery-1.8.3.js"></script>
<script>
//MsgStick stick
jQuery(document).ready(function($){
$(window).bind("load", function() {

var MsgStickHeight = 0,
MsgStickTop = 0,
$MsgStick = $("#MsgStick");

positionMsgStick();

function positionMsgStick() {
MsgStickHeight = $MsgStick.outerHeight();

MsgStickTop = ($(window).scrollTop())+"px";

//$(document.body)
if ( ($("document.body").height()+MsgStickHeight) < $(window).height()) {

$MsgStick.css({
position: "absolute",
top: MsgStickTop,
left:'550px'
});
} else {
$MsgStick.css({
position: "static",color: "Yellow",background: '#0505C0'
});
}
};
$(window)
.scroll(positionMsgStick)
.resize(positionMsgStick);

});
});
</script>

<style type="text/css">
html { background: #fafafa; }

#myDiv
{

border: 1px solid #11e;

}

#MsgStick
{
border: 1px solid #11e;
width:300px;
height:150px;
background: #faCaCa;

}
#myDiv { width: 500px; }
</style>

</head>
<body>
<div id="myDiv">

<center>

<p>Some text data.</p>
<p>Some text data.</p>
<p>Some text data.</p>
<p>Some text data.</p>

<p>Some text data.</p>
<p>Some text data.</p>
<p>Some text data.</p>
<p>Some text data.</p>


<p>Some text data.</p>
<p>Some text data.</p>
<p>Some text data.</p>
<p>Some text data.</p>

<p>Some text data.</p>
<p>Some text data.</p>
<p>Some text data.</p>
<p>Some text data.</p>

<p>Some text data.</p>
<p>Some text data.</p>
<p>Some text data.</p>
<p>Some text data.</p>

<p>Some text data.</p>
<p>Some text data.</p>
<p>Some text data.</p>
</center>
</div>
<p id="MsgStick"> I am a MsgStick, stick message appears here.</p>
</body>
</html>





Author:
Mastermind
User avatar Posts: 2707
Have thanks: 74 time
Post new topic Reply to topic  [ 1 post ] 

  Related Posts  to : stick message even when user scrolls down or up
 how to write code message to user before session will expire     -  
 JMS Message Consumer Example     -  
 Trace soap message     -  
 How to Show a message before the login ?     -  
 Popup message without using javascript     -  
 Java message service(JMS)     -  
 Text message board RPG     -  
 Editing guest message in PHPbb3     -  
 Popup message using JavaScript without using alert function     -  
 show loading status message until the applet is fully loaded     -  



Topic Tags

JQuery Content






Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com