<html>
<head><title>Test</title>
<link rel="stylesheet" type="text/css" href="Lab4-Pizza.css" />
<script type="text/javascript">
function doSonic()
{
if (document.getElementById('sonicChecked').checked)
{
document.getElementById('sonic').style.visibility="visible";
}
else
{
document.getElementById('sonic').style.visibility="hidden";
cost=cost-1;
}
}
function doDrake()
{
if (document.getElementById('drakeChecked').checked)
{
document.getElementById('drake').style.visibility="visible";
}
else
{
document.getElementById('drake').style.visibility="hidden";
cost=cost-2;
}
}
function doEzio()
{
if (document.getElementById('ezioChecked').checked)
{
document.getElementById('ezio').style.visibility="visible";
}
else
{
document.getElementById('ezio').style.visibility="hidden";
cost=cost-1;
}
}
function doJoel()
{
if (document.getElementById('joelChecked').checked)
{
document.getElementById('joel').style.visibility="visible";
}
else
{
document.getElementById('joel').style.visibility="hidden";
cost=cost-1;
}
}
function doGta()
{
if (document.getElementById('gtaChecked').checked)
{
document.getElementById('gta').style.visibility="visible";
}
else
{
document.getElementById('gta').style.visibility="hidden";
}
}
function calcCost()
{
document.getElementById("costText").innerHTML = "The final cost of your pizza is: €" + cost + ".00";
alert("Please refresh page to create another pizza!");
}
</script>
</head>
<body>
<script type="text/javascript">
var cost = 10.00;
</script>
<div style="position: relative; left: 0; top: 0;">
<img src="images/redshirt.png" width="250" height="450" alt="redshirt" id="redshirt" style="position: relative; top: 0; left: 0;"/>
</div>
<img src="images/sonic.png" width="125" height="225" alt="Sonic" id="sonic" style="position: absolute; top: 80px; left: 70px;"/>
<img src="images/drake.png" width="150" height="250" alt="drake" id="drake" style="position: absolute; top: 80px; left: 50px;" />
<img src="images/Ezio.png" width="175" height="275" alt="ezio" id="ezio"style="position: absolute; top: 80px; left: 50px;" />
<img src="images/joel.png" width="120" height="225" alt="joel" id="joel"style="position: absolute; top: 80px; left: 60px;" />
<img src="images/gta.png" width="150" height="250" alt="gta" id="gta"style="position: absolute; top: 80px; left: 70px;" />
</div>
<input type="checkbox" id="sonicChecked" onclick="doSonic()" checked="true"> Sonic
<input type="checkbox" id="drakeChecked" onclick="doDrake()" checked="true"> Drake
<input type="checkbox" id="ezioChecked" onclick="doEzio()" checked="true"> Ezio
<input type="checkbox" id="joelChecked" onclick="doJoel()" checked="true"> Joel
<input type="checkbox" id="gtaChecked" onclick="doGta()"checked="true" > GTA
<br><br>
<div id="prices">
<p><h2>Shirt Prices:</h2></p>
<p>1. </p>
<p>2. </p>
<p>3. </p>
<p>4. </p>
<p>5.</p>
<p>6.</p>
</div>
<button type="button" onclick="calcCost()">Done - Calculate Cost</button>
<div id="costText" ></div>
</body>
</html>
I'm wondering if someone can help me with this, I a making a website where a user can order a custom game character on a range of different coloured shirts. I am using layering to render a live mock up of the character on the coloured shirt.
The code above starts with all the character options on the shirt and they are removed with a check box. My question really is how do I only display the user selected character on the shirt while also making each option a unique order-able product that can be added to a cart.
Also currently it only does the red shirt how do I make the base image user selectable.
Any help appreciated thanks.
Related
I tried to create a simple HTML game of Point-and-click and I'd like to move my character on the screen. Now, I can do it with buttons, but I'd like to put images with hrefs that my character moves without the button. For example, when I click on the men, I'd like that Mario Moves to the men. My code is this:
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<center>
<button id="go2"><-</button>
<button id="go">-></button>
</center>
<script>
$( "#go" ).click(function() {
$('#Walk').attr('src','https://orig02.deviantart.net/8996/f/2014/244/d/e/mario_by_nintentofu-d7xicg0.gif')
$( "#Prota" ).animate({
left: "550",
}, 4500 );
});
$( "#go2" ).click(function() {
$('#Walk').attr('src','https://orig02.deviantart.net/8996/f/2014/244/d/e/mario_by_nintentofu-d7xicg0.gif')
$( "#Prota" ).animate({
left: "0",
}, 4500 );
});
</script>
</div>
<div id='Fondo' style="position:absolute;z-index:99999999999999;margin-left: 0px; margin-top: 0px; background-color:#000000; height:600; width:800">
<img src="https://orig00.deviantart.net/6ddc/f/2018/003/4/b/principepio_by_darklordwriter-dbyrqix.png" alt="" />
</div>
<div id='Objetivo' style="position:absolute;z-index:99999999999999;margin-left: 225px; margin-top: 400px; height:100; width:100">
<img src="https://vignette.wikia.nocookie.net/finalfantasy/images/d/d0/FFRK_Thief_FFI.png" alt="">
</div>
<div id='Prota' style="position:absolute;z-index:99999999999999;margin-left: 0px; margin-top: 400px; height:100; width:100">
<img src="https://orig02.deviantart.net/8996/f/2014/244/d/e/mario_by_nintentofu-d7xicg0.gif" alt="" id='Walk'>
</div>
Can anybody help me? Thanks a lot!
Here's a basic example, you add an event listener to the object you want Mario to walk to, and then use the offsetLeft property to find where (relatively speaking) to move him. Here I've subtracted the offsetWidth value so Mario doesn't stand right on top of him. If Mario approaches from the right, you would want to check for that and instead add the offsetWidth value.
$("#Objetivo").click(function () {
$( "#Prota" ).animate({
left: this.offsetLeft - this.offsetWidth
}, 1000 );
});
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div id='Fondo' style="position:absolute;z-index:99999999999999;margin-left: 0px; margin-top: 0px; background-color:#000000; height:600; width:800">
<img src="https://orig00.deviantart.net/6ddc/f/2018/003/4/b/principepio_by_darklordwriter-dbyrqix.png" alt="" />
</div>
<div id='Objetivo' style="position:absolute;z-index:99999999999999;margin-left: 225px; margin-top: 400px; height:100; width:100">
<img src="https://vignette.wikia.nocookie.net/finalfantasy/images/d/d0/FFRK_Thief_FFI.png" alt="">
</div>
<div id='Prota' style="position:absolute;z-index:99999999999999;margin-left: 0px; margin-top: 400px; height:100; width:100">
<img src="https://orig02.deviantart.net/8996/f/2014/244/d/e/mario_by_nintentofu-d7xicg0.gif" alt="" id='Walk'>
</div>
I am firstly trying to fade in a div as soon as the page is loaded, then once its loaded I have 2 other divs on it that are acting like buttons. I would like to be able to click those 2 divs to be able to make other divs appear on top of the first one. Here is the code for the first div that should fade in a soon as the page is finished loading:
<div id="step1" style="visibility: hidden; display:block">
<a id="btn-step2-video" style="position:fixed; top: 45%; left: 25%;"><div class="btn-ad-choice ad-choice">
<br>
<p><b>Create a video ad:</b></p>
<video width="200" height="113" autoplay="autoplay" mute>
<source src="video/exemple.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div></a>
<a id="btn-step2-picture" style="position:fixed; top: 45%; right: 25%;"><div class="btn-ad-choice ad-choice">
<br>
<p><b>Create a picture ad:</b></p>
<img src="images/adexemple.jpg" alt="Exemple of a picutre ad" height="113" width="200">
</div></a>
</div>
and here is the code for the next divs that I would like to fad in if either of the 2 buttons is clicked. So if the button video is clicked the div containing the word video will fade in and the div containing the buttons will fade out, same for the second button with picture:
<div id="step2-video" class="box" style="visibility: hidden; background:#C0C0C0">
video
</div>
<div id="step2-picture" class="box" style="visibility: hidden; background:#C0C0C0">
picture
</div>
Finally here is the Javascript, however it does not work:
<script type="text/javascript">
var step1 = $('#step1'),
step2-video = $('#step2-video'),
step2-picture = $('#step2-picture'),
var boxes = $('.box');
$('#btn-step2-video').click(function(){
fade(step1, step2-video);
});
$('#btn-step2-picture').click(function(){
fade(step1, step2-picutre);
});*/
$(document).ready(function() {
$("#step1").fadeIn("quick");
});
function fade(thisIn, callback){
$(thisIn).fadeOut("slow");
$(callback).fadeIn("slow");
});
</script>
Thank you for your help ;)
Edited your original post, code is below.
Guess this is the functionality you want?
$(function() {
var step1 = $('#step1');
var step2video = $('#step2-video');
var step2picture = $('#step2-picture');
var boxes = $('.box');
step1.fadeIn("slow");
$('#btn-step2-video').click(function() {
fade(step1, step2video);
});
$('#btn-step2-picture').click(function() {
fade(step1, step2picture);
});
var fade = function(thisIn, callback){
$(thisIn).fadeOut("slow");
$(callback).fadeIn("slow");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="step1" style="display:none; background: #ff0000; width: 100px; height: 100px;">
<a href="#" id="btn-step2-video" style="position:fixed; top: 45%; left: 25%;"><div class="btn-ad-choice ad-choice">
<br>
<p><b>Create a video ad:</b></p>
</div></a>
<a href="javascript:void(0);" id="btn-step2-picture" style="position:fixed; top: 45%; right: 25%;"><div class="btn-ad-choice ad-choice">
<br>
<p><b>Create a picture ad:</b></p>
</div></a>
</div>
<div id="step2-video" class="box" style="display: none; background:#C0C0C0; height: 100px; width: 100px;">
video
</div>
<div id="step2-picture" class="box" style="display: none; background:#C0C0C0; height: 100px; width: 100px;">
picture
</div>
So I have been able to make some progress with my problem but have encountered something a little unexpected/confusing. I have been able to add my script to my web page, however, the two do not work together. Without the script, the page appears as I would like. With the script, the script runs and overrides the web page. What happens is a random picture shows up in the top left corner of the screen, but nothing from the html file appears. I have included all my code (html, javascript, css) and if anyone can provide some guidance it would be really greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="mplstyles.css" rel="stylesheet" type="text/css" />
<title>Monroe Public Library</title>
</head>
<body>
<div id="pageContent">
<div id="head">
<img src="mpl.jpg" alt="Monroe Public Library" />
</div>
<div id="links">
<ul class = "nav">
<span>Quick Links</span>
<li>Home Page</li>
<li>Online Catalog</li>
<li>Friends of MPL</li>
<li>New Books and Other Good Reading</li>
<li>Ohio Virtual Library</li>
<li>Internet Public Library</li>
<li>Services and Collection</li>
<li>Adult Programs</li>
<li>Teen Central</li>
<li>Children's Room</li>
<li>Computers at MPL</li>
<li>Computer Rules and Procedures</li>
<li>Staff Directory</li>
<li>Library Records</li>
</ul>
</div>
<div id="main">
<h2>Library Records</h2>
<p>To view the library records, enter your username and password.</p>
<form id="login" method="post" action="">
<p>
<label for="username" class="center" id="input"> Username:</label>
<input type="text" id="username" name="username" size="20" />
</p>
<p>
<label for="password" class="center" id="input"> Password:</label>
<input type="password" id="password" name="password" size="20" />
</p>
<p>
<label for="captcha" id="input">As a final security check, enter the 5 numbers you see displayed below.</label>
<input type="text" id="captcha" name="captcha" size="6" />
</p>
<p id="login"> </p>
<p id="login">
</p>
<script src="mpl.js"></script>
<p align="center"><img src="" alt="" name="number1" width="70" height="100" id="number1"><img src="" alt="" name="number2" width="70" height="100" id="number2"><img src="" alt="" name="number3" width="70" height="100" id="number3"><img src="" alt="" name="number4" width="70" height="100" id="number4"><img src="" alt="" name="number5" width="70" height="100" id="number5"></p>
<div id="images">
</div>
<p align="center">
<input type="submit" value="View Library Records" />
</p>
</form>
</div>
<div id="address">
<span class="addressBold">Monroe Public Library</span>
580 Main Street, Monroe, OH 45050
<span class="addressBold">Phone</span>(513) 555-0211
<span class="addressBold">Fax</span>(513) 555-0241
</div>
</div>
</body>
</html>
window.onload = function ()
{
//http://www.java-scripts.net/javascripts/Random-Image-Script.phtml
var pictureNumbers=new Array()
//specify random images below. You can have as many as you wish
pictureNumbers[1]="0.jpg"
pictureNumbers[2]="1.jpg"
pictureNumbers[3]="2.jpg"
pictureNumbers[4]="3.jpg"
pictureNumbers[5]="4.jpg"
pictureNumbers[6]="5.jpg"
pictureNumbers[7]="6.jpg"
pictureNumbers[8]="7.jpg"
pictureNumbers[9]="8.jpg"
pictureNumbers[10]="9.jpg"
var randomNumber = Math.floor(Math.random()*pictureNumbers.length)
if (randomNumber==0)
{
randomNumber=1
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==1)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==2)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==3)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==4)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==5)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==6)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==7)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==8)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==9)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==10)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
}
#charset "UTF-8";
/* CSS Document */
body
{
margin-top:0;
font-family:Georgia, "Times New Roman", Times, serif;
background-color:#FFC;
}
#head
{
background-color:orange;
}
#page
{
width: auto;
margin" 0 auto;
background-color: white;
border-top: none;
}
#links
{
position:absolute;
width:10em;
border: 1px solid blue;
top: 72px;
background-color: white;
}
#main
{
margin-left: 12em;
}
#login
{
padding-top: 1em;
padding-left: 2em;
padding-bottom: 5em;
border: 1px solid blue;
}
#address
{
padding-top: 2em;
padding-left: 2em;
border-top: 1px solid blue;
}
#pageContent #main h2 {
color: #00F;
}
#input
{
background-color: orange;
padding-right: 20%;
}
Your problem is document.write. You should either be creating an element and appending it to a parent element in the DOM, or changing the src attribute of an existing element.
Creating Elements and appending them
var parent = document.getElementById("parent"),
img = document.createElement("img")
img.setAttribute("src","your-file-name.jpg")
parent.appendChild(img)
Example
Here is a simplified example of what you are doing.
Fiddle: http://jsfiddle.net/L3WYH/1/
HTML
<div id="picture-frame"></div>
JS
var pictureNumbers = [],
pictureCount = 10
for ( var i = 1; i <= pictureCount; i++ )
pictureNumbers[i] = i + ".jpg"
var randomNumber = Math.ceil(Math.random()*(pictureNumbers.length - 1)),
element = document.getElementById("picture-frame"),
image = document.createElement("img")
image.setAttribute("src", pictureNumbers[randomNumber])
element.appendChild(image)
To expand on #Gary's comment to the original post:
The calls to document.write(...) are what's causing your problem. Upon firing the 'onload' event, the browser closes the document for writing. Any subsequent calls to document.write will literally overwrite the whole page.
To fix this, you will need to do one of two things:
Make your calls to document.write outside of the window.onload event
Do as #MBottens mentioned in his answer, where you append new <img> elements to a DIV tag.
I have already seen similar threads on SO.
I have index.php on button click url.php get loaded through ajax in the <div> present in index.php
On url.php there are couple of <div>. I want some of them to be visible only after button click. I got solution for this.
But only 1 div become visible rest hidded Is it due to z-index property?
index.php:
<script>
$("#load_url").click(function(){
$.ajax({
url:"url.php",
success:function(response) {
$("#view_port").html(response);
$("#load_url").hide();
}
});
});
function show2() {
//alert("hi");
document.getElementById("txtHint").style.display = "block";
document.getElementById("rateit99").style.display = "block";
document.getElementById("cb1").style.display = "block";
}
</script>
url.php
<body style="height: 560px">
<div class="rateit bigstars" id="rateit99" style="z-index: 1; display:none;" ><b>Rate Me </b></label>
</div>
<label2 color="red" id="l1" style="z-index: 1; left: 438px; display:none; top: 180px; position:absolute" ><b><u>Add comment</u> </b></label2>
<form action="data.php" method="POST" onsubmit="showUser(this, event)">
<div style="z-index: 1; left: 420px; top: 40px; position: absolute; margin-top: 0px">
<label>Enter URL: <input type="text" id="t1" value="http://www.paulgraham.com/herd.html" name="sent" style="width: 400px; height:40px;" ></label><br/>
</div>
<div style="z-index: 1;" > <button onclick="show2();"> Get Sentiment </button>
</div>
</form>
<div style="z-index: 1; left: 720px; top: 110px; position: absolute; margin-top: 0px">
</div>
<h4>
<div id="txtHint" align="justify" style="z-index: 3; "> </h4>
</div>
<div class="fb-comments" id='cb1'" ></div>
</div>
</body>
when button Get Sentiment clicked. Only id="txtHint" and lable Rate me appears.
cb1, rateit99 remains invisible, what is the bug here?
Link to full code:
index.php
http://codetidy.com/6857/
url.php
http://codetidy.com/6858/
Its not a answer but because I can not comment-
Actually this is happening because of css conflicts. try to give display none every such element through class and then apply direct style as ur doing. you can also use !important to give higher preference.
So what I'm trying to get is when you hover the word span, an image will appear. However, when I hover, nothing happens. I've tried all techniques to do this but no success.
HTML:
<div href="javascript:void();" onClick="document.getElementById('avThemes').style.display='block';">
<input type="radio" name="theme" value="available" id="available" onclick="" /> Available Themes
</div><br />
<div id="avThemes">
<span id="container1"><input type="radio" name="theme" value="greenWaves" id="greenWaves" />
<a id="gw">Green Waves</a>
</span>
<span id="container2"><input type="radio" name="theme" value="purpleLove" id="purpleLove" />Purple Love</span>
</div>
<br />
<img src="images/themes/greenWaves/preview.gif" id="preview1" class="preview" />
<img src="images/themes/purpleLove/preview.gif" id="preview2" class="preview" />
CSS:
#avThemes {
display: none;
}
#preview1, #preview2 {
display: none;
position: absolute;
top: 500px;
left: 20px;
}
#container1:hover #preview1{
display: block;
}
I also have tried using this which also have failed. Can someone help me figure this out? Thanks!
$('#container1').mouseover(function() {
$('#preview1').fadeIn("slow");
});
$('#container1').mouseleave(function() {
$('#preview1').fadeOut("slow");
});
try This.....
HTML
<input type="radio" name="theme" value="available" id="available" onclick="" />
Available
Themes<br />
<div id="avThemes">
<span id="container1"><input type="radio" name="subtheme" value="greenWaves"
id="greenWaves" /><a id="gw">Green Waves</a></span>
</div>
<img src="images/themes/greenWaves/preview.gif" id="preview1" class="preview" />
css
#avThemes {
display: none;
}
#preview1, #preview2 {
display:none;
}
javascript
$('#available').click(function() {
$('#avThemes').show();
});
$('#container1').mouseover(function() {
//alert("fdf");
$('#preview1').fadeIn("slow");
});
$('#container1').mouseleave(function() {
$('#preview1').fadeOut("slow");
});
Here
May try this -
$(document).on("mouseenter","#container1",function(){
//Implementation
});