Currently trying to create a website on a static server. Out of JSON-code it should create the navigation in one frame and in a right sideframe a "previous" and "next" button according to the current position in the hierarchy.
I think the problem is that my "global variables" chap and subchap (which you are gonna find in the code below) cannot be accessed over all the 3 frames. I didn't know a way to simplify the problem, I'm sorry for the large post.
I got all the files on my server if you want to see it live: http://fabitosh.bplaced.net/SkriptET/start.html
Files: http://fabitosh.bplaced.net/SkriptET/
files.json isn't used in the code but clearer to look at than the implementation in json.js
At first the basic structure:
index.html
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript" src="json.js"></script>
<!-- <link rel="stylesheet" href="style.css"> -->
</head>
<frameset cols="300,*,300">
<frame src="navigation.html" name="navigation"/>
<frame src="elladq.html" name="content"/>
<frame src="sidebar.html" name="rightsidebar"/>
</frameset>
</html>
navigation.html
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="json.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<base target="content">
</head>
<body>
<div id="left">
Die Navigation<br/>
</div>
</body>
</html>
rightsidebar.html
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="json.js"></script>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<div id="right">
Die Sidebar <br/>
<script type="text/javascript">
alert("I reloaded!");
</script>
</div>
</body>
</html>
Now it's getting a bit complicated. The following parts are out of javascript.js. I'm gonna try to explain my thoughts behind the different parts.
The variables chap and subchap are thought as kind of a memory of the current position in the hierarchy. Depending on what link you click on they should adapt. The navigation-frame should never reload, so I hope they can kinda be saved there. (Big question mark)
$(document).ready(function(){ // DOM needs to exist in order to be able to add stuff in there
//JSON-Data coming out of json.js which also converts it in a way to be accessed by data.chapter[chap].subchapter[subchap]
var chap = 1; //position in the array of the currently open chapter
var subchap = 0; //position in the array of the currently open subchapter
The following part kinda works. The navigation is created according to the JSON-structure. When pressing on a link, the right frame reloads (at least on the ftp-Server, it doesn't locally).
When clicking on a link the variables chap and subchap should take the values of the element number in the array. (-> onclick='..')
//********* Create Navigation out of JSON File *********
for(var i = 0; i < data.chapter.length; i++) {
$('#left').append("<a href='"+data.chapter[i].url+"' target='content'>"+data.chapter[i].title+"</a></b><ul>");
for(var j = 0; j < data.chapter[i].subchapter.length; j++) {
$('#left').append("<li><a href='"+data.chapter[i].subchapter[j].url+"' onclick='chap="+i+"; subchap="+j+"; parent.rightsidebar.location.reload();'>"+data.chapter[i].subchapter[j].title+"</a></li>"); // target="content"; defined in sidebar.html header
}
$('#left').append("</ul>");
}
This is what yet isn't working. The variables chap and subchap do not have the values which I want them to have.
When clicking on the "Next:" link, the subchap should increase by one.
//********* Previous Page / Next Page *********
if (subchap>0){
$('#right').append("<a href='"+data.chapter[chap].subchapter[subchap-1].url+"' target='content' onclick='subchap-=1; parent.rightsidebar.location.reload();'> Previous: "+data.chapter[chap].subchapter[subchap-1].title+"</a><br/>");
} if (subchap<data.chapter[chap].subchapter.length) {
$('#right').append("<a href='>"+data.chapter[chap].subchapter[subchap+1].url+"' target='content' onclick='subchap+=1; parent.rightsidebar.location.reload();'> Next: "+data.chapter[chap].subchapter[subchap+1].title+"</a><br/>");
}
});
In an iframe you can access window.parent
So...
in your main window:
window.cake = "Tasty!"
then in your iframe:
var isTasty = window.parent.cake
Hope this helped!
I believe the reason your chap and subchap variables are not incrementing or decrementing is because of the way you assigned the onclick events. By inlining the javascript like that, you have to have subchap and chap declared at the global level.
Move
var chap = 1;
var subchap = 0;
to the line before
$(document).ready(function(){
so it will look like the following:
var chap = 1;
var subchap = 0;
$(document).ready(function(){
//ready code here
});
You may also want to consider using the jquery .on("click", function(){}).
for(var i = 0; i < data.chapter.length; i++) {
$('#left').append("<a href='"+data.chapter[i].url+"' target='content'>"+data.chapter[i].title+"</a></b>");
var subChapUl = $('<ul class="subchap-list"></ul>');
for(var j = 0; j < data.chapter[i].subchapter.length; j++) {
var subChap = $('<li>'+data.chapter[i].subchapter[j].title+'</li>');
subChap.on("click",subChapClick);
subChapUl.append(subChap);
}
$('#left').append(subChapUl);
}
//at the global level define the following function:
function subChapClick(e) {
e.preventDefault();
var el = $(e.target);
chap = el.attr("data-chap");
subchap = el.attr("data-subchap");
parent.rightsidebar.location.reload();
}
Related
I'm trying to run a simple few lines of code using an index.html file and a script.js file, nothing else.
In the HTML file, I have doctype html:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="javascript/script.js"></script>
</head>
<body>
<div id="content1">This is content 1 </div>
<div id="content2">This is content 2 </div>
<div id="content3">This is content 3 </div>
</body>
</html>
And for my javascript section i have:
var elems = $("div");
if (elems.length) {
var keep = Math.floor(Math.random() * elems.length);
for (var i = 0; i < elems.length; ++i) {
if (i !== keep) {
$(elems[i]).hide();
}
}
}
When I run this in CodePen, or even on the code editor on this website, it works fine. But it doesn't work when I use the files on my desktop (index.html, script.js I do believe the folder structure is correct (script.js is in the javascript folder.)
Thank you all
Move your script tag just before the closing of the body tag:
<script src="javascript/script.js"></script>
</body>
This way the DOM will be available when your script runs.
If you prefer to keep your script in the head part, then wrap your code in a DOMContentLoaded event handler:
document.addEventListener("DOMContentLoaded", function() {
var elems = $("div");
if (elems.length) {
var keep = Math.floor(Math.random() * elems.length);
for (var i = 0; i < elems.length; ++i) {
if (i !== keep) {
$(elems[i]).hide();
}
}
}
});
... so to have your code run when the DOM is ready.
You did not tag your question with jquery, but as you seem to use it, you can use this shorter code for doing essentially the same as above:
$(function() {
var $elems = $("div").hide(),
$elems.eq(Math.floor(Math.random() * $elems.length)).show();
});
wrap your code in this function to execute it if the document is ready.
$(document).ready(function (){
// your code goes here
});
HTML CODE:
I HAD TO ADD SOMETHING TO DESCRIBE THE CODE, DONO Y
so obviously this is html code, don't know why its not running.
the code after this is javascript. If my code is very bad and doesn't make any sense, what im looking for is basically a way to use loadqueue to load an image and then set it as a background for a game.
<!DOCTYPE html>
<html>
<head>
<title>My Game</title>
<link href="assets/MyGame.css" rel="stylesheet" type="text/css"/>
<script src="https://code.createjs.com/preloadjs-0.6.1.min.js"></script>
<script src="https://code.createjs.com/tweenjs-0.6.1.min.js"></script>
<script language="javascript" type="text/javascript"
src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script language="javascript" type="text/javascript" src="MyGame.js"
></script>
</head>
<body>
<canvas id="demoCanvas" width="1000" height="700"></canvas>
</body>
</html>
var stage;
window.onload = function()
{
var queue = new createjs.LoadQueue(true);
queue.on("fileload", handleFileLoad, this);
queue.loadFile({id:"image", src:"assets/space.jpg"});
queue.load();
stage = new createjs.Stage("demoCanvas");
}
function handleFileLoad(event) {
// A reference to the item that was passed in to the LoadQueue
var item = event.item;
var type = item.type;
// Add any images to the page body.
if (type == createjs.LoadQueue.IMAGE) {
stage.addChild(event.result)
stage.update;
}
}
I believe that stage.update; should be stage.update(); as it is a method and not a property
I can spot two immediate issues:
you are trying to add the loaded image directly to the stage. It needs to be wrapped in a Bitmap first: stage.addChild( new createjs.Bitmap( event.result ));
you aren't calling stage.update() - you forgot the parenthesis.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='etch_a_sketch.css'/>
<script type='text/javascript' src='etch_a_sketch.js'></script>
</head>
<body>
<div class="outer">
</div>
</body>
</html>
JS:
$(document).ready(function() {
$(function() {
for(i=0; i<16; i++) {
$('<div class="inner"></div>').appendTo('.outer');
}
)};
Hello guys! I've tried looking for an answer here and elsewhere but with no luck. I'm trying to make a jquery 'for' loop that will dynamically make 16 div elements within an outer div container. The code looks sound to me but it's not working. I didn't post the CSS because it's irrelevant. Any help would be much appreciated!
First. You have syntax errors. Last line )}; should be }); .
Next. No need to create a jQuery object twice (there's a syntax too - } should be })).
This line:
$(document).ready(function() {
does the exact same thing as this line:
$(function() {
Reference
So, in summary, you should end up either with this:
$(document).ready(function() {
for(i=0; i<16; i++) {
$('<div class="inner">blah</div>').appendTo('.outer');
}
});
or this:
$(function() {
for(i=0; i<16; i++) {
$('<div class="inner">blah</div>').appendTo('.outer');
}
});
JSFiddle
Try this,
$(function() {
var innerHTML=[];
for(i=0; i<16; i++) {
innerHTML.push('<div class="inner"></div>');
}
$('.outer').html(innerHTML.join(''));
});
Please add jquery library to your page.
$(document).ready (function (){
for (var i=0; i<=16; i++){
$ ('.outer').html($('.outer').html()+"<div class='inner'></div>";
}
});
The above is seriously simple. Try that first. My theory would be that appendTo is not working because the element doesn't already exist? But it should work anyway? Also, you don't need the anonymous function within another.
You appear to be using jQuery, but haven't linked to the library. Add one of the following two lines (or download the file and link to that), depending on which version you want.
1.x snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
2.x snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Also there are some problems with brackets not being closed. The following snippet shows it working without the additional anonymous function within the ready handler.
$(document).ready(function() {
for (i = 0; i < 16; i++) {
$('<div class="inner">' + i + '</div>').appendTo('.outer');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
</div>
I want to suggest a better performance , it will speed up the process in case there is a lot of elements
$(document).ready(function() {
var innerDivs = "";
for(i=0; i<16; i++) {
innerDivs +='<div class="inner">blah</div>';
}
$('.outer').append(innerDivs);
});
This will perform better because we will not have to access the DOM tree more than one time
I am new to all this javascript, I was trying to make a crossword. I want a webpage that automatically makes 485 divs inside another div when the page loads. How is it possible to do this with a for loop?
I can see you are new to Stackoverflow as well as Javascript. So...I'll cut you some slack and answer (com'n guys...give a new guy a break).
For future questions, I highly recommend checking out https://stackoverflow.com/help/how-to-ask. It'll help you get prompt, accurate answers. Welcome to Stackoverflow.
http://jsbin.com/nazuwoqe/1/edit
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="myContainer"></div>
<script>
var element;
var body = document.getElementById('myContainer');
for(var i=0; i<485; i++) {
element = document.createElement("div");
element.innerHTML = i;
body.appendChild(element);
}
</script>
</body>
</html>
A crossword puzzle isn't going to be a simple project to create. I recommend starting with some more basic tasks and tutorials.
Try this
var BigDiv = document.createElement('div');
// specify BigDiv's param like id, class etc. here
var TinyDiv;
for (i = 0; i < 485; i++) {
TinyDiv = document.createElement('div');
// specify TinyDiv's param like id, class etc. here
BigDiv.appendChild(TinyDiv)
}
//put your BigDiv where you want to, here it's in body
document.getElementsByTagName('body')[0].appendChild(BigDiv);
I have a jQuery application which finds a specific div, and edit's its inner HTML. As it does this, it adds several divs with onclicks designed to call a function in my JS.
For some strange reason, clicking on these never works if I have a function defined in my code set to activate. However, it works fine when calling "alert("Testing");".
I am quite bewildered at this as I have in the past been able to make code-generated onclicks work just fine. The only thing new here is jQuery.
Code:
function button(votefor)
{
var oc = 'function(){activate();}'
return '<span onclick=\''+oc+'\' class="geoBut">'+ votefor +'</span>';
}
Elsewhere in code:
var buttons = '';
for (var i = 2; i < strs.length; i++)
{
buttons += button(strs[i]);
}
var output = '<div name="pwermess" class="geoCon"><div class="geoBox" style=""><br/><div>'+text+'</div><br/><div>'+buttons+'</div><br/><div name="percentages"></div</div><br/></div>';
$(obj).html(output);
Elsewhere:
function activate()
{
alert("Testing");
}
You may want to take a look at jQuery.live(eventType, eventHandler), which binds an event handler to objects (matching a selector) whenever they are created, e.g.:
$(".somebtn").live("click", myClickHandler);
Follows a dummy example, may be this can help you.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
<script type="text/javascript">
$(function() {
$('.go-right').click(function(){
c="Hello world";
$("#output").html(c);
});
});
</script>
</head>
<body >
<div id="output"></div>
<a class="go-right">RIGHT</a>
</body>
</html>
Change this:
var oc = 'function(){activate();}'
To be this instead:
var oc = 'activate();'