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>
Related
I'm trying to call a java script function on my mouse over function for an image, however; the debugger says "function isn't defined." I don't understand why I'm getting this error. The java script and tags look to be correct and it seems like I'm using the correct syntax to call the function.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Chapter11-1</title>
<script type="text/javascipt">
function overButton(img) {
buttonImg="chapter11-1"+img+"_over.gif"
document.getElementById(img).src=buttonImg
}
function downButton(img) {
buttonImg="chapter11-1"+img+"_down.gif"
document.getElementById(img).src=buttonImg
}
function upButton(img) {
buttonImg="chapter11-1"+img+"_up.gif"
document.getElementById(img).src=buttonImg
}
</script>
</head>
<body>
<div id="banner_logo"><img src="chapter11-1banner.jpg" width="745" height="150" alt="banner" id="banner" /></div>
<table class="centerItems">
<tr>
<td>
<a href="#">
<img src="chapter11-1home_up.gif" id="home" alt="home" onMouseOver="overButton('home')" onMouseDown="downButton('home')" onMouseOut="upButton('home')" onMouseUp="upButton('home')" /></a>
</td>
</body>
</html>
It doesn't work because you spelled "javascript" wrong.
Change this
<script type="text/javascipt">
to
<script type="text/javascript">
or just
<script>
Otherwise it's assumed that the script tag is something other than javascript
And use lowercase for the events, preferably you'd use addEventListener
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Chapter11-1</title>
</head>
<body>
<div id="banner_logo"><img src="chapter11-1banner.jpg" width="745" height="150" alt="banner" id="banner" /></div>
<table class="centerItems">
<tr>
<td>
<a href="#">
<img src="chapter11-1home_up.gif" id="home" alt="home" onMouseOver="overButton('home')" onMouseDown="downButton('home')" onMouseOut="upButton('home')" onMouseUp="upButton('home')" /></a>
</td>
</tr>
</table>
</body>
<script>
function overButton(img) {
buttonImg="chapter11-1"+img+"_over.gif";
document.getElementById(img).src=buttonImg;
}
function downButton(img) {
buttonImg="chapter11-1"+img+"_down.gif";
document.getElementById(img).src=buttonImg;
}
function upButton(img) {
buttonImg="chapter11-1"+img+"_up.gif";
document.getElementById(img).src=buttonImg;
}
</script>
</html>
In my code i am trying to hide a div element which contains a image, but when i run the code i get - ReferenceError: jQuery is not defined
})( jQuery ); in the file jquery-ui.js (line 314). My code is given below
<!DOCTYPE html>
<html>
<head>
<title>Sliding a div</title>
<script type="text/javascript" src="plugin/ui/jquery-ui.js"></script>
<script type="text/javascript" src="plugin/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#1').click(function(){
console.log("i am inside");
$('#element').hide('slide',{direction:'left'},1000);
});
});
</script>
</head>
<body>
<div id="headder" style="width: 1300px; height: 100px">
<h1>Slide the div</h1>
</div>
<div id="element" style="width: 600px; height: 400px; border: 2px solid red; position: relative">
<img src="images/aa.jpg" width="600" height="400">
</div>
<div id="control" style="position: relative">
<input type="button" id="1" value="PRESS">
</div>
</body>
</html>
Please let me know the reason behind this.
You need to reference jQuery before jQuery UI:
<script type="text/javascript" src="plugin/jquery-1.9.1.js"></script>
<script type="text/javascript" src="plugin/ui/jquery-ui.js"></script>
Placing a tab container on titlepane looks weird in any browser but if I use the dojo v1.6 it appears perfectly. Am I doing something wrong here while porting code to 1.8.4 Or something broken in later versions?
Please change the dojo version in this code and see the difference.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>
</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/**1.6**/dijit/themes/claro/claro.css">
<style type="text/css">
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{
padding:0;
}
</style>
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};
</script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.TitlePane");
dojo.require("dijit.layout.TabContainer");
//require(["dojo/dnd/move", "dojo/_base/declare", "dojo/dom-construct", "dijit/layout/TabContainer", "dijit/TitlePane", "dijit/layout/BorderContainer", "dojox/layout/ExpandoPane", "dojo/domReady!"]);
</script>
</head>
<body class="claro">
<div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%;height:100%;margin:0;">
<div dojotype="dijit.layout.ContentPane" region="center" style="width:500px;height:500px; border:1px solid #000;padding:0;">
<div style="position:absolute;width:500px;height:500px; left:30px; top:10px; z-Index:999;">
<div id="titlepane" dojoType="dijit.TitlePane" title="Show Tabs" closable="false" open="false">
<div id="tabContainer" dojoType="dijit.layout.TabContainer" style="width:100%; height:100%">
<div id="one" dojoType="dijit.layout.ContentPane" title="Tab 1" selected="true">
Tab 1 content
</div>
<div id="two" dojoType="dijit.layout.ContentPane" title="Tab 2">
Tab 2 content
</div>
<div id="three" dojoType="dijit.layout.ContentPane" title="Tab 3">
Tab 3 content
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Two problems. First, the code has TitlePane inside of a BorderContainer, but TitlePane is not designed to reside inside of layout widgets:
It extends ContentPane but since it isn’t used inside other layout widgets
Second, as written, the TabContainer inside the title pane needs an absolute height, not relative. You can get away with a relative height for TabContainers inside of BorderContainers (or other layout widgets), because BorderContainer calculates the absolute height for you. Since TitlePane does not provide that calculation, you must specify an absolute height...
or, you can tell TabContainer not to do its own layout with "doLayout=false":
<!DOCTYPE html>
<html>
<head>
<link href='//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css' rel='stylesheet' type='text/css' />
<script src='//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js'></script>
</head>
<body class='claro'>
<div data-dojo-id='titlePane' data-dojo-type='dijit/TitlePane' data-dojo-props='region:"trailing"'>
<div data-dojo-id='tabContainer' data-dojo-type='dijit/layout/TabContainer' data-dojo-props='doLayout:false'>
<div data-dojo-type='dijit/layout/ContentPane' data-dojo-props='title:"Tab 1"'>Hi!</div>
<div data-dojo-type='dijit/layout/ContentPane' data-dojo-props='title:"Tab 2"'>There!</div>
<div>
</div>
<script type='text/javascript'>
require(['dojo/ready', 'dojo/parser'], function (ready, Parser) {
ready(function () {
Parser.parse().then(function () {
});
});
});
</script>
</body>
</html>
You can replace the data-dojo-props on the TabContainer with style='height:100px;' and get a similar effect. The only difference is that doLayout false uses the auto height from the contained content, while height:100px gives you a static height.
Thanks ALOT guys! I've got it working now, thank you!
I have a hopefully easy question:
This: http://jsfiddle.net/gSAjV/2/
is what I want to achieve, but I can't seem to get it working.
I'm all new to javascript, so I'm not sure how to properly put the script in the html document.
I have tried the <script type="text/javascript"> and others, but it just doesn't work.
So i wondered if anyone would take the time to put it in a html document and get it working, and ofcourse posting the entire code. I would be very greatfull!
my doc:
<html>
<head>
<style>
.parentDiv{
border:1px solid black;
padding:10px;
width: 80px;
margin:5px;
display:relative;
}
.childDiv{
border:1px solid blue;
height: 50px;
margin:10px;
}
</style>
<script type='text/javascript'>
$('.childDiv').click(function(){
$(this)
.css('background-color','#00ff66')
.siblings()
.css('background-color','#ffffff');
});
</script>
</head>
<body>
<div id="divParent1" class="parentDiv">
Group 1
<div id="child1" class="childDiv">
Child 1
</div>
<div id="child2" class="childDiv">
Child 2
</div>
</div>
<div id="divParent2" class="parentDiv">
Group 2
<div id="child1" class="childDiv">
Child 1
</div>
<div id="child2" class="childDiv">
Child 2
</div>
</div>
</body>
</html>
Put this somewhere in your html file:
<script type="text/javascript">
$(document).ready(function() {
$('.childDiv').click(function(){
$(this).parent().find('.childDiv').css('background-color','#ffffff');
$(this).css('background-color','#ff0000');
});
});
</script>
You can put it more or less anywhere, but just before the </body> tag would be a good place.
And as #MarkK has rightly pointed out, you need to reference the jQuery library itself.
This goes between <head> and </head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
In jsfiddle, you can right-click on the Results pane and View Source. This will give you the exact html that produces the result.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.parentDiv{
border:1px solid black;
padding:10px;
width: 80px;
margin:5px;
display:relative;
}
.childDiv{
border:1px solid blue;
height: 50px;
margin:10px;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('.childDiv').click(function(){
$(this).parent().find('.childDiv').css('background-color','#ffffff');
$(this).css('background-color','#ff0000');
});
});//]]>
</script>
</head>
<body>
<div id="divParent1" class="parentDiv">
Group 1
<div id="child1" class="childDiv">
Child 1
</div>
<div id="child2" class="childDiv">
Child 2
</div>
</div>
<div id="divParent2" class="parentDiv">
Group 2
<div id="child1" class="childDiv">
Child 1
</div>
<div id="child2" class="childDiv">
Child 2
</div>
</div>
</body>
</html>
You just need to import jQuery (the library that contains the $ functions). This is simple, just add
<script src="http.//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
to your HTML, before your other script.
<html>
<head>
<!--inclue jquery - change the path 'src'. the default is jquery.js is on the same location of this html-->
<script type="text/javascript" src="jquery.js"></script>
<sript type="text/javascript">
jQuery().ready(function($){
$('.childDiv').click(function(){
$(this).parent().find('.childDiv').css('background-color','#ffffff');
$(this).css('background-color','#ff0000');
});
});
</script>
</head>
<body>
<!--the content paste your html here-->
</body>
</html>
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/