We Keep Coding

I can't set a var as the window.screenY

I am new to HTML, CSS, and JavaScript, although I know Java.
I want an image gallery, which I have down, but the only thing I am able to code opens in a container at the bottom of the page. So what I coded to make it more "professional" was some JavaScript functions to: first of all open it, save the y-position, and scroll all the way down, creating the illusion that it opened the image. After, when you click x, it will scroll up to x=0 and the saved y-position, and it will close the window.
Everything works, but the variable for the y position only saves as 0. Here is the portion of HTML code calling for it:
<img src="image.jpg" alt="An Image" style="width:100%" onclick="myFunction(this);">`
Here are the JavaScript functions:
var windowy;
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
windowy = window.screenY;
window.scrollBy(0, 999999999999999);
}
function quitall(imgs) {
imgs.parentElement.style.display='none';
window.scrollTo(0,windowy);
}
And finally, here is the html code for closing and scrolling to "windowy":
<div class="container">
<span onclick="quitall(this);" class="closebtn">×</span>
<img id="expandedImg" style="width:100%">
<div id="imgtext"></div>
</div>
I am new to this, so if you ask me what "this" or "imgs" are in the function's brackets, I don't know. I just need to know what I'm doing wrong when declaring the variable.

My suggestion would be to try window.pageYOffset if you want to capture the scroll of the page position.
More info about it https://developer.mozilla.org/en-US/docs/Web/API/Window/pageYOffset

It looks like window.scrollBy(0, 999999999999999); is causing your page to scroll to the bottom (999999999999999px in fact) -- you most likely intend to scroll to the top of the newly updated expandImg element. Use window.scrollTo(0,expandImg.offsetTop); to scroll the window to the top of offsetTop.

bootstrap dynamic image generation sets width=

I am converting a site under development to bootstrap. On one of my pages I dynamically create an image based on user input.
I start with a page like this:
And after :
The user clicks on one of the magazine covers and a new image is generated in the upper left corner. Other parts of the image are user choices made on other pages.
My problem is that the javascript generating the code insert width= and height= code in the HTML. Since this defeats bootstraps responsive images, I want to get rid of that but I can't figure out how. Everything else is working fine.
Here is the process:
I start with the HTML:
<div id='FramePreviewDiv'>
<img class='img-responsive' alt='' id='fpS' style='padding:4px' src='' /> </a>
</div>
There is no image on page entry. A default image is generated.
When the customer clicks on one of the magazine covers a request is issued.
getImage('fpS', buildFrameUrl ( 200 ), true);
The function buildFrameUrl returns something like this:
http://www.example.com/BuildFrame.php?mNo=693&tm=C9885&mm=&bm=C9887&noMats=2&size=200&art=siv1n1-0854.jpg&ft=1&matWidth=2.0&maxWidth=200&maxHeight=400&artWidth=8.25&artHeight=11.5&isCropped=0&xStart=0&yStart=0&croppedPxWidth=&croppedPxHeight=&caw=&cah=
Here is the code for getImage
function getImage(pExistingImageID, pImageURL, fShowLoading)
{
var link;
if (fShowLoading)
{
document.getElementById(pExistingImageID).src="/img/loader.gif"; // animated gif of your choice
document.getElementById(pExistingImageID).width=32;
document.getElementById(pExistingImageID).height=32;
}
var img = document.createElement('img');
img.onload = function (evt) {
document.getElementById(pExistingImageID).src=this.src;
document.getElementById(pExistingImageID).width=this.width; // this is the culprit
document.getElementById(pExistingImageID).height=this.height; // this is the culprit
};
img.src = pImageURL;
return false;
}
The HTML generated by this looks like this
<div id="FramePreviewDiv">
<img id="fpS" class="img-responsive" width="200" height="244"
src="http://www.tpfnew.com/BuildFrame.php?mNo=693&tm=C9885&mm=&bm=C9887&noMats=2&size=200&art=siv1n1-0854.jpg&ft=1&matWidth=2.0&maxWidth=200&maxHeight=400&artWidth=8.25&artHeight=11.5&isCropped=0&xStart=0&yStart=0&croppedPxWidth=&croppedPxHeight=&caw=&cah=" style="padding:4px" alt="">
</div>
The width= comes from the value set here:
document.getElementById(pExistingImageID).width=this.width;
Same same for the height.
I tried eliminating the line but that gives me a 32x32 image from the fShowLoading code. If I delete the width and height= from the fShowLoading block, I get the right size image but still with the width= and height= in the resultant html.
Any thoughts on how I can eliminate the generation of the width= and height= html so bootstrap will be able to resize the images responsively?

So what seems to be happening is because the image itself has a height and width assigned to the image its making the image become those sizes. So instead of trying to change the JS to remove the height and width just leave the JS alone and overwrite the properties with CSS like this:
#FramePreviewDiv .img-responsive {
width: 100%;
height: auto;
}
Here is a js.fiddle with an example. Hope that helps

Overlaying image in HTML

I am creating a simple interactive doll dress up game where the user can pick different attributes to assign to the doll through three separate drop down menus, such as hair colour, dress type, etc.
I have a base image that is in a div which I want to overlay the images onto.
<div id="display_here">
<img src="base.png" />
</div>
The images are called by a function:
function createDoll(userChoice) {
var output = document.getElementById("display_here");
output.innerHTML = "";
var links = [
"redhair.png",
"blondehair.png",
"brownhair.png",
];
var choices = ["Red", "Blonde", "Brown", "Vintage", "Skater", "Plaid", "Heels", "Brogues", "Pumps"];
var img = '<img src="' + links[userChoice] + '">';
output.innerHTML = img;
}
I have given each option in the select menu a value which corresponds to the value in var choices, here is the hair colour option:
<p>
What hair will your doll have?
<select name="choice" id="choice" onchange="createDoll(this.value)">
<option value="0">Red</option>
<option value="1">Blonde</option>
<option value="2">Brown</option>
</select>
</p>
So for each option I want it to overlay onto the base image but nothing I have tried seems to work. The only thing I seem to be able to find on this is the 'position:relative' and 'position:absolute' solution but since my images are not in a div this won't work. Can anybody thing of anything that might work?

The first thing I notice is output.innerHTML = "";, which will get rid of your base.png image. I assume this is something that you don't want to do.
So, one way to handle this is to have all the images that you might need already there, but keep them hidden or with an empty src attribute until needed.
<div class="overlay-container">
<img class="overlay" src="base.png">
<img class="overlay" id="hair">
<img class="overlay" id="clothing1">
<img class="overlay" id="clothing2">
</div>
Then in your function, you could do something like this.
function createDoll(userChoice) {
var links = [
"redhair.png",
"blondehair.png",
"brownhair.png"
];
document.getElementById('hair').src = links[userChoice];
}
As for taking care of the overlaying, you'll need to use an absolute position with z-indexing on each image inside of a div with relative positioning. For example, here is some CSS styling that reflects this.
.overlay { position: absolute; }
.overlay-container { position: relative; }
#hair { z-index: 10; }
#clothing1 { z-index: 20; }
#clothing2 { z-index: 21; }
To make positioning easier, I recommend keeping most of your similar images, such as different hair types, all of the same size, otherwise you'll have to give different top and left CSS styling co-ordinates for each one. Of course, the simplest option is to just make all of the different images the same size.
I hope this has been of some help, and good luck!

You should be able to use absolute positioning to make it work, since everything lives in the 'display_here' div.
You could also use HTML5 Canvas to draw the clothes onto the doll as well. Seems like a perfect opportunity to use it.

Large images prevent div from fading in

I've got this setup:
<div id="container1">
<!-- content from one section -->
</div>
<div id="container2" style="display:none;">
<div id="sub-container">
<img src="image1.png" />
<img src="image2.png" />
<!-- 20 or so images sit here -->
</div>
</div>
container1 is initially displayed. On document.ready, all but the first four images are hidden away in order to build a carousel of sorts.
The user clicks a button, container1 fades out and container2 fades in.
The first time the user clicks the button, container2 doesn't fade in, instead it jumps straight to visible. The second time, fade in works as normal.
The images involved are pretty substantial (~10MB total size) but that hasn't been an issue so far as the page is meant to be viewed locally. The fact that the issue doesn't appear if I've got one or two images tells me the browser is struggling to both load the images and fade in at the same time. The second time it loads, the images have been cached and fade in as normal.
I tried a form of preloading like so:
/* take the div outside the viewport but still render it */
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
var cacheContainer = "<div class='hide'></div>",
$images = $("#sub-container img");
// move the images to the container
$(cacheContainer).appendTo("body").append($images);
// hopefully 500ms would be enough for the images to render?
setTimeout(function () {
images.appendTo("#sub-container");
doGallery(); // build carousel
},500);
... this however leads to the same issue - container2 pops in instead of fading the first time round, and works perfectly fine afterwards.
Any ideas?
As requested, here's what I use to hide/show the containers:
$(document).ready(function() {
var $currentTab = $("#container1"),
$newTab,
newTabName;
// a couple of more unrelated setting up functions go here
doImageCaching(); // the function I've got above
$("#container2").hide();
$("#tab-links>a").click(function(e) {
e.preventDefault();
// probably a bit cheeky doing it this way but oh well
newTabName = $(this).attr("id").replace("-btn", "");
if($currentTab.attr("id") === newTabName) {
return;
}
$newTab = $("#" + newTabName);
$newTab.stop(true, true).fadeToggle(200);
$currentTab.stop(true, true).delay(100).fadeToggle(200);
$currentTab = $newTab;
$newTab = null;
});
});
Here's #tab-links for reference:
<div id="tab-links">
<a id="container1-btn" href="#">show container 1</a>
<a id="container2-btn" href="#">show container 2</a>
</div>
Edit 2 So I just noticed something new: so the second time I switch to container2 it fades in as normal. If I wait 10 seconds or so, and then try and switch to container2 again, the problem reappears.
So it seems to me loading the DOM has nothing to do with this, and I'm dealing with Chrome's internal memory. So it loads the images, and then "forgets" about them when they hide again. Yikes.
Does anyone have any ideas as to how to keep the browser from "forgetting" the images, or is that a direction I shouldn't really take?

So I ended up converting my ultra-high quality PNGs to ultra-high quality JPGs - this led to an approximately 20-30% reduction in file size with barely any reduction in apparent quality. My problem disappeared, too.
The moral of the story is: even if you're developing a page that isn't going online, you still need to optimize your images.
Thank you all for your help.

Is it possible to change multiple images along with their respective mouseover commands?

Thanks for looking, I have this plan, I want to create a gallery where I have the main image which is changed by mouse-ing over a bunch of 8 thumbnails, easy.
What I would like to add is separate small bunch of 3 thumbnails and when these are moused over they change the 8 thumbnail images and make them call up 8 new main images. Sorry I hope that’s understandable?
So it’s a little like a tiered or a nested arrangement almost like a small folder tree where the new 3 thumbs hold different libraries of 8 thumbs… no that’s probably just made it even more confusing!!!..
I was keen that it was all done with mouse over the thumbs so it’s smooth and there’s no clicking or reloading the page.
I’ve had a good look around but probably just need telling what terms/phrases/commands to pop in my search engine.
Getting the 3 thumbs to change the 8 thumbs and the main image should be straightforward enough I’m currently using this:
<img src = "images/nicepic5thumb.png" onmouseover =”document.main.src = 'images/nicepic5.jpg';">
Where the main big image is:
<img src = "images/nicepic1.jpg" name= "main">
And I guess it could be expanded to multiple images. Doesn’t have to be done like this however, just whatever would work best, it’s making one mousover change multiple mouseover commands thats currently beyond me.
Ultimately I aim to get all the transitions to fade.
Very grateful for a pointer in the right direction.

I would sent the 3 panels (or more) of 8 thumbs with the respective commands to change main images and make the 3 index thumbs switch the visibility of the 8 images panel

This is actually something that would be very easy to do in jQuery
All you need to do is add a common class to the images in the gallery or more efficiently add an ID to the element that contains the image and use that to select the images such as.
<img src = "images/nicepic1.jpg" name= "main" id="main_img">
<div id="gallery"><img src="nicepic1thumb.png"><img src="nicepic2thumb.png"><img src="nicepic3thumb.png"></div>
<script>
$(document).ready(function(){
$("#gallery img").onmouseover(function(){
$("#main_img").attr('src',$(this).attr('src').replace("thumb.png",".jpg"));
}
}
</script>
Here is a full working gallery without animations that does exactly what you wanted.
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript" ></script>
<script>
$(document).ready(function(){
gallery.init();
});
var gallery = {
main_img: null,
init:function(){
gallery.main_img = $("#main_img img");
$("#images img").click(function(){
gallery.change($(this).attr('src'));
});
},
change: function(image){
gallery.main_img.attr('src', image.replace("thumb.png",".jpg"));
}
}
</script>
</head>
<body>
<div id="gallery">
<div id="main_img"><img src="images/image1.jpg"/></div>
<div id="images">
<img src="images/image1thumb.png"/><img src="images/image2thumb.png"/><img src="images/image3thumb.png"/><img src="images/image4thumb.png"/><img src="images/image5thumb.png"/>
</div>
</div>
<body>
</html>
If you need animations such as fading and stuff just ask.