Develop Reference

jquery increase/decrease image contrast on scroll

This site I am developing is using HTML5, CSS3, Bootstrap 4, and Jquery. I would like to have a scroll effect on a full-screen background-image that is at the very top of my page (100vh hero banner type thing). I am trying to gradually increase the contrast (css filter: contrast(some%)) of an image as the user scrolls down (its fine if the image is completely unrecognizable by the time it leaves viewport).
I have some Jquery that somewhat does the effect I am looking for, however I would like the effect to be more gradual.
The main issue I am having is that when the user scrolls back to the top of the page the contrast value gets set to 0% leaving a completely grayed out image. What I would like is for the contrast to gradually decrease back to normal (100%) as the user scrolls back up all the way to the top of the page.
I have set up a very simplified codepen. I couldn't get a css background-image url value to reference an external link from codepen, so I am targeting the effect on a full screen image ().
Thanks!
Link to the Pen: [codepen-link][1]
[1]: http://codepen.io/wdzajicek/pen/MVovZE
See code below in snippet
$(document).ready(function (){
$(window).scroll(function(){
var pixelstop = $(window).scrollTop();
$(".myimage ").css("filter", "contrast(" + pixelstop + "%)");
});
});
.header {
height: 100vh;
}
.myimage {
position:absolute;
top: 0;
left: 0;
min-width: 100%;
width; 100%;
z-index: -1;
}
.jumbotron {
position: relative;
background-color: unset;
margin-top: 150px;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header text-center">
<img src="https://raw.githubusercontent.com/wdzajicek/portfolio/master/assets/img/header-bg.jpg" class="myimage" alt="">
</header>

There is the main problem in $(window).scrollTop(); it will return 0 value
that's why contrast value gets set to 0% leaving a completely grayed out image
var pixelstop = $(window).scrollTop();
replace the code with
var pixelstop = 100+100*$(window).scrollTop()/$(window).height();
don't just copy this code please understand thanks.

$(document).ready(function (){
$(window).scroll(function(){
var pixelstop = 100+100*$(window).scrollTop()/$(window).height();
console.log(pixelstop);
$(".myimage ").css("filter", "contrast(" + pixelstop + "%)");
});
});
.header {
height: 100vh;
}
.myimage {
position:absolute;
top: 0;
left: 0;
min-width: 100%;
width; 100%;
z-index: -1;
}
.jumbotron {
position: relative;
background-color: unset;
margin-top: 150px;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<header class="header text-center">
<img src="https://raw.githubusercontent.com/wdzajicek/portfolio/master/assets/img/header-bg.jpg" class="myimage" alt="">
</header>
100 is default value of filter contrast not 0. that's why the background is grey out because it reaches zero.

Javascript: element size change handler (not css)

There is a div, which has styles:
min-width:100px
min-height:100px
When I add some text to the div(using JavaScript), it changes its size. How to get the new size?
I tried
element.offsetHeight
But it doesn't work as expected. I get size larger then I need in the first time. But after some time, if I get value of this propetry again, I get real size.
Maybe it's because there is some time between setting a text and fitting it into a div? I don't know.
<div class="parent"><div class="popup"></div></div>
<style>
* {
box-sizing:border-box;
}
.parent {
position: absolute;
z-index: 0;
}
.popup {
position: absolute;
min-width: 100px;
min-height: 100px;
padding: 20px;
border-radius: 12px;
background:#000;
color:#fff;
visibility:hidden;
}
.popup:before, .popup::before, .popup:after, .popup::after {
content:"";
width:0px;
height:0px;
display: block;
position: absolute;
}
</style>
<script>
var popup = document.getElementsByClassName('popup')[0];
popup.innerHTML = 'любой текст от 3 до NNN строк';
console.log(popup.offsetHeight);
</script>

You can get the borders of the element, top, bottom, right and left and then subtract them in order to get the width and the height. This accounts for the actual pixels on the page after it has been modified:
var width = [element].getBoundingClientRect().right - [element].getBoundingClientRect().left ;
var height = [element].getBoundingClientRect().bottom - [element].getBoundingClientRect().top ;

Change this in your script. Notice that I added more text in innerHTML.
<script>
var popup = document.getElementsByClassName('popup')[0];
console.log("Before: "+popup.offsetHeight);
popup.innerHTML = 'любой текст от 3 до NNN строк<br><br>moretext';
console.log("After: "+popup.offsetHeight);
</script>
And change in your CSS the min-height to smaller value to see the difference
min-height:10px;
output in console is:
Before: 40
After: 180
Here is an example that works (open console to see the output): https://jsfiddle.net/_jserodio/q78dLz8h/

jquery pan a large image within small div container using buttons

Hi there I need to an interactive element using a large image. This image sized 1000x1000 pixel with simple imagery will contain several questions with yes or no. What I want to do is place this image within a small div (say 500x300) with hidden overflow and add hotspots on the image for the yes/no option. What I want is when the user clicks yes, then the hotspot link pans to specific x/y coordinates of the same large image. Viewer will only see within the 500x300 window. So on and so forth. Is this possible? It seems so simple yet only option I can find is the pan by mouse option or iframe option with complicated divs and anchors. I'm not an expert in java/jquery but would love to find a script that is adaptable. Please help!

This sounded fun so I made a custom solution real quick. Demo here: jsBin
It's heavily reliant on the proper CSS, so check that in the bin, but here's the JS part:
var choice = document.querySelectorAll('.choice'),
image = document.getElementById('image')
for ( var i=0; i<choice.length; i++) {
choice[i].addEventListener('click', function (event) {
var x = this.dataset['x'],
y = this.dataset['y'];
image.style.top = '-'+y+'px';
image.style.left = '-'+x+'px';
})
}

Use css transitions for animation. Set up the positions you want the buttons to move the image around to in the image using a series of javascript objects. Then, set up your anchors, text, etc using absolute positioning on top of the image inside of a div container. Finally, add a click action in jQuery to assign your different positions to the top and left css of that container.
The end result, then, will be that you click an anchor, the left and top positions are assigned to the container via css in jQuery, and the transitions will slide the image around with the anchors.
I set up a fiddle here.
Here's the html from the fiddle:
<div id="window">
<div id="container">
<img src="http://upload.wikimedia.org/wikipedia/en/1/1f/Kill_The_Lights_1000x1000.jpg" id="image">
<ul>
<li><a id="city" href="#">City</a></li>
<li><a id="bottom" href="#">Bottom</a></li>
</ul>
</div>
</div>
And the CSS:
#window {
width:500px;
height:300px;
overflow:hidden;
position:relative;
}
#window a {
position: absolute;
z-index: 2;
display: block;
padding: 10px;
background: rgba(255,255,255,.5);
}
#city {
top: 20px;
left: 20px;
}
#bottom {
top: 220px;
left: 220px;
}
#container {
-webkit-transition:left 2s, top 2s, -webkit-transform 2s;
transition:left 2s, top 2s, transform 2s;
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
}
Here's some javascript to give an example of setting up the positions as objects.
var city = {
top: -200,
left: -200
};
var bottom = {
top: -700,
left: -100
}
$('a').click(function() {
var t = this.id;
var c = $('#container');
if (typeof eval(t) !== 'undefined') {
c.css({
'top': eval(t).top,
'left': eval(t).left
});
}
});

I've just made a Fiddle with a demo image from where you could proceed.
HTML:
<div class="imgHolder">
<div class="hotspot one">Click</div>
<img src="image.jpg" />
</div>
CSS:
.imgHolder {
overflow:hidden;
width:300px;
height:300px;
position:relative;
}
.hotspot.one {
position:absolute;
top:10px;
padding:2px;
background-color:#fff;
left:10px;
}
.hotspot:hover {
cursor:pointer;
}
img {
position:relative;
z-index:-1;
}
jQuery:
$(".hotspot").on("click", function () {
$("img").animate({
"right": "+=100px"
});
});
For reference: http://api.jquery.com/animate/
You could e.g. fade hotspots in and out on specific positions and use animate() to move to the next hotspot.

how to fix the position of div to bottom right of div containing background image

I have html sturcture
<div id="bg" class="layer">
<img id="trackmap" src="images/back_2416.jpg" width="1208" height="768" class=" ui-draggable map-icon" usemap="#main-map" data-zoom-image="images/background_zoom.jpg" data-big="images/background_zoom.jpg" style="position: relative; left: -439px; top: -272.6px; margin: 0px; display: inline-block; height: 1327.2px; width: 2088px;">
<div id="nav-text">LOREM IPSUM.</div>
</div>
Jquery
var windowHeight = $("#trackmap").height();
var windowWidth = $("#trackmap").width();
var text_height=((windowHeight)-(100));
$("#nav-text").css("top",windowHeight);
Css
.layer {
position: absolute;
width: 1208px;
height: 768px;
}
#nav-text{
z-index: 200;
color: white;
position: absolute;
font-size: 10px;
margin-left: 715px;
width: 310px;
height: 10px;
position: fixed;
bottom: 5px;}
I just want to fix the nav-text to the bottom right whatsoever.. Now i problem i am facing is theres zoom function on the trackmap.. which increases the height and width of the image ..so the text comes in between of the image ..intereferring with the image.. I have tried taking the image width height using jquery ..but somehow its not working

I am not sure I am following your issue here, but it sounds like you are trying to get a div to be in the bottom-right of another div no matter what size it is. That can be done by setting the parent div position to relative which you have, and the child div position to absolute. You have that set but then override it by setting the position to fixed lower in the CSS. You will also want to set the bottom to 0 and the right to 0.
This will position the child div to the bottom right of the parent div. Then you can get rid of your jQuery. Hopefully this helps.

Ok.. I am in a hurry to catch the bus.. but here's a fiddle that illustrates the idea..
basically you will need to use the scrolltop and left parameters to do so:
$(".container").on("scroll", function() {
$(".nav-text").css("top", $(this).prop("scrollTop") + 130);
$(".nav-text").css("left", $(this).prop("scrollLeft") + 120);
});
but move the scrolls first.. sorry I need to go now..

You can achieve this by not fixing the .layer width and height, using display:inline-block; to prevent the div from filling the whole container width. At that point, the .layer size will match the image size whatever it is.
Finally you just need to set the text to absolute position and bottom and right properties too.
.parent{
display:inline-block;
position:relative;
}
.children{
position:absolute;
bottom:0;
right:0;
}
Here is the fiddle explaining
And here is the proof it works even if the image size is changed(click on the image).
Fiddle 2

css/javascript: number above border

how to display a small number (left top border) above a border around an element?
basically I am looking for a way to highlight elements and identify them with a number.
UPDATE:
Basically the elements highlight on mouseover by having border property defined. on mouseout, border is transparent (disappears).
what I'd like to do is how to display a number outside of the border highlight selected?
Solution I just thought about is using a custom generated numbered image border and just use border-image dynamically

Assuming you want to insert this number dynamically for any element without having to worry about relatives and absolutes here is a solution.
Code:
<div id="box"></div>
#box{
background:red;
height:140px;
width:250px;
margin:30px;
}
.number{
background:#ccc;
display:block;
font-weight:bold;
border:1px solid #000;
font-size:10px;
}
// Create an span element that will have the number
var number = $("<span />").text("5").addClass("number");
// Set the number width and height
var numberWidth = 10;
var numberHeight = 10;
// Get the target element
var element = $("#box");
// Get width, height and position
var elementWidth = element.width();
// These two are only necesary if you want to position
// the number in a different corner (e.g bottom, right)
var elementHeight = element.height();
var elementPosition = element.offset();
// Apply css to the number element
// Position is based on the target element position
number.css({
position: "absolute",
left: elementPosition.left - numberWidth,
top: elementPosition.top - numberHeight,
width: numberWidth,
height: numberHeight
});
// Insert the number to the body
number.appendTo("body");

If the identification numbers are constant and you don't want to include them in the markup as content, you can include them as attribute values and use :before pseudo-elements:
CSS:
p { position : relative }
p:hover:before {
content : attr(title);
position : absolute;
left : 0;
top : -1em
}
HTML:
<p title="1">blah blah</p>
<p title="2">blah blah</p>
<p title="3">blah blah</p>
If the identification numbers can be generated each time the page is rendered, you can use an automatic counter instead:
CSS:
p {
position : relative;
counter-increment : idnum
}
p:hover:before {
content : counter(idnum);
position : absolute;
left : 0;
top : -1em
}
See here for more information: http://www.w3.org/TR/CSS2/generate.html

What do you mean by "highlight"? Mouseover? You can provision for such visual effects by first wrapping your element with another div which will hold your number. And example:
<style>
.container:hover .label {
visibility: visible;
}
.label {
visibility: hidden;
}
.content {
margin: 1px;
border: none;
}
.content:hover {
margin: 0px;
border: 1px solid black;
}
</style>
<div class="container">
<div class="label">
123
</div>
<div class="content">
My Element
</div>
</div>
Edited to only display border on mouse over.