I've got some pretty simple HTML, a photo and some text but I want to put a javascript element between them. This element is a countdown timer and can be inserted using external javascript.
I have a codepen with the HTML, inline css, and javascript here: https://codepen.io/thomaskwelker/pen/xjwQPj
<div class="kanye-wrapper">
<div class="kanye-photo">
<img src="https://vignette.wikia.nocookie.net/star-clan/images/9/90/Kanye.png">
</div>
<div class="kanye-timer">
<script src="js/kanye.js"></script>
</div>
<div class="kanye-link">
See why
</div>
</div>
I've done hours of Googling and trying things. Could some please tell me how I can get the javascript timer inside the "kanye-timer" div?
Instead of $(document.body).append($r.cvs);, try $('.kanye-timer').append($r.cvs);
This tells the JS to append the timer to the div, rather that just placing it at the end of the document
Your initialization code creates a canvas object that is never attached to any DOM document. The JavaScript snippet doesn't have to be included in line. But you can have a container where you want the canvas to be:
<div class="kanye-wrapper">
<div class="kanye-photo">
<img src="https://vignette.wikia.nocookie.net/star-clan/images/9/90/Kanye.png">
</div>
<div class="kanye-timer" id="timercontainer">
</div>
<div class="kanye-link">
See why
</div>
</div>
<script src="js/kanye.js"></script>
Now within your kanye.js, write something like this:
document.getElementById('timercontainer').appendChild($r.cvs);
Of course this is not portable code. Once you make it work you can externalize the container ID as a parameter.
Related
Im creating a simple JS game, which will run in the browser and will pull the files directly from the pc. Because of this needed to make a workaround the "Cross-origin" error, which went smoothly, I put all the HTML within a JS and loaded the JS from the tag in the index.html. Everything was going smoothly so far.
You click "press any key to continue" -> but then next you click "New Game" and you get event listener error "can't set property of null". Which i don't understand how it happens, because the element is already in the "DOM" , the css could pick it up, but the event listener could not? So i tried moving all scripts on top, rearranging stuff, nothing worked. Pre-loading all HTML into the index.html, without executing it will definitely work, but how can i achieve this exactly? My Configuration atm is:
index.html (root folder)
/components/main_menu.js
/components/character_creation.js
function MainMenu()
{/*
<div id="mm_wrapper_grid">
<div id="mm_subgrid1">
</div>
<div id="mm_subgrid2">
<div id="mm_subgrid2_image"></div>
<div id="mm_new_game"><p id="mm_new_game_p" class="grow">New Game<p></div>
<div id="mm_load_game"><p id="mm_load_game_p" class="grow">Load Game</p></div>
<div id="mm_options"><p id="mm_options_p" class="grow">Options</p></div>
<div id="mm_credits"><p id="mm_credits_p" class="grow">Credits</p></div>
</div>
</div>
*/}
function CharacterCreation()
{/*
<div> Character Creation test
</div>
*/}
<div id ="game">
<div id="loading_screen">Press Any Key To Continue</div>
</div>
<script type="text/javascript">
document.getElementById("loading_screen").addEventListener("click", function() {callback("game", MainMenu)});
document.getElementById("mm_new_game_p").addEventListener("click", function() {callback("game", CharacterCreation)});
function callback(arg1, func)
{
var html = func.toString();
var htmlstart = html.indexOf('/*');
var htmlend = html.lastIndexOf('*/');
var html = html.substr(htmlstart+2, htmlend-htmlstart-2);
document.getElementById(arg1).innerHTML = html;
}
</script>
You have the problem because you are trying to add the second listener for getElementById("mm_new_game_p") when this element doesn't exist on the page. I suggest you to add the follwing line of code to make sure, that it's true:
<script type="text/javascript">
document.getElementById("loading_screen").addEventListener("click", function() {callback("game", MainMenu)});
console.log('#mm_new_game_p', document.getElementById("mm_new_game_p"));
document.getElementById("mm_new_game_p").addEventListener("click", function() {callback("game", CharacterCreation)});
...
You have to add this listener after this element will be created (after calling of MainMenu() function).
To tell the truth, I can see such storing of html templates in js functions for the first time. It's hard to support your code and I've modified it a little bit below. This is not the best way to implement it, but my goal is show you a solution based on your code. What you can see here:
all the templates for pages are in html (not in JS);
you can add listeners from html code using HTML attribute onclick - and in this case you can be sure, that element exists on the page.
If you want to add listeners from JS, than you have to create own functions for each pages which you have and after HTML template of a page will be added to #game container you will need to create event listeners for the buttons which are on the created page.
openPage("game", "loading_screen");
function openPage(parentDOMElementId, name) {
console.log('openPage:', name);
var pageHtml = document.getElementById("page_" + name).outerHTML;
document.getElementById(parentDOMElementId).innerHTML = pageHtml;
}
<div id="game"></div>
<div class="templates" style="visibility: hidden;">
<div id="page_loading_screen" onclick="openPage('game', 'main_menu')">
Press Any Key To Continue
</div>
<div id="page_main_menu">
<div id="mm_subgrid1">
</div>
<div id="mm_subgrid2">
<div id="mm_subgrid2_image"></div>
<div id="mm_new_game">
<p id="mm_new_game_p" class="grow" onclick="openPage('game', 'character_creation')">New Game
<p>
</div>
<div id="mm_load_game">
<p id="mm_load_game_p" class="grow">Load Game</p>
</div>
<div id="mm_options">
<p id="mm_options_p" class="grow">Options</p>
</div>
<div id="mm_credits">
<p id="mm_credits_p" class="grow">Credits</p>
</div>
</div>
</div>
<div id="page_character_creation">
Character Creation test
</div>
</div>
In order to understand my question look at the following example code:
<div id="here">
<div id="object"></div>
</div>
<div id="there">
</div>
$('#object') works always!
document.getElementById("object") will work if I change the DOM structure before?
$('#there').append( $('#object') );
document.getElementById("object") // will work?
Yes, it will work.
For getElementById to return DOM of element there is only need and that is Element should be on document it dosen't matter where it is.
It will work. See this code.
jQuery is not a language, it is just a JavaScript plugin and it make use of available functions in JavaScript.
console.log($('#object')[0]);
console.log(document.getElementById("object"));
$('#there').append( $('#object') );
console.log(document.getElementById("object"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="here">
<div id="object"></div>
</div>
<div id="there">
</div>
I'm looking for a solution, in which div content changes on page load, randomly. Much like a JavaScript image on page load. I have made further notes in the code below.
I could do a randomize the content like images with JavaScript on page load, but here it's divs and I'm not sure how to change content inside them.
<div class="row BSlots">
<div class="Grid_4 fl">
/* This would be the code which would change */
/* For example once it would be <div class="hello"><p>Hi</p></div> and the other <iframe="Link"/> */
</div>
<div class="Grid_4 fr">
<script>Widget2(); /* Don't mind this, loading an actual JS image randomizer here */</script>
</div>
</div>
Can this be achieved without using JS? If not, I'd appreciate a basic example which I could fiddle with :)
Yes it could be achieved without Javascript. It depends on which serverside-technology you use. You could create a template and insert serverside ransom image-tags.
It is possible too, to do it via javascript.
If you want to use jQuery, you could do something like:
$(function(){
$(".Grid_4 fl").html(generateRandomImageHtml());
});
i tried to generate img tag with javascript
(when clicked on link, image is created)
The problem is that when the image is generated, all other objects(other images or text) are overwritten and i cannot reach them anymore
i have something like
document.getElementById("picturediv").innerHTML=picturetag;
in html
<div id="bigger">
<div id="picturediv"></div>
<div id="div for some other stuff"></div>
</div>
It should work, unless picturetag is breaking the html.
<div id="bigger">
<div id="picturediv"></div>
<div id="div for some other stuff"></div>
</div>
<script>
document.getElementById("picturediv").innerHTML="<img src='"+pictureLocation+"'>";
Assigning the innerHTML indeed "overwrites" any previous content of the element.
To append the image to the existing contents have:
document.getElementById("picturediv").innerHTML += picturetag;
Assuming picturetag contains valid HTML - if no luck please post more code especially what is picturetag and how it's created.
Try something like this:
document.getElementById('picturediv').appendChild(picturetag);
That will append the image to the div
Basically what I have is this:
<body>
<div class="class1">
</div>
<div class="class2">
</div>
<div class="class3">
</div>
...
</body>
I have no idea why the site creator used classes instead of IDs (they're unique), but it doesn't really matter as I'm writing a GM script and so getElementsByClassName('')[0] effectively does the same thing.
How can I insert an element between the first and second div?
Create your own insertAfter function
you can use JQuery it very simple
$(".class1").after( document.createTextNode("Hello") );