Entire div clickable with CSS - javascript

I'm using dropzone.js for Ajax uploading of images. The problem is that I have the following div containers
<div id="images-container" class="ui-sortable dz-clickable">
<div id="file-image">
<p><b>Add images</b></p>
<small>Click or drag&drop here</small>
</div>
</div>
And dropzone.js is initialised as follows:
$("#file-image").dropzone();
My css is looking like this:
#file-image {
border: 1px solid rgb(187, 187, 187);
background: rgb(247, 247, 247);
box-sizing: border-box;
float: left;
display: block;
position: relative;
z-index: 20;
cursor:pointer;
}
The problem is that when I click on the text (Add images or Click or drag & drop.) the plugin cannot be activated. How can I make the entire #file-image div clickable?

I've changed your div to a form and added an action and it seems to be working fine.
HTML
<div id="images-container" class="ui-sortable dz-clickable">
<form action="/action" id="file-image" class="dropzone">
<p><b>Add images</b></p>
</form>
</div>
This an extract from the official website - "Dropzone will find all form elements with the class dropzone, automatically attach itself to it, and upload files dropped into it to the specified action attribute."
So I think you need to use the action attribute to get it to work.
Codepen - https://codepen.io/anon/pen/aGKBgY

Related

How to create a modal that opens when a function is called?

I'm having issues attempting to create a modal that opens when a certain area of an image map is clicked.
Below is the code from my HTML file:
<head link rel="stylesheet" href="ryanspagecss.css"></head>
<body>
<div class="main">
<script src="lotrpage.js"></script>
<map name="lotrmap">
<area shape="poly" href="" coords="405, 50, 463, 80, 461, 141, 408, 173, 354, 144, 353,81" onclick="playerSelect()">
</map>
<div id="selectModal" class="selectModal">
<p>This is some text in the modal...</p>
</div>
Below is my CSS:
#selectModal {
width: 500px;
overflow: hidden;
background: pink;
box-shadow: 0 0 10px black;
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
padding: 10px;
text-align: center;
display: none;
}
Below is my JavaScript:
function playerSelect(){
//Show Modal
let selectModal = document.getElementById('selectModal');
selectModal.style.display = "block";
}
I understand that in order to change my Div from invisible to visible I need to change the display value to block from none - Which is what I've attempted to do with my JavaScript function.
When I select my image it does nothing. - What am I missing here?
When using document.getElementById('selectModal'), the function will try to find an element in your html whose id equals selectModal. In this case, your modal has the id selectOwner.
You should try to change your code to document.getElementById('selectOwner')
If you want your function to find the modal using the class name, you would have to use document.getElementsByClassName('selectModal'). Just consider that this will return something like an array of divs that contain this class (it's actually a HTMLCollection, not an array)
You have no element with ID selectModal. Try adding id="selectModal" to your div.
After realising a commenter's code and some minimal code of mine worked in JSFiddle - tested to see if my CSS would change the colour of some random text.... it didn't.
It turned out that I had my CSS linked incorrectly. No syntax errors were returned so hadn't spotted it.
Instead of
<head link rel="stylesheet" href="ryanspagecss.css"></head>
It should have been
<head> <link rel="stylesheet" href="ryanspagecss.css"> </head>
yes you are correct on understanding the difference between display: "none" and display: "block"
I tried to run your code in my local which doesn't display anything in screen.
There are two possible solutions here
Please try and use this map & area tags with an image that help you display something in html which lets you click. (link)
You can try to add a simple tag that displays some text in your html with same on click function. Paste this below code in your html and when you click, it should let you open the modal.
<div onclick="playerSelect()">
<p>
Hi, Please click me to see the modal
</p>
</div>

How to target only current hovered element in Vanilla Javascript

I am building a web page for homework. I am trying to figure out how to make a child div appear whenever I hover over the parent div at the bottom, sort of like a dropdown menu. The thing is that the child div has a class and I want only the element that is hovered to show the child div from the parent div. More specifically, the parent div I am talking about is <div class="inside-box" onMouseOver="showDDContent();" onMouseOut="hideDDContent();> and the child div I am talking about is <div class="dropdown-content">. I want to use Vanilla Javascript (preferred) or CSS (not preferred).
TLDR: How do I target only current hovered element from HTML/CSS class in Vanilla Javascript?
How do I do that?
I got this far:
HTML
<!--Lab 1-->
<!--Each individual box.-->
<div class="box">
<!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
<div class="inside-box" onMouseOver="showDDContent();" onMouseOut="hideDDContent();">
<!--The div with an image in it. Top one inside the box div.-->
<div>
<a href="Lab_01/LB1_WeiJianZhen_DD.html">
<!--Get an image with 300px width by 200px height. Make it responsive.-->
<img src="../../../Visual Content/placeholder.jpg" alt="Under Contruction" class="imgGrids">
</a>
</div>
<!--The div that contains the heading or title of the lab.-->
<div class="txtBar">
<h3>Lab 1</h3>
</div>
<!--The div that drops down to explain the lab with some text.-->
<div class="dropdown-content">
<p>My first website ever made in an HTML file! Describes a bit about the process of making a very basic website like mine.</p>
</div>
<!--End of inside box div.-->
</div>
<!--End of box div.-->
</div>
CSS
/*Creates the styling of the dropdown box.*/
.dropdown-content {
display: none;
position: relative;
background-color: #62ff36;
box-shadow: 0px 8px 16px 0px rgba(56, 255, 42, 0.8);
padding: 12px 0px;
z-index: 1;
}
JavaScript
function showDDContent() {
document.getElementsByClassName("dropdown-content").style.display = "block";
}
function hideDDContent() {
document.getElementsByClassName("dropdown-content").style.display = "none";
}
The easiest, most performant and overall definitely best way to solve this problem clearly is using CSS.
.inside-box:hover .dropdown-content { display: block; }
If for whatever reason you insist go with Javascript (which I do explicitly not recommend), you are going to have to add 2 listeners to each .inside-box, one for mouseenter, the other for mouseleave:
document.querySelectorAll('.inside-box').forEach(insideBox => {
insideBox.addEventListener('mouseenter', () => insideBox.querySelector('.dropdown-content').style.display = 'block');
insideBox.addEventListener('mouseleave', () => insideBox.querySelector('.dropdown-content').style.display = 'none');
})
Using inline event listeners like you suggested is considered very bad practice, so don't try that.

Position my image next to a carousel

On my website i have a gray test image and i need to position it next to my image slider. I have tried putting them in the same div but it hasnt worked out as well as i though it would. Could someone show me how to do this within my code. I am new so i am confused with this more than others would be.
Thanks!
My website: http://rootforsite.azurewebsites.net/
Press f12 for code. The image slider and the image are near the bottom.
You can change the div css to include (in this case it should be the div with the id "containers" I think)
display: inline-block;
or since you're using lovely bootstrap you can add classes to both the divs to keep them lovely and gridified! :)
E.g.
<div id="container" class="col-xs-6">...</div>
<div id="containers" class="col-xs-6">...</div>
HTML
<div id="container">
<div class="inner"></div>
<div class="inner"></div>
</div>
CSS
#container
{
width: 300px;
height: 300px;
background-color: yellow;
}
.inner
{
width: 100px;
height: 100px
float: left;
background-color: blue;
}

Auto scaling text to fit within a div

Hello there I have an application that shows data in a grid fashion here is one of the "blocks" out of the grid below. Within the Divs that fill out data from a JSON file and fills the divs.
The data is limited to 4 characters (a number between 0 and 9999) for all the items. However when there is 1 character in there it looks too small because i have to keep the font size fairly small so when there is more than 1000 it doesn't overflow.
My question is what would be the best way to automatically adjust the font size for each div independently so that it always fit's at a maximum size
<div class="box">
<div class="Top">ZW01025</div>
<div id="ZW01025" class="Midbox">
</div>
<div id="ZW01025b" class="Midbox">
</div>
<div id ="ZW01025C" class="BottomboxPercent">
</div>
<div id ="ZW01025D" class="BottomboxPercent">
</div>
<div id ="ZW01025p" class="Bottombox">
</div>
</div>
He is a fiddle of the full thing, it doesn't really fit in Js fiddle well http://jsfiddle.net/RYU54/3/
If you are ok with using a JavaScript solution I would check out flowtype.js
http://simplefocus.com/flowtype/
Add font size in the .Top css class, lik this:
.Top{
height: 20%;
width: 90%;
margin: 1px auto;
background-color: #596163;
text-align: center;
color: white;
font-size: 30px; /* added */
font-size: 3.5vw; /* added */
...
}
I made a script to automatically scale text to fit the surrounding div, it should work in your case:
https://github.com/jeremiahrose/perfectFit.js

Strange z-index behavior in CSS

I am trying to use z-index on some elements in a page. Basically, I have a contact form with a waiter and a response box. The contact form is used on the page in a different place and is working fine ...
Send button is pressed, overlay-1 covers the form, ajax response triggers a thank-you box that covers overlay-1
Now this all works fine for the form that is positioned relatively on the page. However, I have the exact same form that pops up on-top of everything but my z-indexes aren't being honoured even though the form uses the same classes.
Can anyone give me any pointers ?
Alex
HTML:
<div id="popuporderform" class="orderform">
<!-- .resultBox injected here -->
<form method="post">
<input name="name" type="text" />
<input class="send" type="submit" value="Send" />
</form>
</div>
<!-- .orderspinner injected here -->
CSS:
/* -- ORDER FORM -- */
div.orderform {
width: 220px;
background-color: #fff;
height: 300px;
}
// This ID is for the pop up version of the form and is not used in the
// form that is within the layout of the page
#popuporderform {
position: absolute;
top: 100px;
left: 100px;
z-index: 200;
}
// this is the overlay with spinner in it -- this DOES overlay the form
.orderspinner {
position: absolute;
opacity: 0.9;
filter: alpha(opacity=90);
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
z-index: 250;
background: #fff;
}
// This is the thank-you box - it should appear over the .orderspinner (but isn't)
.resultBox {
display: block;
width: 150px;
height: 100px;
background-color: #fff;
position: absolute;
z-index: 300;
border: 1px red solid;
color: #000;
}
FIXED:
I injected the overlay into the div rather than outside it therefore putting it into the same z-index context.
HTML:
<div id="popuporderform" class="orderform">
<!-- .orderspinner injected here -->
<!-- .resultBox injected here -->
<form method="post">
<input name="name" type="text" />
<input class="send" type="submit" value="Send" />
</form>
</div>
I had trouble with this a while back. My problem turned out to be connected to stacking context, basically when you have an element with a z-index it starts a new stacking context in within it meaning that the z-index of elements within will not be compared with z-index of elements out side.
What adds to the complexity of things is that IE 6-7 (I don't know about 8) starts a new stacking context when elements are positioned (absolute, relative).
so i would check the elements of your popup down to the root and try and give them a high z index and see if that fixes it. with a bit of trial and error you can probably find the problem.
Does the code that's supposed to be in the background use z-index? Have you tried changing the z-index to ridiculously large values to see if it's competing with some other component?
Hard to think of much else blindly.

Categories

Resources