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>
Related
in the example below how to keep gotop inside story - i.e. bottom right of the middle div
and keep its show/hide functionality
the three divs - top, story and footer - are not of predictive width and height
I tried various position and margin params - without success
$(document).on('scroll', function(){
let x = $(this).scrollTop();
if(x > 25){$('.gotop').show();}
else{$('.gotop').hide()}
});
$('.gotop').on('click', function(){
$(document).scrollTop(0);
});
.container{
width:50%;
margin:0 auto;
background:silver;
text-align:center;
}
.top{padding:25px; background:gold;}
.story{
position:relative;
padding:25px;
min-height:100vh;
}
.footer{padding:25px; background:gold;}
.gotop{
display:none;
position:fixed;
z-index:99;
right:14px;
bottom:0;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class='top'>TOP</div>
<div class='story'><br><br><br><br>STORY<br><br><br>
<div class='gotop'>gotop</div>
</div>
<div class='footer'>FOOTER</div>
</div>
Use sticky position:
$(document).on('scroll', function() {
let x = $(this).scrollTop();
if (x > 25) {
$('.gotop').show();
} else {
$('.gotop').hide()
}
});
$('.gotop').on('click', function() {
$(document).scrollTop(0);
});
.container {
width: 50%;
margin: 0 auto;
background: silver;
text-align: center;
}
.top {
padding: 25px;
background: gold;
}
.story {
position: relative;
padding: 25px;
min-height: 150vh;
/* I need flexbox to push the button to bottom*/
display:flex;
flex-direction:column;
}
.footer {
padding: 25px;
background: gold;
}
.gotop {
display: none;
position: sticky;
margin-top:auto; /* push to bottom */
text-align:right; /* right align */
z-index: 99;
right: 14px;
bottom: 14px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class='top'>TOP</div>
<div class='story'><br><br><br><br>STORY<br><br><br>
<div class='gotop'>gotop</div>
</div>
<div class='footer'>FOOTER</div>
</div>
In the following implementation, I have taken some liberty to change minor css , replace jquery with js by introducing Intersection Observer which will only make the gotop element visible when our footer starts getting visible. Ofcourse you can use both jquery and js simultaneously but since I don't have experience with former, I used js only.
The benefit is that it's not dependent on any hardcoded values to control gotop visibility.
let footer = document.querySelector('.footer');
let gotop = document.querySelector('.gotop');
let observer = new IntersectionObserver((entries)=>{
entries.forEach(entry=>{
if(entry.isIntersecting){
gotop.style.opacity = '1';
gotop.style.pointerEvents = 'auto';
}
else{
gotop.style.opacity = '0';
gotop.style.pointerEvents = 'none';
}
})
})
observer.observe(footer);
gotop.addEventListener('click',()=>window.scrollTo({top:true}));
.container{
width:50%;
margin:0 auto;
background:silver;
text-align:center;
}
.top{padding:25px; background:gold;}
.story{
position:relative;
padding:25px;
min-height:100vh;
}
.footer{padding:25px; background:gold;}
.gotop{
opacity:0;
pointer-events:none;
position:absolute;
z-index:99;
right:14px;
bottom:0;
cursor:pointer;
transition:all 0.2s ease-in;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class='top'>TOP</div>
<div class='story'><br><br><br><br>STORY<br><br><br>
<div class='gotop'>gotop</div>
</div>
<div class='footer'>FOOTER</div>
</div>
You only need to change position:fixed; to position:absolute; for your .gotop div. Since it is positioned inside a position: relative div then it will be inside of it.
$(document).on('scroll', function(){
let x = $(this).scrollTop();
if(x > 25){$('.gotop').show();}
else{$('.gotop').hide()}
});
$('.gotop').on('click', function(){
$(document).scrollTop(0);
});
.container{
width:50%;
margin:0 auto;
background:silver;
text-align:center;
}
.top{padding:25px; background:gold;}
.story{
position:relative;
padding:25px;
min-height:100vh;
}
.footer{padding:25px; background:gold;}
.gotop{
display:none;
position:absolute;
z-index:99;
right:14px;
bottom:0;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class='top'>TOP</div>
<div class='story'><br><br><br><br>STORY<br><br><br>
<div class='gotop'>gotop</div>
</div>
<div class='footer'>FOOTER</div>
</div>
<%# 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?
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">
I have this code and idk how to make it so when I click on the items in the "menu" to not redirect to other pages but to change the src of the iframe.. should I change the
Code:
<html>
<head>
<title> First attempt at html/css </title>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#menu {
background-color:#eeeeee;
height:470px;
width:200px;
float:left;
text-align:center;
padding:5px;
}
#content {
float:left;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h1> Movies Gallery</h1>
</div>
<div id="menu">
The Maze Runner <br>
Guardians of The Galaxy <br>
The Guest <br>
Edge of Tomorrow
</div>
<div id="content">
<iframe src="the_maze_runner.html" width=1110px height=475px frameborder=0></iframe>
</div>
<div id="footer">
Copyright Andrew.Xd 2014
</div>
</body>
</html>
I'm still a starter in this domain so I really have no idea how should I modify the code to obtain what I intend to.
You can simply add a target to your menu-items and a name to your iframe, like so:
<a target="frameName" href="the_maze_runner.html" style="text-decoration:none">The Maze Runner</a>
<iframe name="frameName" src="the_maze_runner.html" width=1110px height=475px frameborder=0></iframe>
Or did I missunderstand the question?
css is a markup language, so you will not be able to do what you want with css.
However, you can give your iframe an id and change the source using javascript. This SO post explains it perfectly, I could not do a better job :p
If you have jQuery (you should!) then you can do something like this:
function Start() {
$('#menu').click(function (e) {
e.preventDefault();
$('#content').find('iframe').prop('src', "whateverURL");
});
}
$(Start);
Since you want to cancel the href in the <a> tags, why not remove them completely and replace them with <div> tags?
You can't modify properties of DOM elements using css. Use js/jQuery:
$(document).ready(function() {
$("#menu a").click(function(e) {
e.preventDefault(); //so browser will not follow link.
$("#content iframe").attr("src", $(this).attr("href"));
});
});
#header {
background-color: black;
color: white;
text-align: center;
padding: 5px;
}
#menu {
background-color: #eeeeee;
height: 470px;
width: 200px;
float: left;
text-align: center;
padding: 5px;
}
#content {
float: left;
}
#footer {
background-color: black;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header">
<h1> Movies Gallery</h1>
</div>
<div id="menu">
The Maze Runner
<br>
Guardians of The Galaxy
<br>
The Guest
<br>
Edge of Tomorrow
</div>
<div id="content">
<iframe src="the_maze_runner.html" style="width:1110px; height:475px" frameborder=0></iframe>
</div>
<div id="footer">
Copyright Andrew.Xd 2014
</div>
Its not Css code, its a JS code.
you need to to connect you items to an event listner take the href value on put it on the iframe
//jquery on load mathod//
$(function(){
$('#menu a').click(function(e){
e.preventDefault();
$('iframe ').attr('src',$(this).attr('href'));
});
});
I am trying to make a website for my niece, kind of like a homepage for her. I have a little experience coding and I got stuck positioning an image. I don't know whats wrong with it.
Here's my HTML code:
<html>
<head>
<title>MWM</title>
<h1>Welcome to ---- HomePage!</h1>
<link rel="stylesheet" type="text/css" href="C:\Style.css">
<script language="javascript">
function MouseRollover(MyImage)
{MyImage.src = "C:\N2.png";}
function MouseOut(MyImage)
{MyImage.src = "C:\N1.png";}
function MouseRollover2(MyImage)
{MyImage.src = "C:\C2.png";}
function MouseOut2(MyImage)
{MyImage.src = "C:\C1.png";}
function MouseRollover3(MyImage)
{MyImage.src = "C:\Y2.png";}
function MouseOut3(MyImage)
{MyImage.src = "C:\Y1.png";}
function MouseRollover4(MyImage)
{MyImage.src = "C:\H2.png";}
function MouseOut4(MyImage)
{MyImage.src = "C:\H1.png";}
</script>
</head>
<body>
<!--Cartoons-->
<a class="Dec" href="C:\Cartoons.html">
<img class="border size" src="C:\C1.png" onMouseOver="MouseRollover2(this)" onMouseOut="MouseOut2(this)">
</a>
<!--Google-->
<a Class="Dec" href="http://www.Google.com">
<img id="N" class="border size" src="C:\N1.png" onMouseOver="MouseRollover(this)" onMouseOut="MouseOut(this)">
</a>
<!--Youtube-->
<a Class="Dec" href="C:\W\Youtube.html">
<img Id="y" class="border SY" src="C:\Y1.png" onMouseOver="MouseRollover3(this)" onMouseOut="MouseOut3(this)">
</a
<!--Facebook-->
<a Class="Dec" href="http://Facebook.com">
<img id="H" class="border size" src="C:\H1.png" onMouseOver="MouseRollover4(this)" onMouseOut="MouseOut4(this)">
</a>
<!---->
</body>
</html>
and here's my CSS:
body {Background-color: lime;}
h1 {text-align: center;Color: Black;}
/**/
.Border {border-style: inset;border-width: 10px;border-bottom-color: #454545;border-right-color: #454545; border-top-color: #DEDEDE; border-left-color: #DEDEDE;}
.Dec {text-decoration: None;}
.Size {height: 57px;width: 227px;}
.SY {height:77px;Width: 227px}
/*
Postion Equation: (Height+20Border+IconLeft+20Image growth)="Height"
(Width+20Border+IconLeft+20Image growth)="Width"
*/
#C {position:absolute;}
#N {position:absolute; TOP:163px; LEFT:275px;}
#Y {position:absolute; TOP:260px; LEFT:542px;}
#H {position:absolute; TOP:163px; RIGHT:275px;}
/**/
img:link {}
img:visited {}
img:hover {height: 77px;width: 247px;}
img:hover.SY {height: 97px;Width: 247px;}
/**/
Even though I did everything the same I still cant make the "Facebook Link" work!
I made every other option works perfectly fine except that one. I tried using Margin-Top:163px; and Margin-Right:275px; in CSS but that just moved everything down... I want it to change picture when you hover over it and also for it to grow in size...
You dont need to use JavaScript at all.
Of what I understand, you only want the picture to change on hover. So this is what you'll need to do.
HTML
CSS
#fbimage{
background-image:url('fbimage.png');
}
#fbimage:hover{
background-image:url('fbhoverimage.png');
}
You forget a > after the Youtube link:
<!--Youtube-->
<a Class="Dec" href="C:\W\Youtube.html">
<img Id="y" class="border SY" src="C:\Y1.png" onMouseOver="MouseRollover3(this)" onMouseOut="MouseOut3(this)">
</a>
<!-- Right up ^ here-->
<!--Facebook-->
<a Class="Dec" href="http://Facebook.com">
<img id="H" class="border size" src="C:\H1.png" onMouseOver="MouseRollover4(this)" onMouseOut="MouseOut4(this)">
</a>
<html>
<head>
<title>MWM</title>
<style>
.container{
background-color: lime;
width:100%;
height:100%;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
position:absolute;
}
h1 {text-align: center;color: black;font-size:3em;}
ul{
list-style-type:none;
}
a{
display:block;
border-style: inset;
border-width: 10px;
border-bottom-color: #454545;
border-right-color: #454545;
border-top-color: #DEDEDE;
border-left-color: #DEDEDE;
height:100px;
width:200px;
position:absolute;
background:red;
float:left;
text-align: center;
vertical-align: middle;
color:white;
font-size:2em;
line-height:100px;
}
a.cartoon{
top:0;
left:0;
background:url(C:\C1.png) blue;
}
a.cartoon:hover{
background:url(C:\C2.png)aqua;
}
a.google{
top:200;
left:200;
background:url(C:\G1.png) yellow;
}
a.google:hover{
background:url(C:\G2.png)gold;
}
a.youtube{
top:400;
left:400;
background:url(C:\Y1.png) red;
}
a.youtube:hover{
background:url(C:\Y2.png)darkred;
}
a.facebook{
top:600;
left:600;
background:url(C:\F1.png) green;
}
a.facebook:hover{
background:url(C:\F2.png)lawngreen;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to ---- HomePage!</h1>
Cartoon
Google
Youtube
Facebook
</div>
</body>
</html>