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;
}
Related
In this Django project, there is a Javascript function creating a new div in which we display some data.
for (var i = 0; i < files.length; i++) {
var newDiv = document.createElement('div');
newDiv.setAttribute("class","files_div");
//Call the helper function to check if it's a PDF
newDiv.setAttribute("onclick","check_files(this)")
console.log(files[i]) //Print the files
newDiv.innerHTML = files[i];
divParent.appendChild(newDiv);
}
I need to add icons next to this data. For example, a pdf icon if it's a pdf file.
How do you add icons in Javascript once a new div is created?
Have you considered a css-based solution on this? You can add an icon to any element using pseudo elements. This adds another element next to .pdf which you can style to fit your purpose. Using background-image allows you to add an icon.
.pdf {
padding-left: 35px;
position: relative;
}
.pdf:before {
content: "";
height: 20px;
width: 20px;
display: block;
background: url("https://via.placeholder.com/20");
position: absolute;
left: 0;
}
<div class="pdf">PDF</div>
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');
I'm trying to show some team staff in my website, so, I want to show some small info, like picture and name and then, when you click it, it pops up a div with hole info about the person.
I'm trying to do it through getElementsByClassName, but, it's not working, it only works for the first node.
i have two divs, one div named 'popup' which contains info and one full size div with opacity.
so, there's my functions for opening and closing divs:
function showWindow(className,number){
var obj = document.getElementsByClassName(className);
$obj[number].fadeIn(1000);
var obj2 = document.getElementById('transparentBox');
obj2.style.display='block';
}
function closeWindow(className,number){
var obj = document.getElementsByClassName(className);
$obj[number].fadeOut("slow");
var obj2 = document.getElementById('transparentBox');
$(obj2).fadeOut(1000);
}
The funny thing is that it does work if i click at the first element node, but it doesn't work for the other nodes(i.e. first node = obj[0]). For the other ones, only transparentBox shows up.
the css of both divs:
#transparentBox
{
position: fixed;
display:none;
padding:0;
margin:0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:rgba(255,255,255,0.5);
z-index: 499;
}
.popup {
position: absolute;
display:none;
top: 0;
bottom: 0;
left: 0;
right: 0;
width:700px;
padding:20px;
background-color:white;
margin: auto;
z-index:500;
overflow-y: scroll;
}
And I'm calling them by More Info
but it's only displaying for the first call showWindow('popup',0), the other calls doesnt display popup, only the transparentBox.
$(obj[number]) is what you are looking for I think, instead of $obj(number). So your fadeIn/fadeOut should become: $(obj[number]).fadeIn(1000);
I figured out what happened wrong.
The problem was that, in my HTML code, the transparentBox div was covering only the first popup div, that's why the other ones didn't show up.
Fixed it. Thanks
I am trying to create a page that has before and after images that use a slider based on mouse movement to show both images. I need to have multiple sliders on the page and can not seem to get them to work. Below are a couple of different examples I have found and the challenges I am having.
http://codepen.io/dudleystorey/pen/JDphy - This works well with mobile but I can not seem to add a second version without adding css for every image since the background image is embedded in the css.
div#inked-painted {
position: relative; font-size: 0;
-ms-touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
div#inked-painted img {
width: 100%; height: auto;
}
div#colored {
background-image: url(https://s3-us-west2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg);
position: absolute;
top: 0; left: 0; height: 100%;
width: 50%;
background-size: cover;
}
http://codepen.io/ace/pen/BqEer - Here is the other example that does not work as well with mobile. I can add the second image but the slider works all the images simultaneously and not individually when a second image is added.
Can anyone help with adding the second image. I am sure both of these are very workable but I am missing something in my css/javascript knowledge that is not allowing multiple images.
You need to loop though all classes to be able set the eventhandlers individual. Your codepen example could be change to this to work with individual images at once:
var blackWhiteElements= document.getElementsByClassName("black_white");
for (i = 0; i < blackWhiteElements.length; i++) {
initCode($(blackWhiteElements[i]));
}
function initCode($black_white) {
var img_width = $black_white.find('img').width();
var init_split = Math.round(img_width/2);
$black_white.width(init_split);
$black_white.parent('.before_after_slider').mousemove(function(e){
var offX = (e.offsetX || e.clientX - $black_white.offset().left);
$black_white.width(offX);
});
$black_white.parent('.before_after_slider').mouseleave(function(e){
$black_white.stop().animate({
width: init_split
},1000)
});
}
codepen here: http://codepen.io/anon/pen/mJPmKV
Your first attempt is near sufficient.
Assign the background-image inline in the html to avoid extra classes
<div id="colored" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg);"></div>
change background-size on #colored to background-size: auto 100%; to reduce the "shaky" effect
background-size: auto 100%;
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);
}