appendTo() a specific div - javascript

I know I'm probably missing something simple but:
var GAME_CANVAS_ELEMENT = $("<canvas id='Project-001-Canvas' class='Project-001-CSS'></canvas>");
GAME_CANVAS_ELEMENT.appendTo($('.a'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a"></div>
This works if I appendTo('body') but if I attempt to append to anything else it doesn't seem to work.

I'm wrapping your code inside $(document).ready(function(){}) and with chrome it works: http://jsfiddle.net/o2gxgz9r/3701/
You can verify it by inspecting your html code with Chrome developer tool

Related

HTML text to plain text in Javascript without imports or npm installs

Is there a way to convert HTML text to plain text in JS WITHOUT IMPORTING OR USING 'NPM INSTALL'. I am trying to, for example, put: <h1>Hello</h1> as <h1>Hello</h1> without it autocorrecting to 'Hello'.
Is this possible? Even if it can put it in blockquotes or multiple line blockquotes like
<h1>Hello</h1>
<h2>Hi</h2>
How do I do this does anyone know?
I would also be fine with figuring out how StackOverflow creates their blockquotes like:
<h2>Hello</h2>
Can someone help please!
Using getElementById you can select any dom element. The dom element has outerHTML property. I think you can use this property.
<html>
<div id="test">
<h1>Hello</h1>
<h2>Hi</h2>
</div>
</html>
in js file
a = document.getElementById("test").outerHTML;
console.log(a + 'hello');
working fiddle - https://jsfiddle.net/alimurrazi/gp05cytr/7/
This is a non-deprecated deprecated tag. <xmp>
<xmp> is not an easy-to-find tag... I would recommend using it!
It says its deprecated if you search it online... but after using it in a live display it is definitely a working tag!

Copy and paste text from a div to another [jQuery]

I am trying to do a thing that seems easy to me but I'm not very familiar with javascript language and I can't find any documentation to do what I want.
Let's say I have a code like this:
<div id="sourceA">Text</div>
<div id="sourceB">Another</div>
<div id="destination"></div>
Let's say I click on the "sourceA" div, the text contained in it should go in the "destination" div.
Unfortunately, I have no idea how to do it. Can you help me? And maybe also suggest me somewhere I can go and learn something more about this code?
Read more about JavaScript and jQuery events. What you need here is a .click() event on sourceA to handle your behaviour as follows:
$("#sourceA").click(function() {
$("#destination").html($(this).html());
});
HTML:
<div id="sourceA" class="source">Text</div>
<div id="sourceB" class="source">Another</div>
<div id="destination"></div>
JS:
$('.source').click(function(e) {
$('#destination').text($(e.currentTarget).text())
});
Take a look at this example
var copyContentToDestinationClickHandler = function(event) {
$('#destination').empty();
$('#destination').append($(event.target).text());
}
$('#sourceA').click(copyContentToDestinationClickHandler);
$('#sourceB').click(copyContentToDestinationClickHandler);
https://jsfiddle.net/7v5a6bsu/

JSViews visible link with converter doesn't work

I upgraded to the latest version of JsViews and it seems like something broke.
If I have a data-link like "visible{:property}", it works.
If I have a data-link like "visible{convert:property}", it does not work.
From what I can tell it seems like it looks early on in the process for the attr "visible" and changes it to "css-display". When I have a converter, though, in propertyChangeHandler it does this line
attr = linkCtx.attr || attr; // linkCtx.attr may have been set to tag.attr during tag instantiation in renderTag
That causes it to change attr back to "visible", and then in updateContent, the regex test for "css-" fails and it never sets the display property.
Am I missing something? Shouldn't this work?
I created a fiddle that shows what I am trying to do. In the non-working case, instead of setting display:none, it sets visible="false"
http://jsfiddle.net/4scbgjpx/2/
<script id="worksTempl" type="text/x-jsrender">
<div data-link="visible{:show}">
<span data-link="name"></span>
</div>
</script>
<script id="failsTempl" type="text/x-jsrender">
<div data-link="visible{negate:show}">
<span data-link="name"></span>
</div>
</script>
$.views.converters({
"negate": function (val) { return !val; }
});
Yes, you are right - that was a bug. It has been fixed now (commit 58), and your jsfiddle now works correctly.

Get onClick element to return to the main element?

I'm awful with javascript and I'm having a problem with this one.
I'm using this code
<script>
function changeNavigation(id){
document.getElementById('members')
.innerHTML=document.getElementById(id).innerHTML
}
</script>
and HTML
`<span onClick="changeNavigation('members')" >MEMBERS</span>
<span onClick="changeNavigation('help')" >HELP</span>`
<div id="members>...</div>
<div id="help" style="display: none;>...</div>
But I can't get <span onClick="changeNavigation('members')" >MEMBERS</span> to actually go to an element "members" without duplicating everything inside of it in another id.
Is there a way to do this?
This can be done using only standard javascript, but personally I'd recommend going ahead and getting used to using jQuery. Here's an example jsfiddle using jQuery: http://jsfiddle.net/JnvCR/2/
Don't forget to include jQuery in your website:
<script src="http://code.jquery.com/jquery.js"></script>
You need to correct your syntax errors. Use onclick instead of onClick (pedantic). Make sure you close your attributes properly, you are missing a few closing " marks.
updated html
<span onclick="changeNavigation('members')" >MEMBERS</span>
<span onclick="changeNavigation('help')" >HELP</span>`
<div id="members">...</div>
<div id="help" style="display: none;">...</div>
There is also an error with your logic as you are simply replacing the contents of div#members with itself.
Updated JS without syntax errors, but still with dodgy logic
function changeNavigation(id){
document.getElementById('members').innerHTML=document.getElementById(id).innerHTML;
}
Demo fiddle
http://jsfiddle.net/ADGCV/
As far as your actual question goes, can you explain what you would like to happen a bit better??
Here's a possible solution http://jsfiddle.net/ADGCV/1/

How to select an object in JQuery?

I'm beginner in JQuery, how could I select an object using JQuery ?
This is the code:
<script type="text/javascript" language="javascript">
function Hide(senderID) {
$("#" + senderID).hide(200);
// this exception is thrown // Microsoft JScript runtime error: Object expected
}
</script>
<div id="div1" onclick="javascript:Hide(this.id)"
Any help!
Don't:
get an id from an element
pass that id to a function
use the id to get the element.
Do: Just pass the element.
Don't stick javascript: at the front of an intrinsic event attribute, it doesn't mean what you think it means.
Don't use intrinsic event attributes for that matter (although I didn't fix this in this example). Use unobtrusive JS.
Avoid triggering events based on clicks on a div. This can't be targeted with a focus based navigation device (such as using the tab key on the keyboard and numerous devices used by people with disabilities) without using new features introduced in HTML 5 that don't see widespread support yet. Use an element that is designed as an interaction control (such as a button). (Also not fixed in the example below)
Example:
function Hide(sender) {
$(sender).hide(200);
}
<div id="div1" onclick="Hide(this)"
Code is exactly the same as yours, I added the correct tags, and the call to include the jquery library:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
function Hide(senderID) {
$("#" + senderID).hide();
}
</script>
<div id="div1" onclick="javascript:Hide(this.id)">Click Me</div>
function Hide(sender) {
$(sender).hide(200);
}
<div id="div1" onclick="javascript:Hide(this)"></div>
hope it helps
I can't resist. Why not use jQuery's full power?
HTML:
<div class="hideable-div">Click me and get rid of me.</div>
jQuery:
$('.hideable-div').click(function () {
$(this).hide(200);
});
you misplaced those "" in
<div id="div1" class=""hideable-div>Click me and get rid of me.</div>
Should be like
<div id="div1" class="hideable-div">Click me and get rid of me.</div>

Categories