I have a page which i need to dim a certain area (div) instead of the entire page. How can I achieve this?
I have googled some answer but all of them is about dimming the whole page. Below is the sample code that I got but it dimmed the entire page.
<div id="dimmer"></div>
#dimmer
{
background:#000;
opacity:0.5;
position:fixed; /* important to use fixed, not absolute */
top:0;
left:0;
width:100%;
height:100%;
display:none;
z-index:9999; /* may not be necessary */
}
It covered the whole page because you set the width and height to 100%. If you were to make it 100px or 50%, that would work, but if you set it to 100%, it will cover 100% of the page.
.area-to-dim {
position: relative;
}
.dimmer {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
}
HTML
<div class="area-to-dim">
<div class="dimmer"></div>
</div>
Two ways, one really simple but I'm not 100% sure this is what you wanted.
First way, use CSS
.genericClassGivenToDivs, #idOfDiv {
background:#fff;
}
/* on mouse over, change the background colour */
.genericClassGivenToDivs:hover, #idOfDiv:hover {
background:#aaa;
}
The second way is more complex. Basically, reposition a div using javascript on mouse over. This requires some CSS and javascript. The following could be a lot cleaner with some work.
<html>
<head>
<style>
body {
margin:1em;
background:#ddd;
}
#contain {
margin:auto;
width:100%;
max-width:720px;
text-align:center;
}
#row1, #row2, #row3 {
width:100%;
height:48px;
line-height:48px;
color:#000;
background:#fff;
}
#row2 {
background:#eee;
}
#dim {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
display:none;
}
</style>
</head>
<body>
<div id="contain">
<div id="row1">Row 1</div>
<div id="row2">Row 2</div>
<div id="row3">Row 3</div>
</div>
<div id="dim"></div>
<script>
var dimEl = document.getElementById('dim');
function over() {
//console.log('over:['+ this.id +']');
dimEl.style.top = this.offsetTop +'px';
dimEl.style.left = this.offsetLeft +'px';
dimEl.style.height = this.offsetHeight +'px';
dimEl.style.width = this.offsetWidth +'px';
dimEl.style.display = 'block';
}
window.onload = function() {
var list = ['row1', 'row2', 'row3'];
var e;
for(x in list) {
e = document.getElementById(list[x]);
if (e) {
e.onmouseover = over;
}
}
}
</script>
</body>
</html>
Not entirely sure what "dimming a certain area" means, but I recently created a solution that might be applicable in some extent.
I had a div with a background image and some overlaid text, and the background (but not the text) should darken slightly on mouse over.
I solved it by having two containers and a textfield, so that the outermost div had the background image, the inner div expanded to 100% height and width and had a transparent black solid-color background, and then there was some text in that div.
Then, simply, on hover, I change the inner div background-color from rgba(0, 0, 0, 0) to rgba(0, 0, 0, .3), dimming the background image.
If this sounds applicable, see this jsFiddle
Why the display is none?
Check this?
#dimmer {
background: #111;
top: 0;
left: 0;
width: 100px;
height: 100px;
z-index: 9999;
/* may not be necessary */
}
#dimmer:hover {
background: #000;
opacity: 0.5;
transition: opacity 1s ease;
cursor: pointer;
}
<div id="dimmer">ok</div>
Related
I have been trying to put an element to fixed position within a given scroll height with Javascript. Outside of this height range, the position should be back to relative.
Here is what I have done so far. The position:fixed is inside the about-option class. When it gets to 4680, the class is added.
How do I make it have a height end-point of 5800 i.e 4680 - 5800, and also remove the class outside this height range?
window.onscroll = function () {
myFunction();
};
function myFunction() {
if (
document.documentElement.scrollTop > 4680 ||
document.body.scrollTop > 4680
) {
document.getElementById("about-txt").classList.add("about-option");
} else {
document.getElementById("about-text").className = "";
}
}
css
.about-option {
position: fixed;
top: 20%;
width: 40%;
right: 7%;
I guess you are trying to do what position sticky does: once the element hits the window's top boundery it starts sticking and if you scroll to the inverse way, it goes back to move together with content. Like here:
https://codepen.io/elad2412/pen/QYLEdK
<main class="main-container">
<header class="main-header">HEADER</header>
<div class="main-content">MAIN CONTENT</div>
<footer class="main-footer">FOOTER</footer>
</main>
body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; }
.main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
height:50px; background:#aaa; border-color:red;
}
.main-content{
min-height:1000px;
}
.main-header{position:-webkit-sticky; position:sticky; top:0;}
The trick part is to remember to add a container outside the sticky element, otherwise, it will not work.
I hope it helps!
function toggle(){
var button=document.querySelector('.toggle');
var bar=document.querySelector('.slide');
if(bar.className==='slide up'){
bar.className='slide down';
}else{
bar.className='slide up';
}
}
*{
margin:0px;
padding:0px;
height:100%;
width:100%;
}
.box{
overflow:hidden;
background-image: url('http://tombricker.smugmug.com/Travel/San-Francisco-California/i-jk2Z7D7/0/L/san-francisco-golden-gate-bridge-morning-sun-bricker-L.jpg');
background-size: cover;
background-position:center;
}
.slide{
position: relative;
left:39vw;
width: 55vw;
height: 75vh;
background: red;
}
.slide:before {
content: '';
position:absolute;
top:-3vh;
width: 0px;
height: 0px;
border-left:27.5vw solid transparent;
border-right:27.5vw solid transparent;
border-bottom:3vh solid white;
}
.slide.down{
transform:translateY(100vh);
}
.slide.up{
transform:translateY(25vh);
}
.slide{
transition:transform 0.4s ease-out;
}
<div class='box'>
<div class='slide up' onclick='toggle()'></div>
</div>
The white triangle on top of the red rectangle is made with pseudo element :before. What I am trying to do is when the sliding tag is up, the white triangle should be pointing down. To do that, I want to write a JS code that will add a transform CSS to that class with pseudo element that will translate triangle down by its height and rotate by 180deg.
I find on this developer blog the JS code to add, but it does not work and I don't know how to delete that code when the tag is down.
function toggle(){
var button=document.querySelector('.toggle');
var bar=document.querySelector('.slide');
if(bar.className==='slide up'){
bar.className='slide down';
//Here is where I need to add the line to delete CSS
}else{
bar.className='slide up';
//This is to add CSS
//3vh is the height of that white triangle
document.styleSheets[0].addRule('.slight:before','transform:translateY(3vh) rotateX(180deg)');
}
}
You can add the transformation to the CSS class, and simply toggle it.
CSS
.slide.up:before {
transform: translateY(3vh) rotateX(180deg);
}
JS
var bar = document.querySelector('.slide')
function toggle() {
var cl = bar.classList
cl.toggle('down', cl.contains('up'))
cl.toggle('up', !cl.contains('down'))
}
JSFiddle demo: https://jsfiddle.net/htq8ouyn/2/
Resources
Element.classList - Web APIs | MDN
I want this widget code without jQuery. I checked all posts, but they do not help. its like SUmoME widget.
http://www.appsumo.com/clickminded-2016/
see the top right blue tab. i want that replace to pic in my blog.
I want from the left corner to right slider when mouse hover like this.pls see demo.
Sorry for my bad english :(
HTML
<div id="css">
<img src="https://pbs.twimg.com/profile_images/531885101043302400/4fDwYFQb.png" alt="" />
</div>
CSS
img {
position: relative;
margin: -500px;
left: 0;
transition: left .5s;
}
#css:hover img {
left: 400px;
}
DEMO
If you only care for browsers supporting html5 and css3, use css animations. The syntax's a bit like your existing code when it comes to the key frames.
If you wanna support all browsers, use jQuery's animate funcion, which changes the styles every 100ms or so, thus doesn't require css3 support. The css3 animation solution has a better performance but everyone can afford to run jQuery's animation, you won't really feel any difference.
i hope understand your question correctly...
i made it for you :)
img {
border: 1px solid black;
width:50px;
height:50px;
}
.parent{
top:100px;
padding:3px;
background-repeat:no-repeat;
cursor:pointer;
border: 5px solid black;
}
.parent span{
position:absolute;
top:50px;
transition: left .5s;
left: 0;
margin-left:-100px;
width:50px;
height:50px;
}
.parent:hover span{
left:100px;
}
<a class="parent"> >
<span>
<img src="http://www.mail-signatures.com/articles/wp-content/uploads/2014/08/facebook.png" alt=""><br>
<img src="http://www.mail-signatures.com/articles/wp-content/uploads/2014/08/twitter.png" alt="" />
</span>
</a>
hope its good!
if you have span tag on your code it will effect this tag too... i suggest you to give this specific span an id and probably it will work.
here is an example:
.parent #mySpan{
position:absolute;
top:150px;
transition: left .5s;
left: 0;
margin-left:-50px;
width:50px;
height:50px;
}
.parent:hover #mySpan{
left:50px;
}
<a class="parent">
<span id='mySpan'>
<img src="http://www.mail-signatures.com/articles/wp-content/uploads/2014/08/facebook.png" alt=""><br>
</span>
</a>
I found this Javasript code without (HTML,CSS) working in widget.. but how to do like this mouse hover? DEMO
<script type="text/javascript">
<!--
var imgObj = null;
var animate ;
function init(){
imgObj = document.getElementById('myImage');
imgObj.style.position= 'absolute';
imgObj.style.top = '240px';
imgObj.style.left = '-300px';
imgObj.style.visibility='hidden';
moveRight();
}
function moveRight(){
if (parseInt(imgObj.style.left)<=10)
{
imgObj.style.left = parseInt(imgObj.style.left) + 5 + 'px';
imgObj.style.visibility='visible';
animate = setTimeout(moveRight,20); // call moveRight in 20msec
//stopanimate = setTimeout(moveRight,20);
}
else
stop();
f();
}
function stop(){
clearTimeout(animate);
}
window.onload =init;
//-->
</script>
<img id="myImage" src="https://lh4.googleusercontent.com/proxy/LxuD_Ceq6NrRGBW2mF_6Cy9zeO_vqkV8ZTRMdzjc_LxE0InnXBLp1_BkWuyhlg0EMJPt-Njzzp5_4cuR562m6dh8QNTW_1kzsf9pXcXiKI2ZK6wEMJH2TAAiQqpQUewNMKI=s0-d" style="margin-left:170px;" />
Here i found it easy steps .... just copy this to HTML widget ...works perfect
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "-80"}, "medium");}, function() {$(this).stop().animate({right: "-330"}, "medium");}, 100);});
//-->
</script>
<style type="text/css">
.gplusbox{
background: url("https://lh3.googleusercontent.com/-iOMr0KnDFkY/V17Zm0bj49I/AAAAAAAABGw/Ag_ig7sBwYE5qXn6evvNTFSg9KvhQT7lACLcB/h250/Untitled-1.jpg") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 320px;
padding: 0 0px 0 40.5px;
width: 325px;
z-index: 99999;
position:fixed;
right:-330px;
top:20%;
}
</style>
<div class="gplusbox"><div>
<img src="https://pbs.twimg.com/profile_images/531885101043302400/4fDwYFQb.png" />
</div></div>
I found the following on codepen and really liked this effect. Now I'm trying to adapt this to my needs and ran into some problems:
Whenever a user scrolls down or is resizing his screen, the image is behaving weird (I can't describe it in my own words, see jsfiddle for what I mean).
I guess this problem might relate to the 'background-attachment: fixed' property.
See:
.image {
width:100%;
height:100%;
position:absolute;
bottom:0;
background:url("http://lorempixel.com/400/200/") fixed top center no-repeat;
background-clip:content-box;
opacity: 0.4;
filter: alpha(opacity=40);
}
.show {
width:100%;
height:100%;
position:absolute;
bottom:0;
background:url("http://lorempixel.com/400/200/") fixed top center no-repeat;
background-clip:content-box;
}
I tried to experiment with both, the position of the div and the background-attachment property, but I didn't get a decent result. You can see my updated fiddles for that (Rev.: 2-4).
Does one of you have an idea of how I can use this effect without the shown weird behaviours?
Maybe there's some jQuery magic with whose help I can achieve this effect?
It would be best if the solution also supports the IE 8, but it's not a must at this point, as I only want to understand what I did wrong.
Thanks in advance.
The problem is that author used fixed background attachment, without it the script is more complex.
If I get it right you want to control the position by clicking the buttons.
I created a snippet that will give you a good starting point: JSnippet
As you can see things are more complex there but it does not uses fixed background and allows you to easily update the "loading" to any point you want, I have not tested it but it should work on most of the browsers and even older once.
You can set all you need using attributes:
data-loader-size -> sets the size.
data-back-image -> sets the back image.
data-front-image -> sets the front image.
data-update-to -> For the controls set the percentage you want.
The CSS:
div.loader {
position:relative;
background-repeat:no-repeat;
background-attachment: scroll;
background-clip:content-box;
background-position:0 0;
margin:0;
padding:0;
}
div.loader .loaded {
position:absolute;
top:0;
left:0;
background-repeat:no-repeat;
background-attachment: scroll;
background-clip:content-box;
background-position:0 0;
margin:0;
padding:0;
}
div.loader .position {
position:absolute;
left:0;
border-top:1px dashed black;
width: 100%;
text-align:center;
margin:0;
padding:0;
min-height: 40px;
}
div.loader .position div {
font-family: 'Concert One';
background:#2f574b;
width: 25%;
margin:0;
padding:5px;
margin: 0 auto;
text-align:center;
border-radius: 0 0 4px 4px;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
color:white;
}
The HTML:
<div class="loader"
data-loader-size="450px 330px"
data-back-image="http://fdfranklin.com/usf-bull-bw.png"
data-front-image="http://fdfranklin.com/usf-bull.png"
>
<div class="loaded"></div>
<div class="position"><div>0%</div></div>
</div>
<br><br>
<div>
<button class="set-loader" data-update-to="0">Set 0%</button>
<button class="set-loader" data-update-to="25">Set 25%</button>
<button class="set-loader" data-update-to="50">Set 50%</button>
<button class="set-loader" data-update-to="100">Set 100%</button>
</div>
The jQuery:
$(function() {
var loader_class = ".loader",
control_class= ".set-loader";
var oLoader = {
interval : 10,
timer : null,
upPerc : 0,
upHeight : 0,
curHeight : 0,
step : 1,
diff_bg : 0,
diff_top : 0,
size : $(loader_class).data("loader-size").split(" "),
heightInt : 0,
bimage : $(loader_class).data("back-image"),
fimage : $(loader_class).data("front-image"),
loader : $(loader_class).children('.loaded').eq(0),
position : $(loader_class).children('.position').eq(0),
pos_height : 0
};
oLoader.heightInt = parseInt(oLoader.size[1],10);
oLoader.pos_height = parseInt($(oLoader.position).height(),10);
$(loader_class).css({
width: oLoader.size[0],
height: oLoader.size[1],
'background-image':'url(' + oLoader.fimage + ')',
'background-size':oLoader.size.join(' ')
});
$(oLoader.loader).css({
width: oLoader.size[0],
height: oLoader.size[1],
'background-image':'url(' + oLoader.bimage + ')',
'background-size':oLoader.size.join(' ')
});
$(oLoader.position).css({
bottom: 0 - oLoader.pos_height
});
$(control_class).each(function(){
$(this).click(function(){
clearInterval(oLoader.timer);
oLoader.upPerc = parseInt($(this).data('update-to'));
oLoader.upHeight = Math.ceil((oLoader.upPerc/100)*oLoader.heightInt);
oLoader.upHeight = (oLoader.upHeight>oLoader.heightInt?oLoader.heightInt:oLoader.upHeight);
oLoader.curHeight = parseInt($(oLoader.loader).height(),10);
oLoader.step = (oLoader.upHeight>(oLoader.heightInt - oLoader.curHeight)?-1:1);
oLoader.diff_bg = (oLoader.step === 1?
(oLoader.heightInt - oLoader.curHeight) - oLoader.upHeight:
oLoader.upHeight - (oLoader.heightInt - oLoader.curHeight));
oLoader.diff_top = parseInt($(oLoader.position).css('bottom'),10);
oLoader.timer = setInterval(function () {
if (oLoader.diff_bg) {
oLoader.diff_bg--;
oLoader.curHeight += oLoader.step;
oLoader.diff_top += -oLoader.step;
oLoader.calc_perc = Math.ceil((oLoader.diff_top + oLoader.pos_height) / oLoader.heightInt * 100);
oLoader.calc_perc = (oLoader.calc_perc < 0?0:oLoader.calc_perc);
oLoader.calc_perc = (oLoader.calc_perc > 100?100:oLoader.calc_perc);
$(oLoader.loader).css({ height: oLoader.curHeight });
$(oLoader.position).css({ bottom: oLoader.diff_top });
$(oLoader.position).children('div').text(oLoader.calc_perc + "%");
} else {
clearInterval(oLoader.timer);
$(oLoader.position).children('div').text(oLoader.upPerc + "%");
}
}, oLoader.interval);
});
});
});
I have two div's one is div-content(red color) and second is div-content2(yellow color).div-content size is 0 to 50% and div-content2 size 50% to 100%.
Now In my screen 50% div-content and 50% div-content2
I need div-content1 drag left to right div-content1 width is 70 .In that time div-content2 will be 30.if div-content2 drag right to left width is 65 , in that time div-content width 35
finely when increases and content remain content will auto adjust So Please give me any Idea.
I am now to Stackoverflow .if i wrong to write Please guided me .
Thanks in Advanced
just the concept of it:
var drag = false,
maxW = $('.wrap').width();
$('.div1').click(function(){}).mousedown(function(event){
drag = true;
});
$(document).mousemove(function(event){
if(drag) {
if($('.div1').width() < maxW) {
$('.div1').width(event.pageX);
}
}
}).mouseup(function(){
drag = false;
});
.wrap {
width:100%;
position: relative;
}
.div1,
.div2 {
width:50%;
height:300px;
}
.div1 {
position: absolute;
top:0;
left:0;
z-index:1;
width: 50%;
background-color:red;
cursor:e-resize;
}
.div1:focus {
cursor:e-resize;
}
.div2 {
position:absolute;
top:0;
left:0;
width:100%;
background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
<div class="div1"></div>
<div class="div2"></div>
</div>