I am preparing a simple javascript exercise to teach college-level students in graphic design how to make things interactive on the web.
I am new to javascript as well, and I have written a simple script that shows a modal box when you click a button. The problem is, I would have to make a new function for every single button on my page. Is there a way to have one function? Below is the code I have so far.
I have also made a jsfiddle but the modal isn't popping up. It works on my computer. I've also uploaded my code to my website.
<!doctype>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
background-color: rgba(220, 220, 220, 1);
}
#mainContent {
width: 960px;
height: 680px;
margin: 80px auto 0 auto;
background-image: url(home.png);
border: 1px solid gray;
border-radius: 8px;
background-color: white;
}
#button1 {
position: relative;
top: 250px;
left: 500px;
width: 40px;
}
#closeButton {
position: absolute;
top: -20px;
right: -20px;
width: 40px;
}
#infoBox.one {
position: relative;
top: 250px;
left: 530px;
visibility: hidden;
width: 300px;
margin: 0;
background-color: white;
border: 1px solid black;
padding: 15px;
text-align: center;
border-radius: 8px;
}
</style>
<script>
function infoBox() {
button = document.getElementById("infoBox");
button.style.visibility = (button.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
</head>
<body>
<div id="mainContent">
<a href='#' onclick='infoBox()'>
<img id="button1" src="button.png" />
</a>
<div id="infoBox" class="one">
<p>Your information goes here.</p>
<a href='#' onclick='infoBox()'>
<img id="closeButton" src="close.png" />
</a>
</div>
</div>
</body>
</html>
The simple approach you can try is to make use of the fact that click events bubble up the DOM tree (event delegation). So using this idea you can bind one event handler to parent container (for example body) and handle all clicks from there:
document.body.addEventListener('click', function(e) {
if (e.target.parentNode.className === 'btn-modal') {
infoBox();
}
}, false);
Note: I'm checking parentNode's class because click happens on the image element, which is child of the link with .btn-modal. Here is the version of the generic way to handle delegated events without relying on parent nodes being what we know: http://jsfiddle.net/4w37mkse/2/ if you are interested.
In above case I denote the buttons that we want our listener to handle with specific class:
<a href='#' class="btn-modal">
<img id="button1" src="http://www.jordankennedy.com/example/button.png"/>
</a>
This is very naive and basic example but it demonstrates the idea.
Demo: http://jsfiddle.net/4w37mkse/1/
Related
I am working currently on a project and i haven't found a solution how to realize it yet. I am not asking for the solution. I would be very thankful if someone could give me some hints or tell me in which direction i could go to reach my goal.
Currently i am thinking about trying to solve it by programming an web-application. But i am not sure if a windows forms application would even be better. I am also open for other solutions.
My goal is following:
I have some (real world) documents which are being scanned and afterwards scanned with an OCR-Scanner, which generates some PDF-Documents.
Next i want to open one of these generated PDF-Files in a User Interface which shows me the PDF. The user should be able to select some (one after another) text-blocks, which are downloaded from a database, and drag them over the pdf and drop it at some position.
Now i want to save or print the pdf with the text-blocks, just as the user sees it. Kind of making a screenshot of the pdf but resulting in a pdf file with the same dimensions as before.
Currently i have no idea how to "merge" these two.
Which technologies should i use. What would you recommend me. Would a web-application or something native be better suitable for that purpose.
I have written some kind of mockup to show what i mean. Please put some pdf named "testpdf.pdf" to the same folder if you want to test it.
It works on Chrome ... not sure about the others.
Thanks a lot
Kerem
var movabelelements=document.getElementsByClassName("moveableElement");
Array.from(movabelelements).forEach(element => {
dragElement(element);
});
function dragElement(elem){
var pos1=0,pos2=0,pos3=0,pos4=0;
elem.onmousedown=dragMouseDown;
function dragMouseDown(e){
e=e||window.event;
e.preventDefault();
pos3=e.clientX;
pos4=e.clientY;
document.onmouseup=closeDragElement;
document.onmousemove=elementDrag;
}
function elementDrag(e){
e=e||window.event;
e.preventDefault();
pos1=pos3-e.clientX;
pos2=pos4-e.clientY;
pos3=e.clientX;
pos4=e.clientY;
elem.style.top=(elem.offsetTop -pos2)+"px";
elem.style.left=(elem.offsetLeft-pos1)+"px";
}
function closeDragElement(){
document.omouseup=null;
document.onmousemove=null;
}
}
function printPDF(){
alert('Der Bericht sollte jetzt gedruckt werden');
}
function highLightAllValues(){
Array.from(movabelelements).forEach(element => {
element.classList.add("highlighted");
});
setTimeout(function(){
Array.from(movabelelements).forEach(element => {
element.classList.remove("highlighted");
});
}, 1500);
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1,h2{
text-align:center
}
.pdffile{
height: 100%;
width: 100%;
}
body,html{
height: 100%;
width: 100%;
}
#values_list_values{
padding: 15px;
}
#values_list{
text-align: center;
}
#values_list_values div{
margin: 15px;
border-bottom: solid;
border-width: 1px;
}
#values_list_values div:hover{
color: red;
}
#values_list_values div span{
margin: 10px;
}
.moveableElement{
border-style: solid;
border-color: transparent;
position: absolute;
z-index: 20;
padding: 20px;
}
.moveableElement:hover{
border-style: solid;
border-color: red;
cursor: move;
}
#values_list{
position: relative;
width: 20%;
display: inline-block;
padding: 10px;
padding-bottom: 50px;
}
#pdfFileWrapper{
width: 80%;
float: left;
height: 100%;
}
#highLightAllValuesButton{
width: 90%;
display: inline-block;
padding: 20px;
margin: 10px;
}
.highlighted{
border-style: solid;
border-color: red;
border-width: 2px;
}
#printButtonArea{
position: fixed;
bottom: 10px;
right: 10px;
width: 20%;
height: 50px;
line-height: 50px;
}
#printButtonArea button{
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Vorschau</title>
<link rel="stylesheet" href="vorschau.css">
</head>
<body>
<h1>Druckvorschau PDF</h1>
<div id="pdfFileWrapper">
<object class="pdffile" data="testpdf.pdf" type="application/pdf">
alt : PDF-Vorschau Fehlgeschlagen - Bitte anderen Browser Probieren
</object>
</div>
<div id="values_list">
<div id="printButtonArea">
<button onclick="printPDF()">Print</button>
</div>
<h2>Werte aus der Datenbank</h2>
<button id="highLightAllValuesButton" onclick="highLightAllValues()">Show all text blocks</button>
<div id="values_list_values">
<div>
<h3>One</h3>
<span>xy</span>
</div>
<div>
<h3>Material ID</h3>
<span>12</span>
</div>
<div>
<h3>Some Other ID</h3>
<span>some other id</span>
</div>
<div>
<h3>Identifikation</h3>
<span>lastvalue</span>
</div>
</div>
</div>
<div id="1" style="top:200px;left:100px" class="moveableElement">
Example value
</div>
<div id="2" style="top:250px;left:150px"class="moveableElement">
Car One
</div>
<div id="3" style="top:300px;left:200px" class="moveableElement">
<span>whatever</span>
</div>
<div id="4" style="top:350px;left:250px" class="moveableElement">number 12
</div>
</body>
<script src="vorschau.js"></script>
</html>
I'm making a dashboard page for posting articles for my website.
i have a sidebar and a section where my posting page will appear but that page is not taking up the full size of section...
here is the screenshot of my problem https://ibb.co/kuZBQm
.container {
width: 100%;
height: auto;
}
aside {
float: left;
width: 200px;
height: 500px;
border: 1px solid;
}
section {
width: 100%;
height: 500px;
border: 1px solid red;
}
<div class=" container">
<aside>
<button> Top Games</button>
</aside>
<section id="section"></section>
</div>
<script>
function load_topgamespost() {
document.getElementById("section").innerHTML = '<object type="text/html" data="/topgames/topgamespost"></object>';
}
</script>
So your section is the correct size, the problem is with the object element inside it.
Use
section object{
width:100%;
height:100%;
}
body{
height: 100vh;
padding: 0;
margin: 0;
}
try this style in your body tag i think this suits in your problem
I have this menu in HTML / CSS:
HTML:
<div id="outer">
<div id="inner">King Kong</div>
<div id="inner">Table</div>
CSS:
#inner {
background-color: #547980;
width: 130px;
margin-left: 8px;
}
#inner:first-child {
background-color: #547980;
width: 130px;
margin-left: 8px;
margin-top: 8px;
}
div {
border-radius: 5px;
border: 2px solid black;
}
and I want load page in jQuery.
It can be like printer, after click on link from menu it should start from margin-left position 140 and printing to margin-right position 20 or
Loading like book when you go to another page.
But I don't know how to do it. Any advice please?
With jQuery you can use this script:
$('body').on('click', 'a', function(event) {
event.preventDefault();
var href = $(this).attr('href');
$('.result').load(href);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Menu Link
<div class="result"></div>
I have a base html element and I have an overlay element that contains some buttons.
I want the mouse to be able to interact both with the base element as well as with the buttons in the overlay.
The problem is that the overlay captures the mouse events of the base element.
Is there a way that I can disable the mouse interactions for the transparent background of the overlay (like IE seems to do), while keeping the mouse interactions for the buttons inside the overlay ? Or do I need to change the structure of my code ?
Fiddle
Here's one approach.
With an overlay element:
http://jsfiddle.net/XC95u/11/
Without an overlay element:
http://jsfiddle.net/XC95u/3/
I modified the html structure and use z-index to control the positions of the divs.
HTML:
<div class="main">
<div class="base"></div>
<div class="overlay">
</div>
<div class="button left"></div>
<div class="button right"></div>
</div>
CSS：
.main {
width: 350px;
height: 150px;
position: relative;
}
.base {
background-color: #c0c0c0;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.button {
background-color: #707070;
width: 30px;
height: 30px;
position: absolute;
top: 60px;
z-index: 99;
}
.right {
right: 0;
}
I have two divs that I want to show one and hide the other continuously. The code I have only shows the first one Mass_alert. What must I fix to show and hide both divs in turn.
Here is the HTML.
<div style="position: relative; top: 50px; width: 778px; margin: 0 auto;">
<div id="alerts" style="float: right; width:200px; height: 25px; background: goldenrod; border-radius: 3px 3px 3px 3px; font: 11px Arial; color: #404040; overflow: hidden;">
<div id="Mass_alert" class="alert" style="position: relative; top: 5px; margin: 0 auto; text-align: center; width:100%; height: 20px;"></div>
<div id="Devotion_alert" class="alert" style="position: relative; top: 5px; margin: 0 auto; text-align: center; width:100%; height: 20px; visibility: hidden;"></div>
</div>
</div>
The code to do the fade toggle is this one.
$(document).ready(function() {
show_next_Mass(channel_array_sort);
show_next_devotion();
setInterval("show_alerts()",10000);
var continuous = function () {
$("#Mass_alert").fadeToggle(600);
$("#Devotion_alert").fadeToggle(600);
};
setInterval(continuous,600);
});
Judging by this API doc, you need to use display: none; instead of visibility: hidden; for the hidden element.
When you watch what .fadeToggle() does you see the change to the following attributes
opacity: 0;
display: none;
(As also Alexander pointed out in his answer.)
So I've copied this to the style attribute for the second div. But it didn't work. My assumption is jQuery keeps in some way track of what it has done to the elements but not really recognise the initial CSS.
My idea is that jQuery somewhat keeps track of what it has done to the elements but not really recognise the style the HTML came already with. So I cleaned 2nd div's CSS from any hiding related attributes and put a .hide() in the "initialising function".
seems to work (#jsFiddle)