|
JavaScript - Search Form Clickable Tables.
Hi im using this php code right here for a search function that opens url's in an iframe
PHP Code:
$text = $_POST['text']; switch($_POST['engine']) { case 1: for($i=0;$i<strlen($text);$i++) { if($text[$i]==" ") { $text[$i]="+"; } } $data = "http://www.yahoo.com".$text; break; case 2: $data = "http://www.google.com".$text; break; Code: <FORM name="search" ACTION='search.php' METHOD='POST' target="frame">
<input TYPE='text' NAME="text" id="text" class="search" />
<font face="verdana">
<input type='submit' name="submit" value="Go" class="button" /><br />
Select Engine: </font><br />
<select name="engine" size="26">
<option value="1">yahoo</option>
<option value="2">google</option>
</select>
</form>
what i want to do is instead of using the option form i want to make clickable tables or divs, that when clicked opens the url in the iframe. can anybody help me with this? Similar TutorialsHi I'm using quick search plugin (www.dynamicdrive.com) in filtering rows in a group of tables. The problem is that the old vesion of Quick search may act on multiple tables as long they have the same table_id while the new vesion acts on the first table only. Is there a way to solve this problem? N.B. 1-the number of tables is very large (in some pages may be 500 tables). 2-the action of Quick search is applied automaticaly as the user type any text in the input text box. so i don't know any way to make a loop to call the function once for each table. Thanks for your help. Hello, I have been working with different codes to get a search form working with a database. I wonder if someone with better expertise can assist. I have a search form based on drop down option values, what I would like to do is select a "company" and append the search term to the company's value. E.G the form would be something like: <option value="http://url?term=valueisfromsearch&folder=Company Name">Company</option> There will be a free text area which will allow users to input their search term but need this go feed into the above value of "valueisfromsearch". Upon submit, the user will be presented with their results in their browser. Is this possible mid-URL? I've seen info on Javascript Query String Parameters but don't really understand it that well. Thanks, Uzzi I want to make a search form where inputs only appear if a certain selection has been made. For example the user selects "Green" then the input "X" appears, and if the user clicks "Black" then input "Y" appears. How can this be done? If so, can someone give me a basic example in code that I can use to copy off?
I'd be grateful for any help please. I've just started to build my first ever sencha app and am pleased with the results so far, but am now stuck on one thing. I've built a search form and want to be able to display the results on the same page, but this is where I'm stuck. The form works and sends the results using GET, but it doesn't send it to the correct place. I want to show it on the same page (I've built a php file called search.php to handle the results), but it reloads the whole app with the variables in the url. I've tested all of the code away from the app and it works perfectly so I know the problem isn't with the code, but more with my lack of understanding of Sencha so would be extremely grateful for any help. Code: searchForms = new Ext.TabPanel({
fullscreen: true,
title: 'Search',
displayField: 'text',
sto searchForm,
iconCls: 'search',
items: [{
id: 'searchSubmit',
xtype: 'form',
standardSubmit : true,
scroll: 'vertical',
items: [{
xtype: 'fieldset',
title: 'Keywords',
defaults: {
// labelAlign: 'right'
labelWidth: '35%'
},
items: [{
xtype: 'textfield',
name: 'keywords',
id: 'keywords',
placeHolder: 'EG: Music, TV',
autoCapitalize : true,
required: true,
useClearIcon: true
}]
}, {
xtype: 'fieldset',
title: 'Advanced Search',
items: [{
xtype: 'selectfield',
name: 'genre',
id: 'genre',
label: 'Genre',
options: [{
text: 'All',
value: ' '
text: 'Country',
value: '1'
text: 'Sci-Fi',
value: '2'
text: 'Western',
value: '3'
}]
}, {
xtype: 'selectfield',
name: 'media',
id: 'media',
label: 'Media',
options: [{
text: 'All',
value: ' '
text: 'Music',
value: '1'
text: 'TV',
value: '2'
text: 'Movie',
value: '3'
}]
}]
}, {
layout: 'vbox',
defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;'},
items: [{
text: 'Search',
ui: 'confirm',
scope: this,
hasDisabled: false,
handler: function(){
searchForms.submit({
url: 'search.php'
});
}
}, {
text: 'Reset',
ui: 'decline',
handler: function(){
searchForms.reset();
}
}]
}]
}]
});
I've then tried to use this to display the results on the same page, but as I say this just doesn't work. It doesn't call the search.php page at all. I've made sure all of the files (except the index.js file which is in a js folder) are in the same directory as the index.html file. I've also tried to load the file in the app seperately by using: Code:
Ext.regModel('mobile', {
fields: [
{name: 'text', type: 'string'}
]
});
var searchForm = new Ext.data.TreeStore({
model: 'mobile',
proxy: {
type: 'ajax',
url: 'search.php?keywords=test',
reader: {
type: 'tree',
root: 'items'
}
}
});
and that works perfectly so I know that all of the php stuff is working and does work with Sencha Touch, but I'm just not sure how to get it to only work when somebody clicks 'search' I'd be grateful for any help with this as I've spent days searching the web to get this fix, but nothing seems to be working I don't know if this is of help, but the main javascript file is: Code: var tabPanel;
var homePanel = new Ext.Panel({
title: 'Home',
iconCls: 'home',
fullscreen: true,
scroll:{direction:'vertical',threshold:7},
items: [{
html: '<center><p>Home</p></center>'
}]
});
var servicePanel = new Ext.Panel({
title: 'Services',
iconCls: 'team',
fullscreen: true,
items: [{
html: '<center>Please choose a service</center>'
}]
});
var searchPanel = new Ext.Panel({
title: 'Search',
iconCls: 'search',
fullscreen: true,
items: [{
html: '<center>Search</center>'
}]
});
var feedtabpanel = new Ext.Carousel({
title: 'More',
iconCls: 'more',
fullscreen: true,
sortable : true,
xtype:'panel',
scroll:{direction:'vertical',threshold:7},
items: [
{
title: 'Contact',
html : '<center><h1>Contact Us</h1></center>',
},
{
title: 'Feedback',
html : '<center><h1>Let us know what you think<h1></center>',
},
{
title: 'Tell a friend',
html : '<center><h1>Tell your friends how much you love this app</h1></center>',
}
]
});
searchForms = new Ext.TabPanel({
fullscreen: true,
title: 'Search',
displayField: 'text',
sto searchForm,
iconCls: 'search',
items: [{
id: 'searchSubmit',
xtype: 'form',
standardSubmit : true,
scroll: 'vertical',
items: [{
xtype: 'fieldset',
title: 'Keywords',
defaults: {
// labelAlign: 'right'
labelWidth: '35%'
},
items: [{
xtype: 'textfield',
name: 'keywords',
id: 'keywords',
placeHolder: 'EG: Music, TV',
autoCapitalize : true,
required: true,
useClearIcon: true
}]
}, {
xtype: 'fieldset',
title: 'Advanced Search',
items: [{
xtype: 'selectfield',
name: 'genre',
id: 'genre',
label: 'Genre',
options: [{
text: 'All',
value: ' '
text: 'Country',
value: '1'
text: 'Sci-Fi',
value: '2'
text: 'Western',
value: '3'
}]
}, {
xtype: 'selectfield',
name: 'media',
id: 'media',
label: 'Media',
options: [{
text: 'All',
value: ' '
text: 'Music',
value: '1'
text: 'TV',
value: '2'
text: 'Movie',
value: '3'
}]
}]
}, {
layout: 'vbox',
defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;'},
items: [{
text: 'Search',
ui: 'confirm',
scope: this,
hasDisabled: false,
handler: function(){
searchForms.submit({
url: 'search.php'
});
}
}, {
text: 'Reset',
ui: 'decline',
handler: function(){
searchForms.reset();
}
}]
}]
}]
});
Ext.regModel('mobile', {
fields: [
{name: 'text', type: 'string'}
]
});
var searchForm = new Ext.data.TreeStore({
model: 'mobile',
proxy: {
type: 'ajax',
url: 'search.php',
reader: {
type: 'tree',
root: 'items'
}
}
});
var store = new Ext.data.TreeStore({
model: 'mobile',
proxy: {
type: 'ajax',
url: 'areas.php',
reader: {
type: 'tree',
root: 'items'
}
}
});
var nestedList = new Ext.NestedList({
fullscreen: true,
title: 'Location',
displayField: 'text',
sto store,
iconCls: 'locate',
});
nestedList.on('leafitemtap', function(subList, subIdx, el, e) {
var store = subList.getStore(),
record = store.getAt(subIdx),
recordNode = record.node,
title = nestedList.renderTitleText(recordNode),
card, preventHide, anim;
if (record) {
card = record.get('card');
anim = record.get('animation');
preventHide = record.get('preventHide');
}
if (card) {
tabPanel.setCard(card, anim || 'slide');
tabPanel.currentCard = card;
}
});
var services = new Ext.data.TreeStore({
model: 'mobile',
proxy: {
type: 'ajax',
url: 'subcats.php',
reader: {
type: 'tree',
root: 'items'
}
}
});
var servicesList = new Ext.NestedList({
fullscreen: true,
title: 'Services',
displayField: 'text',
sto services,
iconCls: 'team',
});
servicesList.on('leafitemtap', function(subList, subIdx, el, e) {
var store = subList.getStore(),
record = store.getAt(subIdx),
recordNode = record.node,
title = servicesList.renderTitleText(recordNode),
card, preventHide, anim;
if (record) {
card = record.get('card');
anim = record.get('animation');
preventHide = record.get('preventHide');
}
if (card) {
tabPanel.setCard(card, anim || 'slide');
tabPanel.currentCard = card;
}
});
Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
onReady: function() {
tabPanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'dark',
animation: {
type: 'cardslide',
cover: true
},
items: [
homePanel,
nestedList,
servicesList,
searchForms,
feedtabpanel
]
});
}
})
Hello all, hope all is well. I have a search function that displays hidden divs based on what the user has searched for. I would like the "search results" to be opened onto a new page; I have a feeling the results page would contain all the hidden divs and a form of JS would need to be used to "pass" the search data to the new page and thus perform the search and display the corresponding div. - Any help is appreciated here code and demo site below. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<LINK rel="stylesheet" type="text/css" href="<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/php/fleet/includes/website.php";
include_once($path);
?>/php/font.css"></style>
</head>
<body>
<script type="text/javascript">
var showndiv=false;
function show() {
document.getElementById('fleet1').innerHTML="";
if (showndiv){document.getElementById(showndiv).style.display = 'none';
}
theval=Number(document.getElementById('tb').value);
switch (theval){
case 120:
showndiv='fleet2'
break;
case 121:
showndiv='fleet3'
break;
case 122:
showndiv='fleet4'
break;
default:
document.getElementById('fleet1').innerHTML="Sorry, nothing found"
return;
}
document.getElementById(showndiv).style.display = 'block';
}
</script>
<script type="text/javascript">
/////////////////////////////////////////////////////
// Between the quotation marks, list the id values of each div.
var IDvaluesOfEachDiv = "fleet2 fleet3 fleet4";
/////////////////////////////////////////////////////
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/[,\s"']/g," ");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/^\s*/,"");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/\s*$/,"");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/ +/g," ");
var IDlist = IDvaluesOfEachDiv.split(" ");
function ShowAllDivs() {
for(var i=0; i<IDlist.length; i++) {
document.getElementById(IDlist[i]).style.display = "";
}
}
function HideAllDivs() {
for(var i=0; i<IDlist.length; i++) {
document.getElementById(IDlist[i]).style.display = "none";
}
}
</script>
<form name="myForm">
<input type="text" id="tb">
<input type="button" value="Search" onclick="show()">
</form>
<div id="fleet1" style="display:block">
</div>
<div id="fleet2" style="display:none" class="fleetdiv"> <br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0"
bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<TR>
<TD>
<TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
<TR>
<TH class="titlebg" bgcolor="#336699" width="16%">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="17%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="15%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
</TH>
</TR>
<TR>
<TD align="left" width="14%" bgcolor="#FFFFFF">
<FONT class="font">120<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=120"> <img
src="http://www.nctfleetlist.co.uk/images/camera.png" border="0"></a></FONT></TD>
<TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF">
<FONT class="font">W599 PTO</FONT>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">M920</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">OPTARE</font>
</TD>
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF">
<FONT class="font">B33F</font>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<font class="font"><a href="http://www.nctfleetlist.co.uk/main/netgreen.php"><font color="#348017">Network
Green</a></a></font>
</TD>
</tr></table>
</td>
</tr>
</table>
<table align="right">
<TR>
<TD>
<a href="javascript:HideAllDivs()" class="font"><nobr>X Close</nobr></a></div></td></tr>
</table>
<div id="fleet3" style="display:none"> <br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0"
bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<TR>
<TD>
<TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
<TR>
<TH class="titlebg" bgcolor="#336699" width="16%">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="17%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="15%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
</TH>
</TR>
<TR>
<TD align="left" width="14%" bgcolor="#FFFFFF">
<FONT class="font">121<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=121"> <img
src="http://www.nctfleetlist.co.uk/images/camera.png" border="0"></a></FONT></TD>
<TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF">
<FONT class="font">W601 PTO</FONT>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">M920</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">OPTARE</font>
</TD>
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF">
<FONT class="font">B33F</font>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font>
</TD>
</tr></table>
</td>
</tr>
</table></div>
<div id="fleet4" style="display:none"> <br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0"
bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<TR>
<TD>
<TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
<TR>
<TH class="titlebg" bgcolor="#336699" width="16%">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="17%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="15%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
</TH>
</TR>
<TR>
<TD align="left" width="14%" bgcolor="#FFFFFF">
<FONT class="font">122</FONT></TD>
<TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF">
<FONT class="font">W602 PTO</FONT>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">M920</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">OPTARE</font>
</TD>
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF">
<FONT class="font">B33F</font>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font>
</TD>
</tr></table>
</td>
</tr>
</table></div>
</body>
</html>
http://nctfleetlist.co.uk/div3.php I have a situation in which I have to track clicks (links etc..). The problem is, I have a larger div ie - parentDiv - like 300px height, 400px width - approximate. This div has a background image. Now, the issue arises because over this div (parentDiv), I have another div "announceDiv" on top of it showing information. I ONLY want the parts of parentDiv that is NOT covered by announceDiv to be clickable. Just to reiterate, I have a big div that I want clickable (so I can add a link to the click), but over this big div I have a smaller div showing content ie, information, that links to its own stuff. BUT I want to be able to link from this background image that is in the parentDi without affecting when I click in the smaller div that is superimposed over it. any ideas? has to work in ie6+ and ff 3+ I have a "button" that calls formA, which in turns calls formB, all done through javascript. As a button: Code: <input type="button" value="Preview" onClick="popupform();"> works perfectly. Of course the user doesn't want some ugly standard button. They want this beautiful image to show instead (personally, I think the .gif they made looks like barf, but that's besides the point...sorry). When I substitute Code: <input type="image" src="/preview/preview_button.gif" name-"preview" alt="Preview Your Item" border="0" onClick="popupform();"> everything works as it should, except the original form, the one that has the button/image on it, becomes a 404 Object not found. The popupform() sets a bunch of cookies, and calls formB. FormB is a .php which reads the cookies and does some other stuff. Not that it should matter, but I am running everything locally in Vista using the XAMPP Apache Friends Edition and going through localhost (because formB is a .php) Thanks in advance. I have created this svg color picker : Edit fiddle - JSFiddle I want that each color can be clicked and if each of them clicked, it will rotate the selected image to the top while the rest of the color will be moved accordingly clockwise (like a wheel). Hi, I need to change the background and the header of a website on which i display ads (by an adserver) It works with this code : <script type="text/javascript"> parent.document.getElementsByTagName("body")[0].style.backgroundImage="url(http://example.jpg)"; parent.document.getElementsByTagName("body")[0].style.backgroundPosition="center 0"; parent.document.getElementsByTagName("body")[0].style.backgroundRepeat="no-repeat"; parent.document.getElementsByTagName("body")[0].style.backgroundColor = "#85bc21"; parent.document.getElementById("header").style.backgroundImage="url(http://example.jpg)"; </script> But i need those elements become clickable. Have you any solutions ? Thanks a lot. Sorry for my %"*!?& english Benoo My slideshow links will only open inside my inline frame. I'm sure there's something simple I need to change in the code to make it open full screen. Here is my code. Any help would be so much appreciated! Thank you. Shawnel <head> <style type="text/css"> .style1 { vertical-align: top; } </style> </head> <script type="text/javascript"> <!-- //preload images var image1=new Image() image1.src="Images/Picture Box/PictureBox1.jpg" var image2=new Image() image2.src="Images/Picture Box/PictureBox2.jpg" var image3=new Image() image3.src="Images/Picture Box/PictureBox3.jpg" var image4=new Image() image4.src="Images/Picture Box/PictureBox4.jpg" var image5=new Image() image5.src="Images/Picture Box/PictureBox5.jpg" //--> </script> <body style="margin-top: 0"> <a href="javascript:slidelink()"><img src="Images/Picture Box/PictureBox1.jpg" name="slide" border="0" width="539" height="314" class="style1" /></a> <script type="text/javascript"> <!-- var step=1 var whichimage=1 function slideit(){ if (!document.images) return document.images.slide.src=eval("image"+step+".src") whichimage=step if (step<5) step++ else step=1 setTimeout("slideit()",3000) } slideit() function slidelink(){ if (whichimage==1) window.location="learnmore.htm" else if (whichimage==2) window.location="contactus.htm" else if (whichimage==3) window.location="hungerheroes.htm" else if (whichimage==4) window.location="donate.htm" else if (whichimage==5) window.location="volunteer.htm" } //--> </script> I have created a slideshow before but I want to create a slideshow where a person clicks on a link and it goes to a certain picture which might have one or more links embedded into the picture something like this: http://www.myeloma.org.uk/ any guides on how to do this? help much appreciated Hello all, I am using an editable iframe to change the style of the text as a person enters text depending on what they type in. Sometimes the text needs to be a link, and while inserting a link works, I can't click on it. I was wondering if anyone knows how to get links in an editable iframe to click through. I've researched this for a while now without getting anywhere. Right now I'm guessing that I need to somehow find out if the user is hovering over a link and turn "designMode" off for that section of text, or the whole iframe, I'm not completely sure. Anyway, any help would be greatly appreciated! Hello.. I have seen this somewhere, but I don't know how to make it - possibly with a JavaScript integrated with the HTML code to create a submit button. What I want is once the page is loaded, I want the submit button to count down from 5 to 0, and when it's reached 0, the button is clickable - but before that, nothing happens when you click it obviously. How can I obtain this? Whether if it's created in JavaScript or jQuery doesn't matter, I use both... Thanks Hi! Not sure if this is the right forum for this, but I'm using Javascript so it kinda made sense I have some Javascript that is selecting text from a form textarea and copying it to the clipboard: Code: document.myForm.myTextarea.focus(); document.myForm.myTextarea.select(); document.execCommand( 'Copy' ); This works great. However there is a problem when I try to paste the text somewhere else. Assuming that the text that is being copied is a URL ( ie. http://www.google.com ), I would like it to be pasted as a link. When I grab a URL from the address bar inside a web browser and paste it somewhere ( such as an e-mail ), it automatically shows up as a clickable link. When I put a URL into my form textarea and run the javascript, it gets pasted as a plain text ( ie. not underlined and not clickable ). Why are these two different? I've tried running a program to see what is actually copied into the clipboard and I don't see any differences. There must be something that denotes the URL copied from the address bar as a link and therefore makes it clickable when pasted. Is there a way to force this in order to make what is copied to the clipboard from my form textarea a clickable link? Thanks! Hiya, I created this thread on the html forum but I'm not sure if it can be done with javascript, so I'll post here as well. I was wondering if there's a way to make various sections of the image clickable? The sections on the image are not rectangular so I can't make divs. I don't think I can use imagemap either since that only works for making one clickable area right? I already cut out these sections in photoshop and saved them with alpha background, and created a "glowing" version of each section, since I want to make it so that when mouse hovers over it, it will glow. But I can't stack them on top of each other, since if I do that only the topmost layer will be clickable for those areas where they will overlap with rectangular divs. This is example of what I mean: Thanks Hi, Im having a weird issue... I am using position absolute to stick a table header to the top of a div. In the screenshot, under the menu is a div, the buttons and drop downs are at the "top" and grid starts from half way down, now when user scrolls till header is out of view i show the header at the "top" with position absolute. then when user scrolls back down and onto original position the buttons and drop downs are now again at the top exactly at the position where the header was shown, once the header has been shown all the buttons and the drop down are no longer clickable, i.e. there is no reaction, no dropdown shown and no click... whats happening is that IE is thinking that that area at the top where the header was is now invalid, or still occupied by the header or something like that? Its like the buttons and drop downs are kind of "behind" the area where the header was therefore nothing is clickable... And proof of this is that i gave some <BR> spacing to the buttons and drop downs so that they are not at the up most, but halfway down... and things work fine... whats IE up to? or is there some coding i need to do... below is the code for the header to float [it may be coz when the header is not to be shown i set the position to ' ', but i have tried with relative, fixed and static as well to no avail...] Code: <script language="javascript" type="text/javascript">
var floating_header = function() {
this.header = document.getElementsByTagName('THEAD')[0].getElementsByTagName('TR')[0];
this.getXY = function(o) {
var y = 0;
var x = 0;
while (o != null) {
y += o.offsetTop;
x += o.offsetLeft;
o = o.offsetParent;
}
return { "x": x, "y": y };
}
this.setheader = function() {
if (window.header == undefined) {
floating_header();
}
var screenpos = this.scrollTop;
var theady_max = window.getXY(window.table_obj.getElementsByTagName('THEAD')[0]).y + window.table_obj.offsetHeight;
if (screenpos > window.theady - 100 && screenpos < theady_max) {
window.header.style.position = 'absolute';
window.header.style.top = this.offsetTop;
window.header.style.display = 'block';
window.headerOffsetTop = this.offsetTop;
}
else {
if (screenpos != undefined && window.header != undefined) {
window.header.style.position = '';
window.header.style.top = '';
window.headerOffsetTop = undefined;
window.header = undefined;
}
else {
if (window.headerOffsetTop) {
window.header.style.position = 'absolute';
window.header.style.top = window.headerOffsetTop;
window.header.style.display = 'block';
}
}
}
}
document.getElementById("divcn").onscroll = this.setheader;
this.table_obj = document.getElementsByTagName('THEAD')[0].parentNode;
this.theady = this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).y;
};
floating_header();
</script>
hi everyone! i downloaded a Facebook Page template recently. the template works great, but i wanted to add one thing. here is the demo of the code: http://www.facebooktemplates2u.com/d...best_business/ here is where you can download the template: http://www.schoolofrok.com/facebook/html.zip/ anyhow, the part i want to change is the link that directs it to the content. for example, when you scroll over About Us, the little pop up from the bottom comes out. when you click it, it takes you to the About Us content. what i wanted to do, is make it so that when you click the whole jpg, it can take you to the content also. i noticed that the small link that pops up is too tiny and people get confused on where to click. any suggestions? TIA! I have called a table through XML with four fields. One of them is Excel file name. I like to make a clickable link with Excel file name to open it. XML code: Code: <?xml version="1.0" encoding="ISO-8859-1" ?>
<searchable_index>
<item name="Ana" title="Data" link="doc\ana.xls">Member</item>
<item name="Ana" title="Data" link="doc\ana.xls">Member</item>
<item name="Ana" title="Data" link="doc\ana.xls">Member</item>
<item name="Ana" title="Data" link="doc\ana.xls">Member</item>
</searchable_index>
Javascript code
document.write('<table border="1" style="width: 100%;">');
document.write('<tr><th>name</th><th>title</th><th>link</th></tr>');
for(var i=0; i<results.length; i++) {
document.write('<tr>');
document.write('<td>' + results[i].getAttribute("name") + '</td>');
document.write('<td>' + results[i].getAttribute("title") + '</td>');
document.write('<td>' + results[i].getAttribute("link")" > + '</td>'); //<a href="url">Link text</a>
document.write('</tr>');
}
document.write('<table>');
document.close();
In this case, Let's take Google Search as example: The code is JScript .NET, which is basically a .NET version of Javascript. Regardless of language, Anyone with appending type of skill can answer my question. This code is used in Fiddler(It's a Man-in-the-middle proxy) Code: if (oSession.uriContains("&q=")) // oSession is a Fiddler object session // uriContains() function, checks for case-insensitive string from the URI
{
var str = oSession.fullUrl;
var sAppend = "test1+test2+test3";
if (!oSession.uriContains(sAppend))
{
oSession.fullUrl = str.replace( "&q=","&q="+sAppend);
}
}
For those who are confused, It says, If &q= is present in the URI, replace/append &q= with &q=test1+test2+test3 Problem: It appends test1+test2+test3 instantly, when it sees &q= in the URL. Basically, how do I make it wait until I click the submit/search button Thank you. Update: I heard about Onsubmit() event, but not really familiar with it. How do I use it? like, should I go to google source page and edit the form id? Also, Any other methods besides Onsubmit()? Hey all.. I just finished a semester at the local junior college in javascript programming. Didnt teach us very well, but I learned several basics. I have skills in several different aspects of programming now, but none as an expert by any means. Now, I am working on a project for my wife's non-profit that she is involved in, and an wanting to create a thumbnail sized picture 'band' at the top of my website, with images of things that she wants the user to be able to click on to pop up a bigger picture into a new window, a popup window, mind you. This 'image gallery', needs to be able to be clicked on to move the images to the left or to the right, and display, maybe 5 to seven images at a time in about a 100px height band. I have seen this on other websites before, and I have the software to do my own programming, and I 'should have' developed the skills by now, lol, but, I just need some help getting started in the right direction in knowing how to start out. Like, what do I need to accomplish to do this? I already have a div set up for the container for it. The website is using a combination of html, css, php, mysql and javascript. Thank you; Ice |
|||||||