Develop Reference

How to create a round area to to fix image as Facebook avatar

I'm creating an input, where users can upload file images to change avatars as Facebook does. But I know Facebook creates a cycle area and users can fix the image to fit with that circle (image below). I have no idea how to do it. Tell me if you know

Possibly the easiest way to achieve such an effect is to overlay a rounded rectangle with a transparent black outline over the image. However, you will also need to wrap the element in another container with overflow set to hidden to limit the backdrop to the image.
Here is a quick demo:
.wrapper {
position: relative;
overflow: hidden;
width: 500px;
height: 300px;
}
.circle {
position: absolute;
border-radius: 100%;
outline: rgba(0, 0, 0, 0.5) 100vmax solid;
height: 200px;
width: 200px;
top: 50px;
left: 150px;
}
<div class="wrapper">
<div class="circle"></div>
<img class="image" src="https://picsum.photos/500/300">
</div>

Move large image inside smaller visible container

I am trying to do something basic (beginner in programming).
I try to take a large image and a smaller container, and move the image up or down inside while the user scrolls.
So you can .
Move the yellow up or down while the user can see the red in the same position (kept in doc flow).
If i create an image using this :
<div class="cvrContainer top left">
<div class="cvrPhoto" id="photo0" style="background-image: url(https://picsum.photos/900/850);"></div>
</div>
Should i set cvrPhoto to be larger then cvrContainer say 200% ?
How do i move it up/down with JS while keeping overflow hidden.
I do not ask how to calculate, only how to set it and move the only yellow inside

If you want to create simple parallax effect, you can achieve this effect by position fixed, add position: fixed on .cvrPhoto div.
.cvrContainer {
padding: 30px;
width: 100%;
height: 2000px;
overflow: auto;
background: url(https://picsum.photos/900/850);
}
.cvrPhoto {
height: 300px;
width: 200px;
position: fixed;
top: 57px;
background: yellow;
}
<div class="cvrContainer style=" background-image: url(https://picsum.photos/900/850); "">
<div class="cvrPhoto"></div>
</div>

I solved it by using css for the inner image (not background image but img tag) :
.prlxPhoto
{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
}
and move it left/right for example with :
var e = document.getElementById("1");
e.style.marginLeft = equotion+'px';

DIV-Elemt absolute(!) positioning

First for all: No, I'm not looking for the property position: absolute;
What I want to is to create a field that displays some text. I want to display that field exactly in the middle of the page and then fade out the background, doesnt matter, where the div is placed in the code.
At the moment it looks like that:
https://www.dropbox.com/s/wiljdh1xjj3we1c/Capture1.PNG
https://www.dropbox.com/s/chw7pdes5fdcj3u/Capture2.PNG
How can I place an Elemtn ABSOLUTE in the middle of the page, doesnt matter where it is written in the code?
Now I could just say well, I will place it on top of the content. But the problem is, in this field is displayed some information that generates in the content, so I have to put it in the code after the content.
I hope, someone can help me :)
PS: If you have another solution to solve something like this... feel welcome to tell me! I just want something like an alert();-Box with my own style.
EDIT: Some effort: (basically already shown with the screenshots, but here some code; just didnt want to make it confusing)
I save the text as following:
// Save Help-Text
ob_start();
?>
This is the main page. There is no help available!
<?php
$help = ob_get_clean();
I display the text as following: (echo create_help($help); creates the help-tag and displays it)
function create_help($content){
$help = "
<div id=\"help-bg\" class=\"closehelp\" ></div>
<div id=\"help\" >
<img src=\"../images/close.png\" class=\"closehelp\" />
$content
</div>
";
return $help;
}
This is the CSS for the box:
/* Help-box style */
#help
display: none;
position: absolute;
margin-left: auto;
margin-right: auto;
background-color: #B8DBFF;
border: 5px solid rgb(58, 100, 250);
border-top: 30px solid rgb(58, 100, 250);
border-radius: 5px;
padding: 20px;
width: 600px;
z-index: 1001;
#help img
position: absolute;
margin-left: 595px;
margin-top: -47px;
height: 25px;
width: 25px;
/* Makes background of Help-box transparent black */
#help-bg
background-color: black;
z-index: 1000;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
opacity:0.6;
display: none;

First of all I would recommend using position:fixed; instead of position:absolute; because the alert would scroll within the page. If you have a fixed height and width try something like
margin: -150px 0 0 -150px;
left: 50%;
top: 50%;. This CSS-Code will center your div horizontally and vertically (Demo -> http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html). But if you are using an dynamic height maybe you should consider using jQuery or give it a fixed top position.

try this:
html, body{
position: relative;
}
.yourAbsoluteClass{
position: absolute;
width: 50%;
top: 25%;
left: 50%;
}

Difficulties causing html div to slide horizontally

I'm having trouble animating this item using PHP and CSS and Javascript (with jQuery).
I want a div that slides out from the left side of the screen when its tab bar is hovered over.
I have three divs: the container, the contents, and the tab.
Here's the Javascript and HTML:
<div id="LeftSidebar">
<div id="LeftSidebarTab" class="">
Left sidebar tab
</div>
<div id="LeftSidebarContents" class="">
Left sidebar contents
</div>
<script type="text/javascript">
$("#LeftSidebar").mouseenter(function()
{
$("#LeftSidebar").animate(
{
left: 0px
});
});
$("#LeftSidebar").mouseleave(function()
{
$("#LeftSidebar").animate(
{
left: -100px
});
});
</script>
</div>
Here's the CSS:
#LeftSidebar
{
position: absolute;
display: block;
z-index: 12;
top: 220px;
left: 0px;
background-color: green;
height: 500px;
}
#LeftSidebarTab
{
float: right;
background-color: red;
width: 20px;
height: 100%;
}
#LeftSidebarContents
{
background-color: blue;
width: 100px;
height: 100%;
}
I'm new to Javascript, HTML, and et al.
The code isn't doing what I expect it to do.
I expect it to, when hovered over, gradually move the 'left' CSS property to 0px, and when the mouse moves off of the contents, move the 'left' CSS property to -100px.
When I hover over it, I see no visible change to the div. I can't even tell if the 'mouseenter()' or 'mouseleave()' functions are even being triggered.
Questions:
1) How can I check if the function is being triggered or not? Can I output some text or something, using Javascript? Maybe pop up a dialog box for debugging?
2) Will mouseenter/mouseleave be triggered for 'LeftSidebar', even though LeftSidebarContents and LeftSidebarTab completely cover every pixel of LeftSidebar?
3) Am I making any obvious mistakes in the above code that's causing it not to work as I expect?

You probably want to put some single quotes around the 0px.
Check this: http://api.jquery.com/animate/
Copy their example and get theirs working them modify it to your needs.
As for alerts to check if the event is being triggered:
alert("Thanks for visiting!");

Use ff with firebug or chrome to debug your script. Put a pointer on the functions, this will cause the browser to pauze execution of your script so you can step over it and see what happens.

A quick and dirty test to figure out if an event is being triggered is to use the alert function. For example:
$("#LeftSidebar").mouseenter(function()
{
alert("Mouse Enters Region");
});
Also this is how I would do your css file:
#LeftSidebar
{
position: fixed;
display: block;
z-index: 12;
top: 220px;
left: -100px;
background-color: green;
width:120px;
height: 500px;
}
#LeftSidebarTab
{
position:absolute;
background-color: red;
width: 20px;
height: 500px;
left:100px;
top:0px;
}
#LeftSidebarContents
{
background-color: blue;
position:absolute;
left:0px;
top:0px;
}
I would recommend learning more about the CSS Box Model and probably just reading up on HTML/CSS in general.

Jquery overlay when image clicked

Not the best with jquery, can someone suggest a general approach for what i am trying to achieve please? I have a grid of photos, and when they are clicked on, an opaque overlay will be animated on top of the entire picture, the overlay will contain some dynamically set text. I have the images, and the onclick handler working, just trying to figure out the best way to apply the overlay. thanks

Not very pretty semantically, but should get the job done :
Let's say your imgs are 200x200.
<div class='imgcontain'>
<img src='yourimg' alt='' width='200' height='200'>
<p>Your text>/p>
</div>
<div class='imgcontain'>
<img src='yourimg' alt='' width='200' height='200'>
<p>Your text>/p>
</div>
<div class='imgcontain'>
<img src='yourimg' alt='' width='200' height='200'>
<p>Your text>/p>
</div>
// etc...
Then, the CSS :
.imgcontain
{
position: relative;
width: 200px;
height: 200px;
overflow: hidden; // not sure you want to makes the overlay just show or slide from top. This is useful only if it should slide.
}
.imgcontain img
{
position: absolute;
width: 200px;
height: 200px;
top: 0px;
left: 0px;
z-index: 2;
}
.imgcontain p
{
position: absolute;
display: block;
width: 200px;
height: 200px;
top: 0px; // if slide from top, -200px
left: 0px;
background: rgba(0,0,0,0.5) // or a background image like a transparent png with repeat
z-index: 1;
}
.imgcontain:hover p
{
z-index: 3; // if slide from top, top: 0px
}
This is a pure CSS solution, without animation, works for users with Javascript of.
If you want then to animate it using Jquery :
$(.imgcontain p).hide().css('z-index','3'); // on ready, hide the overlay. Maybe throw the .css() in callback.
then, on click/mouseover
$(.imgcontain).click(function()
{
$(.imgcontain p).show();
});

Check this website may be that help you.
http://flowplayer.org/tools/overlay/index.html