|
JavaScript - Multiple Iframes Adjustment One Page
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 Similar TutorialsI have a website, the main page of which we'll call Parent_page. Within Parent_page there's an iFrame, the name of which is the_iframe. The default source of the_iframe is a page which is default.html. I want to supply people with a URL that: Step 1) Opens Parent_page displaying a source in the_iframe that is NOT default.html (that different source will be called different.html) Step 2) Then -- and this is the troublesome part -- does a page jump to element #12345 within different.html. I've managed Step 1. Here's the Javascript I'm using in the head of Parent_page to allow for Step 1 to happen: <script type="text/javascript"> function loadframe(){ if(window.location.replace) window.frames.the_iframe.location.replace(get('framepage')); else window.frames.the_iframe.location.href=get('framepage'); } function get(key_str) { var query = window.location.search.substr(1); var pairs = query.split("?"); for(var i = 0; i < pairs.length; i++) { var pair = pairs[i].split("="); if(unescape(pair[0]) == key_str) return unescape(pair[1]); } return null; } if (location.search&&get('framepage')!=null) if ( typeof window.addEventListener != "undefined" ) window.addEventListener( "load", loadframe, false ); else if ( typeof window.attachEvent != "undefined" ) window.attachEvent( "onload", loadframe ); else { if ( window.onload != null ) { var oldOnload = window.onload; window.onload = function ( e ) { oldOnload( e ); loadframe(); }; } else window.onload = loadframe; } </script> ...and here's the URL I use that opens different.html in the_iframe instead of default.html: mywebpage.com/parent_page.html?framepage=/different.html Again, that part works just fine. However, to accomplish Step 2, I thought I could just use: mywebpage.com/parent_page.html?framepage=/different.html#12345 But when I do that, suddenly nothing after the ? in the URL works. How can I make this page jump happen? Please, please dumb down your answers! I know HTML decently enough, but I don't know anything, whatsoever, about Javascript. The JS code above I copied from another website. Thanks! I've tried the following: Code: <script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
if ( top.location.href!= window.location.href ) {
document.getElementById( 'bodybg' ).style.background='#12111C';
}
// ]]>
</script>
and Code: <script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
if ( top.location == location ) {
document.getElementById( 'bodybg' ).style.background='#12111C';
}
// ]]>
</script>
I've tested the if statement and the set background code, using a button. I'm guessing it fails since there is no background when the script runs. Any ideas? hi, I am trying to adjust the script for one of the raster effects in scriptographer (a plugin for illustrator). It uses javascript and I realise from searching this forum that members here are mainly versed in web-based scripts so may not be able to help me but if anyone can even hazzard a guess - that would be most appreciated. The script takes a group of items (any basic shapes you draw in illustrator, i.e. a square, circle, etc) that you specify, and, using a rasta image that you specify (eg. a pixel based image), it creates a half-tone image out of the items. it does this by placing copies (clones) of the items in a corresponding possition to each of the image pixels and depending on the lightness of the pixel, it will vary the size of the item (so a dark pixel will have a large item and a light pixel will have a small item). It also gives the choice of rotating the items depending on the same perameters. The problem I have with it is that it places the items, in possition for each pixel, randomly - whereas I want them to be placed in order. Here is the code: Code: include('Raster.js');
function createDot(x, y, dots, radius) {
if (radius > 0) {
// Pick a dot at random:
var item = dots[Math.floor(dots.length * Math.random())].clone();
item.position += new Point(x, y) * values.size;
item.rotate(radius * values.rotation * Math.PI / 180.0, item.position);
item.scale((radius * radius * values.gradiation + radius * (1.0 - values.gradiation)) * values.scale);
return item;
}
}
if (initRaster()) {
var components = {
size: { value: 10, label: 'Grid Size'} ,
scale: { value: 100, label: 'Object Scale (%)'},
gradiation: { value: 0.5, label: 'Gradiation'},
rotation: { value: 360.0, label: 'Rotation'}
};
var values = Dialog.prompt('Enter Raster Values:', components);
if (values) {
values.scale /= 100;
executeRaster(createDot, true);
}
}
it looks to me that it is this line: Code: var item = dots[Math.floor(dots.length * Math.random())].clone(); that is doing the random placement but I can't figure out how to dissable it. if I delete the line then it doesn't run. The above coding is like an extension to another set of coding which is the main script for doing rasta effects. That coding is: Code: // Raster.js is a base script for all the raster scripts
// that take a selection of a raster and a path object
// as a starting point for some raster processing
// the only thing that has to be defined is the drawDot
// function
var raster = null, dots = [], pixelCount;
Item.prototype.getCompoundArea = function(area) {
if (!area) area = 0;
if (this instanceof Path) return area + this.area;
else if (this instanceof CompoundPath || this instanceof Group) {
var child = this.firstChild;
while (child) {
area = child.getCompoundArea(area);
child = child.nextSibling;
}
}
return area;
};
function initRaster() {
var error = false;
if (!document) {
Dialog.alert('Please open a document first.');
return false;
}
var rasters = document.getItems({
type: [Raster, PlacedFile],
selected: true
});
for (var i = 0, l = rasters.length; i < l; i++) {
rasters[i].selected = false;
}
var sel = document.selectedItems;
if (rasters.length) {
raster = rasters.first;
if (raster instanceof PlacedFile && !raster.eps) {
// Embed placed images so the raster script can access pixels
raster = raster.embed(false);
}
for (var i = 0; i < sel.length; i++) {
var obj = sel[i];
if (!obj.isAncestor(raster))
dots.push(obj);
}
}
if (!raster || !dots.length) {
Dialog.alert('Please select both a raster item\nand a graphic item.');
return false;
} else {
pixelCount = raster.height * raster.width;
var sure = true;
if (pixelCount > 20000) {
script.showProgress = false;
sure = Dialog.confirm('The image you\'re about to rasterize contains ' + pixelCount + ' pixels.\nRasterizing could take a long time.\nAre you sure you want to proceed?');
script.showProgress = true;
}
return sure;
}
}
function executeRaster(createDot, multiple) {
document.deselectAll();
var group = new Group();
for (var i = 0; i < dots.length; i++) {
// Create a copy of each dot that is moved to the origin so
// rasters that scale the dot are simple to realize:
var dot = dots[i] = dots[i].clone();
var origin = dot.bounds.center;
dot.position -= origin;
// Scale multiple dots to the same blackness as the first one
if (multiple && i > 0)
dot.scale(Math.sqrt(Math.abs(dots[0].getCompoundArea()) / Math.abs(dot.getCompoundArea())));
}
for (var y = 0; y < raster.height; y++) {
for (var x = 0; x < raster.width; x++) {
illustrator.updateProgress(y * raster.width + x + 1, pixelCount);
var radius = raster.getPixel(x, y).gray;
var obj = createDot(x, y, multiple ? dots : dots[0], radius);
if (obj) {
obj.position += origin;
group.appendTop(obj);
}
}
document.redraw();
}
for (var i = 0; i < dots.length; i++)
dots[i].remove();
return group;
}
any ideas? Got a quick question, I need to adjust the below code, so that when a question is open and you click on different question it automatically hides the question you opened first. How would I do that? Code:
<!doctype html>
<html>
<head>
<title>TEST TEMPLATE</title>
<script type="text/javascript">
function showHide(id) {
var div = document.getElementById(id);
div.style.display = ( div.style.display == "none") ? "block" : "none";
}
</script>
</head>
<body>
<!------ QUESTIONS ------>
<p>Change lines <li> to divs or whatever</p>
<li onclick="showHide('FAQ1')">FAQ one</li>
<li onclick="showHide('FAQ2')">FAQ two</li>
<li onclick="showHide('FAQ3')">FAQ three</li>
<!------ ANSWERS ------>
<div id="FAQ1" style="display:none;"><p>Ans one</p></div>
<div id="FAQ2" style="display:none;"><p>Ans two</p></div>
<div id="FAQ3" style="display:none;"><p>Ans three etc etc.</p></div>
</body>
</html>
Thanks, Jon Hello, I'm not sure what to call it. The only way to describe it is a 'window frame'. I need to increase the size. I've been waiting for days to get any kind of response from the theme developers, ElegantThemes.com. If you look at http://www.woodstock2012.com and you click something from the menu a window opens that is very small that has big borders and heavy padding around it. I need to increase the size of this and adjust some margins and padding. Can anyone give me a hand? I sure would appreciate it. This is the code in my custom.js file...the file the admin told me to adjust. Which I did and it didn't work. This is the original code: He said simply, adjust this code... Code: $et_main_content.css( { top : '77px', width : '800px', height : ( et_window_height - 200 ), marginTop : 0, marginLeft : '-400px' } ).removeClass();
I found this code twice in the file: Code: $et_main_content.css( { top : '77px', width : '900px', height : ( et_window_height - 200 ), marginTop : 0, marginLeft : '-400px' },
and I also found this once: Code: $et_main_content.animate( { top : '77px', width : '800px', height : ( et_window_height - 200 ), marginTop : 0, marginLeft : '-400px' },
I change them to: Code: $et_main_content.css( { top : '27px', width : '900px', height : ( et_window_height - 200 ), marginTop : 0, marginLeft : '-450px' },
and Code: $et_main_content.animate( { top : '27px', width : '900px', height : ( et_window_height - 200 ), marginTop : 0, marginLeft : '-450px' },
The results for this change are as such...if I click to a page from the main 'drop in' menu the page loads wide but the minute I use an arrow to change pages or click a page from the menu at the bottom of the page the size reverts back to the 800px. It doesn't lose the margin change from -400px to -450px but it does lose the width. I also need to know how to make it taller and reach closer to the bottom menu and the content slider needs to be adjusted also. I've attached the full js file. If anyone can help me out here I sure would appreciate it. Thank you in advance. Doug Hello good coders! Thanks to the wonderful script provided by coothead he http://www.codingforums.com/showthread.php?t=87036 I was wondering how I could adjust the transition/fade speed between the images in the script? I tried a couple of different ways, but I couldn't get it working. Does anyone know how I can adjust this in a cross-browser compatible way? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>multiple image maps</title>
<base href="http://coothead.homestead.com/files/"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
#mapImage_holder {
text-align:center;
}
#mapImage {
border:1px solid #000;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var maps=new Array();
maps[0]='dots.gif,#dots';
maps[1]='map.jpg,#blood';
maps[2]='apple0.jpg,#apples';
var c=0;
var speed=1000*10; //set for 10 secs, change to suit needs.
function swapMap() {
obj=document.getElementById('mapImage');
if(c==maps.length) {
c=0;
}
obj.src=maps[c].split(',')[0];
obj.useMap=maps[c].split(',')[1];
c++;
setTimeout('swapMap()',speed);
}
window.onload=swapMap;
//]]>
</script>
</head>
<body>
<div id="mapImage_holder">
<img id="mapImage" src="dots.gif" alt="" usemap="#dots"/>
</div>
<div>
<map id="dots" name="dots">
<area coords="85,40,110,65" href="http://www.bbc.co.uk" alt="" />
<area coords="225,100,250,125" href="http://www.itv.com/" alt=""/>
<area coords="345,140,370,165" href="http://www.channel4.com/" alt=""/>
<area coords="405,270,430,295" href="http://www.guardian.co.uk/" alt=""/>
<area coords="35,290,60,315" href="http://www.independent.co.uk/" alt=""/>
<area coords="605,460,630,485" href="http://www.thesun.co.uk/" alt=""/>
</map>
<map id="blood" name="blood">
<area coords="40,144,80,171" href="http://www.codingforums.com/" alt="" />
<area coords="112,144,152,171" href="http://www.w3schools.com/" alt="" />
<area coords="184,144,224,171" href="http://w3c.org/" alt="" />
<area coords="256,144,296,171" href="http://www.alistapart.com/" alt=""/>
</map>
<map id="apples" name="apples">
<area coords="0,0,116,146" href="http://www.axialis.com/" alt=""/>
<area coords="124,0,236,146" href="http://www.photoshopsupport.com/" alt=""/>
<area coords="244,0,360,146" href="http://www.photoshopuser.com/" alt=""/>
<area coords="0,154,116,280" href="http://www.planetphotoshop.com/" alt=""/>
<area coords="124,154,236,280" href="http://www.photoshopcafe.com/" alt=""/>
<area coords="244,154,360,280" href="http://www.mozilla.com/" alt=""/>
</map>
</div>
</body>
</html>
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 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 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>
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 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 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? 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? 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. 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 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 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! 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! 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. |
|||||||