Everything in this code works just fine until I position my absolute element to the top then onmouseover doesn't want to work at all. I tried using CSS :hover and that did the same thing.
<html>
<div class="stylewrap">
<div class="style">
<h3 class="stylesub"><span id="letterF" onmouseover="change1()">F</span></h3>
</div>
</div>
</html>
<style>
.stylewrap {
position: absolute;
top: 0;
}
.style {
position: relative;
color: blue;
}
</style>
<script>
function change1(){
document.getElementById('letterF').style.color="red";
}
</script>
You dont need any onmouseover event with normal css it can be achieved
.stylewrap{
position: absolute;
top: 0;
}
.style{
position: relative;
color: blue;
}
.AbsoluteHover:hover{
color:red;
}
<div class="stylewrap">
<div class="style">
<h3 class="stylesub"><span id="letterF" class="AbsoluteHover">Test Hover</span></h3>
</div>
</div>
Related
I am working on a site where I employ the Overlay effect. I found how to do it on W3 Schools and it's quite easy.
However, I am trying to have two separate overlays on the same page: click on one button to see one set of text, click on a second to see another.
The problem I am having is that I don't know how to differentiate the separate overlays. In my example below, if a user clicks on the first overlay button, then get the text meant for the second overlay. And if they click on the second overlay button they get the text meant for the second overlay. I can't seem to get the first overlay text to appear, in other words.
I imagine it is something fairly simple but I haven't figured it out on my own.
Below is some code. This is not my actual site, but a slightly edited version of what's offered on W3. If I could learn how to differentiate the two buttons here I can do it on my own site.
Thank you for your help.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<style>
#overlay1 {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
#overlay2 {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<!-- Overlay 1: -->
<div id="overlay1" onclick="off()">
<div id="text">Overlay 1 Text</div>
</div>
<div style="padding:20px">
<h2>Overlay with Text Examples</h2>
<button onclick="on()">Overlay 1</button>
</div>
<script>
function on() {
document.getElementById("overlay1").style.display = "block";
}
function off() {
document.getElementById("overlay1").style.display = "none";
}
</script>
<!-- Overlay2: -->
<div id="overlay2" onclick="off()">
<div id="text">Overlay 2 Text</div>
</div>
<div style="padding:20px">
<button onclick="on()">Overlay 2</button>
</div>
<script>
function on() {
document.getElementById("overlay2").style.display = "block";
}
function off() {
document.getElementById("overlay2").style.display = "none";
}
</script>
</body>
</html>
You are calling the same on and off functions for both overlays... In other words, you are redefining the functions.
Change your body to the following:
<!-- Overlay 1: -->
<div id="overlay1" onclick="off('overlay1')">
<div id="text">Overlay 1 Text</div>
</div>
<div style="padding:20px">
<h2>Overlay with Text Examples</h2>
<button onclick="on('overlay1')">Overlay 1</button>
</div>
<!-- Overlay2: -->
<div id="overlay2" onclick="off('overlay2')">
<div id="text">Overlay 2 Text</div>
</div>
<div style="padding:20px">
<button onclick="on('overlay2')">Overlay 2</button>
</div>
<script>
function on(id) {
document.getElementById(id).style.display = "block";
}
function off(id) {
document.getElementById(id).style.display = "none";
}
</script>
I'm a complete beginner at coding and I've already searched here but I couldn't really find a proper solution to my problem.
I'm trying to get a text to appear in place of the image when I hover over the image with the mouse.
Unfortunately jQuery has to be used, I know it can be done by just using CSS.
So far I have the following which I found on here:
In the head:
<script>
$(function(){
$('.parent').mouseenter(function(){
$(this).children('.child').fadeIn();
}).mouseleave(function(){
$(this).children('.child').fadeOut();
});
});
</script>
In the body:
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'/>
<div class='child'>
<p>Random text.</p>
</div>
</div>
CSS:
.parent
{
position:relative;
}
.child
{
position: absolute;
left: 0;
bottom: 0;
background-color: black;
opacity: 0.5;
padding:10px;
display:none;
}
Thank you for an easy tip or explanation on what I'm doing wrong and how I can solve that problem.
Edit:
This is my full code in my PHP file:
echo "
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>Test Blog</title>
<script>
$(document).ready(function() {
$('.gallery-item').hover(function() {
$(this).find('.img-title').fadeIn(300);
}, function() {
$(this).find('.img-title').fadeOut(100);
});
});
</script>
</head>
<body>
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>
<div class=\"wrapper clearfix\">
<figure class=\"gallery-item\">
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'>
<figcaption class=\"img-title\">
<h5>Random text.</h5>
</figcaption>
</figure>
</div>
And there it continues with a dropdown menu routing to the other pages.
The CSS code is in my CSS file which I linked to above (the link is correct since all the other CSS code is working).
$(document).ready(function() {
$('.gallery-item').hover(function() {
$(this).find('.img-title').fadeIn(300);
}, function() {
$(this).find('.img-title').fadeOut(100);
});
});
.gallery {
width: 25em;
margin: 2em auto;
}
.gallery-item {
height: auto;
width: 48.618784527%;
float: left;
margin-bottom: 2em;
position: relative;
}
.gallery-item:first-child {
margin-right: 2.762430939%;
}
.gallery-item img {
width: 100%;
}
.gallery-item:hover .img-title {}
.img-title {
position: absolute;
top: 0;
margin: 0;
height: 100%;
width: 100%;
text-align: center;
display: none;
background-color: #333;
}
.img-title h5 {
position: absolute;
color: #fff;
top: 33%;
width: 100%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper clearfix">
<figure class="gallery-item">
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'>
<figcaption class="img-title">
<h5>Random text.</h5>
</figcaption>
</figure>
</div>
You have to define the size of the overly - I did that with the position settings below. Also, I erased the opacity setting. Not sure what else you want, but basically it works now.
$(document).ready(function() {
$('.parent').mouseenter(function() {
$(this).children('.child').fadeIn();
}).mouseleave(function() {
$(this).children('.child').fadeOut();
});
});
.parent {
position: relative;
}
.child {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: black;
padding: 10px;
display: none;
}
.child p {
color: white;
text-align: center;
margin-top: 100px;
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image' />
<div class='child'>
<p>Random text.</p>
</div>
</div>
Hope it helps you out.
$(function(){
$('.parent').mouseenter(function(){
//alert();
$(this).children('.child').show().fadeIn(200);//have some timeout for fading in
}).mouseleave(function(){
$(this).children('.child').fadeOut(400);
});
});
.parent
{
position:relative;
}
.child
{
position: absolute;
left: 0;
bottom: 0;
background-color: black;
opacity: 1.0;
padding:10px;
display:none;
/*
add width and height attribute to the elem
*/
width:100%;
height:300px;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'/>
<div class='child'>
<p>Random text.</p>
</div>
</div>
Is it possible to check via javascript if client click on background image which is defined in css file to some div class ? ..
.volume {
width: 40%;
margin: auto;
padding-left: 40px;
background: url(../img/speaker.png) left center no-repeat;
height: 30px;
line-height: 30px;
margin-top: 2em;
}
I really don t want to change HTML file because I am not an owner..
here is the HTML code
<div class="volume">
<div class="progress-bar">
<div class="progress">
<span></span>
</div>
</div>
</div>
You can accomplish this simply by placing a transparent element over the speaker icon, and assigning a click event to it.
See this jsfiddle.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style type="text/css">
.volume {
width: 40%;
margin: auto;
padding-left: 40px;
/*background: url(../img/speaker.png) left center no-repeat;*/
background: url(http://findicons.com/files/icons/1672/mono/32/speaker.png) left center no-repeat;
height: 30px;
line-height: 30px;
margin-top: 2em;
}
#overlay {
z-index: 1000;
background-color: transparent;
height: 32px;
width: 32px;
position: relative;
right:40px;
bottom:2px;
}
</style>
</head>
<body>
<div class="volume">
<div class="progress-bar">
<div class="progress">
<span></span>
</div>
</div>
</div>
<script type="text/javascript">
var $overlay = $('<div id="overlay""></div>').click(function() { overlay_click(); } );
$('div.volume').prepend($overlay);
function overlay_click() {
alert('icon was clicked');
}
</script>
</body>
</html>
I'm not sure what / how this looks on your end, but if you wish to check if a user clicked on the .volume div (and not the .progress-bar or .progress), you can simply check the target of the click event:
var volume = document.querySelector('.volume');
volume.addEventListener('click', function(e) {
// check if it was the .volume div
if (e.target.className === 'volume') {
// do something
}
});
https://jsfiddle.net/j64fpb3m/1/
I (newbie in MVC) added a preloader with jquery in the layout page, which should be loaded on every page load in MVC.
The problem is it fires only on the login page, but does not fires on the subsequent pages. Is there any way to make it generic ?
......................
<script type="text/javascript">
$(window).load(function () {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");;
});
</script>
<style type="text/css">
.no-js #loader
{
display: none;
}
.js #loader
{
display: block;
position: absolute;
left: 100px;
top: 0;
}
.se-pre-con
{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(images/Preloader_3.gif) center no-repeat #fff;
}
</style>
</head>
<body>
<div id="wrapper">
#Html.Action("Navbar", "Navbar", new { controller = ViewContext.RouteData.Values["Controller"].ToString(), action = ViewContext.RouteData.Values["Action"].ToString() })
<div id="page-wrapper">
<div id="main">
<div class="ptcontainer">
<div id="loader" class="se-pre-con"></div>
#RenderBody()
</div>
<div id="footer">
</div>
</div>
</div>
</div>
Thanks in Advance!
You code is correct but you need to but slash to the background url image
background: url(/images/Preloader_3.gif) center no-repeat #fff;
I have a problem with slider controls and any block with position: absolute on slider section.
$(document).ready(function() {
$('#fullpage').fullpage();
});
.slide {
text-align: center
}
.section {
text-align: center;
}
.absolute {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px;
text-align: center;
background: red;
z-index: 2;
}
.slide1 {
background: #cccccc;
}
.slide2 {
background: #C3C3C3;
}
.section2 {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.fullpage/2.5.9/jquery.fullPage.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.fullpage/2.5.0/jquery.fullPage.min.css" />
<div id="fullpage">
<div class="section section1">
<div class="absolute">position: absolute</div>
<div class="slide slide1"> Slide 1 </div>
<div class="slide slide2"> Slide 2 </div>
</div>
<div class="section section2">Some section</div>
</div>
If you slide down and up - everything is ok. But if you use slider and then will slide down and up. The page will show without slider controls(and absolute block).
I can't find why it is happening. Problems occurs only in Chrome and Opera.
UPDATES:
Here is jsfiddle for example: https://jsfiddle.net/nfL5w9yL/1/
Fullpage adds z-index:1 to fp-slides
Had the same issue recently, i don't know if you found a solution, but my solution was to remove z-index from fp-slides!
the weird part is that in my case the navigation buttons were not affected, only my position absolute div