How to have html popup appear over main html page? - javascript

I have been making a website-resume and I want the user to be able to click on a picture of a company I've worked for and have a description of my work experience come up. I can click on a picture and have a div pop up on top as shown here:
Any ideas on how this could be done?

you can set css to the popup div which u want to show over the html page.
Consider the following eg:
#mainPage {
width: 100%;
height: 100%
}
#popUp {
display: none;
z-index: 100;
width: 200px;
height: 50px;
background: #ADD;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="mainPage">
<img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" width="20%" />
</div>
<div id="popUp">
<p>Hello !!! It's a popup div </p>
</div>
</body>
<script type="text/javascript">
$(function() {
$('#mainPage img').on('click', function() {
$('#popUp').show();
});
});
</script>
</html>

Related

Display webpage in iframe dynamically

I want an input field with a submit button and a separate iframe where I can display a website made up from the input field. I have tried all sorts of things but nothing works. Can someone please tell me how I can achieve that. The text input field is a key to the page I want to display. What I want to do is to define an iframe with a page from my website and when the user enters a code in the text box, the iframe should display another page from my website. I want to run everything on my PC and nothing on the server. Below is my code:
<!DOCTYPE html>
<html>
<body>
<div id="app">
</div>
<style>
#boxes {
content: "";
display: table;
clear: both;
width: 145%;
}
div {
float: left;
height: 100px;
width: 100%;
padding: 0 0px;
}
#column0 {
width: 5.9%;
}
#column1 {
width:29.4%;
}
body {
font-family: sans-serif;
color:white;
display: grid;
height: 80vh;
place-items: start;
overflow-x:hidden;
}
</style>
<script>
document.getElementById("app").innerHTML = `
<main id="boxes">
<div id="column0">
<h4></h4>
</div>
<div id="column1">
<input id="pageId" name="pageId" type="text" required minlength="1"
maxlength="4" pattern="[a-z0-9]+">
<button id="pageIdBtn">Page ID</button>
</div>
</main>
`;
var x = document.getElementById("pageIdBtn");
x.addEventListener("click", pageIdFunction);
function pageIdFunction() {
var pageIdToInvoke = document.getElementById("pageId").value;
var myPage = "mywebsite/" + pageIdToInvoke;
var el = document.getElementById('userPage');
el.src = myPage;
};
</script>
<iframe name="userPage" src="mywebsite/home" style="width:1500px; height:
750px;">
</iframe>
</body>
</html>
Try This:
$('input#url').on('propertychange paste keyup',function(){
var url = this.value;
$('#frame').attr('src', url);
});
iframe {
position:fixed;
top:5;
left:0;
bottom:0;
right:0;
width:100%;
height:90%;
border:none;
margin:0;
padding:0;
z-index:99999;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>display-webpage-in-iframe-dynamically</title>
</head>
<body>
<input type="text" id="url" name="url" value="https://">
<iframe src="" id="frame"></iframe>
</body>
</html>
If this helps please Up vote and mark as answer

How to make the page automatically scroll to a element inside a content?

I am new to javascript and jquery so I'm not sure where to start.
I am working on a project and it would be nice if the page can auto-scroll into a certain viewport after the user has been inactive for a few seconds.
This can be seen in https://www.nfrealmusic.com/#store when it auto scrolls to a specific section on load up and completes your scroll when you scroll down alittle bit more in between the "merch" and "music" section.
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
height: 250px;
width: 250px;
overflow: auto;
background: green;
}
#content {
margin:500px;
height: 800px;
width: 2000px;
background-color: coral;
}
</style>
</head>
<body>
<p>Click the button to scroll to the top of the element with id="content".</p>
<button onclick="myFunction()">Scroll</button>
<div id="myDIV">
<div id="content">
Some text inside an element.
</div>
</div>
<script>
function myFunction() {
var elmnt = document.getElementById("content");
elmnt.scrollIntoView();
}
</script>
https://codepen.io/Fullstack_developer/pen/bGGKNJX
would like for it to scroll into view automatically without having to press a button!
can this be done with jquery or velocityjs?
Thanks for your help!
function myFunction() {
var elmnt = document.getElementById("content");
elmnt.scrollIntoView();
}
#myDIV {
height: 250px;
width: 250px;
overflow: auto;
background: green;
}
#content {
margin: 500px;
height: 800px;
width: 2000px;
background-color: coral;
}
<body onload="myFunction()">
<p>Click the button to scroll to the top of the element with id="content".</p>
<button onclick="myFunction()">Scroll</button>
<div id="myDIV">
<div id="content">
Some text inside an element.
</div>
</div>
</body>
You call scroll automatically using this way:
window.onload = function(e){
var elmnt = document.getElementById("content");
elmnt.scrollIntoView();
}
With jQuery, you can use .animate() to scroll without pressing button as shown below:
$(document).ready(function(){
$("#content").animate({ scrollTop: "300px" });
});
window.onload = function(e){
var elmnt = document.getElementById("content");
elmnt.scrollIntoView();
}
#myDIV {
height: 250px;
width: 250px;
overflow: auto;
background: green;
}
#content {
margin:500px;
height: 800px;
width: 2000px;
background-color: coral;}
<!doctype html>
<body>
<p>After loading, it will automatically scroll to the top of the element with id="content".</p>
<div id="myDIV">
<div id="content">
Some text inside an element.
</div>
</div>
</body>
</html>

How to overlay one div over another div (no position absolute ... )?

I need to overlay one div over another div in HTML / CSS / Javascript.
I've found this sample http://jsbin.com/kociyefoba/edit?html,css,output that works "quite" exacly as I'd like but when I try to translate it in a situation like mine (I've to use div inside a table ... ), I've some troubles.
I've tried to produce a sample code: here you're ...
<html>
<head>
<meta charset=utf-8 />
<title>test div over another div</title>
</head>
<body>
<table border=1>
<tr>
<td>
<div id="base1" style="position:relative;width:100%;height:100%;top:0px;left:0px">
<img src="https://www.google.com/logos/doodles/2013/maria_mitchells_195th_birthday-2005006.2-hp.jpg" />
</div>
<div id="overlay1" style="z-index:1;position:relative;width:100%;height:100%;top:50px;left:50px;color:red;">
Text Overlay
</div>
</td>
</tr>
</table>
</body>
</html>
If you use
position:absolute
in the code all works fine but note that you can't see the table borders .... I've to see them!
I've tried to use all the other option values for position but they doesn't work ....
Suggestions / examples / alternatives?
This is one way of doing it.
#overlay1 {
width: 100%;
height: 100%;
position: absolute;
color: red;
font-size: 40px;
z-index: 1;
top: 25px;
left:75px;
}
#base1 {
width: 100%;
height: 100%;
position: relative;
}
td {
position: relative;
}
<table border=1>
<tr>
<td>
<div id="overlay1">
Text Overlay
</div>
<div id="base1">
<img src="https://www.google.com/logos/doodles/2013/maria_mitchells_195th_birthday-2005006.2-hp.jpg" />
</div>
</td>
</tr>
</table>

jquery .css script doesn't work

Morning,
I'm trying to display a div onmouseover. I created a function but i don't know what is wrong. Could you help me please.
The HTML code:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title> PHOTOGALLERY</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link rel="stylesheet" href="css/smoothness/jquery-ui-
1.9.2.custom.css"/>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js">
</script>
<script>
function show_img_container() {
$("#image_container").css("display", "block");
}
</script>
</head>
<body>
<div id="div_container">
<div id="div_image" class="cycle-slideshow">
<img src="images/2.jpg" style="height:100%; width:100%">
<img src="images/3.jpg" style="height:100%; width:100%">
<img src="images/4.jpg" style="height:100%; width:100%">
<img src="images/5.jpg" style="height:100%; width:100%">
</div>
<div id="image_container" onmouseover="show_img_container()"></div>
</div>
</body>
</html>
In the css file i have a image_container id where the attribute display is set to 'none';
If you only want to show the <div> on hover you wouldn't need any JS you could try someting like this:
div {
display: none;
}
a:hover + div {
display: block;
}
<a>Hover over me!</a>
<div>Stuff shown on hover</div>
To explain further:
Since you're using display: none; on the container the mousehover won't take affect since the <div> can't be found by the event since it's not displaying in the first place.
Hope this helps!
I'll answer based on what OP has provided. wrap the #image_container with a div that contains the function, then it should work.
And since it's quite weird that something appeared when hovered but didn't disappear after hovering out, I added another function for onmouseout
function show_img_container() {
$("#image_container").css("display", "block");
}
function hide_img_container() {
$("#image_container").css("display", "none");
}
#image_container {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div onmouseover="show_img_container()" onmouseout="hide_img_container()">
HOVER ME!!
<div id="image_container">IM HIDDEN!!!</div>
</div>
In the css file i have a image_container id where the attribute display is set to 'none';
It is not possible to hover a none blocked element.
You can use the opacity attribute to hide your div.
div {
opacity: 0;
}
div:hover {
opacity: 1;
}
<div>Stuff shown on hover</div>
You cant hover on div if its display is sets to none.
Ok. I know the problem. In the css stylesheet i had this:
#image_container {
position: absolute;
height: 120px;
width: 100%;
bottom: 5%;
background-color: black;
opacity: 0;
**transition: all 0.3s ease-in-out 2s;**
z-index: 1;
}
#image_container:hover {
opacity: 1;
}
If i delete the transition attribute it works:`
Could you show me why?

Ajax Start Ajax Stop works only once

Ajax stop/Ajax start works only the first time either button is clicked after the page is loaded, and I can't see why. If either button is clicked after the initial click, the loading div does not appear. I would like to show the loading div whenever I click either the Click 1 or Click 2 button and for the div to disappear once the contents have been fully loaded. Please see the code below:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#loading').hide().ajaxStart( function() {
$(this).show();
}).ajaxStop ( function(){
$(this).hide();
});
$(document).on('click', '.menu1', function(){
$('.maincontent').load("1.php");
});
$(document).on('click', '.menu2', function(){
$('.maincontent').load("2.php");
});
});
</script>
<style>
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 25%;
left: 50%;
z-index: 100;
}
</style>
</head>
<body>
<button class="menu1">Click 1</button>
<button class="menu2">Click 2</button>
<div class="maincontent">
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
</div>
</body>
</html>

Categories