JavaScript - Linking Js To Php?

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 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!

Hi, i got a webpage that links to 4 diffrent scripts but only one work at a time
Any simple way around this ?

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!

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>

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.

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.

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

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.

I've searched everywhere for help on how to do this...

I have a website for tanning salon services.
Salon A's page has links for 4 possible equipment choices -[I] (diamond, platinum, gold, bronze levels) on the Sunbeds page.

Sunbeds page has 2 iFrames, top and bottom, that are changed by 4 functions - changediamond(), changebronze(), etc. based on the selection.

I need to be able to click a link on the Salon page that will take me to the corresponding function on the Sunbeds page...

Here's what I have so far:

Salon A page
Code:

<a href="sunbeds.htm?javascript:changediamond()"><img src="images/nr_diam_sm2.jpg" alt="Diamond Level Sunbeds" /></a>
    (thru) 
     <a href="sunbeds.htm?javascript:changebronze()"><img src="images/nr_brnz_sm2.jpg" alt="Bronze Level Sunbeds" /></a>

Sunbeds page
Code:

<SCRIPT language="JavaScript">
function changediamond()
{
parent.FRAME1.location="sb_top_ct1.htm";
parent.FRAME2.location="sb_bot_ct1.htm";
}
      (thru) 
function changebronze()
{
parent.FRAME1.location="sb_top_ct4.htm";
parent.FRAME2.location="sb_bot_ct4.htm";
}
</script>
.
..
...
..
.
<a href="javascript:changediamond()"><img src="images/diamond_sm2.jpg" alt="Diamond Level Sunbeds" /></a>
    (thru) 
     <a href="javascript:changebronze()"><img src="images/bronze_sm2.jpg" alt="Bronze Level Sunbeds" /></a>

The links take me to the correct page but not the function. Once I'm there I can select the functions and the iFrame change works great. I'm just at a loss for passing along the data string ie sunbeds.htm?javascript"changediamond()

I would certainly appreciate any help and advice you could share. I'm sure it's pretty simple but for a JS newbie, it's frustrating!

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 using javascript to make a DIV a link.

What would be the easiest way to set the attribute to "rel="nofollow" target=_blank?

Code:

onclick="document.location='http://google.com'"

Thanks for any help.

Hi all

I'm rather new to java scripting and trying to get this done for over a week now.

I'm building a complete new site (not online yet) which is done for 99,9%

The site consists of:

Index - No frames - Just an entrance of the site with links
main menu
Section1 - 1 iframe ("iframe1") - default src=iframe1defaultsection1content
main menu submenu section1
Section2 - 2 iframes ("iframe1","iframe2") - default src = iframe1defaultsection2content - frame2 contains images that change
main menu submenu section2
Section3 - 1 iframe ("iframe1") - default src=iframe1defaultsection3content
main menu submenu section3
Section4 - 1 iframe ("iframe1") - default src=iframe1defaultsection4content
main menu submenu section4
Contact - 1 iframe ("iframe1") - default src=iframe1defaultcontactcontent
main menu submenu contact

The main menu is plain html that is on every page
I use javascripts to make a loadIframeFunction load content into the iframes

Code:

<head>
<script type="text/javascript>
var iframeids=["iFrame1"]

var iframehide="yes"

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}
</script>
</head>
<body>

<iframe id="iframe1" src="iframesection1start.html" width="644px" height="385px" style="position:absolute; left:505px; top:275px; z-index:73 scrolling="yes" marginwidth="0" marginheight="0" frameborder="0"></iframe>

<a href="javascript:loadintoIframe('iframe1', 'iframecontent.html')" title="content">Content</a>

</body>

Everything works, but 1 thing.

i can't get the links in the index page link to the specific section page AND change the default src content

can anybody assist me pls?