|
HTML - Reveal Iframe Onclick
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) Similar TutorialsI 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. Hi guys. I have a block of text on a html page. I want users to be able to click on 'more' at the end of the paragraph and this will reveal a few more paraghraphs. I have it working in safari with the following code: HTML Code: some text here. <a onclick=" hiddenTxt.style.visibility = 'visible';">More.</a> <div id="hiddenTxt">the hidden text here</div> In my css page i state the visibility as being hidden. The user then clicks more and the txt appears. As i say this works in safari but not firefox or windows. Any suggestions of where iv gone wrong or of a better way of doing this. Many thanks. I've been having trouble trying to figure out how to get my hidden input tags to work. What I want: I have a section of Text I want to appear in the same page, After the user has clicked on a certain link. I do not want to make a similar page with the added text because that takes up too much space. I also need the simplest way to do this because I'll be repeating it many times all over my site. How do I do it?: I have 2 IFrames on a page. I am going to end up with a long list of shows to catch-up on. Is there a way I can embed an IFrame with the list, and when you click on a show, you it will change the Playing Show http://tiny.cc/catchup <---The page I am referring to. hi, i've a very simple html page, where i have an iframe. The problem is that i want to add some text below the iframe. however, my text keeps showing up on the right hand side of the iframe. i've looked at the tutorials discussing the tags available for iframe, but surprisingly, none seem to relevant to this. Code: <html> <body> <table border="0" cellspacing="10"> <table border="0" cellpadding="0" cellspacing="0" align="left"> <td valign="top"> <iframe src="mySource.jsp" height="700" width="600" frameborder="0" scrolling="auto"></iframe> </td> </table> This should be displayed below the iframe but actually gets displayed on the right </body> </html> any help / guidance in this will be much appreciated. thanks in advance! Hi! I've been cracking my head trying to solve this: How can I insert a iframe [i.e. 300x200px] inside of another iframe [i.e. 700x500px] and pull different web content n each one? kind of concentric iframes or like a 'Donut iframe' Now here is my problem. I'm not familiar with other laguages then html and a little bit of javascript and I wanted to make a site for me and my brothers photography company. I currently using dreamweaver and have figured out the way I want to make this site. I tried using ordinary frames, but I want the website to be aligned in the middle and I could make that happen. That is why I went into iframes and a regular table on the index page. My problem now is that I have several iFrames and I want a link from one to open in another. http://www.trans4mind.com/personal_d...e/iframes3.htm here is a link for this to happen, and the simple solution is to name the frame and then target the link. but I have tried that and when the link is from one iframe to another it won't work. If the link is on the index page and target the iframe then it works. Do you have any idea why this happens? I know it's possible since the link above does it. 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? 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> 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 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. 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 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? =[ 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 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 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 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 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. |
|||||||