Simple dojo example Error: this.domNode is null - javascript

Referring to jsFiddle's [code][1] by CSWING,
why does this indicate "TypeError: this.domNode is null (26 out of range 15) in dojo.js".
Here is my code copied from CSWING, for learning and testing,
<!DOCTYPE html>
<html>
<head>
<style>
html, body /*standard layout for every dojo webpage*/
{
width: 100%;
height: 100%;
padding: 0px;
margin: 5px;
overflow: hidden;/*no scrollbar used*/
}
#standby {
position: absolute;
top: 50%;
left: 50%;
width:32px;
height:32px;
margin-top: -16px;
margin-left: -16px;
/*
width: 300px;
height: 300px;
background-color: #e7e7e7;
*/
}
</style>
<link rel="stylesheet" href="../dojo1_8/dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="../dojo1_8/dojo/dojo.js"></script>
</head>
<body class="claro">
<div id="standby">
<div id="btn" data-dojo-type="dijit.form.Button" data-dojo-props="label:
Go'"></div>
</div>
<script>
require(["dojox/widget/Standby","dijit/form/Button",
"dojo/store/Memory",'dijit/form/ComboBox',
"dojo/on", "dojo/domReady!"],
function(Standby, Button, Memory, on, ComboBox)
{
var standby = new Standby
({
id: "standbyObj",
target: "btn",
color: "transparent",
zindex: "auto",
duration: "1000"
});
dojo.body().appendChild(standby.domNode);
standby.startup();
on(dojo.byId('btn'), 'click', function()
{
standby.show();
//simulate a request. hide the timeout in 5 seconds
setTimeout(function()
{
standby.hide();
}, 5000);
});
});
</script>
</body>
</html>
Please advise.
Thanks
clement
[1]: http://jsfiddle.net/cswing/253Te/

Looking at my original fiddle, I believe that
dojo.byId('btn')
should be
dijit.byId('btn')
If that doesn't solve your problem, then I would set firebug to Break on Errors. When the error occurs, look at the stack trace to find more information about where the error is coming from and what might be causing it.

Related

Function on resize doesn't work

Hello I have problem with really easy script. It should change class if under 768 px of window width but it just doesn't work. I have no clue why. I dont want to use media queries in this in this case.
Here's code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ez</title>
<style>
.aside {
float: left;
height: 1000px;
width: 250px;
background-color: grey;
}
.sidebar {
position: absolute;
top: 0;
left: -250px;
}
</style>
</head>
<body style="height: 2000px">
<aside class="aside" id="aside"></aside>
<main style="float: left; height: 1000px; width: 70%; background-color: black;"></main>
<script>
var elm = document.getElementById("aside");
function change() {
var w = window.innerWidth;
if(w<768) {
elm.className = "sidebar";
} else {
elm.className = "aside";
}
}
window.addEventListener("resize", change);
</script>
</body>
</html>
I started your script. For 768px and more there is class 'aside', for 767px and less class 'sidebar'. So where is the problem?
If you open page on width less than 768 your script won't be working correct. You have to add it to event onload too

Manipulate connections between elements dropped on canvas

Here I have been able to drop elements onto a canvas and create connections between them. But every time I drag a dropped element within the canvas, the anchors do not move along with the dragged element. Instead when I try to create a connection from the isolated anchor to another element it immediately re-positions itself with its parent element. This is one issue and I would also like to delete the anchors/ connections whenever its parent element is deleted.
<!doctype html>
<html>
<head>
<script src="../lib/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="../lib/jquery-ui.min.js"></script>
<script src="../lib/jquery.jsPlumb-1.6.4-min.js"></script>
<style>
.chevron-toolbox{
position: absolute;
width: 72px;
height: 80px;
background-color: powderblue;
background-image: url("../dist/img/bigdot.png");
border: solid 3px red;
}
#dropArea{
cursor: pointer;
border: solid 1px gray;
width: 800px;
margin-left: 80px;
height: 400px;
position: relative;
overflow-x: scroll;
overflow-y: scroll;
}
.chevron {
position:absolute;
cursor:pointer;
width: 72px;
height: 80px;
background-color: powderblue;
background-image: url("../dist/img/bigdot.png");
}
</style>
</head>
<body>
<div class="chevron-toolbox" id="cId">
</div>
<div id="dropArea">
</div>
<button id="go">Double Click Me</button>
<script>
jsPlumb.ready(function(e)
{
jsPlumb.setContainer($('#dropArea'));
$(".chevron-toolbox").draggable
({
helper : 'clone',
cursor : 'pointer',
tolerance : 'fit',
revert : true
});
$("#dropArea").droppable
({
accept : '.chevron-toolbox',
containment : 'dropArea',
drop : function (e, ui) {
droppedElement = ui.helper.clone();
ui.helper.remove();
$(droppedElement).removeAttr("class");
jsPlumb.repaint(ui.helper);
$(droppedElement).addClass("chevron");
$(droppedElement).draggable({containment: "dropArea"});
$(droppedElement).appendTo('#dropArea');
setId(droppedElement);
var droppedId = $(droppedElement).attr('id');
var common = {
isSource:true,
isTarget:true,
connector: ["Flowchart"],
};
jsPlumb.addEndpoint(droppedId, {
anchors:["Right"]
}, common);
jsPlumb.addEndpoint(droppedId, {
anchors:["Left"]
}, common);
alert(droppedId);
//Delete an element on double click
var dataToPass = {msg: "Confirm deletion of Item"};
$(droppedElement).dblclick(dataToPass, function(event) {
alert(event.data.msg);
$(this).remove();
});
}
});
//Set a unique ID for each dropped Element
var indexer = 0;
function setId(element){
indexer++;
element.attr("id",indexer);
}
});
</script>
</body>
</html>
In order to properly manipulate the connections, you can use the connect method in jsPlumb placing anchors at desired points.
jsPlumb.connect({
source:'window2',
target:'window3',
paintStyle:{lineWidth:8, strokeStyle:'rgb(189,11,11 )'},
anchors:["Bottom", "Top"],
endpoint:"Rectangle"
});
This is merely an example. Following this pattern in your implementation will be useful when it comes to accessing details regarding those connections and deleting the connections alongside the elements

Jquery: show IMG on click

Preview of how it should be: https://www.youtube.com/embed/8qKRf0cg3Co
As in the video, I have to click on the img to get a large view of the img under it.
So far this is my code:
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JQUERY</title>
<script src="jquery/jquery-2.1.1.min.js"></script></head>
<body>
<center>
<div id="wrapper">
<div id="nav">
<div id="overbalk"></div>
<img src="images/foto_01.png" align="top" class="foto" />
<img src="images/foto_02.png" align="top" class="foto" />
<img src="images/foto_03.png" align="top" class="foto" />
<img src="images/foto_04.png" align="top" class="foto" />
</div>
<div id="content">
<img src="images/foto_01.png" align="top" class="slide_foto" />
</div>
</div>
</center>
</body>
</html>
CSS:
<style>
body {
padding: 0;
margin: 0;
background-color: black;
}
#nav {
width: 600px;
margin: 0px auto;
}
#overbalk {
width: 600px;
height: 30px;
position: absolute;
background-color: black;
}
.foto {
width: 75px;
height: 75px;
margin-top: -20px;
border: 1px solid black;
}
.foto:hover {
cursor: pointer;
}
#content {
position: absolute;
top: 50px;
z-index: -2;
width: 100%;
}
.slide_foto {
margin-left:-3200px;
}
</style>
JS:
$(document).ready(function (){
$('.foto').mouseenter(function () {
$(this).animate({marginTop: '+=50'}, 200);
});
$('.foto').mouseleave(function (){
$(this).animate({marginTop: '-=50'}, 200);
});
$('.foto').click(function () {
$(this).next('#content').show();
});
});
I also tried this:
$('.foto').on('click', function () {
$('#content').html(nieuwe_foto).show();
var nieuwe_foto = $(this).attr('src');
$('.slide_foto').attr('src', nieuwe_foto);
}
None of this worked, and got a little bit stuck, the images aren't showing below the small images.
You need to make 2 changes:
Remove this style class from <style>
.slide_foto {
margin-left:-3200px;
}
Make this change in your onclick handler
$('.foto').on('click', function () {
var nieuwe_foto = $(this).prop('src');
$('.slide_foto').prop('src', nieuwe_foto);
});
I have made a working fiddle with sample images https://jsfiddle.net/sachin_puthran/c2qgjpj1/
The following doesn't do anything since nieuwe_foto is undefined until the next line and div#content is already visible .show() doesn't do anything either.
$('#content').html(nieuwe_foto).show();
The .show() isn't what you're looking for. It will essentially "unhide" an element. So if an element has a display: none style then .show() will restore the initial display style. See the docs.
You're closer with your second attempt though. All you want to do in the $('.foto').click function is set the src of the .slide_foto element to what is currently in the src of the this object.

CSS <div> Wrapping error

I have <div> called container which are wrapping couple of <div>s called block and I used a jquery plugin called columnizer to split the block into column.The problem is , I can't seem to make the <div> called container wrap the blocks which are going over the div .I also got picture to demonstrate my problem.
I tried alot of solutions like , removing the container width but it doesn't work because the jquery plugyin called columnizier need a width i think.
My html
<script type = "text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type = "text/javascript" src ="https://raw.github.com/adamwulf/Columnizer-jQuery-Plugin/master/src/jquery.columnizer.js"></script>
<script type="text/javascript">
$(function(){
$('h1').addClass('dontend');
$('.wide').columnize({
width : 100,
height : 300
});
});
</script>
<script style="display:none" type="text/javascript">var Mint=new Object();Mint.save=function()
{var now=new Date();var debug=false;if(window.location.hash=='#Mint:Debug'){debug=true;};var path='http://welcome.totheinter.net/mint/?record&key=6a56784248357a3735323031363633316663796c526d';path=path.replace(/^https?:/,window.location.protocol);for(var developer in this)
{for(var plugin in this[developer])
{if(this[developer][plugin]&&this[developer][plugin].onsave)
{path+=this[developer][plugin].onsave();};};};path+='&'+now.getTime();if(debug){window.open(path+'&debug&errors','MintLiveDebug'+now.getTime());return;};var ie=/*#cc_on!#*/0;if(!ie&&document.getElementsByTagName&&(document.createElementNS||document.createElement))
{var tag=(document.createElementNS)?document.createElementNS('http://www.w3.org/1999/xhtml','script'):document.createElement('script');tag.type='text/javascript';tag.src=path+'&serve_js';document.getElementsByTagName('head')[0].appendChild(tag);}
else if(document.write)
{document.write('<'+'script type="text/javascript" src="'+path+'&serve_js"><'+'/script>');};};if(!Mint.SI){Mint.SI=new Object();}
Mint.SI.Referrer={onsave:function()
{var encoded=0;if(typeof Mint_SI_DocumentTitle=='undefined'){Mint_SI_DocumentTitle=document.title;}
else{encoded=1;};var referer=(window.decodeURI)?window.decodeURI(document.referrer):document.referrer;var resource=(window.decodeURI)?window.decodeURI(document.URL):document.URL;return '&referer='+escape(referer)+'&resource='+escape(resource)+'&resource_title='+escape(Mint_SI_DocumentTitle)+'&resource_title_encoded='+encoded;}};Mint.save();</script>
<!DOCTYPE html>
<meta charset="utf-8" />
<link rel="stylesheet" href="b.css">
<div class="container"> <div class="wide">
<div class="block"></div><br>
<div class="block"></div><br>
<div class="block"></div><br>
</div></div>
My css
.container {
background-color: #ED8713;
height: 300px;
width: 200px;
}
.block {
width: 50px;
height:250px;
background-color: #C31212;
margin: 10px;
margin-top: 5px;
}
Here it is working: http://jsfiddle.net/gRxdF/3/
CSS:
.container {
background-color: #ED8713;
height: 300px;
float: left;
}
.block {
display: inline-block;
height: 250px;
background-color: #C31212;
margin: 10px;
margin-top: 5px;
}
HTML - I removed the <br>tags.

Stopping Effect.ScrollTo() while it's scrolling?

Yeah, basically I have this:
Effect.ScrollTo("bottom", { duration: 5.0 });
So what I want is to stop this effect while it's scrolling whenever I want to.
Any help?
var scrollEffect = Effect.ScrollTo("bottom", { duration: 5.0 });
...
scrollEffect.cancel();
This code below works perfectly for me:
<html>
<head>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<style type="text/css" media="screen">
body { font-size: 30px; }
#destination { margin-top: 1400px; }
#start { position: fixed; top: 10px; left: 20px;}
#stop { position: fixed; top: 50px; left: 20px;}
</style>
<script type="text/javascript" charset="utf-8">
function startEffect() {
scrollEffect = Effect.ScrollTo("destination", { duration: 8.0 }); return false;
}
function stopEffect() {
scrollEffect.cancel(); return false;
}
</script>
</head>
<body>
<a id="start" href="#" onclick="return startEffect();">Start Effect</a>
<a id="stop" href="#" onclick="return stopEffect();">Stop Effect</a>
<p id="destination">Scroll Destination</p>
</body>
</html>
What I currently have working currently is having a div as follows:
<div id="pausepos" style="position:absolute;"></div>
Then having the JavaScript cancel the scrolling and move it back to where the original position was:
fallingPosTempArr = $("thetop").viewportOffset();
fallingPosTemp = -1*fallingPosTempArr[1];
$("pausepos").setStyle({
"top" : fallingPosTemp + 'px'
});
scrollEffect.cancel();
setTimeout(function () { Effect.ScrollTo("pausepos", { duration: 0.0 }); }, 10);
It works, but on slower browsers you can see how the page jumps back to the top and then back again.

Categories