overflow not hidden but opacity changed - javascript

Is it possible to make the overflow not hidden but just change the opacity of the content that is overflowing?
So that the parts of the content that are going outside the parent div has opacity of .5 but the parts that remain in the parent are normal?
This would require JavaScript I am assuming if anyone could get me off in the right direction I would be very appreciative. In my fiddle you can drag the image around.
FIDDLE
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#img_rnd').resizable();
$('#rnd').draggable({
appendTo: 'body',
start: function(event, ui) {
isDraggingMedia = true;
},
stop: function(event, ui) {
isDraggingMedia = false;
}
});
});//]]>
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/cupertino/jquery-ui.css" />
<div id="frame">
<div id="rnd" style="display:inline-block">
<img id="img_rnd" style="border:1px solid red" src="http://blog.stackoverflow.com/audio/stackoverflow-300.png" />
</div>
</div>
<style>
#frame {
height: 500px;
width: 500px;
overflow: hidden;
border: 1px solid black;
}
</style>

Allow me to think outside the box here. Why, in stead of applying an opacity, don't you overlay your picture with something semi transparent... Something like this:
#frame:after {
content: '';
display: block;
position: absolute;
background: transparent;
z-index: 1;
pointer-events: none;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
box-shadow: 0 0 0 5000px rgba(255,255,255,.5);
}
It may be a bit hacky, but it works, and with just css. Have a look at the updated fiddle

Oooh. A cool, but tricky idea.
As far as I know, there's no easy way to do this without javascript.
My recommendation is to include 2 images:
The overflow: hidden; image. This will work exactly as you have in your demo.
The opacity: 0.5 image. This is the image that will show up outside of the parent. In fact, in order to show up outside of the parent, it must be just that: a sibling of the parent.
With this you can have the inner area of the parent show the overflow: hidden;, and the outer area of the parent show the opacity: 0.5.
If you take this approach, I'd recommend keeping all of the event handlers on the slightly opaque one, as that will always be on top, even when the image is entirely outside of the frame!
Here's the fiddle.

you can achieve a similar effect by having an absolute div, with same image, with less opacity and less z-index, and it would move around with your image as you move it, using start stop and drag functions.
see this fiddle for a example, there might be some lag sometimes, but consider this as a proof of concept.
http://jsfiddle.net/gaurav5430/vrUgs/1244/
accurate:
http://jsfiddle.net/gaurav5430/vrUgs/1246/

Related

Preventing IMG from Resizing and Inconsistent Div Height Change?

Currently I have a huge div that would collapse from the height it automatically generated to the height of the title of the div. (i.e. 32px). I have it start out collapsed and then when I click on the div it opens to its full size, displaying all its inner information, and then when I click again, it collapses again. Unfortunately, two things happen:
The div doesn't completely expand to its full height.
The first large img in the div gets resized.
Now I understand why the latter is happening. It has something to do with the height being a percentage instead of a discrete number, for when I change the number to something like 500px, it works just fine. But I don't want to do that. I need it to remain a percentage for when I need to use, yet resize, large pictures.
I also feel this same problem may coincide with the former problem as well, but I'm not sure.
Please help me with this.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>This is the title</title>
</head>
<body>
<div class="example"> <span class="h2">DIV Example</span>
<br />
<img class="big" src="http://www.greenbookblog.org/wp-content/uploads/2012/03/big-data.jpg" />
<p>This is a big picture. It's here to show what this thing is supposed to be doing.
However, this picture has been squished so that it can fit within the div nicely. I am
writing a bit so that I can take up space.</p>
<img class="big" src="http://www.greenbookblog.org/wp-content/uploads/2012/03/big-data.jpg" />
<p>This is a big picture. It's here to show what this thing is supposed to be doing. However, this picture has been squished so that it can fit within the div nicely. I am writing a bit so that I can take up space.</p>
</div>
</body>
</html>
CSS:
div.example, div.example img {
border: 3px solid #402468;
border-radius: 6px;
}
div.example {
color: white;
margin: 0 15px;
background-color: #504689;
overflow: hidden;
}
img {
display: block;
margin: 0 auto;
}
img.big {
width: 85%;
height: 85%;
}
/*further formatting: pay no mind*/
div p {
text-indent: 15pt;
margin: 0 15px;
}
.h2 {
font: 32px"Times New Roman", serif;
color: #678900;
}
aaaand jQuery:
$(document).one("ready", function () {
$("div.example").each(function () {
$(this).data("height0", $(this).height());
$(this).height("32px");
});
});
$(document).ready(function () {
$("div.example").click(function () {
if ($(this).height() !== 32) {
$(this).animate({
height: '32px'
});
} else {
$(this).animate({
height: $(this).data("height0")
});
}
});
});
Here is the fiddle:
https://jsfiddle.net/AirStyle/rb95K/35/
Also this is what I get:
https://jsfiddle.net/AirStyle/rb95K/35/embedded/result/
CAUTION: I may not have made the percentages small enough for the picture used. Please lessen them if necessary.
Just remove the height setting altogether and it will keep aspect ratio
(Demo)
img.big {
width: 85%;
}
Also you should cache your jQuery objects. I've done this in the demo by caching $(this) to var self = $(this) and then referring to self therein. There is a lot of overhead in initializing jQuery objects, so if you're using the same selector more than once, cache it.
Edit:
Because you are setting the height of the div to a fixed height on expansion, if the user resizes the window the images will grow in width as well as height. As the container is a fixed height the contents will grow past the end of the container and get cut off. If you would like to fix that, add a "complete" function to the animation to remove the height setting and make it dynamic again.
(Demo)
self.animate({
height: self.data("height0")
},function() {
self.height('');
});
You can also add height: auto; to maintain the default aspect ratio.
img.big {
width: 85%;
height: auto;
}

Scroll a div when focused on an internal div

I need to make a scrollable div, scroll even if the mouse is upon the content (inside the scrollable div), and not just beside it (Where it is blank). This is what I have so far:
var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight-main.offsetHeight;
main.parentNode.parentNode.onscroll = function() {
main.style.top = Math.min(this.scrollTop,maxTop) + "px";
}
In Chrome is ok
In IE8+ is ok (i know a hack)
In Safari the content shakes a lot when i scroll, can i fix that? (I want fix this)
Working fiddle -> https://jsfiddle.net/8oj0sge4/6/
var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight - main.offsetHeight;
main.parentNode.parentNode.onscroll = function() {
main.style.top = Math.min(this.scrollTop, maxTop) + "px";
}
#wrapper {
width: 100%;
height: 1500px;
border: 1px solid red;
padding-top: 380px;
}
#wrapper .container {
border: 1px solid green;
width: 100%;
height: 500px;
overflow: scroll;
}
#wrapper .container-scroll {
height: 1500px;
width: 100%;
border: 1px solid yellow;
position: relative;
}
#wrapper .main {
width: 200px;
height: 500px;
background: black;
overflow: scroll;
position: absolute;
color: white;
left: 50%;
margin-left: -100px;
margin-top: 10px;
}
<div id="wrapper">
<div class="container">
<div class="container-scroll">
<div id="main-site" class="main">
My goals is to make the div container scroll also when the mouse is hover this div in safari, in Google and IE8 i already know how to make work, but safari is shaking a lot!
</div>
</div>
</div>
</div>
Thank you guys.
I hope this demo helps you out to make the div content scroll when mouse hover and when mouse out of the div.
<html>
</head>
<style>
.mydiv
{height: 50px;width: 100px; overflow-y: scroll; }
</style>
<script>
function loadpage()
{ document.getElementById('marquee1').stop(); }
function marqueenow()
{ document.getElementById('marquee1').start(); }
</script>
</head>
<body onload="loadpage()">
<marquee id="marquee1" class="mydiv" onmouseover="marqueenow()" onmouseout="loadpage()" behavior="scroll" direction="up" scrollamount="10">
This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test
content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content
</marquee>
</body>
</html>
you just add this js file to get a smooth scrolling effect.
https://github.com/nathco/jQuery.scrollSpeed
live deomo
http://code.nath.co/scrollSpeed
Not 100% sure what you are up to but you can get the fixed position with css "fixed". It will stay where you put it. The following css fixes to the bottom of the page.
.fixed {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: auto;
}
There is already an answer on scroll position:
How to get scrollbar position with Javascript?
I don't know important is that content, and by this I mean if it needs to stay selectable.
If not a pretty good solution would be to use #wrapper .main{ pointer-events: none; }, meaning that the content will not get any events from mouse and it would go through it to the next element behind it - in your case the scroll would go dirrectly to #wrapper.
Safari does this because every browser has its own scrolling. If you have a fixed header on a phone it acts bouncy and if you do this on a PC it acts normal. Explorer scrolls smooth and Chrome scrolls right to the place without a smooth transition.
The reason why your #main-site is "jiggling" is because the browser keep "repaint" the position of this element.
One Trick to solve this is called Debounce Function, (you may also google it to see other variations.) The basic idea is to delay the scroll event handler to clear out those untriggered callbacks.
In your case, you may do something like this:
main.parentNode.parentNode.onscroll = function(event) {
debounce(offsetting, 10);
}
function offsetting() {
main.style.top = Math.min(main.parentNode.parentNode.scrollTop,maxTop) + "px";
}
function debounce(method, delay) {
clearTimeout(method._tId);
method._tId= setTimeout(function(){
method();
}, delay);
}
If you keep seeing the jiggling issue, you can simply edit the delay parameter (i.e, change 10 to 50). The downside for that is your #main-site element will be 'cut off the top` for a while, depending on your delay settings.
Since your code works perfectly on Chrome and IE, there might be a bug on scrollHeight or offsetHeight attribute on Safari. I recommend you to use getBoundingClientRect for calculating element position since this method is more reliable and accurate.
var maxTop = main.parentNode.getBoundingClientRect().height - main.getBoundingCLientRect().height;

How to resize a div to clients viewport height?

Ok, so i want to have a series of divs which are the exact width and height of the user's browser window, regardless of the screen size. I can easily make the divs stretch horizontally with "width: 100%;" but i cant work out how to make the height stretch itself. I am guessing that i need to use some bit of javascript to judge the height, and then another piece to resize the seperate divs. Unfortunately I am a complete javascript n00b and after two hours of seemingly fruitless searching and coming up with about 100 "solutions" this was as far as id gotten (Im sure that at some point I have probably been closer to the answer):
var viewportHeight = "height:" + document.documentElement.clientHeight;
getElementById('section-1').setAttribute('style', viewportHeight);
<div class="section" id="section-1"></div>
<div class="section" id="section-2"></div>
<div class="section" id="section-3"></div>
edit:
ah i should be more clear, im attempting to have all three divs take up the entire screen, so you have to scroll down to see each one - almost like seperate slides. The idea is that each one takes up the entire screen so you cant see the next section until you scroll down, rather than having three divs which take up a third of the screen.
If you haven't already tried it, you'll want to look at parent:child inheritance of elements within the DOM by way of using CSS.
What I want to STRESS is that everyone giving you JS hacks to accomplish this is not only providing you with overkill (YOU did ask for a JavaScript solution, so they gave it to you!), but it's also a deviation from standards. HTML is for structure, CSS is for presentation, and JavaScript is for behavioral aspects... setting a div to the width of the viewport on load is a PRESENTATION aspect and should be done in CSS... not JavaScript. If you were trying to change the width based on events or user interaction, then yes JavaScript is your friend... but stick with just HTML and CSS for now.
The trick is that most elements have an undefined height - and height is later defined by the content that the element holds.
If you want to 'trick' an element into having a height other than what it wants to default to, you'll have to explicitly define it. Since you want to inherit your height from the viewport, you'll have to define the height at the top and bring it down...
You might be in luck and can avoid JavaScript altogether (unnecessary). Just use CSS.
Try something like:
html, body {
height: 100%;
width: 100%;
}
Now, when you try to set your div's later on, specify width: 100% and the height gets inherited from the html --> body --> div.
Try that and see if that solves your problem - if not, point us to a website, a pastebin, or a SOMETHING with code in it that we can just show you how to do it (whereas what you posted for code was an attempt in JavaScript which is only 1 part of the code - post the full thing either to a server or temp site like pastebin).
Here is some sample code I wrote (tested in Chromium):
The HTML:
<html>
<head>
<title>Test Divs at 100%</title>
<link rel="stylesheet" type="text/css" href="divtest.css"
</head>
<body>
<div class="test1">aef</div>
<div class="test2">aef</div>
<div class="test3">aef</div>
</body>
</html>
The CSS:
html, body {
width: 100%;
height: 100%;
background-color: #793434;
padding: 0;
margin: 0;
}
div {
height: 100%;
width: 100%;
}
.test1 {
background-color: #E3C42E;
}
.test2 {
background-color: #B42626;
}
.test3 {
background-color: #19D443
}
try this
div#welcome {
height: 100vh;
background: black;
color: white;
}
div#projects {
height: 100vh;
background: yellow;
}
<div id="welcome">
your content on screen 1
</div>
<div id="projects">
your content on screen 2
</div>
it should work for you, but little support in IE
A bit of jQuery should do it:
$(document).ready(function() {
var window_height = $(window).height();
$('#section-1").height(window_height);
});
And if you want to keep 100% height on window resize:
$(document).ready(function() {
function viewport_height() {
var window_height = $(window).height();
$('#section-1").height(window_height);
}
viewport_height();
$(window).resize(function() {
viewport_height();
});
});
try this
window.onload = init;
function init()
{
var viewportHeight = "height:" + document.documentElement.clientHeight+"px;";
document.getElementById('section-1').setAttribute('style', viewportHeight);
}
Here is a script free solution, just CSS. This assumes that the divs are directly in the body element or a parent with position absolute and the parent has no padding.
#section-1 {
position: absolute;
height: 100%;
width: 100%;
background: #ff0000;
}
#section-2 {
position: absolute;
width: 100%;
top: 100%;
height: 100%;
background: #00ff00;
}
#section-3 {
position: absolute;
width: 100%;
top: 200%;
height: 100%;
background: #0000ff;
}
See fiddle: http://jsfiddle.net/QtvU5/1/

Change Background when part of it is hovered

i am totally new in web design, and i am right now struggling with creating part of my website, i need to somehow make this happen:
When PART of the BODY BACKGROUND is HOVERED, make the background change to "B", and when the mouse is not over that part, I need it to change back to background "A".
I have seen some examples here but as i am a beginner, i have no idea how to use javascript, if you could please give me some light here, either on pure CSS or on how to apply javascript.
This is accomplished very easily using a third party javascript library called JQuery http://jquery.com, you can see a working example here: http://jsfiddle.net/bbp8G/
$(document).ready(function(){
$("#hover").mouseenter(function(){
$(this).css("background","#009900");
}).mouseleave(function(){
$(this).css("background","#ffffff");
});
});
Here's the easiest way I know how to do what you've described...
<!-- POSITION THIS DIV WHEREVER YOU WANT THE
USER TO HOVER SO THAT THE BACKGROUND WILL CHANGE -->
<div id="hover">
</div>
<!-- PUT THIS CODE IN YOUR <HEAD> -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" />
<style>
#hover { width: 200px; height: 200px; position: relative; top: 200px; background: green; }
.myNewBackround { background-color: red; }
</style>
<script>
$(document).ready(function() {
// when the #hover DIV is hovered, change the background of the body
$('#hover').hover(function() {
$('body').addClass('myNewBackground');
});
});
</script>
Here's a JS FIDDLE:
http://jsfiddle.net/ZKaJn/
Or you can do it with pure CSS
<div id="left"> </div>
<div id="right"> </div>
And the CSS part:
#left
{
background-color:#000;
float:left;
width:50%;
height:200px;
}
#right
{
background-color:#FF0;
float:right;
width:50%;
height:200px;
}
#right:hover
{
background-color:#00F;
}
#left:hover
{
background-color:#F00;
}
You can replace the div's and values with whatever you like, the main part is the #right:hover and #left:hover
Actually with just css it is not possible to change the background of the body when hovering a DOM element. This is because CSS does not allow you (yet) to travel up the DOM tree (select a parent), only down (select a child).
That being said, it is however possible to mimic the effect, and it is even quiet easy if it is the body background you want to change. You can lay a pseudo element with a background on top of your body background, and underneath the actual content. This way it looks as if the body background has changed.
The css to achieve this would look something like this:
.hover-me:hover:after {
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
background: url(http://placekitten.com/600/300) center center;
background-size: cover;
z-index: -1;
}
And a small fiddle to demonstrate: http://jsfiddle.net/3dwzt/
Should be compatible with IE8 and up

Arrow animation in jquery

Is it possible to make an animation of this picture[1] to this picture[2] in jquery?. I would like to get "a growing arrow effect". I must admit that after some searching i found nothing and simple
$('#img').animate({width: '109px',height: '109px'});
is not enough effect for me. Maybe you guys have some clues or tips to achieve that kind of effect.
[1] http://img543.imageshack.us/i/arrowmb.png/
[2] http://img687.imageshack.us/i/pngqa.png/
UPDATED:
Try the code now, it shows the arrow in a green box contained on a red box and a click in the red box will grow and shrink the arrow compensating movement. Of course the boxes are for display purposes only you can remove the borders from the css.
The arrow was not moving anyway, the effect was because the image you provided has a blank space around the arrow which of course it also grow. You can clip the image to avoid having to compensate movement but anyway, the example illustrates that other properties can be also animated.
You just need to play a bit with the parameters to get the effect you are after.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js">
</script>
<script>
$(document).ready(function() {
$('.arrow_container').click(function() {
$('img.arrow').animate({
width: '+=70', height: '+=70', left: '-=15', top: '-=10'
});
$('img.arrow').animate({
width: '-=70', height: '-=70', left: '+=15', top: '+=10'
});
});
});
</script>
<style>
.arrow_container {
margin-left:30px;
margin-top:30px;
width:100px;
height:100px;
border: 1px solid red;
}
.arrow {
position:absolute;
width:30;
height:30;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="arrow_container">
<img class="arrow"
src="http://img687.imageshack.us/img687/9180/pngqa.png">
</div>
</body>
</html>

Categories