Trying to animate an element with onClick using JavaScript [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I want this div to animate on click using JavaScript.
<div class="Designs">
<p>Designs</p>
<div class="Thumbnails" data-animation="animated pulse">
<img src="images/Halloween/bat_sm.png" width="140" height="82"/>
</div>
</div> <!-- End Designs -->
Please look at my site to see example
http://mast.salemstate.edu/itc18244/Portfolio/
$('.Thumbnails a').on('click', function(e){
var parent = $(this).parent();
var animationName = parent.data('animation') || 'animated pulse';
parent.addClass(animationName).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
parent.removeClass(animationName);
});

Yes, document ready was missing. See the working demo below.
You could also add data-animation to your div with class .Thumbnail, so you can easily modify the animation just with your HTML markup. See different animation for "Designs".
You can find it also at jsFiddle here.
$(function () {
var animationend = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$('.Thumbnails').on('click', function () {
var $this = $(this);
var animationName = $this.data('animation') || 'animated bounce' ;
$this.addClass(animationName).one(animationend, function () {;
$this.removeClass(animationName);
});
});
});
#charset"UTF-8";
#container {
max-width: 960px;
margin-right: auto;
margin-left: auto;
}
body {
/*background-image: url(images/bg.png);*/
background-repeat: repeat-x;
}
name, h3 {
color: black;
padding-left: 5px;
margin: 0;
}
name {
font-size: 51px;
}
h3 {
margin-bottom: 2em;
}
h2 {
margin-top: 30px;
margin-bottom: 5px;
}
p {
font-size: 16px;
margin: 0 0 0 0;
max-width: 960px;
}
#float {
float: left;
padding-left: 10px;
}
img {
min-width: 246px;
float: left;
margin-right: 2em;
margin-top: 6px;
margin-left: 1em;
}
/*-----------------------*/
/* Navigation */
.nav {
height:auto;
margin: 0 .3em 0 0;
display:inline;
display:inline-block;
}
/* specifying the nav list horizontal */
.nav li {
display: inline;
font-size:16px;
padding: 0 0 0 15.8em;
}
.nav a {
text-decoration: none;
display: inline-block;
}
/* ---------------------------- */
/* Designs_Drawings Div ------ */
#content .Designs_Drawings {
width: 680px;
height: 160px;
margin: 8em auto 3em auto;
}
#content .Designs {
background-color: #CCC;
border-style: solid;
border-width: 2px;
width: 230px;
height: 150px;
border-radius: 1em;
-ms-transform: rotate(-10deg);
/* IE 9 */
-webkit-transform: rotate(-10deg);
/* Chrome, Safari, Opera */
transform: rotate(-10deg);
float: left;
display: inline-block;
}
#content .Designs p {
text-align: right;
/* Top,Right,Down,Left */
margin: .5em 1em 0 0;
}
#content .Designs .Thumbnails {
width: 143px;
height: 95px;
background-color: blue;
/* Give thumb div Border/position */
border-style: solid;
border-width: 1px;
/*---------------------*/
/* Top,Right,Down,Left */
margin: .5em 0 0 1em;
/* Curves div Corners */
border-radius: 1em;
}
/* Drawings Div ------ */
#content .Drawings {
background-color: #CCC;
border-style: solid;
border-width: 2px;
width: 230px;
height: 150px;
border-radius: 1em;
-ms-transform: rotate(-350deg);
/* IE 9 */
-webkit-transform: rotate(-350deg);
/* Chrome, Safari, Opera */
transform: rotate(-350deg);
float: right;
display: inline-block;
}
#content .Drawings p {
text-align: right;
/* Top,Right,Down,Left */
margin: .5em 1em 0 0;
}
#content .Drawings .Thumbnails {
width: 143px;
height: 95px;
/* Give div Border */
border-style: solid;
border-width: 1px;
margin: .5em 0 0 1em;
/* Curves div Corners */
border-radius: 1em;
}
/* End Designs_Drawings Div */
/* -------------------------*/
/* Photography_WebSites Div */
#content .Photography_WebSites {
width: 680px;
height: 160px;
margin: 0 auto 4em auto;
}
/* Photography Div ----- */
#content .Photography {
background-color: #CCC;
border-style: solid;
border-width: 2px;
width: 230px;
height: 150px;
border-radius: 1em;
-ms-transform: rotate(350deg);
/* IE 9 */
-webkit-transform: rotate(350deg);
/* Chrome, Safari, Opera */
transform: rotate(350deg);
float: right;
display: inline-block;
}
#content .Photography p {
text-align: right;
/* Top,Right,Down,Left */
margin: .5em 1em 0 0;
}
#content .Photography .Thumbnails {
width: 143px;
height: 95px;
/* Give thumb div Border/position */
border-style: solid;
border-width: 1px;
/*---------------------*/
/* Top,Right,Down,Left */
margin: .5em 0 0 1em;
/* Curves div Corners */
border-radius: 1em;
}
/* Web Sites Div ------ */
#content .WebSites {
background-color: #CCC;
border-style: solid;
border-width: 2px;
width: 230px;
height: 150px;
border-radius: 1em;
-ms-transform: rotate(10deg);
/* IE 9 */
-webkit-transform: rotate(10deg);
/* Chrome, Safari, Opera */
transform: rotate(10deg);
float: left;
display: inline-block;
}
#content .WebSites p {
text-align: right;
/* Top,Right,Down,Left */
margin: .5em 1em 0 0;
}
#content .WebSites .Thumbnails {
width: 143px;
height: 95px;
/* Give div Border */
border-style: solid;
border-width: 1px;
margin: .5em 0 0 1em;
/* Curves div Corners */
border-radius: 1em;
}
/* --------------------*/
/* Big Box Div --------*/
#content .big_box {
background-color: #CCC;
margin: 1em auto 4em auto;
width: 690px;
height: 483px;
position:relative;
/* Curves div Corners */
border-radius: 1em;
/* Give div Border */
border-style: solid;
border-width: 1px;
}
#content .big_box img {
position:absolute;
top:0;
left:0;
width:100%;
height:auto;
}
/* ------ */
/* Footer */
.footer {
height: auto;
margin: 0;
display:inline;
display:inline-block;
width: 100%;
}
.footer .info {
margin: 0;
text-align: center;
}
.footer .info li + li::before {
content:" | ";
display: inline-block;
margin-left: .5em;
margin-right: .5em;
}
/* specifying the nav list horizontal */
.footer li {
display: inline;
font-size:12px;
text-align: center;
}
.footer a {
text-decoration: none;
display: inline-block;
}
.footer .info img {
width: 8px;
height: 8px;
}
<link href="http://cdn.jsdelivr.net/animatecss/3.2.0/animate.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="content">
<div class="Designs_Drawings">
<div class="Designs">
<p>Designs</p>
<div class="Thumbnails" data-animation="animated pulse">
<!-- <img src="images/Halloween/bat_sm.png" />
<img src="images/Halloween/frankenstein_sm.png" /> -->
</div>
</div>
<!-- End Designs -->
<div class="Drawings">
<p>Drawings</p>
<div class="Thumbnails" data-animation="animated bounce"></div>
</div>
<!-- End Drawings -->
</div>
<!-- End Designs_Drawings -->
<div class="Photography_WebSites">
<div class="Photography">
<p>Photography</p>
<div class="Thumbnails" data-animation="animated bounce"></div>
</div>
<!-- End Photography -->
<div class="WebSites">
<p>Web Sites</p>
<div class="Thumbnails" data-animation="animated bounce"></div>
</div>
<!-- End WebSites -->
</div>
<!-- End Photography_WebSites -->
</div>
</div>

You'll need to wait until the document is ready. Wrap your code up like so:
<script>
$(function(){
var animationName = 'animated bounce';
var animationend = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$('.Thumbnails').on('click', function() {
$('.Thumbnails').addClass(animationName).one(animationend, function () {;
$(this).removeClass(animationName);
});
});
});
</script>
You also had a JavaScript error because you were missing a }); to close the callback.

Related

How to make my topnav sticky using javascript?

I have a menu on my website that works as expected and i've seen a tutorial from W3Schools. Here it is: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp .
So i put in the css, javascript but as i scroll down the page it doesn't actually work. It could be that my list/topnav is not a div container but i'm not sure.
Here's my home page:
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
* {
overflow:auto; /* or auto */
}
body {
margin: 0;
background-color: #e5e5e5;
}
.topButton {
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:#bbb; /* 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 */
font-size: 18px; /* Increase font size */
opacity: 0;
}
.topButton:hover {
transition: 0.3s;
opacity: 1;
background-color: #555; /* Add a dark-grey background on hover */
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
h1 {
font-family: 'Bebas Neue', cursive;
background-color: #e5e5e5;
text-align: center;
padding: 0;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #e5e5e5;
font-family: 'Titillium Web', sans-serif;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
border-right:1px solid #bbb;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 48px;
text-decoration: none;
}
li a:hover {
background-color: #696969
}
li a.active {
background-color: #696969;
color: black;
font-weight: 900;
}
.sign-in {
border-left:1px solid #bbb
}
<body>
<div class="header" style="background-color: #e5e5e5;">
<a><img src="/Assets/Images/banner-logo.png" height="100" width="300" style="display:block; margin:auto;"></img></a>
<hr style="margin: 0;">
<ul style="margin-top: 0;" id="navbar">
<li>Web Hosting</li>
<li>VPS</li>
<li>Pricing</li>
<li>About</li>
<li>Contact</li>
<li>Guides</li>
<li style="float:right; border-right:none;">Sign In</li>
<script src="Assets/JS/sticky-nav.js"></script>
</ul>
<hr style="margin: 0;">
</div>
<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible
<strong>when the user starts to scroll the page</strong>.</div>
<button class="topButton" onclick="topFunction()" id="myBtn" title="Go to top"><img src="Assets/Images/top-of-page-arrow.png" style="align-self: center;" width="47.3" height="31.6"></button>
<script src="Assets/JS/top-button.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</body>
</html>
I'm stuck on how to implement their code. Help is appreciated
My code is right, the website works with mobile. I believe it could be the cache that is causing the problem or it could be the sizing of the window.
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
* {
overflow:auto; /* or auto */
}
body {
margin: 0;
background-color: #e5e5e5;
}
.topButton {
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:#bbb; /* 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 */
font-size: 18px; /* Increase font size */
opacity: 0;
}
.topButton:hover {
transition: 0.3s;
opacity: 1;
background-color: #555; /* Add a dark-grey background on hover */
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
h1 {
font-family: 'Bebas Neue', cursive;
background-color: #e5e5e5;
text-align: center;
padding: 0;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #e5e5e5;
font-family: 'Titillium Web', sans-serif;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
border-right:1px solid #bbb;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 48px;
text-decoration: none;
}
li a:hover {
background-color: #696969
}
li a.active {
background-color: #696969;
color: black;
font-weight: 900;
}
.sign-in {
border-left:1px solid #bbb
}
<body>
<div class="header" style="background-color: #e5e5e5;">
<a><img src="/Assets/Images/banner-logo.png" height="100" width="300" style="display:block; margin:auto;"></img></a>
<hr style="margin: 0;">
<ul style="margin-top: 0;" id="navbar">
<li>Web Hosting</li>
<li>VPS</li>
<li>Pricing</li>
<li>About</li>
<li>Contact</li>
<li>Guides</li>
<li style="float:right; border-right:none;">Sign In</li>
<script src="Assets/JS/sticky-nav.js"></script>
</ul>
<hr style="margin: 0;">
</div>
<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible
<strong>when the user starts to scroll the page</strong>.</div>
<button class="topButton" onclick="topFunction()" id="myBtn" title="Go to top"><img src="Assets/Images/top-of-page-arrow.png" style="align-self: center;" width="47.3" height="31.6"></button>
<script src="Assets/JS/top-button.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</body>
</html>

Trouble with chat layout

I am trying to replicate a chat layout on a site I am working on. I was able to create the chat bubble and get the content in pretty much the right spot, I am just having trouble getting it exactly how I want. There are only a few tiny things I am having trouble with. I can't figure out how to get the triangle on the side of the bubble's border to be as thin as the rest of the bubble, as well as making it lower and smaller. I'm having trouble with positioning the sign in image a little lower like in the image of what I need it to look like. And lastly the "Sign In to Comment" needs to be a little to the left of the image. If anyone could shed any light on any of these things, it would be super appreciated!
Currently:
What I am trying to achieve:
As you can see I am very close! just a few tiny things giving me trouble.
HTML:
<div class="sign-in">
<div class="cell one">
<p class="triangle-border right blue">Join the Conversation</p>
</div>
<div class="cell two">
<img class="sign-in-img" src="<?php bloginfo('stylesheet_directory'); ?>/images/sign-in.png" />
</div>
</div>
<span class="si">Sign In to Comment</span>
CSS:
.triangle-border {
position:relative;
padding:15px;
margin:1em 0 .5em;
border:1px solid #5a8f00;
color:#333;
background:#fff;
/* css3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
min-width: 90%;
max-width: 90%;
background-color: #E0F6F2;
}
.triangle-border.blue {
background-color: #CDE5F7;
border:1px solid #3A7DBA;
}
.triangle-border.right {
margin-right:30px;
}
.triangle-border:before {
content:"";
position:absolute;
bottom:-20px; /* value = - border-top-width - border-bottom-width */
left:40px; /* controls horizontal position */
border-width:20px 20px 0;
border-style:solid;
border-color:#5a8f00 transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the smaller triangle */
.triangle-border:after {
content:"";
position:absolute;
bottom:-13px; /* value = - border-top-width - border-bottom-width */
left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
border-width:13px 13px 0;
border-style:solid;
border-color:#fff transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the larger triangle */
.triangle-border.right:before {
top:10px; /* controls vertical position */
bottom:auto;
left:auto;
right:-30px; /* value = - border-left-width - border-right-width */
border-width:15px 0 15px 30px;
border-color:transparent #3A7DBA;
}
/* creates the smaller triangle */
.triangle-border.right:after {
top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
bottom:auto;
left:auto;
right:-21px; /* value = - border-left-width - border-right-width */
border-width:9px 0 9px 21px;
border-color:transparent #fff;
}
.pagecontent .cols .col.two .sign-in {
table-layout: fixed;
display: table;
outline: none;
}
.pagecontent .cols .col.two .sign-in .cell {
display: table-cell;
margin: 5px;
height: 100%;
}
.pagecontent .cols .col.two .sign-in .cell.one {
width: 85%;
}
.pagecontent .cols .col.two .sign-in .cell.two {
padding-left: 2%;
width: 15%;
}
.pagecontent span.si {
font-size: .8em;
color: #808C8D;
}
Here is one way to do it:
<div class="wrapper">
<p class="talk-bubble">
talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble
</p>
<p class="sign-in">
Sign In to Comment
</p>
<img src="your/image.png" />
</div>
CSS:
div.wrapper {
position: relative;
padding-bottom: 0px;
background-color: #ffffff;
z-index: -2;
}
div.wrapper img {
position: absolute;
bottom: 0;
right: 0;
border: 1px solid black;
width: 40px;
height: 40px;
}
.sign-in {
text-align: right;
margin: 0;
margin-right: 50px;
padding: 0;
}
p.talk-bubble {
border: 1px solid #3A7DBA;
padding: 15px;
background-color: #CDE5F7;
position: relative;
margin-right: 60px;
}
p.talk-bubble:before,
p.talk-bubble:after {
box-sizing: border-box;
padding: 0;
content: '';
width: 20px;
height: 20px;
display: block;
position: absolute;
border: 20px solid transparent;
}
p.talk-bubble:before {
z-index: -1;
border-bottom: 20px solid #3A7DBA;
right: -12px;
bottom: -1px;
}
p.talk-bubble:after {
border-bottom: 20px solid #CDE5F7;
right: -10px;
bottom: 0px;
}
https://jsfiddle.net/mcgraphix/zLx5967t/
Check this out:
.triangle-border {
position:relative;
padding:15px;
margin:1em 0 .5em;
border:1px solid #5a8f00;
color:#333;
background:#fff;
/* css3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
min-width: 90%;
max-width: 90%;
background-color: #E0F6F2;
}
.triangle-border.blue {
background-color: #CDE5F7;
border:1px solid #3A7DBA;
}
.triangle-border.right {
margin-right:30px;
}
.triangle-border:before {
content:"";
position:absolute;
bottom:-20px; /* value = - border-top-width - border-bottom-width */
left:40px; /* controls horizontal position */
border-width:20px 20px 0;
border-style:solid;
border-color:#5a8f00 transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the smaller triangle */
.triangle-border:after {
content:"";
position:absolute;
bottom:-13px; /* value = - border-top-width - border-bottom-width */
left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
border-width:13px 13px 0;
border-style:solid;
border-color:#fff transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the larger triangle */
.triangle-border.right:before {
top:25px; /* controls vertical position */
bottom:auto;
left:auto;
right:-15px; /* value = - border-left-width - border-right-width */
border-width:5px 0 5px 15px;
border-color:transparent #3A7DBA;
}
/* creates the smaller triangle */
.triangle-border.right:after {
top: 27px;
bottom: auto;
left: auto;
right: -13px;
border-width: 3px 0 3px 13px;
border-color: transparent #ccf;
}
.pagecontent .cols .col.two .sign-in {
table-layout: fixed;
display: table;
outline: none;
}
.pagecontent .cols .col.two .sign-in .cell {
display: table-cell;
margin: 5px;
height: 100%;
}
.pagecontent .cols .col.two .sign-in .cell.one {
width: 85%;
}
.pagecontent .cols .col.two .sign-in .cell.two {
padding-left: 2%;
width: 15%;
}
.pagecontent span.si {
font-size: .8em;
color: #808C8D;
}
<div class="sign-in">
<div class="cell one">
<p class="triangle-border right blue">Join the Conversation</p>
</div>
</div>

BXslider popup window issue - height problems

I am using bxslider, using a responsive design, multiple sliders and a popup window. The problem. I have the multiple sliders working and rescaling with browser size. The problem is with the popup. The popup cuts off the images.
Note: My javascript skills are very limited, so please explain as much as possible. Examples are always best for non-coders like me.
This post: Bxslider in a pop up div ... makes reference to the bx-viewport having a height of 0px (due to the fact that the initial image was hidden). So, the javascript tries to get the initial image size, but fails because no image was shown (no image = no image height). Once the second image is shown (due to the bxslider autoplay), the problem fixes itself.
I tried to use the solution on Bxslider in a pop up div but it didn't work with my code (it makes reference to monbxslider.js, which I do not use).
So, I see what is causing the problem ... but have no idea how to fix it. I've tried playing with the styles, but that doesn't work. Fixed height doesn't work, because each slider is different, and may have a different image. Below are snippets of my code....
Header Javascript info...
<link href="/js/jquery.bxslider.css" rel="stylesheet"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.bxslider.min.js"></script>
<!-- Popup Toggle -->
<script type="text/javascript">
function toggle_menu(id) {
var e = document.getElementById(id);
if (e.style.display == 'block') e.style.display = 'none';
else e.style.display = 'block';
}
</script>
Styles for Popup
[id^="popup-"], div[id*=" popup-"] {
display:none;
}
.window {
display:block;
background:white;
position:fixed;
top:0; left:0;
margin:50px 5% 0 5%;
width:90%;
z-index: 1001;
}
.window .close {
width: 22px; height: 22px; background: #000; border-radius: 50%; border: 3px solid #fff; display: block; text-align: center; color: #fff; text-decoration: none; position: absolute; top: -10px; right: -10px; z-index: 1002;}
.window .bx-viewport { min-height:200px !important; }
.window .bx-viewport ul li img { width:100% !important; padding:10px; }
.window .bx-viewport ul li { width:100% !important; }
.windowoverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:rgba(0,0,0,0.8);
opacity:0.8;
filter:alpha(opacity=80);
z-index: 1000;
}
BxSlider CSS
/**
* BxSlider v4.1.2 - Fully loaded, responsive content slider
* http://bxslider.com
*
* Written by: Steven Wanderski, 2014
* http://stevenwanderski.com
* (while drinking Belgian ales and listening to jazz)
*
* CEO and founder of bxCreative, LTD
* http://bxcreative.com
*/
/** RESET AND LAYOUT
===================================*/
.bx-wrapper {
position: relative;
margin: 0 auto;
padding: 0;
/* *zoom: 1; */
}
.bx-wrapper img {
max-width: 100%;
display: block;
}
/** THEME
===================================*/
.bx-wrapper .bx-viewport {
background: #fff;
/*fix other elements on the page moving (on Chrome)*/
-webkit-transform: translatez(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
transform: translatez(0);
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
position: absolute;
bottom: -30px;
width: 100%;
}
/* LOADER */
.bx-wrapper .bx-loading {
min-height: 50px;
background: url(../images/bx_loader.gif) center center no-repeat #fff;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
}
/* PAGER */
.bx-wrapper .bx-pager {
text-align: center;
font-size: .85em;
font-family: Arial;
font-weight: bold;
color:#999;
padding-top: 20px;
}
.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
*zoom: 1;
*display: inline;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: #999;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
outline: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
background: #FFF;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
left: 10px;
background: url(../images/controls.png) no-repeat 0 -32px;
}
.bx-wrapper .bx-next {
right: 20px;
background: url(../images/controls.png) no-repeat -43px -32px;
}
.bx-wrapper .bx-prev:hover {
background-position: 0 0;
}
.bx-wrapper .bx-next:hover {
background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 50%;
margin-top: -16px;
outline: 0;
width: 33px;
height: 31px;
text-indent: -9999px;
z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
display: none;
}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
text-align: center;
display:none; /*Hide Stop Button*/
}
.bx-wrapper .bx-controls-auto .bx-start {
display: block;
text-indent: -9999px;
width: 10px;
height: 11px;
outline: 0;
background: url(../images/controls.png) -86px -11px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
display: inline-block;
text-indent: -9999px;
width: 9px;
height: 11px;
outline: 0;
background: url(../images/controls.png) -86px -44px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
background-position: -86px -33px;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
position:absolute;
bottom:10px;
text-align: center;
margin:0 auto;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
right: 0;
width: 35px;
}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
position: absolute;
bottom: 0;
left: 0;
background: #666\9;
background: rgba(80, 80, 80, 0.75);
width: 100%;
}
.bx-wrapper .bx-caption span {
color: #fff;
font-family: Arial;
display: block;
font-size: .85em;
padding: 10px;
}
HTML
<a href="javascript:void(0)" onclick="toggle_menu('popup-1">
<img src="/images/Feature1_300x300.jpg" alt="" />
</a>
<!-- Popup -->
<script type="text/javascript">
$(document).ready(function(){
$('#slider1').bxSlider({
mode: 'fade',
auto: true,
autoControls: true,
pause: 90000,
adaptiveHeight: true
});
});
</script>
<div class="popup" id="popup-1">
<div class="window">
<a href="#" onclick="toggle_menu('popup-1');">
<div class="close">X</div>
</a>
<!-- Slider -->
<ul id="slider1">
<li><img src="/images/Feature1.jpg" /></li>
<li><img src="/images/Feature2.jpg" /></li>
<li><img src="/images/Feature3.jpg" /></li>
</ul>
</div>
<div class="windowoverlay"></div>
</div>
<!-- Popup END -->
Here is the site. Scroll down and click the van image for the popup:
http://www.amazingdg.com/clients/testsite/
Right now the popup starts as display:none. I tried making the display visible, and positioned "off screen", and then "move" the popup onto the visible screen when it is clicked. However, the height was still not recognized. Anyone out there with some ideas?
Figure it out...
When I call the popup, I activate the slider when the popup is displayed (changing display:none to display:block). I was doing it before the popup was called, and that was where the problem was. So the image "height" is activated when the popup is activated, and then the slider is run.
<script type="text/javascript">
function popupwin(Id) {
var winname = document.getElementById(Id);
if (winname.style.display == 'block') {
winname.style.display = 'none';
} else {
winname.style.display = 'block';
$('#slider<?php echo $slidr; ?>').bxSlider({
mode: 'fade',
auto: true,
autoControls: true,
pause: 90000,
adaptiveHeight: true
});
}
}
</script>

I'm adding <li> via my submit button and it is pushing past my div. My js function can't fix it

So I'm trying to make the page continue to add the list items without breaking past the body element as shown.
I would like to keep the all the list items within the body and div like the first few. My best idea on how to go through this is by using if statement at the bottom of the JS to rerun autoResizeDiv. Thanks for any help!!
JS
$(function() {
var $newItemButton= $('#newItemButton');
var $newItemForm= $('#newItemForm');
var $textInput= $('input:text');
$newItemButton.show();
$newItemForm.hide();
$('#showForm').on('click', function() {
$newItemButton.hide();
$newItemForm.show();
});
$newItemForm.on('submit', function(e) {
e.preventDefault();
// this prevents the form from submitting which you need
var newText=$('input:text').val();
$('li:last').after('<li>'+ newText + '</li>');
$newItemForm.hide();
$newItemButton.show();
$textInput.val('')
// this empties the text box so you can add a new entry
});
function autoResizeDiv() {
document.getElementById('page').style.height = window.innerHeight +'px';
// document.getElementById('newItemButton').style.height = window.innerHeight +'px';
}
window.onresize = autoResizeDiv;
autoResizeDiv();
if(document.getElementById('addButton').clicked == true) {
autoResizeDiv();
}
})
CSS
#media screen and (max-width:700px) {
body {
background: #111;
background-size: 780px;
font-family: 'Dosis', sans-serif;
color: white;
display: block;
height:100%;
}
h1, h2, p {
text-align: center;
}
img {
max-width: 50px;
/* display: inline-block; */
/* margin: 4% 0 0% 165px;*/
padding: 10% 45% 0 44%;
/* vertical-align: middle;*/
/* position: absolute;*/
}
h1 {
margin: -1% 0 0 0;
font-size: .8rem;
letter-spacing: 1.2px;
}
h2 {
min-width: 70%;
letter-spacing: 8px;
text-transform: uppercase;
margin: 5% 0 4% 0%;
font-size: 1.4rem;
}
div {
margin: auto;
background: #222;
width: 360px;
}
#page {
/* padding: auto;*/
/* display: inline-block;*/
height: 465px;
}
ul {
list-style: none;
padding: 0;
margin: 5%;
}
li:nth-child(-n+3) {
background-color: #B80000;
}
li:nth-child(n+4) {
background-color: coral;
}
li {
margin: .3% -5.2% .3% -5.2%;
padding: 12px 0 1px 16px;
height: 35px;
font-size: 1.1rem;
/* width: 100%;*/
/*text-align: 30% 0 30% 30%*/
}
p {
color: #111;
background: #FFF;
border-radius: 1.5% / 10%;
font-size: .85rem;
margin: 0% 10%;
}
#newItemButton {
position: absolute;
background: #222;
}
#newItemForm {
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-justify-content: center;
-webkit-flex-wrap: wrap;
background: #222;
z-index: 10; position:relative
}
#itemDescription {
margin: 3.8px 10px 0 0;
width: 68%;
border: none;
border-radius: 2.5% / 18%;
/* padding: 10px 0 0 0;*/
font-size: 1rem;
text-align: left;
text-indent: 10px;
}
#addButton, #showForm {
background: #B80000;
border: none;
text-transform: uppercase;
font-weight: bold;
font-size: 1rem;
color: white;
letter-spacing: .9px;
text-align: center;
}
#addButton {
border-radius: 8% / 20%;
padding: 10px 22px;
margin: 3px 0px 0 0;
}
#showForm {
border-radius: 3% / 11%;
padding: 10px 22px;
margin: 3px 17px 0 0;
float: right;
}
HTML
<!DOCTYPE html>
<html lang="en">
<script src="jquery-1.11.2.min.js"></script>
<script src="jquery-1.11.2.js"></script>
<script src="myscript.js"></script>
<link href='http://fonts.googleapis.com/css?family=Dosis:300|Yanone+Kaffeesatz'
rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="main.css">
<head>
<title> JavaScript Foundations: Variables</title>
<style>
html {
background: #FAFAFA;
font-family: sans-serif;
}
</style>
</head>
<body id="body">
<div id="page">
<img src="lion.png" alt="there's supposed to be a lion">
<h1 id="header">LISTKING</h1>
<h2>Buy Groceries</h2>
<p>"Lions are awesome, fun to play with, and have to pee a lot"
-J.K. Growling</p>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
<div id="newItemButton"><button href="#" id="showForm">new item</button></div>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Add description..." />
<input type="submit" id="addButton" value="add" />
</form>
</div>
</body>
</html>
Please have a look at your CSS and adjust the #page div to have overflow, or remove the height entirely.
#page {
/* padding: auto;*/
/* display: inline-block;*/
height: 465px;
overflow: scroll;
}
try changing your body height:100% to min-height: 100%;
making ul overflow-y:scroll also solves the problem, but a scroll bar may disrupt your look and feel

one page website with css transition to sweep content in from alternating sides

I am trying to create a one page website with 7 navigation links. See my fiddle below.
The first navigation link is located in the top left corner, for now its text called "home". The other 6 links are located underneath my "middle" div.
I am trying to achieve the following effect:
the home page is always displayed upon landing
the 6 links underneath the "middle" div should appear from either the left side of the screen or right side simply depending on this logic: 1st transition enter screen from right side, 2nd transition enter screen from left side, all subsequent transitions to alternate sides.
Each transition should push the existing content off the screen instead of overlapping it.
If the navigation links are explored in sequence from page 1 to page 6, each time a link is clicked the transition should alternate sides. In my current fiddle (although not working correctly) the pages 1 through 6 will all enter the screen from right hand side and if you navigate backwards from 6 to 1 they all enter the screen from the left. This is not what I am looking for. I want alternating sides regardless of which link is clicked except home link in top left.
when the home link is clicked when viewing another links content the transition should appear from top of the screen and push the existing content off the bottom of the screen. This transition should happen behind all the other divs ie. header and footer.
If anyone is able to help me I would really appreciate it as this has taken me quite some time and research.
Here is my html:
<div class="main">
<div class="main_header">
<div id="navigation">
<a id="home_link" href="index.php">Home</a>
<form action="url" method="post" class="formTop">
<input type="text" class="login" Value="Email Address"onfocus="if (this.value == 'Email Address') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Email Address';}" />
<input type="password" class="login" value="Password" onFocus="if (this.value == 'Password') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Password';}" />
<input type="submit" class="submitButton" value="Log in" />
Sign Up
</form>
</div> <!--navigation-->
</div> <!--main_header-->
<div class="main_header_bottom"></div>
<div id="middle">
<div id="page1_content" class "content">Page 1 Content</div>
<div id="page2_content" class "content">Page 2 Content</div>
<div id="page3_content" class "content">Page 3 Content</div>
<div id="page4_content" class "content">Page 4 Content</div>
<div id="page5_content" class "content">Page 5 Content</div>
<div id="page6_content" class "content">Page 6 Content</div>
</div> <!--middle-->
<div class="sub_footer">
Page 1
Page 2
Page 3
Page 4
Page 5
Page 6
</div> <!--sub_footer-->
<div class="footer">
<p>| Contact |
<br />
<SCRIPT LANGUAGE="JavaScript">
today = new Date();
y0 = today.getFullYear();
</SCRIPT>Copyright © 2012-
<SCRIPT LANGUAGE="JavaScript">
document.write(y0);
</SCRIPT> MySampleSiteUnderSonstruction.com. All Rights Reserved</p>
</div> <!--footer-->
</div> <!--main-->
Here is my CSS
body {
background-color: #F5F5F5;
padding: 0;
margin: 0;
text-shadow: 1px 1px 1px #CCC;
font: 0.7em Arial, sans-serif;
line-height: 1.5em;
color: #454545;
overflow-x: hidden;
}
a {
color: #0E4D8B;
background: inherit;
}
a:hover {
color: #000;
background: inherit;
}
a.title {
color: #B41A1A;
background: #FFF;
}
h1 {
font: bold 2em Arial, Sans-Serif;
letter-spacing: -1px;
padding: 16px 0 0 8px;
margin: 0;
}
h2 {
margin: 0;
padding: 0;
font: normal 1.6em Arial, Sans-Serif;
letter-spacing: -1px;
}
h1 a {
color: #FFF;
background: inherit;
}
h1 a, h2 a {
text-decoration: none;
}
h1 a:hover, h2 a:hover {
color: #BFE1ED;
background: inherit;
}
h3 {
font: 90% Arial, Sans-Serif;
margin: 0 0 10px 0;
padding: 0;
color: #5f5f5f;
background: #FFF;
}
p {
align:center;
margin: 0 0 0px 0;
line-height: 1.5em;
}
.main {
margin: 0;
overflow: hidden;
}
.main_header {
background-color: #6E6D71;
height: 75px;
}
.main_header_bottom {
height: 20px;
}
#navigation {
height: 75px;
margin: 0;
padding-left: 100px;
box-shadow: inset 0 -20px 20px -20px #000;
}
#home_link {
float: left;
background-image: url(http://wwwdrumtranscriptions/new/home.png);
background-repeat: no-repeat;
height: 36px;
margin-top: 20px;
width: 40px;
}
.formTop {
float: right;
margin-top: 15px;
margin-right: 75px;
height: 45px;
padding: 5px 8px 0px;
}
.login {
border: 1px solid #333;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow:inset 0 0 4px ##333;
-webkit-box-shadow:inset 0 0 4px #333;
-moz-box-shadow:inset 0 0 4px #333;
color: #6E6D71;
font-size: 12px;
background-color: #CCC;
padding: 8px;
}
#middle {
background-color: blue;
padding-top: 5px;
height: 200px;
/* test only */
margin-left: 110%;
/* Start position: right outside */
-webkit-transition: margin-left 1s;
-moz-transition: margin-left 1s;
-o-transition: margin-left 1s;
transition: margin-left 1s;
}
#middle.page1_inside {
margin-left: 0;
}
#middle.page2_inside {
margin-left: -100%;
}
#middle.page3_inside {
margin-left: -200%;
}
#middle.page4_inside {
margin-left: -300%;
}
#middle.page5_inside {
margin-left: -400%;
}
#middle.page6_inside {
margin-left: -500%;
}
#middle.transition {
/* Effects only */
-webkit-transition: margin-left 1s;
-moz-transition: margin-left 1s;
-o-transition: margin-left 1s;
transition: margin-left 1s;
}
.content {
width: 100%;
margin-right: 10px;
}
#page1_content {
margin-left: 0;
background-color: black;
color: yellow;
}
#page2_content {
margin-left: 100%;
background-color: yellow;
color: black;
}
#page3_content {
margin-left: 200%;
background-color: purple;
color: red;
}
#page4_content {
margin-left: 300%;
background-color: green;
color: orange;
}
#page5_content {
margin-left: 400%;
background-color: red;
color: purple;
}
#page6_content {
margin-left: 500%;
background-color: purple;
color: green;
}
.sub_footer {
text-align: center;
}
.links {
display: inline-block;
padding: 0px 15px 0px 15px;
}
.footer {
clear: both;
text-align: center;
color: #808080;
background: #f0f0f0;
padding: 10px 0 5px 0;
border-top: 1px solid #eee;
}
.footer p {
line-height: 2em;
}
.footer a {
color: #4F4F4F;
background: #f0f0f0;
border-bottom: 1px dotted #808080;
text-decoration: none;
}
Here is my js
$(document).on("click", ".links", function () {
$("#middle").removeClass(); /* Remove all classes */
$("#middle").addClass("transition " + this.id + "_inside"); /* add 'transition' for effects and eg. 'home_inside' classes */
});
Here is my Fiddle
Thanks
I suggest using .animate() I had the same idea and when I tried it it worked perfectly also if you want to have the old ones pushed off use a <ul> inside a div with overflow: hidden; then on the li's use display: inline; and list-style-type: none;
Here is a working fiddle
http://jsfiddle.net/X4URc/3/
Here's an example of how to get this working page1-page6:
#middle.page2_inside #page2_content {
margin-left: 50%;
margin-top: -16px;
}
#middle.page3_inside #page3_content {
margin-left: 66.66%; // margin-left is [(pageNum-1)/pageNum]*100% = 100% * 2/3
margin-top: -64px;
}
#middle.page4_inside #page4_content {
    margin-left: 75%; // 100% * 3/4
margin-top: -112px;
}
#middle.page5_inside #page5_content {
margin-left: 80%; // 100% * 4/5
margin-top: -160px;
}
#middle.page6_inside #page6_content {
margin-left: 83.33%; // 100% * 5/6
margin-top: -208px;
}
Demo

Categories