I want to add a div with a certain id to another div. Is this possible?
My suggestion was following:
<div class="clearfix">
</div>
<script>
var name = "xy";
var div = d3.select(".clearfix")
.append("div#area" + name)
...
</script>
You can create it using jQuery Append. Below is the simple script.
var $newdiv1 = $( "<div id='object1'/>" );
$newdiv1.text("New Div Content");
$(".clearfix").append($newdiv1);
Fiddle: http://jsfiddle.net/kiranvarthi/phzwebog/2/
Option 2:
$(".clearfix").append("<div id='object1'>hello world</div>");
Related
I need to display the current time when I click the button each time, I've achieved the DOM of creating new divs when clicked on button, but I'm not getting the time inside span.
HTML
<button onClick="createDiv()">Record Time</button>
<div id="getText" style="display: none;">
<span id="showTime"></span>
</div>
Script
function createDiv()
{
let div = document.createElement('div');
document.body.appendChild(div);
var now = moment().format("h:mm:ss A");
$('#showTime').append(now);
}
As the code above, current time should be displayed on each new div.
I believe you are using jquery in your script, if so simply replace the
line: $('#showTime').append(now);
with: $('#showTime').text(now);
with vanilla JS you can also do this:
function createDiv(){
let div = document.createElement('div');
document.body.appendChild(div);
var now = moment().format("h:mm:ss A");
let timeNow = document.createTextNode(now);
$('#showTime').append(timeNow);
}
I'm trying to dynamically / programatically insert code into the DOM and have aurelia handle the inserted code like any other module.
The tricky part is that the inserted html has a <compose view-model='A'></compose> element which should itself load a module "A".
I have a gistRun here
app.js
loadmod(container, viewmodel){
debugger;
var childID = container + "child";
var content = `<compose view-model='${viewmodel}' id='${childID}'></compose>`;
$("#" + container).append("<div>" + content + "</div>");
let el = $("#" + childID)[0];
let view = this.templatingEngine.enhance({ element: el, bindingContext: {}, overrideContext: {}});
view.bind();
view.attached();
}
loadm1(e){
this.loadmod("m1holder", "m1");
}
loadm2(e){
this.loadmod("m2holder", "m2");
}
loadm2again(e){
this.loadmod("m2holderagain", "m2");
}
<template>
<div>Stuff here</div>
<button click.delegate="loadm1($event)">Load M1</button>
<button click.delegate="loadm2($event)">Load M2</button>
<button click.delegate="loadm2again($event)">Load Another M2</button>
<div id="m1holder"></div>
<div id="m2holder"></div>
<div id="m2holderagain"></div>
</template>
The issue is you are attempting to enhance an element directly. You need to enhance a parent element which contains nodes to be enhanced. The Templating Engine looks for a parentNode when it does the enhancement logic.
See this updated Gist.run example for how it should work.
I've found some Javascript code on the web for toggling between two images when clicking on them as in this example.
Now I wonder how to achieve the same result using divs with the pictures being inside the divs.
Both the small and the large image will each be the background image of a div which is inside another div that forms the border (I need to do this to be able to set the inner border radius of the image, which I can when I use an inner div and set its border radius). So I have:
<div class="bordersmallpicture"><div class="smallpicture"></div></div>
and
<div class="borderlargepicture"><div class="largepicture"></div></div>
How can I tell Javascript to toggle between those two div couples instead of images? Here is the Javascript code that I found for the images:
<script>
var imageURL = "small-picture.png";
if (document.images) {
var smallpicture = new Image();
smallpicture.src = "small-picture.png";
var largepicture = new Image();
largepicture.src = "large-picture.png";
}
function changeImage() {
if (document.images) {
if (imageURL == "large-picture.png") {imageURL = "small-picture.png";}
else {imageURL = "large-picture.png";}
document.myimage.src = imageURL;
}
}
</script>
And the HTML part:
<img src="small-picture.png" name="myimage" title="Click to resize" alt="tree">
Can anyone give me a hint how to edit this code to toggle between the div couples mentioned above? Or will a whole new code be necessary when dealing with divs?
You simply need to toggle the classes. See a running example using your images as CSS background in the classes:
<div id="border-div" class="bordersmallpicture">
<div id="image-div" class="smallpicture"></div>
</div>
The the Javascript becomes:
<script>
function changeImage() {
var currentClass = document.getElementById('border-div').className;
if(currentClass == 'borderlargepicture') {
document.getElementById('border-div').className = 'bordersmallpicture';
document.getElementById('image-div').className = 'smallpicture';
} else {
document.getElementById('border-div').className = 'borderlargepicture';
document.getElementById('image-div').className = 'largepicture';
}
}
</script>
If you expect using javascript a lot, I recommend using jQuery which would make the code easier:
<script>
function changeImage() {
$('#border-div').toggleClass('bordersmallpicture').toggleClass('borderlargepicture');
$('#image-div').toggleClass('smallpicture').toggleClass('largepicture');
}
</script>
toggleClass turns ON/OFF a class (Here is the example)
Hi I have a very unique requirement. I need to find out a text from a div which is not surrounded by any tag, then once I have it I need to surround it with a div and give it a CSS class.
For eg:
<div class="pagingCss" id="footer">
1
6
7
8
</div>
So what I want my code to do is find this number 7 (in this case) and then surround it with a span tag and a class like:
<div class="pagingCss" id="footer">
1
6
<span class="someClass">7</span>
8
</div>
All this I am doing is beacuse I just cant get the spacing right for the tag less text and you can see in the screenshot attached
Link to the screenshot : http://yassershaikh.com/wp-content/uploads/2012/02/paging.png
You may try this
var footer = document.getElementById("footer");
var nodes=footer.childNodes;
for(i=0;i<nodes.length;i++)
{
if(parseInt(nodes[i].nodeValue)>0)
{
var span = document.createElement("span")
span.setAttribute("class","active");
span.appendChild(document.createTextNode(nodes[i].nodeValue));
footer.replaceChild(span , nodes[i]);
}
}
Here is a fiddle link.
You need to use
:not([href]){
color:red;
}
http://jsfiddle.net/mfmHz/
<script type="text/javascript">
function load(){
var footer = document.getElementById("footer");
var toFind= "7"
for(i=0;i<footer.childNodes.length;i++)
if(footer.childNodes[i].textContent == toFind ){
var span = document.createElement("span")
span.setAttribute("class","someClass");
span.appendChild(document.createTextNode(toFind));
footer.replaceChild( span , footer.childNodes[i] )
break;
}
}
</script>
<div class="pagingCss" id="footer">
1
678
</div>
<input type=button value="click" onclick="load()">
tested it .. makes the child "7" come under span..
I have one big div with id="elements" and I load from JSON file new elements objects and I need that for every element create new div inside elements ( elements div should contain lot off smaller divs, for every element one small div ). How to place this small divs inside this big div one behind another ? How to add this small divs a class style ?
In Dojo (since you have the dojo tag):
var div_elements = dojo.byId("elements");
dojo.forEach(json_data.items, function(item) {
dojo.create("div", { "class":"whatever " + item.classNames }, div_elements);
});
Of course, you can put anything as the class for your div. I just provided an example. In the second argument to dojo.create, you pass in a hash containing all the properties you want that div to have.
Create a new DOM element like so:
var childDiv = document.createElement('div');
Then add to the outer div like so:
var insertedElement = div.insertBefore(childDiv, null);
You would then keep creating childDivs as you iterate over your JSON data, and inserting them into the div Node as above.
I think you need something like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
json_data = 'Hey';
$('#elements').append('<div class="in_elements">' + json_data + '</div>');
});
</script>
<div id="elements">
</div>
Test it
There a simple jQuery functions for that:
var box= $("#elements");
// create elements
for (var i=0; i<items.length; i++) {
var t = $("<div class=\"element\" id=\"item_"+i+"\">"+items[i]['text']+"</div>");
box.append(t);
}
That's what you where looking for?