First, I have this:
Now, what I want to do is, to make "zoom" of some nodes. Once I double click on some of the nodes, I want to see the whole node on the page:
Now, because every time I zoom a node - I see the same thing (a big circle), I want to make this: once I double-click on a node - only a new div to be added which will have the circle and it will overlap its container. I am working with Raphael, so the circle should be drawn with Raphael.
How should I do this with JavaScript? (adding new div with the circle which will overlap the container, and drawing the circle with Raphael, which shouldn't be hard, but the creation of the div is the part where I am stuck)
What I did so far is:
zoomDiv = document.createElement('div');
zoomDiv.id = 'graph-zoom';
zoomDiv.style.position = 'absolute';
zoomDiv.style.zIndex = 2000;
this.container.appendChild(zoomDiv);
When I go to the HTML, I can see that the div is added to the container:
But it is too low. I don't know if this is the problem why I can't see the empty div so far or is it something else?
This example demonstrates the creation of a div in javascript, how to append and remove it to and from the document.body, the use of CSS position: absolute; and CSS z-index to place elements on top of one another.
CSS
#parent {
position: absolute;
top: 0px;
left: 0px;
height: 100px;
width: 300px;
z-index: 0;
background-color: yellow;
}
#child {
position: absolute;
top: 0px;
left: 0px;
height: 100px;
width: 300px;
z-index: 1;
background-color: green;
}
HTML
<div id="parent">
<button id="open">Open</button>
</div>
Javascript
var parent = document.getElementById("parent");
var open = document.getElementById("open");
function addChild() {
var div = document.createElement("div");
var close = document.createElement("button");
div.id = "child";
close.id = "close";
close.textContent = "Close";
close.addEventListener("click", function closeSelf() {
document.body.removeChild(div);
}, false);
div.appendChild(close);
document.body.appendChild(div);
}
open.addEventListener("click", addChild, false);
On jsfiddle
Creation is easy:
var new_div = document.createElement("div");
Insertion is little more difficult:
var your_raphael_container_parent = your_raphael_container.parentNode;
if (your_raphael_container.nextSibling) {
your_raphael_container_parent.insertBefore(new_div, your_raphael_container.nextSibling);
}
else {
your_raphael_container_parent.appendChild(new_div);
}
Related
I am trying to make a JavaScript game and I need a CSS object with an animation to move in place of an object I originally made using JavaScript. Basically, what I want to happen is have my "sword" CSS object move with my player object when I have it Unsheathed. I have been looking for a while and they only give me a result as to were it will be when the page is loaded. I need the sword to always be moving with the player. If my code is needed, tell me, and I will provide it. If you have any questions, feel free to ask. I am pretty new so go easy on the terrible JavaScript that may be provided.
PLEASE USE AN EXAMPLE RELATED TO MY CODE!
if you don't I probably wont understand what is going on....
Thank You in Advance
Focusing the the following element of your example I am only going to address CSS here...
....
<div class="player"></div>
<div id="swordl"></div>
<div id="swordr"></div>
....
To move #swordl and #swordr along with .player you can take advantage of a feature of the CSS position attribute.
When a containing element has CSS position: relative; children of that element with the CSS position: absolute; are positioned with reference to the top-left corner of the parent.
In the following example #player would be the parent, and #swordl and #swordr would be the children...
....
<div id="player">
<div id="swordl"></div>
<div id="swordr"></div>
</div>
....
/* CSS */
#player {
position: relative;
}
#swordl, #swordr {
position: absolute;
}
#swordl {
left: 4px;
top: 2px;
}
#swordr {
left: 12px;
top: 2px;
}
Note the change of class to id in 'player'
Now, whenever you animate the position of #player the two #swords will maintain their position relative to the top-left corner of their containing parent element: you will not have to animate the position of #swords explicitly.
Hope that helps. ;)
CSS position # MDN
You can use the transistion. I have included a couple examples. One example is just JavaScript, the other is not just JavaScript.
//Get Element By Id of 'movingdiv'
var div = document.getElementById('movingdiv');
//Create the timeout (not required)
setTimeout(function() {
//Change the style.top to 50%, You can also do this in px
div.style.top = '50%';
//Change the style.top to 50%, You can also do this in px
div.style.left = '50%';
//Add the transform so it can be centered in the viewport
div.style.transform = 'translate(-50%,-50%)';
//Add the timeout below in milliseconds.
}, 1000)
#movingdiv {
width: 100px;
height: 100px;
background: black;
position: absolute;
top: 10px;
left: 10px;
transition: all 2s;
}
<div id='movingdiv'></div>
//Create a div
var div = document.createElement('div');
//Give the div some style. IMPORTANT: notice the transition
div.style = 'width: 100px; height: 100px; background: black; position: absolute; top: 10px; left: 10px; transition: all 2s;';
//Append the div to the body
document.body.appendChild(div);
//Create a timeout for the div to move
setTimeout(function() {
//Change the style.top to 50%, You can also do this in px
div.style.top = '50%';
//Change the style.top to 50%, You can also do this in px
div.style.left = '50%';
//Add the transform so it can be centered in the viewport
div.style.transform = 'translate(-50%,-50%)';
//Add the timeout below in milliseconds.
}, 1000)
I'm creating an image gallery and whenever I click on the image, it displays it fully across the screen. However, whenever I try to click off of it and return to the normal website screen, the image is completely gone.
Here is a codepen showing the problem https://codepen.io/designextras/pen/WNrQMdM
In the html I am targeting the image tag by using firstElementChild in my Javascript for ".services-cell"
<div class="services-cell">
<img class="services-cell_img" src="gallery/img-1.jpg" alt="">
<div class="services-cell_text">Digital Marketing</div>
</div>
Here is the Javascript, it is also in the codepen above
let galleryImages = document.querySelectorAll('.services-cell');
let getLatestOpenedImg;
let windowWidth = window.innerWidth;
if(galleryImages) {
galleryImages.forEach(function(image, index){
image.onclick = function() {
console.log(image.firstElementChild);
getLatestOpenedImg = index + 1;
let container = document.body;
let newImgWindow = document.createElement('div');
container.appendChild(newImgWindow);
newImgWindow.setAttribute('class', 'img-window');
newImgWindow.setAttribute('onclick', 'closeImg()');
let newImg = image.firstElementChild;
newImgWindow.appendChild(newImg);
newImg.classList.remove('services-cell_img');
newImg.classList.add('popup-img');
}
})
}
function closeImg() {
document.querySelector('.img-window').remove();
}
and here is the CSS classes that I'm trying to add whenever I click on the image
.img-window {
width: 100vw;
height:100vh;
background: rgba(0,0,0,0.8);
position: fixed;
top: 0;
left: 0;
z-index: 100;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.popup-img {
max-height: 80vh;
max-width: 80vw;
z-index: 200;
}
So the bottom function closeImg() seems to be the problem, but I don't know else I'd write my code in order to close out the image pop up and return to the screen without it completely removing my image from the html
When you append the image to newImgWIndow, you're removing it from its original DIV. You should clone the image instead of moving it.
let newImg = image.firstElementChild.cloneNode();
newImgWindow.appendChild(newImg);
newImg.classList.remove('services-cell_img');
newImg.classList.add('popup-img');
ok so I'm trying to display news articles from an api. what I've written in javascript does just that (article photo, title, author, etc) except for the links to each particular article. at first they werent clickable at all, then I changed the css with something I found here. that made the whole entire page clickable and only applies to one link, and one link only. so what I need to know is how to make sure the clicks happen in the right place and go to the right location? please and thank you.
function GenerateArticle(data) {
const Article = document.getElementById("ArticleGrid")
for (let i = 0; i < data.length; i++) {
const Div = document.createElement("Article");
Div.innerHTML =
`<img src = ${data[i].urlToImage}>
<h5>${data[i].title}</h5>
<p>${data[i].publishedAt}</p>
<p>${data[i].description}</p>
<p>${data[i].content}</p>
<p>${data[i].source.name}</p>
<p>${data[i].author}</p>
<a href = '${data[i].url}'></a>`;
Article.appendChild(Div);
}
}
a {
position: fixed;
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
text-decoration: none;
}
What you're trying to achieve is a stretched link, an anchor that has no actual content but spans the entire contents of it's parent node. Only, you're not quite there. A few ways to do this but let's simplify for demonstration.
Set the position style property on the Div to relative.
const Div = document.createElement("article");
Div.style.position = "relative";
Absolute position your link in place of fixed.
a {
position: absolute;
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
text-decoration: none;
}
I've a sticked element which gets the top-alignment from current scroll-offset. Problem is, that the layout is not "retriggerd" if the space from it is free. So there stays a ghost-gap where the sticked element was...
http://fiddle.jshell.net/pPc4V/
The markup is pretty simple:
...
as well as the js:
var $win = $(this);
var sticked = document.querySelector('a.sticked');
$win.on('scroll', function () {
var scrollTop = $win.scrollTop();
sticked.style.top = scrollTop + 'px';
// $win.resize();
});
...and the css looks good so far:
a {
display: inline-block;
width: 90px;
height: 90px;
background: deepskyblue;
}
.sticked {
position: relative;
top: 0;
left: 0;
background: tomato;
}
I tried to trigger the resize-event on scroll (as you see above uncommented), but no success! Any ideas, how to retrigger the layout so that the free-gap is filled with the next floated element?
Update
To clarify what I mean I made a simple image-timelime:
Step 1
Step 2
Step 3
The issue is that you are setting position fixed on an element which is displayed inline. That will cause that space to occur. I have redid your jsFiddle with proper alignment.
To fix it, I added the class "stuck" only when the document's scrollTop position is greater than the scrollTop position of your target element.
jsFiddle: http://fiddle.jshell.net/pPc4V/44/
HMTL:
<div id="grid">
etc...
</div>
CSS:
#grid {
height:1000px;
overflow:hidden;
float:left
}
#grid > a {
display: inline-block;
width: 90px;
height: 90px;
background: deepskyblue;
}
.stuck {
position: fixed;
background: navy !important;
}
JS:
$(window).on('scroll', function () {
var $doc = $(document),
parentElement = $('#grid'),
childToGetStuck = parentElement.find('a:nth-child(5)');
if ($doc.scrollTop() > childToGetStuck.scrollTop()) {
childToGetStuck.addClass('stuck');
//console.log($('.stuck').scrollTop())
} else {
childToGetStuck.removeClass('stuck');
}
});
I am trying to create a web page where on click of a button I can add div tags. What I thought to do was that I'll create two div tags within a single div so that over all presentation will be uniform and similar to a table having two columns and multiple rows and the first column contains only label's and second column will contain textbox.
Here is the JS file:
var counter = 0;
function create_div(type){
var dynDiv = document.createElement("div");
dynDiv.id = "divid_"+counter;
dynDiv.class="main";
document.body.appendChild(dynDiv);
question();
if(type == 'ADDTEXTBOX'){
ADDTEXTBOX();
}
counter=counter+1;
}
function question(){
var question_div = document.createElement("div");
question_div.class="question";
question_div.id = "question_div_"+counter;
var Question = prompt("Enter The Question here:", "");
var node=document.createTextNode(Question);
question_div.appendChild(node);
var element=document.getElementById("divid_"+counter);
element.appendChild(question_div);
}
function ADDTEXTBOX(){
var answer_div = document.createElement("div");
answer_div.class="answer";
answer_div.id = "answer_div_"+counter;
var answer_tag = document.createElement("input");
answer_tag.id = "answer_tag_"+counter;
answer_tag.setAttribute("type", "text");
answer_tag.setAttribute("name", "textbox");
answer_div.appendChild(answer_tag);
var element=document.getElementById("divid_"+counter);
element.appendChild(answer_div);
}
Here is the css file:
.question
{
width: 40%;
height: auto;
float: left;
display: inline-block;
text-align: justify;
word-wrap:break-word;
}
.answer
{
padding-left:10%;
width: 40%;
height: auto;
float: left;
overflow: auto;
word-wrap:break-word;
}
.main
{
width: auto;
background-color:gray;
height: auto;
overflow: auto;
word-wrap:break-word;
}
My problem is that the code is working properly but both the divisions are not coming in a straight line. after the first div prints on the screen the second divisions comes in another line. How can I make both the div's come in the same line?
PS: should I stick with the current idea of using div or should I try some other approach? like tables?
The reason its in diffrent lines lies in your JS code, try setting your class like following:
//question_div.class="question";
question_div.setAttribute("class", "question") ;
and
//answer_div.class="answer";
answer_div.setAttribute("class", "answer");
and also this:
//dynDiv.class="main";
dynDiv.setAttribute("class", "main");
Your divs have not class attribute set properly. I recommend chrome in-built tools for developers or FireBug add-on if you use Firefox to check whether elements you built are like you design them to be.
You may check code here: http://jsfiddle.net/Nnwbs/2/
var counter = 0;
function create_div(type){
var dynDiv = document.createElement("div");
dynDiv.id = "divid_"+counter;
//dynDiv.class="main";
dynDiv.setAttribute("class", "main");
document.body.appendChild(dynDiv);
question();
if(type == 'ADDTEXTBOX'){
ADDTEXTBOX();
}
counter=counter+1;
}
function question(){
var question_div = document.createElement("div");
//question_div.class="question";
question_div.setAttribute("class", "question") ;
question_div.id = "question_div_"+counter;
var Question = prompt("Enter The Question here:", "");
var node=document.createTextNode(Question);
question_div.appendChild(node);
var element=document.getElementById("divid_"+counter);
element.appendChild(question_div);
}
function ADDTEXTBOX(){
var answer_div = document.createElement("div");
//answer_div.class="answer";
answer_div.setAttribute("class", "answer");
answer_div.id = "answer_div_"+counter;
var answer_tag = document.createElement("input");
answer_tag.id = "answer_tag_"+counter;
answer_tag.setAttribute("type", "text");
answer_tag.setAttribute("name", "textbox");
answer_div.appendChild(answer_tag);
var element=document.getElementById("divid_"+counter);
element.appendChild(answer_div);
}
create_div("ADDTEXTBOX");
And about that aproach I mean div or tables, you are correct to use div, its generaly recommended to do so.
Also after you correct your JS code fix also a bit your css styles as you like.
If you are using chrome using inspect element and find the corresponding 'div' tag and try to adjust the style(position)
Try to position both Divs with absolute inside a main div that could be relative. something like
#mainDiv {
position:absolute; /* or relative depends how you have it*/
width:80%;
height:100%;
left:10%;
}
#div1 {
position:absolute;
width: 40%;
height:100%;
left:0px;
top:0px;
}
#div2 {
position:absolute;
width: 40%;
height:100%;
right:0px;
top:0px;
}
It's simple. To line up both div's, give the position of of the two div's as display:inline-block;
display:inline-block;
Note: BOTH div's have to have this property for them to appear in a line.