Using JavaScript to make title pop out in webpage? - javascript

I am making a webpage. Code can be found here:
https://jsfiddle.net/saTfR/43/
HTML:
<body>
<img id="map" src="http://www.local-guru.net/img/guru/worldglow.png"
alt="map">
</body>
<div id="sidebar">
<div class="logo">
<img id="logo" src="logo2.png" alt="Logo">
</div>
</html>
CSS:
* {font-family: Lucida Console; }
#sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 230px;
height: 100%;
background-color: #CD6A51;
}
</style>
I want to insert some text which will have a "pop out" effect on top of the map image. How would I be able to do that?

On top of your map image. I assume you want it in the "center" of your image even if you scroll to the right you still want it to stick there.
You can easily create this by using the fadeIn method (jquery)
Here is the code:
HTML:
<p class="text">asdfasdfaa</p>
<img id="map" src="http://www.local-guru.net/img/guru/worldglow.png" alt="map"/>
<p class="text">asdfasdfaa</p>
<div id="sidebar">
<div class="logo">
<img id="logo" src="logo2.png" alt="Logo">
</div>
CSS: (adjust css to your needs)
* {font-family: Lucida Console; }
#sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 230px;
height: 100%;
background-color: #CD6A51;
}
.text{
color:white;
z-index:999;
position:fixed;
left:60%;
font-size:25px;
}
JS
pop-up effect that you specified in the comment:
$(".text").hide().fadeIn(2000);
Here is also the code for your header text to disappear once you scroll down. When you scroll up it will reappear again.
var mywindow = $(window);
var pos = mywindow.scrollTop();
mywindow.scroll(function() {
if(mywindow.scrollTop() > pos)
{
$('.text').fadeOut();
}
else
{
$('.text').fadeIn();
}
pos = mywindow.scrollTop();
});
and here is the fiddle(updated) URL: https://jsfiddle.net/eugensunic/saTfR/48/

Related

Hovering over text and display image in another div and the image stays

I am facing a lot of problem in my attempt to display image in another div when someone hover over a text. I have a menu where there is a list of 5 text lines. I want to display different images at the same position for each hover over these text lines. I managed to display images on hover with CSS but they disappear on unhovering. I want that the images stays after a user hovered over one text and then when the user hovers over another text, related image gets displayed at the same position. I tried some other layout as well but that was not responsive to device size.
Here is my current code:
<p><style>
.parent > p:hover:after {
width: 5px;
content: url(image1.png);
position: absolute;
z-index: 2;
left: 800px;
bottom: 8px;
}
.parent1 > p:hover:after {
width: 5px;
content: url(image2.png);
position: absolute;
z-index: 2;
left: 800px;
bottom: 8px;
}
.parent2 > p:hover:after {
width: 5px;
content: url(image3.png);
position: absolute;
z-index: 2;
left: 800px;
bottom: 8px;
}
.parent3 > p:hover:after {
width: 5px;
content: url(image4.png);
position: absolute;
z-index: 2;
left: 800px;
bottom: 8px;
}
.parent4 > p:hover:after {
width: 5px;
content: url(image5.png);
position: absolute;
z-index: 2;
left: 800px;
bottom: 8px;
}
</style></p>
<div class="parent">
<p style="padding-left: 320px;"><strong>menuitem1</strong></p>
</div>
<div class="parent1">
<p style="padding-left: 320px;"><strong>menuitem2</strong></p>
</div>
<div class="parent2">
<p style="padding-left: 320px;"><strong>menuitem3</strong></p>
</div>
<div class="parent3">
<p style="padding-left: 320px;"><strong>menuitem4</strong></p>
</div>
<div class="parent4">
<p style="padding-left: 320px;"><strong>menuitem5</strong></p>
</div>
I am sorry if I made some mistake. My technical knowledge is not that much.
The only way to do this is through using JavaScript and the mouseOver function, Set the display to none and once the h1 is hovered over it runs the function mouseOver() which sets the span display to block(visible). You can also set the state after such as adding a class to the span which makes it close after a couple of seconds automatically.
<h1 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">Mouse
over
me</h1>
<span id="span" style="display:none;">Hey! Click me to close</span>
<script>
function mouseOver() {
document.getElementById("span").style.display = "block";
}
function mouseOut() {
}
window.onclick = function(event) {
if (event.target == span) {
span.style.display = "none";
}
}
</script>
function setURL(newUrl){
var url=newUrl;
return function(){
document.getElementById('picture').setAttribute('src',url);
}
}
document.getElementById('text1').addEventListener('mouseover',setURL('https://upload.wikimedia.org/wikipedia/commons/8/8f/Example_image.svg'));
document.getElementById('text2').addEventListener('mouseover',setURL('https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg'));
.container{
width:200px;
display:flex;
margin-left:auto;
margin-right:auto;
}
.container > div{
width:50%;
}
img{
width:30px;
height:30px;
}
<div class="container">
<div>
<p id="text1">picture1</p>
<p id="text2">picture2</p>
</div><!--END TEXT-->
<div>
<img id="picture" src="">
</div><!--END PICTURE-->
</div><!--END CONTAINER-->

My overlay pushes the rest of the page down rather than appearing on top

I want a <div> to appear over the current screen when the user clicks on an image whilst darkening the background out behind the overlay. However rather than the <div> appearing just over the top of the screen in the current position, it pushes everything in the background beneath it.
Screenshot before Overlay:
Screen after Overlay has been applied (you can see it pushes the other elements beneath):
On a side note, is there a way in which just by clicking in the darkened out background (out of the overlay) it closes the overlay down?
HTML:
<section id="content">
<div class="container">
<section id="grid" class="clearfix">
<div class="cf show-grid">
<div class="row">
<!-- Start Overlay -->
<div id="overlay"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox">
<button onmousedown="toggleOverlay()">Close Overlay</button>
</div>
<!-- End Special Centered Box -->
<!-- Start Normal Page Content -->
<div id="wrapper">
<button onmousedown="toggleOverlay()">Apply Overlay</button>
</div>
<!-- End Normal Page Content -->
<div class="grid-2 dashboardIcons">
<h3 class="fontAmaticH1">Stress & Anxiety</h3>
<img src="images/stress.jpg">
</div>
<div class="grid-2 dashboardIcons">
<h3 class="fontAmaticH1">Mindfulness</h3>
<a class="cursor" onmousedown="toggleOverlay()"><img src="images/mindfulness.jpg"></a>
</div>
<div class="grid-2 dashboardIcons">
<h3 class="fontAmaticH1">Exam Preperation</h3>
<img src="images/examPrep.jpg">
</div>
</div>
</div>
</section>
</div>
</section>
CSS:
/*Practising the overlays for modules */
div#overlay {
display: none;
z-index: 2;
background: #000;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
text-align: center;
}
div#specialBox {
display: none;
position: relative;
z-index: 3;
margin: 150px auto 0px auto;
width: 500px;
height: 300px;
background: #FFF;
color: #000;
}
div#wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left:24px;
}
JS:
/* This is for the page overloays within the module pages */
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
overlay.style.opacity = .8;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
}
}
For info: I am using Foldy Grids to ensure my divs are all responsive etc.
For div#specialBox try this:
position: fixed;
top: 150px;
left: 50%;
transform: translateX(-50%); /* this will place it in the center */
And delete this (also for div#specialBox):
position: relative;
margin: 150px auto 0px auto;
While div#specialBox has position: relative then the block will be in "main flow" and push the rest page down. Position fixed and absolute "remove" the block from this flow.

overlay image on another image in html with bootstrap 4

I want to overlay image on another image and change the pixel(location) of it.
I search the google and wrote this code:
.background {
position: relative;
width: 100%;
top: 0;
left: 0;
z-index: 1;
}
.overlay {
position: absolute;
left: 0;
top: 0;
transform: translate(440px, 340px);
z-index: 2;
}
<div class="container-fluid">
<div class="row" style="margin-top:10px;">
<div class="col-md-10 col-lg-10 col-sm-10 col-xs-10 col-xl-10 " id="test">
<img src="static/overlay.png" id="image_master" class="background" style="border: 4px solid lightgrey;">
<img src="static/overlay.png" id="overlay2" class="overlay">
</div>
This code gives me the result I want, but the problem is when I resized the page, the image-overlay get out from the background image.
I want to preserve the proportion between them.
Reason
The reason why the image overlay is not responsive because you are giving a specific value translate(440px, 340px) for transform and this is applicable for all the devices.
How to fix it
Use media queries (#media) for each viewports/devices.
or
Make the overlay-image absolute position with respect to it's container #test.
I've used this approach to achieve the result. You can have a look at the working fiddle.
Link: https://jsfiddle.net/Baliga/fme12tby/22/
Hope this might help you.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.image-container {
position: relative;
display: inline-block;
}
.image-overlay {
position: absolute;
left: 0;
top: 0;
opacity: 0.5;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="image-container">
<img class="image-content" src="https://images.pexels.com/photos/1532771/pexels-photo-1532771.jpeg?auto=compress&cs=tinysrgb&h=350">
<img class="image-overlay" src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&h=350">
</div>
</body>

Transitions with overlaps

So I have two divs which are overlapping, set by my CSS as shown below.
HTML:
<body onLoad="present();">
<div class="pre-wrap">
<img src="images/logo.png" id="logo" alt="Pre Logo" style="display: table; margin: 0 auto;" />
</div>
<div class="wrap">
<p>Test</p>
</div>
</body>
CSS:
.pre-wrap {
height: 700px;
width: 900px;
opacity: 1.0;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
background-color: red;
visibility: visible;
}
.wrap {
height: 700px;
width: 900px;
opacity: 1.0;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
background-color: black;
visibility: hidden;
}
I would like, when the body has loaded, a function to load which does the following: Fades in the image found in the div .pre-wrap, after displaying it for a few seconds, it will fade the image out and the div .pre-wrap will have it's visibility set to hidden. The second div .wrap will then fade in all of its contents.
I tried some simple JS but didn't achieve what I was after.
This question I would say is unique because it has overlapping divs which need visibilities being changed. Please note the overlapping already works, it's just the javascript fading that needs doing.
I tried the following JS which is very simple and works on other projects I've done however it doesn't on this one.
function present() {
$("#logo").fadeIn(3000);
}
Here is my code. I removed the property visibility in the css. And set the display of #logo to none. The attribute onload in the body is no longer needed.
var fadeTime = 3000; // Time for fading
var waitingTime = 5000; // Time how long image is visible
$(window).ready(function(){
$("#logo").fadeIn(fadeTime);
setTimeout(function(){
$(".pre-wrap").fadeOut(fadeTime);
$(".wrap").delay(fadeTime).fadeIn(fadeTime);
},fadeTime+waitingTime);
});
.pre-wrap, .wrap{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 700px;
width: 900px;
opacity: 1.0;
margin: auto;
}
.pre-wrap {
background-color: red;
}
.wrap {
background-color: black;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pre-wrap">
<img src="images/logo.png" id="logo" alt="Pre Logo" style="display: none; margin: 0 auto;" />
</div>
<div class="wrap">
<p>Test</p>
</div>

HTML + (NV)D3: Can't place a div on top of a div of the chart even with > z-index

so I have some HTML that looks like this:
<div id="container">
<svg id="chart1"></svg>
<div id='logo'>
<img id="logo" src="cubs_best.png";>
</div>
</div>
With corresponding CSS like,
svg {
/*display: block;*/
position: relative;
z-index: 1;
}
html, body, #container, svg {
margin: 0px;
padding: 0px;
height: 80%;
width: 100%;
}
#logo {
position: absolute;
z-index: 10;
top: 15px
left: 15px;
}
you would think that the div with the image would be placed on top, right? (there's no separate CSS styling for chart1)
But this is what it shows, and it won't budge.
Edit
#container {
position: relative;
}
didn't change anything sadly enough.
The whole code (minus Javascript underneth that makes the D3 graph/svg):
Have you tried following sequence to get logo to the top of the chart:
<div id="container">
<div id='logo'>
<img id="logo" src="cubs_best.png";>
</div>
<svg id="chart1"></svg>
</div>
Also, remove semicolon at the end of img holder <....src="cubs_best.png";>

Categories