Im having a few problems (I've highlighted them in the code):
Problem 1: I don't know how to get the #dl_buttn centred - (45% is nearest) - is there any way to 'Align:centre'?
Problem 2: Im trying to display a content locker onClick - However my locker isn't popping up? - is the code wrong to display a javascript content locker?
Problem/Question 3: Instead of displaying a message on the second click, i would like to display a java alert - I have tried to do this, but failed - could anyone help me out? - (the id for it is 'message')
<html>
<head>
<title>Passupload Passowords - Get the Passwords for your .RAR Files Here!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#dl_buttn {
position:absolute;
left: 45%;
top: 280px;
}
-->
</style>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
</script>
</head>
<center>
<body bgcolor="#3c3c3c" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<input type="image" id="dl_buttn" src="images/GETRARPASS.png" alt="Submit Form" position:absolute; onClick="imageClick()" />
<span id="message" style="display:none">You have completed this part!</span>
<script type="text/javascript"> // --------------PROBLEM 3
/* <![CDATA[ */
var count = 0;
function showMessage () {
if (count++ > 0) {
document.getElementById("message").style.display="block";
}
}
function changeImage() {
document.getElementById("dl_buttn").src = "images/REVEALPASS.png"
}
function imageClick() {
var fileref = document.createElement('script');
fileref.setAttribute('type','text/javascript');
fileref.setAttribute('src', 'http://tvserieslink.com/CLP/locker.js?guid=44f3fa3f991e9a34');
showMessage();
setTimeout(changeImage, 3000);
}
/* ]]> */
</script>
<!-- Save for Web Slices (Puloaaa.psd) -->
<table id="Table_01" width="1100" height="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/Pulo_01.gif" width="1100" height="150" alt=""></td>
</tr>
<tr>
<td><img src="images/Pulo_02.gif" width="1100" height="650" alt="">
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</center>
</html>
Sorry I'm a noob & Sorry for posting the whole code - Thanks
Problem 1:
a) You have improper syntax for your input, remove the position:absolute css as it doesn't belong there:
<input type="image" id="dl_buttn" src="images/GETRARPASS.png" alt="Submit Form" onClick="imageClick()" />
b) use margin: 0 auto; to center your dl_buttn and get rid of the absolute positioning.
Problem 2:
You are creating a script element in the DOM but you are not attaching it anywhere. You need to use document.body.insertBefore or insertAfter or similar to attach it to the document.
Problem 3:
To display a javascript alert use alert('Your message here.');
Related
I have a finished JQuery for moving a 360° object (picture) with mouse actions.
The code is working:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery j360 Plugin Demo</title>
<script src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/j360.js" ></script>
</head>
<body>
<div class="jquery-script-clear"></div>
<h1 style="margin-top: 150px;">jQuery j360 Plugin Demo</h1>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#product').j360();
});
</script>
<center>
<div id="product" style="width: 1920px; height: 1080px; overflow: hidden;">
<img src="v/1.png" />
<img src="v/2.png" />
<img src="v/3.png" />
<img src="v/4.png" />
<img src="v/5.png" />
</div>
</center>
</body>
</html>
The needed pictures are received on demand from a server, so I have to create this code on demand after receiving the pictures. I use therefore document.write commands - I know they are not best practice, but usually it works ... Anyway this is the code I use - basically the same (even when I'm debugging I can't find a difference in the created HTML to the "original" HTML)
So basically it's like that:
<button id="click1" onclick="myFunction()">click me</button>
<script>
function myFunction() {
document.writeln('<html>');
document.writeln('<head>');
document.writeln('<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">');
document.writeln('<title>jQuery j360 Plugin Demo</title>');
document.write('<scr');
document.write('ipt src="js/jquery-1.4.4.min.js"></scr');
document.write('ipt>');
document.write('<scr');
document.write('ipt type="text/javascr');
document.write('ipt" src="js/j360.js" ></scr');
document.writeln('ipt>');
document.writeln('</head>');
document.writeln('<body>');
document.writeln('<div class="jquery-script-clear"></div>');
document.write('<scr');
document.writeln('ipt type="text/javascript">');
document.write(' jQuery(document).ready(func');
document.writeln('tion() {');
document.write(" jQuery('");
document.write('#');
document.writeln("product').j360();");
document.writeln(' });');
document.write('</scr');
document.writeln('ipt>');
document.writeln('<center>');
document.writeln('<div id="product" style="width: 960px; height: 540px; overflow: hidden;">');
document.write('<img src="images/01.jpg" />');
document.write('<img src="images/02.jpg" />');
document.write('<img src="images/03.jpg" />');
document.writeln('</div>');
document.writeln('</center>');
document.writeln('</body>');
document.writeln('</html>');
}
</script>
The created HTML shows the picture but the jQuery plugin is not working. The JS are the same.
Thank for your help!
document.write overwrites any code you have.
Example:
function overwrite() {
document.write("Oops, I've overwritten the code!");
}
<!doctype html>
<html>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<button onclick="overwrite()">Click me!</button>
</body>
</html>
I am trying to make a button which when held down should change the picture next to it and then when you are not holding down on the button it will be on the original image. Now it comes up with the button and the image and knows that the picture of the button is a button but doesn't change the image.
<!DOCTYPE html>
<html>
<head>
<title>Joel's Button</title>
<script>
var button=document.images["button"];
function handleMDown()
{
document.getElementById("imagechange").src="red.jpg";
return true
}
function handleMUp()
{
document.getElementById("imagechange").src="green.jpg";
return true;
}
</script>
</head>
<body>
<h1>Click in button</h1>
<a href="#"onmousedown="return handleMDown()" onmouseup="return handleMUp()">
<img id="button" src="http://goo.gl/VqDdz0" width="220" height="220"
border="0" alt="javascript button" onmousedown="return handleMDown()"
onmouseup="return handleMUp"></a>
<img id="imagechange" src="green.jpg"width="220" height=" 220" alt="image">
</body>
</html>
So here's the thing:
First of all, as mentioned by Petr Felzmann
syntax error: missing variable name: var =document.images["goo.gl/jjOUxT"]
Second of all, in your onmousedown & onmouseup events you can call the function by going handleMDown(); or handleMUp(); instead of your return handleMDown().
Last but not least, I've changed the images around a bit, this is just so I could test it properly, but from what I understood this is what you basically wanted:
HTML
<body>
<h1>Click in button</h1>
<a href="#"onmousedown="handleMDown();" onmouseup="handleMUp();">
<!-- Changed the onmousedown & onmouseup to handleMDown(); or handleMUp(); accordingly -->
<img id="button" src="http://doha.biz/wp-content/uploads/awpcp/1276329896_0.jpg" width="220" height="220" border="0" alt="javascript button" onmousedown="handleMDown();" onmouseup="handleMUp();"></a>
<!-- Changed the onmousedown & onmouseup to handelMDown(); or handleMUp(); accordingly -->
<img id="imagechange" src="http://doha.biz/wp-content/uploads/awpcp/1276329896_0.jpg" width="220" height=" 220" alt="image">
</body>
Javascript
function handleMDown() {
document.getElementById("imagechange").src="http://www.veryst.com/_Images/Material%20Testing%20--%20Modeling%20Services/Small%20punch%201.png";
return true
}
function handleMUp()
{
document.getElementById("imagechange").src="http://doha.biz/wp-content/uploads/awpcp/1276329896_0.jpg" ;
return true;
}
Don't forget to change the images back in the Javascript as well as in the HTML
Hope this helps!
you should put script tag in before close body tag :
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>Click in button</h1>
<a href="#" onmousedown="handleMDown()" onmouseup="handleMUp()">
<img id="button" src="http://goo.gl/VqDdz0" width="220" height="220" border="0" alt="javascript button" onmousedown="handleMDown()" onmouseup="handleMUp">
</a>
<img id="imagechange" src="green.jpg" width="220" height=" 220" alt="image">
<script>
var button= document.images["button"];
var e =document.images["http://goo.gl/jjOUxT"]
function handleMDown()
{document.getElementById("imagechange").src="red.jpg";
return true
}
function handleMUp()
{
document.getElementById("imagechange").src="green.jpg" ;
return true;
}
</script>
</body>
</html>
You tried too much, you can do it much simpler. I stripped it down to the bare minimum: changing the images on the right of the big red button. I stripped the link, too, just add it back if you need it.
<!DOCTYPE html>
<html>
<head>
<title>Joel's Button</title>
<script>
function handleMDown()
{
document.getElementById("imagechange").src="red.jpg";
}
function handleMUp()
{
document.getElementById("imagechange").src="green.jpg" ;
}
</script>
</head>
<body>
<h1>Click in button</h1>
<img id="button" src="http://goo.gl/VqDdz0" width="220" height="220"
border="0" alt="javascript button" onmousedown="handleMDown()"
onmouseup="handleMUp()">
<img id="imagechange" src="green.jpg"width="220" height=" 220" alt="image">
</body>
</html>
The event-handler (the onthingy attributes if you excuse my simplifying) do not make use of any return of the functions they call, they just call them. If you want to call functions (function fun(){...}) you need to add () at the end of the function name, you forgot that in one places.
you can use onmousedown and onmouseup to handle these events
document.getElementById('red').onmousedown = function () {
document.getElementById('red').style.backgroundColor = 'red';
};
document.getElementById('red').onmouseup = function () {
document.getElementById('red').style.backgroundColor = 'blue';
};
http://jsfiddle.net/kdyr8owk/
Change your HTML code to:
<img id="button" src="http://goo.gl/VqDdz0" style="width: 220px; height: 220px; border: 0;" alt="javascript button" onmousedown="handleMDown()" onmouseup="handleMUp()">
<img id="imagechange" src="put your NOT holding button down source here" alt="image" style="width: 220px; height: 220px;">
Note that I changed your HTML code to match today's standard of using CSS to style elements.
Change your JavaScript code to:
function handleMDown() {
document.getElementById("imagechange").src="put your holding button down source here";
}
function handleMUp()
{
document.getElementById("imagechange").src="put your NOT holding button down source here";
}
Check out fiddle here.
I am trying to duplicate Expanding Text Areas Made Elegant
Basically it explains how we can achieve something like fb comment box, where its size increases as text files the textarea.
I have this in my index.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="test.js"></script>
</head>
<body>
<figure>
<div class="expandingArea">
<pre><span></span><br></pre>
<textarea></textarea>
</div>
</figure>
</body>
</html>
And my test.js looks like:
This doesn't really works.
However if I move everything inside the js file to a script tag inside body then it works fine. So my index file would look like:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<figure>
<div class="expandingArea">
<pre><span></span><br></pre>
<textarea></textarea>
</div>
</figure>
<script>
function makeExpandingArea(container) {
var area = container.querySelector('textarea');
var span = container.querySelector('span');
if (area.addEventListener) {
area.addEventListener('input', function() {
span.textContent = area.value;
}, false);
span.textContent = area.value;
} else if (area.attachEvent) {
// IE8 compatibility
area.attachEvent('onpropertychange', function() {
span.innerText = area.value;
});
span.innerText = area.value;
}
// Enable extra CSS
container.className += ' active';
}var areas = document.querySelectorAll('.expandingArea');
var l = areas.length;while (l--) {
makeExpandingArea(areas[l]);
}
</script>
</body>
</html>
You're not actually using onload
Your formatting is so messed up it's hard to tell, but your init code is in a while loop at the bottom after your onload function.
When you include it in the <head> it runs before any elements exist. That's why the position of it matters.
In your browser(I recommend Chrome for testing) open up the developer tools(via right click and selecting inspect element) and make sure your test.js file's path is correct. Do this by selecting the 'Sources' tab on the top of the developer tools window and then selecting the test.js file on the list of sources.
I also consider it best practice to load your js files at the bottom of your web documents(before the last body tag) to guarantee they load AFTER your dom elements load.
try this in your code:
I have used inside a table andapply a css class "form-control". The properties of this text areas are in side tag in side
html code:
<html>
<body>
<table>
<tr>
<td>Description:</td>
<td><textarea name="DESCRIPTION" id="DESCRIPTION" class="form-control"></textarea></td>
<td></td>
</tr>
</table>
//css-code required inside html:
<style>
textarea.form-control {
height: auto;
resize: none;
width: 300px;
}
</style>
</body>
</html>
i am trying to print full page but it doesn't work tried different codes but no success
here is tried code.
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
if (window.print) {
document.write('<form><input type=button name=print value="Print" onClick="window.print()"></form>');
}
</script>
<style type="text/css" media="all">
body{font-size:1em;}
table{font-size:0.9em;}
.price{text-align:right;padding-right:5px;}
.center{text-align:center;}
table tr{height:20px;}
#media print {body, html{width: 100%;}}
#top, #bottom {display: none;}
</style>
</head>
<body style="width:100%;">
<table width="94%" style="margin-left:2%;">
<tr>
<td width="100%" colspan="3" class="center" style="height:35px;"> <span style="text-transform:uppercase;"><b>ORDER TYPE </b></span></td>
</tr>
<tr></table>
</body></html>
please help me with it.
thanks
are you trying to render your page through javascript? If yes the following tutorial may help.
http://www.w3schools.com/js/js_htmldom_html.asp
Recommend reading the following API of the tutorial
document.getElementById(id).innerHTML = new HTML
Hope this helps.
this should work for you:
<html>
<head>
<style type="text/css" media="all">
body{font-size:1em;}
table{font-size:0.9em;}
.price{text-align:right;padding-right:5px;}
.center{text-align:center;}
table tr{height:20px;}
#media print {body, html{width: 100%;}}
#top, #bottom {display: none;}
</style>
</head>
<body style="width:100%;">
<input type=button name=print value="Print" onClick="window.print()">
<table style="margin-left:2%;width:94%;">
<tr>
<td width="100%" colspan="3" class="center" style="height:35px;"> <span style="text-transform:uppercase;"><b>ORDER TYPE </b></span></td>
</tr>
<tr></table>
</body></html>
note: always construct you html properly. width is a part of style tag it is not a tag itself.
I'm new to jquery and I don't want to end up doing the wrong thing, I've done everything else but, I'm stuck on this part. How do I hook this is up? I've tried using script tags, but I'm not sure if thats right.
$(document).ready(function() {
$('.menu').dropit()
});
Ok I've done what you guys suggested, but it still does not seem to work.
Heres the full code:
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="path/to/your/jquery/script.js"></script>
<script src="dropit.js"></script>
<link rel="stylesheet" href="dropit.css" type="text/css" />
<style>
body
{
background:url("");
background-size:0px 0px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
<STYLE>
<!--
a:hover{color:#c0c0c0;}
-->
</STYLE>
<style>
.navLink {
color: #000000;
text-decoration: none !important;}
ul
{
list-style-type:none;
font-size: SMALL;
font-family: 'Ubuntu Condensed', sans-serif;
font-weight: lighter;
font-style: regular;}
li
{
display:inline;
}
</style>
</head>
<body>
<img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="100" height="70">
<HR COLOR="#C0C0C0" WIDTH="100%">
<ul id="nav" >
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="450" height="1"> <li><a href="#">
MENS
<ul>
<li>Shirts</li>
<li>Jackets</li>
<li>Denim</li>
<li>Fleece</li>
</ul>
</li>
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="1">
<li>WOMEN'S</li>
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="1">
<li>NEW ARRIVALS
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="1">
<li>BLOG
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="1">
<li>SALE
</ul>
<HR COLOR="#C0C0C0" WIDTH="100%">
<ul id="nav" >
<img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="0" height="2">
<p><p align="center"><img border="0" src="http://img593.imageshack.us/img593/6192/5eo7.png" alt="Vealed" width="800" height="500">
<img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="70" height="2">
</ul>
<img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="100" height="200"
<script type="text/javascript">
$(document).ready(function() {
$('.menu').dropit();
});
</script>
</body>
</html>
I wanted to make it so that all the links in the menu will have a drop down.
Put the script tag in between your head tags like so
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
</head>
put this right before the closing body tag like so
<script type="text/javascript">
$(document).ready(function() {
$('.menu').dropit();
});
</script>
</body>
Another option, instead of putting your jQuery code at the bottom, is to put all your javascript/jquery in a separate file. And then just link to it.
For example
<script type="text/javascript" src="myjsfilename.js"></script>
</body> //again, you put this right before the closing body tag
And then in your myjsfilename.js file, you would have
$(document).ready(function() {
$('.menu').dropit();
});
plus anymore javascript/jquery code you want to add
Doing it that way can help keep things organized
Add a script tag like this to the head or body of your html:
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="path/to/your/jquery/script.js"></script>
as far as best practices go for where to add it, check here for a good discussion:
Where should I put <script> tags in HTML markup?
The first script tag above links to a CDN, and allows you to include jQuery without having to have it locally. This is a great way to do it as long as you dont include many external scripts. Once you have many scripts it would be better to include everything in a local minified file to increase page load performance.
I drew a small diagram to help anyone understand the answers visually.
As a rule of thumb, I recommend putting all scripts at the bottom for performance issues.
It is a best practice, I'd say. So put your code before the </body> closes:
<script type="text/javascript">
$(document).ready(function() {
$('.menu').dropit();
});
</script>
And obviously you need to load your jQuery from a CDN, so put it above all script code.
Yes, that would also need to go before the </body> closes.
The diagram explains it better now. Have a look.