Skip to content

updated positioning of contact icons #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
prakamya-mishra wants to merge 4 commits into
base: master
Choose a base branch
from
Open

updated positioning of contact icons #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a969a8a
updated positioning of contact icons
toastmasters-snu Jun 27, 2017
64563d5
added top button js
toastmasters-snu Jun 27, 2017
05d0856
added top button to html
toastmasters-snu Jun 27, 2017
d2bf49f
top button css
toastmasters-snu Jun 27, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 21 additions & 1 deletion css/creative.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,6 +471,26 @@ img::-moz-selection {
background: 0 0;
}

#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: #f05f40; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
}

#myBtn:hover {
background-color: #555; /* Add a dark-grey background on hover */
}


body {
webkit-tap-highlight-color: #222;
}
}
10 changes: 5 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,16 +245,16 @@ <h2 class="section-heading">Let's Get In Touch!</h2>
<hr class="primary">
<p>Any Questions? Ping us anytime and we'd love to help you</p>
</div>
<div class="col-lg-4 col-lg-offset-2 text-center">
<div class="col-lg-4 col-lg-offset-4 text-center">
<a href="https://www.facebook.com/snuacm/" class="btn btn-default btn-xl wow tada"><i class="fa fa-facebook fa-3x wow bounceIn"></i></a>
</div>
<div class="col-lg-4 text-center">
<a href="mailto:[email protected]"><i class="fa fa-envelope-o fa-3x wow bounceIn" data-wow-delay=".1s"></i></a>
<a href="mailto:[email protected]"><i class="fa fa-envelope-o fa-3x wow bounceIn" data-wow-delay=".1s"></i></a>
</div>
</div>
</div>
</section>

<!-- Top button -->
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

<!-- jQuery -->
<script src="js/jquery.js"></script>

Expand Down
17 changes: 17 additions & 0 deletions js/creative.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,3 +46,20 @@
new WOW().init();

})(jQuery); // End of use strict
// Top button
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Chrome, Safari and Opera
document.documentElement.scrollTop = 0; // For IE and Firefox
}