Its pretty simple to see what I mean if you look at the image, which I also need to shrink back if you click it again, it needs to be animated as well:
The image link http://www.keironlowecreative.x10hosting.com/Help.png
jquery
$(document).ready(function(){
$("#what > img").click(function () {
$("img").toggle("slow");
});
});
html
<div id="what">
<img src="small_img" />
<img src="big_img" style="display: none" />
</div>
toggle
You could use one of the horizontal accordion plugins for this.
Excuse the inline styles... Pixels aren't exact. Use the same image twice, one div on top of the other:
<div id="wrapper" style="position:relative; height:20px;">
<div id="top" style="background:url(...) top left no-repeat; position:absolute; height: 20px; width:18px; top:0; left:0; z-index:2;"></div>
<div id="under" style="background:url(...) top right no-repeat; position:absolute; height:20px; width:20px; top:0; left:2px; z-index:1;"></div>
</div>
So the top div is showing the plus and the left corner. The bottom div is showing the right corner - over two pixels so it's not showing under the corners of the top element. If the image is opaque, this doesn't matter...
Animate the width of the under div to get the effect. No fading, only one image. Should be small and quick to animate.
Related
I have script which detects two h4 elements and by position absolute it puts lines on them.
how lines look like
if you scroll they start to fill with orange color. But since they are put as position absolute on entire body, the problem is when those elements are going into an DIV with background-color:orange because the lines that are filling are also orange and I would like to make them blue, by adding something like filter: Invert
problem with orange line on orange background
So here is a question, if it's possible to make the line blue only if the lines are placed on that DIV with BG orange?
Maybe somehow it's possible to do it with JS viewport?
I will not add codes here of what I done because it's too long and too complicated.
But here is a short code of what I mean to help visualize the problem:
<div style="height:400px; width:100%;">
</div>
<div style="height:400px; width:100%; background-color:orange;">
</div>
<div style="height:500px; width:100px; position: absolute; top:100px; left:50%; background-color:orange; border:solid grey 1px;">
</div>
So the smaller orange div have border grey to help you see the whole orange div which is placed partialy on other div with background orange. So I want to achieve that the part of smaller orange block become different color for example blue if it's visible on that bigger orange div.
And ofcourse I cannot just put the smaller div inside of big one, because everything is placed with scripts that are complicated so I do not want to rewrite whole code. But if ofcourse if what I want to achieve is not possible then I will need to change whole block to different color and that's it.
SOLUTION!
Ahhh managed to do it with the trick of adding another DIV that detect position top of orange DIV and height of it, and places transaprent div on it with backdrop-filter.
orange line changes to blue when entering orange div
The code without complicated JS that check top position of element.
<div style="position:relative;">
<div style="height:400px; width:100%;">
</div>
<div class="backdrop-reverse" style="height:400px; width:100%; background-color:orange;">
</div>
<div style="height:500px; width:100px; position: absolute; top:100px; left:50%; background-color:orange; border:solid grey 1px;">
</div>
<!-- additional invisible block that changes color of everything on orange div -->
<div style="backdrop-filter: hue-rotate(200deg); width:100%; height:400px; position: absolute; left:0; top:400px; content: ''; z-index:100; pointer-events: none;"></div>
<style>
.backdrop-reverse{
overflow: hidden;
filter: hue-rotate(160deg); /*Just a bit if luck with hue rotation, it creates very similar orange color, but it's not the same, might be problem with different hue rotations*/
</style>
</div>
I am setting up a webpage so that it has multiple images on it, and each image has a 50% opacity mask over it. When the mask is moused over, it is supposed to disappear, and then when the mouse leaves the image (below the mask), the mask is supposed to reappear. This worked well when I tested it for one img inside my div, but when I added a second img, the disappear function affected the image with no id, which is confusing me greatly.
HTML:
<div id="images">
<img id="testimage1" src="url" onmouseover="appear1()"/>
<img src="url"/>
</div>
<div id="masks">
<img id="testmask1" src="url" onmouseover="disappear1()"/>
<img src="url"/> <!-- This is the one that disappears -->
</div>
CSS:
#images{
position:absolute;
top:0px;
}
#masks{
position:absolute;
top:0px;
}
JS:
function disappear1(){
//Makes the first test mask disappear. This is a test function.
document.getElementById("testmask1").style.display = 'none';
}
function appear1(){
//Makes the first test mask appear. This is a test function.
document.getElementById("testmask1").style.display = 'block';
}
EDIT: Roko asked why I didn't do this in pure CSS. Aside from the fact that I didn't think about how to configure the images correctly, when I eventually finish this page, I will want to have masks 'linked', where I mouse over one mask and both disappear. I'm not sure that's possible in pure CSS.
EDIT #2: As it turns out, the function was working as written. It was just that because I had a single div for each row of images, when the first image in the row appeared, everything else slid over, thus poor coding on my part.
Don't duplicate your ID. ID should be unique-per-page.
Also, why not do it in pure CSS? (no JS required)
jsBin demo
<div class="imgBox">
<img src="cat.jpg">
<img src="mask.png">
</div>
<div class="imgBox">
<img src="bear.jpg">
<img src="mask.png">
</div>
<div class="imgBox">
<img src="elephant.jpg">
<img src="mask.png">
</div>
CSS:
.imgBox{
position:relative;
/*width, height etc... */
}
.imgBox img{
position:absolute;
top: 0;
transition: opacity 0.5s; /* yey! */
}
.imgBox:hover img + img{ /* on hover target the second image */
opacity: 0;
}
I'm making a Chrome extension which stops all requests of images and will allow you to click on the broken image icon in order to load the image without the blocking. This is in order to save bandwidth.
I have setup the request blocking but I'm not sure how to go about the next step.
The next step would be adding a layer on top of that broken image icon which would intercept any clicks on that image. The reason I do this is because often an image will be anchored to another link so clicking on it would do something else to what is desired.
I thought of perhaps using the z-index CSS rule but I'm not entirely sure of how this works and also I'm not sure if this would be the best way to go about this.
Any suggestions? Thanks! :)
Add this css to your html
<style type="text/css">
//container div
.container{
width:300px;
position:relative;
}
//image css property
.imageHolder{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:10px;
}
// overlay css property
.imageOverlay{
position: absolute;
z-index:11px;
top:0px;
left:0px;
width:100%; height:100%;
text-align:center;
}
</style>
This is your html code will be
<div class="container">
<img src="myimage.png" class="imageHolder" />
<div class="imageOverlay"> Load </div>
</div>
Hope it helps... Thanks.
you'll have to do something like:
create a base div with css relative position
create your img tag with css absolute position, left:0px, top:0px, width:100%, height probably 50 and z-index probably 10.
create a top layer div with css position:absolute, z-index higher than that of the img, top:0px, left:0px, width: 100px and height probably 50.
The Code would look like
<div style="position:relative; width:50px;">
<img src="image.ext" border="0" style="position:absolute; left:0px; top:0px; width:50px; height:50px; z-index:10px;" />
<div style="position: absolute; z-index:11px; top:0px; left:0px; width:50px; height:50px; line-height:50px; text-align:center;"> Load </div>
</div>
I am trying to integrate a simple slider within my website and found this example on jsfiddle
I do want to place the slider "relative" within my website, but if I change the css to
position: relative; the slider does not work properly anymore, as it now displays the fading images above one another like this
Why is this happening and how can I position the slider-div "relative" within my website?
I tried wrapping it with another div-layer but without success.
Try a wrapper div as you say.
You should put your slider inside another div and then position this wrapper div relative.
HTML:
<div id="wrap">//<--Add here tha wrapper div
<div id="banner_area">
<img class="active" src="http://viewallpapers.com/wp-content/uploads/2013/06/Uluru-Australia.jpg" />
<img src="http://www.wallpaperhi.com/thumbnails/detail/20130309/ocean%20beach%20rocks%20australia%201920x1200%20wallpaper_www.wallpaperhi.com_71.jpg" />
<img src="http://www.star.com.au/star-event-centre/PublishingImages/about-sydney-800x500.jpg" />
<img src="http://www.ytravelblog.com/wp-content/uploads/2013/06/Whitsunday-Islands-Queensland-Australia-6.jpg" />
</div>
</div>
CSS:
#wrap{
position:relative;
top:100px;
left:100px;
}
DEMO
UPDATE
To float within the website add a height to the #wrap
#wrap{
position:relative;
top:0px;
left:100px;
height:250px;
}
DEMO2
You don't need a wrapper. You are setting position: relative on the wrong element. Set it on #banner_area, not #banner_area img. DEMO
I have a div with width: 400px and height: 300px
Inside the div I will insert some Text which should be aligned horizontaly and verticaly.
if the text inside the div is bigger than the div, it should show the scrollbars. Here is a picture which shows what i mean:
The following works in webkit & geko & IE8 upwards. Try some of these techniques for vertical centering if you need legacy IE compatibility: http://blog.themeforest.net/tutorials/vertical-centering-with-css/ OR Vertically and Horizontally Center Image inside a Div, if you don't know Image's Size?
<div style="height:300px; overflow-y:auto; border:solid 1px #CCC; width:400px;">
<div style="display:table-cell; vertical-align:middle; height:300px; text-align:center; width:400px;">
test
</div>
</div>
you might want to use on div as a container and then put your text in another div
you might also want to check out jscrollpane
div.container {
overflow: auto;
text-align: center;
}
<div class="container">
<p align="center">
<h2>Heading 1</h1>
<h2>Heading 2</h2>
</p>
</div>
Also try to set a fixed height for your container so you can get the scroll bars
div.container {
max-height: 200px
}
The post by cronoklee works good too u might want to combine the two methods to get exactly what you want