Develop Reference

Image can't be displayed when image is onclick

Functionality:
When user navigates to the main menu page, a list of image will be displayed. When user click on a specific image within the container in the main menu, a second image will be displayed in a form of pop-up display image.
Lastly, user can click on the second image and the third image will be displayed.
All the images are grouped into different arrays, all images are linked; meaning, ImageArrayA[0] = ImageArrayB[0] = ImageArrayC[0].
What has been done:
I have 3 sets of array of image source:
1.) All images source Array 2.) Secondary Image Source Array(pop-up display) 3.) Third Image Source Array
I have grab all images from array(All images source), and insert into a particular location say: <div class="Container"> <div id= "list" class="innerScroll"></div></div> . The images are displayed in accordance to alphabetical order.
Secondly, I have done an onclick in regards to the and append the second array to the first array, hence, when user clicks on the primary image in the main menu, the corresponding second image will be displayed.
Lastly, I have tried to do the same method for dispplaying the third image as that of getting the second image.
var BrandNameArray = ['http://lorempizza.com/380/240',
'http://dummyimage.com/250/ffffff/000000',
'http://lorempixel.com/g/400/200/',
'http://lorempixel.com/g/400/200/sports/'
];
var SecondImage = ['http://lorempizza.com/380/240',
'http://dummyimage.com/250/ffffff/000000',
'http://lorempixel.com/g/400/200/',
'http://lorempixel.com/g/400/200/sports/'
];
var ThirdImage = ['http://lorempizza.com/380/240',
'http://dummyimage.com/250/ffffff/000000',
'http://lorempixel.com/g/400/200/',
'http://lorempixel.com/g/400/200/sports/'
];
var container = document.getElementById('list');
var docFrag = document.createDocumentFragment();
var x = 0;
BrandNameArray.forEach(function(url, index, originalArray) {
var img = document.createElement('img');
img.id = "Logo-" + x;
img.src = url;
docFrag.appendChild(img);
var selectedOffer = SecondImage[index];
//Choose Brand with popUp
img.onclick = function() {
$('#SecondImage').fadeIn({
duration: slideDuration,
queue: false
});
$("#Description").attr('src', selectedOffer).show();
};
selectedOffer.onclick = function() {
console.log("index" + index);
var PhotoFrame = ThirdImage[index];
console.log("PhotoFrame" + PhotoFrame);
$("#Chosen_ThirdImage").attr('src', PhotoFrame).show();
};
x++;
});
container.appendChild(docFrag);
.Container {
position: absolute;
top: 300px;
left: 300px;
height: 600px;
width: 1260px;
}
.innerScroll {
position: relative;
width: 1250px;
height: 600px;
font-size: 25px;
color: #8d8989 !important;
overflow-y: scroll;
}
<div id="FirstImage" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; z-index=3; top:0px; left:0px;">
<!--Container to display all alphabetically sorted images-->
<div class="Container">
<div id="list" class="innerScroll"></div>
</div>
</div>
<div id="SecondImage" class="menu" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display:none; top:0px; left:0px; z-index=10;">
<img id="Description" style="position:absolute; top:124px; left:534px; z-index=99;">
</div>
<div id="ThirdImage" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=14; top:0px; left:0px; ">
<!--Photoframe that is selected from brand chosen-->
<img id="Chosen_ThirdImage" style=" position:absolute; width:1920px; height:1080px; top:0px; left:0px;" />
</div>
Issue:
I have managed to get the second image to display correctly when user clicks on the first image, however, when user clicks on the second image. The third image fails to load and display.
Meaning: when user clicks on imageA[0], i will get imageB[0] and also imageC[0] and if i were to click imageA[3], i will get imageB[3] and also imageC[3].
I would like to ask what have i done wrong. please help, thank you.

selectedOffer that you are trying to add an event handler to appears to just be a string, not an element in the DOM:
var selectedOffer = SecondImage[index];
from
var SecondImage = ['ht_p://lorempizza.com/380/240',
'ht_p://dummyimage.com/250/ffffff/000000',...
ie the string 'http://dummyimage.com/250/ffffff/000000'
The first image you assign on click to is an element you created with:
var img = document.createElement('img');
...
docFrag.appendChild(img);
You need #SecondImage to be clickable

Well not directly answering your question, but I can suggest how I would go about creating the above interface.
Lets say that the images are having the ids with the imgid as the prefix and then their serial no or whatever unique id is there.
Then I shall add the pop images absolute urls or just the name inside the data attributes namely data-first and data-second respectively.
For this example, I'll go witht the full absolute URLs.
<div class="containerofimg">
<img src="xyz/img/xyz.jpg" id="imgid234" data-first="http://lorempixel.com/600/300/sports/FirstImageA" data-second="http://lorempixel.com/600/300/sports/SecondImageA" />
<img src="xyz/img/abc.jpg" id="imgid235" data-first="http://lorempixel.com/600/300/sports/FirstImageB" data-second="http://lorempixel.com/600/300/sports/SecondImageB"/>
<img src="xyz/img/pqr.jpg" id="imgid236" data-first="http://lorempixel.com/600/300/sports/FirstImageC" data-second="http://lorempixel.com/600/300/sports/SecondImageC"/>
</div>
Then I shall use the jQuery .data() or .attr() to grab the first and second overlay Images, and display them inside the modal.
As shown in this Demo.

Dynamically loaded images disappear after print preview

Here is my print function.
function printContent() {
var myWindow = window.open('', '', 'width=600,height=700')
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = some text;
myWindow.document.body.innerHTML = newstr;
myWindow.print();
myWindow.close();
}
html:
<div>
<div id="text"> </div>
<div id="images"></div>
</div>
I try to print only 'text' on page not the entire page but after preview, dynamically loaded images to 'images' div disappear. I can't solve this with update panels. Have you got any idea?? Thanks.

Use image as a background to its outer div instead of using image tag. Hope this helps. Please check the below code for reference.
.bg__image {
background: url('./images/dummy_image.png') center center no-repeat;
background-size: 100%;
height: 100px;
width: 100px;
float: left;
}
<div class="bg__image"></div>

I try to print only 'text' on page not the entire page ...
If you want to take out specific parts of the page from print version, use #media print CSS rules:
#media print {
#images {
display: none;
}
}

catching DOm elements

hi Guys I need help with catching a img tab in side of the p tag
this is my html
<p>
<img style="max-width: 100%; margin-left: auto; margin-right:
auto; display: block;"
src="../content_platform_node/content_primitive/51e4c3e29306e2581000000a/blob"
alt="" data-lscp-resource-mimetype="image/jpeg"
data-lscp-resource-id="51e4c3e29306e2581000000a" />
</p>
what I need is to wrap the img tab with a tag instead of p tag , note this is not pre-generated its user input content therefore I need to do this with jquery or javascript
help needed

You can try something like
var parent = $('img').parent();
parent.wrap('<div />').contents().unwrap()
and the div can be any other tag

var image = $('img[data-lscp-resource-id="51e4c3e29306e2581000000a"]');
image.parent('p').replaceWith($('<a></a>').html(image));
Fiddle
EDIT: raw js:
var image = document.getElementsByTagName('img')[0];
var oldParent = image.parentNode;
var newParent = document.createElement('a');
newParent.appendChild(image);
oldParent.parentNode.appendChild(newParent);
oldParent.parentNode.removeChild(oldParent);
Fiddle

How to hide/show div tags using JavaScript?

Basically, I'm trying to make a link that, when pressed, will hide the current body div tag and show another one in its place, unfortunately, when I click the link, the first body div tag still appears. Here is the HTML code:
<div id="body">
<h1>Numbers</h1>
</div>
<div id="body1">
Body 1
</div>
Here is the CSS code:
#body {
height: 500px;
width: 100%;
margin: auto auto;
border: solid medium thick;
}
#body1 {
height: 500px;
width: 100%;
margin: auto auto;
border: solid medium thick;
display: hidden;
}
Here is the JavaScript code:
function changeDiv() {
document.getElementById('body').style.display = "hidden"; // hide body div tag
document.getElementById('body1').style.display = "block"; // show body1 div tag
document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked"; // display text if JavaScript worked
}
NB: CSS tags are declared in different files

Have you tried
document.getElementById('body').style.display = "none";
instead of
document.getElementById('body').style.display = "hidden";?

just use a jquery event listner , click event.
let the class of the link is lb... i am considering body as a div as you said...
$('.lb').click(function() {
$('#body1').show();
$('#body').hide();
});

Use the following code:
function hide {
document.getElementById('div').style.display = "none";
}
function show {
document.getElementById('div').style.display = "block";
}

You can Hide/Show Div using Js function. sample below
<script>
function showDivAttid(){
if(Your Condition)
{
document.getElementById("attid").style.display = 'inline';
}
else
{
document.getElementById("attid").style.display = 'none';
}
}
</script>
HTML -
Show/Hide this text

Set your HTML as
<div id="body" hidden="">
<h1>Numbers</h1>
</div>
<div id="body1" hidden="hidden">
Body 1
</div>
And now set the javascript as
function changeDiv()
{
document.getElementById('body').hidden = "hidden"; // hide body div tag
document.getElementById('body1').hidden = ""; // show body1 div tag
document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked";
// display text if JavaScript worked
}
Check, it works.

Consider using jQuery. Life is much easier with:
$('body').hide(); $('body1').show();

try yo write
document.getElementById('id').style.visibility="hidden";

How would I use text to show more text in a different location on the page?

I been researching around looking for how to use tags and javascript to create an area where more information can be seen pertaining to that text you would click on? An excellent example of coding that was given to me, but I already have a layout where the text are set inside div tags.

Just have an onclick that toggles the display value of another div:
jsFiddle
CSS
#toggle {
position: absolute;
left: 20px;
top: 100px;
}
HTML
<div id="toggle">
Show More
</div>
<div id="showMoreText" style="display: none">
more text here
</div>
JS
window.onload = function() {
document.getElementById('toggle').onclick = showMore;
}
function showMore() {
var div = document.getElementById('showMoreText');
var display = div.style.display;
display == "none" ? div.style.display = "block" : div.style.display = "none";
}