|
JavaScript - Multiple Video On One Page??? How?
I would like multiple videos one one page. I tried to give each one an individual id but failed miserably. Also how on earth do I assign a image to each player. My example works with one player only and falls back to HTML5 video with no problems . If I decided on five videos per page, how do I apply an id to each one as well as a different image per player. Here is what I have so far:
Code: <script type="text/javascript" src="video/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.src = "http://www.mysite.com.mp4";
flashvars.controlBarMode = "floating";
flashvars.poster = "http://mysite.com/imageonplayer.png";
var params = {};
params.allowfullscreen = "true";
params.allowscriptaccess = "always";
var attributes = {};
attributes.id = "videoDiv";
attributes.name = "myDynamicContent";
swfobject.embedSWF("http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf", "videoDiv", "487", "275", "10.1.0","expressInstall.swf", flashvars, params, attributes);
</script>
</head>
Code: <div id="videoDiv"> <video controls="controls" poster="http://mysite.com/imageonplayer.png" width="487" height="275"> <source src="http://www.mysite.com/mymovie.mp4" type="video/mp4" /> <source src="http://www.mysite.com/mymovie.ogg" type="video/ogg" /> </video> </div> I assigned each player an individual id like this as suggested on another thread but that didn't work. Any suggestions? : Code: <script type="text/javascript">
swfobject.registerObject("videoDiv1", "10.1.0");
swfobject.registerObject("videoDiv2", "10.1.0");
swfobject.registerObject("videoDiv3", "10.1.0");
swfobject.registerObject("videoDiv4", "10.1.0");
</script>
Thanks Dan Similar TutorialsForgive me if this has been answered elsewhere. can anyone tell me if they are aware of the script which will allow an image button to appear, after a certain time. I'm running a sales video and I do not want the download button to appear until the end. Hope this makes sense?? Hi, From my experience with HTML5 video so far (which isn't much), Firefox seems to switching to the "HAVE_ENOUGH_DATA" state too soon which is causing very choppy playback while the video is buffering. Is there a way to start the loading of video as soon as the page loads instead of waiting for the user to press play? I don't mean "autoplay", I want the video to start buffering as soon as the page loads without it playing. Thank you. Hi gents, I am trying to figure out, how to play a video file saved on the server, displayed as a hyperlink from the file manager created in JavaScript? The outcome should be following: When a file name (video.avi) clicked in JavaScript file manager, the server will open a page with the embed Windows Media Player (player.php) and it will start playing the clicked video file? Any suggestions? Code of the JavaScript file manager Code: <?
/*
Start Directory - To list the files contained within the current
directory enter '.', otherwise enter the path to the directory
you wish to list. The path must be relative to the current
directory.
*/
$startdir = '.';
/*
Show Thumbnails? - Set to true if you wish to use the
scripts auto-thumbnail generation capabilities.
This requires that GD2 is installed.
*/
$showthumbnails = true;
/*
Show Directories - Do you want to make subdirectories available?
If not set this to false
*/
$showdirs = true;
/*
Force downloads - Do you want to force people to download the files
rather than viewing them in their browser?
*/
$forcedownloads = false;
/*
Hide Files - If you wish to hide certain files or directories
then enter their details here. The values entered are matched
against the file/directory names. If any part of the name
matches what is entered below then it is now shown.
*/
$hide = array(
'dlf',
'index.php',
'Thumbs',
'.htaccess',
'.htpasswd'
);
/*
Show index files - if an index file is found in a directory
to you want to display that rather than the listing output
from this script?
*/
$displayindex = false;
/*
Allow uploads? - If enabled users will be able to upload
files to any viewable directory. You should really only enable
this if the area this script is in is already password protected.
*/
$allowuploads = false;
/*
Overwrite files - If a user uploads a file with the same
name as an existing file do you want the existing file
to be overwritten?
*/
$overwrite = false;
/*
Index files - The follow array contains all the index files
that will be used if $displayindex (above) is set to true.
Feel free to add, delete or alter these
*/
$indexfiles = array (
'index.html',
'index.htm',
'default.htm',
'default.html'
);
/*
File Icons - If you want to add your own special file icons use
this section below. Each entry relates to the extension of the
given file, in the form <extension> => <filename>.
These files must be located within the dlf directory.
*/
$filetypes = array (
'png' => 'jpg.gif',
'jpeg' => 'jpg.gif',
'bmp' => 'jpg.gif',
'jpg' => 'jpg.gif',
'gif' => 'gif.gif',
'zip' => 'archive.png',
'rar' => 'archive.png',
'exe' => 'exe.gif',
'setup' => 'setup.gif',
'txt' => 'text.png',
'htm' => 'html.gif',
'html' => 'html.gif',
'fla' => 'fla.gif',
'swf' => 'swf.gif',
'xls' => 'xls.gif',
'doc' => 'doc.gif',
'sig' => 'sig.gif',
'fh10' => 'fh10.gif',
'pdf' => 'pdf.gif',
'psd' => 'psd.gif',
'rm' => 'real.gif',
'mpg' => 'video.gif',
'mpeg' => 'video.gif',
'mov' => 'video2.gif',
'avi' => 'video.gif',
'eps' => 'eps.gif',
'gz' => 'archive.png',
'asc' => 'sig.gif',
);
/*
That's it! You are now ready to upload this script to the server.
Only edit what is below this line if you are sure that you know what you
are doing!
*/
error_reporting(0);
if(!function_exists('imagecreatetruecolor')) $showthumbnails = false;
$leadon = $startdir;
if($leadon=='.') $leadon = '';
if((substr($leadon, -1, 1)!='/') && $leadon!='') $leadon = $leadon . '/';
$startdir = $leadon;
if($_GET['dir']) {
//check this is okay.
if(substr($_GET['dir'], -1, 1)!='/') {
$_GET['dir'] = $_GET['dir'] . '/';
}
$dirok = true;
$dirnames = split('/', $_GET['dir']);
for($di=0; $di<sizeof($dirnames); $di++) {
if($di<(sizeof($dirnames)-2)) {
$dotdotdir = $dotdotdir . $dirnames[$di] . '/';
}
if($dirnames[$di] == '..') {
$dirok = false;
}
}
if(substr($_GET['dir'], 0, 1)=='/') {
$dirok = false;
}
if($dirok) {
$leadon = $leadon . $_GET['dir'];
}
}
if($_GET['download'] && $forcedownloads) {
$file = str_replace('/', '', $_GET['download']);
$file = str_replace('..', '', $file);
if(file_exists($leadon . $file)) {
header("Content-type: application/x-download");
header("Content-Length: ".filesize($leadon . $file));
header('Content-Disposition: attachment; filename="'.$file.'"');
readfile($leadon . $file);
die();
}
}
if($allowuploads && $_FILES['file']) {
$upload = true;
if(!$overwrite) {
if(file_exists($leadon.$_FILES['file']['name'])) {
$upload = false;
}
}
if($upload) {
move_uploaded_file($_FILES['file']['tmp_name'], $leadon . $_FILES['file']['name']);
}
}
$opendir = $leadon;
if(!$leadon) $opendir = '.';
if(!file_exists($opendir)) {
$opendir = '.';
$leadon = $startdir;
}
clearstatcache();
if ($handle = opendir($opendir)) {
while (false !== ($file = readdir($handle))) {
//first see if this file is required in the listing
if ($file == "." || $file == "..") continue;
$discard = false;
for($hi=0;$hi<sizeof($hide);$hi++) {
if(strpos($file, $hide[$hi])!==false) {
$discard = true;
}
}
if($discard) continue;
if (@filetype($leadon.$file) == "dir") {
if(!$showdirs) continue;
$n++;
if($_GET['sort']=="date") {
$key = @filemtime($leadon.$file) . ".$n";
}
else {
$key = $n;
}
$dirs[$key] = $file . "/";
}
else {
$n++;
if($_GET['sort']=="date") {
$key = @filemtime($leadon.$file) . ".$n";
}
elseif($_GET['sort']=="size") {
$key = @filesize($leadon.$file) . ".$n";
}
else {
$key = $n;
}
$files[$key] = $file;
if($displayindex) {
if(in_array(strtolower($file), $indexfiles)) {
header("Location: $file");
die();
}
}
}
}
closedir($handle);
}
//sort our files
if($_GET['sort']=="date") {
@ksort($dirs, SORT_NUMERIC);
@ksort($files, SORT_NUMERIC);
}
elseif($_GET['sort']=="size") {
@natcasesort($dirs);
@ksort($files, SORT_NUMERIC);
}
else {
@natcasesort($dirs);
@natcasesort($files);
}
//order correctly
if($_GET['order']=="desc" && $_GET['sort']!="size") {$dirs = @array_reverse($dirs);}
if($_GET['order']=="desc") {$files = @array_reverse($files);}
$dirs = @array_values($dirs); $files = @array_values($files);
?>
<!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=iso-8859-1" />
<title>Directory Listing of <?=dirname($_SERVER['PHP_SELF']).'/'.$leadon;?></title>
<link rel="stylesheet" type="text/css" href="dlf/styles.css" />
<?
if($showthumbnails) {
?>
<script language="javascript" type="text/javascript">
<!--
function o(n, i) {
document.images['thumb'+n].src = 'dlf/i.php?f='+i;
}
function f(n) {
document.images['thumb'+n].src = 'dlf/trans.gif';
}
//-->
</script>
<?
}
?>
</head>
<body>
<div id="container">
<h1>Directory Listing of <?=dirname($_SERVER['PHP_SELF']).'/'.$leadon;?></h1>
<div id="breadcrumbs"> <a href="<?=$_SERVER['PHP_SELF'];?>">home</a>
<?
$breadcrumbs = split('/', $leadon);
if(($bsize = sizeof($breadcrumbs))>0) {
$sofar = '';
for($bi=0;$bi<($bsize-1);$bi++) {
$sofar = $sofar . $breadcrumbs[$bi] . '/';
echo ' > <a href="'.$_SERVER['PHP_SELF'].'?dir='.urlencode($sofar).'">'.$breadcrumbs[$bi].'</a>';
}
}
$baseurl = $_SERVER['PHP_SELF'] . '?dir='.$_GET['dir'] . '&';
$fileurl = 'sort=name&order=asc';
$sizeurl = 'sort=size&order=asc';
$dateurl = 'sort=date&order=asc';
switch ($_GET['sort']) {
case 'name':
if($_GET['order']=='asc') $fileurl = 'sort=name&order=desc';
break;
case 'size':
if($_GET['order']=='asc') $sizeurl = 'sort=size&order=desc';
break;
case 'date':
if($_GET['order']=='asc') $dateurl = 'sort=date&order=desc';
break;
default:
$fileurl = 'sort=name&order=desc';
break;
}
?>
</div>
<div id="listingcontainer">
<div id="listingheader">
<div id="headerfile"><a href="<?=$baseurl . $fileurl;?>">File</a></div>
<div id="headersize"><a href="<?=$baseurl . $sizeurl;?>">Size</a></div>
<div id="headermodified"><a href="<?=$baseurl . $dateurl;?>">Last Modified</a></div>
</div>
<div id="listing">
<?
$class = 'b';
if($dirok) {
?>
<div><a href="<?=$_SERVER['PHP_SELF'].'?dir='.urlencode($dotdotdir);?>" class="<?=$class;?>"><img src="dlf/dirup.png" alt="Folder" /><strong>..</strong> <em>-</em> <?=date ("M d Y h:i:s A", filemtime($dotdotdir));?></a></div>
<?
if($class=='b') $class='w';
else $class = 'b';
}
$arsize = sizeof($dirs);
for($i=0;$i<$arsize;$i++) {
?>
<div><a href="<?=$_SERVER['PHP_SELF'].'?dir='.urlencode($leadon.$dirs[$i]);?>" class="<?=$class;?>"><img src="dlf/folder.png" alt="<?=$dirs[$i];?>" /><strong><?=$dirs[$i];?></strong> <em>-</em> <?=date ("M d Y h:i:s A", filemtime($leadon.$dirs[$i]));?></a></div>
<?
if($class=='b') $class='w';
else $class = 'b';
}
$arsize = sizeof($files);
for($i=0;$i<$arsize;$i++) {
$icon = 'unknown.png';
$ext = strtolower(substr($files[$i], strrpos($files[$i], '.')+1));
$supportedimages = array('gif', 'png', 'jpeg', 'jpg');
$thumb = '';
if($showthumbnails && in_array($ext, $supportedimages)) {
$thumb = '<span><img src="dlf/trans.gif" alt="'.$files[$i].'" name="thumb'.$i.'" /></span>';
$thumb2 = ' onmouseover="o('.$i.', \''.urlencode($leadon . $files[$i]).'\');" onmouseout="f('.$i.');"';
}
if($filetypes[$ext]) {
$icon = $filetypes[$ext];
}
$filename = $files[$i];
if(strlen($filename)>43) {
$filename = substr($files[$i], 0, 40) . '...';
}
$fileurl = $leadon . $files[$i];
if($forcedownloads) {
$fileurl = $_SESSION['PHP_SELF'] . '?dir=' . urlencode($leadon) . '&download=' . urlencode($files[$i]);
}
?>
<div><a href="<?=$fileurl;?>" class="<?=$class;?>"<?=$thumb2;?>><img src="dlf/<?=$icon;?>" alt="<?=$files[$i];?>" /><strong><?=$filename;?></strong> <em><?=round(filesize($leadon.$files[$i])/1024);?>KB</em> <?=date ("M d Y h:i:s A", filemtime($leadon.$files[$i]));?><?=$thumb;?></a></div>
<?
if($class=='b') $class='w';
else $class = 'b';
}
?></div>
<?
if($allowuploads) {
$phpallowuploads = (bool) ini_get('file_uploads');
$phpmaxsize = ini_get('upload_max_filesize');
$phpmaxsize = trim($phpmaxsize);
$last = strtolower($phpmaxsize{strlen($phpmaxsize)-1});
switch($last) {
case 'g':
$phpmaxsize *= 1024;
case 'm':
$phpmaxsize *= 1024;
}
?>
<div id="upload">
<div id="uploadtitle"><strong>File Upload</strong> (Max Filesize: <?=$phpmaxsize;?>KB)</div>
<div id="uploadcontent">
<?
if($phpallowuploads) {
?>
<form method="post" action="<?=$_SERVER['PHP_SELF'];?>?dir=<?=urlencode($leadon);?>" enctype="multipart/form-data">
<input type="file" name="file" /> <input type="submit" value="Upload" />
</form>
<?
}
else {
?>
File uploads are disabled in your php.ini file. Please enable them.
<?
}
?>
</div>
</div>
<?
}
?>
</div>
</div>
<div></div>
</body>
</html>
Code of the PHP page with the embed Windows Media Player (player.php) Code: <html>
<head>
<title>Player</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<body>
</head>
<OBJECT id=mediaPlayer
classid=clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6
width=400 height=300
type=application/x-oleobject VIEWASTEXT><PARAM NAME="AutoSize" VALUE="1"><PARAM NAME="DisplaySize" VALUE="2"><PARAM NAME="url" VALUE=""><PARAM NAME="autoStart" VALUE="true"><PARAM NAME="uiMode" VALUE="mini">
<embed id="mediaPlayer"
name="mediaPlayer" width="400" height="300"
type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
src="video.avi"
autostart="true" showstatusbar="0"
showcontrols="1" autosize="1"
displaysize="4"></embed>
</OBJECT>
</body>
</html>
Please note that video.avi in player.php will be variable (name of the video file chosen by user and clicked). Many thanks for help. ZizaX. I have looked all over for an answer to this, but haven't found a definite way to do it yet. I am updating my audio page (a demo track list for getting composing work) and getting rid of my flash audio player in favor of embedding .mp3 files, or adding them with the HTML5 audio tag. What I would like to be able to do is link into the page, and have that link autoplay a specific track out of the 10-20 that I will have on the same page. The problem is I am extremely new to scripting and have no idea where to even start with this. The reason I want it to be able to autoplay specific tracks is so I can market a specific track, and have that person (who is already expecting to hear the music on page load) not have to then look through the track list for that one track I was promoting and click play. Any help would be greatly appreciated, Thanks! Hi, I currently created a video uploader, but when the video is too big in size, the page seems to be not doing any until the video is completely uploaded. I want to put somewhat like "loading.. please wait" script until the video is not completely uploaded. Thanks. //Ana I'm sure people have answered this question multiple times but I have done all the research and tried everything but nothing works. My problem: I'm building a website for my gaming clan and I want a Javascript news ticker/date & time and a Javascript navigation bar. However, when I put these codes in, they don't run with each other on the same page. Possibly an onload issue but like I said, I tried all the solutions. Note: they use jquery. I'll post the html and javascript files as txt files since I can't attach them in their normal form. Index.txt is my HTML Sliding_effect.txt is the Javascript for the menubar Newsticker.txt is the Javascript for the ticker that goes at the bottom of the <body> The actual ticker.js code that runs with newsticker.js was too large to attach. It's 7000 lines long. Any help is appreciated Hi all, I am a complete novice to pretty much everything internet but have managed to put together a site that I am trying to get off of the ground. Here is the problem that I am having. The first script below is for a script that shows up in my sidebar and is available on every page of my site. The second script is one that I intend to use on only one specific page. Both of the scripts function properly on their own but not when I try to use them as intended. As mentioned in the FAQ, I tried to name all of the variables with unique names but that still does not work. Any suggestions would be greatly appreciated!! This code is in my sidebar on every page: Code: <script type="text/javascript">
<!--
function calculate() {
var doc = document.pointCalc;
var points = 0;
var fiber = doc.fiber.value;
var fat = doc.fat.value;
var calories = doc.calories.value;
points = (calories / 50) + (fat / 12) - (fiber / 5);
doc.result.value = Math.round(points);
}
// -->
</script>
<center>
<br/>
<br/>
<div class="storyTitle"><b>Approximate Points Calculator</b></div>
<div class="storyContent">
<form name="pointCalc">
<table><tr>
<tr><td>Calories:</td><td><input name="calories" type="text"/></td></tr>
<tr><td>Fat:</td><td><input name="fat" type="text"/></td></tr>
<tr>
<td>Fiber:</td>
<td>
<select name="fiber">
<option value="0"/>0
<option value="1"/>1
<option value="2"/>2
<option value="3"/>3
<option value="4"/>4 or more
</select>
</td>
</tr>
<tr><td colspan="2"><input value="Calculate" onclick="calculate();" type="button"/></td></tr>
<tr><td>POINTS:</td><td><input name="result" type="text"/></td></tr>
</tr></table>
</form>
</div></center>
This code I'm trying to use on just one page of the site: Code: <center><script type="text/javascript">
<!--
function getpoints() {
var doc1 = document.pointquiz;
var dpoints = 0;
var sex = doc1.sex.value;
var age = doc1.age.value;
var weight = doc1.weight.value;
var height = doc1.height.value;
var activity = doc1.activity.value;
var nursing = doc1.nursing.value;
dpoints = (sex * 1) + (age * 1) + (weight * 1) + (height * 1) + (activity * 1) + (nursing * 1);
doc1.dresult.value = Math.round(dpoints);
}
// -->
</script>
<br />
<br />
<div class="storyTitle"><b>Daily Point Allowance Quiz</b></div>
<div class="storyContent">
<form name="pointquiz">
<table><tr>
<tr>
<td>Sex:</td>
<td>
<select name="sex">
<option value="2" />Female
<option value="8" />Male
</select>
</td>
</tr>
<tr>
<td>Age:</td>
<td>
<select name="age">
<option value="4" />17-26
<option value="3" />27-37
<option value="2" />38-47
<option value="1" />48-58
<option value="0" />58+
</select>
</td>
</tr>
<tr>
<td>Weight:</td>
<td>
<select name="weight">
<option value="10" />100-109
<option value="11" />110-119
<option value="12" />120-129
<option value="13" />130-139
<option value="14" />140-149
<option value="15" />150-159
<option value="16" />160-169
<option value="17" />170-179
<option value="18" />180-189
<option value="19" />190-199
<option value="20" />200-209
<option value="21" />210-219
<option value="22" />220-229
<option value="23" />230-239
<option value="24" />240-249
<option value="25" />250-259
<option value="26" />260-269
<option value="27" />270-279
<option value="28" />280-289
<option value="29" />290-299
<option value="30" />300-309
<option value="31" />310-319
<option value="32" />320-329
<option value="33" />330-339
<option value="34" />340-349
<option value="35" />350-359
</select>
</td>
</tr>
<tr>
<td>Height:</td>
<td>
<select name="height">
<option value="0" />Under 5'1"
<option value="1" />5'1" to 5'10"
<option value="2" />5'10" and over
</select>
</td>
</tr>
<tr>
<td>Activity:</td>
<td>
<select name="activity">
<option value="0" />Mostly Sitting
<option value="1" />Mostly Standing
<option value="4" />Mostly Walking
<option value="6" />Mostly Physical Labor </select>
</td>
</tr>
<tr>
<td>Nursing Mom:</td>
<td>
<select name="nursing">
<option value="0" />No
<option value="10" />Yes, Solely
<option value="5" />Yes, Supplementing
</select>
</td>
</tr>
<tr><td colspan="2"><input value="Calculate" onclick="getpoints();" type="button" /></td></tr>
<tr><td>POINT ALLOWANCE:</td><td><input name="dresult" type="text" /></td></tr>
</tr></table>
</form>
</div>
<p align="center">Note: Minimum Daily Points is 18, Max is 44</p></center>
I'm using this tooltip on my site: http://craigsworks.com/projects/simpletip/, I want to display some information about the user when someone hovers mouse on his/her username. This is the code I use to call simpletip: Code: $(document).ready(function(){
// Create your tooltips
var api = $(".ttip a").simpletip().simpletip();
api.load('user.php');
});
The problem is that I want to determine the user id in order to retrieve according information from database. As I see from this code the address that should be call onmouseover is determined in advance. Is there a way to send some parameters (user id in this case) in user.php file according to which link is hovered? Hope I'm clear. I am trying to add Multiple NoobSlides onto one page. From the sample page listed he http://www.efectorelativo.net/laboratory/noobSlide/ I am trying to add two Sample 5 slideshows side by side on the same page, but when I try it, the second slideshow events don't trigger. The slide show image change works on the first one, but not the second one. Here is the code I am using: Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>noobSlide - mootools</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://www.efectorelativo.net/laboratory/noobSlide/_web.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.efectorelativo.net/laboratory/noobSlide/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.efectorelativo.net/laboratory/js/mootools-1.2-core.js"></script>
<script type="text/javascript" src="http://www.efectorelativo.net/laboratory/noobSlide/_class.noobSlide.packed.js"></script>
<script type="text/javascript">
window.addEvent('domready',function(){
//SAMPLE 5 (mode: vertical, using "onWalk" )
var info5 = $('info5').set('opacity',0.5);
var sampleObjectItems =[
{title:'Morbi elementum111', autor:'', date:'', link:'http://www.link11111.com'},
{title:'Mollis leo', autor:'Ipsum', date:'6 Dic 2007', link:'http://www.link2.com'},
{title:'Nunc adipiscing', autor:'Dolor', date:'9 Feb 2007', link:'http://www.link3.com'},
{title:'Phasellus volutpat pharetra', autor:'Sit', date:'22 Jul 2007', link:'http://www.link4.com'},
{title:'Sed sollicitudin diam', autor:'Amet', date:'30 Set 2007', link:'http://www.link5.com'},
{title:'Ut quis magna vel', autor:'Consecteur', date:'5 Nov 2007', link:'http://www.link6.com'},
{title:'Curabitur et ante in', autor:'Adipsim', date:'12 Mar 2007', link:'http://www.link7.com'},
{title:'Aliquam commodo', autor:'Colom', date:'10 Abr 2007', link:'http://www.link8.com'}
];
var nS5 = new noobSlide({
mode: 'vertical',
box: $('box5'),
size: 180,
items: sampleObjectItems,
addButtons: {
previous: $('prev5'),
play: $('play5'),
stop: $('stop5'),
next: $('next5')
},
onWalk: function(currentItem){
info5.empty();
new Element('h4').set('html','<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info5);
}
});
//SAMPLE 5a (mode: vertical, using "onWalk" )
var info5a = $('info5a').set('opacity',0.5);
var sampleObjectItems2 =[
{title:'2222Morbi elementum111', autor:'', date:'', link:'http://www.link11111.com'},
{title:'2222Mollis leo', autor:'Ipsum', date:'6 Dic 2007', link:'http://www.link2.com'},
{title:'22222Nunc adipiscing', autor:'Dolor', date:'9 Feb 2007', link:'http://www.link3.com'},
{title:'2222Phasellus volutpat pharetra', autor:'Sit', date:'22 Jul 2007', link:'http://www.link4.com'},
{title:'2222Sed sollicitudin diam', autor:'Amet', date:'30 Set 2007', link:'http://www.link5.com'},
{title:'2222Ut quis magna vel', autor:'Consecteur', date:'5 Nov 2007', link:'http://www.link6.com'},
{title:'2222Curabitur et ante in', autor:'Adipsim', date:'12 Mar 2007', link:'http://www.link7.com'},
{title:'22222Aliquam commodo', autor:'Colom', date:'10 Abr 2007', link:'http://www.link8.com'}
];
var nS5a = new noobSlide({
mode: 'vertical',
box: $('box5a'),
size: 180,
items: sampleObjectItems2,
addButtons: {
previous: $('prev5a'),
play: $('play5a'),
stop: $('stop5a'),
next: $('next5a')
},
onWalk: function(currentItem){
info5a.empty();
new Element('h4').set('html','<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info5a);
}
});
});
</script>
</head><div id="cont">
<!-- SAMPLE 5 -->
<h2>Sample 5</h2>
<div class="sample">
<table style="width: 100%" cellspacing="0" cellpadding="0" align="center">
<tr align="left">
<td>
Ayer
</td>
<td>Actual
</td>
</tr>
<td>
<!-- SAMPLE 5 -->
<div class="mask2" style="left: 0px; top: 0px; ">
<div id="box5" style="left: 0px; top: 1px">
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img1.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img2.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img3.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img4.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img5.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img6.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img7.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img8.jpg" alt="Photo" /></span>
</div>
<div id="info5" class="info" style="left: 0px; bottom: 0; height: 21px"></div>
</div>
<p class="buttons">
<span id="prev5"><< Previous</span>
<span id="play5">Play ></span>
<span id="stop5">Stop</span>
<span id="next5">Next >></span>
</p>
</td>
<!-- SAMPLE 5a -->
<td align="left">
<div class="mask2" style="left: 0px; top: 0px; ">
<div id="box5a" style="left: 0px; top: 1px">
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img1.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img2.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img3.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img4.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img5.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img6.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img7.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img8.jpg" alt="Photo" /></span>
</div>
<div id="info5a" class="info" style="left: 0px; bottom: 0; height: 21px"></div>
</div>
<p class="buttons">
<span id="prev5a"><< Previous</span>
<span id="play5a">Play ></span>
<span id="stop5a">Stop</span>
<span id="next5a">Next >></span>
</p>
</td>
</table>
</div>
</div>
</body>
</html>
Is it possible to modify the code I am using in this example to create multiple photo galleries on the same page (basically one for each horse - set up exactly like the example)? There is also some CSS that is connected to this photo gallery. I know CSS a bit more than I know javascript...which I suppose isn't really saying much, since I don't know javascript at all. Also, how much of the code should I post, considering it's a multiple parter? Many thanks! Hi, ok i been playing around with this for awhile now http://www.dynamicdrive.com/dynamici...iframessi2.htm could not get it to work, so i tried several others and still nada, i finally ran across http://www.codingforums.com/archive/.../t-224293.html and i worked with what old pendent had done. The result is that i got some good results, closer to what i wanted but i need to do it multiple times. It works for one but not the other. i thought about putting each iframe on a sep html page and then using two sep tables and doing a SS include. but there has to be a better way. what im doing is i have an amazon iframe and a shopzilla iframe for the same product search and i want them posted one under the other iframe iframe and expand as the size needs, alowing for either to be longer or shorter when needed. i can do one but i have not found a way to do both yet. i removed my code because it showed my personal affiliate info in the code, since i cant give you an example without showing the code i guess ill just use the auto scroll and live with it... thanks Hello All, I seem to be stuck on a page for my site: The idea was to have a page with a google map and a java-powered custom twitter feed on the page. However, when I got the map embedded, it seems to interfere with the spry navigation menu, and the twitter feed is not working either. I've tried combining commands and tying each script to an event, but I just don't understand enough to get them all to work. I'm a comic artist by trade, so I'm a little new to coding. Any help would be greatly appreciated! you can find the page here./ Thanks in advance for any help! Basically, I have a total of three different JavaScripts that need to be loaded when the user opens the page; let's call them script_a.js, script_b.js, and script_c.js script_a.js and script_b.js each need to be loaded on every page; however, they do very different things (one displays text, the other creates buttons), and in the interest of readability and ease of editing later, I want to keep them separate. script_c.js only needs to be loaded on one page; there will be a few variants (script_c2, script_c3, etc), but again, each of them only needs to be loaded on a single page. The scripts are also too large and unwieldy for me to put them directly into the HTML (basically because I have to do a lot of different switches, and conditionals, and output formatting). At present, the only way I know how to load a JavaScript is to use window.onload, so obviously I'm getting into the issue of competing onLoads. Any help would be appreciated! I want to have multiple instances of jcarousellite on the same page, but as you can see, they both scroll together. I am javascript brain dead, so any help would be appreciated, even if it's something obvious. http://goo.gl/vMLPA I found the following guide, but I need my hand held. http://myintarweb.com/dispatch/multiple-jcarouselite I use this tooltip script on my site: http://craigsworks.com/projects/simpletip/ The problem is that I have several links in the same div class and I want to load different content in tooltip when the mouse is over different links. This is the code I use to load tooltip: Code: $(document).ready(function(){
// Create your tooltips
var api = $(".ttip a").simpletip().simpletip();
api.load('include.php');
});
This is the HTML code: Code: <div class="ttip"> <a userid="1" href="#" >user1</a><br /> <a userid="2" href="#">user2</a> </div> Now the tooltip works only for the first link. For the second one only some default text is shown instead when I hover it! Can anyone please help? Hi i just switched over from 1.5 to 2.2 swfobject. in my admin area only the first video is showing on the page, but on the user side they all show up just fine, same code.. strange. but anyway i was reading this.. http://groups.google.com/group/swfob...1e29c96933dfa0 and it confused me alittle because i have no idea how many vids are going to be display, i have them displaying from a loop. i guess what the article is saying is that you have to call javascript for every one your going to display and use a dif label name for it. but as i said i have no clue, am i suppose to list that 100 times on the page in case i have 100 videos... javascript is really not my cup of tea lol... here is my code.. in the head i have this ... Code: <!-- added for swfobject 2.2 -->
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("player", "9.0.0");
</script
and then in the body i have this.. and like i said there might be 100 vids but it only shows the first one. Code:
begin the loop then do this
<div style="float:left;">
<table border="0" align="left"><tr>
<td align="center"><td align="center"><?=$sql_array->vid_name?><br />
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="175" height="175" id="player" name="player" align="middle">
<param name="movie" value="player.swf" />
<param name="play" value="false" />
<param name="quality" value="high" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=<?=$CONST_LINK_ROOT?>/movies/<?=$sql_array->vid_id?>.flv" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="player.swf" width="175" height="175" align="middle">
<param name="play" value="false" />
<param name="quality" value="high" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=<?=$CONST_LINK_ROOT?>/movies/<?=$sql_array->vid_id?>.flv" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</td></tr></table>
</div>
loop again till done...
so what do i do to show multiples on a page. I've done extensive searching, but each example or explanation i come across is too different from my own, so it's ultimately no use. The problem is that I barely know anything when it comes to Javascript, but yet I'm trying to use it. I have a form on a page. This form contains 6 <select> elements, each with its own <option>Other</option> element. If something isn't listed, the user can choose "Other" and then type into a textbox which appears. I have the following code, which works great if only applied to one <select> element. Code: <select name="How did you hear about us?" id="How did you hear about us?" onchange="makeBox1()">
<option value="0" selected="selected">-- Select --</option>
<option value="1">Search Engine</option>
<option value="2">Referral</option>
<option value="3">Trade Publication</option>
<option value="4">Vendor Web Site</option>
<option value="5">Your Company Website</option>
<option value="6">Direct Mail</option>
<option value="7">Other</option>
</select>
<div id = "inputBox1"></div>
<script type = "text/javascript">
function makeBox1() {
var a = "<input type = 'text' name = 'box1' id = 'box1' class='form popup'>"
if (document.getElementById("How did you hear about us?").value==7) {
document.getElementById("inputBox1").innerHTML = a;
}
else {
document.getElementById("inputBox1").innerHTML = "";
}
}
</script>
I've read that you have to combine onchange events, but i have no idea how to do this (i've done plenty of trial and error, trying to make every item unique, but to no avail. How would i add more scripts like the above? Ok so I have this script and I cant figure out how to add multiple star ratings to one page. PHP Code: <? require "config.php" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="SMARTREVIEWSCRIPT.COM" /> <title>Add Your Review</title> <link rel="stylesheet" href="style.css" type="text/css" /> <script type="text/javascript"> <!-- var set=false; var v=0; var a; function loadStars() { star1 = new Image(12,12); star1.src = "images/staroff.gif"; star2 = new Image(12,12); star2.src= "images/staron.gif"; } function highlight(x) { if (set==false) { y=x*1+1 switch(x) { case "1": document.getElementById(x).src= star2.src; break; case "2":for (i=1;i<y;i++) { document.getElementById(i).src= star2.src; } break; case "3":for (i=1;i<y;i++) { document.getElementById(i).src= star2.src; } break; case "4":for (i=1;i<y;i++) { document.getElementById(i).src= star2.src; } break; case "5":for (i=1;i<y;i++) { document.getElementById(i).src= star2.src; } break; } } } function losehighlight(x) { if (set==false) { for (i=1;i<6;i++) { document.getElementById(i).src=star1.src; document.getElementById('vote').innerHTML="" } } } function setStar(x) { y=x*1+1 if (set==false) { switch(x) { case "1": a="1" flash(a); document.review.rating.value = '1'; break; case "2": a="2" flash(a); document.review.rating.value = '2'; break; case "3": a="3" flash(a); document.review.rating.value = '3'; break; case "4": a="4" flash(a); document.review.rating.value = '4'; break; case "5": a="5" flash(a); document.review.rating.value = '5'; break; } set=true; } } function flash() { y=a*1+1 switch(v) { case 0: for (i=1;i<y;i++) { document.getElementById(i).src= star1.src; } v=1 setTimeout(flash,200) break; case 1: for (i=1;i<y;i++) { document.getElementById(i).src= star2.src; } v=2 setTimeout(flash,200) break; case 2: for (i=1;i<y;i++) { document.getElementById(i).src= star1.src; } v=3 setTimeout(flash,200) break; case 3: for (i=1;i<y;i++) { document.getElementById(i).src= star2.src; } v=4 setTimeout(flash,200) break; case 4: for (i=1;i<y;i++) { document.getElementById(i).src= star1.src; } v=5 setTimeout(flash,200) break; case 5: for (i=1;i<y;i++) { document.getElementById(i).src= star2.src; } v=6 setTimeout(flash,200) break; } } --> </script> </head> <body> <div id="main"> <? // Stores the product sku as a session $_SESSION['sku'] = $_GET['sku']; echo "<form name='review' method='post' action='add.php?sku=".$_SESSION['sku']."'>"; ?> <table width="600" border="0"> <tr> <td><span class="style1">Name: </span></td> <td><input type="text" name="name" maxlength="32" /></td> </tr> <tr> <td><span class="style1">Review Title: </span></td> <td><input size="51" maxlength="60" type="text" name="reviewtitle" value=""/></td> </tr> <tr> <td><span class="style1">Rating: </span></td> <td> <body onload="loadStars()"> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="1" style="width:12px; height:12px; float:left;" /> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="2" style="width:12px; height:12px; float:left;" /> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="3" style="width:12px; height:12px; float:left;" /> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="4" style="width:12px; height:12px; float:left;" /> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="5" style="width:12px; height:12px; float:left;" /> <div id="vote" style="font-family:arial; color:red;"></div> <? echo '<input type="hidden" name="rating">'; ?> </body> </td> </tr> <tr> <td><span class="style1">Rating: </span></td> <td> <body onload="loadStars()"> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="1" style="width:12px; height:12px; float:left;" /> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="2" style="width:12px; height:12px; float:left;" /> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="3" style="width:12px; height:12px; float:left;" /> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="4" style="width:12px; height:12px; float:left;" /> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="5" style="width:12px; height:12px; float:left;" /> <div id="vote" style="font-family:arial; color:red;"></div> <? echo '<input type="hidden" name="rating1">'; ?> </body> </td> </tr> <tr> <td><span class="style1">Comment: </span></td> <td><textarea name="comment" cols="57" rows="6"></textarea></td> </tr> <tr> <td></td> <td> <input type="submit" value="Submit Review" /> </td> </tr> </table> </form> </div> </body> </html> I understand how to modify the rest of the code to insert this into my database but Im not sure how to change this to allow multiple star reviews. I tried to just copy and paste and change some of the values to no avail. I contacted the seller of the script and he recommended I ask here. I appreciate any help. Thank you. I'm trying to create a portfolio website in which I have multiple galleries showing different work on the same page . Each to work separately and change the default image on click. I have seen it work he http://www.fajnechlopaki.com/ I was able to follow this: http://codingforums.com/showthread.php?p=941419 but then couldn't duplicate it. Please help! Thanks. Hi All, I have an issue that is driving me batty. I have two js files called in my <head> section but only the first one listed runs. I know this is supposed to work but it doesn't. What am I missing? I've searched here on the forum and on Google with no real results. I have read the info on javascriptkit but do not believe it applies. One script contains functions that run "onChange" of certain fields while the other runs "onSubmit" of the form. The "onChange" events from the first script run fine. The second one does not run at all. I get no errors. I can find no var conflicts. I even added an alert at the top of the main function in the second script to verify it was loading and the alert never pops up. Head Script Tags: (The first script called works fine.) Code: <script type = "text/javascript" src = "SQFImageSwap.js"></script> <script type = "text/javascript" src = "FormValidation.js"></script> Form Tag Call: (to second script) Code: <form id="Ostandard" name="standard" action="/cgi-bin/standardquoterequest.pl" method="POST" enctype="application/x-www-form-urlencodedl" onSubmit="return validFormSubmit(this)"> Thank You! -Jim |
|||||||