|
JavaScript - Linking Files Within Js Code
Okay, for part of my coursework, I have to create a website which features Javascript. I created a calendar which shows small images for specific dates (trying to keep it interesting, hearts for valentines day etc...). Text looks quite dull.
Anyway, I was able to get the code to work successfully, when the image is linked absolutely to the file. However, if I try to change it so that it's relatively linked to the file, it appears as a broken file. This wouldn't normally be a problem, but I have to transfer all of the files to a disc, and so the images will end up broken. Is there anyway I can link the files without them appearing broken? I've tried most things I can think of. Sample code: Code: // New Years Day
if (m==1 && d==1) {
objEvent = new EventObj(m,d,y, "<center><img src='file:///E:/ICT/Website/mysite/Balloons-32.png'><br/><br/>New Years Day</center>", null, "scEventBlue");
arrEvents[arrEvents.length] = objEvent;
};
Many thanks in advance! Similar TutorialsHi, i got a webpage that links to 4 diffrent scripts but only one work at a time Any simple way around this ? Hi all, I'm trying to link a java script file to a html file but it's not working. Any ideas? HTML: Code: <head><script type="text/javascript" src="newjavascript.js"></script></head> <body> <div id="myRadioGroup"> 2 Cars<input type="radio" name="cars" checked="checked" value="twoCarDiv" /> 3 Cars<input type="radio" name="cars" value="threeCarDiv" /> <div id="twoCarDiv" class="desc"> 2 Cars Selected </div> <div id="threeCarDiv" class="desc"> 3 Cars </div> </div> </div></body> JS: Code: $(document).ready(function(){
$("input[name='cars']").click(function() {
var test = $(this).val();
$(".desc").hide();
$("#"+test).show();
});
});
hey all. im fairly new to javascript and looking for a little help. first ive got this simple script that takes the value of a form and calls an image based upon the input. Code:
<script type="text/javascript">
function showImg() {
var val = document.getElementById("rightsphere").value;
document.getElementById("image1").src = "lensblank.gif"
if (val == 3) {document.getElementById("image1").src = "blank1.jpg"}
if (val == 4) {document.getElementById("image1").src = "blank2.jpg"}
if (val == 5) {document.getElementById("image1").src = "blank3.jpg"}
// and so on
</script>
<input type = "text" id = "rightsphere" size = "7" onblur = "showImg()">
<img style="position:absolute; left:090px; top:170px" id="image1" src="lensblank.gif" />
this calls up an image based on the submitted input when clicking on the actual image itself. i was wondering how i would go about getting the image1 to change when clicking another image (ie a button entitled 'calculate') thanks in advance update: nevermind. im an idiot. Hey, I'm trying to make some information from a database convert to JS Code: <?php
include ("Scripts/connection.php");
$qry1 = "SELECT * FROM news";
$result1 = mysql_query($qry1);
?>
<script type="text/javascript">
var pausecontent=new Array()
<?php
while($news = mysql_fetch_array($result1))
{
echo 'pausecontent[0]="<a href=\"news.php#'.$news['id'].'\">'.$news['news'].'</a><br />'.$news['news'].'!";';
}
?></script>
however I just see undefined... any ideas? Hi there, I need a little help with a script I am using for a link on my index page to load up a different page with two iFrames on it and at the same time load up different pages in each of these iFrames. I have achieved this with only one iFrame so far with this script: Code: 1. <script type="text/javascript">
2. <!--
3.
4. function loadIframe(){
5. if (location.search.length > 0){
6. url = unescape(location.search.substring(1))
7.
8. window.frames["main"].location=url
9. }
10. }
11.
12. onload=loadIframe
13. //-->
14. </script>
15.
16. <a href="mainpage.html?about.htm"</a>
So basically when I click on Link1 on Page1 it takes me to Page2 with iFrame1 with a page loaded and iFrame2 with nothing loaded whereas I would like Link1 on Page1 to load up Page 2 with two different pages loaded in the iFrames all at the same time. Any help would be appreciated thanks. relatively new coder here definitely new to js and I can't figure out how to get this script linked into an external file every time I try nothing shows up. Code: <html>
<head>
<script language="JavaScript1.1">
<!--
var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}
function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}
//-->
</script>
<title></title>
</head>
<body>
<a href="javascript:gotoshow()"><img src="img1.jpg" name="slide" border=0 width=250 height=250></a>
<script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg")
slideshowlinks("#","#","#","#","#")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=3000
var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
</body>
</html>
obviously get rid of html tags and <script></script> tags save it as file.js and then <script type="text/javascript" src="file.js"> </script> do i need to break this up into 2 files or something I can't get it to work Im using a image fader and this is the html. cant seem to link the image when i added href to it it stopped the fader working. Code: <script language="JavaScript">
// configuration structure
var A_TPL = {
'random' : false,
'steps' : 20,
'transtime': 1.5,
'slidetime': 5,
'width' : 800,
'height': 278,
'alt' : 'BC banners',
};
// IMAGE LINKS TO BE EDITED
var A_ITEMS = [
'http://www.******.co.uk/*****/img/banner1.jpg',
'http://www.******.co.uk/*****/img/banner2.jpg',
'http://www.******.co.uk/*****/img/banner3.jpg',
'http://www.******.co.uk/*****/img/banner4.jpg'
];
var mySlideShow = new tFader (A_ITEMS, A_TPL);
</script>
little help i have been looking all over the web and i can't get to where i need to be to finish my page. basically i have two pages and if someone clicks a specific link from the first page i want it go to the other page but load a specific page in the iframe on the second page. i know how to use javascript to make a specific page load into an iframe but not how to make the page load into the iframe on another page. all i need to know is how to do it for one page then i think i can build the decision structure around it to make it work for more than one link (hopefully). any help will be greatly appreciated. thanks. Here is my code,but it not what i want. I want only the link to change color or image on mouseover. Code: <html> <body> <a href="http://www.mobile2user.com/" onmouseover="document.bgColor='#EEFFFF'">Change the background color and bring up an alert box</a> </body> </html> Hello all, first time poster. I recently found this site as I was searching for topics to possibly help me fix my issue. So, without further ado: I've been working on a website for a grass roots Senate hopeful in Colorado, and I was asked to create a bit of interactivity into the site. Now, I'm well versed in XHTML/CSS, but I'm still a fledgling JavaScript writer. I was able to create a set of code that would allow for this to happen: 1.) A person would click on a link in a list of questions. 2.) That question's text would appear in a box on the right. 3.) Below the text from #2, a YouTube video would show using YouTube's embed code. Now, the bit of code was working perfectly and doing exactly what I ask it to. Except, the problem is it for some reason only works for the first and second question, and even though it shows a link for the third question it will not allow you to click on it and this whole thing is killing my brain. I've attempted to debug the code myself, but Firebug and the Mozilla Console show that no errors are running, and since I can't actually click on the link to even see if it would give me an error I'm completely stumped. I've cleared the code out, switched it all around, and for some reason it just won't do it for the third question, regardless of if I switched it out. So, here is the code in question. I'm just going to show the first snippets of it because it is just about copied and pasted over and over again. Code:
$(document).ready(function() {
$('#q1').click(function() {
$('#qbox h3').html('<h3>What have you done to stop illegal aliens from getting taxpayer funded healthcare?</h3>');
$('#abox').html('<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/f9GH-yvPHSY&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/f9GH-yvPHSY&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>');
});
and Code: <tr>
<td><h2>Q1:</h2></td>
<td><a href="#" id="q1"><p>What have you done to stop illegal aliens from getting taxpayer funded healthcare?</p></a></td>
</tr>
Anyways, thank you so very much for taking a look at this. Any suggestions would be greatly appreciated! I am currently using this template by flowplayer.org: http://flowplayer.org/tools/demos/sc...avigation.html The functionality I need is the ability to link directly to a specific ajax tab (i.e. Seagram Building, Barcelona Pavilion, New National Gallery). As of now they are just line items without any anchor tags. Any help would be much appreciated. gabe Hey, I have 3 bits of code, 2 of which I'm pretty sure are right [i know the php works, and the ajax looks fine], but one i'm having trouble with. Basically what I'm trying to do is use a link to call php function [calls a piece of text from a database]. Which worked fine. But then I tried to incorporate AJAX into the script to make change dynamically on the page, and I'm a little confused with it all. I've got the AJAX and PHP, [and an attempted page with a link on to try and call the function with AJAX] but so far it's not doing as it should. Wondered if anyone could show me where I'm going wrong with the whole 'linking together' thing? So far everything I've tried hasn't worked. [hope this doesn't violate the forums 'don't dump your code' rule. But it's kind of all necessary] The AJAX [AJAX.js]: Code: function loadurl(generate.php) {
var ajax = false;
// Create the object:
// Choose the objecttype, depending on what is supported:
if (window.XMLHttpRequest) {
// IE 7, Mozilla, Safari, Firefox, Opera, most browsers:
ajax = new XMLHttpRequest();
} else if (window.ActiveXObject) { // Old IE-browsers
// Make the type Msxml2.XMLHTTP, if possible:
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) { // Else use the other type:
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) { }
}
}
// Retrieving the data from the page
if (ajax) {
alert("url:generate.php" + url);
ajax.open('GET', url);
// Sends request
ajax.send(null);
// Function that handles response
ajax.onreadystatechange=function(){
// If everything is OK:
if ( (ajax.readyState == 4) && (ajax.status == 200) ) {
// Returns the value to the document
alert(ajax.responseText);
}
}
} else { // AJAX is not useable
alert('It is not possible to connect, please update your browser.');
}
}
The PHP [generate.php] Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<?php
if($_GET['act'] == "generate_quotes") {
$db = mysql_connect("*", "*", "*") or die ("Unable to connect to database.");
mysql_select_db("quote") or die ("Unable to select database.");
$result = mysql_query( " SELECT * FROM `quote` ORDER BY RAND() LIMIT 0,1 " );
$fetch = mysql_fetch_array($result);
echo "<blockquote>".$fetch['q_quote']."</blockquote>";
mysql_close($db);
} else {
echo "<img src=\"1.png\">";
}
?>
</body>
</html>
The page where I'm trying to bring them together [PULL.php] Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="ajax.js" type="text/javascript"></script>
</head>
<body>
<a onClick="loadurl('generate.php'); return false;">Click Here</a>
</body>
</html>
I've included the file names with extensions just in case it's something to do with those, but thanks in advance for any help. Greatly appreciated. I have a simple script that will get the NWS forecast for any zip code and it opens it in a new tab. I would like it to open in an iframe on another page with in my website. I have come close, but not quite all the way yet. This will enter the forecast in an iframe on the same page as the input form. http://www.cavecountryweather.com/wxsearch.php How can it load onto this page from the form on the menubar? This menu is common on all the sites pages. I have seen solutions posted around the internet using javascript for similar issues, but I haven't been able to get any to work in my situation. My javascript skills are - none. Any help would be appreciated. Hey everyone, below is a very simple jquery slideshow script which functions exactly as it should. BUT, if I link an image in the DIV set (See proposed change section) the slideshow breaks, instead of cycling through each image in turn it keeps trying to cycle the first image over and over. What am i not getting here? Script linking in header of HTML page Code: <script type="text/javascript" src="script/jquery-1.2.6.min.js"></script> <script type="text/javascript" src="script/slideshowsc.js"></script> CSS on HTML controlling DIV position/opacity Code: #slideshow {
position:relative;
height:186px;
}
#slideshow IMG {
position:absolute;
top:0;
left:20px;
z-index:8;
opacity:0.0;
}
#slideshow IMG.active {
z-index:10;
opacity:1.0;
}
#slideshow IMG.last-active {
z-index:9;
}
DIV setup in HTML page Code: <div id="slideshow" style="padding-top:15px; text-align:center; width:540px; padding-bottom:43px;">
<img src="images/did-u-know1.png" width="499" height="186" border="0" class="active" />
<img src="images/did-u-know2.png" width="499" height="186" />
<img src="images/did-u-know3.png" width="499" height="186" />
</div>
PROPOSED CHANGE IN DIV CODE HERE Code: <div id="slideshow" style="padding-top:15px; text-align:center; width:540px; padding-bottom:43px;">
<a href="whatever.html><img src="images/did-u-know1.png" width="499" height="186" border="0" class="active" border="0" /></a>
<img src="images/did-u-know2.png" width="499" height="186" />
<img src="images/did-u-know3.png" width="499" height="186" />
</div>
Finally, Javascript / Jquery fired through body tag onload Code: function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 8000 );
});
hello i've followed this javascript and i'd like to link the text to one of my page.How do i place the ahref tag in the script.Appreciate your help http://www.javascriptkit.com/script/script2/neontext.shtml I am a novice at web-designing. And I have been stuck at a problem for one week. I am trying to create a website which consists of a form which the user is required to fill out, and based on the information supplied by the user the submit button generates different pages. Now, I have a couple of drop down lists, and each drop down list has 5-6 fields. Right now, the submit button links to only one page irrespective of the information in the form. I want my submit button to generate a different result depending upon the combinational changes the different drop down list undergoes. How can I go about it? Any kind of help is highly appreciated. Thanks!
Hello everyone I am having trouble with a project i am supposed to be doing which is to turn structured English into coding joined with the code i am about to post !! This is the code i have written so far that works: var contestantNamesArray = ['Tom and Nazia', 'Pat and Dan', 'Sandra and Kofi', 'Ian and Adele', 'Paul and Costas']; var judgesPointsArray = [2,1,5,4,3]; var audiencePointsArray = [4,5,2,3,1]; var combinedPointsArray = new Array (5) for (var couple = 0; couple < combinedPointsArray.length; couple = couple + 1) { combinedPointsArray[couple] = judgesPointsArray[couple] + audiencePointsArray[couple]; } var maxCombinedPoints = 0; for (var couple = 0; couple < combinedPointsArray.length; couple = couple + 1) { if (combinedPointsArray[couple] > combinedPointsArray[maxCombinedPoints]) { maxCombinedPoints = couple; } } document.write('The maximum number of points was ' + combinedPointsArray[maxCombinedPoints] + '<BR>'); document.write('The couple(s) scoring the maximum were' + ':' + '<BR>'); Now with that code there i have just posted, I am supposed to take this structured English below and combine them together but cannot work out how to link or code it to get it to work. write out a heading for the list of couples scoring the maximum declare a variable to keep count of how many couples scored the maximum value and initialise it to zero for each couple if this couple scored the maximum write out the couple's names increase the count of couples who scored the maximum value end if if a dance-off is required write out that a dance-off is required else write out that a dance-off is not required end if end for I have tried myself but i am stuck at how to link the contestantNamesArray with the rest of the code in order to be able to display the couples who scored the maximum points and store it in a new variable and then write out the names. Sorry if i have posted wrongly this is my first time and i am a new learner to JavaScript trying to learn basics. Thank you anyone in advance and if you need any further information i will provide anything you need. Gary Hello and thanks for letting me on this forum! Im pretty new to JScript and I am still getting used to it all. I am trying to make a Website that allows values to be selected from one form, transferred to the next form as a summary and then completed. The values are sent to the page fine but my Validation is broken. Here is my LINK code In the Form Code: <form id="Tickets" onsubmit="return ValidateForm()" action="Details.html"> And in the Submit Button Code: <input type="submit" id="OrderTickets" value="Order Tickets" onclick="return ValidateForm()" > My validation is as follows Code: <script type = "text/javascript">
function ValidateForm() {
if( document.getElementById('DepartingStation').selectedIndex == " ")
{
alert( "Please provide a Departing Station!" );
document.getElementById('DepartingStation').focus() ;
return false;
}
if( document.getElementById('ArrivingStation').selectedIndex == " ")
{
alert( "Please provide an Arriving Station!" );
document.getElementById('ArrivingStation').focus() ;
return false;
}
var Depart = document.getElementById('DepartingStation').value;
var Arriv = document.getElementById('ArrivingStation').value;
if( Depart==Arriv){
alert( "Train cannot depart and arrive at the same station!" );
return false;
}
if ( document.getElementById('ReturnTravel').checked=true; {
var valueDate = document.getElementById('OutwardDate').value;
if ( valueDate== null || valueDate== '')
{
alert('Please provide an Outward Travel Date!');
return false;
}
}
var valueRetDate = document.getElementById('ReturnDate').value;
if ( document.getElementById('ReturnTravelType').checked==true && (valueRetDate== null || valueRetDate== '' ))
{
alert('Please provide a Return Travel Date!');
return false;
}
}
Id appreciate any help anyone can share on this! Thanks. |
|||||||