Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Popup Slide with X button at bottom of page

Posted on 2009-05-14
3
Medium Priority
?
506 Views
Last Modified: 2012-06-22
What is that thing at the bottom of page? Is it just jquery or some Jquery+Facebook script?

How do I do exact same? Please provide sample code if possible.

Thanks.
http://www.kazowie.com

Open in new window

0
Comment
Question by:IndianHero2001
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 18

Accepted Solution

by:
Pawel Witkowski earned 2000 total points
ID: 24393886
You mean that simple animation on click ? jQuery is enough, see the example. Just make sure that you have jQuery support added (<script type="text/javascript" src="jquery.js"></script>)

function createAnimElem()
{
 
var el=document.createElement('div');
el.style.width="30px";
el.style.height="30px";
el.style.backgroundColor="red";
 
var state=0;
var time=1500;
 
$(el).click(function()
{
   if (state===1)
   {
      state=0;
      $(this).stop().animate({
          width:"30px",
          height:"30px",
          opacity: 0.3
       },time);
  
     
   }else
   {
       state=1;
       $(this).stop().animate({
          width:"300px",
          height:"300px",
          opacity: 1
       },time);
   }
 
});
return el;
}
 
document.body.appendChild(createAnimElem())

Open in new window

0
 
LVL 2

Author Comment

by:IndianHero2001
ID: 24394102
Can you tell how I Stick that Div box you made to the bottom of page. So, when user scrolls, the div box appears at bottom only.
0
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24394131
Yes of course - I did only an example. I though that you know a little about css.


function createAnimElem()
{
 
var el=document.createElement('div');
el.style.width="30px";
el.style.height="30px";
el.style.backgroundColor="red";
el.style.position="fixed";
el.style.bottom="0";
 
var state=0;
var time=1500;
 
$(el).click(function()
{
   if (state===1)
   {
      state=0;
      $(this).stop().animate({
          width:"30px",
          height:"30px",
          opacity: 0.3
       },time);
  
     
   }else
   {
       state=1;
       $(this).stop().animate({
          width:"300px",
          height:"300px",
          opacity: 1
       },time);
   }
 
});
return el;
}
 
document.body.appendChild(createAnimElem())

Open in new window

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question