Hello again i found a great script that does almost what i want the problem is that its not moving on its own when the page loads can we change it to do that?
The idea was to make scrolling down messages i want to make it to make a loop so il have a message and it will move from top to bottom but it will never stop moving like a marquee
thanks in advance!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
scrollStep=1
timerUp=""
timerDown=""
function toTop(id){
document.getElementById(id).scrollTop=0
}
function scrollDivDown(id){
clearTimeout(timerDown)
document.getElementById(id).scrollTop+=scrollStep
timerDown=setTimeout("scrollDivDown('"+id+"')",10)
}
function scrollDivUp(id){
clearTimeout(timerUp)
document.getElementById(id).scrollTop-=scrollStep
timerUp=setTimeout("scrollDivUp('"+id+"')",10)
}
function toBottom(id){
document.getElementById(id).scrollTop=document.getElementById(id).scrollHeight
}
function stopMe(){
clearTimeout(timerDown)
clearTimeout(timerUp)
}
</script>
<style>
#display{
width:200px;
height:150px;
overflow:hidden;
text-align:left;
border:1px solid black;
}
</style>
</head>
<body>
Top
ScrollDown
Scroll Up
Bottom
<div id="display">
<b>LAYER CONTENTS</b>
<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text
<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text
<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>Dummy Text
<P>Dummy Text<P>Dummy Text<P>Dummy Text<P>End
</div>
</body>
</html>
i want to do something like this so it will make a loop:
function scrollDown(id){
clearTimeout(timerDown)
document.getElementById(id).scrollTop+=scrollStep
if (document.getElementById(id).scrollTop=document.getElementById(id).scrollHeight){
document.getElementById(id).scrollTop=0
}
}
<div id="display" onmouseout="scrollDown('display')" onmouseover="stopMe()">
and under this div its the messages
Try window.onload around your code you want to run at page load.
window.onload = function() { ...yourcode... };
You can try to wrap your code into the following way into the
windows.load=function(){//Your Code}
Since the script is loading before the document is loaded
<script type="text/javascript">
window.load = function(){
scrollStep=1
timerUp=""
timerDown=""
function toTop(id){
document.getElementById(id).scrollTop=0
}
function scrollDivDown(id){
clearTimeout(timerDown)
document.getElementById(id).scrollTop+=scrollStep
timerDown=setTimeout("scrollDivDown('"+id+"')",10)
}
function scrollDivUp(id){
clearTimeout(timerUp)
document.getElementById(id).scrollTop-=scrollStep
timerUp=setTimeout("scrollDivUp('"+id+"')",10)
}
function toBottom(id){
document.getElementById(id).scrollTop=document.getElementById(id).scrollHeight
}
function stopMe(){
clearTimeout(timerDown)
clearTimeout(timerUp)
}
};
</script>
OK here i found a solution that worked perfect!!
http://jscroller2.markusbordihn.de/
Related
I'm working on a game I want that when I press the keyboard button once, jump on my gaming character until the given loop condition is incorrect. But now the problem is that my character is jumping as well as pressing the keyboard button.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--AnimationUsingKeyboard.html-->
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xml; charset=utf-8"/>
<title>AnimationUsingKeyboard.html</title>
<link rel="Stylesheet" type="text/css" href=""/>
<script type="text/javascript" src="AnimationUsingKeyboard.js">
//<![CDATA[
//]]>
</script>
</head>
<body onload="init()">
<h1>Animation Using Keyboard Input</h1>
<div id="outline" style="position:absolute;
width:50px;
height:50px;
top:100px;
left:5px;">
<img id="krizen" src="krizen1.png" width="50px" height="50px" alt="krizen.png"/>
</div>
<div id="output">
</div>
</body>
</html>
var imgList=new Array("krizen1.png",
"krizen2.png",
"krizen3.png",
"krizen4.png",
"krizen5.png",
"krizen6.png",
"krizen7.png",
"krizen8.png"
);
var outline;
var krizen;
var jump;
function init(){
outline=document.getElementById("outline");
krizen=document.getElementById("krizen");
document.onkeydown=keyListner;
}
function keyListner(e){
if(!e){
e=window.event;
}//end if
if(e.keyCode==38){
jump=parseInt(outline.style.top);
while(jump!=70){
outline.style.top=jump+"px";
jump-=5;
}//end while
}//end if
}//end keyListner function
You could try to set a variable; lets say Pressed to 1 if the key is pressed, and if its released it turns Pressed to 0 and the loop checks if Pressed===1
I'm trying to make web app that will allow user to drag div's in iframe element.
This is my current code in index.html :
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
function onDrag(event){
event.dataTransfer.setData('Text', 'Some content');
}
</script>
<div id="items">
<ul>
<li><div draggable="true" ondrag="onDrag(event)">Content1</div></li>
<li><div draggable="true" ondrag="onDrag(event)">Content2</div></li>
</ul>
</div>
<iframe id="box" src="box.html">
</iframe>
And here is my code from box.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script>
function onDrop(event){
event.target.innerHTML += event.dataTransfer.getData('Text');
alert('Ok!');
}
function onDragOver(ev){
ev.preventDefault();
}
</script>
</head>
<body ondragover="onDragOver(event)" ondrop="onDrop(event)">
</body>
</html>
Drag works, and I even get that alert from onDrop function, but the event.dataTransfer.getData('Text') is returning empty string, and I don't know why.
Thanks in advance
You should set drag data in the dragstart event, not the drag event: http://jsfiddle.net/SVtzK/1/.
I am having 2 issues with my code:
I want to limit the effects of the script to the div <div id="photo">
How can I make a sub layer to the script so that all the elements in the page don`t change position when the animation is triggered.
This is my code hope you can help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.selected { border-style:solid; border-width:10px; border-color:#C00; margin:auto; z-index:2;}
#cret {
position:relative;
z-index:3;
border-style:solid; border-width:5px; border-color:#000000;
padding: 10px 10px 10px 10px;
margin:auto;
width:620px;
height:420px;
}
img {
position:static;
z-index:1;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"/></script>
</head>
<body>
<script type="text/javascript"/>
$(document).ready(function() {
$('img').width('10%').height('10%');
$('img').on("click", function() {
$(this).wrap('<div id="cret"/>');
$(this).animate({width:'600px', height:'400px'}).addClass("selected");
});
$(document).on("click", function(){
$("img").unwrap();
});
$('img').click(function(){ return false; });
$('#cret').click(function(){ return false; });
$(document).on("click", function(){
$('img').animate({width:'10%', height:'10%'}).removeClass("selected");
});
$('img').click(function(){ return false; });
$('#cret').click(function(){ return false; });
});
</script>
<div id="photo">
<img src="image source"/>
<img src="image source"/>
</div>
</body>
</html>
To limit the scope of the selector, you can specify a more precise jquery selector
instead of $('img') $('#photo img'); it will affect only img present in photo id div.
you should review your selector and the animate will be more effectively use in correct one...
like put your animate only on img.selected.
Hope it helps http://api.jquery.com/category/selectors/
I am trying to position my Div wherever the user clicks on my Image.
test is my Div, and myimg is my image.
Here is my JS:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$("#myimg").click(function(e){
$("#test").show(2000);
$("#test").offset({left:e.pageX,top:e.pageY});
})
})
</script>
However that does not work. Can anyone tell me what I am doing wrong?
Edit: Sorry, I forgot to mention that the Div wont show up, if I include the offset line, if I dont, it shows, but not at the right position.
Here is the full code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xSky Software - Most likely the only software on Clickbank that exists.</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='video/jwplayer.js'></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myimg").click(function(e){
$("#test").show(2000);
$("#test").offset({left:e.pageX,top:e.pageY});
})
})
</script>
</head>
<body>
<!--Header and Logo-->
<div id="header">
<div id='mainvid'>This text will be replaced</div>
<script type='text/javascript'>
jwplayer('mainvid').setup({
'flashplayer': 'video/player.swf',
'file': 'video/Untitled1.mp4',
'controlbar': 'none',
'frontcolor': 'FFFFFF',
'lightcolor': 'FFFFFF',
'screencolor': 'FFFFFF',
'autostart': 'true',
'width': '709',
'height': '422'
});
</script>
</div>
</div>
<div id="test" style="width:100px; position:absolute; display:none; height:100px; border:#093 solid 2px; background:#0C6;">
Teeest
</div>
<!--Content-->
<div id="content">
<center><img src="Images/downloadbutton.png" id="myimg" /></center>
<br />
<div class="text">
OH YEAH!
</div>
</div>
<!--Footer-->
<div id="footer">
</div>
</body>
</html>
I think you probably want
$("#test").css({position:"absolute", left:e.pageX,top:e.pageY});
instead of
$("#test").offset({left:e.pageX,top:e.pageY});
It seems to work fine. I have set up a JSFiddle for you:
http://jsfiddle.net/JPvya/
Click on the image and the test div moves. The only change is using the $ short notation for JQuery instead of typing "JQuery" which, by the way is probably case sensetive and causing the problem!
This works well enough for me, so your problem is likely elsewhere.
HTML
<img id="myimg" src="http://placekitten.com/200/300"/>
<span id="test">This is a test</span>
CSS
#test {
display: none;
color: white;
}
JavaScript
$(function() {
$("#myimg").click(function(e) {
var o = {
left: e.pageX,
top: e.pageY
};
$("#test").show(2000).offset(o);
});
});
http://jsfiddle.net/mattball/haFMn/
The JavaScript code window.print() can print the current HTML page.
If I have a div in an HTML page (for example, a page rendered from an ASP.NET MVC view), then I want to print the div only.
Is there any jQuery unobtrusive JavaScript or normal JavaScript code to implement this request?
Making it more clear, suppose the rendered HTML page is like:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head" runat="server">
<title>
<asp:ContentPlaceHolder runat="server" ID="TitleContent" />
</title>
</head>
<body>
<div id="div1" class="div1">....</div>
<div id="div2" class="div2">....</div>
<div id="div3" class="div3">....</div>
<div id="div4" class="div4">....</div>
<div id="div4" class="div4">....</div>
<p>
<input id="btnSubmit" type="submit" value="Print" onclick="divPrint();" />
</p>
</body>
</html>
Then I want to click on the Print button, only printing div3.
I would go about it somewhat like this:
<html>
<head>
<title>Print Test Page</title>
<script>
printDivCSS = new String ('<link href="myprintstyle.css" rel="stylesheet" type="text/css">')
function printDiv(divId) {
window.frames["print_frame"].document.body.innerHTML=printDivCSS + document.getElementById(divId).innerHTML;
window.frames["print_frame"].window.focus();
window.frames["print_frame"].window.print();
}
</script>
</head>
<body>
<h1><b><center>This is a test page for printing</center></b><hr color=#00cc00 width=95%></h1>
<b>Div 1:</b> Print<br>
<div id="div1">This is the div1's print output</div>
<br><br>
<b>Div 2:</b> Print<br>
<div id="div2">This is the div2's print output</div>
<br><br>
<b>Div 3:</b> Print<br>
<div id="div3">This is the div3's print output</div>
<iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>
</body>
</html>
Along the same lines as some of the suggestions you would need to do at least the following:
Load some CSS dynamically through JavaScript
Craft some print-specific CSS rules
Apply your fancy CSS rules through JavaScript
An example CSS could be as simple as this:
#media print {
body * {
display:none;
}
body .printable {
display:block;
}
}
Your JavaScript would then only need to apply the "printable" class to your target div and it will be the only thing visible (as long as there are no other conflicting CSS rules -- a separate exercise) when printing happens.
<script type="text/javascript">
function divPrint() {
// Some logic determines which div should be printed...
// This example uses div3.
$("#div3").addClass("printable");
window.print();
}
</script>
You may want to optionally remove the class from the target after printing has occurred, and / or remove the dynamically-added CSS after printing has occurred.
Below is a full working example, the only difference is that the print CSS is not loaded dynamically. If you want it to really be unobtrusive then you will need to load the CSS dynamically like in this answer.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Print Portion Example</title>
<style type="text/css">
#media print {
body * {
display:none;
}
body .printable {
display:block;
}
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<h1>Print Section Example</h1>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div id="div4">Div 4</div>
<div id="div5">Div 5</div>
<div id="div6">Div 6</div>
<p><input id="btnSubmit" type="submit" value="Print" onclick="divPrint();" /></p>
<script type="text/javascript">
function divPrint() {
// Some logic determines which div should be printed...
// This example uses div3.
$("#div3").addClass("printable");
window.print();
}
</script>
</body>
</html>
Try this JavaScript code:
function printout() {
var newWindow = window.open();
newWindow.document.write(document.getElementById("output").innerHTML);
newWindow.print();
}
<div id="invocieContainer">
<div class="row">
...Your html Page content here....
</div>
</div>
<script src="/Scripts/printThis.js"></script>
<script>
$(document).on("click", "#btnPrint", function(e) {
e.preventDefault();
e.stopPropagation();
$("#invocieContainer").printThis({
debug: false, // show the iframe for debugging
importCSS: true, // import page CSS
importStyle: true, // import style tags
printContainer: true, // grab outer container as well as the contents of the selector
loadCSS: "/Content/bootstrap.min.css", // path to additional css file - us an array [] for multiple
pageTitle: "", // add title to print page
removeInline: false, // remove all inline styles from print elements
printDelay: 333, // variable print delay; depending on complexity a higher value may be necessary
header: null, // prefix to html
formValues: true // preserve input/form values
});
});
</script>
For printThis.js souce code, copy and pase below URL in new tab
https://raw.githubusercontent.com/jasonday/printThis/master/printThis.js
You could use a print stylesheet, but this will affect all print functions.
You could try having a print stylesheet externalally, and it is included via JavaScript when a button is pressed, and then call window.print(), then after that remove it.