PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Fri Aug 14, 2020 3:18 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 2 posts ] 
Author Message
PostPosted: Mon Sep 28, 2015 9:30 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
Syntax: [ Download ] [ Hide ]
<script type="text/javascript">
    function showDiv() {
        if (document.getElementById('job-application').style.display == 'block') {
            document.getElementById('job-application').style.display = 'none';
            document.getElementById('job-application').style.transition = 'display 0.2s';
           
        } else {
            document.getElementById('job-application').style.display = 'block';
        }
       
       
        if (document.getElementById('applicationbutton').style.display == 'none') {
            document.getElementById('applicationbutton').style.display = 'block';
            document.getElementById('applicationbutton').style.transition = 'display 0.2s';
        } else {
            document.getElementById('applicationbutton').style.display = 'none';
        }
       
    }
 </script>  

<div class='job-left-apply' id='applicationbutton'><a
 onClick=\"showDiv();\"
>Apply Now</a></div>
<div id='job-application'>
<div class='job-left-apply' style='background-color: #153878;'><A>Enter some Info</a></div><br/>
To apply for this role, please enter your covering letter/note to explain why you are suitable for this role.  Your CV will automatically be applied with this note.
<form>
<textarea name='description'></textarea><br/>
<input type='submit' value='Submit Application'>
</form>
</div>


I have a Job page, with an Apply button. When they click it, the DIV containing that button disappears and a DIV with "Enter details here" and a form appears.

But I dont' want it to just be "on/off".. I want it to fade. So am trying to use the getElementById to do that.

I can make it appear, not appear, but the transition isn't working. Any ideas why?

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


Top
 Profile  
 
PostPosted: Mon Oct 05, 2015 3:34 am 
Offline
Forum Newbie

Joined: Mon Oct 05, 2015 2:11 am
Posts: 4
#test p {
opacity: 0;
margin-top: 25px;
font-size: 21px;
text-align: center;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}‚Äč


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

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 10 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:  
cron
Powered by phpBB® Forum Software © phpBB Group