|
JavaScript - How To Define Dynamic Links?
I hope you will forgive the ineptitude of this question, but I'm starting from a severely beginner's level!
In my website, I want each button clicked on the home page to define a variable URL that determines which 'default' page is navigated to first when people visit the Gallery section. i.e. If the "About Racing" link is clicked, then when the Gallery section fires up, the first page/picture seen is the Racing Car pic page. I am sure this is possible, but haven't managed to work out quite how to do it.... Any help will be very gratefully received! Similar TutorialsDisclaimer 1: I am not a programmer, just a curious designer, so please take that into consideration in your replies. Disclaimer 2: Despite all advices against it, I couldn't find a better solution to my website than using iFrame Disclaimer 3: Before asking for help, I researched *several* forums and although I found people discussing similar issues, I was not successful at adapting their solutions to my needs. Gentlemen, I need your help implementing a method to intercept and redirect external links to a dynamic iframe. By "dynamic" iframe I mean an iframe whose SRC would be filled up in accordance to the external URL being intercepted and that it would resize its HEIGHT accordingly in order to avoid scroll bars. The function for resizing the iframe id="child" is already correctly implemented like so: Code: <script language="JavaScript">
<!--
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('child').contentWindow.
document.body.scrollHeight;
//change the height of the iframe
document.getElementById('child').height=
the_height;
}
//-->
</script>
and the call Code: <iframe src="/main/index.php" width="100%" onLoad="calcHeight();" height="1" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" id="child"> This what I have going on: - index.html => contains some content and the iframe id="child" - childpage1[...N].php => several PHP pages which I do not want to show up outside of the parent "index.html". These pages use clean URLs from CMS such as "http://mydomain.com/pages/this-is-a-child-page/" Users might click on external links from search engines, for instance, about an specific page such as "http://mydomain.com/pages/this-is-child-page-7/" which obviously would load the page "orphaned", outside "index.html" and that is exactly what I am trying to avoid. Based on what I have researched so far, the best way (please, correct me if I'm wrong) to deal with this would be implementing a test condition on the header of the PHP child pages to verify if they are on "top" or not (if they are already inside the "parent" object "index.html"). If FALSE, the page would load normally, if TRUE, a variable should be created to store the URL of the requested page and passed through the link to the page "index.html" which would be immediately called. In "index.html" there would be a script to collect the variable sent through the link (something like "http://mydomain.com/?var=http://mydomain.com/pages/this-is-child-page-7/") and break the text string apart, store a portion of PATHNAME (in this case, "/pages/this-is-child-page-7/) and use it to replace the current SRC of iframe id="child". Probably, there would have to be another testing function in this script to compare the variable passed from the "orphaned" PHP page against the current value of SRC in iframe id="child" to determine if any action is actually required. This "replacement" function would be called onLoad and if tested true would run and refresh the page with the proper value in the iframe SRC. All this should be accomplished while still making the iframe HEIGHT dynamically adjustable and show a "clean" URL in the browser, such as "http://mydomain.com". The potential issues I foresee is an infinite loop due to two onLoad queries (one for SRC, another for HEIGHT) in the parent and child objects, which might required a merge into a single script. As you can tell, I have an idea of what needs to be done but not a clue on how to get it done. Any help would be greatly appreciated. Thanks, My application reads an array of URLs in Javascript and displays them in a table. I need to create mouseover events for each of the links (just an alert message for now.) I have tried this a few ways, but for each one the mouseover event fires for each link before anything else is loaded on the page, and when the page is loaded, no link is displayed. Here are the two ways I've tried: Code:
var cell1 = document.createElement("TD");
cell1.innerHTML = '<A HREF= ' + url + 'onMouseOver="' + alert("my alert box"); + '"> my page </A>';
Code: cell1.innerHTML = '<A HREF= "' + url + '"> my page </A>';
cell1.onMouseOver = alert('alert');
I have also tried many variations of these including: Code: cell1.innerHTML = '<A HREF= "' + url + '"> my page </A>';
cell1.onMouseOver = function(){alert('alert');};
Code:
var cell1 = document.createElement("TD");
cell1.innerHTML = '<A HREF= " ' + url + ' " onMouseOver=" alert("my alert box"); "> my page </A>';
But they all yield the same result, so any help would be much appreciated! Hi everyone! I am building a simple web application in which the user inputs some html code in a <textarea> and the corresponding result (output of the code) is shown! The problem I am facing is that suppose the user enters some code and wishes to wrap it inside specific tags (e.g. <script></script>) then she just selects the corresponding code and clicks a predefined button and the selected code gets wrapped inside those tags! Now, what I am thinking right now is that when the user selects some code and clicks the button the selected text goes inside a variable (e.g. old_variable) and a new variable (new_variable = "<script>" + old_variable + "</script>") is returned! But I was just wondering how to send the selected code in the variable i.e. old_variable using JavaScript? Any help/hint/suggestion/advice would be highly valuable for me! Thanks! I currently have a navigation bar with CSS. It sits by itself in a frame so it doesn't change with the other page turns. So I'm trying to figure out how to set each link class="active" since it always stays on the same page. I'm thinking javascript will be my friend. Is there an onclick function that can be defined? I'm not new to webpages but new to learning javascript, instead of borrow someone's code. I didn't know how to approach this code because I think I need it to say: If Onclick, then set to class="active", otherwise (then), set class="nothing" or anything to this regard. I was not sure how I could approach that code and how to fit into the UL/LI html code I currently have setup as well as the head code. Example code: (I have 3 frames called head, form, and body. Head is the nav bar where this code sits.) Code: <ul class="menu"> <li><a href="choose.htm" class="active"><span>Home</span></a></li> <li><a href="search.htm" target="form" onClick="top.body.location='http://www.google.com';"><Span> Google</span></a></li></ul> With my CSS code, the "menu" defines some colors/setup, as so does Span and class="active". As a bonus, if you could teach me instead of just help me, it would help me help others. Hi, I'm using ColdFusion to handle the login function for users (see login_form.cfm below). Have to click in the username box to be able to start typing. What's the best way to define the focus to be on the username when the page initially loads? Thanks <form method="post"> Username: <input type="Text" name="username"><br> Password: <input type="Password" name="password"><br> <input type="Submit" value="Login" name="login"> </form> Hi, Here's a sample form: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample form</title>
<script type="text/javascript">
function displayResult() {
alert(document.myForm.myInput.value);
}
function getFocus() {
if (document.myForm.myInput.value == document.myForm.myInput.defaultValue) {
document.myForm.myInput.value = "";
}
}
function loseFocus() {
if (document.myForm.myInput.value == "") {
document.myForm.myInput.value = document.myForm.myInput.defaultValue;
}
}
</script>
</head>
<body>
<form name="myForm" method="get" onsubmit="return false;" action="">
<input name="myInput" value="Hello world!" onfocus="getFocus();" onblur="loseFocus();"><br>
<input type="button" onclick="displayResult();" value="Display input value">
</form>
</body>
</html>
It works with no problem, but the following doesn't: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample form</title>
<script type="text/javascript">
var x = document.myForm.myInput;
function displayResult() {
alert(x.value);
}
function getFocus() {
if (x.value == x.defaultValue) {
x.value = "";
}
}
function loseFocus() {
if (x.value == "") {
x.value = x.defaultValue;
}
}
</script>
</head>
<body>
<form name="myForm" method="get" onsubmit="return false;" action="">
<input name="myInput" value="Hello world!" onfocus="getFocus();" onblur="loseFocus();"><br>
<input type="button" onclick="displayResult();" value="Display input value">
</form>
</body>
</html>
What's wrong with it and how can I define a global variable to be used by all the functions? Many thanks in advance! Mike Hi all, I am working with the following code: Code: window.onload = (window.onload) ? window.onload : function () {
for (var i = 0; i < onload_functions.length; i++) {
eval(onload_functions[i]);
}
}
...and it's used like this: onload_functions.push('runSomeJS()'); The idea is that IF the "window.onload" function doesn't exist, I supply my own. My problem is that this code also uses an array: var onload_functions = new Array(); Now this array will not be present if the "window.onload" function is not present. So I need to also define it conditionally. I tried this: onload_functions = (onload_functions) ? onload_functions : new Array(); ...but it doesn't work. I also tried: onload_functions = (onload_functions) ? onload_functions : onload_functions = new Array(); ...doesn't work either. I'm sure the solution is simple, but I'm just not seeing it. Any ideas? Thanks! -- Roger Hi All, i know how to create a dynamic form or DIv ..but what i do not know is how to create a dynamic form/ or div into a previous dynamic one.. i need basically to see 5 dynamic forms / DIV in cascade where each one trigger the one coming after.. For what i need that : i have my user inserting information on the level 1. let say Copagny info 2- then he will be asked if he wants to add a sub level information ( subform) for that compagny or even many subforms at the same level .. and so on... 3- those sub level ( subforms ) can also call their respective subforms.. Any idea how to design this ? thanks I have made a script where you can add extra fields, and next to the row is a span that automatically displays the outcome from a calculation of three fields in that row. i.e. Q x (B - A) = total. Here is the bit that does the calculation: Code: function advCalc(selected) {
var result = Number(document.formmain.elements["quantity"+selected].value) * (Number(document.formmain.elements["provideamount"+selected].value) - Number(document.formmain.elements["supplyamount"+selected].value)) ;
result = result.toFixed(2) ;
result = addCommas(result) ;
document.getElementById("total"+selected).innerHTML = result ;
}
The bit that adds a new row of fields is: Code: function addPart(divName){
var newdiv = document.createElement('div') ;
newdiv.setAttribute('id', 'partrow' + counter) ;
newdiv.setAttribute('style', 'clear:both;') ;
newdiv.innerHTML = "<div style='float:left;width:40px;text-align:center;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc('" + counter + "')\" id=' quantity " + counter + "' type='text' value='1' size='1'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 0px 0px 0px;'>\r<input id='manufacturer" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:95px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='partnumber" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:80px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='supplier" + counter + "'type='text' value='' size='4'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='type" + counter + "'type='text' value='' size='6'/>\r</div>\r<div style='float:left;width:85px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='deliverytime" + counter + "'type='text' value='' size='13'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select id='supplyCurrency" + counter + "'>\r<option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\')\" id=' supplyamount " + counter + "'type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select name='provideCurrency" + counter + "'><option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\') id=' provideamount " + counter + "' type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:20px;text-align:left;margin:5px 0px 0px 45px;'>\r<strong>£</strong>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 5px 0px 0px;'><span id=' total " + counter + "'></span></div> \r" ;
document.getElementById(divName).appendChild(newdiv) ;
counter++ ;
}
The problem I am having is that it works fine for the first row which is hardcoded as e.g. id="provideamount0" etc. It isn't working for any other fields added but I can't see what is wrong Hi, I have a programing problem that have been around for ages. I have search on google using several expressions and words and after hours of digging i'm still unable to do it. I would like to get a value from a HTML page hosted remotely with an inconstant value. Then define this value and name as a javascript variable and apply or show in my page. Thanks for all the help P.S. Is there any way to make a domain lookup in javascript? I mean a user enters a domain and the script converts to an ip and shows to the user. If not thanks, probably it can only be done in the server side... Hello all. I am currently viewing various reports based on a location chosen by a dropdown. When I select GO, the page sends the location to a popup, which then queries based on that location and displays the graph on the popup window. What I want to do is to eliminate the popup and send the location to a <div> on the same page and then have the query run and display the graph on the same page. Is this possible, or do Divs have to be static content? Thanks, Parallon I have a dynamic website where my client can upload pictures to, i have php dynamically show the images and etc, i also have php assign each photo an id number. Basically what it is each photo dynamically gets id=$i++. So every photo uploaded it goes up one higher. Now i wanted to make it so in javascript the same happens, the id is dynamically i++ but im not very good in javascript so i was hoping i could get some help. Basically i want it to be something like this. (unless u know a better way of doing the same kind of effect) Code: var i=0;
$(document)
.ready(function(){
setTimeout(function () {$("#i++").fadeOut("slow");}, 100);
setTimeout(function () {$("#i++").fadeIn("fast");}, 400);
});
I just need help getting the i++ to work. hi i got some code from another site. i modified it according to my needs. what is it doing it adds dynamic form fields by clicking "add another" link. the problem is when logged in user wants to modify his contact details he clicks on edit then gets to this modification form where all the data in his db is selected and displayed in that form fields. so the problem here is when he clicks on add another link it adds up that many fields sets that appeared currently. means if there appeared four sets of fields then clicking on add another link will add four more fields. what i want is to add only one set of fields which contains of text field and select menu. my code is here Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = $('.clonedInput').length;
var newNum = new Number(num + 1);
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
$('#input' + num).after(newElem);
});
});
</script>
<style>
#myForm div {
font-size:14px;
margin-bottom: 10px;
clear: left;
}
#myForm label {
width: 125px;
display: block;
font-size:14px;
font-weight: bold;
color: #999;
float: left;
}
#btnAdd {
margin-left:130px;
}
</style>
</head>
<body>
<form id="myForm" method="post" action="process.php">
<div>
<label>First Name: </label><input type="text" name="fname" id="fname"><br>
</div>
<div>
<label>Last Name: </label><input type="text" name="lname" id="lname"><br>
</div>
<?php
$connect = mysql_connect("localhost","user","pass");
mysql_select_db("db");
$get_im = mysql_query("SELECT * FROM contactim WHERE userid='$_SESSION[userid]'");
$count = mysql_num_rows($get_im);
while($get_contactim = mysql_fetch_assoc($get_im)) {
$userim_db = $get_contactim['username'];
$im_db = $get_contactim['im'];
//echo $userim_db."<br>";
for($i = 1; $i <= $count; $i++) {
?>
<div id="input1" class="clonedInput">
<label>IM Screen Names:</label>
<input type="text" name="name[]" id="name1" value="<?php if($userim_db == "") { echo ""; } else { echo $userim_db; } ?>" />
<select name="screenname[]" id="screenname1">
<option value="AIM" <?php if($im_db == "AIM") { echo "SELECTED"; } ?>>AIM</option>
<option value="gtalk" <?php if($im_db == "gtalk") { echo "SELECTED"; } ?>>Google Talk</option>
<option value="skype" <?php if($im_db == "skype") { echo "SELECTED"; } ?>>Skype</option>
<option value="windows" <?php if($im_db == "windows") { echo "SELECTED"; } ?>>Windows Live</option>
<option value="yahoo" <?php if($im_db == "yahoo") { echo "SELECTED"; } ?>>Yahoo</option>
</select><br />
<?php
}
}
?>
</div>
<div>
<a href="#" id="btnAdd">Add another</a>
</div>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
Hello, I'm new here and also new to writing JS. I was hoping someone could tell me what is wrong with the code below. I am trying to load a page, and the filename will be different depending on current month and year. If I use the code below in the body for document.write instead of window.location it correctly displays this months page as 102009.htm. Is there a better way to do this? Thanks in advance for any help. Code: <script type="text/javascript"> <!-- var months=new Array(13); months[1]="01" months[2]="02" months[3]="03" months[4]="04" months[5]="05" months[6]="06" months[7]="07" months[8]="08" months[9]="09" months[10]="10" months[11]="11" months[12]="12" var time=new Date(); var lmonth=months[time.getMonth() + 1]; var year=time.getYear(); window.location = (1month + year + ".htm") //--> </script> Is this possible? Please look at the attached image. I am trying to create a team creation page for a site I am making, however I want the user to be able to see all the names they enter before the information is passed to the .php file to send it to the MySQL table. 1. So, every time the user enters a name and presses the "add name" button the name details are stored in an Javascript array and displayed in the box below. 2. When the user presses the "save team" button the team name is passed by a simple form post and the javascript array is passed to a php array and then processed ready to be passed to the MySQL table. The problem is I don't know to do the first bit (number1). Any ideas or pointers? hi i need help in creating dynamic form using jquery. i create a form in this form i want when "add another" link is clicked then it adds one more set of fields. form is here 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="lib/jquery-1.4.min(Production).js"></script>
<script src="js/script.js" type="text/javascript"></script>
<style>
#form1 div {
font-size:14px;
margin-bottom: 10px;
clear: left;
}
#form1 label {
width: 125px;
display: block;
font-size:14px;
font-weight: bold;
color: #999;
float: left;
}
#link {
margin-left:125px;
}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<div>
<label>IM Screen Names:</label>
<input type="text" name="textfield" id="textfield" />
<select name="select" id="select">
<option value="AIM" selected="selected">AIM</option>
<option value="gtalk">Google Talk</option>
<option value="skype">Skype</option>
<option value="windows live">Windows Live</option>
<option value="yahoo">Yahoo</option>
</select><br />
<div id="link"><a href="">Add another</a></div>
</div>
</form>
</body>
</html>
I am trying to concatenate text to refer to a variable: Code: var HomePlayer1Points = 17 var i = 1 var a = "HomePlayer" var b = "Points" var c = a + i + b alert(c.value) it give me undefined instead of 17. How should this be done without using eval() ??? I am running a vBulletin and am using a script to set a cookie each time someone clicks a banner. When the user then reloads the page it looks for that cookie and hides the banner if the cookie exists. I now want to write the date into the cookie name so that the cookie name changes every day. I want to do this because for some reason the cookie gets re-written sometimes and never expires. Because of vBulletin and Firefox I have to use PHP to check initially if the cookie is even set. Here is my current script, any help would be appreciated. Code: <?PHP
if( isset( $_COOKIE['noads139'] ) )
{
}
else
{
?>
<script type="text/javascript">
function as_click () {
myDate = new Date();
myDate.setTime(myDate.getTime()+(1*24*60*60*1000));
document.cookie = 'noads139=noads139; expires=' + myDate.toGMTString()+"; path=/"
}
// incredibly funky onload add-event scripting, for all browsers
if(typeof window.addEventListener != 'undefined')
{
//.. gecko, safari, konqueror and standard
window.addEventListener('load', adsense_init, false);
}
else if(typeof document.addEventListener != 'undefined')
{
//.. opera 7
document.addEventListener('load', adsense_init, false);
}
else if(typeof window.attachEvent != 'undefined')
{
//.. win/ie
window.attachEvent('onload', adsense_init);
}
//** remove this condition to degrade older browsers
else
{
//.. mobile safari, mac/ie5 and anything else that gets this far
//if there's an existing onload function
if(typeof window.onload == 'function')
{
//store it
var existing = onload;
//add new onload handler
window.onload = function()
{
//call existing onload function
existing();
//call adsense_init onload function
adsense_init();
};
}
else
{
//setup onload function
window.onload = adsense_init;
}
}
function adsense_init () {
if (document.all) { //ie
var el = document.getElementsByTagName("iframe");
for(var i = 0; i < el.length; i++) {
if(el[i].src.indexOf('googlesyndication.com') > -1) {
el[i].onfocus = as_click;
}
}
} else { // firefox
window.addEventListener('beforeunload', doPageExit, false);
window.addEventListener('mousemove', getMouse, true);
}
}
//for firefox
var px;
var py;
function getMouse(e) {
px=e.pageX;
py=e.pageY;
}
function findY(obj) {
var y = 0;
while (obj) {
y += obj.offsetTop;
obj = obj.offsetParent;
}
return(y);
}
function findX(obj) {
var x = 0;
while (obj) {
x += obj.offsetLeft;
obj = obj.offsetParent;
}
return(x);
}
function doPageExit(e) {
ad = document.getElementsByTagName("iframe");
for (i=0; i<ad.length; i++) {
var adLeft = findX(ad[i]);
var adTop = findY(ad[i]);
var inFrameX = (px > (adLeft - 10) && px < (parseInt(adLeft) + parseInt(ad[i].width) + 15));
var inFrameY = (py > (adTop - 10) && py < (parseInt(adTop) + parseInt(ad[i].height) + 10));
if (inFrameY && inFrameX) {
myDate = new Date();
myDate.setTime(myDate.getTime()+(1*24*60*60*1000));
document.cookie = 'noads139=noads139; expires=' + myDate.toGMTString()+"; path=/"
}
}
}
//end for firefox
</script>
<?PHP
}
?>
<div id="adsense" style="display: none">
<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxx";
/* 728x90, created 4/15/10 */
google_ad_slot = "xxxxxxxxxxxxxx";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<script type="text/javascript">
if (document.cookie.indexOf('noads139') < 0)
{
document.getElementById('adsense').style.display = '';
}
else {
}
</script>
<script type="text/javascript">
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)))
{
document.getElementById('adsense').style.display = 'none';
}
else {
}
</script>
Hi, I am trying to create a xml document and load it into a 3rd party function as follows: Quote: var doc = new ActiveXObject('Microsoft.XMLDOM'); // OR var doc = document.implementation.createDocument('', 'xml', null); o.overlayKML('somefile.xml'); // Works perfectly o.overlayKML(doc); // Doesn't work at all, return unsupport error I get to know that the overlayKML (3rd party function) needs to read a physical file with a path and sadly it doesn't support DOM. How can I create a javascript document that mimic a physical file and introduce it into the function? Thanks! Hi, Is it possible to code a slideshow where the slides can change at a different intervals? Which can be set by me?? The slideshow will hold just text and links but will need to be dynamic in size. i.e. there maybe 5 or 6 lines of text anything more can be viewed by a view more link and then i'll need the box to stretch to fit rest of text. how would i do this?? Thanks |
|||||||