Parse an ajax response in jquery - javascript

This is the script i wrote to get an ajax response.
<script>
$( document ).ready(function()
{
$("#log").click(function(){
alert('hellow');
$.ajax({
url: "http://1xx.1xx.0.1xx:8081/script.login",
type: "GET",
data: { 'page':'create_user', 'access':'user','username':'user', 'password':'user'},
dataType: "html"
}).done(function(resp) {
console.log(resp);
var $response = $(resp);
});
});
})
</script>
This is how the ajax response body looks like.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<meta http-equiv="refresh" content="900" >
<title>Toronto Raptors</title>
<link href="Html/Panel/ControlPanelStyle.css" rel="stylesheet" type="text/css">
<!--THIS WILL SUPPRESS ALL ERROR POPUPS-->
<script type="text/javascript">
<!--
var debugMode = false; //turns on error messages for windows and grids ->false = production build
//Hide all window errors
if(debugMode == true){
function silentErrorHandler() {return true;}
window.onerror=silentErrorHandler;
}
//-->
</script>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
position: absolute;
width: 100%;
height: 100%;
background: #244A77;
}
a img {
text-decoration: none;
border: 0 none;
}
Html, body {
Overflow:hidden;
}
font.text {
visibility:visible;
}
#pageContainer{
width: 100%;
height: 100%;
background: 244A77; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#244A77', endColorstr='#7DA7D9'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(244A77), to(7DA7D9)); /* for webkit browsers */
background: -moz-linear-gradient(top, #244A77, #7DA7D9); /* for firefox 3.6+ */
}
/*CSS for resizing counter Widgets*/
div#counter2containercontainer {position:absolute; width:100%; height:100%; margin: 0px auto; text-align:center; overflow:hidden; text-align: center; }
div.counter2container {position: relative; overflow: hidden; margin: 0px auto; border: none; font-family: Verdana, Geneva, Tahoma, sans-serif; font-weight: bold; text-align:center; vertical-align:middle; z-index: 4; width: 100%; height: 100%;}
div#counter5containercontainer {position:absolute; width:100%; height:100%; margin: 0px auto; text-align:center; overflow:hidden; text-align: center; }
div.counter5container {position: relative; overflow: hidden; margin: 0px auto; border: none; font-family: Verdana, Geneva, Tahoma, sans-serif; font-weight: bold; text-align:center; vertical-align:middle; z-index: 4; width: 100%; height: 100%;}
div#counter10containercontainer {position:absolute; width:100%; height:100%; margin: 0px auto; text-align:center; overflow:hidden; text-align: center; }
div.counter10container {position: relative; overflow: hidden; margin: 0px auto; border: none; font-family: Verdana, Geneva, Tahoma, sans-serif; font-weight: bold; text-align:center; vertical-align:middle; z-index: 4; width: 100%; height: 100%;}
div#counter11containercontainer {position:absolute; width:100%; height:100%; margin: 0px auto; text-align:center; overflow:hidden; text-align: center; }
div.counter11container {position: relative; overflow: hidden; margin: 0px auto; border: none; font-family: Verdana, Geneva, Tahoma, sans-serif; font-weight: bold; text-align:center; vertical-align:middle; z-index: 4; width: 100%; height: 100%;}
</style >
<!-- general window handling -->
<link rel="stylesheet" type="text/css" href="../../dhtmxSuite/dhtmlxWindows/codebase/dhtmlxwindows.css" />
<link rel="stylesheet" type="text/css" href="../../dhtmxSuite/dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_skyblue.css" />
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxWindows/codebase/dhtmlxcommon.js"></script>
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxWindows/codebase/dhtmlxwindows.js"></script>
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxWindows/codebase/dhtmlxcontainer.js"></script>
<!--Tree - Used for Triggers -->
<link rel="stylesheet" type="text/css" href="../../dhtmxSuite/dhtmlxTree/codebase/dhtmlxtree.css" />
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxTree/codebase/dhtmlxcommon.js"></script>
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxTree/codebase/dhtmlxtree.js"></script>
<!--acordian Used for Triggers and Healtcare -->
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxAccordion/codebase/dhtmlxcommon.js"></script>
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxAccordion/codebase/dhtmlxaccordion.js"></script>
<link rel="stylesheet" type="text/css" href="../../dhtmxSuite/dhtmlxAccordion/codebase/skins/dhtmlxaccordion_dhx_skyblue.css" />
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxAccordion/codebase/dhtmlxcontainer.js"></script>
<link rel="stylesheet" type="text/css" href="../../dhtmxSuite/dhtmlxMenu/codebase/skins/dhtmlxmenu_dhx_skyblue.css" />
<script src="../../dhtmxSuite/dhtmlxMenu/codebase/dhtmlxcommon.js"></script>
<script src="../../dhtmxSuite/dhtmlxMenu/codebase/dhtmlxmenu.js"></script>
<!--Other Header Files Required-->
<!--JAVASCRIPT to autore-size counter widgets-->
<script type="text/javascript">
//$(document).ready(function() {
function divresize(counterName) {
//alert("RIZSE1");
var containerName = '.' + counterName + 'container'
var secondContainer = '#' + counterName + "containercontainer";
var contentwidth = $(secondContainer ).width();
var contentheight = $(secondContainer ).height();
$(containerName).css('width',contentwidth )
$(containerName).css('height',contentheight );
//Better ReSize Attempt...
//Determine Character Width
/*var elem = document.getElementById(counterName +"_Value");
var currentText = elem.innerHTML;
var widthMultiplier = 1;
if(currentText.length > 1){
widthMultiplier = (currentText.length);
contentwidth = contentwidth / (widthMultiplier);
}*/
//Make the size the same as the smaller of the two dimensions
if(contentwidth < contentheight){ $('#' + counterName+ '_Value.text').css('font-size',contentwidth / (1.3)); }
else{ $('#' + counterName+ '_Value.text').css('font-size',contentheight / (1.3)); }
//alert("RIZSE");
}
</script>
<!-- dhtmlxGrid -->
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxGrid/codebase/ext/dhtmlxgrid_ssc.js"></script>
<link rel="STYLESHEET" type="text/css" href="../../dhtmxSuite/dhtmlxGrid/codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../dhtmxSuite/dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<!--dhtmlxCharts Required-->
<link rel="STYLESHEET" type="text/css" href="../../dhtmxSuite/dhtmlxChart/codebase/dhtmlxchart.css">
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxChart/codebase/dhtmlxchart.js"></script>
<!--Javascript For Speedo and/or Counter Required-->
<script type="text/javascript" src="WidgetFiles/jquery.speedometer-1.0.4/jquery-1.4.min.js"></script>
<script type="text/javascript" src="WidgetFiles/jquery.speedometer-1.0.4/jquery.speedometer.js"></script>
<script type="text/javascript" src="WidgetFiles/jquery.speedometer-1.0.4/jquery.jqcanvas-modified.js"></script>
<script type="text/javascript" src="WidgetFiles/jquery.speedometer-1.0.4/excanvas-modified.js"></script>
</head>
<!--<body onload="doOnLoad();" style="background-image: url('../../dhtmxSuite/images/BannerTileBackground.gif'); background-repeat: repeat-x; background-color: #87AEC5;" >-->
<body onload="doOnLoad();" >
<div id="pageContainer">
<div id="counter2_div">
<div id="counter2containercontainer">
<div class="counter2container"><font class="text" id="counter2_Value"></font></div>
</div>
</div>
<div id="counter5_div">
<div id="counter5containercontainer">
<div class="counter5container"><font class="text" id="counter5_Value"></font></div>
</div>
</div>
<div id="counter10_div">
<div id="counter10containercontainer">
<div class="counter10container"><font class="text" id="counter10_Value"></font></div>
</div>
</div>
<div id="counter11_div">
<div id="counter11containercontainer">
<div class="counter11container"><font class="text" id="counter11_Value"></font></div>
</div>
</div>
<div id="pie_medium6_div" style="width:100%;height:100%;position:absolute"></div>
<div id="speedometer4_div" style="width:100%;height:100%;position:relative;left:0px;top:0px">0</div>
<script type="text/javascript">$(function(){ $('#speedometer4_div').speedometer(); }); </script>
<!--<div id="winVP" style="position: relative; height: 100%; margin: 0px;"></div>-->
<div id="triggersActive" style="width:100%;height:100%;"></div>
<div id="triggersHistory" style="width:100%;height:100%;"></div>
<div id="triggerBox" style="width:100%;height:100%;"></div>
<div id="pageFooter">Powered By Raptors</div>
</div>
</body>
<script type="text/javascript">
var dhxWins;
var dhxAccord;
var menu;
var w999;
var triggers;
var showWidgets;
var tree;
//Globals needed for banner messages
var marqueeQueue = [""];
var lastMessage = "";
var lastTrigger = "";
var lastFiringTriggerList = "";
var marqueeCounter = 0;
var marqueeIndex = 0;
//Globals needed for initial start positions if null
var curTopPos = 27;
var curLeftPos = 0;
var curBottomPos = 0;
var windowDim = getBrowserDimensions();
var maxWidth = windowDim.split(',')[0];
var maxHeight = windowDim.split(',')[1];
var initialLoadMode = true;
var warningBorderSytle = "solid 5px #FFFF00";
var urgentBorderSytle = "solid 7px #FFA500";
var criticalBorderSytle = "solid 10px #FF0000";
function doOnLoad() {
//Ignore chart Errors
if(debugMode == false){
dhtmlxError.catchError("LoadXML",function(a,b,data){ });
}
//Create a viewport and attach to existing div
dhxWins = new dhtmlXWindows();
//dhxWins.enableAutoViewport(false);
//dhxWins.attachViewportTo("winVP");
//Handle moving and resizing widgets... save to cookie
dhxWins.attachEvent("onMoveFinish", function(win){ setWindowStatusCookie(win,1); });
dhxWins.attachEvent("onResizeFinish", function(win){ setWindowStatusCookie(win,1); });
dhxWins.attachEvent("onFocus", function(win){ updateZIndex(win); });
//dhxWins.attachEvent("onClose", function(win){ setWindowStatusCookie(win,0); });
dhxWins.setImagePath("dhtmxSuite/dhtmlxWindows/codebase/imgs/");
dhxWins.attachEvent("onClose", function(win){ win.hide(); });
//ShowWidgets Window
showWidgets = dhxWins.createWindow("showWidgets", 0, 30, 250, 600);
showWidgets.setText("Add Widget");
tree = showWidgets.attachTree();
tree.setSkin('dhx_skyblue');
tree.setImagePath("../../dhtmxSuite/dhtmlxTree/codebase/imgs/csh_bluefolders/");
tree.setOnCheckHandler(widgetTree_oncheck);
tree.enableCheckBoxes(true,true);
tree.deleteChildItems(0);
tree.insertNewChild(0, 'w2', "Raptors are back");
tree.insertNewChild(0, 'w5', "Celtics is never the same");
tree.insertNewChild(0, 'w10', "lakers are up");
tree.insertNewChild(0, 'w11', "Heat is going down");
tree.insertNewChild(0, 'w1', "Leafs are back");
</script>
I am intrested in parsing out the very bottom part where it says:
tree.insertNewChild(0, 'w2', "Raptors are back");
From this i want to parse out ==> Raptors are back
Can anyone please provide some guidance or clue or help as to how i can do this? I have been stuck on this for 2 days. I am very new to web development in general so i apologize if this is a poorly worded question.

Something like this should work if you need to accept the result as HTML:
$.ajax({
url: "http://1xx.1xx.0.1xx:8081/script.login",
type: "GET",
data: { 'page':'create_user', 'access':'user','username':'user', 'password':'user'},
dataType: "html",
success: function (html) {
alert(/tree.insertNewChild\([^"]*"([^"]*?)"\);/g.exec(html)[1]);
}
});
Here is an example on jFiddle too:
http://jsfiddle.net/hcrM8/16/

Related

Responsive Carrousel in JavaScript

how are you, well I am triying to make a Carrousel responsive with Javascritp, but I am struggling with the logic here.
I've tried everything, with css is imposible, because the images are note background images. I am about to go crazy with this.
This is the code
var carruselimagenes = []
carruselimagenes [0] = ["articulos.html" , "imagenes/cover1.png"]
carruselimagenes [1] = ["contacto.html" , "imagenes/cover2.png"]
carruselimagenes [2] = ["contacto.html" , "imagenes/cover3.png", "imagenes/cover400.png"]
carruselimagenes [3] = ["jardinvertical.html" , "imagenes/cover4.png"]
var carruselresponsive = []
carruselresponsive [0] = ["imagenes/cover400.png"]
var links = document.getElementById('linkcarrusel')
var imagenes = document.getElementById('imagencarrusel')
links.href = carruselimagenes [0][0]
imagenes.src= carruselimagenes [0][1]
var imagenesResponsive = responsive window.matchMedia("(max-width: 599px)")
if (window.matchMedia("(max-width: 599px)").matches) { imagenes.src = carruselresponsive [0]
else {
imagenes.src = carruselimagenes [0][1]
}
}
var orden = 0
function carruselautomatico() {
orden++
if (orden>3) {orden=0}
links.href = carruselimagenes[orden][0]
imagenes.src = carruselimagenes[orden][1]
}
setInterval(carruselautomatico, 6000)
function carruselflechasadelante() {
orden++
if (orden>3) {orden=0}
links.href = carruselimagenes[orden][0]
imagenes.src = carruselimagenes[orden][1]
}
function carruselflechasatras() {
orden--
if (orden<0) {orden=3}
links.href = carruselimagenes[orden][0]
imagenes.src = carruselimagenes[orden][1]
}
body{background-color: white;
font-family: 'Open Sans', sans-serif;}
header, section, footer{ width: 960px;
margin-right: auto;
margin-left: auto;
}
#carrusel{ width:960px;
height: 350px;
background-color: #d4d9a0;
margin-top: 15px;
margin-bottom: 15px;
position: relative;
text-align: center;
}
button{ background-color: none;
height: 30px;
width: 90px;
margin-top: 10px;
margin-left: 35px;
border-color: #00ab84;
color: #00ab84;
display:inline-block;
font-size: 30px;
text-align: center;
line-height: 5px;
}
button:hover{background-color: #00ab84;
color:white;
transition: 1s;}
/** Responsive**/
#media all and (min-width: 600px) and (max-width: 1023px){
#carrusel{ width:400px;
height: 400px;}
}
/*Fin responsive 600 1023**/
#media all and (max-width: 599px) {
#carrusel{ width:300px;
height: 400px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Prueba Carrusell</title>
<link rel="stylesheet" type="text/css" href="css/stylecarrusel.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" >
<script type="text/javascript" src="js/script.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
</head>
<body>
<div id="carrusel">
<img src="" id="imagencarrusel">
<button id="atras" onclick="carruselflechasatras()"><</button>
<button id="adelante" onclick="carruselflechasadelante()">></button>
</div>
<script type="text/javascript" src="js/scriptcarrusel.js"></script>
</body>
</html>
It just doesn't work, and my head is about to explode. Could somebody give me a hand??
Best!
Matt
I think the reason your having trouble is because the image shows at the full size no matter what the container size is.
you can stop it using css overflow: hidden; but for you try this:
#carrusel img {
max-width: 100%;
}

Can not add active class to nav elements, with nav being imported from another .html file

This is my first leap on trying to implement a HTML/CSS website, so please take this into consideration.
I have multiple .html pages that implement the navbar from a nav.html, using a jQuery function( i guess?). The other html's are similar to index.
Any idea of what's wrong?
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
The code i used for adding active class is pure JS.
Here is index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/9a39db93cf.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
let count = 0;
function counter()
{
count++;
document.querySelector('#pageContent').innerHTML = count;
}
</script>
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
<script type="text/javascript">
const currentLocation = location.href;
const menuItem = document.querySelectorAll('a');
const menuLength = menuItem.length
for( let i=0; i<menuLength; i++){
if(menuItem[i].href === currentLocation){
menuItem[i].className = "active";
}
}
</script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>My Webpage</title>
</head>
<body>
<div id="nav-placeholder" class="sticky-top">
</div>
<div class="firstPage">
<h4>The title of this paragraph</h4>
<img onclick="counter(); return false;" src="images/mirciun.jpg" alt="mirciun" height=auto max-width=auto class="center">
<p id='pageContent'>0</p>
</div>
</body>
</html>
CSS:
body{
display: block;
margin: 0;
}
.menu li{
display: inline-block;
margin: 0;
}
ul.topnav{
background-color: #333;
margin: 0;
padding: 0;
text-align:center;
overflow: hidden;
}
ul.topnav li a{
display: block;
font-size: 20px;
padding: 10px;
color: whitesmoke;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #222;}
ul.topnav li a.active {background-color: #4CAF50;}
#media screen and (max-width: "600px") {
ul.topnav li {float: none;}
}
#brand{
display: table-cell;
vertical-align: middle;
line-height:50px;
}
#topText{
max-width: 500px;
margin: auto;
text-align: center;
border: 5px solid green;
color: red;
background-color: #0f0f0f;
margin-top: 10px;
}
.firstPage
{
margin-top: -20px;
background-color:grey;
max-width: 100%;
height: auto;
}
h4{
padding: 20px;
text-align: center;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
#pageContent{
text-align:center;
width: 75%;
margin: auto;
color: blue;
}
wrap your code with jquery on ready function and move to the bottom of the page.
$(function () {
const currentLocation = location.href;
const menuItem = document.querySelectorAll('a');
const menuLength = menuItem.length
for (let i = 0; i < menuLength; i++) {
if (menuItem[i].href === currentLocation) {
menuItem[i].className = "active";
}
}
})
Nevermind, i solved it using $( window ).on( "load", function(){, instead of $( document ).ready(function () { . The short explanation is that code will run once the entire page (images or iframes), not just the DOM, is ready. - > https://learn.jquery.com/using-jquery-core/document-ready/

Why is my JS Code for random color generator not working in the browser

I have an error in the console that says:
Uncaught TypeError: Cannot read property 'addEventListener' of null
at (index):14
Here is my code to analyze:
<html>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Quicksand" />
<head>
<script type="text/javascript">
var div = document.getElementById('text'),
randomColor = function(e) {
var hex = Math.floor( Math.random() * 0xFFFFFF ),
res = e.target,
result = "#" + hex.toString(16);
res.style.backgroundColor = result;
res.innerHTML = result;
};
div.addEventListener('mouseover', randomColor);
</script>
<style>
#text{
width: 1000px;
height: 500px;
text-align: center;
font-size: 50px;
font-family: 'Quicksand';
}
body{
text-align: center;
font-family: 'Quicksand';
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
</style>
</head>
<body>
<h1>Hover over me to get a random color!</h1>
<div id="text">Hex code</div>
</body>
</html>
I do not understand because it works in JSFIDDLE. Someone please help!
Here's a stack snippet with your code but with the various css, js and html re-arranged.
In your original single html file, you should include your js after the html.
var div = document.getElementById('text'),
randomColor = function(e) {
var hex = Math.floor(Math.random() * 0xFFFFFF),
res = e.target,
result = "#" + hex.toString(16);
res.style.backgroundColor = result;
res.innerHTML = result;
};
div.addEventListener('mouseover', randomColor);
#text {
width: 1000px;
height: 500px;
text-align: center;
font-size: 50px;
font-family: 'Quicksand';
}
body {
text-align: center;
font-family: 'Quicksand';
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Quicksand" />
<h1>Hover over me to get a random color!</h1>
<div id="text">Hex code</div>
The issue with running the code in browser is that your script is in head tag, so its loading before the DOM. In Jsfiddle the script loads after the DOM. So you have to put the script Just before ending the <body> tag.
Its always better to wrap the code
$(document).ready(function() {
// Handler for .ready() called.
});
or (as suggested upper one is not required any more)
$(function() { ... });
if you use jQuery.
or if in case of pure javascript
document.addEventListener("DOMContentLoaded", function(){
// Handler when the DOM is fully loaded
});
Hope it helps.
Edit: Added code (Just placed the script tag before body ends)
<html>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Quicksand" />
<head>
<style>
#text{
width: 1000px;
height: 500px;
text-align: center;
font-size: 50px;
font-family: 'Quicksand';
}
body{
text-align: center;
font-family: 'Quicksand';
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
</style>
</head>
<body>
<h1>Hover over me to get a random color!</h1>
<div id="text">Hex code</div>
<script type="text/javascript">
var div = document.getElementById('text'),
randomColor = function(e) {
var hex = Math.floor( Math.random() * 0xFFFFFF ),
res = e.target,
result = "#" + hex.toString(16);
res.style.backgroundColor = result;
res.innerHTML = result;
};
div.addEventListener('mouseover', randomColor);
</script>
</body>
</html>

Putting images on top of one another

I have used bootstrap to correlate the size of my background image to the window, but when I try to put images on top of it they get appended below. Also have attached my javascript, full functional, supposed to move images on touch of key
console.log('javascript linked');
$(function(){
function player1() {
var margin1 = $('#bar1').offset().left;
if (margin1 < "600") {
var move1 = (margin1 + 50);
$('#bar1').css('marginLeft', move1);
} else {
alert("Player 1 is the Winner!!!!");
}
}
function player2() {
var margin3 = $('#bar3').offset().left;
if (margin3 < "600") {
var move3 = (margin3 + 50);
$('#bar3').css('marginLeft', move3);
} else {
alert("Player 2 Is The Winner!!!!");
}
}
function checkPlayer1(event) {
var x = event.keyCode;
if (x===13){
player1();
}
}
function checkPlayer2(event) {
var y = event.keyCode;
if (y===32){
player2();
}
}
function move(){
var div = $("#bar2");
div.animate({left: '638px'}, 1000);
};
$('body').keypress(checkPlayer2);
$('body').keypress(checkPlayer1);
$("window").ready(move)
})
h1 {
position: absolute;
top: 5%;
margin: 0 auto;
font-size: 5vw;
left: 10%;
}
#bar1{
background: url('http://orig11.deviantart.net/c8fb/f/2011/237/3/1/profile_picture_by_red_angry_bird-d47u569.png');
background-repeat:no-repeat;
background-size:contain;
margin-left: 10px;
height: 50px;
width: 50px;
display: inline-block;
}
#bar2{
background: url('http://vignette3.wikia.nocookie.net/angrybirds/images/b/bf/Kingcry.gif/revision/latest?cb=20130310195100');
background-repeat:no-repeat;
background-size:contain;
margin-left: 10px;
height: 50px;
width: 50px;
display: inline-block;
position: relative;
}
#bar3{
background: url('http://www.clipartkid.com/images/47/angry-bird-yellow-icon-angry-birds-iconset-femfoyou-uJ3C4l-clipart.png');
background-repeat:no-repeat;
background-size:contain;
margin-left: 10px;
height: 50px;
width: 50px;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap#*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<script data-require="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<img src="http://www.walldevil.com/wallpapers/a28/angry-birds-computer-background-linnut-rovio-writing.jpg" />
<h1>First Player to Catch the Pig Wins!</h1>
<div class="flex-container">
<div class="flex-item" id="bar1"></div> <br>
<div class="flex-item" id="bar2"></div> <br>
<div class="flex-item" id="bar3"></div>
</div>
</body>
</html>
add a class to the image like this:
<img class = "img-background" src="http://www.walldevil.com/wallpapers/a28/angry-birds-computer-background-linnut-rovio-writing.jpg" />
and then add a css 'position absolute, top 0, left 0 ':
.img-background{
position: absolute;
top: 0;
left: 0
}

Using dom to create #font-face with style tag isn't working properly?

I'm trying to initialize a style tag using the DOM with JavaScript and for some reason the code below doesn't want to work. Basically I have a div for a container (it's the id) and I want the p tag to display text on the div. So far I have this.
<html>
<head>
</head>
<style>
body
{
background-color: black;
}
#container
{
position: relative;
margin: 0 auto;
height: 100%;
width: 100%;
z-index: 1;
}
#p_1
{
font-family: my_custom;
font-size: 50px;
color: red;
z-index: 2;
}
</style>
<script language = "JavaScript">
function initialize_font()
{
var special_font = document.createElement("style");
special_font.type = "text/css";
document.body.insertBefore( special_font, container);
special_font.styleSheet.cssText = "#font-face {" + font-family: my_custom; src: url('my_custom.TTF'); + "}";
}
</script>
<body onload = "initialize_font()">
<div id = "container">
<p id = "p_1">hello</p>
</div>
</body>
</html>
You've messed up the quotes and are not creating the style tag the correct way, and styles must be in the head section, and you don't have to wait for an onload event as there's no need for the DOM to be ready to insert the style tag.
Something more like this
<html>
<head>
<style type="text/css">
body {
background-color: black;
}
#container {
position: relative;
margin: 0 auto;
height: 100%;
width: 100%;
z-index: 1;
}
#p_1 {
font-family: my_custom;
font-size: 50px;
color: red;
z-index: 2;
}
</style>
<script type="text/javascript">
var special_font = document.createElement("style");
special_font.type = "text/css";
special_font.innerHTML = "#font-face {font-family: my_custom; src: url('my_custom.TTF');}";
document.getElementsByTagName('head')[0].appendChild(special_font);
</script>
</head>
<script>
</script>
<body>
<div id = "container">
<p id = "p_1">hello</p>
</div>
</body>
</html>
The <style> and the <script> must be inside the HEAD or the BODY
Here is the code and working example:
<html>
<head>
<style>
body {
background-color: black;
}
#container {
position: relative;
margin: 0 auto;
height: 100%;
width: 100%;
z-index: 1;
}
#p_1 {
font-family: my_custom;
font-size: 50px;
color: red;
z-index: 2;
}
</style>
<script type="text/javaScript">
var special_font = document.createElement("style");
special_font.type = "text/css";
document.body.insertBefore(special_font, container);
special_font.styleSheet.cssText = "#font-face {" + font - family: my_custom;
src: url('my_custom.TTF'); + "}";
</script>
</head>
<body>
<div id="container">
<p id="p_1">hello</p>
</div>
</body>
</html>

Categories

Resources