I'm having an issue with a script (my first try at jQuery) I wrote to fade in divs using a nav menu. If a user clicks different buttons on the nav menu quickly, it loads both divs over top of each other.
Here is the code:
$(document).ready(function(){
$("#about-button").css({
opacity: 0.3
});
$("#contact-button").css({
opacity: 0.3
});
$("#friends-button").css({
opacity: 0.3
});
$("#gallery-button").css({
opacity: 0.3
});
$("#container div.button").click(function(){
$clicked = $(this);
if($clicked.css("opacity") != "1" && $clicked.is(":not(animated)"))
{
$clicked.animate({
opacity: 1,
}, 600 );
var idToLoad = $clicked.attr("id").split('-');
$("#content").find("div:visible").fadeOut("slow", function(){
$(this).parent().find("#"+idToLoad[0]).fadeIn("slow")
})
}
$clicked.siblings(".button").animate({
opacity: 0.3,
}, 600 );
});
});
Here is the styles for the divs and buttons:
#container{
width: 996px;
height: 1050px;
background-image: url(images/bg.png);
background-repeat: no-repeat;
position: relative;
background-position: center top;
margin: 0px auto 0px auto;
}
#navbar {
width: 150px;
height: 300px;
position: absolute;
top: 250px;
left: 100px;
z-index: 2;
visibility: visible;
}
#about {
height: 400px;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: left;
padding: 0px 0px 0px 30px;
width: 650px;
z-index: 3;
left: 250px;
top: 250px;
display:none;
overflow: auto;
}
#footer {
top: 950px;
height: 80px;
position: absolute;
color: #ffffff;
padding: 10px;
width: 988px;
text-align: right;
}
#contact {
height: 400px;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: left;
padding: 0px 0px 0px 30px;
width: 650px;
z-index: 3;
left: 250px;
top: 250px;
display:none;
}
#friends {
height: 400px;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: left;
padding: 0px 0px 0px 30px;
width: 650px;
z-index: 3;
left: 250px;
top: 250px;
display:none
}
#gallery {
height: 400px;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: left;
padding: 0px 0px 0px 30px;
width: 650px;
z-index: 3;
left: 250px;
top: 250px;
display:none;
}
#home {
height: 400px;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: left;
padding: 0px 0px 0px 30px;
width: 650px;
z-index: 3;
left: 250px;
top: 250px;
display:block;
overflow: auto;
padding-right: 10px;
}
#home-button {
opacity: 1.0;
}
#about-button {
opacity: 0.5;
}
#contact-button {
opacity: 0.5;
}
#friends-button {
opacity: 0.5;
}
#gallery-button {
opacity: 0.5;
}
.button{
cursor: pointer;
}
#header{
top: 150px;
position: absolute;
left: 115px;
visibility: visible;
height: 100px;
The HTML markup should be correct, there are no child divs inside any of the content areas, and I have no other conflicts that I can find.
Is there a way I can disable clicks on the menu until the div is :visible? If someone has an answer for that or another fix, i'd really like to see it! this is the only bug that has been found so far with the site.
Thanks!
Without seeing the full picture, I can see a syntax error for the selector in the following line:
if($clicked.css("opacity") != "1" && $clicked.is(":not(animated)"))
The selector for "not animated" should be include the ":" as follows:
if($clicked.css("opacity") != "1" && $clicked.is(":not(:animated)"))
It sounds like the first act of your click function should be to unbind the click event from all the divs, and its last act should be to reinstate the listener.
The way to do this is to put most of your code into its own function (which you put outside the $(document).ready(){} )
Something like this
$(document).ready(function(){
$("#container div.button").click(makeVisible);
});
function makeVisible() {
$("#container div.button").unbind(click);
///your code to make the div visible
$("#container div.button").click(makeVisible);
}
Since animations get queued, the best approach would be to use the stop() method to cause all other animated divs other than the currently targeted one to stop animating. See the documentation at http://docs.jquery.com/Effects/stop#clearQueuegotoEnd for more info.
Related
I am trying to put the .pop-overlay div to body.
It looks like .appendTo(document.body) works with jQuery 2.X.X but does not work with 3.X.X... I did some research but I am still not sure how to do it in another way.
Any idea how to be compatible with jQuery 3.5.X?
.pop-overlay {
position: fixed;
display: none;
}
$(function () {
var overlay = $('<div class="pop-overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
});
Here is the whole thing I am trying on CodePen: https://codepen.io/pen/rNdgZyq
The append works just fine.
The only thing is that pop-overlay is not visible at default. So change this $(".pop-onload").show(); to $(".pop-onload,.pop-overlay").show();
Demo
$(function () {
var overlay = $('<div class="pop-overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$(".pop-onload,.pop-overlay").show();
$(".xclose").click(function () {
$(".pop-onload").hide();
overlay.appendTo(document.body).remove();
return false;
});
});
.pop-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 9999;
display: none;
}
.pop-onload {
width: 100%;
margin: 0 auto;
top: 4%;
border-radius: 20px;
display: none;
position: fixed;
z-index: 99999;
}
.pop-content {
min-width: 250px;
width: 400px;
min-height: 150px;
margin: 1% auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 20px 35px;
box-shadow: 0 2px 20px #000;
border-radius: 20px;
}
.pop-content a {
font-weight: 500;
text-transform: uppercase;
text-decoration: none;
color: #ffffff;
background-color: #eb883a;
border-radius: 0px 0px 0px 0px;
padding: 10px 30px 10px 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class='pop-onload'>
<div class='pop-content'>
<h2>Good stuff here!</h2>
<p>Let's close this pop-up.</p>
Close Me
</div>
</div>
As u can see, my curtain is open every time u first run up the site. The curtain opens when u click Account and closes when u click it again. I need to have the curtain closes and open only when someone clicks Account. Then, I need also that, when u click Account, the world became of the gradient of the background and the background himself get white.
function open_ac_c() {
document.getElementById("ac_c").style.height = "100%";
document.querySelector('button.account_open_button').style.display = "none"
document.querySelector('button.account_close_button').style.display = "block"
}
function close_ac_c() {
document.getElementById("ac_c").style.height = "0%";
document.querySelector('button.account_open_button').style.display = "block"
document.querySelector('button.account_close_button').style.display = "none"
}
body {
background-color: #6f0da8;
margin: 0;
}
.topnav {
background: linear-gradient(90deg, #2c8a86, #1dada7, #04d6ce, #00fff6);
padding: 30px;
float: center;
}
.home {
background-color: transparent;
float: center;
position: absolute;
left: 0px;
top: 0px;
padding: 18.5px;
color: white;
font-size: 20px;
}
.home:hover{
background-color: #048b59;
}
.account{
background-color: transparent;
float: center;
position: absolute;
left: 86px;
top: 0px;
padding: 18.5px;
color: white;
font-size: 20px;
}
body {
font-family: 'Lato', sans-serif;
}
.ac_curtain {
position: fixed;
top: 1;
left: 100px;
background-color: transparent;
transition: 1s;
overflow: hidden;
}
.ac_curtain a {
padding: 8px;
text-decoration: none;
font-size: 20px;
color: #ffffff;
display: block;
}
.account_open_button {
position: absolute;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
position: absolute;
left: 85px;
top: 1px;
padding: 28px 53px;;
}
.account_close_button {
position: absolute;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
position: absolute;
left: 85px;
top: 1px;
padding: 30px 53px;;
}
<div class="topnav">
<dive class="home">Home</dive>
<dive class="account">Account</div>
</div>
<div id="ac_c" class="ac_curtain">
<div class="overlay-content">
Log in
Log out
Dashboard
Settings
</div>
</div>
<button onclick="open_ac_c()" class="account_open_button"></button>
<button onclick="close_ac_c()" class="account_close_button"></button>
On initial load, as the height of ac_curtain is not defined, hence it has a default height and thus it gets displayed on the initial load. Please add height: 0 in the ac_curtain class.
function open_ac_c() {
document.getElementById("ac_c").style.height = "100%";
document.querySelector('button.account_open_button').style.display = "none"
document.querySelector('button.account_close_button').style.display = "block"
}
function close_ac_c() {
document.getElementById("ac_c").style.height = "0%";
document.querySelector('button.account_open_button').style.display = "block"
document.querySelector('button.account_close_button').style.display = "none"
}
body {
background-color: #6f0da8;
margin: 0;
}
.topnav {
background: linear-gradient(90deg, #2c8a86, #1dada7, #04d6ce, #00fff6);
padding: 30px;
float: center;
}
.home {
background-color: transparent;
float: center;
position: absolute;
left: 0px;
top: 0px;
padding: 18.5px;
color: white;
font-size: 20px;
}
.home:hover{
background-color: #048b59;
}
.account{
background-color: transparent;
float: center;
position: absolute;
left: 86px;
top: 0px;
padding: 18.5px;
color: white;
font-size: 20px;
}
body {
font-family: 'Lato', sans-serif;
}
.ac_curtain {
position: fixed;
top: 1;
left: 100px;
background-color: transparent;
transition: 1s;
overflow: hidden;
height: 0;
}
.ac_curtain a {
padding: 8px;
text-decoration: none;
font-size: 20px;
color: #ffffff;
display: block;
}
.account_open_button {
position: absolute;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
position: absolute;
left: 85px;
top: 1px;
padding: 28px 53px;;
}
.account_close_button {
position: absolute;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
position: absolute;
left: 85px;
top: 1px;
padding: 30px 53px;;
}
<div class="topnav">
<div class="home">Home</div>
<div class="account">Account</div>
</div>
<div id="ac_c" class="ac_curtain">
<div class="overlay-content">
Log in
Log out
Dashboard
Settings
</div>
</div>
<button onclick="close_ac_c()" class="account_close_button"></button>
<button onclick="open_ac_c()" class="account_open_button"></button>
I am trying to load my HTML page into a container. However, when I try to load the HTML page, the container doesn't re-adjust its size to accommodate the Page. The contents of my page are still visible but they look like they are overflowing without the background of the container. I am new to WebDev and have no idea about this.
I have three containers. Container Big holds other two containers. ContainerMain holds navigation bar in it and I load page into containerPage whenever someone clicks the nav bar. I want containerMain and ContainerPage to look like a scrollable continous box at the center of container Big with some top and bottom margins but, whenever I load the page into containerPage, it fails to resize itself for the page (in this case, homepage).
<div id="ContainerBig">
<div id="ContainerMain"></div>
<div id="containerPage"></div>
</div>
Here is css for my containers:
#ContainerBig {
left: 0;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
position: absolute;
}
#ContainerMain {
top:10%;
left: 10%;
right: 10%;
width: 80%;
height: 10%;
max-height: 77px;
border-radius: 5px;
position: absolute;
background-color: #262523;
border: 1px solid #111;
}
#containerPage {
top: min(20%,160px);
left: 10%;
right: 10%;
width: 80%;
height: auto;
padding-bottom: 5%;
margin-bottom: 10%;
display: block;
overflow: auto;
position: absolute;
background-color: #fff;
border-radius: 0 0 5px 5px;
}
And I'm trying to load the following webpage:
// Just in case you need it, the code I'm using to load the page is:
function changePage(page, context) {
$(".navItem").removeClass("active");
$(context).addClass("active");
var contain = $("#containerPage");
contain.slideUp("10ms", "linear", function change() {
contain.load(page);
contain.slideDown("10ms");
});
if ($(window).width() < 1126) {
var element = document.getElementById("nav");
element.style.display = "none";
}
}
body {
font-family: HelveticaNeue, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #777;
font-size: 13px;
}
#vertical_line {
position: absolute;
left: 69%;
bottom: 12%;
top: 12%;
border-left: 1px solid #c1c1c1;
}
.pic_owner {
top: 15%;
left: 3%;
width: 25%;
height: auto;
position: absolute;
border: white 10px solid;
border-radius: 10px;
}
.description_owner {
display: block;
position: absolute;
top: 8%;
left: 34%;
width: 33%;
line-height: 21px;
}
#more {
display: block;
font-weight: 400;
}
#heading {
color: #333;
font-family: HelveticaNeue, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 40px;
}
.social {
position: absolute;
top: 8%;
left: 72%;
right: 6%;
line-height: 21px;
}
.socialButton {
-webkit-appearance: button;
top: 10px;
width: 90%;
padding: 6%;
position: relative;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
text-align: center;
text-decoration: none;
margin-bottom: 5px;
}
.fa:hover {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
opacity: 0.9;
}
.fa-instagram {
background: #E1306C;
}
.fa-linkedin {
background: #007bb5;
}
.fa-facebook {
background: #3B5998;
}
.fa-github {
background: #141414;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/styleSheets/styleHomePage.css"/>
<script type="text/javascript" src="jss/homepage.js"></script>
</head>
<body>
<div id="content">
<img class="pic_owner" src="Resources/picture_aayush.jpg">
</img>
<div class="description_owner">
<h1 id="heading">DEVELOPER</h1>
<p><strong id="desc_detail">Loading.....</strong></p>
<p id="more">Loading....</p>
</div>
<span id="vertical_line"></span>
<div class="social">
<p id="addition"></p>
 
<a href="" class="socialButton fa fa-linkedin"
type="button">  Aayush Singla</a>
 
</div>
</div>
</body>
</html>
Please bare with me if this is a simple question. I am stuck on this from kinda week now.
update:
It looks to me like if you want both the header and the page content to scroll together, you need a container element with overflow: auto on it.
<!-- HTML -->
<div id="ContainerBig">
<div id="Container">
<div id="ContainerMain"></div>
<div id="containerPage"></div>
</div>
</div>
//CSS
#ContainerBig {
left: 0;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
position: absolute;
}
#Container {
position: absolute;
top:10%;
left: 10%;
right: 10%;
width: 80%;
height: 80%;
overflow: auto;
}
#ContainerMain {
height: 10%;
max-height: 77px;
border-radius: 5px;
background-color: #262523;
border: 1px solid #111;
}
#containerPage {
height: auto;
padding-bottom: 5%;
margin-bottom: 10%;
display: block;
overflow: auto;
background-color: #fff;
border-radius: 0 0 5px 5px;
}
Here's a working pen: https://codepen.io/jacob_124/pen/ZEQoBxE?editors=1100
Note: It's a bad idea to rely on position absolute for layouts. Especially for when you don't have to. This layout could be easily accomplished with relative positioning.
Here's a pen with position relative: https://codepen.io/jacob_124/pen/BajxQbv
I'm looking to fadeIn/fadeOut and slideUp/slideDown at the same time in order to fell or rise the title smoothly.
In this code, try to hover in and hover out. The hover out action makes the title Audi falling instantly.
$(document).ready(function(){
$("#introgreen .col-md-4").hover(function(){
$(this).find('.imagep text').slideUp().fadeIn(800);
}, function(){
$(this).find('.imagep text').slideDown().fadeOut(800);
});
});
#introgreen img{
width: 100%;
position: relative;
}
#introgreen .col-md-4 .wholeimage{
position: relative;
width: 100%;
}
#introgreen .imagespan{
position: absolute;
left: 0;
top: 20;
background-color: #d24f0b;
padding: 5px 15px;
font-size: 18px;
font-weight: bold;
color: white;
z-index: 3;
}
#introgreen .imagep{
display: inline-block;
border: solid 1px white;
position: absolute;
width: 100%;
left: 0;
bottom: 0;
color: white;
background-color: rgba(0,0,0,0.5);
height: auto;
padding: 20px;
}
.imagep text{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="introgreen">
<div class="col-md-4"><div class="wholeimage"><img src="http://autopazar.co.uk/media/5215/Used_Audi_Q7_2007_Black_4x4_Diesel_Automatic_for_Sale_in_Kent_UK.jpg"><span class="imagespan">10 000</span><span class="imagep"><h3>audi</h3><text>some details of car</text></span></div></div>
</div>
You can set height to #introgreen .imagep and height transition hover effect as below, so using jQuery text fades-in and using CSS hover slideup and down takes place, hope this help.
$(document).ready(function(){
$("#introgreen .col-md-4").hover(function(){
$(this).find('.imagep text').fadeIn(800);
}, function(){
$(this).find('.imagep text').fadeOut(800);
});
});
#introgreen img{
width: 100%;
position: relative;
}
#introgreen .col-md-4 .wholeimage{
position: relative;
width: 100%;
}
#introgreen .imagespan{
position: absolute;
left: 0;
top: 20;
background-color: #d24f0b;
padding: 5px 15px;
font-size: 18px;
font-weight: bold;
color: white;
z-index: 3;
}
#introgreen .imagep{
display: inline-block;
border: solid 1px white;
position: absolute;
width: 100%;
left: 0;
bottom: 0;
color: white;
background-color: rgba(0,0,0,0.5);
height:50px;
padding: 20px;
transition:height 1s ease;
}
#introgreen .imagep:hover{
height:100px;
}
.imagep text{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="introgreen">
<div class="col-md-4"><div class="wholeimage"><img src="http://autopazar.co.uk/media/5215/Used_Audi_Q7_2007_Black_4x4_Diesel_Automatic_for_Sale_in_Kent_UK.jpg"><span class="imagespan">10 000</span><span class="imagep"><h3>audi</h3><text>some details of car</text></span></div></div>
</div>
My css transition doesn't work. I cannot figure out what the problem is. I am adding the class using JavaScript. The element is not changing display. Here is my code and the link to my codepen. I am trying to make a simple modal for a tic tac toe game. Thanks for any help!
.back {
margin-top: 200px;
}
.box {
display: inline-block;
vertical-align:top;
background: lightgray;
width: 120px;
height: 120px;
margin: 2px 0 2px 0;
border-radius: 20px;
}
h1 {
margin-top: 30px;
font-weight: bold;
font-size: 4em;
}
.popup {
font-family: 'Signika', 'sans-serif';
margin: 200px auto 0 auto;
width: 700px;
height: 270px;
background: skyblue;
border: 6px solid #8dadc3;
box-shadow: 0px 0px 300px 700px rgba(177, 217, 244, 0.9);
border-radius: 40px;
position: relative;
z-index: 1;
visibility: visible;
opacity: 1;
transition: all 5s;
}
.popup h4 {
padding-top: 60px;
font-weight: bold;
font-size: 3em;
left: 10%;
position: absolute;
}
.x {
margin-top: 130px;
position: absolute;
border: 4px solid #8dadc3;
left: 40%;
}
.o {
margin-top: 130px;
position: absolute;
border: 4px solid #8dadc3;
left: 50%;
}
.popup.hide {
opacity: 0;
visibility: hidden;
}
This is my JavaScript:
$(document).ready(function(){
var chosen;
$('.player').on("click", function(e){
if($(this).hasClass("x")){
console.log("X");
chosen = "X"
} else {
console.log("O");
chosen = "O";
}
$('.popup').addClass('hide');
});
});
link to codepen:
Direct link to code
The problem is you are using the CSS class hide and Bootstrap is set up to apply display: none !important; to that:
https://github.com/twbs/bootstrap/blob/v3.3.6/dist/css/bootstrap.css#L6528-L6530
Change the class name in both the CSS and JavaScript and it will work.
The only problem I've found in your example was typo in class name.
In your JavaScript your are adding .hiding class, but the class is called .hidi . After changing it to .hiding, everything seems to work.