<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="style/result.css?v=1.3" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<%# page import = "java.io.*" %>
<style>
html,body{
width:100%;
min-width:200px;
height:100%;
}
div {
width: 100%;
height: 100%;
border: 1px solid #000;
}
ul,li{
list-style:none;
margin:0;
padding:0;
}
img {
font-size:0;
line-height:0;
}
img.menu {
font-size:0;
line-height:0;
width:90px;
height:90px;
cursor:pointer;
}
.right_div{
width: 90px;
height: auto;
float:right;
}
.center_div{
width: 500px;
height: 100%;
float:right;
right:90px;
}
.right_top{
height: 90px;
}
.center_top{
height: 90px;
}
.middle{
top: 90px;
height: auto;
}
.center_number,.center_alphabet,.center_korean {
width: 500px;
height: 100%;
float:right;
box-sizing: border-box;
background: #ffffff;
}
#dropHere{
width: Calc(100% - 500px - 90px);
height: 100%;
left:10px;
background-color: skyblue;
border: dotted 1px black;}
.default_top {
width: Calc(100% - 500px - 90px);
height: 90px;
left:10px;
box-sizing: border-box;
background: #ffffff;
}
</style>
<script type="text/javaScript" >
$(function(){
//Make every clone image unique.
var counts = [0];
var resizeOpts = {
handles: "all" ,autoHide:true};
$(".dragImg").draggable({
helper: "clone",
//Create counter
start: function() { counts[0]++; }
});
$("#dropHere").droppable({
drop: function(e, ui){
if(ui.draggable.hasClass("dragImg")) {
$(this).append($(ui.helper).clone());
$("#dropHere .dragImg").addClass("item-"+counts[0]);
$("#dropHere .item-"+counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging");
$(".item-"+counts[0]).dblclick(function() {
$(this).remove();
});
$(".item-"+counts[0]).draggable().resizable();
}
}
});
var zIndex = 0;
function make_draggable(elements)
{
elements.draggable({
containment:'parent',
start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
stop:function(e,ui){
}
});
}
});
</script>
<html>
<head>
<title>Graphic maker</title>
</head>
<body>
<div class="right_div">
<div class="right_top">
<ul>
<li><img src="image/test.PNG" width="90" height="90"></li>
</ul>
</div>
<div class="middle">
<ul>
<li><img class="menu" src="image/app_icon.PNG" title="number"></li>
</ul>
</div>
</div>
<div class="center_div">
<div class="center_top">
<input type="text" style="font-size:15pt; text-align:center; width:494px; height:85px;"> </div>
<div class="middle">
<div class="center_number">
<%
File path_number=new File("D://image//number");
File[] fileList_number=path_number.listFiles();
if(fileList_number.length>0){
for(int i=0;i<fileList_number.length;i++){
String name=fileList_number[i].toString().substring(fileList_number[i].toString().lastIndexOf("\\")+1);
String fullname="image/number/"+fileList_number[i].toString().substring(fileList_number[i].toString().lastIndexOf("\\")+1);
%>
<img src=<%=fullname%> class="dragImg"
title=<%=name%>
width="90" height="90" >
<%
}
}
%>
</div>
</div>
</div>
<div class="default_top">
<script src="js/test.js" >
</script>
<h1>aaa</h1>
</div>
<div id="dropHere" ></div>
</body>
</html>
There is a script part at the top, jsp and Java code in the middle, and a div called dropHere is defined at the bottom. In the jsp implementation part, after taking one of several images returning to the loop and dropping it on dropHere, you want to make the dropped image draggable or resizable again.
But only resizing works. In my case, I drag & drop and bring it to the dropHere area and add that class. In this case, how do I add it as a div?
Or is there another way?
Related
I'm trying to make a php gallery and thats why I need a good Mask, where the pictures later can be shown.
I want the Mask not to be bigger than screen-size. I mean, there must be no scrolling and the whole <body> needs to have just the width and height of the browser windows, so that every child object in <body> is limited to the frame-size of the browser and will be shrunk down if it overflows. I've tried with max-width and max-height on the <body>, but it doesn't work.
Here are the contents of my index.html file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="mother">
<div id="header">
<div id="back-link">
Home
</div>
<div id="prev">
next picture
</div>
<div id="next">
previous picture
</div>
<div id="headline">
<p class="h2">Our Galery</p>
</div>
</div>
<!-- Content -->
<div id="container-bild">
<img src="./bilder/P1130079.JPG" id="img-bild" />
</div>
</div>
</body>
</html>
Here are the contents of my style.css file:
body {
max-width: 100%;
max-height: 100%;
}
/* mother-container */
div#mother {
max-width: 100%;
max-height: 100%;
margin: auto;
}
/* main-container */
#container-bild {
max-width: 100%;
max-height: 100%;
}
/* picture in main-container */
#img-bild {
max-width: 100%;
max-height: 100%;
border: 1px solid #280198;
}
Here is a screenshot of what it looks like:
To set the height and width to be 100% of the window (viewport) size, use:
height: 100vh;//100% view height
width: 100vw;// 100% view width
.
div {
background-color: blue;
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
color: white;
}
<div>some content here</div>
Try:
html,
body {
height: 100%;
}
body {
overflow: hidden;
}
Do you know how many child elements will be in your gallery? If the number of elements is static, you could simply set their dimensions in CSS using vw and vh units. No JavaScript involved, and the elements would never be able to overflow your body.
As a reminder for my future self:
.book {
margin: auto;
width: 100vh;
max-width: 100vw;
min-width: 500px;
}
Though this is completely unrelated, for links, you might want to use something like:
a[href^="#"] {
text-decoration: none;
color: black;
background: url("http://www.yaml.org/spec/1.2/term.png") no-repeat bottom right;
}
a[href^="#"]:hover {
text-decoration: underline;
color: blue;
background: none;
}
I'm not sure if this is possible with css, it could be.
I have solved similar issue with javascript:
window.top.innerHeight;
gets the available height, excluded menubars etc. of the borwser.
See how I did for the height, my issue was that the footer should be at the bottom even if content was empty->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>C-Driver Manager</title>
<meta name="keywords" content="Aygit,Device,Driver,Surucu,Download,Indir,yedekle,Unknown,Bilinmeyen,Backup,Back-up,stuurprogramma,apparaat,windows,w7,w8,w10,multilanguage,tool,free,gratis,ucretsiz">
<meta name="description" content="Windows 7/8/10 Device indentify, Driver backup, Driver info">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="icon" href="images/favicon.ico">
</head>
<body onResize="resizecontainer();">
<div class="divtop">
<div class="divtopcontainer">
<div class="divlogo">
</div>
<div class="divHmenu">
<style>
.mnuHorizontal
{
list-style:none;
}
.mnuHorizontal li
{
float:left;
}
.mnuHorizontal .activemnu a,.mnuHorizontal li a:hover
{
background:#00B7EF;
border-radius:5px;
color:white;
}
.mnuHorizontal li a
{
display:inline-block;
text-decoration:none;
padding:5px 12px;
text-align:center;
font-weight:bold;
color:#020042;
}
</style>
<ul class="mnuHorizontal">
<li id="index.php">HOME</li>
<li id="features.php">FEATURES</li>
<li id="download.php" class="activemnu">DOWNLOAD</li>
<li id="contact.php">CONTACT</li>
</ul>
</div>
</div>
</div>
<div class="divblueline"></div>
<div class="divcontainer">
<div style="float:left">
<h2>What is C-Driver Manager</h2>
C-Driver Manager is a simple tool that;
<ul>
<li>displays information about your devices</li>
<li>identify unrecognized devices by windows</li>
<li>Backups your devices driver</li>
</ul>
<h2>Why C-Driver Manager?</h2>
<ul>
<li>No installation needed</li>
<li>No adware</li>
<li>No spyware</li>
<li>Absolutely freeware</li>
</ul>
</div>
<div>
<img alt="" src="images/devmgr5.jpg" height="430" width="700">
</div>
</div>
<div class="divblueline"></div>
<div class="divbottom">
<div id="chmx">
</div>
</div>
</body>
<script>
for (i=0;i<document.getElementsByClassName('mnuHorizontal').item(0).children.length; i++)
{
if (document.getElementsByClassName('mnuHorizontal').item(0).children[i].id ==
"index.php")
{
document.getElementsByClassName('mnuHorizontal').item(0).children[i].className = 'activemnu';
}
else
{
document.getElementsByClassName('mnuHorizontal').item(0).children[i].className = '';
}
}
resizecontainer();
function resizecontainer()
{
avh = window.top.innerHeight;
dbh = document.getElementsByClassName('divbottom').length *
document.getElementsByClassName('divbottom').item(0).clientHeight;
dbt = document.getElementsByClassName('divtop').length *
document.getElementsByClassName('divtop').item(0).clientHeight;
dbbl = document.getElementsByClassName('divblueline').length *
document.getElementsByClassName('divblueline').item(0).clientHeight;
decrh = dbh + dbt + dbbl;
document.getElementsByClassName('divcontainer').item(0).style.minHeight = (avh - decrh) + 'px';
}
</script>
</html>
look for this function inside the example above ->
function resizecontainer()
{
avh = window.top.innerHeight;
dbh = document.getElementsByClassName('divbottom').length *
document.getElementsByClassName('divbottom').item(0).clientHeight;
dbt = document.getElementsByClassName('divtop').length *
document.getElementsByClassName('divtop').item(0).clientHeight;
dbbl = document.getElementsByClassName('divblueline').length *
document.getElementsByClassName('divblueline').item(0).clientHeight;
decrh = dbh + dbt + dbbl;
document.getElementsByClassName('divcontainer').item(0).style.minHeight = (avh - decrh) + 'px';
}
This works great. This will keep your image from growing too large width wise and also keep its proportions.
img {
max-width: 100%;
height: auto;
}
My CSS solution is:
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
I have following html code but the TasksCount class does not show up as hyperlink. Any idea? I updated the anchor with the wording Link but still no good.
<div id="TaskNotification" style="display: inline!important; float: left; border; 3px solid #8AC007;PADDING: 5px;">
<img id="NotificatioImg" class="n-img" "="" src="../SiteAssets/tasks_sm.png?rev=23" alt="Notification">
<div class="TasksCount">
Link
</div>
</div>
Here is the CSS
<style>
body {
font-family:Calibri;
}
#customTaskNotification {
position:relative;
}
.TasksCount {
position:absolute;
top: -.1px;
right:-.1px;
padding:1px 2px 1px 2px;
background-color:#ff0000; /* orange #ef8913* dark-pink #d06079 */
color:white;
font-weight:bold;
font-size:1.05em;
width:50%;
text-align: center;
border-radius:50%!important;
box-shadow:1px 1px 1px gray;
}
div.TasksCount:empty {
display: none;
}
</style>
Here is the jQuery that populates TasksCount Div
<script type="text/javascript" language="javascript" src="_layouts/15/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var rowCount = $(".ms-WPBody tr").not(":has(th)").length;
var x = $('.ms-WPBody tr td a').html();
if(x.indexOf("There are no items") !== -1){
rowCount = "";
}
$(".rowCount").text(rowCount);
$(".TasksCount").text(rowCount);
});
</script>
<div id="TaskNotification" style="display: inline!important; float: left; border; 3px solid #8AC007;PADDING: 5px;">
<img id="NotificatioImg" class="n-img" "=" src="../SiteAssets/tasks_sm.png?rev=23" alt="Notification">
<div class="TasksCount">
Link
</div>
</div>
The anchor tag has no text. Just put in some text.
Not what you are looking for? Let me know :)
Because you populate TaskCount overwriting the link? - try
$(".TaskCount>a").text(rowCount)
instead
<img class="n-img" "="" src="../SiteAssets/tasks_sm.png?rev=23" alt="Notification">
This question already has answers here:
set content height 100% jquery mobile
(8 answers)
Closed 8 years ago.
I have a mobile webpage created using jquery mobile which contains a header and 4 divs. The header is to occupy 10% of the page with the following 90% filled equally with the divs. I have the following code but I can't seem to get it to fill the page. I've done some research and I believe this may be to do with the content being less than the height of the page so I've tried setting the page height to the viewport height using jquery to no avail. Any ideas what I may be doing wrong?
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="css/jquery.mobile-1.4.0.css"/>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.0.min.js"></script>
<style>
#header
{
height:10%;
}
.content
{
height: 90%;
margin: 0px;
padding:0px;
}
#box1
{
width:100%;
height:22%;
border: solid 1px #000000;
position: relative;
background-color: red;
}
#box2
{
width:100%;
height:22%;
border: solid 1px #000000;
position: relative;
background-color: green;
}
#box3
{
width:100%;
height:22%;
border: solid 1px #000000;
position: relative;
background-color: blue;
}
#box4
{
width:100%;
height:22%;
border: solid 1px #000000;
position: relative;
background-color: orange;
}
</style>
<script type="text/javascript">
function SetHeightOfDiv(){
var viewportHeight = $(window).height();
var theDiv = document.getElementById('home');
theDiv.style.height = viewportHeight + "px";
}
</script>
</head>
<body onload="SetHeightOfDiv()">
<div data-role="page" id ="home">
<div data-role="header" id="header" data-tap-toggle="false"></div>
<div data-role="content" class ="content">
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
</div>
</div>
</body>
</html>
Read this: http://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/
DEMO
function SetHeightOfDiv() {
var screen = $.mobile.getScreenHeight();
var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
/* content div has padding of 1em = 16px (32px top+bottom). This step
can be skipped by subtracting 32px from content var directly. */
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
var content = screen - header - footer - contentCurrent;
$(".ui-content").height(content);
}
You also need to trigger this on window resize and orientationchange:
$(document).on("pageshow", "#home", function () {
SetHeightOfDiv();
});
$(window).on("resize orientationchange", function () {
SetHeightOfDiv();
});
I know this has been asked a million times, but I haven't had much luck making it work.I'm working on a Posterous layout, and I'm trying to get my may content to flow to the bottom.
Here is a link to the layout so far
You can see that the content is held within center_col, so I basically need this column to stretch to the bottom of the page/window regardless of how much content is in there.
Here is the current HTML:
<!DOCTYPE html>
<html>
<head>
<title>{Title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}/* mac hide \*/
html { height: 100%;}
* html #wrap {height: 100%;}/* end hide */
body {
background: #FFFFFF;
color: #fff;
height:100%;
min-width:800px;}
#inner {
position:relative;
width:100%
}
#wrap {
min-height: 100%;
margin-left:50%;
position:relative;
background:#F9F9F9;
color:#000;
z-index:1
}
#center_col {
float: left;
width: 800px;
height: auto;
margin-left:-380px;/* drag it central on the page*/
position:relative;
display:inline;/* ie double margin bug*/
background:#FFFFFF;
}
#sidebar {
width:204px;
height: 100%;
padding-right:26px;
float:left;
min-height:234px;
position:relative;
background: #FFFFFF;
}
#content {
width:570px;
height: 100%;
min-height: 100%;
position:relative;
float:left;
background: #F9F9F9 url('http://www.rockettree.com/images/bg-content.png') left top repeat-y;
padding-top:21px;
padding-bottom:48px;
}
.postunit {
width: 500px;
margin-left: 30px;
padding: 10px 5px 20px 5px;
background: #FFFFFF;
border: 1px solid #F9F9F9;
}
.sidebar {
border: 1px solid #000000;
background-color: #FFFFFF;
margin-top: 50px;
padding-left: 10px;
float: left;
height: auto;
width:200px;
-moz-border-radius: 10px;
border-radius: 10px;
}
p{
padding:5px;
margin-bottom:1em;
}
</style>
<!--[if IE]><style type="text/css">body {width:expression( documentElement.clientWidth < 802 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 802 ? "802" : "auto") : "802px") : "auto" );}</style><![endif]-->
</head>
<body>
<div id="wrap">
<div id="inner">
<div id="center_col">
<div id="sidebar">
<div class="header">
<h1>{Title}</h1>
<p>{Description}</p>
</div>
{block:ListSidebar}
<div class="profile">
<a href="{ProfileLink}">
<img src="{PortraitURL-45}" width='75' height='75'>
</a>
<p>{Profile}</p>
</div>
{/block:ListSidebar}
</div>
<div id="content">
<div class="posts">
{block:Posts}
<div id="postunit_{PostID}" class="postunit">
{block:EditBox/}
<div class="post">
<h3><a class="posttitle" href="{Permalink}">{Title}</a></h3>
<a class="button" href="{Permalink}">Posted {TimeAgo}</a>
{Body}
</div>
{block:Responses}
{block:ResponsesList}
{/block:ResponsesList}
{block:Sharing}
{block:Tweet /} {block:FbLike /}
{/block:Sharing}
<div class="postresponses">
<a class="button" href="#">{ResponseCount} Response{ResponseCountPluralized}</a>
</div>
{block:ResponsesShow}
{Responses}
{ResponseForm}
{/block:ResponsesShow}
{/block:Responses}
</div>
{/block:Posts}
</div>
{block:Pagination/}
</div>
</div>
</div>
</div>
</body>
</html>
Set the height of the containing elements of the #center_col div to 100%. I tested this and it worked!
If you are using jQuery:
<script type="text/javascript">
$(function(){
var height = $("#content").height();
$("#sidebar").height(height);
});
</script>
where < div id="content" > is the div with the size you want to replicate in < div id="sidebar" >
If your layout is going to stay this simple, I say just fake it with a nice little background image =)
If that won't do, I think JS is your only way to go.
e.g.
window.addEventListener('load',fit,false);
window.addEventListener('resize',fit,false);
function fit(){
var myHeight;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myHeight = document.body.clientHeight;
}
document.getElementById('content').style.height=myHeight + 'px';
}
I would like to have a series of items within a flex container, that when clicked, trigger a popup. However, it appears that each item involves at least one function. Is it possible to have multiple popups with one function? Many thanks.
.flex-image {
width: 22.5%;
height: 195px;
margin: 10px;
font-size: auto;
padding: 85px;
background-size: cover;
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<div class="flex-image" onclick="myFunction()" style = "background-
image:url(Images/Sample1.jpg);"> <span class="popuptext" id="myPopup"><img
class = "intimage" src= "Images/Sample1.jpg"> </span> </div>
<div class="flex-image" onclick="myFunction()" style = "background-
image:url(Images/Sample2.jpg);"> <span class="popuptext" id="myPopup"><img
class = "intimage" src= "Images/Sample2.jpg"> </span></div>
<script>
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
function myFunction1() {
var popup = document.getElementById("myPopup1");
popup.classList.toggle("show");
}
...
</script>
Is there a way to have it open the user's choice of popup without having to create a new function every time?
<!DOCTYPE html>
<html>
<head>
<style>
.box{
border:5px solid red;
background:#000;
padding:50px;
height:150px;
width:320px;
cursor:pointer;
margin-bottom:30px;
}
.box>h2{
color:#fff;
text-align:center;
}
.popup{
border:5px solid #000;
background:red;
padding:50px;
height:150px;
width:70%;
cursor:pointer;
position:fixed;
top:200px;
left:50px;
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".box").on('click', function(){
$(".popup").show();
});
$(".close").on('click', function(){
$(".popup").hide();
});
});
</script>
</head>
<body>
<div class="box">
<h2>1</h2>
</div>
<div class="box">
<h2>2</h2>
</div>
<div class="box">
<h2>3</h2>
</div>
<div class="popup">
<a href="#" class="close">close<a>
</div>
</body>
</html>