Develop Reference

how to position multiple div`s with a variable as selector

i am trying to get a bigger picture when hovering over another picture on an input field with multiple pictures.
I tried the bellow code.
But the positioning of the bigger picture does not work when i use a variable to get the mouse position.
My problem is this part of the code:
var tooltipSpan = document.getElementById('\"' + popid + '\"');..........
tooltipSpan.style.top = (y - 320) + "px";
tooltipSpan.style.left = (x - 310) + "px";
when i alert this variable"('\"' + popid + '\"')", everything looks good,
when i put in the same as alerted manualy to the last function, everything works fine.
What do i am wrong? Please can someone give me a tip or improve the code.
This is the HTML, i cant change this, it is generated.
<div id= "yyy" class = ..........
<input class =.......
<label for="something" class='ClassExample1'>
something
</label>
<label for="something" class='ClassExample2'>
something
</label>
This is addeded by me, the id of the divs are the class names of the inputs ,
i get the class name of the input fields and make a variable from that
and try to set them for positioning the bigger pictures.
<div id='ClassExample1' class='Class a'>
<p><img src="some source"/></p>
</div>
<div id='ClassExample2' class='Class a'>
<p><img src="some source"/></p>
</div>
.
.
.
.
.
This is the code that i made:
document.getElementById( 'id yyy' ).getElementsByClassName( 'ClassExample1' )[0].onmouseover = function() {mouseOn1()};
document.getElementById( 'id yyy' ).getElementsByClassName( 'ClassExample1' )[0].onmouseout = function() {mouseOut1()};
function mouseOn1() {document.getElementById('ClassExample1').style.display = 'block';};
function mouseOut1() {document.getElementById('ClassExample1').style.display = 'none';};
document.getElementById( 'id yyy' ).getElementsByClassName( 'ClassExample2' )[0].onmouseover = function() {mouseOn2()};
document.getElementById( 'id yyy' ).getElementsByClassName( 'ClassExample2' )[0].onmouseout = function() {mouseOut2()};
function mouseOn2() {document.getElementById('ClassExample2').style.display = 'block';};
function mouseOut2() {document.getElementById('ClassExample2').style.display = 'none';};
.
.
.
.
.
/*Position of mouse hover picture*/
var poper;
window.onmouseover=function(e) {
poper = (e.target.className);
};
var popid = "\'" + poper + "'\";
var tooltipSpan = document.getElementById(popid);
window.onmousemove = function (e) {
var x = e.clientX,
y = e.clientY;
tooltipSpan.style.top = (y - 320) + "px";
tooltipSpan.style.left = (x - 310) + "px";
};

The popid and tooltipspan are not reassigned on mouse move as it is not inside the mousemove function. You could move them inside the function.
var poper;
var popid;
var tooltipspan;
window.onmouseover = function(e) {
poper = (e.target.className);
popid = "\'" + poper + "'\";
tooltipSpan = document.getElementById(popid);
};

How to display moving text field during other jQuery animation?

I am attempting to replicate the loading page at http://www.alessioatzeni.com/ but the percentage loaded text on my page will not display until the loading line animation completes. You can see my project page at https://jaredblumer.github.io/atzeniStudy/
If you inspect the HTML using Chrome Developer Tools, you'll see that the #loader-percentage span text is dynamically updating, but for a reason unbeknownst to me the text is not displaying until after the line animation ends.
The code I am currently using for this is as follows:
HTML
<div id="loader" class="loader">
<span id="loader-line" class="loader-line">
<span id="loader-percentage" class="loader-percentage"></span>
</span>
</div>
Javascript (loader.js)
$(document).ready(function() {
//Loading Page
var pageLoader = function() {
var $elements = $('body').find('img[src]');
$('body [style]').each(function(){
var src = $(this).css('background-image').replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
if(src) {
$elements = $elements.add($('<img src="' + src + '"/>'));
}
});
var $loading = $('#loader');
var $loadPercentageLine = $('#loader-line');
var $loadPercentageText = $('#loader-percentage');
var elementsLoaded = 0;
var speed = 5000;
var animatePercentage = function(e) {
console.log(e);
$loadPercentageText.text(parseInt(e));
};
var loading = function() {
var percentage = 0;
if ($elements.length) {
percentage = parseInt((elementsLoaded / $elements.length) * 100);
}
$loadPercentageLine.stop().animate({
height:percentage + '%'
}, speed);
$loadPercentageText.stop().animate({
percentage:percentage
}, {
duration: speed,
step: animatePercentage
});
};
if($elements.length) {
loading();
$elements.each(function() {
elementsLoaded++;
loading();
});
}
};
pageLoader();
});

here is solution:
.loader-line{
overflow: visible !important;
}

Merge Javascript function to maintain postback with a fixed header

My goal is to have a GridView inside a div have the fixed header work as well as maintain scroll position after postback. I have two functions that work separately, but as I know little about Javascript syntax, I am having trouble merging the functions. Can someone help me out? Thanks!
Relevant code:
<script language="javascript" type="text/javascript"> //FUNCTION 1 Static Header
function MakeStaticHeader(gridId, height, width, headerHeight, isFooter) {
var tbl = document.getElementById(gridId);
if (tbl) {
var DivHR = document.getElementById('DivHeaderRow');
var DivMC = document.getElementById('DivMainContent');
var DivFR = document.getElementById('DivFooterRow');
//*** Set divheaderRow Properties ****
DivHR.style.height = headerHeight + 'px';
DivHR.style.width = (parseInt(width) - 0) + 'px';
DivHR.style.position = 'relative';
DivHR.style.top = '0px';
DivHR.style.zIndex = '10';
DivHR.style.verticalAlign = 'top';
DivHR.style.alignContent = 'center';
//*** Set divMainContent Properties ****
DivMC.style.width = width + 'px';
DivMC.style.height = height + 'px';
DivMC.style.position = 'relative';
DivMC.style.top = -headerHeight + 'px';
DivMC.style.zIndex = '1';
//****Copy Header in divHeaderRow****
DivHR.appendChild(tbl.cloneNode(true));
}
}
function OnScrollDiv(Scrollablediv) {
document.getElementById('DivHeaderRow').scrollLeft = Scrollablediv.scrollLeft;
}
</script>
<script type="text/javascript"> // FUNCTION 2 Maintain Scroll
window.onload = function () {
var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
document.getElementById("<%=DivMainContent.ClientID%>").scrollTop = h.value;
}
function SetDivPosition() {
var intY = document.getElementById("<%=DivMainContent.ClientID%>").scrollTop;
var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
h.value = intY;
}
function afterpostback() {
var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
document.getElementById("<%=DivMainContent.ClientID%>").scrollTop = h.value;
}
</script>
<asp:HiddenField ID="hfScrollPosition" runat="server" Value="0" />
<div style="overflow: hidden;" id="DivHeaderRow"></div>
<div style="overflow: scroll;" onscroll="SetDivPosition()" id="DivMainContent" runat="server">
<asp:GridView ID="GridView1" runat="server" DataKeyNames="ID" AutoGenerateColumns="True" ....> </asp:GridView>
</div>

A HUGE simple fix. Just added
<div style="overflow: scroll;" onscroll="SetDivPosition(); OnScrollDiv(this)" id="DivMainContent" runat="server">
Focusing specifically on OnScrollDiv(this) added in the function. Works like a charm.

Highlight area element with jquery

I am a beginner in javascript.
here is my javascript: Within the map 'demo' the code pushes all area elements into the array elementPositions. When the user mouses over an area element it is pushed into the array hoveredElements. Then for each area element in hoveredElements the overlay id tag shows, and I want the area element (a rectangle) to show as well. I tried '$(this).show()' but this did not work...
Here is a typical area element:
<map name="demo" id="demo">
<area shape="rect" coords="400,400,500,499" href="#" id="r6067" alt="r6067">
</map>
<div class= "cont" style="display:none" id="overlayr6067"> mdtBIL1C09 </div>
I have accepted Nikolay's refactoring of my javascript below, here is my code-in-progress in a jsfiddle: https://jsfiddle.net/sfs1926/wacd5bv5/1/

You can do it with hoveredElements[ih].element.show().
Or item.element.show(); if you follow the code I refactored a bit below.
if ( $('#demo').length >0 ) {
var elementPositions = []; // didn't find it declared in your code
$('#demo area').each(function() {
var offset = this.coords,
coordarray = offset.split(","),
left = coordarray[0],
top = coordarray[1],
right = coordarray[2],
bottom = coordarray[3],
id = this.id,
hoveredElements = [];
elementPositions.push({
element: $(this),
top: top,
bottom: bottom,
left: left,
right: right,
id: id,
});
$("body").mousemove(function(e) {
/*
for (var ih = 0; ih < hoveredElements.length; ih++) { //for loop over all hovered elements
var id = hoveredElements[ih].id;
$('#overlay' + id).hide();
}
*/
hoveredElements.forEach( function(item) {
item.overlay.hide();
});
hoveredElements = [];
var xPosition = e.pageX;
var yPosition = e.pageY;
for (var ie = 0; ie < elementPositions.length; ie++) {
var test = elementPositions[ie].id;
if (xPosition >= elementPositions[ie].left &&
xPosition <= elementPositions[ie].right &&
yPosition >= elementPositions[ie].top &&
yPosition <= elementPositions[ie].bottom) {
// The mouse is within the element's boundaries
hoveredElements.push({
element: elementPositions[ie].element,
overlay: $('#overlay' + test), // store overlay too
id: test
});
}
} //end of for loop over all elements
/*
for (var ih = 0; ih < hoveredElements.length; ih++) { //for loop over all hovered elements
var id = hoveredElements[ih].id;
$('#overlay' + id).show();
$(this).show(); // ???
}
*/
hoveredElements.forEach( function(item) {
item.overlay.show();
item.element.show();
});
});
});
}

How to have div re-size itself to image on page load

So my goal is to have an image slideshow with 3 clickable hot spots at the bottom. I have the basic functionality of this down now, but my content div doesn't size itself properly until it loops through the images for the first time. I need everything to be sized and positioned correctly immediately when the page loads.
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#image").attr("src", images[0]);
});
//Click tracking
var badClicks = 0;
var skipClicks = 0;
var goodClicks = 0;
//Counter to keep track of images
var iCount = 0;
var images = [];
images[0] = "images/document.png";
images[1] = "images/document2.png";
images[2] = "images/document3.png";
function nextImage(){
iCount++;
//If there are no more images in the array, go back to the first image
if (images[iCount]==null) {
iCount = 0;
};
//Change image source to new image
$("#image").attr("src", images[iCount]);
//Set content wrapper width & height to current image's width & height
$("#content").css("width", $("#image").css("width"));
$("#content").css("height", $("#image").css("height"));
//Store content wrapper's new width and height into variables
var h = parseInt($("#content").css("height"));
var w = parseInt($("#content").css("width"));
//Move hotspot-wrapper to the bottom of the new image
//Height of content wrapper - height of hotspot wrapper = new top
$("#hotspot-wrapper").css("top", h - parseInt($("#hotspot-wrapper").css("height")));
console.log(images[iCount] + " h " + h + " w " + w);
}
//Do something with data for "bad" hotspot
function bad(){
badClicks++;
}
//Do something with data for "skip" hotspot
function skip(){
skipClicks++;
nextImage();
}
//Do something with data for "good" hotspot
function good(){
goodClicks++;
}
//Show the collected data
function displayResults(){
$("#results").append("<br />Bad: " + badClicks
+ " Skip: " + skipClicks
+ " Good: " + goodClicks);
}
</script>
</head>
<body>
<div id="content">
<img id="image" />
<div id="hotspot-wrapper">
<div id="hotspot-a" class="hotspot" onclick="bad();"></div>
<div id="hotspot-b" class="hotspot" onclick="skip();"></div>
<div id="hotspot-c" class="hotspot" onclick="good();"></div>
</div>
</div>
<br />
<div id="results" style="clear:both">
<button onclick="displayResults();" style="text-align: center">Show results</button>
</div>
Any help, tips or advice would be greatly appreciated!
Thanks!

First of all i prefer this way to init images array:
var images = [];
var image = new Image();
image.src = '/some/image/url.jpg';
/* while you doing this image already load in background - so its faster way*/
images.push(image);
You can display this images with jQuery this way:
$('#parend_of_image_div').html(images[iCount]);
And inside your nextImage function use this code:
var img = images[iCount];
$(img).load(function(){
var width = $(this).width()
var height = $(this).height();
/* do other stuff */
});

This is your problem
$("#image").css("width")
However, you havent set #image's width with css. You need to use
$('#image').width()
Also, to be safe, you should only continue with this part of the code AFTER your image has triggered a load event:
//Change image source to new image
$("#image").attr("src", images[iCount]).load(function(){
//Set content wrapper width & height to current image's width & height
$("#content").css("width", $("#image").width());
$("#content").css("height", $("#image").height());
//And then the rest...