Develop Reference

Dropzone issues - there are spots inside the dropzone that do not work. Dropping files there will open them in browser

File manager = html container that contains a table-like list of files.
I have made a drop zone as big as the file manager instead of making a designated drop-zone.
I got inspired by this design:
https://www.youtube.com/watch?v=seXXWRygRkY
I only took the drop zone highlight idea from this video.
If you watch the video you will see that at 0:15 he goes over an element and the drop-zone blinks. This happens with my drop zone in A LOT of places.
My current file manager with div hierarchy :
<template>
<section
#dragover.prevent="dragOk = true"
#drop.prevent="addFile"
#drop.stop.prevent="dragOk = false"
#dragleave="dragOk = false"
>
<div class="top_container">
<div :class="`mid_container ${dragOk ? 'drag-ok' : ''}`">
<div class="title">
<h1>
File
<span>Manager</span>
</h1>
</div>
<!-- TODO: File Manager Component -->
<div v-cloak class="file-manager-container">
<div class="file-line header">
<div class="file-name">File name:</div>
<div class="file-size">Size:</div>
<div class="action-buttons">Actions:</div>
</div>
<div
:class="`file-line ${file.status ? 'wrong-file' : ''}`"
v-for="(file, index) in currentFiles"
:key="index"
>
<!-- left -->
<div class="file-name">
{{ file.name }}
<span v-if="file.status"> - {{ file.status }}</span>
</div>
<!-- middle -->
<div class="file-size">{{ file.size }} kb</div>
<!-- right -->
<div class="action-buttons">
<span>
<i class="far fa-edit"></i>
</span>
<span #click.prevent="currentFiles.splice(index, 1)">
<i class="fa fa-trash" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
<!-- <span v-if="uploading" class="progress-bar">
<progress :value="progress" max="100">{{progress}}%</progress>
</span>-->
<div class="upload-message" v-if="message">
<div>{{ message }}</div>
</div>
</div>
</div>
</section>
</template>
<style scoped>
.drag-ok {
background: pink;
opacity: 0.5;
z-index: 100;
}
</style>
Issue:
If I drag items over some borders or text the dropzone blinks from pink to the default color. If I drop files when the dropzone isn't pink, the browser will open said file.
Here is a fiddle to ilustrate the problem: http://jsfiddle.net/m3wzbyoL/23/
You will have to select a file from your OS, drag it over the area and move it around there and you will see crazy flashes.
Adding pointer-events: none; to the .drop container will cancel every event from the child element and I do not want this.
If I add pointer-events: none; to .drop .highlight will make the drag events to not work.

Two things:
Ensure you are only toggling the drag-ok class on the dragenter and dragleave events. dragover will fire every few hundred milliseconds and is only for capturing events as you are dragging.
Disable pointer-events on all the children of the drop-zone target in CSS when the drag-ok class is active (not the drop-zone target itself). This will ensure that no other events from children will interfere while dragging.
Note: code provided as a minimal example, doesn't match code in question exactly..
$('.drop').on('dragenter', function(e) {
$(this).addClass('drag-ok');
})
.on('dragleave', function(e) {
$(this).removeClass('drag-ok');
})
.drop {
height: auto;
width: 200px;
background: #aaa;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.drop.drag-ok {
border: 2px dashed black;
background: black;
opacity: 0.5;
}
/**
* The important bit:
* disable pointer events on all children elements of
* the drop zone element *only* when the dragenter
* event has fired (.drag-ok is active)
*/
.drop.drag-ok * {
pointer-events: none;
}
.img {
height: 100px;
width: 100px;
background: red;
margin: 5px 0;
}
.img:hover {
background: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div draggable="true">drag me</div>
<div class="drop">
<span>Drop here</span>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</div>

jQuery: How can i put on each a href link iframe will opened in center of page with center aligment?

I found a way to solve this issue about closing iframe element by using jQuery. But it has opened 2 more issues. How can I use a href link opens an iframe object center of page of this way to replace all menu items. And when I close the content in iframe windows all element does recovery in back state?!
I post sample video which to see the theme of site I want iframe to stay in the same page like transparency defined in css as rule. I have some ideas to put on every link on menu iframe with different page conents and at bottom to paste some button for close. I hope someone has ideas to write. I'd be thankful!
Video: here!
jQuery code:
$('document').ready(function(myFunc){
'use strict';
var htmlString;
var oldState = $('#main-page').clone();
$('iframe').addClass('.decoration');
$('#aboutWin').click( function(e){
event.preventDefault();
htmlString = $(this).html('<iframe src="./content/about.html"/>');
$('#main-page').replacewith(htmlString);
});
$("#btncls").on('click', function(){
/*var iframes = document.querySelectorAll('iframe');
for (var i = 0; i < iframes.length; i++) {
iframes[i].parentNode.removeChild(iframes[i]);
}*/
$('html').detach();
$('#main-page').append(oldState);
if($('#btncls').onclick()){
return myFunc;
};
});
});
PageCode here:
<body>
<div id=main-page class="decoration">
<div id="cover-gif">
<div id="center">
<ul class="main-menu">
<li><a id="index.html" class="fontEuroStreet cool-link">Home</a></li>
<li><a id="storiesWin" class="fontEuroStreet cool-link">Stories</a></li>
<li><a id="scriptsWin" class="fontEuroStreet cool-link">Scripts</a></li>
<li><a id="downloadsWin" class="fontEuroStreet cool-link">Downloads</a></li>
<li><a id="aboutWin" class="fontEuroStreet cool-link">About</a></li>
</ul>
</div>
<div id=short-content>
<h1 class="head-text fontPolyReg">Welcome to Polyveil site!</h1>
<p class="short-text fontEuroRoad">Hello! In this site will be sharing mysterious things about universe, new age technologies, using SCM/CLEO scripting in GTA Vice City.</p>
</div>
</div>
</div>
I re-post here code from about.html:
<cc>
<body style="width: 320px; height: 240px;" class="decoration">
<img src="../_main_src/info.png" style="clear both; float: left; margin-left: 24px;" />
<h1 class="head-text fontXoloB" style="float: center; padding-top: 16px; padding-left: 86px;">About</h1>
<div class="h-line" style="margin-left: 32px; padding-left: 2px;">
<iframe src="../content/about%20mission.txt" class="decoration infoblock fontXoloReg" style="text-align: left; float: left; margin-left: 4px; position: relative; color: mediumaquamarine;"></iframe>
</div>
<div class="h-line" style="margin-top: 482px; margin-left: 32px;"><input id="btncls" type="button" value="Close" class="button cool-link fontXoloB" /></div>
</cc>

What would be the best way to make a sort of drop-down-more-info div?

I have 4 divs with a more-info button on the bottom of each, like so:
http://codepen.io/anon/pen/VpVbPq
And when a user presses ' more info ' I would like for it to extend to the bottom and show extra info, obviously.
The problem is under the more-info div, text is seen, but what if I want to hide whats under it, even if its opacity is 0.6 ?
I thought it would've been the best if I draw what I need, so here:
Codepen code below:
html
<body>
<div class="wrapper">
<div class="info">
<p>
dummy text
</p>
<div class="more-info">more info</div>
</div>
<div class="info"><div class="more-info">more info</div></div>
<div class="info"><div class="more-info">more info</div></div>
<div class="info"><div class="more-info">more info</div></div>
</div>
</body>
css
.wrapper {
width: 1045px;
margin: 0 auto;
}
.info {
width: 500px; height: 200px;
background-color: #1A5AB6;
display: inline-block;
margin: 10px;
position: relative;
font-size: 20px;
overflow: hidden;
}
.more-info {
width: 100%; height: 40px;
background-color: #0C1B44;
bottom: 0; left: 0;
display: inline-block;
position: absolute;
font-size: 20px;
color: white;
line-height: 35px;
text-align: center;
opacity: 0.6;
}
.more-info:hover {background-color: #010716;}

In order to have the text expand, you can use a little jQuery to set the height to automatically adapt to however much text there is, and hide the 'more info' button entirely:
$(".more-info").on("click", function() {
$(this).css("opacity", "0");
$(this).parent().css("height", "auto");
});
With regards to not having the text visible behind the 'more info' button, you would need to set the opacity to 1:
.more-info {
opacity: 1;
}
This naturally distorts the colour a little, but you can always change the background colour and hover colour to cover this.
I've created an updated pen showcasing this here.
Hope this helps! :)

change your class selector definition as shown below:
.more-info {
width: 100%; height: 20%;
background-color: #0C1B44;
font-size: 20px;
color: white;
display: block;
text-align: center;
opacity: 0.6;
}
Then add this css for your paragraph element:
p {
height: 75%;
overflow: hidden;
margin: 5px;
}

Your question: "what would be the best way to make a sort of drop-down-more-info div?"
There is a built in function in Boot Strap that allows you to use a "data" class that does all the crunching for you. Just call on their css and js files externally or host on your server. Familiarize yourself with their data classes and call on their css/js classes to simplify previously arduous coding, like revealing a hidden DIV on click!
Note the data-toggle="collapse" and data-target="#more_info" lines in my div that holds the span tag that is the control for revealing the hidden <div id="more_info">:
`<div data-toggle="collapse" data-target="#more_info"><span class="glyphicon glyphicon-search"></span> <span title="Click for more info">more info</span></div>`
Then note the class in my hidden div. Note the id of the hidden div and the data-target #more_info. This can be used for classes as well, ie: .more_info. Everything is explained in more detail at bootstrap Github or their official site: http://getbootstrap.com/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="wrapper">
<div class="info">
<p>
Honestly, Bootstrap would be the easiest way to accomplish this without a doubt. Just click the more info button below.
</p>
<div data-toggle="collapse" data-target="#more_info"><span class="glyphicon glyphicon-search"></span> <span title="Click for more info">more info</span></div>
<div id="more_info" class="collapse">Some hidden infomration you ony want to be seen when the user click on the control link.</div>
</div>
or add three divs floating perfectly without all the css, each with drop downs more info.
<body>
<div class="wrapper row">
<div class="col-md-4">
<p>
Honestly, Bootstrap would be the easiest way to accomplish this without a doubt. Just click the more info button below.
</p>
<div data-toggle="collapse" data-target="#more_info">
<span class="glyphicon glyphicon-search"></span>
<span title="Click for more info">more info</span> </div>
<div id="more_info" class="collapse">
Some hidden information you only want to be seen when the user click on the control link.
</div>
</div>
<div class="col-md-4">
<p>
Some other information we want to have a hidden drop down with more info for.
</p>
<div data-toggle="collapse" data-target="#more_info2">
<span class="glyphicon glyphicon-search"></span>
<span title="Click for more info">more info</span>
</div>
<div id="more_info2" class="collapse">
Some hidden information you only want to be seen when the user click on the control link.</div>
</div>
<div class="col-md-4">
<p>
Yet another div with info that has a drop down menu for more info included below.
</p>
<div data-toggle="collapse" data-target="#more_info3">
<span class="glyphicon glyphicon-search"></span>
<span title="Click for more info">more info</span>
</div>
<div id="more_info3" class="collapse">
Some hidden infomration you ony want to be seen when the user click on the control link.
</div>
</div>
Best of luck.

Change height of child element on button/link press using ::before

I've got an Org Chart that will run on mobile devices nearly completely different from how it runs on desktop. Everything is as it should be with one minor problem. My Org Chart features the ability to click a person which then slides an accordion down to provide more information about that particular person along with contact information. This feature is great on desktop but when it runs to mobile, my connectors are based on fixed values in the CSS. I need the ::before height to be changed when the accordion is extended to counter this. I've provided photos below for further clarification.
Images of before and after: http://imgur.com/a/x7JSn
Now my main concern is that I've put myself in a position where I'll have to write totally different functions for each element in order for that particular element to connect.
Here's how my HTML is laid out:
<ul>
<li class="director">
<div id="ss_menu">
<a href="javascript:void(0);" class="ss_button">
<span class="title">Director </span><br/>
<span class="sm-hide">Name of Person</span>
</a>
<div class="ss_content">
<img src="img/person.jpg"
width="70px"
style="border: 1px solid #000;"/><br/>
Telephone: 555-555-5555<br/>
Email: emailaddress#email.com<br/>
Room: A123<br/>
Mail Stop: A123
</div>
</div>
<ul>
<li>
<div id="ss_menu">
<a href="javascript:void(0);" class="ss_button">
<span class="title">Assistant to the Director </span><br/>
<span class="sm-hide">Name of Person</span>
</a>
<div class="ss_content">
<img src="img/person.jpg"
width="70px"
style="border: 1px solid #000;"/><br/>
Telephone: 555-555-5556<br/>
Email: emailaddress#email.com<br/>
Room: A124<br/>
Mail Stop: A124
</div>
</div>
<ul>
<! -- THE CODE CONTINUES FOR A WHILE BUT IS LAID OUT THE SAME WAY -->
And then here is the general layout of the vertical lines using the ::before keyword:
.director::before {
content: "";
border-left: 1px solid #ccc;
position: absolute;
height: 165px;
margin-left: -30px;
z-index: -1;
}
.deputydirector::before {
content: "";
border-left: 1px solid #ccc;
position: absolute;
height: 1442px;
margin-left: -30px;
z-index: -1;
}
I'm essentially trying to increase the height of the vertical lines by the amount that the accordion opens.
Lastly here is the jQuery code I'm using for the accordion which I'd like to use as a catch-all for managing my vertical lines as well.
jQuery(function() {
jQuery('.ss_button').on('click',function() {
jQuery('.ss_content').slideUp('fast');
jQuery(this).next('.ss_content').slideDown('fast');
});
});

Enter modal application state until the next click with Jquery

After having limited success with drag&drop mainly because the sluggish and jumpy behavior of slow mobile devices, I want to implement a modal approach to moving an element from a to b like this:
User clicks on an item. The item is visually marked by setting a css class.
User clicks on a target item. The marked item is instantly moved to the target item.
Alternatively:
User clicks anywhere but on a target item: marked item is unmarked and nothing else happens.
So the idea is to enter a modal state in (1) and leave the modal state in the (2) or the (3) action.
I have no problem implementing (1) and (2). What I don't now is how to best implement (3). To what should I bind a general "anywhere else" click?

I too had run into this problem long back. So I came up with this (hacky?) solution.
FIDDLE
Basically it uses a "proxy" div to simulate "anything but the content".
HTML
<div id="wrapper">
<div id="general_everywhere"></div>
<div class="button">Button here</div>
<div class="button">Button here</div>
<div class="button">Button here</div>
<div class="button">Button here</div>
<div class="button">Button here</div>
<div class="button">Button here</div>
<div class="button">Button here</div>
<div class="button">Button here</div>
<div class="button">Button here</div>
<div class="button">Button here</div>
</div>
CSS
#general_everywhere
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
_background: blue;
display: block;
}
.button
{
position: relative;
padding: 10px;
width: 100px;
margin: 5px;
background: #efefef;
}
.clicked
{
background: red;
}
jQuery
$('.button').click(function(){
$(this).toggleClass('clicked');
});
$('#general_everywhere').click(function(){
$('.button').removeClass('clicked');
alert('You clicked on everywhere! You are GOD!');
});
Hope it helps.