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
}
Related
Im trying to get the #block to end the game and give the score once it hits the character. At the moment it just continues to go without ending the game. Its like it doesn't see the character so it just continues to run. Before I added the images they were just boxes and the game worked fine. After adding the images the game Dosent respond as before.
Also the score just goes up without the character having to successfully jump. How do I fix that?
var character = document.getElementById("character");
var block = document.getElementById("block");
var counter=0;
function jump(){
if(character.classList == "animate"){return}
character.classList.add("animate");
setTimeout(function(){
character.classList.remove("animate");
},300);
}
var checkDead = setInterval(function() {
let characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
let blockLeft = parseInt(window.getComputedStyle(block).getPropertyValue("left"));
if(blockLeft<20 && blockLeft>-20 && characterTop>=130){
block.style.animation = "none";
alert("Game Over. score: "+Math.floor(counter/100));
counter=0;
block.style.animation = "block 1s infinite linear";
}else{
counter++;
document.getElementById("scoreSpan").innerHTML = Math.floor(counter/100);
}
}, 10);
*{
padding: 0;
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
}
.game{
width: 1000px;
height: 500px;
border: 1px solid black;
margin: auto;
margin-top: 5px;
position: relative;
}
.background-img-size {
width: 1000px;
height: 500px;
content: url("https://p4.wallpaperbetter.com/wallpaper/957/704/964/pokemon-fields-ruby-1920x1200-nature-fields-hd-art-wallpaper-preview.jpg");
position: absolute;
}
#character{
display: inline-block;
position: relative;
margin-top: 39%;
}
.animate{
animation: jump 0.3s linear;
}
#keyframes jump{
0%{bottom: 300px;}
30%{bottom: 200px;}
70%{bottom: 150px;}
100%{bottom: px;}
}
#block{
display: inline-block;
position: relative;
margin-top: 39%;
left: 500px;
animation: block 3s infinite linear;
}
#keyframes block{
0%{left: 900px}
100%{left: -170px}
}
p{
text-align: center;
}
<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<meta charset="UTF-8">
<title>Jump Game</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="game" >
<img class="background-img-size">
<div id="character"> <img src="https://www.serebii.net/swordshield/pokemon/101.png" width="80" height="80"></div>
<div id="block"> <img src="https://www.serebii.net/swordshield/pokemon/027.png" width="80" height="80"></div>
<!-- <div id="block"> <img src="https://www.serebii.net/swordshield/pokemon/094.png"></div> -->
</div>
<p>Score: <span id="scoreSpan"></span></p>
<script src="index.js"></script>
</body>
</html>
I'm adding a feature to a squarespace website. The feature is a new image fade-in/fade-out effect when the mouse is hovering over one of three buttons. The problem is that the static/main image is an img element in the html and not in the css, so I can't change it like that. I have tried to change the element.src in javascript however there's no transition. Is the best way to add another element in the javascript code so I can make the added img transition with opacity? That just seems like a lot of extra work trying to put it in when working in squarespace.
Any suggestions? By the way I have a snippet showing my code and the issue.
PS, the buttons are under the image at the moment. That doesn't need a fix.
let jw_backgroundswitch = document.querySelector('.section-background img');
let jw_btn = document.querySelectorAll('.sqs-block-content h1 a');
let images = ['https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ea72dbf216159f9567d/1610112687144/homepage_story_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85e88b1f66202d7f3e8e4/1610112659325/homepage_art_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ebf1701e075bcb4c460/1610112707995/homepage_Studio_1500x896.jpg'];
jw_btn.forEach(function(jw_btn_current, index) {
jw_btn_current.addEventListener('mouseenter', function() {
jw_backgroundswitch.src = images[index];
});
jw_btn_current.addEventListener('mouseleave', function() {
jw_backgroundswitch.src = 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg';
});
});
*,*::before,*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
height: 200vh;
}
.section-background{
}
img{
background-repeat: no-repeat;
transition: all .5s ease-in-out;
}
.ulwrapper{
display: flex;
height: 100vh;
align-items: center;
}
.sqs-block-content{
display: flex;
width: 100%;
height: 4rem;
list-style: none;
}
h1{
margin: auto;
cursor: pointer;
}
h1 a{
font-weight: bolder;
text-decoration: none;
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='section-background'>
<img alt="" data-src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg" data-image="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg" data-image-dimensions="2000x1195" data-image-focal-point="0.24133662454825583,0.20697233746829613" data-load="false" data-parent-ratio="1.4" style="width: 100%; height: 100%; object-position: 0% 20.6972%; object-fit: cover;" class="" data-image-resolution="2500w" src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg?format=2500w">
<div class="ulwrapper">
<div class="sqs-block-content">
<h1 class="jw_btn"><a>Button1</a></h1>
<h1 class="jw_btn"><a>Button2</a></h1>
<h1 class="jw_btn"><a>Button3</a></h1>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
I would superpose two <img> elements inside a <div> wrapper and play with the opacity. The static picture will be above when the mouse is not hovering on a button and when hovering, first you set the image below with imageBelow.src = images[i] and then change the opacity of the image above with imageAbove.style.opacity = "0";
wrapImages();
let imageBelow = document.querySelector('.pics .below');
let imageAbove = document.querySelector('.pics .above');
let jw_btn = document.querySelectorAll('.sqs-block-content h1 a');
let images = ['https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ea72dbf216159f9567d/1610112687144/homepage_story_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85e88b1f66202d7f3e8e4/1610112659325/homepage_art_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ebf1701e075bcb4c460/1610112707995/homepage_Studio_1500x896.jpg'];
jw_btn.forEach(function(jw_btn_current, index) {
jw_btn_current.addEventListener('mouseenter', function() {
imageBelow.src = images[index];
imageAbove.style.opacity = "0";
});
jw_btn_current.addEventListener('mouseleave', function() {
imageAbove.src = 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg';
imageAbove.style.opacity = "1";
});
});
function wrapImages() {
let sectionBackground = document.querySelector('.section-background');
let images = sectionBackground.getElementsByTagName('img');
var newDiv = document.createElement("div");
newDiv.className="pics";
sectionBackground.insertBefore(newDiv, sectionBackground.firstChild);
newDiv.appendChild(images[0]);
newDiv.appendChild(images[1]);
images[0].className="below";
images[1].className="above";
}
*,*::before,*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
height: 200vh;
}
img{
background-repeat: no-repeat;
transition: all .5s ease-in-out;
}
.pics {
position: relative;
width: 100%;
height: 100vh;
}
.pics > img {
position: absolute;
transition: all .4s ease;
}
.ulwrapper{
display: flex;
height: 100vh;
align-items: center;
}
.sqs-block-content{
display: flex;
width: 100%;
height: 4rem;
list-style: none;
}
h1{
margin: auto;
cursor: pointer;
}
h1 a{
font-weight: bolder;
text-decoration: none;
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='section-background'>
<img alt=""
data-src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg"
data-image="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg"
data-image-dimensions="2000x1195" data-image-focal-point="0.24133662454825583,0.20697233746829613"
data-load="false" data-parent-ratio="1.4"
style="width: 100%; height: 100%; object-position: 0% 20.6972%; object-fit: cover;"
data-image-resolution="2500w"
src="https://images.unsplash.com/photo-1610043238036-7309f1cc52d8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1534&q=80">
<img alt=""
data-src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg"
data-image="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg"
data-image-dimensions="2000x1195" data-image-focal-point="0.24133662454825583,0.20697233746829613"
data-load="false" data-parent-ratio="1.4"
style="width: 100%; height: 100%; object-position: 0% 20.6972%; object-fit: cover;"
data-image-resolution="2500w"
src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg?format=2500w">
</div>
<div class="ulwrapper">
<div class="sqs-block-content">
<h1 class="jw_btn"><a>Button1</a></h1>
<h1 class="jw_btn"><a>Button2</a></h1>
<h1 class="jw_btn"><a>Button3</a></h1>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
EDIT
If as you stated SquareSpace doesn´t allow you to add a wrapper to the HTML, then you can add a wrapper programatically. I have now added the function wrapImages() which must be called at the beginning of the JS code.
I've been searching a lot on the site and the web but can't really seem to find any help. My problem is that I need to make a function that creates a new div box on the press of a button and that div box needs to be draggable and editable.
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox" style="top:' + e.pageY + 'px; left: ' + e.pageX + 'px;"><span id="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$newbox.draggable();
}
}
function deleteNote() {
$(this).parent('#newbox').remove();
}
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#canvas').click(function (e) {
makeNote(e);
});
// Remove the note
$("#close").click(function () {
deleteNote();
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
#newbox {
position: absolute;
background-color: white;
height: 200px;
width: 200px;
box-shadow: 10px 10px 10px #888;
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 200px;
height: 180px;
border: 0;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" scr="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
</div>
</body>
</html>
draggable is a part of jquery-ui library. Not jquery.
Add <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> to your code.
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox" style="top:' + e.pageY + 'px; left: ' + e.pageX + 'px;"><span id="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$newbox.draggable();
}
}
function deleteNote() {
$(this).parent('#newbox').remove();
}
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#canvas').click(function (e) {
makeNote(e);
});
// Remove the note
$("#close").click(function () {
deleteNote();
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
#newbox {
position: absolute;
background-color: white;
height: 200px;
width: 200px;
box-shadow: 10px 10px 10px #888;
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 200px;
height: 180px;
border: 0;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
</div>
</body>
</html>
Since you use jQuery, you can use .draggable() from jQuery UI along with contenteditable="true":
function addNew() {
var field = $('<div contenteditable="true">Text</div>')
field.appendTo('#fields').draggable();
}
#fields div {
border: 1px dashed #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button onClick="addNew()">Add new field</button>
<hr/>
<div id="fields"></div>
There is something I want to notice.
never use same id to elements.
use jquery .on function for element that make by scripts.
never use box-shadow :D
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox'+e.pageX+e.pageY+'"><span class="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$($newbox).css({
'top' : ($('#canvas').height() / 2 - 150 + sequentCounter++) + 'px' ,
'left' : ($('#canvas').width() / 2 - 100 + rowSeqCounter + sequentCounter++) + 'px'
});
$newbox.draggable({cancel : '.close'});
}
}
var sequentCounter = 1;
var rowSeqCounter = 1;
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#div_element_maker').click(function (e) {
if (sequentCounter > 70){
sequentCounter = 1;
rowSeqCounter += 11;
if (rowSeqCounter > 50)
rowSeqCounter = 1;
}
makeNote(e);
});
// Remove the note
$('#canvas').on('click',".close", function () {
$(this).parent().remove()
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
.ui-widget-content {
position: absolute;
background-color: white;
height: 180px;
width: 185px;
border: 1px solid darkgray;
/*box-shadow: 10px 10px 10px #888;*/
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 180px;
height: 100px;
border: 1px solid darkgray;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
.close{
cursor: pointer;
background: red;
}
#div_element_maker{
cursor: pointer;
background: green;
padding: 10px;
margin: 10px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" scr="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
<span id="div_element_maker">make element</span>
</div>
</body>
</html>
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/
I have started a pong game where the guidelines have already been set for me but I have an issue with the ball. It is very early in development but I am stuck on this problem: The X axis will not move up and down. The ball is not meant to bounce off the paddles yet. Here is my code:
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ping Pong</title>
<link href="pong.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/pong.js" type="text/javascript"></script>
</head>
<body>
<header>
<h1>Ping Pong</h1>
</header>
<!-- Scoreboard goes here -->
<div id="game">
<div id="playground">
<div id="ball"></div>
<div id="paddleA" class="paddle"></div>
<div id="paddleB" class="paddle"></div>
</div>
</div>
<!-- used for debugging -->
<div id="debug">
</div>
<footer>
This is an example of creating a Ping Pong Game.
</footer>
</body>
</html>
Pong.js
var KEY = {
UP:38,
DOWN:40,
W:87,
S:83
};
var directionX = 1;
var directionY = 1;
$(function(){
var timer = setInterval(gameloop,30)
});
//This is where the logic for the game goes.
function gameloop(){
var playground = $("#playground");
var ball = $("#ball");
var width = parseInt (playground.css("width"))
var left = parseInt (ball.css("left"));
if(left >= width){
directionX = -1;
}
else if (left <= 0){
directionX = 1;
}
var height = parseInt (playground.css("height"))
var top = parseInt (ball.css("top"));
if(top >= height){
directionY = -1;
}
else if (top <= 0){
directionY = 1;
}
ball.css("left",left+5 * directionX);
ball.css("top",height+5 * directionY);
}
function debug(text){
$("#debug").text(text);
}
And pong.css
#playground{
background: #e0ffe0 /*url(images/pixel_grid.jpg)*/;
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
#ball {
background: #fbb;
position: absolute;
width: 20px;
height: 20px;
left: 150px;
top: 100px;
border-radius: 10px;
}
.paddle {
background: #bbf;
left: 50px;
top: 70px;
position: absolute;
width: 30px;
height: 70px;
}
#paddleB {
left: 320px;
}
#winner{
display:none;
position: relative;
width: 200px;
margin-left: 100px;
top: 30%;
font-size: 20px;
border: 3px solid red;
padding: 20px;
background-color: #FFF;
text-align:center;
font-family: Comic-Sans;
}
Oh and in case you were wondering, the js library was written for me.
You're using the height of the element instead of the offset (top).
It should be
ball.css("top", top + 5 * directionY);
I believe you need to use px when setting the CSS for top and left.
ball.css("left",(left+5 * directionX) + "px");
ball.css("top",(height+5 * directionY) + "px");