PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Mon Oct 22, 2018 10:49 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 7 posts ] 
Author Message
PostPosted: Thu Jul 21, 2016 11:10 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4425
Location: United Kingdom
We are looking at a layout where the DIVs will appear on screen, with questions that they click on to feed elsewhere.

I'd like them to "fade in". Preferable from the top down, or all fade in at the same time.

I've seen various options, some on Fiddle but when I take their code in View Frame Source, it doesn't work.

http://jsfiddle.net/SO_AMK/a9dnW/3/
This is kind of it, but I want to be able to add it to DIVs instead of P tags. But be good to get this working first.

Thanks.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Thu Jul 21, 2016 11:25 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6424
Location: Montreal, Canada
That example is JS, not CSS. To have the effect on a div instead of a p, just change the selector. Also, be sure to click the cog next to the word JavaScript in that pane to see which libraries are being loaded.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Thu Jul 21, 2016 2:00 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4425
Location: United Kingdom
Sorry I'm not with you. It doesn't show me *all* the code I need then?

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Thu Jul 21, 2016 2:22 pm 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6424
Location: Montreal, Canada
No, it relies on jQuery, which is what I was trying to point you to.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Thu Jul 21, 2016 2:26 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4425
Location: United Kingdom
But it doesn't show what code is needed for that?

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Thu Jul 21, 2016 2:31 pm 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6424
Location: Montreal, Canada
jQuery is a library, it just needs to be loaded before that code gets called.
Syntax: [ Download ] [ Hide ]
<script src="/path/to/jquery"></script>

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Thu Jul 21, 2016 2:39 pm 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6424
Location: Montreal, Canada
Start to finish all you need
Syntax: [ Download ] [ Hide ]
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Whatever</title>
    <style>
    #test p {
      opacity: 0;
      margin-top: 25px;
      font-size: 21px;
      text-align: center;
    }
    </style>
  </head>
  <body>
    <div id="test">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
    <script>
    $(document).ready(function() {
      $("#test p").delay(1000).animate({"opacity": "1"}, 700);
    });
    </script>
  </body>
</html>
 

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 7 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group