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
Related
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;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have two div . div-1 and div-2 .it need to stay all the time but i want some menu items using another div name div-3 which is visible when button clicks. i want div-3 over div-1 and div-2 at the same time .how can i do that ?
JavaScript Notes
An IIFE is a very common design pattern in JavaScript commonly used to hide your code so that it doesn't get changed by other scripts.
You can add event listeners to elements using the addEventListner function.
You can get an HTMLElement using the querySelector function which accepts a selector. So to get the first div you could use document.querySelector("div"). To get the element with id "item" you can use document.querySelector("#item"). To get the first element element with class "active" you can use document.querySelector(".active"). You can also use document.querySelector("div#item.active") to get the item the fills all the previous requirements or document.querySelector("div, #item, .active") to get the item that fills any of the requirements. As you can see this works the same as CSS selectors.
To check if a variable is an instance of a Class you can use instanceof.
There are several ways to change how an Element looks using JavaScript.
One is to change the class name element.className = "active", another is to directly change the styling element.style = "opacity: 1;".
Styling Notes
To position an element on top of other elements you need to set its position to absolute and the container's element to relative. When you absolutely position an element then its positioned relatively to the last container that is positioned relatively (default is <html> element).
There are 2 main ways to position elements next to each other: float: left; and display: inline-block;. This works like writing on a notepad, it fits as many elements on next to each other and the repeats the same process below them.
There are 3 common ways to hide an element. 1: opacity: 0; which just makes the item invisible but it it's still there so you should probably also use pointer-events: none; so that it doesn't stop you from clicking what's behind it. 2: height: 0; This just shrinks the element so that it has no height which essentially makes it invisible. 3: display: block; this essentially completely removes the element.
Example
// IIFE Design Pattern
(function() {
// Run onLoad function if page is fully loaded
if (document.readystate === "complete") onLoad();
// Else add an event listener to call onLoad function when page gets fully loaded
else document.addEventListener("DOMContentLoaded", onLoad);
var divIsActive = false;
/**
* Function to be called when page is fully rendered
* #returns {void}
*/
function onLoad() {
// Find button
var button = document.querySelector("#toggle");
// Check if the button was found
if (button instanceof HTMLElement) {
// Add an click event listener
button.addEventListener("click", toggle);
}
}
/**
* Toggles the div to open/close
* #returns {void}
*/
function toggle() {
// Find Div
var div = document.querySelector("#div-3");
// Check if the div was found
if (div instanceof HTMLElement) {
// swap the boolean value
divIsActive = !divIsActive;
// change the classname based on the boolean value
div.className = divIsActive ? "active" : "";
}
}
})();
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
#container {
position: relative;
height: 100%;
width: 100%;
}
#div-1, #div-2 {
height: 100%;
float: left;
width: 50%;
}
#div-1 {
background-color: brown;
}
#div-2 {
background-color: pink;
}
#div-3 {
background-color: green;
pointer-events: none;
transition: all 0.4s;
position: absolute;
height: 40%;
opacity: 0;
right: 0;
left: 0;
top: 0;
}
#div-3.active {
pointer-events: all;
opacity: 1;
}
#toggle {
position: absolute;
cursor: pointer;
z-index: 99999;
right: 10px;
top: 10px;
}
<div id="container">
<button id="toggle">Toggle</button>
<div id="div-1"></div>
<div id="div-2"></div>
<div id="div-3"></div>
</div>
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%;
I have a JSP, that includes 3 more JSPs. On click of a button on one of these included JSPs, I need to gray the whole window content. How this can be done? I was trying to append a child(image) to the parent window but its not working.
You need to add a <div class="glasspane"> to the <body> element, having the following style:
.glasspane {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.2;
}
Of course, this <div> element should be removed when appropriate.
Here is some jQuery I've used for a similar purpose:
$('body')
.prepend('<div class="veil"> </div>')
.children('.veil')
.css({ position:'fixed' ,top:'0' ,left:'0' ,width:'100%' ,height:'100%'
,opacity:'0.5' ,backgroundColor:'gray' ,zIndex:7 })
;
I have a table with three rows. I have 1 main #container div (height 100%) and inside it is a table with 3 rows. The first and last row have fixed size content. In the second row is a #content div with 100% height and overflow:auto. (actually the table has a lot more rows and the page has more divs, but for the sake of clarity i scalled it down for this question).
If there is more content in #content than fits, a vertical scrollbar should appear next to that div's content. However, a vertical scrollbar appears at the browser window itself. When i set the #content div to a fixed size however, that vertical scrollbar does appear in the correct place.
I must be doing something wrong, or maybe misinterpreting something :) Any ideas? Maybe there's jquery/javascript out there that can monitor the page and when loading/resizing the browser, scales down that particular div?
EDIT: I just created a small example: http://wierdaonline.com/softest.html
In the ideal situation, the whole thing (table) should always be visible in the browser window, without any window scrollbar other than in the #content div.
It's much easier to create a fixed header and footer without using tables and using fixed position:
#header
{
position: fixed;
top: 0;
height: 20px;
}
#middle
{
position: fixed;
top: 20px;
bottom: 20px;
overflow: auto;
}
#footer
{
position: fixed;
bottom: 0;
height: 20px;
}
Set overflow: scroll in the div. You shouldn't need Javascript for this.
The #container 100% is 100% of the page height which can be more than the window height. Setting html and body height to 100% (=100% of the window) could help, depending on what you are trying to achieve.
Edit: these changes should work for the height, a similar thing can be done with the width if you so desire.
javascript:
window.onresize = function() {
var tehdiv = document.getElementById('content2');
if($(window).height() < 100) { tehdiv.height = 50; }
else if($(window).height() > 2000) { tehdiv.height = '100%'; }
else { tehdiv.height = ($(window).height()/2);}
};
the content div's table:
<td valign='top' id='content2'>
Would something like this work?
window.onresize = function() {
var minh = 50;
var minw = 50;
var tehh = (window.height/2);
var tehw = (window.width/2);
var tehdiv = document.getElementById('yourdiv');
tehdiv.height = (tehh > minh)? tehh : minh;
tehdiv.width = (tehw > minw)? tehw : minw;
};
That would make it scale to half the window size, as long as it can be bigger whan 50. You could also change the min to max and make it perform tehdiv.height = 100% at that point.
Well since you have no choice but to use tables, I modified the HTML, but actually left the CSS the same from the demo I posted in a comment above, check it out here - the only problem I've found is in IE7 where the header and footer table cell doesn't go 100% across:
CSS
#header, #footer {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 20px;
border: #000 1px solid;
margin: 5px;
}
#footer {
top: auto;
bottom: 0;
}
#content {
position: absolute;
top: 25px;
left: 0;
bottom: 25px;
right: 0;
overflow-y: auto;
background: #ddd;
margin: 5px;
}
HTML
<table id="page">
<thead>
<tr><td id="header">Header</td></tr>
</thead>
<tfoot>
<tr><td id="footer">Footer</td></tr>
</tfoot>
<tbody>
<tr><td><div id="content">Content goes here</div></td></tr>
</tbody>
</table>
It's still better to not use tables, if you get around to switching the HTML around.