Develop Reference

When click outside display none class element

The problem is that I don't know how to check with javascript: when I click outside of the div display none that class.
I have already tried to do it but doesn't work.
<section class="wrap-collabsible">
<input id="more-text-1" class="toggle" type="checkbox">
<label for="more-text-1" class="lbl-toggle" tabindex="0"><script>document.write(lan[79]);</script></label>
<div class="collapsible-content">
<div class="content-inner">
<div id="rightbox" style="float: right;background-color:white;border-radius: 20px;">
</br>
<div class="form-group" id="bukrsproject" style="float: left;">
</div>
</br>
<div class="form-group" id="prctrproject" style="">
</div>
<div class="form-group" id="posidproject" style="float: left;padding-top:15px;">
</div>
<div style="float: left;padding-left: 28px; " >
</div>
</div> </div>
</div>
</section>
I want to do this: if I click outside of the div to change display:none to class : collapsible-content.

Just register a click listener at the document level that does just that:
document.addEventListener('click', (e) => {
if (e.target.closest('.collapsible-content') || e.target.hasClass('.collapsible-content')) return;
[...document.querySelectorAll('.collapsible-content')].forEach(el => el.style.display = 'none')
})
Inside the listener you check if the click was inside or on collapsible-content, and if so, just do nothing (aka return).
Otherwise, set all elements with .collapsible-content to display: none;.

How I can show an dummy Arrow when I hover over an image

I have the following code which mainly shows 4 Divs and each Div contains an image + text which displays underneath the image, here is my code:
<div style="float: left;margin-left:9px">
<img style="height:90px;width:185px" src="*****.jpg" alt="ntitle">
<br>
<span style="font-size:9px"><a target="_blank" href="****">*****</a></span>
</div>
<div style="float: left;margin-left:9px">
<img style="height:90px;width:185px" src="*****.jpg" alt="ntitle">
<br>
<span style="font-size:9px"><a target="_blank" href="****">*****</a></span>
</div>
<div style="float: left;margin-left:9px">
<img style="height:90px;width:185px" src="*****.jpg" alt="ntitle">
<br>
<span style="font-size:9px"><a target="_blank" href="****">*****</a></span>
</div>
<div style="float: left;margin-left:9px">
<img style="height:90px;width:185px" src="*****.jpg" alt="ntitle">
<br>
<span style="font-size:9px"><a target="_blank" href="****">*****</a></span>
</div>
the result will be as follows:
I want to make it so that when the user hovers over the last Div, it shows an arrow ">" on the image itself to mimic as if the user can show the next 4 items. Can anyone give advice on how I can implement this? At this stage, I just need to add a dummy arrow, nothing else.
now inside my last Div i added a class named class='profile-image':-
<div class="profile-image" style="float: left;margin-left:9px">
<img style="height:90px;width:185px" src="*****.jpg" alt="ntitle">
<br>
<span style="font-size:9px"><a target="_blank" href="****">*****</a></span>
</div>
and then i defined the following css:-
.profile-image:hover .overlay {
position:absolute;
width: 48px;
height: 48px;
z-index: 100;
background: transparent url('/Resources/xt.png') no-repeat;
cursor: pointer;
}
but this did not have any effect...
Thanks

If you wrap all of your divs in a 'master' div (you could just give this a class of .master) then you will be able to use 'last-child' inside this class to target the last div that is inside it.
In the 'last-child' you can use :hover to allow you to display an image of an arrow when you hover over it. You could just add the arrow as a background image on the div and make this have 'visibility: visible;' or 'opacity: 1;' when it has an active hover state.
I hope this helps a bit :)
(edit: I would look to do this in a style sheet rather than inline styling)

Displaying a section of a HTML page in another HTML page

I want to display a particular section of very large HTML page (say, "page1.html") through another HTML page (say, "page2.html"), which will contain the links to every section of page1.html. How can I achieve this using simple javascript, jquery, etc. page1.html is actually being rendered through splunk and page2.html is a normal html page that has links to various sections of page1.html. Can this be achieved?
Sorry, couldn't provide pictures as my reputation is below 10.
Let me clarify. There are a range of applications(over 100) on different servers. each application contains a master page like page1.html. There is a search box in page2.html where I type in or select the application whose statistics I want to view.
The sections refer to particular statistics I want to view, suppose I want view only server statistics on which the app is running, then I will click on a link or button (on page2.html) that will take me to that section of the master page (i.e., page1.html) where the relevant information is shown. Similarly if I want to see the application statistics I will click on a link or button (on page2.html) that will take me to that section of the master page where the application statistics are being displayed.
Here is the code for page2.html:
<body class="simplexml preload locale-en">
<a class="navSkip" href="#navSkip" tabindex="1">Screen reader users, click here to skip the navigation bar</a>
<div class="header splunk-header">
<div id="placeholder-splunk-bar">
splunk<strong>></strong>
</div>
<div id="placeholder-app-bar"></div>
</div>
<a id="navSkip"></a>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
<div class="dashboard-header clearfix">
<h2>Application Dashboard HTML</h2>
</div>
<div class="fieldset">
<div class="input input-text" id="input1">
<label>Application</label>
</div>
</div>
<div id="row1" class="dashboard-row dashboard-row1">
<div id="panel1" class="dashboard-cell" style="width: 100%;">
<div class="dashboard-panel clearfix">
<div class="panel-element-row">
<div id="element1" class="dashboard-element html" style="width: 100%">
<div class="panel-body html">
<center><h1 class="golden_gradient">$tok_application$ Application Status Dashboard</h1></center>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="row2" class="dashboard-row dashboard-row2">
<div id="panel2" class="dashboard-cell" style="width: 100%;">
<div class="dashboard-panel clearfix">
<div class="panel-element-row">
<div id="element2" class="dashboard-element html" style="width: 100%">
<div class="panel-body html">
<table cellspacing="5" cellpadding="5" border="0" width="100%">
<tr>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadURL()"><font size="4"><p align="center"><b>Website Availability</b></p></font></a></pre>
</td>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadDBStat()"><font size="4"><p align="center"><b>Database Availability</b></p></font></a></pre>
</td>
</tr>
<tr>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadBM()"><font size="4"><p align="center"><b>Batch Jobs</b></p></font></a></pre>
</td>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadIT()"><font size="4"><p align="center"><b>Infrastructure Dashboard</b></p></font></a></pre>
</td>
</tr>
<tr>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadBusiness()"><font size="4"><p align="center"><b>Business Dashboard</b></p></font></a></pre>
</td>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadCMRegression()"><font size="4"><p align="center"><b>Capacity Management Regression</b></p></font></a></pre>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="content"></div>
</div>
</body>
I want the section of the master page to printed inside
<div id="content"></div>
Also I am a newbie, so please kindly provide a little detailed explaination. Thanks in advance.

http://www.w3schools.com/html/html_iframe.asp has a method using iframes to display a web link.
<iframe width="100%" height="300px" src="demo_iframe.htm" name="iframe_a"></iframe>
<p>W3Schools.com</p>
<p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p>
[code taken from w3scools.com]

Overlaying multiple external pages or divs with multiple links

I have a group of images with captions (from http://www.hongkiat.com/blog/css3-image-captions/) and would like to be able to click on them and have them overlay either a hidden div or load an external page as an overlay (I'm not fussed on either as long as it works!). I'd also like each image to link to a different page/div. I've tried lots of things without success so much help would be appreciated. Here's my code for the images (and yes one appears twice for testing purposes):
<div id="mainwrapper">
<table>
<tr>
<td>
<div id="box-1" class="box">
<img id="image-1" src="img/agent.png"/>
<span class="caption full-caption">
<h3>Agent Demo</h3>
<p>Java Group Project</p>
</span>
</div>
</td>
<td>
<div id="box-2" class="box">
<img id="image-2" src="img/wizardsbook.png"/>
<span class="caption full-caption">
<h3>The Wizard's Book</h3>
<p>Java Game</p>
</span>
</div>
</td>
<td>
<div id="box-3" class="box">
<img id="image-3" src="img/wizardsbook.png"/>
<span class="caption full-caption">
<h3>The Wizard's Book</h3>
<p>Java Game</p>
</span>
</div>
</td>
</tr>
</table>
</div>

per your 2nd question in the comments "I can't even get a simple a link to bring up the popup. I'm kinda new to JQuery so how should I link to JQuery, where should I put the script and how do I implement the img and attr things you're on about?", here is a screenshot that shows everything you need.

I built a fiddle for you that does what you're trying to do. Without knowing which unique values of the images you intend to use to load the related page, i provided some sample code:
working fiddle is here:
http://jsfiddle.net/acturbo/YVBpj/
javascript:
$().ready(function() {
$("#close").on("click", function(){
$("#popup").hide();
});
// uncomment this line to attach this "showWindow" to all the images
// then, use $(this) to access the specific image that was clicked
//$("img").on("click", function(){
$("#showWindow").on("click", function(){
// when you switch to images, you can access unique attributes
// of the clicked image using attr()
// this will let you load unique pages for each image
// eg. can use 1 or 2
// var value1 = $(this).attr( "src" );
// var value2 = $(this).attr( "id" );
//$("#popup").load( value1 );
$("#popup").show();
});
});
html:
<div id="popup">
<p>this is hidden until the image is clicked</p>
Close Window
</div>
<a href="#" id="showWindow">Show Window - mimic an image click</p>
<div id="mainwrapper">
<table>
<tr>
<td>
<div id="box-1" class="box">
<img id="image-1" src="img/agent.png"/>
<span class="caption full-caption">
<h3>Agent Demo</h3>
<p>Java Group Project</p>
</span>
</div>
</td>
<td>
<div id="box-2" class="box">
<img id="image-2" src="img/wizardsbook.png"/>
<span class="caption full-caption">
<h3>The Wizard's Book</h3>
<p>Java Game</p>
</span>
</div>
</td>
<td>
<div id="box-3" class="box">
<img id="image-3" src="img/wizardsbook.png"/>
<span class="caption full-caption">
<h3>The Wizard's Book</h3>
<p>Java Game</p>
</span>
</div>
</td>
</tr>
</table>
</div>
css
#popup{
top: 10px;
left: 10px;
width: 300px;
height: 100px;
position: absolute;
background: red;
display: none;
}

That is easy with CSS only.
Take a llok at this fiddle : http://jsfiddle.net/VgLVq/
To make the div clickable, just wrap it in a <a> tag with the URL you want.
Then make the .box in position: relative and every of his children in position: absolute. I used the selector .box>*.
Then make the .caption in display:none and add this CSS to detecte the hover :
a:hover .caption{
display:block;
}

jQuery mobile button alignment issue

I am trying my hand at jQuery Mobile and I find it a bit confusing because it's a mark-up driven framework.
I created a test page in which I am just trying to align one button to the right, but I am not able to do that. I tried float: right but it's not working. Although margin-left is working by giving a particular percentage, the same is not working when I resize the page.
Here is my Fiddle code. Any help would be great.
<div data-role="page">
<div data-role="header" data-theme="b" data-position="fixed">
<h1 style="font-size: 1.5em; text-align: left; margin-left: 70px;"
data-role="none">Test</h1>
</div>
<div id="contentLogin" align="center" name="contentConfirmation" data-role="content">
<p style="font-size: 0.85em; color: #000000">
<b>Welcome to my page</b>
</p>
<br>
<div class="ui-grid-b responsive">
<div style="margin: 0px; margin-top: 0px; margin: 0px;" class="ui-block-a">
<div data-role="fieldcontain">
<label for="url" class="alignleft">Username:*</label>
<input id="userId1" class="required" name="uid_r" placeholder="" type="text">
</div>
<div data-role="fieldcontain">
<label for="url" class="alignleft">Password:*</label>
<input id="Password1" class="required" name="pwd_r" value="" type="password">
</div>
<button id="login" data-theme="a" type="button" href="home.html" data-mini="false" data-inline="true" >Login</button>
</div>
<div class="ui-block-b">BLOCK A ADS</div>
<div class="ui-block-c" style="margin-top: 0px;">
BLOCK C
</div>
</div>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
</div>
</div>

Why not place your button inside a div and right align the div? everything inside the parent div including the button will be right aligned.
<div align="right"><button id="login" data-theme="a" type="button" href="home.html" data-mini="false" data-inline="true" >Login</button></div>
Check out the fiddle http://jsfiddle.net/mayooresan/96s59/2/

Use ui-btn-right. It's easier, less verbose and (I think) the jquery way to do things.
Login

The previous answer is correct, but you should use CSS styles instead (aling="" is deprecated)
<div style="text-align: right;">
<button data-inline="true">Login</button>
</div>

You can run into problems if you want multiple buttons...
Try:
<div style="float:right">
<button data-inline="true">Login</button>
</div>
if you want to have multiple buttons (both left and right aligned).
If you use:
<div style="text-align: right;">
<button data-inline="true">Login</button>
</div>
the div will start a new block below any existing buttons, so you can't have other icons on the left hand side.
Class ui-btn-icon-left|right lets you align the buttons left|right but I've found that using two buttons with ui-btn-icon-right will overlap them.
The template below worked for me for two left aligned buttons and two right in a footer:
Home
Intro
<div style="float:right">
Review
Exit
</div>