Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 days ago.
Improve this question
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Game</title>
<link rel="stylesheet" type="text/css" href="game.css">
<script src="https://cdn.jsdelivr.net/npm/...="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/...="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/...="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/...="anonymous"></script>
<style>
video { max-width: 100%; display: block; margin: 10px auto; }
</style>
</head>
<body>
<div id="gameField">
<div id="gameover">
<center>
<h1>Game Over</h1>
<h4>press 'F5' to restart</h4>
</center>
</div>
<div id="pause">
<center>
<h1>Pause</h1>
<h4>press 'F5' to resume</h4>
</center>
</div>
<table id="nextTable" border=0>
<tr><td id="00"></td><td id="01"></td><td id="02"></td><td id="03"></td></tr>
<tr><td id="10"></td><td id="11"></td><td id="12"></td><td id="13"></td></tr>
<tr><td id="20"></td><td id="21"></td><td id="22"></td><td id="23"></td></tr>
<tr><td id="30"></td><td id="31"></td><td id="32"></td><td id="33"></td></tr>
</table>
<div id="scoreField">
<p class="sub">LEVEL</p>
<p id="level">1</p>
<p class="sub">SCORE</p>
<p id="score">0</p>
<p class="sub">NEXT</p>
<p><br><br><br></p>
<p class="sub">HELP</p>
<p id="help">← ↓ →</p>
<p id="help"> ↑ </p>
<p id="help">P to pause</p>
<p class="sub" id="about" onclick="info()">ABOUT</p>
<div id="comboField"><i></i></div>
</div>
<div id="videoField">
<article class="panel is-info">
<p class="panel-heading">
camera1
</p>
<div class="panel-block">
<video class="video1"></canvas>
</div>
</article>
</div>
<div id="videoField">
<article class="panel is-info">
<p class="panel-heading">
camera2
</p>
<div class="panel-block">
<canvas class="video2" width="480px" height="480px"></canvas>
</div>
</article>
</div>
<div class="loading">
<div class="spinner"></div>
</div>
<div style="visibility: hidden" class="control4">
</div>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript" src="camera.js"></script>
</body>
</html>
The loading class and control4 class below are required to turn on the camera.
If you don't have that code, you'll see four screens in a row, and you won't be able to read the camera.
If you insert that code, the game screen goes down.
Please tell me how to solve why this is happening.
I'm going to make a game for the web.
I'm going to make the cam screen pop on the web page while playing games like a game broadcast.
The entire screen is organized in a line, like game screen / camera 1 / camera 2 / score area.
It's set up so that all four of them fit on the screen, and I want to make sure that I can see them all without a scroll bar.
The loading class and control4 class below are required to turn on the camera.
If you don't have that code, you'll see four screens in a row, and you won't be able to read the camera.
If you insert that code, the game screen goes down.
Please tell me how to solve why this is happening.
And I don't know if the order of div is organized in my own way or how to arrange it.
I wrote the code in the order of the game screen, the score area, camera 1, and camera 2.
The game screen, camera 1, camera 2, and the score area come out in order, but why is it like this?
I don't know why the game screen goes down when something has to go down.
It's hard. HTML...
Related
I have HTML and JS code that should display the daily verse from ourmanna.com API. However, the verse is not always displaying. I was wondering if it's a problem on their side or my side?
here is the html code:
<div class="col-md-6">
<div class="owl-carousel owl-theme">
<div class="item">
<div class="daily-verse">
<h2>Daily Verse</h2>
<div class="body-daily-verse">
<div id="ourmanna-verse">Loading...</div>
<script src="https://www.ourmanna.com/verses/api/js/" type="text/javascript"></script>
<p class="daily-verse-text">
</p>
<br />
<p class="verse-reference"></p>
</div>
</div>
</div>
</div>
</div>
Thanks very much
If you look at the script returned by ourmanna, you see the problem is a not escaped quote in the mannaverse:
var mannaverse='"'If you can'?" said Jesus. "Everything is possible for him who believes."';
Correct would be
var mannaverse='"\'If you can\'?" said Jesus. "Everything is possible for him who believes."';
So you cannot do anything about it, it is a ourmanna-problem.
I'm currently building a website and have an image as the header, but when I load the page it will jump half way down the page, load the image and then jump back up. How can I make the image load in first to prevent it from jumping?
HTML:
<div class="refocus" id="hero-header">
<div class="refocus-img-bg"></div>
<div class="refocus-img focus-in">
HTML:
</div>
<div class="refocus-text-container">
<div class="t">
<div class="tc">
</div>
</div>
</div>
</div>
<div class="row">
<div class=".col-md-6">
<div id="section1">
<div id = "sub-text">
<h1>Hello</h1>
<br>
<h2>Hello</h2>
<h3><br>Hello.</h3>
</div>
<div id="image">
<img src="images/aboutme.png"/>
</div>
</div>
<div id="buttoncontainer">
<div id="totimeline">▼</div>
</div>
</div>
</div>
Here's a JSFiddle to replicate this.
Thank you in advance.
You can do one of two things for this.
1) Set the dimensions of your image inline. This is actually a recommended method of preventing the very thing you are experiencing where the page jumps around after images load in. By setting the dimensions inline, the browser will already know how tall the image needs to be and will reserve the space for it before it even finishes loading in.
Example:
<img src="http://placehold.it/350x150" height="150" width="350">
2) If you don't prefer to set the dimensions inline, it seems you could also just set the height in your styles ahead of time and that would do the trick as well.
Example:
.refocus-img{
height:150px;
}
In the home-page of my website, I have put an intro-video which is not at the top. I want my visitors to view the intro video first. For this, I have used autoscroll:
<script>
function pageScroll() {
window.scrollBy(245,600); // horizontal and vertical scroll increments
}</script>
and then in the body:
<body onload="pageScroll()">
.....
</body>
But, the issue is that the browsers take a long time to autoscroll. Visitors reach the swf flash video only when half of it is already over (it is a short 10 sec video). How do I make the browsers follow this javascript first before anything else? [There are other javascripts on the website too]
Thanx in advance...
I've made a sample for a CSS only solution at http://jsfiddle.net/gqJ9e/
The only thing is that you don't have the video on the page later on.
HTML
<input id="switch" type="checkbox">
<div class="video">
<label for="switch">CLOSE</label>
<p>VIDEO MESSAGE</p>
</div>
<div class="page-wrapper">
<p>PAGE CONTENT</p>
</div>
CSS
.page-wrapper,
#switch,
#switch:checked+.video {
display:none;
}
#switch:checked+.video+.page-wrapper {
display:block;
}
Alternative solution to still have the video on the page at the bottom http://jsfiddle.net/gqJ9e/1/
HTML
<input id="switch" type="checkbox">
<div class="page-wrapper">
<p>PAGE CONTENT</p>
</div>
<div class="video">
<label for="switch">CLOSE</label>
<p>VIDEO MESSAGE</p>
</div>
CSS
.page-wrapper,
#switch,
#switch:checked+.video,
#switch:checked+.page-wrapper+.video>label {
display:none;
}
#switch:checked+.page-wrapper {
display:block;
}
I want to move my page to left using page slider in html, I have above 6 products so now I'm showing 4 products at a time in my page but I have more than 6 products when I was in the product page the slider must start moving left side and when we are clicking with mouse then also the page slider should work properly.
<html>
<div class="col-1-4">
<div class="wrap-col">
<div class="box maxheight1">
<img src="images/box1_img1.png" alt="">
<div class="text1">
Food Central
</div>Food central is a mobile application ......................
<div class="button" style="color:#334960">
Read More
</div>
</div>
</div>
</div>
</html>
it is with overflow-x:scroll;
It would be that :
div .wrap-col {
width:800px;
overflow-x:scroll;
}
div .wrap-col div {
width:4000px;
}
See: http://sthliquidations.com
I just downloaded and installed bxSlider. It seems to be exactly what I want, but I'm having several issues: I'm using Chrome
1) No matter what slide I'm on, the last slide shows after transition (except the first slide).
2) When I try to adjust the modes, the slider becomes it's basic UL list.
Process:
Header code:
<head>
<!-- NAME THE PAGE -->
<title><?php $title ?></title>
<!-- GET THE FAIRY DUST AND DUST BUNNIES -->
<link rel="stylesheet" type="text/css" href="scripts/basic.css" />
<script type="text/javascript" src="contact-files/contact-form.js"></script>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<!-- bxSlider -->
<script src="/scripts/jquery.bxslider.min.js"></script>
<link href="/scripts/jquery.bxslider.css" rel="stylesheet" />
<script src="/scripts/muscles.js"></script>
<!-- TELL GOOGLE WHAT IT WANTS TO HEAR -->
<meta name="description" content="<?php $description ?>">
<meta name="keywords" content="<?php $keywords ?>">
<!-- FIX ENCODING ERROR -->
<meta charset="UTF-8">
</head>
Header file:
<!-- =============== -->
<!-- BODY -->
<!-- =============== -->
<body>
<div id="header">
<div class="logo">
</div>
<!-- TITLE -->
<div class="headerwindow">
<div class="logo-box">
<img src="/images/logo_white.png" alt="STH Liquidations" class="logo_image" />
</div>
<div class='title'>
<?php
if ($title != "STH Liquidations")
{
echo $title;
}
?>
<p class='contact_info'>Phone: (843) 452-5451</p>
<p class='contact_info'>Monday - Friday: 8:30 - 5:00 PM</p>
</div>
</div>
</div>
<div class="clear"></div>
Index File:
<?php include "parts/hot_deals.php"; ?>
<p class="head1">Welcome to <strong>STH Liquidations, Inc.</strong></p>
<p>With <strong><i>over ten years experience</i></strong> in the overstock and liquidation business, we at STH Liquidation, Inc feel confident that we can meet your specific needs. STH buys and sells <strong>NAME BRAND</strong> liquidated merchandise from all major retailers, catalog companies and big box stores.
</p>
<p>Whether you are <strong>a retailer, wholesaler, auctioneer, online seller, exporter, flea marketer, mom and pop store,</strong> or whatever you specific venture is, we at STH Liquidations, Inc are confident that we can supply your needs and <strong>help maximize your profits</strong>. We carry truckloads of general merchandise, furniture, housewares, tools, toys, sporting goods, jewelry lots, apparel and much more.</p>
<p>We carry product from most all major retailers so our customers know that they are getting the name brands they are looking for.</p>
<p>We <strong>DO NOT</strong> buy from others warehouses in which merchandise most likely has been “cherry picked”. We buy and ship direct to the customers from all the major retail reclamation and distribution centers. <strong>Shipping direct from these facilities saves you money.</strong> Another money saving advantage is that our low overhead. Our business philosophy is simple; we keep our costs low so we can keep your costs low. Money saved is money made!</p>
<p>Browse our website at your leisure, but please call us with any questions you may have or to place your order.</p>
<p>Remember to join our mailing list to receive up to date listings and our <strong>hot deals</strong>.</p>
</div>
<div id="hotdeals">
<p class="head2">Hot Deals!</p>
<div class="deals">
<p class="deal_title">K-Hardgoods</p>
<p class="deal_desc">Housewares, toys, tools,sporting goods and much more. Several loads available. See attachment</p>
<p class="deal_price">Price $139 per pallet (single loads)<br />Price $135 per pallet (double load)</p>
<p class="deal_pdf">Download PDF</p>
</div>
<div class="deals">
<p class="deal_title">SRS Tool Truckload</p>
<p class="deal_desc">CR*STSM*N TOOLS AND MUCH MORE <br />Saws, compressors, blowers, edgers. saber saws, table saws and much more</p>
<p class="deal_price">27 PALLETS--WHLS $66,649.32 <br />SELL PRICE $12,900</p>
<p class="deal_pdf">Download PDF</p>
</div>
<div class="deals">
<p class="deal_title">W*M Power wheels</p>
<p class="deal_desc">Ride on toy truckloads
<br />150-180 units per truckload
<br />Customer returns</p>
<p class="deal_price">Price only $5,900</p>
</div>
</div>
<div class="clear"></div>
<div id="image_holder">
<ul class="bxslider">
<li><img src="/slider/pic1.jpg" /></li>
<li><img src="/slider/pic2.jpg" /></li>
<li><img src="/slider/pic3.jpg" /></li>
<li><img src="/slider/pic4.jpg" /></li>
<li><img src="/slider/pic5.jpg" /></li>
<li><img src="/slider/pic6.jpg" /></li>
</ul>
</div>
(leaving the footer out, it's not important)
My JS File (renders UL list of images):
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: fade
});
});
My JS File (renders slideshow that "almost" works):
$(document).ready(function(){
$('.bxslider').bxSlider();
});
Errors
Chrome Inspect Element is throwing this errors:
Uncaught ReferenceError: fade is not defined muscles.js:3
(anonymous function) muscles.js:3
j jquery.min.js:2
k.fireWith jquery.min.js:2
n.extend.ready jquery.min.js:2
K
I have made sure that all the files that came with the download have been included. I have followed the only instructions I could find on the website. Can anyone see what might be going wrong?
I had the same issue. I fixed it by setting useCSS: false in the js file. When useCSS is set to false bxslider uses jQuery animate() instead of CSS transitions for horizontal scrolling.