Question

I would like to create a “LiveChat Offering” pop-up that appears in the bottom of the screen after our visitors arrive at a specific page, and have been on that page for say 30 seconds or so. I would like to keep the code jQuery/CSS if at all possible.

<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">Some jQuery that will change the 'display:hidden;' to 'display:block;' on the DIV after 30 seconds</script>

<div id="live-chat" style="position:absolute;bottom:0px; right:100px;z-index:5;display:none;>
 <h4>Need Help?</h4>
 <p>Click the link below for assistance</p>
 <a href="live-chat.php">Chat with a salesman</a>
</div>

Answer 1

Try this:

<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {

setTimeout(function() {
$("#live-chat").css({ "display" : "block" });
}, 30000); // 30 seconds in MS


}); 
</script>

<div id="live-chat" style="position:absolute;bottom:0px; right:100px;z-index:5;display:none;>
 <h4>Need Help?</h4>
 <p>Click the link below for assistance</p>
 <a href="live-chat.php">Chat with a salesman</a>
</div>

Good luck!

Edit:

For sliding it in:

<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {

// Store our panel into a variable.
var $myPanel = $("#live-chat");

// Get the height of the panel dynamically.
var $myPanelHeight = parseInt($myPanel.height());

// Immediately set the opacity to 0 - to hide it and set its bottom to minus its height.
$myPanel.css({ "opacity" : 0, "bottom" : "-" + $myPanelHeight + "px" });

// Set a timeout for the panel to slide and fade in.
setTimeout(function() {

$myPanel.animate({

    // The CSS properties we want to animate (opacity and bottom position).
    opacity: 1,
    bottom: '0'

  }, 2000, function() {

    // Animation complete. 
    // You can put other code here to do something after it has slid-in.

  });

}, 30000); // 30 seconds in MS


}); 
</script>

<div id="live-chat" style="position: absolute; bottom: 0px; right:100px; z-index:5;">
 <h4>Need Help?</h4>
 <p>Click the link below for assistance</p>
 <a href="live-chat.php">Chat with a salesman</a>
</div>