We Keep Coding

Unable to get value of element using document.getElementById

For the below element i am trying to capture my name displayed in this tag. Part of the code snippet attached.
<!-- Sidebar user panel (optional) -->
<div class="user-panel">
<!--<div class="pull-left image">
<img id="profileImage2" alt="User Image" class="img-circle" />
</div>-->
<a>
<div class="pull-left info">
<p class="nameprofile1">Hi<input id="inputName" disabled="disabled" style="width:auto !Important;"></p>
<!--<a href="#Profilezone" data-toggle="tab"><i class="fa fa-circle text-success"></i>
Online</a>-->
</div>
</a>
</div>
I am unable to capture the value of text by using
var Name=document.getElementById("inputName").value;
newrelic.setCustomAttribute('Name', Name);
This is to set a custom attribute for Newrelic event. I am querying the attribute Name using the query
SELECT Name FROM PageView WHERE appName ='Sharepoint_Custom'
Result is Null.
Is there something i need to understand as this element is nested but visible on the main landing page.

Get data of element on page

If I have an object like this on a specific website:
<div class="header">
<h1>Welcome to the site</h1>
<p>Foo bar baz spam</p>
</div>
Is there a way to make an element on my site display the content of the first div with that class?
For example, on https://stackoverflow.com, there's a div with the class "-container" near the top of the page.
<header class="top-bar js-top-bar _fixed">
<div class="-container">
<div class="-main">
<a href="https://stackoverflow.com" class="-logo js-gps-track"
data-gps-track="top_nav.click({is_current:true, location:1, destination:8})">
<span class="-img _glyph">Stack Overflow</span>
</a>
<!-- More data follows -->
So, on my site, let's say I had a special element with a certain class that specified the website and class to pull from. The HTML would look like this:
<div class="mySpecialClass">
<div class="-main">
<a href="https://stackoverflow.com" class="-logo js-gps-track"
data-gps-track="top_nav.click({is_current:true, location:1, destination:8})">
<span class="-img _glyph">Stack Overflow</span>
</a>
<!-- More data follows -->
</div>
Is there a way to do this with HTML, CSS, PHP or similar?

Generate unique div id in php to assign javascript to it

I generate the following pieces of code via php (unknown number in advance) and they are all wrapper in my 'item-container' div:
<div id="item-size" class="item-size">
<div class="view pic-transition">
<figure id="ribbonnew" class="ribbonnew">
<img class="ribbonnewimg" alt="" src="../images/endingsoonribbon.png">
</figure>
<img src="../images/woman.jpg" />
<div class="mask">
<h2>Title</h2>
<p>This is a test of a description for an item.</p>
Read More
</div>
</div>
</div>
I generate a ribbon on SOME of these 'item-size' div's and via javascript i want the ribbon to be hidden when the mouse is hovered over and back to normal when mouse out.
My javascript code is:
$("#item-size").hover(function(){
$('#ribbonnew').hide();
},function(){
$('#ribbonnew').show();
});
This of course only works for the first element, so I guess I need to assign ID's to the 'item-size' div's ? How do I do this AND create the javascript which binds the mouse hover to every of these divs (how to pass the size of how many I created, so I could add ID's from 0 to size)?
As an extra question, is there also a way to make the ribbon fade in and fade out slowly? .fadeOut(1000); is not delivering the expected result

Remove all ids :
<div class="item-size">
<div class="view pic-transition">
<figure class="ribbonnew">
<img class="ribbonnewimg" alt="" src="../images/endingsoonribbon.png">
</figure>
<img src="../images/woman.jpg" />
<div class="mask">
<h2>Title</h2>
<p>This is a test of a description for an item.</p>
Read More
</div>
</div>
</div>
And use a dot . in your selectors to match elements by classes :
$(".item-size").hover(function(){
$(this).find('.ribbonnew').hide();
},function(){
$(this).find('.ribbonnew').show();
});
For your extra question, you can use a parameter in the hide and show jquery methods for animation :
$(this).find('.ribbonnew').hide(400);
Edit : if the html is inserted dynamically, try event delagation instead :
$('#item-container').on('mouseenter mouseleave', '.item-size', function(){
$(this).find('.ribbonnew').toggle(400);
});

(if you really want to use ids)
Generate a unique id using the uniqid() function, and name all your item-size elements.
<?php
$unique_id = uniqid();
?>
<div id="<?=$unique_id?>item-size" class="item-size">
<div class="view pic-transition">
<figure class="ribbonnew">
<img class="ribbonnewimg" alt="" src="../images/endingsoonribbon.png">
</figure>
<img src="../images/woman.jpg" />
<div class="mask">
<h2>Title</h2>
<p>This is a test of a description for an item.</p>
Read More
</div>
</div>
</div>
Then, match all elements with that unique id as part of their ids.
$("*[id^='<?=$unique_id?>']").hover(function(){
$(this).find('figure.ribbonnew').hide();
},function(){
$(this).find('figure.ribbonnew').show();
});

Javascript image arrays

I have found this javascript plugin that puts images into a responsive grid which will expand a large view of the image on click (like google images). I want to modify the structure of the large view to display multiple images instead of one large image.
Is there a way I change this code so that the largesrc attribute is not just a link to a single image but an array of images?
html;
<ul id="og-grid" class="og-grid">
<li>
<a href="http://example.com" data-largesrc="img/example.jpg" data-title="Example Title" data-description="Example Description">
<img src="img/example.jpg">
</a>
<div class="og-expander">
<div class="og-expander-inner">
<span class="og-close"></span>
<div class="og-fullimg">
<div class="og-loading"></div>
<img src="img/example.jpg">
</div>
</div>
<div class="og-details">
<h3>Example Heading</h3>
<p>Example Description</p>
Visit website
</div>
</div>
</li>
</ul>
js;
// update preview's content
var $itemEl = this.$item.children('a'),
eldata = {
href: $itemEl.attr('href'),
largesrc: $itemEl.data('largesrc'),
title: $itemEl.data('title'),
description: $itemEl.data('description')
};

I am not sure your plugin will do that or not but looks like there are a couple of lightbox plugin which can do this.
http://css-tricks.com/forums/discussion/12174/lightbox-with-multiple-images/p1

opening an image inside an modal window

Here is my JsFiddle
I am trying to create an image gallery. I want my each image to open up inside a modal window when someone click on any image. I have designed my modal window. i just don't know how to connect my modal window to my images in the image gallery. I want the clicked-in image to appear inside the img tag of my modal window.
This is my first time i am trying to do something with modal window. i have no idea how to write that click event handler for my case. I searched in net. I did not find any matching solution. All were suggesting to use their own plugins. I don't want to use others plugins for this. A little help would be appreciated.
Here's is my image gallery
<div class="gallery">
<div class="row">
<img class="normalimage" src="">
<img class="wideimage" src="">
<!--more images-->
</div>
<div class="row">
<img class="normalimage" src="">
<img class="normalimage" src="">
<!--more images-->
</div>
</div>
Here is my modal window
<div class="gallery-overlay" style="display: none;">
<div class="gallery-imagebox">
<img class="gallery-image" src="#">
</div>
<div class="gallery-captionbox">
<div class="gallery-control gallery-control-previous">
<
</div>
<div class="gallery-control gallery-control-next">
>
</div>
</div>
</div>

Using jQuery you could start with this:
$(function(){
$('.gallery').on('click','a',function(){
$('.gallery-overlay').show()
.find('.gallery-image').attr('src',$(this).find('img').attr('src'));
return false;
});
});
Have a look at this this fiddle