I have an image with id myimage. It has a width of 300px and height 100px. each 100px wide portion has a unique color, like below
------------------------
| red | green | blue |
------------------------
Is it possible to use each portion (having width & height 100px) with different id so that the image can be used as a button with different functions to each portion??
Answer only if it is possible and comment for others.
thanks in advance...:)
Set your image as a background image and give the parent div position:relative property. Then use nested divs with position:absolute each 100px apart from one another.
<div id="wrap">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
#wrap{
background:transparent url(...) no-repeat 0 0;
width:300px;
height:100px;
position:relative;
}
.first, .second, .third{
position:absolute;
top:0;
width:100px;
height:100px;
}
.first{
left:0;
}
.second{
left:100px;
}
.third{
left:200px;
}
Now using JQuery you can reference each part individually.
$('.first').click(function(){ // this is the first part
alert('first clicked')
})
Check working example at http://jsfiddle.net/PrMzr/
Related
I need to make a image revealing section on my page.
Here, I can show the just the shape of the transparent image using brightness and then later remove the brightness to reveal the image.
By default i get a black shape using brightness as seen in my snippet. I need to do the same thing but by changing the color for shape. I need to show the shape of the transparent image with a different color, red in my case.
How can I do this using css and/or javascript?
.mask-img{
width:50%;
filter: brightness(0);
}
<div class="container">
<img class='mask-img' src="https://picsum.photos/id/1001/800/800">
</div>
Use mix-blend-mode. The coloration and the value of the blend will depend on each case so you need to adjust it based on the image.
.mask-img {
width: 50%;
}
.container {
position:relative;
z-index:0;
background:#fff;
}
.container:after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:red;
mix-blend-mode:hue; /* or 'color' to get a different effect */
opacity:1;
transition:0.5s;
}
.container:hover::after {
opacity:0;
}
<div class="container">
<img class='mask-img' src="https://picsum.photos/id/1001/800/800">
</div>
I want to position a div element when the height of another div element is increased dynamically in other words i don't want the first div element to overlap second div element when its height is increased. How can i do that.
Like this:
function f() {
$(".fchild").height("+=100");
}
.parent {
width:50%;
display:inline-block
background-color:blue
}
.fchild {
width:100%;
height:100px;
background-color:red;
}
.cchild {
width:100%;
height:100px;
background-color:green;
}
.btn {
position:absolute;
bottom:0;
right:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="fchild">
</div>
<div class="cchild">
</div>
</div>
<button class="btn" onClick="f()">Increase height</button>
Notice how, when you press the "Increase height" button, the height of the red box increases, but the green box moves down the same distance. All I have done here is I have put the two divs inside the same parent div, which has a dynamic height.
I have an issue with the layout of my website right now...
The layout is similar to this fiddle I made. Top layer has my project thumbnails, and the lower layer gets exposed to show project details when user clicks a thumbnail.
Problem I am having is that a user has to scroll down to click a thumbnail on the top layer. Then, when the layer fades out, the lower div has already scrolled with it - and I need the div to be scrollTop(0) instead...
Please see my fiddle to understand what I am talking about:
$('#click').on('click', function(){
$('#topPanel').fadeOut(600);
})
#click {
padding:10px 15px;
position:fixed;
z-index:100;
}
#topPanel, #bottomPanel {
width:80%;
height:auto;
margin:0 auto;
padding:100px;
text-align:center;
}
#topPanel {
background:green;
position:absolute;
z-index:10;
}
#bottomPanel {
background:yellow;
position:absolute;
z-index:0;
}
#topPanel p, #bottomPanel p {
padding: 500px 0;
text-transformation:uppercase;
}
#bottomPanel p:nth-child(odd){
background:#555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="click">CLICK ME TO FADEOUT TOP</button>
<br>
<p>please scroll down and then click button above to see issue</p>
<div id="topPanel">
<p>top of page</p>
<p>middle of page</p>
<p>bottom of page</p>
</div>
<div id="bottomPanel">
<p>top of page</p>
<p>middle of page</p>
<p>bottom of page</p>
</div>
https://jsfiddle.net/reese329/50urkgtm/
The problem is that your panels aren't scrolling: the whole document is scrolling! The trick is to set overflow: hidden on a wrapper element (or the body), and make the panels themselves scrollable with overflow-y: scroll. Here is a working example.
Notice that I had to set the height of the panels explicitly (to 100vh, filling the viewport).
I also fixed your text-transform: uppercase rule (the style is text-transform, not text-transformation :) ).
I tried to do an overlay for images, but I have 2 problems:
$(document).ready(function () {
$('#boximmagini img').click(function(){
$("#immagine img:last-child").remove()
var source= $(this).attr('src');
$('#immagine').append("<img src="+source+"/>")
$('#overlay').fadeIn('fast');
$('#box').fadeIn('slow');
});
$(".chiudi").click(function(){
$('#overlay').fadeOut('fast');
$('#box').hide();
});
$("#overlay").click(function(){
$(this).fadeOut('fast');
$('#box').hide();
});
});
.chiudi{
cursor:pointer;
}
.overlay{
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;
cursor:pointer;
}
#box{
width:600px;
height:400px;
display:none;
z-index:+300;
position:absolute;
left:30%;
top:20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="overlay" id="overlay" style="display:none"></div>
<div id="box">
<div class="chiudi">CHIUDI</div><br>
<div id="immagine"></div>
</div>
<div id="boximmagini">
<div><b>Clicca</b></div>
<img src="http://i62.tinypic.com/icpph2.jpg" class="imgoverlay" style="width: 31%" />
</div>
PROBLEMS:
I don't know how position #box in middle of screen. With left: 30% it isn't in the middle of screen. I have read other question where a lot of user suggest to use a div with position relative and inside it a div with position absolute. But in my case i think that is not possible.
when the box fadein, and i resize the window, the box is "out" window (the cause is left property)
I hope that you can help me!
Sorry for my english
Thanks!
I this fiddle I set both your changing color and making sure it is always in the middle, setting left:50% and translate3d -50% will always set it to the center because of the position absolute, if you want also vertical positioning do the same for top and -50% to the y (2nd parameter): http://jsfiddle.net/whb3mpg4/7/
#box{
width:600px;
height:400px;
display:none;
z-index: 300;
position:absolute;
top:20%;
left:50%;
transform: translate3d(-50%,0,0);
}
#box img{
position:absolute;
left:50%;
transform: translate3d(-50%,0,0);
}
I know I could use same CSS class for both but I wanted to keep it clear and not changing the JS or the CSS defenitions
Hope this helped you.
I know that parent divs can't be expanded to the height of an absolutely-positioned child with pure CSS and I found one solution that addresses this with some js: http://jsfiddle.net/6csrV/7/
But what if you have multiple columns, each positioned absolutely, and you don't know which one will be tallest? For example:
<div class="parentWrapper">
<div class="column column1">This content may be 4 lines long</div>
<div class="column column2">This content may be 8 lines long</div>
<div class="column column3">This content may be 5 lines long</div>
</div>
To add yet another challenge, the number of columns may also differ, so it should be possible to target the generic "column" class rather than column1, column2, column3 etc...
And to make it even more of a challenge, is it possible to have this work only when the browser viewport is narrower than a specified number of pixels?
Use height:auto for the layer http://jsfiddle.net/saysiva/PuVvh/1/
#container {
width:500px;
position:absolute;
left:200px;
vertical-align:center;
}
#mainContainer {
border:0px solid red;
height:auto;
}
#menu {
background-color:#FFD700;
height:auto;
width:100px;
float:left;
}
#content {
background-color:#EEEEEE;
height:auto;
width:400px;
float:left;
}