bPopup is not a function? - javascript

I am unable to figure out what's the real problem with this as I have tried different versions of JQuery and Bpopup references.
My Script is
<script type="text/javascript">
$('.AddPlace').click(function (e) {
e.preventDefault();
$('#iframeAddNew').attr('src', 'Popups/AddCity.aspx');
$('.PopUpAddNew').bPopup({
content: 'iframe', //'ajax', 'iframe' or 'image'
modalClose: false,
contentContainer: '.content',
speed: 50,
position: [350, 50]
});
});
function resizeIframe(obj) {
if (obj.contentWindow.document.body.scrollHeight == "20") {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
else {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
// alert(obj.style.height);
}
}
</script>
.PopUpAddNew
{
margin-top: 10px;
display: none;
background-color: #fff;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 25px 5px #999;
color: #111;
display: none;
min-width: 850px;
padding: 25px;
}
.button.b-close, .button.bClose {
border-radius: 7px 7px 7px 7px;
box-shadow: none;
font: bold 131% sans-serif;
padding: 0 6px 2px;
position: absolute;
right: -7px;
top: -7px;
}
.button {
background-color: #2b91af;
border-radius: 10px;
box-shadow: 0 2px 3px rgba(0,0,0,0.3);
color: #fff;
cursor: pointer;
display: inline-block;
padding: 10px 20px;
text-align: center;
text-decoration: none;
}
<script type="text/javascript" src="Scripts/jquery-1.8.3.min.js"></script>
<script src="Scripts/bpopup.js"></script>
<div class="PopUpAddNew">
<span class="button b-close"><span>X</span></span>
<iframe id="iframeAddNew" scrolling="no" style="border: none" onload="resizeIframe(this);"
width="100%"></iframe>
</div>
<a runat="server" href="" class="AddPlace">Add Place</a>
Bpopup not working
I also included jquery and BPopup but it is not working. I think my file is not getting the Bpop refrence file. I am not sure how to verify this.


Finally Figured it out my jquery was including two times that's why this error was

Related

jQuery - one trigger 2 buttons with different outcome

I have the following situation see this fiddle: https://jsfiddle.net/rmt70fjw/
In this example there are 2 buttons where only one of them (register-trigger) triggers a popup to open. The other button login-trigger doesn't do this. This situation together with the HTML is a given, and cannot be changed. Be aware that the popup generator is more complex, than just the click on hide example here.
What I am trying to do is that login-trigger opens as well the popup via the register-trigger button and hides the registration form and shows the login form. And for the register-trigger button the other way around. Currently they arrive in a loop because of the popup trigger.
How do I do this? See fiddle with below jQuery attempt and problem.
jQuery
jQuery('.register-trigger').click(function(){
jQuery('.popup').removeClass('hide');
});
jQuery('#close').click(function(){
jQuery('.popup').addClass('hide');
});
// above is a given, cannot be changed
// below is the current attempt
jQuery('.login-trigger, .register-trigger').click(function(e){
if(e.currentTarget == '.register-trigger'){
jQuery('.register-form').removeClass('hide');
jQuery('.login-form').addClass('hide');
} else {
jQuery('.login-form').removeClass('hide');
jQuery('.register-form').addClass('hide');
jQuery('a.register-trigger').trigger('click');
}
});

You could just add the .register-trigger class to your login button aswell in that case. That will trigger all events of your plugin on the login button click. If you then need some special logic like hiding the register form add some Event handler for your login-trigger
$('.login-trigger').addClass('register-trigger');
// PLUGIN CODE START
jQuery('.register-trigger').click(function(){
jQuery('.popup').removeClass('hide');
});
jQuery('#close').click(function(){
jQuery('.popup').addClass('hide');
});
// PLUGIN CODE END
jQuery('.register-trigger').click(function(){
jQuery('.register-form').removeClass('hide');
jQuery('.login-form').addClass('hide');
});
jQuery('.login-trigger').click(function(e){
jQuery('.login-form').removeClass('hide');
jQuery('.register-form').addClass('hide');
});
body { background-color: #ddd; }
p { width: 100%; }
.popup {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
right: 0;
margin: 0 20%;
width: auto;
height: 66%;
background-color: #fff;
border: 1px solid #e4e4e4;
border-radius: 5px;
}
.hide { display: none; }
form {
margin: 0.5rem;
display: inline-flex;
border-radius: 10px;
box-shadow: 0 2px 3px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.3);
width: 300px;
height: 300px;
text-align: center;
}
#close {
position: absolute;
top: 0;
left: -1.75rem;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05), 0 1px 3px 0 rgba(0,0,0,0.25);
border-radius: 5px 0 0 5px;
background-color: white;
padding: 0.5rem;
transition: 0.3s all;
}
.btn-wrapper {
display: flex;
justify-content: center;
position: absolute;
bottom: 1rem;
right: 0;
left: 0;
}
a {
width: 200px;
margin: 0 1rem;
line-height: 1.4;
text-align: center;
font-size: 1.2rem;
padding: 0.5rem;
background-color: #eee;
color: #333;
border-radius: 0.5rem;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05), 0 1px 3px 0 rgba(0,0,0,0.25);
transition: 0.3s all;
}
a:hover, #close:hover {
background-color: #fff;
cursor: pointer;
box-shadow: 0 2px 3px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="popup hide">
<form class="login-form">
<p style="padding:1rem 3rem;text-align:center;">This is the login form</p>
</form>
<form class="register-form">
<p style="padding:1rem 3rem;text-align:center;">This is the registration form</p>
</form>
<div id="close">X</div>
</div>
<div class="btn-wrapper">
<a class="register-trigger">Register</a>
<a class="login-trigger">Log In</a>
</div>
</body>

Here is the code of jQuery which will work for you!
jQuery('.register-trigger').click(function(){
jQuery('.popup').removeClass('hide');
});
jQuery('#close').click(function(){
jQuery('.popup').addClass('hide');
});
// above is a given, cannot be changed
// below is to
jQuery('.login-trigger').click(function(e){
jQuery('.popup').removeClass('hide');
jQuery('.login-form').removeClass('hide');
jQuery('.register-form').addClass('hide');
});
jQuery('.register-trigger').click(function(e){
jQuery('.popup').removeClass('hide');
jQuery('.register-form').removeClass('hide');
jQuery('.login-form').addClass('hide');
});

Ok, if i understood correctly, it should work like this. Alert should pop up with both buttons.
jQuery('.register-trigger').click(function(){
jQuery('.popup').removeClass('hide');
});
jQuery('#close').click(function(){
jQuery('.popup').addClass('hide');
});
// above is a given, cannot be changed
// below is to
$('.login-trigger, .register-trigger').click(function(e){
$('.popup').removeClass('hide');
if(e.currentTarget == $('.register-trigger').get(0)){
alert("test");
$('.popup .register-form').removeClass('hide');
$('.popup .login-form').addClass('hide');
}
else
{
$(".register-trigger").trigger('click');
$('.popup .login-form').removeClass('hide');
$('.popup .register-form').addClass('hide');
}
});

Javascript image upload and resize issue

I have an image uploader which previews an image you select, allows you to resize, and then shows the resized version.
The original code allowed you to resize a static image, so I've added the ability to upload an image to replace this static one. (#image-3).
However, when you upload and resize, it still shows the static image on the resized version.
I'm not entirely certain with Javascript, and would appreciate any help! Thank you.
$(document).ready(function() {
$('#image-3').rcrop({
minSize: [500, 500],
preserveAspectRatio: true,
preview: {
display: true,
size: [100, 100],
wrapper: '#custom-preview-wrapper'
}
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#image-3').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
$('#image-3').on('rcrop-changed', function() {
var srcOriginal = $(this).rcrop('getDataURL');
var srcResized = $(this).rcrop('getDataURL', 50, 50);
$('#cropped-original').append('<img src="' + srcOriginal + '">');
$('#cropped-resized').append('<img src="' + srcResized + '">');
});
}
}
$("#imgInp").change(function() {
readURL(this);
});
});
body {
margin: 0;
padding: 0px
}
main {
min-height: 500px;
display: block
}
pre {
overflow: auto;
}
.demo {
padding: 20px;
}
.image-wrapper {
max-width: 600px;
min-width: 200px;
}
img {
max-width: 100%;
}
#image-4-wrapper .rcrop-outer-wrapper {
opacity: .75;
}
#image-4-wrapper .rcrop-outer {
background: #000
}
#image-4-wrapper .rcrop-croparea-inner {
border: 1px dashed #fff;
}
#image-4-wrapper .rcrop-handler-corner {
width: 12px;
height: 12px;
background: none;
border: 0 solid #51aeff;
}
#image-4-wrapper .rcrop-handler-top-left {
border-top-width: 4px;
border-left-width: 4px;
top: -2px;
left: -2px
}
#image-4-wrapper .rcrop-handler-top-right {
border-top-width: 4px;
border-right-width: 4px;
top: -2px;
right: -2px
}
#image-4-wrapper .rcrop-handler-bottom-right {
border-bottom-width: 4px;
border-right-width: 4px;
bottom: -2px;
right: -2px
}
#image-4-wrapper .rcrop-handler-bottom-left {
border-bottom-width: 4px;
border-left-width: 4px;
bottom: -2px;
left: -2px
}
#image-4-wrapper .rcrop-handler-border {
display: none;
}
#image-4-wrapper .clayfy-touch-device.clayfy-handler {
background: none;
border: 0 solid #51aeff;
border-bottom-width: 6px;
border-right-width: 6px;
}
label {
display: inline-block;
width: 60px;
margin-top: 10px;
}
#update {
margin: 10px 0 0 60px;
padding: 10px 20px;
}
#cropped-original,
#cropped-resized {
padding: 20px;
border: 4px solid #ddd;
min-height: 60px;
margin-top: 20px;
}
#cropped-original img,
#cropped-resized img {
margin: 5px;
}
<script src="https://rawgit.com/aewebsolutions/rcrop/master/dist/rcrop.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
<input type="file" id="imgInp" />
</form>
<div class="demo">
<div class="image-wrapper">
<img id="image-3" src="https://raw.githubusercontent.com/aewebsolutions/rcrop/master/demos/images/demo.jpg">
<div id="custom-preview-wrapper"></div>
<div id="cropped-resized">
<h3>Images resized (50x50)</h3>
</div>
<div id="cropped-original">
<h3>Images not resized (original size)</h3>
</div>
</div>
</div>

I think you need this
http://jcrop.org/demos/preview
easy implementation.

Jquery doesn't work on the bottom, but works in the head?

function closeMessage(el) {
el.addClass('is-hidden');
}
$('.js-messageClose').on('click', function(e) {
closeMessage($(this).closest('.Message'));
});
$(document).ready(function() {
setTimeout(function() {
closeMessage($('#js-timer'));
}, 5000);
});
* {
box-sizing: border-box;
}
.Message {
display: table;
position: relative;
margin: 40px auto 0;
width: auto;
background-color: #0074d9;
color: #fff;
transition: all 0.2s ease;
}
.Message.is-hidden {
opacity: 0;
height: 0;
font-size: 0;
padding: 0;
margin: 0 auto;
display: block;
}
.Message--orange {
background-color: #f39c12;
}
.Message--red {
background-color: #ff4136;
}
.Message--green {
background-color: #2ecc40;
}
.Message-icon {
display: table-cell;
vertical-align: middle;
width: 60px;
padding: 30px;
text-align: center;
background-color: rgba(0, 0, 0, 0.25);
}
.Message-icon > i {
width: 20px;
font-size: 20px;
}
.Message-body {
display: table-cell;
vertical-align: middle;
padding: 30px 20px 30px 10px;
}
.Message-body > p {
line-height: 1.2;
margin-top: 6px;
}
.Message-button {
position: relative;
margin: 15px 5px -10px;
background-color: rgba(0, 0, 0, 0.25);
box-shadow: 0 3px rgba(0, 0, 0, 0.4);
border: none;
padding: 10px 15px;
font-size: 16px;
font-family: 'Source Sans Pro';
color: #fff;
outline: none;
cursor: pointer;
}
.Message-button:hover {
background: rgba(0, 0, 0, 0.3);
}
.Message-button:active {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0px rgba(0, 0, 0, 0.4);
top: 3px;
}
.Message-close {
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
border: none;
outline: none;
font-size: 20px;
right: 5px;
top: 5px;
opacity: 0;
cursor: pointer;
}
.Message:hover .Message-close {
opacity: 1;
}
.Message-close:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.u-italic {
font-style: italic;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="Message">
<div class="Message-icon">
<img class="icn-img" src="img/turkey.png">
</div>
<div class="Message-body">
<h3 style="text-align: center;"> Have a great Thanksgiving Day with your loved ones! </h3>
<p style="text-align: center;">"There is always something to be thankful for."</p>
<button class="Message-button"><a target="_blank" style="color: white;" href="https://en.wikipedia.org/wiki/Thanksgiving">Learn More</a></button>
</div>
<button class="Message-close js-messageClose"><i class="fa fa-times"></i></button>
</div>
<script src="js/jquery-3.2.1.js"></script>
</body>
I read a similar question and one answered that Scripts should always be at the bottom of the HTML. The thing is though, when I do that the scripts of my code doesn't work anymore. And it is because I placed the Jquery at the bottom. I am using Version 3.2.1.
Works: <head><script src="js/jquery-3.2.1.js"></script></head>
Does not work: <body><script src="js/jquery-3.2.1.js"></script></body>
Fiddle: https://jsfiddle.net/dhtzL8cz/
Somehow it works in the fiddle, but not on my end.

Jquery library needs to be loaded before you can load your custom js file which has jquery code in it.
For example if you have a script.js file in which you have written your jquery code, that needs to be loaded after jquery.js.
Otherwise your code will not work. If you load jquery.js at the bottom of your body, the browser will load the entire html first before jquery, hence causing the issue.
It is not necessary to put js files at the bottom. It is all based on your need. JS files which are not necessary to be loaded before the dom loads can be put at the bottom.
For example if you have a tracking.js file, which tracks the user's behaviour, that could be put at the bottom.
Hope this helps :)

You are probably loading scripts requiring jQuery before this one is called.
<body>
<script src="js/[your custom scripts]"></script>
<script src="js/jquery-3.2.1.js"></script>
</body>
You should add these scripts after you call jquery
<body>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/[your custom scripts]"></script>
</body>
If some for reason this is not possible, you can set an event listener in order to run them after the whole page assets are loaded wrapping them as follows:
document.addEventListener("DOMContentLoaded", function(event) {
enter code here//The content of your scripts here
});

call custom jQuery code after jQuery in folder its working fine,
you only have to do is cal your custom jQuery code after importing jQuery in footer . hope it helps.
here is the codepen link it works
codepen.io link of the working code
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.Message {
display: table;
position: relative;
margin: 40px auto 0;
width: auto;
background-color: #0074d9;
color: #fff;
transition: all 0.2s ease;
}
.Message.is-hidden {
opacity: 0;
height: 0;
font-size: 0;
padding: 0;
margin: 0 auto;
display: block;
}
.Message--orange {
background-color: #f39c12;
}
.Message--red {
background-color: #ff4136;
}
.Message--green {
background-color: #2ecc40;
}
.Message-icon {
display: table-cell;
vertical-align: middle;
width: 60px;
padding: 30px;
text-align: center;
background-color: rgba(0, 0, 0, 0.25);
}
.Message-icon > i {
width: 20px;
font-size: 20px;
}
.Message-body {
display: table-cell;
vertical-align: middle;
padding: 30px 20px 30px 10px;
}
.Message-body > p {
line-height: 1.2;
margin-top: 6px;
}
.Message-button {
position: relative;
margin: 15px 5px -10px;
background-color: rgba(0, 0, 0, 0.25);
box-shadow: 0 3px rgba(0, 0, 0, 0.4);
border: none;
padding: 10px 15px;
font-size: 16px;
font-family: 'Source Sans Pro';
color: #fff;
outline: none;
cursor: pointer;
}
.Message-button:hover {
background: rgba(0, 0, 0, 0.3);
}
.Message-button:active {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0px rgba(0, 0, 0, 0.4);
top: 3px;
}
.Message-close {
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
border: none;
outline: none;
font-size: 20px;
right: 5px;
top: 5px;
opacity: 0;
cursor: pointer;
}
.Message:hover .Message-close {
opacity: 1;
}
.Message-close:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.u-italic {
font-style: italic;
}
</style>
</head>
<body>
<div class="Message">
<div class="Message-icon">
<img class="icn-img" src="img/turkey.png">
</div>
<div class="Message-body">
<h3 style="text-align: center;"> Have a great Thanksgiving Day with your loved ones! </h3>
<p style="text-align: center;">"There is always something to be thankful for."</p>
<button class="Message-button"><a target="_blank" style="color: white;" href="https://en.wikipedia.org/wiki/Thanksgiving">Learn More</a></button>
</div>
<button class="Message-close js-messageClose"><i class="fa fa-times"></i></button>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script>
function closeMessage(el) {
el.addClass('is-hidden');
}
$('.js-messageClose').on('click', function(e) {
closeMessage($(this).closest('.Message'));
});
$(document).ready(function() {
setTimeout(function() {
closeMessage($('#js-timer'));
}, 5000);
});
</script>
</body>
</html>

I'm struggling to get this jquery slide down and up to work

The div I'm animating in jquery is supposed to slide out to expand the width. I've gotten the width animation to work but after adding the slideDown and up code nothing works, the way it should work is:
Enquiries should be clicked and it expands and after it expands the. For slides down and when its clicked again, first the fork slides up and then the ENQUIRIES- shown goes back to its original width.
I'm not sure where my codes gone wrong as I'm new to jquery and java script. THANK YOU FOR ANY HELP!
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
$(this).animate({
width: "950px",
borderRadius: "0px"
}, 1000);
setTimeout(function() {
$('#enquiry-form').slideDown('slow');
}, 1000);
function() {
if ($('#enquiry-form').is("visible") {
$('#enquiry-form').slideUp("slow");
else($('#enquiry-form').is("hidden") {
$('#enquiry-form ').slideDown("slow");
});
});
};
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 10px 19px 0 0;
display: inline-block;
}
#enquiry-form {
width: 950px;
height: 400px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
</div>
</div>

I changed i few things in your js code, i used a class to define the condition when to slideup or down
See the result:
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
var current = $(this)
if ($('#enquiry-shown').hasClass("active")) {
$('#enquiry-form').slideUp('slow', function() {
current.animate({
width: "210px",
borderRadius: "50px"
}, 1000);
});
$('#enquiry-shown').removeClass("active");
} else {
current.animate({
width: "100%",
borderRadius: "0px"
}, 1000, function() {
$('#enquiry-form').slideDown('slow');
});
$('#enquiry-shown').addClass("active");
}
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 0px 20px 0 0;
display: inline-block;
transition: all 1s;
transform: rotate(-90deg);
}
#enquiry-form {
width: 100%;
height: 100px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
#enquiry-shown.active img {
transform: rotate(0deg);
padding-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
This is the enquiry form
</div>
</div>

I don't know if u want to achieve this effect, but try this and give me feedback:
$('#enquiry-shown').click(function() {
if($('#enquiry-form').is(':visible')){
$('#enquiry-form').slideUp('slow', function(){
$('#enquiry-shown').animate({
width: "210px",
borderRadius: "50px"
}, 1000);
});
}
else if($('#enquiry-form').is(':hidden')){
$('#enquiry-shown').animate({
width: "950px",
borderRadius: "0px"
}, 1000, function(){
$('#enquiry-form').slideDown('slow');
});
}
});

You have a lot of syntax errors such as incorrectly matched brackets, missing parenthesis, missing function name, and using else when you should use else if.
When you fix all of them it looks like your click function already has some of your intended functionality.
Next I'd suggest removing the setTimeout in favor of jQuery's animate end handler, which you use by attaching a function to most animations.
Lastly you should refactor your code a little. I don't think is('visible') does what you think it does, but luckily there's a slideToggle method that does do what you want pretty easily.
Your click handler then needs to consider cases when the menu is already open and when it's not open and then act accordingly. For that you might consider using toggleClass and then checking which class it is with hasClass before deciding what animation to perform.
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
if(!$(this).hasClass('closed')){ // if the form is not closed
$(this).animate({ // animate the form to open state
width: "950px",
borderRadius: "0px",
}, 1000, ()=>{
$("#enquiry-form").slideToggle()
});
}else{ // if the form is closed animate in reverse order
$("#enquiry-form").slideToggle(
()=>{
$(this).animate({
width : "210px",
borderRadius : "50px"
}, 1000);
}
)
}
$(this).toggleClass('closed'); // toggle the class
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 10px 19px 0 0;
display: inline-block;
}
#enquiry-form {
width: 950px;
height: 400px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
<div> Hello I am a form </div>
</div>
</div>

Why are there different results for the following code?

I have a project where I create a virtual workstation using HTML CSS and JavaScript.
The code works smoothly and perfectly, as shown below (minus the images)
<!DOCTYPE html>
<html>
<head>
<title>Malfunction Compueter</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<style>
html{
font-family: courier
}
.inner{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: white;
font-size: 20px;
opacity: 1.0;
}
.loadScreen {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 999999999999999999999999999999999999999999;
background: white;
font-size: 80px;
text-align: center;
padding-top: 150px
}
#cover{
position: relative
}
#content{
padding-top: 50px
}
td{
width: 33.3%
}
table{
width: 100%;
text-align: center
}
.titleSelection{
font-size: 60px;
transition-duration: 0.5s;
line-height: 10px
}
.titleSelection:hover{
box-shadow: 0 15px 19px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.title{
text-align: center;
padding-top: 40px;
}
#titleImage{
height: 200px
}
.selectionIcon{
height: 120px
}
#backgroundImage{
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
z-index: -9999;
text-align: center
}
#background{
width: 100%;
bottom: 0px
}
#title{
font-size: 60px;
font-family: "kaiTi";
text-align: center;
line-height: 5px
}
#exit{
position: fixed;
bottom: 10px;
right: 40px;
z-index: 99999
}
#exit:hover + #exitText{
font-size: 30px
}
#exitText{
transition-duration: 0.5s;
font-family: "kaiTi";
position: fixed;
bottom: 45px;
right: 45px;
z-index: 99999;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
color: white;
}
#fangNiu{
position: fixed;
left: 0px;
top: 0px;
width: 200px;
height: 74px;
z-index: 999999;
}
.innerTitle{
font-size: 80px;
text-align: center
}
.goodQuotesTable{
width: 20%;
font-size: 25px;
text-align: justify;
padding-right: 10px;
padding-left: 10px;
}
#quotesTable{
border-collapse: collapse;
vertical-align: bottom;
}
b{
font-size: 45px;
text-align: center
}
.quoteImage{
height: 50px;
width: 50px;
}
#summary{
border: 10px;
}
.quote{
color: black;
}
/* tell the container's children to float left: */
.floatLeft > * {
float:left;
margin-right:5px;
}
.floatRight > * {
float:right;
margin-left:5px;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/* end clearfix*/
/* below is just to make things easier to see, not required */
body > div {
margin-bottom:10px;
}
.characterPicture{
height: 140px;
width: auto
}
#summaryText{
text-align: center;
font-size: 80px
}
.characterText{
font-size: 25px;
}
.tab{
position: relative;
margin-left: 120px;
margin-right: 10px;
}
#summaryItself{
padding: 10px
}
#schoolImage{
height: 290px;
width: auto
}
button{
border-radius: 50%;
background-color: #00FF04;
border-color: #00FF04;
color: white;
font-size: 40px;
transition-duration: 0.4s;
width: 25%;
height: 80px;
}
button:hover{
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
background-color: red;
border-color: red;
}
#options{
text-align: center
}
#apps{
text-align: center
}
#languageMenu{
opacity: 0.9;
height: 100%;
width: 100%;
z-index: 99999999999999999999999999999999999999999999999999999999999999999999999999;
}
</style>
<body>
<p id="title">Malfunction Compueter</p><br><p id="title">Version A0.1</p>
<div id="content">
<table id="titleSelections">
<tr>
<td class="titleSelection" id="about"><img src="images/info.png" class="selectionIcon"><br><p>About</p></td>
<td class="titleSelection" id="settings"><img src="images/settings.png" class="selectionIcon"><br><p>Settings</p></td>
<td class="titleSelection" id="apps"><img src="images/apps.png" class="selectionIcon"><br><p>Apps</p></td>
</tr>
</table>
<script>
$(document).ready(function(){
$(".loadScreen").fadeOut("slow")
})
$(document).ready(function(){
$(".inner").fadeOut(0)
$("#exit").fadeOut(0)
$("#exitText").fadeOut(0)
$("#languageMenu").fadeOut(0)
})
$("#about").on("click",function(){
$("#info").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("#settings").on("click",function(){
$("#options").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("#apps").on("click",function(){
$("#applications").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("html").on("click","#exit",function(){
$("#exit").fadeOut(500)
$("#exitText").fadeOut(500)
$(".inner").fadeOut(500)
$("#fangNiu").fadeOut(500)
$("#languageMenu").fadeOut(500)
$("#backgroundImage").fadeIn(500)
})
$("#language").on("click",function(){
$("#languageMenu").fadeIn(500)
})
</script>
</body>
<div class="loadScreen">MALFUNCTION COMPUETER <br> MODEL A0.1</div>
<img src="images/logout.png" id="exit">
<p id="exitText">Exit</p>
<div id="options" class="inner" style="display: none">
<b>OPTIONS</b>
<br>
<br>
<br>
<button id="language">Languages</button>
<br>
<br>
<br>
<button id="wifi">Wifi connection</button>
</div>
<div id="applications" class="inner" style="display: none">
<b>APPS</b>
</div>
<div id="info" class="inner" style="display: none">
<b>ABOUT MALFUNCTION COMPUETER</b>
<p>Malfunction compueter is a 非常好的 computer software OS that runs on 你的电脑屏幕上 in the programming language 语文。.</p><br>
<p>In order to get the best out of malfunction compueter, one must 把你的脸爆炸，然后, and then one must also 死掉。这样.</p>
</div>
<div id="languageMenu" class="innerInner" style="display: none"><p>Choose your language:</p><br><br><select>
<option>English</option>
<option>Chinese</option>
<option>Japanese</option>
</select></div>
</html>
However, there is one set of lines that is not running properly:
<div id="languageMenu" class="innerInner" style="display: none"><p>Choose your language:</p><br><br><select>
<option>English</option>
<option>Chinese</option>
<option>Japanese</option>
</select></div>
^This is the DIV "#languageMenu", where the user selects his language.
Here, I have a button "#language" which on click, is supposed to make "#languageMenu" appear.
$("#language").on("click",function(){
$("#languageMenu").fadeIn(500)
})
Strangely, this does not work when I run it on Google Chrome, but when I put it in a JSFiddle it gives strange results.
http://jsfiddle.net/b58Lvtfy/1
From Chrome, what happens is that the language menu only appears upon pressing the exit button, and then fades immediately.
Why might this be so and what amendments might make the code work better?
Online demo: http://garridpunching.neocities.org/malfunction.html

Put every event binding inside doc ready block:
$(document).ready(function() {
$(".inner").fadeOut(0)
$("#exit").fadeOut(0)
$("#exitText").fadeOut(0)
$("#languageMenu").fadeOut(0)
$("#about").on("click", function() {
$("#info").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("#settings").on("click", function() {
$("#options").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("#apps").on("click", function() {
$("#applications").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("html").on("click", "#exit", function() {
$("#exit").fadeOut(500)
$("#exitText").fadeOut(500)
$(".inner").fadeOut(500)
$("#fangNiu").fadeOut(500)
$("#languageMenu").fadeOut(500)
$("#backgroundImage").fadeIn(500)
})
$("#language").on("click", function() {
$("#languageMenu").fadeIn(500)
})
})
Because your button appears after event binding so no events bound on this element and cause as error. That is why it is always safe to put event bindings inside doc ready block.
Or you can shift your script to the closing of </body>.

Your inproper indentation obscures the errror, but you are closing the DOMReady listener, before you are binding the #language click listener. Therefore, #language does not exist in the DOM when the click listener is added.

Categories