Jquery functions not linked correctly? Why can'y my <script> section run? - javascript

Been trying to create a simple "squad builder", basically just creating a list as different buttons are clicked. I noticed Jquery was not working, although it has been linked to in the section. I can't even access basic animations. What is going on in here?:
<!DOCTYPE html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<head>
<title>Squad Builder</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
$("button").addClass("animated bounce");
});
</script>
<style type="text/css">
#player-box {
background-color: red;
height: 500px;
width: 130px;
}
#squad-box {
background-color: red;
height: 500px;
width: 500px;
margin-left: 10px;
}
</style>
<body>
<div class = "row container-fluid">
<div id = "player-box" class = "col-md-6">
<ul id = "player-list">
<li><button class = "player-btn btn">Player1</button></li>
</ul>
</div>
<div id = "squad-box" class = "col-md-6">
<ul id = "squad-list">
</ul>
</div>
</div>
</body>


Your code is ok, probably is only missing the animate.css assets:
animate.css
$(document).ready(function() {
$("button").addClass("animated bounce");
});
#player-box {
background-color: red;
height: 500px;
width: 130px;
}
#squad-box {
background-color: red;
height: 500px;
width: 500px;
margin-left: 10px;
}
<link href="https://daneden.github.io/animate.css/animate.min.css" rel="stylesheet" />
<!DOCTYPE html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="row container-fluid">
<div id="player-box" class="col-md-6">
<ul id="player-list">
<li><button class="player-btn btn">Player1</button></li>
</ul>
</div>
<div id="squad-box" class="col-md-6">
<ul id="squad-list">
</ul>
</div>
</div>

Related

Why isn't my div rendering and instead is grayed out in the inspector?

So I am trying to show some content that's inside of a div but for some reason when I use the chrome debug tools to inspect the code, it's just grayed out.
I can't see anything that's inside the class modal why is that?
#mainDiv {
margin: 10px;
}
.modal-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-content: center;
}
.modal{
background-color: white;
width: 30%;
height: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>EasyModal</title>
<link rel="stylesheet" href="./style/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="mainDiv">
<h1>Easy Modal</h1>
<Button id="modal-btn" type="button" class="btn btn-primary">Buy Now</Button>
</div>
<div class="modal-bg">
<div class="modal">
<h2>Hello World</h2>
<label for="email">Email: </label>
<input type="text">
<button>Subscribe</button>
</div>
</div>
</body>
</html>

This is due to modal class. If you inspect, you'll observe that there is a display: none; property in modal class, which i guess is default bootstrap .modal class.
To solve this, use a different name for .modal class.

Can't hide div with modal window

Im building an email subscription form into my asp.net site and I'm trying to show the modal window when the user adds their name to the subscribe list. I can't seem to get the div to hide on pageload. The modal loads on page load, but I want it to be hidden until the user submits the form.
Ideally this would all be done server side since i don't want the modal to pop up until the form is submitted and doing it client side could trigger a false positive.
I'm not sure what the best way to achieve this would be, through code behind or possibly jQuery, which I don't know much about.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
} );
</script>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
.responsive {
width: 40%;
height: auto;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<style>
.simple-subscription-form {
background: #000000;
color: #94C60D;
padding: 2rem;
border-radius: 0;
align-content: center
}
</style>
<style>
.simple-subscription-form.button {
margin-bottom: 0;
border-radius: 0 0 0 0;
}
</style>
<style>
#dialog-message { display: none; padding: 5px; }
</style>
<style>
div.hidden {
display: none;
}
</style>
</head>
<body bgcolor="black">
<div class="simple-subscription-form" id="emailForm">
<form id="email" runat="server">
<script type="text/javascript">
function showDiv() {
div = document.getElementById('dialog-message');
div.style.display = "block";
}
</script>
<h4>Subscribe</h4>
<p>Receive updates and latest news direct from our team. Simply enter your email below :</p>
<div class="input-group"/>
<span class="input-group-label">
<i class="fa fa-envelope"></i>
</span>
<input class="input-group-field" runat="server" id="emailSignupField" type="email" placeholder="Email" required/>
<asp:button class="button" OnClientClick="javascript:showDiv(#dialog-message);" OnClick="emailSignupForm_click" runat="server" id="submitEmailForm" Text="Sign Up Now"></asp:button>
</form>
<div id="dialog-message" title="Subscribed!" class="hidden" >
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
You have been successfully added to our Mailing List
</p>
</div>
</div>
</body>
</html>

Insert the <script> before </head>, so it doesnt have glitch
<script>
$( function() {
$('#dialog-message').dialog('close')
} );
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
} );
</script>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
.responsive {
width: 40%;
height: auto;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<style>
.simple-subscription-form {
background: #000000;
color: #94C60D;
padding: 2rem;
border-radius: 0;
align-content: center
}
</style>
<style>
.simple-subscription-form.button {
margin-bottom: 0;
border-radius: 0 0 0 0;
}
</style>
<style>
#dialog-message { display: none; padding: 5px; }
</style>
<style>
div.hidden {
display: none;
}
</style>
<script>
$( function() {
$('#dialog-message').dialog('close')
} );
</script>
</head>
<body bgcolor="black">
<div class="simple-subscription-form" id="emailForm">
<form id="email" runat="server">
<script type="text/javascript">
function showDiv() {
div = document.getElementById('dialog-message');
div.style.display = "block";
}
</script>
<h4>Subscribe</h4>
<p>Receive updates and latest news direct from our team. Simply enter your email below :</p>
<div class="input-group"/>
<span class="input-group-label">
<i class="fa fa-envelope"></i>
</span>
<input class="input-group-field" runat="server" id="emailSignupField" type="email" placeholder="Email" required/>
<asp:button class="button" OnClientClick="javascript:showDiv(#dialog-message);" OnClick="emailSignupForm_click" runat="server" id="submitEmailForm" Text="Sign Up Now"></asp:button>
</form>
<div id="dialog-message" title="Subscribed!" class="hidden" >
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
You have been successfully added to our Mailing List
</p>
</div>
</div>
</body>
</html>

Moving background image on mousemove not working

I'm trying to move background image on mousemove in Angular project.
It is not working, I'm thinking that the problem is loading:
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
because I debugged manually in my code with: "console.log("message") and nothing happens, so the function is never called.
Some piece of code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Loved+by+the+King" type="text/css"/>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' type='text/css'>
</head>
<body>
<div id="bg">
<div class="container1" >
<div class="row1">
<div class="col-md-12" data-aos="fade-left" data-aos-duration="2600" data-aos-once="true">
<h1 class="title">Keeping track of your health, register as:</h1>
</div>
<div class="col-md-12" align="center" data-aos="fade-right" data-aos-duration="2600" data-aos-once="true" >
<a class="btn-link" href="/doctor-register"><button class="btn" type="button" type="submit" value="doctor">DOCTOR</button></a>
<a class="btn-link" href="/patient-register"> <button class="btn" type="button" type="submit" value="patient">PATIENT</button></a>
<a class="btn-link" href="/donor-register"><button class="btn" type="button" type="submit" value="donor">DONOR</button></a>
</div>
</div>
</div> <!-- /container -->
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$("#bg").mousemove(function(e){
var moveX=(e.pageX*-1/15);
var moveY=(e.pageY*-1/15);
console.log("dsd");
$("#bg").css('background-position', moveX + 'px ' + moveY + 'px')
});
</script>
</body>
</html>
CSS:
#bg {
height: 100vh;
background-image: url('../../../images/1.jpg'); /* Background Image Link */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.container1 {
display: table;
width: 100%;
height: 100%;
}
.row1{
display: table-cell;
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
}
Here is what I want
https://codepen.io/chrisboon27/pen/rEDIC

You should check background image path.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Loved+by+the+King" type="text/css"/>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' type='text/css'>
</head>
<body>
<div id="bg">
<div class="container1" >
<div class="row1">
</div>
</div> <!-- /container -->
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$("#bg").mousemove(function(e){
var moveX=(e.pageX*-1/15);
var moveY=(e.pageY*-1/15);
$("#bg").css('background-position', moveX + 'px ' + moveY + 'px')
});
</script>
<style>
#bg {
height: 100vh;
background-image: url('https://i.stack.imgur.com/rhStR.jpg');
/* Background Image Link */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.container1 {
display: table;
width: 100%;
height: 100%;
}
.row1{
display: table-cell;
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
}
</style>

draggable&droppable jquery comparison id

I'm looking for option how to comparison id in draggable&dropabble elements. It's my first journey with jquery.
Actually I have (fragments):
$(".letter").draggable();
$(".simpleSlot").droppable({
drop: function( event, ui ) {
var idDrag = ui.draggable.attr("id");
var idDrop = $this.attr("id");
$("#TEST").text("idDrag:" + idDrag + "; idDrop:" + idDrop);
if(idDrag == idDrop){ alert("Done!"); }
}
});
Droppable element:
var letter = $("<div class=\"letter\" id=\""+divId+"\"></div>").text(splitedWord[i]);
$("#divId").css({
left: positionX, top: positionY
});
$("#mixedWord").append(letter);
Draggable element is generated the same way.
And my css for droppable:
.letter{
border: 2px solid;
border-radius: 25px;
width: 50px;
height: 50px;
font-size: 30px;
text-align: center;
position: absolute;
}
HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="js/flipclock/libs/prefixfree.min.js"></script>
<script src="js/flipclock/flipclock.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
</head>
<body>
<div id="area">
<div id="time">Time:</div>
<div id="mixedWord"><!--here goes random word as simple letters in simple divs--> </div>
<div id="slots"></div>
<div id="height"></div>
<div id="width"></div>
</div>
</body>
MY PROBLEMS:
Draggable works. But when I drop something on droppable element - I can't move it more. It cannot be that.
It doesn't change #TEST - so it means drop doesn't work. Why?
And I don't have alert.

Jquery Mobile - changing icon color in header from some other button click

I want to change color of icon in header from some button click.
I was able to put some color on icon using below CSS: #myhead:after {
background-color: #ff4d4d;
}
But i am not able to change its color from some button click.
Sample Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<style>
/* #id Products */
#myhead:after {
background-color: #ff4d4d;
}
</style>
<script>
function changecolor()
{
$('#myhead:after').css("background-color", "green");
}
</script>
<body>
<div data-role="page" id="mainpage">
<div data-role="header" class=" ui-icon-circle ui-alt-icon ui-btn-icon-right " id="myhead">
<h3>Filter</h3>
</div>
<div role="main" class="ui-content">
Change Color
</div>
</div>
</body>
</html>

You can't manipulate css:after, because it's not technically part of the DOM and therefore is inaccessible by any JavaScript. So you need to create custom circle icon.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<style>
.change-color {
background-color: #ff4d4d;
border-radius: 50%;
width: 20px;
height: 20px;
float: right;
margin: -30px 10px 0px 0px;
}
</style>
<script>
function changecolor() {
$('#myhead').css('background-color', 'green');
}
</script>
<body>
<div data-role="page" id="mainpage">
<div data-role="header" class="">
<h3>Filter</h3>
<div class="change-color" id="myhead"></div>
</div>
<div role="main" class="ui-content">
Change Color
</div>
</div>
</body>
</html>

Change the CSS as below
#myhead h3 {
background-color: #ff4d4d;
}
And change the JS as below
$('#myhead h3').css('background-color', 'green');

Categories

Resources