Solved

Popup Slide with X button at bottom of page

Posted on 2009-05-14
3
498 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
  • 2
3 Comments
 
LVL 18

Accepted Solution

by:
wilq32 earned 500 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:wilq32
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…

911 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now