It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
I want to be able to log in to a site automatically. For that purpose, i save a copy of login page of that site. Then i enter passsword and user name on this copy in advance. There is a login button on this page. So normally, after typing user name and password, i need to click this button to go to next page. But i want to do this automatically. Here is the related part of the source code:
<html>
<head>
<meta http-equiv="imagetoolbar" content="no">
<link rel="SHORTCUT ICON" href="/favicon.ico">
<SCRIPT>var main=window;</SCRIPT><SCRIPT LANGUAGE="JavaScript" src="http://localhost/_common/cjmaker.js"></SCRIPT>
<title>Login Page</title>
<SCRIPT LANGUAGE="JavaScript"> function openNewBrowserWindow() { newWindow = window.open("http://localhost/_common/lvl5/dologin.html", "subWind", "statusbar,menubar,resizable"); newWindow.focus(); } function getUsername() { return document.getElementById("nameInput").value; } function getPassword() { return document.getElementById("pass").value; } function setFocus() { document.getElementById('nameInput').value == "" ? document.getElementById("nameInput").focus() : document.getElementById("pass").focus(); } </SCRIPT><style type="text/css">
<!--
td { font-family: Arial, Helvetica, sans-serif; font-size: 18px; }
body { font-size:12px; vertical-align:baseline; padding:0; margin:0px; height:1px; font-family:arial;color:#A8A8A8; background-color:#000000;}
.normText { color:#A8A8A8; }
.normTextBold { font-weight:bold; }
.bigText { font-size: 30px; font-weight: bold }
.bigRedText { font-size: 30px; color: #FF0000; font-weight: bold }
.legalTextArea { font-size:10px; color:A8A8A8; background-color:000000}
.smallText { font-size:12px }
-->
</style></head>
<body style="height:100%" SCROLL="NO" onload="setFocus();document.getElementById('loginForm').submit();">
<table border=0 cellpadding=0 cellspacing=0 style="width:100%; height:100%">
<tr height="27px" style="max-height:27px;">
<td valign="bottom" width="14" height="27px"> <img width="14" height="27" src="http://localhost/_common/lvl5/skin/graphics/login/sectionb5.gif"></td>
<td valign="bottom" width="13" height="27px"><img width="13" height="27" src="http://localhost/_common/lvl5/skin/graphics/login/sectionb6.gif"></td>
<td valign="bottom" width="100%" style="position: relative; background-image: url('http://localhost/_common/lvl5/skin/graphics/login/sectionb7.gif'); background-repeat: repeat-x;" height="27px"></td>
<td valign="bottom" width="14" height="27px"> <img width="14" height="27" src="http://localhost/_common/lvl5/skin/graphics/login/sectionb8.gif"></td>
</tr>
<tr>
<td width="10" style="background-image: url('http://localhost/_common/lvl5/skin/graphics/login/sectionc5.gif'); background-repeat: repeat-y;">
</td>
<td COLSPAN="2">
<form id="loginForm" method="post" name='loginForm' action="http://localhost/_common/servlet/lvl5/login?language=en" onsubmit="document.getElementById('pass').value = CJMaker.makeString(document.getElementById('pass').value);" ></form>
<div align="center"><img src="/logo.gif" width="536"></div>
<table border="0" align="center" name="logintable" >
<tr>
<td colspan="3"> </td></tr><tr><td align="center" colspan=3 height="100"><span class="normText"><span class="bigRedText">Dealer Copy</span></span><br><span class="normText"><span class="normRedText">This software is only licensed for internal use by a Dealer for Automated Logic Corporation</span><BR><SPAN class="smallText">Serial Number ( W200500023 )</SPAN></SPAN></span></td>
</tr><tr><td colspan="3"> </td></tr>
<tr>
<td colspan=3 align="center">Please log in</td>
</tr>
<tr>
<td width="50%" align="right">
<div align="right" style="margin-right:10px;">Name:</div>
</td>
<td>
<div align="left">
<input id="nameInput" type="text" value="Administrator" name="name" size="25" maxlength="80" tabindex="1" style="width:175px;">
<script>
if(document.getElementById('nameInput').value == '')
{
document.getElementById('nameInput').focus();
}
</script>
</div>
</td>
<TD rowspan="2" width="50%" align="left">
<div align="left" style="margin-left:10px;">
<input type="submit" id="submit" name="Submit" style="background-color:#A8A8A8" value="Log in" tabindex="2">
</div>
</TD>
</tr>
<tr>
<td>
<div align="right" style="margin-right:10px;">Password:</div>
</td>
<td>
<div align="left">
<input type="password" value="" id="pass" name="pass" autocomplete="off" size="25" maxlength="80" tabindex="1" style="width:175px; ">
<script>
if(document.getElementById('nameInput').value != '')
{
document.getElementById('pass').focus();
}
</script>
</div>
</td>
</tr>
</table>
</td>
<td valign="top" width="14" style="background-image: url('http://localhost/_common/lvl5/skin/graphics/login/sectionc8.gif'); background-repeat: repeat-y">
<span id="actionVbar" style="position:relative; width=100%; height=100%"></span>
</td>
</tr>
<tr height="14px" style="max-height:14px">
<td valign="top"><img width="14" height="14" src="http://localhost/_common/lvl5/skin/graphics/login/sectiond5.gif"></td>
<td COLSPAN="2" valign="top" style="background-image: url('http://localhost/_common/lvl5/skin/graphics/login/sectiond6.gif'); background-repeat: repeat-x; line-height: 14px;" height="14px"> </td>
<td valign="top" height="14px"><img width="14" height="14" src="http://localhost/_common/lvl5/skin/graphics/login/sectiond8.gif"></td>
</tr>
</table><div id="imagecachediv" style="position:absolute; z-index:-10; top:0px; left:0px; visibility:hidden" >
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/actions/acbutton_down_middle.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/actions/acbutton_down_left.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/actions/acbutton_down_right.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/actions/acbutton_up_middle.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/actions/acbutton_up_left.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/actions/acbutton_up_right.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/actions/actionbutton_dn_middle.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/actions/actionbutton_dn_left.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/actions/actionbutton_dn_right.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/actions/actionbutton_up_left.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/actions/actionbutton_up_middle.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/actions/actionbutton_up_right.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/facets/facettab_down_middle.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/facets/facettab_up_middle.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/buttons/textbutton_down_middle.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/buttons/textbutton_up_middle.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/properties/equip_templates/setpt_graphics/setpointtempindicator.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/properties/equip_templates/setpt_graphics/setpointheader.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/properties/equip_templates/setpt_graphics/setpointbody.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/properties/equip_templates/setpt_graphics/setpointfooter.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/patterns/uphashes.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/patterns/horiz.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/patterns/leftdiagonal.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/patterns/vert.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/patterns/tickbackground.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/patterns/squares.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/de/scheduleticks_12.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/en/scheduleticks_12.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/es/scheduleticks_12.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/fr/scheduleticks_12.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/fr_FR/scheduleticks_12.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/ko/scheduleticks_12.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/ru/scheduleticks_12.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/sv/scheduleticks_12.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/th/scheduleticks_12.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/vi/scheduleticks_12.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/zh/scheduleticks_12.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/zh_TW/scheduleticks_12.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/de/scheduleticks_24.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/en/scheduleticks_24.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/es/scheduleticks_24.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/fr/scheduleticks_24.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/fr_FR/scheduleticks_24.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/ko/scheduleticks_24.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/ru/scheduleticks_24.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/sv/scheduleticks_24.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/th/scheduleticks_24.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/vi/scheduleticks_24.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/zh/scheduleticks_24.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/zh_TW/scheduleticks_24.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/de/schedulefooter_12.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/en/schedulefooter_12.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/es/schedulefooter_12.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/fr/schedulefooter_12.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/fr_FR/schedulefooter_12.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/ko/schedulefooter_12.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/ru/schedulefooter_12.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/sv/schedulefooter_12.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/th/schedulefooter_12.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/vi/schedulefooter_12.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/zh/schedulefooter_12.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/zh_TW/schedulefooter_12.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/de/schedulefooter_24.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/en/schedulefooter_24.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/es/schedulefooter_24.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/fr/schedulefooter_24.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/fr_FR/schedulefooter_24.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/ko/schedulefooter_24.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/ru/schedulefooter_24.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/sv/schedulefooter_24.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/th/schedulefooter_24.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/vi/schedulefooter_24.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/zh/schedulefooter_24.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/zh_TW/schedulefooter_24.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/trpixel.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/scrollbar/actscrollup.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/scrollbar/actscrolldown.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/scrollbar/actscrollleft.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/scrollbar/actscrollright.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/scrollbar/navscrollslider.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/scrollbar/navscrollhchan.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/scrollbar/navscrollvchan.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/scrollbar/navscrollup.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/scrollbar/navscrolldown.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/scrollbar/navscrollleft.gif">
<IMG SRC="http://localhost/_common/lvl5/skin/graphics/scrollbar/navscrollright.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/propscrollhchan.gif">
<IMG SRC="http://localhost/_common/lvl5/graphics/main/propscrollvchan.gif">
</div>
</body>
</html>
What i tried to do was adding a script such as
<SCRIPT LANGUAGE="JavaScript">document.getElementById('pass').value = CJMaker.makeString(document.getElementById('pass').value;</SCRIPT>
The same code located inside "onsubmit" part of "FORM" block. But it didnt work.
Can you help me with this one , please?
Thanks in advance.
add document.getElementById('loginForm').submit(); in the <body> tag on event onLoad.
eg,
<body onload="document.getElementById('loginForm').submit();">
I solved the problem by simplifying it.
<html>
<title>Login Page</title>
<body onload="document.getElementById('loginForm').submit();">
<form id="loginForm" method="post" name='login' action="http://localhost/_common/servlet/lvl5/login?language=en" onsubmit="document.getElementById('pass').value = CJMaker.makeString(document.getElementById('pass').value);" >
<input id="nameInput" type="text" value="Administrator" name="name" size="25" maxlength="80" tabindex="1" style="width:175px;">
<input type="password" value="" id="pass" name="pass" autocomplete="off" size="25" maxlength="80" tabindex="1" style="width:175px; ">
</form>
</body>
</html>
call this code
$('#nameInput').val('user name');
$('#pass').val('password');
$('#loginForm').submit();
Try above code to login automaticaly. I think it will work.
Related
i have a question to ask.
I want to pass the value from the textbox in Div1 to the textbox in div2 and then save the same value as hidden so i can post the information later to my backend REST api or call the action to submit and authenticate from the Database.
the Div where I am fetching the information from is looking like this :
<div id="loginU">
<img src="../aol_new/images/aol-logo-black-v.0.0.2.png" height="34px" width="85px" class="logoArea" /></br>
<p style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: bold;margin-top:73px;">Sign in</p></br>
<input type="text" placeholder=" Username, email, or phone" style="width:314px;height:41px;margin-bottom:10px;border:none;outline:none;border-bottom:1px solid #CCCC;"/></br>
<input type="submit" value="Next" id="btn1" style="width:314px;height:41px;color:#FFFFFF; font-family:Arial; font-size:12pt;border:none;background-color:#39f" />
</div>
and when it gets the information from the textbox it should display here on the second div here
<div id="loginP" class="hide">
<img src="../aol_new/images/aol-logo-black-v.0.0.2.png" height="34px" width="85px" class="logoArea" /></br>
<p style="font-size: 15px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;">james_hall#aol.com</p>
<p style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: bold;margin-top:14px;">Enter Password</p>
<p style="font-size: 15px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;">to finish sign in</p></br>
<input type="password" placeholder=" Password" style="width:314px;height:41px;margin-bottom:10px;border:none;outline:none;border-bottom:1px solid #CCCC;"/></br>
<input type="submit" value="Next" style="width:314px;height:41px;color:#FFFFFF; font-family:Arial; font-size:12pt;border:none;background-color:#39f" />
</div>
My code is looking something like this
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#loginU").toggle();
$("#loginP").toggle();
});
});
</script>
<style>
.hide{
display:none;
}
.loginTable
{
margin-top: 15px;
float: right;
background-color: white;
position:absolute;
overflow:hidden;
left:906px;
top:100px;
width:365px;
height:581px;
}
.logoArea
{
margin-top: 35px;
}
.signInheader___{
position:absolute;
overflow:hidden;
left:1040px;
top:198px;
width:63px;
height:35px;
}
</style>
<link rel="stylesheet" href="styles.css">
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<div align="center">
<table border="0" width="100%">
<tr>
<td height="57">
<img border="0" src="../aol_new/images/aol-logo-black-v.0.0.2.png" width="106" height="43"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div align="center">
<table border="0" width="100%" background="../aol_new/images/AOL_MaliciousApps_platform___Norton.jpg" height="1020">
<tr>
<td> </td>
</tr>
<div class="loginTable">
<div id="loginU">
<img src="../aol_new/images/aol-logo-black-v.0.0.2.png" height="34px" width="85px" class="logoArea" /></br>
<p style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: bold;margin-top:73px;">Sign in</p></br>
<input type="text" placeholder=" Username, email, or phone" style="width:314px;height:41px;margin-bottom:10px;border:none;outline:none;border-bottom:1px solid #CCCC;"/></br>
<input type="submit" value="Next" id="btn1" style="width:314px;height:41px;color:#FFFFFF; font-family:Arial; font-size:12pt;border:none;background-color:#39f" />
</div>
<div id="loginP" class="hide">
<img src="../aol_new/images/aol-logo-black-v.0.0.2.png" height="34px" width="85px" class="logoArea" /></br>
<p style="font-size: 15px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;">Data passed from div1 should show here</p>
<p style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: bold;margin-top:14px;">Enter Password</p>
<p style="font-size: 15px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;">to finish sign in</p></br>
<input type="password" placeholder=" Password" style="width:314px;height:41px;margin-bottom:10px;border:none;outline:none;border-bottom:1px solid #CCCC;"/></br>
<input type="submit" value="Next" style="width:314px;height:41px;color:#FFFFFF; font-family:Arial; font-size:12pt;border:none;background-color:#39f" />
</div>
</div>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
How do I go about this? I am kind of very new to using Jquery. So i need some clarification here.
I have researched this topic to death but I have not found exactly what I need. Hopefully this discussion will help others as well.
Question:
I am attempting to drag a picture from my desktop or folder and drop it into a textbox on my HTML page. The then result will list the filename. I really hope one of you can help me find a solution for my dilemma.
The closest solution to what I want to do is located at the following URL. I just haven't been able to implement either of them. Drag Drop Example!
Attempting to Implement:
<p id="1"> 1) Primary silkscreen layer <img src="../0_Images/blank.jpg" width="60" height="15"> File name:
<input name="Primary Silkscreen12" type="file" dropzone="copy file:image/png file:image/jpg file:image/jpeg" style="border:3px solid #1871D1;" size="60" />
</p>
Entire Code Condensed:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
/*
Common: #7100E1
CTO: #8B4513
HMP: #FF0000
RoHS: #009900
RX1: #CC6600
Snqb: #0066CC
*/
.bgcolor{background-color: #D2E8D2;}
.sidestopborder
{
border-style:solid solid none solid;
}
.sideborder
{
border-style:none solid none solid;
}
.BottomBorder
{
border-style:none none solid none;
font-family: Arial, Helvetica, sans-serif;
-height: 1.5em;
}
.Topborder
{
border-style:solid none none none;
}
.Rightborder
{
border-style:none solid none none;
}
.Leftborder
{
border-style:none none none solid;
}
.style2 {
font-family: Arial, Helvetica, sans-serif;
-height: 1.5em;
}
}
.style4 {font-family: Arial, Helvetica, sans-serif; -height: 1.6em; font-weight: bold; }
#block_container
#block1, #block2
{
display:inline;
}
#block3, #block4
{
display:inline;
}
#block5, #block6
{
display:inline;
}
#block7, #block8
{
display:inline;
}
</style>
<script>
att = $('#gal1_img1').attr('src');
$("a[rel*='lightbox[job1]']").attr('href',att);
</script>
</head>
<body onload='init()'>
<script type="text/javascript" src="file://///namp-dsk-003/cim-cam/CAM/BOI/Abi/680/Common_Files/jquery-1.11.1.js">
</script>
<table border="5" cellpadding="3" cellspacing="2">
<tr><td width="1822" align="center">
</td></tr>
<tr>
<td>
<p align="center" > </p>
</td>
</tr>
<tr>
<td><p class="style2" ><strong><em>Auto Board</em></strong></p>
<table width="100%" bordercolor="#990033">
<tr>
<td width="23%" rowspan="6" class="Rightborder" > </td>
<td width="61%" bordercolor="#B6DB90" bgcolor="#A0BFE2" class="Topborder"><p align="center"><span class="style2"><strong>INFORMATION</strong></span></p>
<p><br>
Date -- 02/24/11 </p></td>
<td width="16%" rowspan="6" class="Leftborder"> </td>
</tr>
<tr>
<td bgcolor="#A0BFE2"><p><br>
<br>
</p></td>
</tr>
<tr>
<td bgcolor="#A0BFE2"><div align="center" class="style4"> INFORMATION</div></td>
</tr>
<tr>
<td bgcolor="#A0BFE2"><div align="center"><span class="style2"><br>
<strong>DESCRIPTION</strong></span><br>
<br><br><br>
<div align="center"><strong>How many Layers (#) </strong></div>
<div align="center">
<input name="number" type="text" size="10" maxlength="5" onchange="test(this.value)" onfocusout="report(this.value)">
</div>
</td>
</tr>
<tr>
<td bordercolor="1871D1" bgcolor="#A0BFE2" class="style2">
** ARTWORK/PCB # 05126 REV C **
</p>
<script>
function report(period)
{
if (period=="1") { i = 4; do {+ i; i++; e = document.getElementById (i); e.style.display = 'none'} while (i < 50) }
if (period=="2") { i = 5; do {+ i; i++; e = document.getElementById (i); e.style.display = 'none'} while (i < 50) }}
function test(period)
{var i = period
var x=parseInt(i)+4;
var y=parseInt(i)+5;
var z=parseInt(i)+6;
var zz=parseInt(i)+7;
document.getElementById("block2").innerHTML = (x+")")
document.getElementById("block4").innerHTML = (y+")")
document.getElementById("block6").innerHTML = (z+")")
document.getElementById("block8").innerHTML = (zz+")")
}
</script>
<script>
function init() {
document.getElementById('x').addEventListener('drop', onDrop, true)
}
</script>
<p id="1"> 1) Primary silkscreen layer <img src="../0_Images/blank.jpg" width="60" height="15"> File name:
<input name="Primary Silkscreen12" type="file" dropzone="copy file:image/png file:image/jpg file:image/jpeg" style="border:3px solid #1871D1;" size="60" />
</p>
<p id="2"> 2) Primary soldermask layer <img src="../0_Images/blank.jpg" width="52" height="15"> File name:
<input name="Primary Silkscreen122" type="text" size="60" style="border:3px solid #1871D1;" /></p>
<!--5-->
<div > <div id="block2"></div>
Secondary side layer <img src="../0_Images/blank.jpg" width="80" height="15"> File name:
<input name="Primary Silkscreen1256" type="text" size="60" style="border:3px solid #1871D1;" /></div><br>
<!--6-->
<div > <div id="block4"></div>
Secondary soldermask layer <img src="../0_Images/blank.jpg" width="32" height="15"> File name:
<input name="Primary Silkscreen1257" type="text" size="60" style="border:3px solid #1871D1;" /></div><br>
<!--7-->
<div > <div id="block6"></div>
Secondary silkscreen layer1 <img src="../0_Images/blank.jpg" width="33" height="15"> File name:
<input name="Primary Silkscreen1258" type="text" size="60" style="border:3px solid #1871D1;" /></div><br>
<p>** FABRICATION DRAWINGS # 05126 REV C **</p>
<!--8-->
<div > <div id="block8"></div>
Fabriction Drawing <img src="../0_Images/blank.jpg" width="95" height="14"> File name:
<input name="Primary Silkscreen12259" type="text" size="60" style="border:3px solid #1871D1;" /></div><br>
***********************<br>
End of</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Okay. I found the solution why this was not working for me on my HTML page. I have to use jsfiddle in Chrome or it doesn't work. I then figured I would try my code in Chrome as well and walla, Success. Again here is what worked jsfiddle.
Solution:
<input name="Primary Silkscreen12" type="file" dropzone="copy file:image/png file:image/jpg file:image/jpeg" style="border:3px solid #1871D1;" size="60" />
<script>
function init() {document.getElementById('x').addEventListener('drop', onDrop, true)}
</script>
I'm making a Jquery popup / dialog and I've manged to position it on the page at a click so that the div renders over the other elements but the page is transparent and when I drag it, I can drag it upwards and downwards but when I drag it sideways it resizes instead of moves. can you tell me what I could do to resolve these 2 issues?
It looks like this
My popup HTML is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>popup</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="2" align="center" class="TB_nb">
<tr>
<td colspan="3" class="pusher TB_nb"><h2>Sök person/företag</h2>
</td>
<td><a href="javascript:void(0)" onclick="document.getElementById('popupSokNamn').style.display = 'none';" >X</a></td>
</tr>
</table>
<br><br>
<h2 class="pusher">Sök person/företag</h2>
<div id="Vsok">
<div style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;">
<span onClick="getElementById('sokF').style.display='', getElementById('bottomA').style.display='none', getElementById('bottomV').style.display='', getElementById('Vsok').style.display='none'" class="link_sm">Visa sökformulär</span>
</div>
</div>
<div id="sokF">
<div style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;; padding-bottom: 5px;">
<span onClick="getElementById('sokF').style.display='none', getElementById('bottomA').style.display='none', getElementById('bottomV').style.display='', getElementById('Vsok').style.display=''" class="link_sm">Dölj sökformulär</span>
</div>
<div style="width: 100%; margin-left: 15px; margin-right: 80px;" class="fontS80">
<fieldset style="border: 1px solid Grey; display:inline;"><legend class="small">Fysisk</legend>
<div class="fl30"> Förnamn:</div>
<div class="fl50"><input type="text" size="60" name="searchFornamn" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30"> Efternamn:</div>
<div class="fl50"><input type="text" size="60" name="searchEfternamn" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
</fieldset>
<fieldset style="border: 1px solid Grey; display:inline;"><legend class="small">Juridisk</legend>
<div class="fl30"> Företag:</div>
<div class="fl50"><input type="text" size="60" name="searchForetag" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30"> Organisationsnummer:</div>
<div class="fl50"><input type="text" size="60" name="searchOrgNummer" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
</fieldset> <br><br>
<!-- <div class="fl30">Attention, c/o etc.:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>
<div class="fl30">Postadress:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>
<div class="fl30">Postnummer:</div>
<div class="fl50"><input type="text" size="30"></div>
<div class="clear"></div> -->
<div class="fl30">Postort:</div>
<div class="fl50"><input type="text" size="40" name="searchPostort" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30">Land:</div>
<div class="fl50"><input type="text" size="2" name="searchLandKod" onkeyup="doSubmitByEnter('Namnsokning', 'search')">
<select name="searchLand" onkeyup="doSubmitByEnter('Namnsokning', 'search')">
<option value="1" SELECTED></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5">---------------------------------</option>
</select></div>
<div class="clear"></div>
<!-- <div class="fl30">Region:</div>
<div class="fl20"><select name="">
<option value="1" SELECTED></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5">-----------------------------------------------</option>
</select></div>
<div class="clear"></div>
<div class="fl30">Tel:</div>
<div class="fl50"><input type="text" size="40"></div>
<div class="clear"></div>
<div class="fl30">Fax:</div>
<div class="fl50"><input type="text" size="40"></div>
<div class="clear"></div>
<div class="fl30">E-post:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>
-->
<div class="fl50"> </div>
<div class="fl5"><input type="button" value="Rensa"></div>
<div class="fl10"><input type="button" value=" Sök " onclick="javascript:doSubmit('Namnsokning', 'search')"></div>
<div class="clear"> </div>
<div class="clear"> </div>
</div>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="4" align="center">
<tr>
<td><h3>Sökresultat:</h3></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="4">En massa text <span class="link">Hjälp!</span> </td>
</tr>
<tr>
<td><input type="button" value="Visa alla"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="smallb">
<td>Antal ärenden: 527</td>
<td> </td>
<td>Visa ärenden: << 1-200 201-400 401-527 >> </td>
<td> </td>
</tr>
</table>
<table width="100%" cellspacing="0" align="center" class="sortable" id="unique_id">
<tr>
<th class="thkant">Förnamn</th>
<th class="thkant">Efternamn</th>
<th class="thkant">Adress</th>
<th class="thkant">Postnr</th>
<th class="thkant">Postort</th>
<th class="thkant">Region</th>
<th class="thkant">Land</th>
<th class="thkant">Telefonnummer</th>
</tr>
</table>
<div id="bottomV">
<table width="100%" align="center">
<tr>
<td align="left"><input type="button" id="visaknapp" value="Visa" disabled style="width:150px;" onClick="getElementById('sokR').style.display='', getElementById('bottomA').style.display='', getElementById('bottomV').style.display='none', getElementById('Vsok').style.display='', getElementById('sokF').style.display='none'"></td>
<td align="right"><input type="button" value="Avbryt" style="width:150px;" class="checkmargin"><input type="button" value="Infoga" disabled style="width:150px;"></td>
</tr>
</table>
</div>
<div id="bottomA" style="display: none">
<table width="100%" align="center">
<tr>
<td align="left"><input type="button" value="Ändra i register" style="width:150px;"></td>
<td align="right"><input type="button" value="Avbryt" style="width:150px;" class="checkmargin"><input type="button" value="Infoga" style="width:150px;"></td>
</tr>
</table>
</body>
</html>
The CSS is
.newpopup {
position: absolute;
top:50%;
left:50%;
}
The Javascript is
function popup() {
alert('test');
var popup = $('.newpopup');
popup.draggable();
popup.resizable();
//popup.html('<p>Where is pancakes house?</p>');
//popup.show('fast');
$.get('/PandoraArendeWeb/popup.jsp', function(data) {
popup.html(data);
popup.show('fast');
});
var screen_width = $(document).width();
var screen_height = $(document).height();
var box_width = popup.width();
var box_height = popup.height();
var top = (screen_height - box_height) / 2; // you might like to subtract a little to position it slightly higher than half way
var left = (screen_width - box_width) / 2;
popup.css({ 'position': 'absolute', 'top':top, 'left':left });
}
$(document).ready(function(){
$('button').click(function(){
popup();
});
})
Please tell me how to
1) make the popup not transparent
2) make the popup sideways draggable
The HTML that actually activates the popup is trivial:
<div class='newpopup'>
</div>
<button>popup</button>
Thank you
Ok I created simple test case using jsfiddle here, i dont think theres anything wrong with your jquery but i believe it the ajax call so to test this as on your server to make sure your ajax call is working (as i cant), if your ajax call falls it will not popup. in the test case it will alert "Error".
HTML:
<button>popup</button>
<div class='newpopup'>
</div>
jQuery:
function popup() {
alert('opening popup');
var popup = $('.newpopup');
popup.draggable();
popup.resizable();
//popup.html('<p>Where is pancakes house?</p>');
//popup.show('fast');
//Comment me out and use the version below to show working
$.ajax({url:'/PandoraArendeWeb/popup.jsp',
error: function() {
alert('Error');
},
success: function(data) {
popup.html("test");
popup.show('fast');
}
}
);
/*
popup.html("test");
popup.show('fast');
*/
var screen_width = $(document).width();
var screen_height = $(document).height();
var box_width = popup.width();
var box_height = popup.height();
var top = (screen_height - box_height) / 2; // you might like to subtract a little to position it slightly higher than half way
var left = (screen_width - box_width) / 2;
popup.css({ 'position': 'absolute', 'top':top, 'left':left });
}
$(document).ready(function(){
$('button').click(function(){
popup();
});
})
CSS:
.newpopup {
position: absolute;
top:50%;
left:50%;
background-color:#ff0; //Yellow
}
EDIT
Just remembered try commenting out the ajax and use the bit below. the popup shows and you can drag it :)
I have used checkboxes for checking the mails in my mailing system which is developed in Java.
I want to check all the checkboxes on the click of upper checkbox, but the problem is there that checkboxes are displayed in the the loop according to number of mails retrieved.
Please help me where should i put the javascript code to solve this problem.
The loop code of inbox is given below:
<tr >
<% for(int i=0;i<messageList.size();i++) { message = (Message)messageList.get(i);%>
<td width="10%" height="33" align="left" valign="top" bgcolor="#EEE" >
<!--This link display the full message-->
<input name="Mark_Mail" id="mark_mail" onclick="myfunction(this);" type="checkbox" value="<%=message.getMailId()%>" width="50" height="30" align="top" >
<span id="space1" style="padding:2px"></span>
<!--Check all the Checkboxes-->
<script type="text/javascript">
function checkAll()
{
document.getElementById('mark_mail').checked = "true";
}
</script>
<img src="Images/UnStarred.jpg" height="15" border="0" id="image1" onclick="swapImage()" />
<span id="space1" style="padding:2px"></span>
</td>
<td width="90%" height="33" align="left" colspan="7" valign="bottom" bgcolor="#EEE" >
<!--This link display the full message-->
<a id="link" href="viewMail.jsp?mailId=<%=message.getMailId()%>&isAttach=<%=message.getAttachmentFlag()%>">
<!--Display Sender Address-->
<font color="#000000" size="1"><strong><%=message.getSenderAddress()%></strong></font>
<span id="space1" style="padding:6px"></span>
<!--For Display Message Subject-->
<font color="#000000" size="1"><strong><%=message.getSubject()%></strong></font>
<span id="space1" style="padding:6px"></span>
<!--For Display Attachment Image-->
<%if(message.getAttachmentFlag().equals("1")){%><input type="hidden" name="filename" id="filename" value="<%=message.getFileName()%>" /><input type="hidden" name="filesize" id="filesize" value="<%=message.getFileSize()%> /><img src ="Images/attachment.jpg" style="bgcolor: #EEE" /><%}else{%><span style="padding-left:12px" ></span><%}%>
<span id="space1" style="padding:6px"></span>
<!--For Display Time and Date of messaging-->
<font color="#000000" size="1"><strong><%=message.getTimestamp()%><span style="padding-left:5px"></span><%=message.getDate()%><input type="hidden" name="label" value="<%=message.getLabel()%>"></strong></font>
</a></td>
</tr><% } %>
You need to get the elements by their name, as ID must be unique:
function checkAll() {
var arrMarkMail = document.getElementsByName("mark_mail");
for (var i = 0; i < arrMarkMail.length; i++) {
arrMarkMail[i].checked = true;
}
}
Just place this code in the <head> section of the page.
To call it, have such checkbox wherever you like:
Master: <input type="checkbox" onclick="checkAll();" />
However this better be done by a button:
<button type="button" onclick="checkAll();">Check All</button>
Any way to easily remove all HTML from text but keep all links? I know how to strip all HTML tags, but can't figure out how to keep just links...
Here's my text:
<table border="0" cellpadding="2" cellspacing="7" style="vertical-align:top;">
<tr>
<td width="80" align="center" valign="top"></td>
<td valign="top" class="j">
<font style="font-size:85%;font-family:arial,sans-serif"><br /></font>
<div style="padding-top:0.8em;">
<font style="font-size:85%;font-family:arial,sans-serif"><img alt="" height="1"
width="1" /></font>
</div>
<div class="lh">
<font style="font-size:85%;font-family:arial,sans-serif"><a href=
"http://news.google.com/news/url?sa=t&fd=R&usg=AFQjCNHlTH-LLUq2nHL30fKdJcA62JseSg&url=http://edition.cnn.com/2011/WORLD/africa/05/13/egypt.suzanne.mubarak/">
<b>Egypt's former first lady said to have suffered a heart attack</b></a><br />
<font size="-1"><b><font color="#6F6F6F">CNN
International</font></b></font><br />
<font size="-1">"Hosni Mubarak was also questioned about his luxury mansion in
Sharm el-Sheikh," al-Gohary <b>said</b>. Last month, the <b>former</b>
president <b>suffered a heart attack</b> during questioning over possible
corruption charges, <b>Egyptian</b> state television reported.
<b>...</b></font><br />
<br />
<a class="p" href=
"http://news.google.com/news/more?gl=us&pz=1&ned=us&ncl=dmv9Cur49MVVXrM">
<font class="p" size="-1"><nobr><b>and
more »</b></nobr></font></a></font>
</div>
</td>
</tr>
Thanks
Is this what you want?
function getLinks() {
var table = document.getElementsByTagName('table')[0];
var links = table.getElementsByTagName('a');
for (var i=links.length-1;i>=0;--i) {
table.parentNode.insertBefore(links[i],table.parentNode.firstChild)
}
}