What I'm trying to achieve is to have an image fade upon mouseover so that text is visible - the image is (eg) a cd cover, and when the mouse-pointer is placed over the image, it should fade to show the track listing of the album. Each track listing is a hyperlink to the track on youtube.
I've zero experience of jquery, so am hoping to do this with javascript.
I'd be very appreciative of any help, as I've spent about two days now trying to google an answer.
If under "fade" you mean animation, try this:
function SetObjectOpacity(obj, op, op100)
{
obj.style.opacity = op.toString();
obj.style["-moz-opacity"] = op.toString();
obj.style["filter"] = "alpha(opacity=" + op100 + ")";
}
function FadeImage(imageid)
{
var framedelay = 50;
var frame = 0, img = document.getElementById(imageid), animint;
animint = setInterval(function() {
frame++;
SetObjectOpacity(img, frame / 20, frame * 5);
if (frame == 20) {
img.style.visibility = 'hidden';
clearInterval(animint);
}
}, framedelay);
}
And in HTML code:
<div style="width: 200px; height: 200px; position: relative;">
<div style="position: absolute; top: 0; left: 0; width: 200px; height: 200px;">
text you want to show
</div>
<img src="yourimage.jpg" id="yourimage" onMouseOver="FadeImage('yourimage');" style="position: absolute; top: 0; left: 0;">
</div>
Fading back on mouse out is obvious.
I really do recommend you use jQuery—it makes everything so much easier. And it's not really difficult. After all, we have the code ready for you (and I would be glad to explain it further), so all you need to do is include it.
So, assuming you go with jQuery, try this:
$(".overlay").hover(function(){
$(this).stop().fadeTo(300,0.8);
},function(){
$(this).stop().fadeTo(300,0);
});
And here's your HTML/CSS:
<div class="container">
<img src="http://placehold.it/200/200" />
<div class="overlay">
Hi<br>
Hi<br>
Hi<br>
</div>
</div>
.overlay {
position:absolute;
margin-top:-205px;
width:200px;
height:200px;
background-color:black;
opacity:0;
}
Related
I was referring to the following link to blur background on mouse scroll.
http://codepen.io/sotayamashita/pen/pqLcv
The code is shown as below:
HTML:
<div id="blurred-image-container">
<div class="img-src" style="background-image:url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/60/darken/25/0*I7mXgSon9oco-rim.jpeg')"></div>
<div class="img-src blurred-img" style="background-image:url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/40/darken/50/blur/50/0*I7mXgSon9oco-rim.jpeg')"></div>
</div>
<div class="article">
<h1>Medium</h1>
</div>
CSS:
.img-src {
position: fixed;
background-position: center;
-webkit-background-size: cover;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
.blurred-img { opacity: 0; }
.article {
width:500px;
height: 2000px;
}
h1 {
color: #fff;
position: fixed;
z-index: 9999;
font-size: 50px;
top: 50%;
margin-top: -25px;
left: 50%;
margin-left: -103px;
}
jQuery
$(window).scroll(function() {
// Get scroll position
var s = $(window).scrollTop(),
// scroll value and opacity
opacityVal = (s / 150.0);
// opacity value 0% to 100%
$('.blurred-img').css('opacity', opacityVal);
});
Then, the background picture that needs to be blurred is not at the very top of the page. My webpage is quite long and the background needs to be blurred is at the very bottom of the page.
I think the following code is trying to set the point where bluring starts to occur at the top of the page. I think there are more than 2000px to scroll down before reaching to the section I want to blur the background.
var s = $(window).scrollTop(), opacityVal = (s / 150.0);
Lets say my html document looks like this:
<div id="firstdiv">
<p>long text goes here....</p>
</div>
<div id="seconddiv">
<p>long text goes here....</p>
</div>
<div id="thirddiv">
<p>long text goes here....</p>
</div>
<div id="blurred-image-container">
<div class="img-src" style="background-image:url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/60/darken/25/0*I7mXgSon9oco-rim.jpeg')"></div>
<div class="img-src blurred-img" style="background-image:url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/40/darken/50/blur/50/0*I7mXgSon9oco-rim.jpeg')"></div>
</div>
<div class="article">
<h1>Medium</h1>
</div>
I want the background page to blur when the page is scroll down to #blurred-image-container section.
How can I modify the jQuery to work that?
<div class="out">
</div>
<div class="in">
</div>
out {
width: 100%;
height: 800px;
background: url('background') no-repeat;
}
.in {
width: 100%;
height: 200px;
background-color:olive;
}
$(window).on('scroll', function () {
var pixs = $(document).scrollTop()
pixs = pixs / 100;
var scroll;
$(window).scroll(function (event) {
scroll = $(window).scrollTop();
console.log(scroll);
*if(scroll>606)
{
$(".out").css({"-webkit-filter": "blur("+pixs+"px)","filter": "blur("+pixs+"px)" })
}*
});
});
This solution will require a separate element for the background but uses SVG filter to allow emulating motion blur in vertical direction.
It calculates the difference between last and current scroll position and uses that for a blur value. It debounces as well via using requestAnimationFrame(). It's easy to adopt to support a separate value for horizontal blurring as well.
You may want to tweak scale and max values for the blur, below some initial values only.
var blur = document.getElementById("fltBlur");
var prevY = 0;
var reqId;
window.onscroll = function() {
cancelAnimationFrame(reqId);
reqId = requestAnimationFrame(motionBlur)
};
function motionBlur() {
var y = window.scrollY;
var n = Math.min(32, Math.abs(y - prevY));
blur.setAttribute("stdDeviation" ,"0 " + n);
prevY = y;
}
html, body {width:100%; height:300%}
#cont {
width:100%;
height:300%;
background:url(//i.imgur.com/47zcWet.jpg);
-webkit-filter: url(#svgBlur);
filter: url("#svgBlur");
}
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
<filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
<feGaussianBlur id="fltBlur" in="SourceGraphic" stdDeviation="0 0" />
</filter>
</svg>
<div id=cont></div>
I would like to develop a scrolling function (on images) like on this site bethellery.com. At the moment, my code is kind of working, but I have a major problem: the size of the scrolling bar is nearly as big as my div size, so I can't scroll that much.
Here is the html:
<div id="container">
<div class="img-inner" id="img-1" style="display: block" >
<img class="img" src="src-1" alt="alt-1" />
</div>
<div class="img-inner" id="img-2" style="display: none" >
<img class="img" src="src-2" alt="alt-2" />
</div>
<div class="img-inner" id="img-3" style="display: none" >
<img class="img" src="src-3" alt="alt-3" />
</div>
<div class="img-inner" id="img-4" style="display: none" >
<img class="img" src="src-4" alt="alt-4" />
</div>
</div>
Here is the css:
html, body {
margin: 0px;
padding: 0px;
height: 100%;
}
#container {
height: 100%;
width: 50%;
overflow-y: auto;
}
.img-inner{
height: 100%;
width: 100%;
}
.img {
height: 100%;
width: 100%;
}
Here is the js:
var lastScrollTop = 0;
var x = 1;
$('#container').scroll(function(event){
var st = $(this).scrollTop();
if(st > lastScrollTop){
//downscroll code
document.getElementById('img-'+x).style.display = "none";
//if next image isn't the last image
if((x+1) !== 4){
x=x+1;
}
document.getElementById('img-'+x).style.display = "block";
}
else{
document.getElementById('img-'+x).style.display = "none";
if((x-1) !== 0){
x=x-1;
}
document.getElementById('img-'+x).style.display = "block";
}
lastScrollTop = st;
});
I don't really know what is happening but I think due to the fact the display styles of the div are none, the scroll doesn't detect the flow under the first image.
On the site above, scroll bar size is clearly adapting itself to the numbers of images the div contains.
Thank you very much and have a great day.
The problem here is that display: none; turns off the display of an element, so it has no effect on layout (MDN's words), meaning any calculations that involve it simply won't.
This is demonstrated by the following JSFiddle (your code) - now two images are set to display: block; and the scroll bar shows this.
Try using visibility: hidden; instead, as demonstrated here. Visibility leaves an elements space occupied while not showing it. It's effect is like opacity.
I need the contents of an iframe which has height of 100px(displays only part of iframe) to expand like an animation on read more button click,and fill up the entire screen(expands in all directions), and on clicking close button positioned on top of it, it needs to animate and shrink to it original size.
I found a fiddle that dooes something similar
http://jsfiddle.net/FP2DZ/.
But my issue is that my div cannot be absolutely positioned as I have contents underneath that and that gets affected if I make this one absolutely positioned.
Absolutely positioning rest of the contents also does not seem to me like a good solution
Code
<html>
<head>
<script type="text/javascript">
var isFullscreen = false;
function fullscreen(){
//var d = document.getElementById('controls').style;
var d = {};
var speed = 900;
if(!isFullscreen){ // MAXIMIZATION
/*comment to have smooth transition from centre but loose covering the header*/
//document.getElementById('controls').style.position= "absolute";
d.width = "100%";
d.height="100%";
//d.left="0%";
d.top="0px";
//d.margin="0 0 0 0";
$("#header").animate({
height: 0
}, speed);
$("#controls2").animate(d,speed);
isFullscreen = true;
}else{ // MINIMIZATION
d.width="300px";
d.height="100px";
d.margin="0 auto";
d.position="relative";
//d.top="+=30px";
/* comment to have smooth minimze transition but not be placed below header */
// document.getElementById('controls').style.position= "relative";
$("#header").animate({
height: 30
}, speed);
$("#controls2").animate(d,speed);
isFullscreen = false;
}
}
</script>
<style>
* { margin: 0 }
#controls {
width:100%;
height:100%;
margin: 0 auto;
display:block;
position:absolute;
left: 50%;
z-index:5;
}
#controls2 {
overflow:visible;
width: 300px;
height: 100px;
position: relative;
left: -50%;
background-color: green;
z-index:10;
}
</style>
</head>
<body>
<h1 id="header" align=center> Header (To be covered on Fullscreen) </h1>
<div id='controls' style="" align="center">
<div id='controls2'>
<input type='button' value='fullscreen' onclick='fullscreen();' /><br>
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
</body>
Probably the easiest way is to utilize the .animate({}) method in Jquery.
Check out this fiddle: http://jsfiddle.net/cm6v7bca/2/
$("#clickhere").on("click", function () {
$("#myframe").animate({
width: "200px",
height: "200px"
}, 1000);
});
.animate({}) allows you to change the css properties and then smoothly animates the changes onto the element. There are several different parameters you can pass. In the fiddle you'll see that I passed "1000" - that's the duration for the animation to complete in ms.
You can read more about the parameters and the method here: https://api.jquery.com/animate/
That really helps. But then the iframe needs to cover rest of the contents in the page and overlay them, Thats seems possible only if iframe is absolutely positioned. But there is so much dynamic content in the page, I do not want to absolute position the iframe.
http://jsfiddle.net/CvhkM/2833/
this is like what I want just that am not able to absolute position.
JS:
$(this).stop().animate({
left: parseInt(this.style.left)-100,
top: parseInt(this.style.top)-100,
width: parseInt(this.style.width)+200,
height: parseInt(this.style.height)+200
}, 300);
I 'm trying to do kind of slideshow on the background using two img tags. I have a couple of random images, so I have a javascript function to get a random name. But the main problem is: when I zoom or resize window first two slides crop well and display without any problem, but after that every slide is changing if I try to resize the window or zoom in-out.
Here you can see that bug: cullycross.github.io(nevermind about big images, im gonna resize them)
Here is my code:
function randomBackground () {
var active = $('#background .active');
var next = ($('#background .active').next().length > 0) ? $('#background .active').next() : $('#background img:first');
next.attr('src', getRandomName());
var imgHeight = next.height();
var windowHeight = $(window).height();
var diff = imgHeight - windowHeight;
if(diff > 0) {
next.css('top', -diff*0.6);
}
next.css('z-index', 2);
active.fadeOut(1500, function() {
active.css('z-index', 1).show().removeClass('active');
next.css('z-index', 3).addClass('active');
})
}
window.onload = function() {
$('#background .active').attr('src', getRandomName());
$('#background').fadeIn(1500);
setInterval(randomBackground, 5000)
}
Here is css:
#background {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
overflow: hidden;
}
#background img {
position: absolute;
z-index: 1;
float: left;
bottom: 0px;
left: 0px;
top: 0px;
height: auto;
width: 100%;
}
#background img.active {
z-index: 3;
}
Here is part of html:
<div id="background">
<img id="current-image" class="active" />
<img id="next-image" />
</div>
It seem to affect only the images loaded after first run.
Try adding images directly into html, using a
<ul><li><img ...></li></ul>
structure, and get the image from there.
You should decrease the fadeout delay. The problem is caused from the browser since the delay is big it can't handle both fadeout and zoom in/out
active.fadeOut(300, function() {
active.css('z-index', 1).show().removeClass('active');
next.css('z-index', 3).addClass('active');
})
And try to use light size pictures, with the same aspect ratio
I didn't found an answer, but I found a library, that makes possible that thing, that I want. Thx to https://github.com/srobbin/jquery-backstretch
I have simple html document that contains divs which hold a series of images:
<div id="container">
<div id="imagelist">
<a href="images/1.jpg"><img src="images/1b.jpg"/>
<a href="images/2.jpg"><img src="images/2b.jpg"/>
<a href="images/3.jpg"><img src="images/3b.jpg"/>
<a href="images/4.jpg"><img src="images/4b.jpg"/>
<a href="images/5.jpg"><img src="images/5b.jpg"/>
<a href="images/6.jpg"><img src="images/6b.jpg"/>
</div>
</div>
I would like to be able to scroll horizontall through the images when hovering over the left or right edge of the div (I have multiple #imagelists all stacked vertically)
I'm trying to use the .scrollWidth() function as such (this is in my script.js file):
var imglist = $('#imagelist');
$(imglist).mousemove(function(e) {
var percent = e.clientX / $(imglist).width();
$(imglist).scrollWidth($(imglist).width() * percent);
});
This doesn't work at all, of course! I've been trying to model this after some good examples I've seen, such as This. What should I alter to make my #imagelist scrollable?
Here's a way to do it using offset and relative positioning.
demo
The HTML looks similar to yours, with the exception that we create elements for the edges. The benifit is that we can style them with CSS, should you ever decide you want :hover styles (example in the demo).
<div class="imagecontainer">
<div class="imagelist">
<img src="http://placehold.it/400x300">
...
<img src="http://placehold.it/400x300">
</div>
<div class="edge right"></div>
<div class="edge left"></div>
</div>
The entire CSS is in the demo, this is just the essentials.
.imagecontainer {
width: 100%;
height: 400px;
overflow-x: hidden;
position: relative;
}
.imagelist {
/* Width allows up to 100 screenfuls, feel free to add a 0
Limiting can be done in the JavaScript */
width: 10000%;
height: 400px;
position: relative;
/* Give it a default left of negative to allow scrolling in either direction */
left: -500px; top: 0;
clear: right;
}
.imagelist img {
float: left;
}
.edge {
position: absolute; top: 0;
width: 50px; height: 100%;
}
.edge.left { left: 0; }
.edge.right { right: 0; }
The JavaScript is the fun part. We find the edges and watch for hover and leave events. Considering only one may be hovered at once (both practically and due to mouseenter), we simply have one timer pointer. This timer controls our animation, and is used to stop the animation (clearInterval) on mouseleave. 20 times per second we move the .imagelist 5 pixels in one direction. That's determined based on which edge we're hovering over.
Instead of using $('.imagelist') we use .parent().find('.imagelist') so that there may be any number of image lists on the page.
var timer = 0;
$('.edge').mouseenter(function(){
var $self = $(this);
var $imglist = $self.parent().find('.imagelist');
timer = setInterval(function(){
var amount, changed;
if ($self.hasClass("left"))
amount = -5;
else
amount = 5;
changed = $imglist.offset().left + amount;
$imglist.offset({left: changed});
}, 50)
}).mouseleave(function(){
clearInterval(timer);
});
It's a little rough, but you can polish it up to suit your needs.