|
JavaScript - On Click Open Form Box
Hello
How to Make a Html Form Shows Up when Visitor Click a Link .. I have seen Site where you want to add Message u click Link then the Form under the Link Shows Up .. it stays Hidden unless Visitor Click Link 'Send Message' . It seems done by Java but How .. Similar TutorialsHi all, I am looking for this javascript, script that when I click a specific link 1. Opens a new window 2. Specifies a specitic window title 3. Load an image on it (there will be no text but only an image shown) Could you please help me understand how I do that? Regards Alex Hi I wrote following code for the purpose to single right click to open new window, while left click would open another window. It works for IE but does not work for Firefox. Please help. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US|zh-Hans|zh-Hant"> <head> <title>Javascript Question</title> <META NAME="LANGUAGE" CONTENT="en"> <META NAME="DOCUMENTCOUNTRYCODE" CONTENT="us"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=GB18030"> <script language='Javascript' type='text/javascript'> var rightClick = false; window.document.oncontextmenu = new Function("return false"); window.document.onmouseup = mouseUp; function mouseUp(e) { if (!e) var e = window.event; if (e.which) rightClick = (e.which == 3) else if (e.button) rightClick = (e.button == 2); if (rightClick) window.open('http://www.yahoo.com/'); } </script> </head> <body> <a href="#" onclick="window.open('http://www.google.com/')" onmouseup>Open New Window</a> </body> </html> Ok, first let me explain what I try to do. I have a menu with some items containing a submenu. The submenu's should open when a parent is clicked and contains submenu's, and when traveling to another page (from the item clicked, for example a parent of submenu item), the submenu should remain active and visible. When I click on a parent (at the moment the hrefs contain no links just #), the submenu opens. But when I click another main item, the submenu of the previous parent remain visible, and the submenu of the parent just clicked is also visible, while I only want the submenu of the parent clicked to be visible or when parent with no submenu the submenu should be invisible. So, here is the code I have so far: Code: <div id="topnav">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="#">Over Meves</a>
<ul class="submenu">
<li><a href="#" class="suba">Historie</a></li>
<li><a href="#" class="suba">Onze mensen</a></li>
<li><a href="#" class="suba">Werkzijze</a></li>
</ul>
</li>
<li>
<a href="vervolg3.html">Disciplines</a>
<ul class="submenu">
<li><a href="vervolg.html" class="suba">Klimaatbeheersing</a></li>
<li><a href="#" class="suba">Elektrotechniek</a></li>
<li><a href="#" class="suba">Sanitaire techniek</a></li>
<li><a href="#" class="suba">Energiebesparingstechniek</a></li>
<li><a href="#" class="suba">Bouwfysica en geluid</a></li>
<li><a href="#" class="suba">Diensten energiebesparing</a></li>
</ul>
</li>
<li>
<a href="#">Expertise</a>
<ul class="submenu">
<li><a href="#" class="suba">Woningbouw & Utiliteit</a></li>
<li><a href="#" class="suba">Zorg & Welzijn</a></li>
<li><a href="#" class="suba">Milieu & Energie</a></li>
<li><a href="#" class="suba">Beheer & Onderhoud</a></li>
<li><a href="#" class="suba">EPA & EPC</a></li>
<li><a href="#" class="suba">Legionella beheersing</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
<ul class="submenu">
<li><a href="#" class="suba">Adres & route</a></li>
<li><a href="#" class="suba">Werken bij</a></li>
</ul>
</li>
</ul>
</div>
The javascript: Code: <script type="text/javascript">
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_close();
ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
}
function jsddm_close()
{
if(ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function()
{
$('#topnav > ul > li').bind('click', jsddm_open)
$('#topnav ul li a.suba').click(function(e){
if ($(this).attr('class') != 'active'){
$('#topnav ul li a.suba').removeClass('active');
$(this).addClass('active');
}
});
$("ul.submenu > li > a").each(function () {
var currentURL = document.location.href;
var thisURL = $(this).attr("href");
if (currentURL.indexOf(thisURL) != -1) {
$(this).parents("ul.submenu").css('display', 'block');
}
});
$('a').each(function () {
var currentURL = document.location.href;
var thisURL = $(this).attr('href');
if (currentURL = thisURL) {
$(this).parents('ul.submenu').css('display', 'block');
}
// else {
// $(this).parents('ul.submenu').css('display', 'none');
// }
});
});
</script>
And the css: Code: #topnav ul
{
list-style: none;
padding: 0;
margin: 0;
}
#topnav ul li
{
float: left;
margin: 0;
padding: 0;
}
#topnav ul li a
{
padding: 5px 15px;
color: #00537F;
text-decoration: none;
display: block;
font-weight: bold;
}
#topnav ul li a:link
{
color: #FFF;
text-decoration: none;
}
#topnav ul li a:visited
{
color: #FFF;
text-decoration: none;
}
#topnav ul li a:hover
{
color: #FFF;
text-decoration: underline;
}
#topnav ul li a.active
{
text-decoration: underline;
color: #FFF;
}
/*#topnav ul li:hover .submenu
{
display:block;
}*/
#topnav ul li ul.submenu
{
float: left;
padding: 4px 0;
position: absolute;
left: 0;
top: 24px;
display: none;
background: #e0e0e0;
color: #00537F;
}
#topnav ul li ul.submenu a
{
display: inline;
color: #00537F;
padding: 4px 8px;
}
#topnav ul li ul.submenu li
{
border-right-width: 1px;
border-right-style: solid;
border-right-color: #00537F;
}
#topnav ul li ul.submenu li:last-child
{
border-right-style: none;
}
#topnav ul li ul.submenu a:link
{
color: #00537F;
}
#topnav ul li ul.submenu a:visited
{
color: #00537F;
}
#topnav ul li ul.submenu a:hover
{
text-decoration: underline;
color: #00537F;
}
#topnav ul li ul.submenu li.active
{
text-decoration: underline;
color: #00537F;
}
#topnav ul li ul.submenu a.active
{
text-decoration: underline;
color: #00537F;
}
Hope I explained it clear. Thanks for any help. I have a map with hotspots, and when you hover over a hot spot, a hidden DIV appears. Thanks to my favorite coding forum, this one, I was able to successfully accomplish this first bit of code. The only problem I'm having now is getting the DIV to remain open while I move my mouse from the hotspot to the DIV. As soon as I move my mouse away from the hotspot, the DIV disappears. I need to put links in the DIVs, and users will need to be able to move their mouse away from the hotspot to click on the link, but currently can't. I experimented with setTimeout, but didn't get too far. If anyone could help me, I'd appreciate it. I really need to get this working. Code: <img src="images/map.png" alt="" usemap="#map"/> <map id="map" name="map"> <area shape="rect" coords="211,84,225,97" href="#" alt=""/> <area shape="rect" coords="226,78,240,92" href="#" alt=""/> <area shape="rect" coords="353,66,376,89" href="#" alt=""/> </map> <div id="hidden"> <div class="location" style="left:25px; top:-290px;"> <img src="images/location01.jpg" alt=""/> </div> <div class="location" style="left:25px; top:-275px;"> <img src="images/location02.jpg" alt=""/> </div> <div class="location" style="left:275px; top:-285px;"> <img src="images/location03.jpg" alt=""/> </div> </div> <!-- #hidden --> Code: function show(which) {
var area = document.getElementById("map").getElementsByTagName("area");
var locations = document.getElementById("hidden").getElementsByTagName("div");
for (var a=0; a < area.length; ++a) {
if(area[a] == which) locations[a].style.display="block";
}
}
function hide() {
var locations = document.getElementById("hidden").getElementsByTagName("div");
for (var d=0; d < locations.length; ++d) {
locations[d].style.display="none";
}
}
function init() {
var area = document.getElementById("map").getElementsByTagName("area");
for (var a=0; a < area.length; ++a) {
area[a].onmouseover = function() { show(this); }
area[a].onmouseout = hide;
}
}
window.onload = init;
Hello there. I'm using Joomla 1.5 and VirtueMart for my e-shop. I've also installed a virtuemart template which loads mootools. Well in my virtuemart product detail pages, if you click the main image to make it enlarged using IE8 it will not open and return a JS error instead (found it using Firebug): http://goo.gl/6lQCV Code: Message: 'closeButton' is null or not an object Line: 21 Char: 63 Code: 0 URI: http://www.xxxxx.xxx/media/system/js/mootools.js I'm not sure but I think that if I fix the JS errors on these pages the problem will be solved and the images will open normally. Note that on all other browsers it works fine (Firefox, Chrome, Safari, IE9). The page returns some other errors too but they're the whole time there. I think there's a conflict caused by all the JS libraries loaded by my Plugins (System - RokBox & YOOeffects), Joomla template, VirtueMart & VirtueMart template (jquery and mootools are both loaded). Thanks in advance hey guys i dont know if this is javascript or not but i need text in a message body form to instruct people what to write about and then i need it to dissappear once the user clicks into it heres the link, http://www.blusmash.com/test The "Message" text box need to have stuff in it thanks! I'm trying to figure out how to both make the text grey and when a user clicks inside a input field remove the helptext. So far I got this: Code: <input onfocus="this.select()" onblur="this.value=!this.value?'E-mail here':this.value;" name="name" value="E-mail here" type="text"> What this does is allmost correct, but it doesnt remove the predefined text "E-mail here", it just select it all, and then the text is not grey... Can somebody please guide me in the right direction... Thanks in advance! Hello! I am trying to make a form, with different options and, upon hitting submit, a new page will open with the created URL. for example: 1) Enter the URL: user enters: http://www.supertown.com 2) Enter the city: user enters: Chico 3) Enter the state: user enters: CA [SUBMIT] Then the following window opens: http://www.supertown.com?city=Chico&state=CA Ive been trying to figure this out for over an hour...AHH! I have a page with a form on it and a button that opens a new window for them to verify the data. What happens is that when the window opens, the form gets cleared out. This is with FireFox (IE has issues too!) Now this code has actually work fine for several years, now all of a sudden it's an issue. Possibly browser update issues? Here's a VERY stripped down version that shows the problem: Code: <HTML>
<HEAD>
<TITLE>Test</TITLE>
<script language="JavaScript" type="text/javascript">
function Proc_Reg(frm)
{
window.open("","","status=1,menubar=1,resizable=1,scrollbars=1,width=900,height=800");
}
</script>
</HEAD>
<BODY>
test
<form name=RegForm >
<TABLE>
<TR><TD><font color = "RED">PLEASE MAKE SURE YOUR BROWSER'S SECURITY SETTINGS ALLOW SCRIPTS TO RUN.</font></TD></TR></TABLE>
<BR><BR>
<font size=7>BCU Festival Registration</font><BR><center>Event Date: September 11, 2011</center>
<HR>
<table>
<tbody>
<tr><td><FONT FACE="BRITANNIC BOLD" size=4>
Name:</font></td><td>
<input title="What is Your Name?" name="FullName" rows="1" size="45" type="text">
</td></tr>
</tbody></table>
</form>
<A HREF="" OnClick="javascript:Proc_Reg(RegForm);">Click</A>
</BODY>
</HTML>
Ideas??? i am new to sencha touch,and i created a login form which accepts user id and password and a login button,so when i click on login button i should get the user id value as a alert.and the code is Code: Ext.setup ({
onReady: function () {
var myform=new Ext.form.FormPanel({
id:'form',
fullscreen:true,
standardSubmit:true,
dockedItems:[{
Dock:'top',
xtype:'toolbar',
height:40,
title:'Tool Bar',
id:'login',
}
],
items:[{
xtype:'textfield',
name:'id',
width:'50%',
align:'center',
label:'User Id'
},
{
xtype:'textfield',
name:'pwd',
id:'pwd',
width:'50%',
align:'center',
label:'Password'
},
{
xtype:'button',
ui:'round',
width:'50%',
text:'Login',
align:'center',
handler:function()
{
gettingvalues();/* var fields = form.getValues();
console.log(fields['name']); */
}
}
],
});
gettingvalues=function()
{
var fields=myform.getValues();
Ext.Msg.alert(fields['id'].getValue());
}
}
});
But am not getting any value in alert,what i have to do. and after that i want to send those values to our local server which requires id and password,it will be in the format of... oururl?action=login&id=xyz&pwd=xyz, in this it will accepts and returns the response,so for that what i have to write, please let me know as soon as possible. Thanks in advance. Hello I am trying to create a form which when the submit button is selected will open a new window with 1 of 4 URLs based on the the combination of data in 2 select boxes. For example: if select box 1 = a and select box 2 = a then open new window with URL 1 if select box 1 = a and select box 2 = b then open new window with URL 2 if select box 1 = b and select box 2 = a then open new window with URL 3 if select box 1 = b and select box 2 = b then open new window with URL 4 Any help would be greatly appreciated. Thanks Daniel Hi, I want to restrict opening my popup window if it is already opened. For simple scenario, it is quite possible to do but in my case -- 1) When parent page is opening popup window, it is getting refreshed (required from client for some reason). 2) Once submit button is clicked from popup window, again parent page is getting refreshed (again its a requirement from client side). With these 2 conditions, I lost my saved value from variable and hence new popup is keep coming when the action is same. Currently I am using below code to open popup [CODE] function OpenWindow() { if(winPop && !winPop.closed) { alert("Popup is already open"); } else { winPop = window.open('MyPopupPage.aspx'); } } [CODE] Please help me to get rid of this problem. Thanks in advance. - Bhasker Ok know those people who are in the bad habit of double clicking everything? Well my site breaks if they double click it... is there a script I can use that won't let my functions run more then once every so many seconds? to avoid double clicking errors? I do write some php, but have not much idea about JavaScript. I use window.open to open 10 pages simultaneously. I prefer to open them with a time delay from each other to put less load on the target server. This is my code with no delay. (I played around with setTimeout but can't get it to work.) PHP Code: <a href='http://www.".$new[9]."' onclick="window.open('http://www.".$new[0]."/'); window.open('http://www.".$new[1]."/'); window.open('http://www.".$new[2]."/'); window.open('http://www.".$new[3]."/'); window.open('http://www.".$new[4]."/'); window.open('http://www.".$new[5]."/'); window.open('http://www.".$new[6]."/'); window.open('http://www.".$new[7]."/'); window.open('http://www.".$new[8]."/')\" target='new300/'>Open 10</a> Hey guys just need a little help. I need to create a little script that clicks a link automatically and opens it up in a new page. So far I have this: Code: <head>
<script>
function autoClick(){
document.getElementById('linkToClick').click();
}
</head>
<body onload="setTimeout('autoClick();',3000);">
<a id="linkToClick" href="http://www.google.com" rel="nofollow" target="_blank">GOOGLE</a>
</body>
It works but the problem is that IE popup blocker keeps blocking the new window. Is there a way to do the same thing with javascript without it having blocked by IE popup blocker? need to make "left click" act as "middle click" -------------------------------------------------------------------------------- I need to make "left click" act as "middle click" for a web site ....thank you in advance for any and all help... [CODE] <script language="javascript"> function Click(4) { if (event.button==0; 1; ) } document.onmousedown </script>> Hi I have created the following effects on the images seen here http://techavid.com/design/test3.html . You see when you hover and then click on each image, they go from grey to color. When you click on one - the others go grey and the one clicked remains color. That's cool, but now I need the text 1st: Sun for example to display and hide along with its graphic button. The word "Sun," is a link that needs to link out to a URL so it has to be separated from the image effect code. Here code I have now.... Code:
<style type="text/css" media="screen">
#wrapper {
background: url('_assets/images/sun-inactive.p') no-repeat #777eee;
width: 470px;
margin: 0 auto;
}
a#sun{
background: url('_assets/images/sun-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#sun:hover,
a#sun.active {
background: url('_assets/images/sun.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#plane {
background: url('_assets/images/plane-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#plane:hover,
a#plane.active {
background: url('_assets/images/plane.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#nano {
background: url('_assets/images/nano-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#nano:hover,
a#nano.active {
background: url('_assets/images/nano.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
#popuptext {
float: left;
margin: -30px 0 0 0;
padding: 0 0 0 0px;
font-size: 11px;
}
#popuptext a {
color: #ff6600;
padding: 0 30px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<a id="sun" href="#"></a>
<a id="plane" href="#"></a>
<a id="nano" href="#"></a>
</div>
<div style="clear:both"></div>
<div id="popuptext">1st: <a href="#">Sun</a>
2nd: <a href="#">Airplane</a>
3rd: <a href="#">Nano</a>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// target each link in the navigation div
$('#navigation a').click(function() {
// link that you clicked
clicked = $(this).attr('id');
// make sure that all the others are not active
// except for the clicked one
$('#navigation a').each(function() {
if ($(this).attr('id') == clicked) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
// prevent the default link action
return false;
});
});
</script>
What jquery or javascript code do I need to do this? thanks, chaser window.open() doesn't open an entirely new window in FF3.6, just a new tab suggestions? Edit: Yeah, ok, so if i specify a size smaller than the current standard window, it'll be forced to open a new window. but what if i want a new standard sized window to open entirely? and in any case, i wan t amore direct solution where possible, thanks. How would you specify when user right clicks?
|
|||||||