|
HTML - Onclick/onfocus Problem
Hi,
First off, I can't post a link to the site. The issue exists on a private intranet. Our boss requested business process diagrams from all departments done in Visio. He then discovered that the diagrams could be 'Save(d) as a Web page' from within Visio. As the webmaster, I was asked to convert all Visio diagrams to .htms, post them to the site and create functionality so if someone clicked one of the figures within the .htm process diagram a small window would pop with a two-cell table. Easy enough...the top cell shows 'Previous << Step # >> Next' with previous/next linked to instructions corresponding to the earlier or later figures on the diagram; the lower cell describes the process step. As you'd expect, clicking previous or next takes you to the respective instructions corresponding to the previous or next step. Getting this working to this point was not a problem...here's the problem: 1) Using 'onclick,' when a user hovers over a figure on the .htm page and clicks, a small window pops. 2) If the user then clicks again on the diagram (not either the previous or next links), then the small instructions window hides itself behind the diagram window. (The only benefit to this is that if the user clicks a different figure from the diagram than the one for the instructions currently shown, the instructions window changes to the instructions of the newly clicked figure.) 3) If I add 'onfocus' to keep the small window on top, the instructions window does not go away, but it also does not change to the new instructions if the user clicks a new figure from the diagram. Without javascript, I'd like for the small instruction window to stay 'Always on top,' and for the content in the small window to change when the user clicks a different figure from the .htm diagram page. Any suggestions? Similar TutorialsHello everyone, I'm new here. I have this parameters already set in the code: onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" how to add 1 more parameter to each, I dont know coding rules, i need to add this. onblur="_removeclass(this, 'search-term-focus')" onfocus="_addclass(this, 'search-term-focus')" Good day everyone. For my job, I've been tasked to create a page with some images on it. When you put your mouse over one images, it is suppose to open a web page, an other document or an other images in a popup window, and the popup should close itself when you remove your cursor from over the image. Also, if you click on the image, the popup should stay open, so you can get more information and browse the page if you want... I have some basic knowledge of HTML but I consider myself a beginner, and I can't see how to solve this problem. I'm using dreamweaver 8 to do my pages. I also have access to firework if more fancy images techniques are required.. I tried the following basic code: <body> <a target="_blank" href="http://www.google.com/" onmouseover="window.open(this.href, 'popupwindow', 'width=400, height=300, scrollbar, resizable'); return false;">Example</a> </body> But the problem is that the popup pages open corretly but I don't know how to make it close. Also, I'm like it to be a hotspot on an image, and not just a word... If I can please have some advice on how to do this, it would be very appreciated! Hi All Background: A Popcorn Hour is a NMT that allows one to view just about any movie file types .. easily on ones TV set. You install a hard drive in the Popcorn, ... then copy over some movie avi's. mkv's, etc ... then play them via the Popcorns "Text Only" menu system. But, I was able to figure out how to use a program called Movie Collector to enter info about ones movies, .. then export html gui menu files over to the Popcorn. Now the user can see the movie cover of each movies, along with a detailed description of the movie, then play it using the remote control. Here's an example of the html menu files that get copied over to the Popcorn Hour: http://www.treasure-cove.net/jukeboxtestdrive and my webpage for showing how it's done... http://www.treasure-cove.net/moviejukebox.htm The Popcorn runs Linux, and can run some basic html as well as some java ... but not much Java Support: http://www.networkedmediatank.com/wi...ascript_on_NMT HTML: http://www.networkedmediatank.com/wi..._Documentation As you can see, it's very limited in what it can do html/java-wise. There are 2 things I'd like to add to "My Lil Movie Jukebox", but haven't been able to figure out, ... and wondered if any other members might know a way to accomplish these changes ... Here's how the menu screen looks on your TV (when a movie is onfocus, it has a very small yellow line around the cover, which is hard to see) and here's how I would like it to look: There are 2 changes I'd like to make: 1. When you use the remote, whichever movie cover is "onfocus", .. it expands out in size (without displacing any of the other covers) 2. Whichever movie cover is onfocus, ... the title of that movie is displayed at the top of the page. (but the page scrolls up ) If any of the forums html/java gurus knows how to accomplish anything close to this, .. I sure would appreciate any help given,... or maybe you know of a link that might be of value... (BTW, ... I'm no programmer that's for sure, just a newb hacker...) Here's something I found on the web that looks like it would work ,... http://host.sonspring.com/hoverbox/ but alas, when I copied it over to the Popcorn, ... no workie Again, thanks way in advance for any help! If I could just make the html menus display a little better, I'd be all set! I just don't have the required brain-power thanks! Allen For some reason I cannot get any of my divs to be click-able in Internet Explorer. Can someone give me a hand? The code looks like... <div id="select_connected" onClick="toggleView(1);"></div> <div id="select_involved" onClick="toggleView(2);"></div> <div id="select_contact" onClick="toggleView(3);"></div> <div id="search_icon" onClick="searchme();"></div> and the style looks like... #search_icon { cursor:pointer; position: absolute; left: 569px; top: 16px; width: 32px; height: 31px; z-index: 6; } #select_connected { cursor:pointer; position: absolute; left: 385px; top: 53px; width: 134px; height: 35px; z-index: 6; } #select_involved { cursor:pointer; position: absolute; left: 522px; top: 52px; width: 104px; height: 35px; z-index: 6; } #select_contact { cursor:pointer; position: absolute; left: 628px; top: 53px; width: 137px; height: 35px; z-index: 6; } You can see my page at www.masconline.info/titlebar.html Can anyone lend me a hand? Hello, I am trying to create a div that has 5 images on it, and when you click on one of the images it will fill the entire div with a quote. I would include a "close" link to close out the expanded quote, and return back to the 5 images. Does anyone know of any resources where I could learn more about how to do this? Thanks, Steve I have a form and I'm creating a "tab" effect where if you click on a tab ( image I created) that specific div will appear. I tried using the Onclick tag but as soon as I release the mouse button the div disappears... I've tried onmousedown, onmouseup, onmouseout and nothing is working. Anyone have any ideas? <td width="12%"><input src="images/TabReferralReport.jpg" type="image" runat="server" class="submit" height="127" width="75" onclick="ShowPanel('Referral',true); ShowPanel('RecordChecks',false); ShowPanel('ChildAbuse',false); ShowPanel('Disposition',false); ShowPanel('Response',false); ShowPanel('Eligibility',false); ShowPanel('ReferralSource',false);"></td> <td width="12%"><input src="images/TabRecordChecks.jpg" type="image" runat="server" height="127" width="75" onclick="ShowPanel('Referral',false); ShowPanel('RecordChecks',true); ShowPanel('Eligibility',false); ShowPanel('Disposition',false); ShowPanel('Response',false); ShowPanel('ChildAbuse',false); ShowPanel('ReferralSource',false);"></td> Im hoping i posted in the right forum, but my question is basically just that. Alright let's assume I have a basic website. There are images with rollovers, and etc, so its nice and sleek. But what I want to add, is an onclick function for a certain image, and the result to be another image changing on the website in a different location. Your probly thinkin.. huh? Here ill try and explain alil better... [Image 1] -> Is on left side of screen. [Image 2] -> Is on right side of screen. When i click [Image 1], I want Image 2 to change... without having to refresh the page. Kind of like those javascript menu's -- you click on one button, and then a content menu on the side updates without having to reload the website, nor redirect. Can someone point me in the right direction? I am fully willing to do the research, just need a keyword or two for google.com I am trying to implement some HTML code where the user is able to click on a letter of the alphabet and it would return a row of data with that letter. The row of data is from a SQL query. How would I i mplement that into HTML? Here is a bit of the code I am trying to implement. How would I be able to return a row of data with the same letter as each link?? <a id='A' href="#" onclick="('A'); return false;"><span class="alpha">A </span></a> <a id='B' href="#" onclick="('B'); return false;"><span class="alpha">B </span></a> I want to add a cart type feature to the website I'm working on. Basically I want it say quantity in stock: # then when someone clicks on an Add to Cart Button it reduces this number by 1 and sends them to a page where it says what item they added. PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- InstanceBeginEditable name="doctitle" --> <title>JW Jeans Coporation</title> <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="head" --> <script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script> <link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" /> <!-- InstanceEndEditable --> <link href="global.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="banner"> <center> <img src="images/banner.jpg" width="835" height="200" /> </center> </div> <div id="navigation" align="center"><center> <a href="home.html">Home</a> | <a href="AboutUs.html">About Us</a> | <a href="Customization.html">Customization</a> | <a href="ValueServices.html">Value & Services</a> | <a href="Gallery.html">Gallery</a> | <a href="Promotions.html">Promotions</a> | <a href="AdvertiseMedia.html">Advertising & Media</a> | <a href="Payment.html">Payment Services</a> | <a href="ContactUs.html">Contact Us</a> | <a href="Feedback.html">Feedback</a> | <a href="FAQ.html">FAQ</a> </center> </div> <div id="content"><!-- InstanceBeginEditable name="content" --> <h2><strong>Login </strong></h2> <form id="form1" name="form1" method="post" action=""><label for="username" class="label">Username:</label> <span id="spryUsername"> <input type="text" name="text1" id="text1" /> <img src="images/ok.gif" width="16" height="17" class="ok" /><span class="textfieldRequiredMsg">Please enter your username.</span></span> <p><span id="sprytextfield2"> <label for="password" class="label">Password:</label> <input type="password" name="password" id="password" /> <img src="images/ok.gif" width="16" height="17" class="ok" /> <span class="textfieldRequiredMsg">Please enter your password.</span></span> </p> <p> <input name="login" type="submit" class="button" id="login" value="Login" onClick="location.href='OrderForm.html'"/> </p> </form> <p> </p> <script type="text/javascript"> <!-- var sprytextfield1 = new Spry.Widget.ValidationTextField("spryUsername", "none", {validateOn:["blur"]}); var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "none", {validateOn:["blur"]}); //--> </script> <!-- InstanceEndEditable --></div> </div> </body> <!-- InstanceEnd --></html> Hello, I have the following code above, but when i click on the button it clear my data i type in both textbox... the button also act as vaildation .. but i want it to click and go other html.. how to solve my prob? =[ hello, I have a tabbed interface and I have four tabs. I only want one tab to show onload and then when the user clicks on a button, I want the other three tabs to show. Here's my code. I tried many things but it doesn't display right. HTML Code: <ul class="tabs">
<li><a href="#" title="content_1" class="tab">General</a></li>
<li><a href="#" title="content_2" class="tab">Functional</a></li>
<li><a href="#" title="content_3" class="tab">SLA</a></li>
<li><a href="#" title="content_4" class="tab">Pricing</a> </li>
</ul>
HTML Code: <a href="#" class="button"> <span>Click Here</span> </a> Hey everyone I am new to this site, I have some experience with html not to much but i am needing some assistance, I would like to be able to create a script using either html, or css, or javascript or anything that will allow me to make a thumbnail version of a picture with the height and width of 116 and then when you click on the image it will enlarge it to the actual size of the photo, and then have a way where it shows an "X" or the word close to be able to go back to the size of the thumbnail so that you can click on the next picture. i have tried everything that i can think of and im having a hard time with this. so if anyone can help me that will be greatly appreciated. this is the code that i have now but when i click on the picture i have to click on the back button afters its enlarged. <html> <table border="0"> <tr> <td><a href="file:///C:/Users/Vince/Pictures/test.png" target="_self"><img src="https://flpics2.a.ssl.fastly.net/1232/1232189/0004beb6-9d99-646e-62d4-3bbda4708284_110.jpg" width="116" height="116"</a></td> <td><img src="https://flpics0.a.ssl.fastly.net/1232/1232189/0004b2d5-6530-ce96-7ab0-98d79e620e0c_110.jpg" width="116" height="116"</a></td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> </html> Hi, I'm trying to make a portfolio website where when you hover your mouse over a "thumbnail A", "image A" appears in a separate div and when you move your mouse off the "thumbnail A", "image A" goes away. I made it do that with "onmouseover" and "onmouseout" codes, but now i want to make it so when you click on "thumbnail A", "Image A" stays visible even when you move your mouse away using an "onclick" behavior code. But the code is getting confused by the "onclick" conflicting with the "onmouseout" behavior code, so "image A" still dissapears when you move your mouse off the thumbnail. Is there a way to fix this or a better way to do this??? Thanks!! I don't know if this thread belongs here, so move it if need be, Hi, I would like to make a square div (being about 100px - 150px width & height), which has the usual 'X' in the corner which is an <a> tag which makes the div dissapear. I have tried this with onclick functions but it doesn't work. Here's what I've tried: HTML Code: <a style="margin:5px;color:#FFFFFF;" onmouseclick="document.getElementById('banner1').style.visibility:hidden;" href="javascript:void()">Click</a>
<div id="banner1" style="margin:10px;color:#FFFFFF;background-color:#DDDDDD;">DIV</div>
I have changed the href of the <a> tag to different things, but they don't work. This is a prototype so it will be put into CSS later. I would like to have the box slide in about a second after the page has loaded, and then slide back down when the 'X' is clicked, I hope this doesn't require too much code! I will check back so I can answer any questions. Thanks, ToshNeox Hi there, Firstly, I am really really new to HTML and i am trying to learn, pretty much through trial and error and a bit of on the side reading, so sorry if this is a really easy and silly question. Secondly, any help would really be appreciated becasue I have looked EVERYWHERE and can't seem to find out how to do this. So thank you in advance OK. I designed a webpage with a virtual arabic keyboard (just for fun!.lol), I havent used javascript or anything like that, my buttons are made up of a MAP. For example: input class= "bt" type="button" onclick="document.form.textarea.value=document.form.textarea.value + '١'; " shape=RECT coords="93, 115, 143, 163"> What I want to do is, when I click one of the buttons on the keyboard, I want it to open a new window/tab and search the contents of the textarea in google.com. I have tried loads of things, but nothing seems to work. My website is: www.arabic-keys.com Thank you once again in advance for all your help! Mucho appreciated! I am trying to include a file on Onclick event on a button. But the code returns errors. Pls suggest. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript">
function includefile()
{
<%@ include file="somefile.jsp" %>;
}
</script>
</head>
<body>
<table>
<tr>
<td><input type="button" value="Click Here" onclick="includefile()"/></td>
</tr>
</table>
</body>
</html>
I've been recently thinking how to improve and ease browsing through some content on my site. What I came up with was a simple category dropdown menu. Yet after few days of searching for a perfect example, I came across deviantart.com's dropdown Caregory menu (see example below): I know they're using flash there to achieve such effect, but I'm sure something similar can be achieved with a pinch of java and html. I take it, it should be a floating iframe, which is unveiled after clicking on a certain link/button. Now ehm... my question would be... Is it possible to unveil a hidden(and also floating) iframe onClick?(link or button, but I'd prefer a simple a href :p) Hey, I have my example here, take a look: http://oritzio.com/keypad/ Right now if you clicking on number it's writing it in the input text which it's great But if you clicking again on any number it's overwrite the previous number. How can I make it that that it will be continous? Thanks, Oritzio. iv got two images and i want one to change into the other on mouseover but i also need it to be linked to a certain page , so basically its one image changing to another on mouseover and on click goes to a specified page if therea anything else you need to know please just ask Jake I want to display an Iframe on OnClick event. The Iframe (box) shouldn't be there in the fiirst place. It should appear and display whatever is within it only on Onclick. I have the following code. The problem is the Iframe (as a box) is always present and on Onclick the relevant page within Iframe opens. Code: <html> <body> <table border="1"> <td> <a href="http://www.yahoo.com/" target="iframe">Click Here</a> </td> </table> <iframe src="" name="iframe"/> </body> </html> Pls suggest something. |
|||||||