|
JavaScript - Created A Cookie, But I'm Stuck On One Part....
Hello,
I have an expandable banner on my website. It starts out big and then after 5 seconds, the image gradually shrinks until is replace by a normal size banner. I one want this to happen once per visit. I've written a cookie, but I'm stuck on the last part. Granted I'm new to this, but I think I need to place this: Code: if ( getCookie('myCookie') != null ) return;
setCookie('myCookie', 'ANY VALUE');
into this. But my question is where? I'm stuck and everyplace I stick it brings an error. Code: <img src="/lightbox1.jpg" alt="" id="banner">
<script type="text/javascript">
<script type = "text/javascript">
function setCookie(isName,isVal) {
document.cookie = isName + "=" + isVal + ";expires=" + "path=/";
}
function getCookie(isName){
cookieStr = document.cookie;
startSlice = cookieStr.indexOf(isName+"=");
if (startSlice == -1) {return null;}
endSlice = cookieStr.indexOf(";",startSlice+1);
if (endSlice == -1){endSlice = cookieStr.length}
isData = cookieStr.substring(startSlice,endSlice)
isValue = isData.substring(isData.indexOf("=")+1,isData.length);
return isValue;
function shrink()
{
if(banner.altered!='yes' && banner.width>50)
{
banner.width-=7;
setTimeout("shrink()", 10);
}
else
{
banner.src=new_pic.src;
banner.width=new_pic.width;
banner.height=new_pic.height;
banner.altered='yes';
}
}
var old_pic=new Image();
old_pic.src='/lightbox1.jpg';
var new_pic=new Image();
new_pic.src='/support.jpg';
var banner=document.getElementById('banner');
banner.onclick=shrink;
setTimeout("shrink()", 5000);
</script>
Any help? Similar TutorialsHi everyone, I am using a jQuery cookie script to set the cookie of some elements on my website. One of the problems is that I need the cookie to not expire after one day, I need it to expire after a while (I'm going to start off with a year). Here's my script, the red part is what I've been editing. Code: /**
* Cookie plugin
*
* Copyright (c) 2006 Klaus Hartl (stilbuero.de)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
/**
* Create a cookie with the given name and value and other optional parameters.
*
* @example $.cookie('the_cookie', 'the_value');
* @desc Set the value of a cookie.
* @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secu true });
* @desc Create a cookie with all available options.
* @example $.cookie('the_cookie', 'the_value');
* @desc Create a session cookie.
* @example $.cookie('the_cookie', null);
* @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
* used when the cookie was set.
*
* @param String name The name of the cookie.
* @param String value The value of the cookie.
* @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
* @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
* If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
* If set to null or omitted, the cookie will be a session cookie and will not be retained
* when the the browser exits.
* @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
* @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
* @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
* require a secure protocol (like HTTPS).
* @type undefined
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/
/**
* Get the value of a cookie with the given name.
*
* @example $.cookie('the_cookie');
* @desc Get the value of a cookie.
*
* @param String name The name of the cookie.
* @return The value of the cookie.
* @type String
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/
jQuery.cookie = function(name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000 * 365));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
// CAUTION: Needed to parenthesize options.path and options.domain
// in the following expressions, otherwise they evaluate to undefined
// in the packed version for some reason...
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};
Alright, so, I'm wanting to create a Point and Click Content editor (without the need of a admin area -- just a admin login) that is similar to the Plesk Sitebuilder. Does anyone know if this has already been created? If so, can you please link me to it.. If not, Anyone have any idea on how to obtain this? Thanks! Another example from Sams Teach Your self JavaScript. I have created the new object it prints the business cards out that are stored as you can see here. Code: function PrintCard() {
line1 = "<b>Name: </b>" + this.name + "<br>\n";
line2 = "<b>Address: </b>" + this.address + "<br>\n";
line3 = "<b>Work Phone: </b>" + this.workplace + "<br>\n";
line4 = "<b>Home Phone: </b>" + this.homephone + "<hr>\n";
document.write(line1,line2,line3,line4);
}
function Card(name,address,work,home) {
this.name = name;
this.address = address;
this.workplace = work;
this.homephone = home;
this.PrintCard = PrintCard;
}
// Create the objects.
sue = new Card ("Sue Suthers", "123 Elm Street", "555-1234", "555-9876");
chris = new Card ("Chris Suthers", "567 Rum Road", "555-4990", "555-8127");
james = new Card ("James Suthers", "17 Junk Court", "555-3334", "555-1596");
ken = new Card ("Ken Suthers", "1 Frank Circuit", "555-2365", "555-23659");
This is all good and i understand it. It is this the printing part i want to know if there is another way to print all 4 of them by naming them in a different way and looping through to print them i think i just answered my own question but it there a built in way to print all of the different cards? here is the current code. Code: //print Cards sue.PrintCard(); chris.PrintCard(); james.PrintCard(); ken.PrintCard(); Thanks Hi all Okay, I have 3 dropdown options each with its own list of items. Items are selected using radio buttons and on selection provides an image above it of what you have selected. What I need is the 'continue' button to be hidden until a selection is made from each of the lists. I gave it a try but did not come right, here is some code for what I have already. ** Please excuse the use of tables still training myself to use divs consistently. Code: <div id="Tabdoc_content3" class="Tabdoc_tabdivcontent" style="display:none;background : url(images/back-sweets.png) no-repeat; background-size: 100%;">
<div class="wrapperAttribsOptions">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr valign="top">
<td width="240px"></td>
<td>
<script language="javascript">
function toggle1(showHideDiv, switchImgTag) {
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchImgTag);
if(ele.style.display == "block") {
ele.style.display = "none";
imageEle.innerHTML = '<img src="/images/tabs/button_open_sweet1.gif">';
}
else {
ele.style.display = "block";
imageEle.innerHTML = '<img src="/images/tabs/button_close_sweet1.gif">';
}
}
function toggle2(showHideDiv, switchImgTag) {
var ele2 = document.getElementById(showHideDiv);
var imageEle2 = document.getElementById(switchImgTag);
if(ele2.style.display == "block") {
ele2.style.display = "none";
imageEle2.innerHTML = '<img src="/images/tabs/button_open_sweet2.gif">';
}
else {
ele2.style.display = "block";
imageEle2.innerHTML = '<img src="/images/tabs/button_close_sweet2.gif">';
}
}
function toggle3(showHideDiv, switchImgTag) {
var ele3 = document.getElementById(showHideDiv);
var imageEle3 = document.getElementById(switchImgTag);
if(ele3.style.display == "block") {
ele3.style.display = "none";
imageEle3.innerHTML = '<img src="/images/tabs/button_open_sweet3.gif">';
}
else {
ele3.style.display = "block";
imageEle3.innerHTML = '<img src="/images/tabs/button_close_sweet3.gif">';
}
}
</script>
<table cellpadding="0" cellspacing="0" border="0">
<tr valign="top">
<td align="left" width="230px" style="padding-left:20px;">
<script type="text/javascript">
// For: http://www.codingforums.com/showthread.php?p=1107835#post1107835
var picFile0 = ['sweet1.png','sweet2.png','sweet3.png','sweet4.png','sweet5.png','sweet6.png','sweet7.png','sweet8.png','sweet9.png','sweet10.png','sweet11.png','sweet12.png','sweet13.png','sweet14.png','sweet15.png','sweet16.png','sweet17.png','sweet18.png']; // each can be expanded with more images
var picFile1 = ['sweet1.png','sweet2.png','sweet3.png','sweet4.png','sweet5.png','sweet6.png','sweet7.png','sweet8.png','sweet9.png','sweet10.png','sweet11.png','sweet12.png','sweet13.png','sweet14.png','sweet15.png','sweet16.png','sweet17.png','sweet18.png'];
var picFile2 = ['sweet1.png','sweet2.png','sweet3.png','sweet4.png','sweet5.png','sweet6.png','sweet7.png','sweet8.png','sweet9.png','sweet10.png','sweet11.png','sweet12.png','sweet13.png','sweet14.png','sweet15.png','sweet16.png','sweet17.png','sweet18.png'];
var imgPtr = [
// [current_image,baseURL,filenames,display_image]
[0,"/images/tabs/",'imgSrc0'],
[0,"/images/tabs/",'imgSrc1'],
[0,"/images/tabs/",'imgSrc2'] // No comma after last entry
];
// Create function to load image
function loadImg(imgGroup) {
var picFile = [];
var imgID = imgPtr[imgGroup][2];
switch (imgGroup) {
case '0' : picFile=[].concat(picFile0); break;
case '1' : picFile=[].concat(picFile1); break;
case '2' : picFile=[].concat(picFile2); break;
default : alert('Invalid assignment\n'+imgGroup); break;
}
var ptr = imgPtr[imgGroup][0];
if (ptr < 0) { ptr = 0; }
if (ptr > picFile.length-1) { ptr = picFile.length-1; }
document.getElementById(imgID).src = imgPtr[imgGroup][1]+picFile[ptr];
imgPtr[imgGroup][0] = ptr;
var rbtn = 'rg'+imgGroup+ptr; // alert(rbtn);
document.getElementById(rbtn).checked = true;
}
// Create link function to switch image backward
function prev(imgGroup) {
imgPtr[imgGroup][0]--;
loadImg(imgGroup);
}
// Create link function to switch image forward
function next(imgGroup){
imgPtr[imgGroup][0]++;
loadImg(imgGroup);
}
// Load function after page loads
onload = function() {
loadImg('0');
loadImg('1');
loadImg('2');
}
</script>
<div style="width:230px;text-align:center;">
<img name="imgSrc0" id="imgSrc0" src="/images/tabs/sweetEmpty.png">
</div>
<div id="headerDivImg">
<div id="titleTextImg"></div>
<a id="imageDivLink" href="javascript:toggle1('contentDivImg', 'imageDivLink');">
<img src="/images/tabs/button_open_sweet1.gif"></a>
</div>
<div id="contentDivImg" class="sweetlist" style="display: none;">
<p>BOILED SWEETS - STANDARD</p>
<input name="id[18]" value="81" id="attrib-18-81" type="radio" onclick="imgPtr[0][0]=12;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-81"> Kola Cubes</label><br />
<input name="id[18]" value="82" id="attrib-18-82" type="radio" onclick="imgPtr[0][0]=13;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-82"> Pineapple Cubes</label><br />
<input name="id[18]" value="79" id="attrib-18-79" type="radio" onclick="imgPtr[0][0]=10;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-79"> Rhubarb and Custard</label><br />
<input name="id[18]" value="80" id="attrib-18-80" type="radio" onclick="imgPtr[0][0]=11;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-80"> Strawberry and Cream</label><br /><br />
<p>BOILED SWEETS - SPECIAL</p>
<input name="id[18]" value="76" id="attrib-18-76" type="radio" onclick="imgPtr[0][0]=7;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-76"> Fizzy Blueberry</label><br />
<input name="id[18]" value="61" id="attrib-18-61" type="radio" onclick="imgPtr[0][0]=0;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-61"> Fruits of the Forest</label><br />
<input name="id[18]" value="74" id="attrib-18-74" type="radio" onclick="imgPtr[0][0]=5;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-74"> Lemon and Lime</label><br />
<input name="id[18]" value="62" id="attrib-18-62" type="radio" onclick="imgPtr[0][0]=1;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-62"> Pear Drops</label><br />
<input name="id[18]" value="77" id="attrib-18-77" type="radio" onclick="imgPtr[0][0]=8;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-77"> Sour Cherry</label><br />
<input name="id[18]" value="73" id="attrib-18-73" type="radio" onclick="imgPtr[0][0]=4;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-73"> Wild Strawberry</label><br /><br />
<p>GUMMY SWEETS - ORGANIC</p>
<input name="id[18]" value="85" id="attrib-18-85" type="radio" onclick="imgPtr[0][0]=16;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-85"> Organic Fruit Cocktail</label><br />
<input name="id[18]" value="86" id="attrib-18-86" type="radio" onclick="imgPtr[0][0]=17;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-86"> Organic Jelly Bears</label><br />
<input name="id[18]" value="83" id="attrib-18-83" type="radio" onclick="imgPtr[0][0]=14;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-83"> Organic Sour Worms</label><br />
<input name="id[18]" value="84" id="attrib-18-84" type="radio" onclick="imgPtr[0][0]=15;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-84"> Organic Sugar Bears</label><br />
</div>
</td>
<td align="left" width="230px" style="padding-left:10px;">
<div style="width:230px;text-align:center;">
<img name="imgSrc1" id="imgSrc1" src="/images/tabs/sweetEmpty.png">
</div>
<div id="headerDivImg2">
<div id="titleTextImg2"></div>
<a id="imageDivLink2" href="javascript:toggle2('contentDivImg2', 'imageDivLink2');"><img src="/images/tabs/button_open_sweet2.gif"></a>
</div>
<div id="contentDivImg2" class="sweetlist" style="display: none;">
<p>BOILED SWEETS - STANDARD</p>
<input name="id[19]" value="99" id="attrib-19-99" type="radio" onclick="imgPtr[1][0]=12;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-99"> Kola Cubes</label><br />
<input name="id[19]" value="100" id="attrib-19-100" type="radio" onclick="imgPtr[1][0]=13;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-100"> Pineapple Cubes</label><br />
<input name="id[19]" value="97" id="attrib-19-97" type="radio" onclick="imgPtr[1][0]=10;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-97"> Rhubarb and Custard</label><br />
<input name="id[19]" value="98" id="attrib-19-98" type="radio" onclick="imgPtr[1][0]=11;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-98"> Strawberry and Cream</label><br /><br />
<p>BOILED SWEETS - SPECIAL</p>
<input name="id[19]" value="94" id="attrib-19-94" type="radio" onclick="imgPtr[1][0]=7;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-94"> Fizzy Blueberry</label><br />
<input name="id[19]" value="87" id="attrib-19-87" type="radio" onclick="imgPtr[1][0]=0;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-87"> Fruits of the Forest</label><br />
<input name="id[19]" value="92" id="attrib-19-92" type="radio" onclick="imgPtr[1][0]=5;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-92"> Lemon and Lime</label><br />
<input name="id[19]" value="88" id="attrib-19-88" type="radio" onclick="imgPtr[1][0]=1;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-88"> Pear Drops</label><br />
<input name="id[19]" value="95" id="attrib-19-95" type="radio" onclick="imgPtr[1][0]=8;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-95"> Sour Cherry</label><br />
<input name="id[19]" value="91" id="attrib-19-91" type="radio" onclick="imgPtr[1][0]=4;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-91"> Wild Strawberry</label><br /><br />
<p>GUMMY SWEETS - ORGANIC</p>
<input name="id[19]" value="103" id="attrib-19-103" type="radio" onclick="imgPtr[1][0]=16;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-103"> Organic Fruit Cocktail</label><br />
<input name="id[19]" value="104" id="attrib-19-104" type="radio" onclick="imgPtr[1][0]=17;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-104"> Organic Jelly Bears</label><br />
<input name="id[19]" value="101" id="attrib-19-101" type="radio" onclick="imgPtr[1][0]=14;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-101"> Organic Sour Worms</label><br />
<input name="id[19]" value="102" id="attrib-19-102" type="radio" onclick="imgPtr[1][0]=15;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-102"> Organic Sugar Bears</label><br />
</div>
</td>
<td align="left" width="230px" style="padding-left:10px;">
<div style="width:230px;text-align:center;">
<img name="imgSrc2" id="imgSrc2" src="/images/tabs/sweetEmpty.png">
</div>
<div id="headerDivImg3">
<div id="titleTextImg3"></div>
<a id="imageDivLink3" href="javascript:toggle3('contentDivImg3', 'imageDivLink3');"><img src="/images/tabs/button_open_sweet3.gif"></a>
</div>
<div id="contentDivImg3" class="sweetlist" style="display: none;">
<p>BOILED SWEETS - STANDARD</p>
<input name="id[20]" value="117" id="attrib-20-117" type="radio" onclick="imgPtr[2][0]=12;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-117"> Kola Cubes</label><br />
<input name="id[20]" value="118" id="attrib-20-118" type="radio" onclick="imgPtr[2][0]=13;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-118"> Pineapple Cubes</label><br />
<input name="id[20]" value="115" id="attrib-20-115" type="radio" onclick="imgPtr[2][0]=10;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-115"> Rhubarb and Custard</label><br />
<input name="id[20]" value="116" id="attrib-20-116" type="radio" onclick="imgPtr[2][0]=11;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-116"> Strawberry and Cream</label><br /><br />
<p>BOILED SWEETS - SPECIAL</p>
<input name="id[20]" value="112" id="attrib-20-112" type="radio" onclick="imgPtr[2][0]=7loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-112"> Fizzy Blueberry</label><br />
<input name="id[20]" value="105" id="attrib-20-105" type="radio" onclick="imgPtr[2][0]=0;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-105"> Fruits of the Forest</label><br />
<input name="id[20]" value="110" id="attrib-20-110" type="radio" onclick="imgPtr[2][0]=5;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-110"> Lemon and Lime</label><br />
<input name="id[20]" value="106" id="attrib-20-106" type="radio" onclick="imgPtr[2][0]=1;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-106"> Pear Drops</label><br />
<input name="id[20]" value="113" id="attrib-20-113" type="radio" onclick="imgPtr[2][0]=8;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-113"> Sour Cherry</label><br />
<input name="id[20]" value="109" id="attrib-20-109" type="radio" onclick="imgPtr[2][0]=4;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-109"> Wild Strawberry</label><br /><br />
<p>GUMMY SWEETS - ORGANIC</p>
<input name="id[20]" value="121" id="attrib-20-121" type="radio" onclick="imgPtr[2][0]=16;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-121"> Organic Fruit Cocktail</label><br />
<input name="id[20]" value="122" id="attrib-20-122" type="radio" onclick="imgPtr[2][0]=17;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-122"> Organic Jelly Bears</label><br />
<input name="id[20]" value="119" id="attrib-20-119" type="radio" onclick="imgPtr[2][0]=14;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-119"> Organic Sour Worms</label><br />
<input name="id[20]" value="120" id="attrib-20-120" type="radio" onclick="imgPtr[2][0]=15;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-120"> Organic Sugar Bears</label><br />
</div>
</td>
</tr>
</table>
<br class="clearboth" />
</td>
</tr>
</table>
</div>
<div class="forward Tabdoc_pointer" style="margin-top:20px;">
<img src="images/tabs/button_continue.gif" alt="CONTINUE" onclick="Tabdoc_ManageDisplay(4)">
</div>
<div class="back Tabdoc_pointer" style="margin-top:20px;margin-left:20px;">
<img src="images/tabs/button_back.gif" alt="BACK" onclick="Tabdoc_ManageDisplay(2)">
</div>
</div>
If anyone can help, I would really appreciate it. Thanks in advance Jay. Hi! I'm new with javascript and jQuery in general. So if anyone could help me out it would be greatly appreciated. When the browser is finished loading I want #page2 to be loaded automatically. I can get it to work with: $(document).ready(function () { $('#page2').delay(200); $('#page2').show('slow'); }); But when I click on page2 (when first launched) it wants to load again. It seems like it doesn't understand #page2 is already loaded. I want it to do absolutely nothing when the user clicks on the page2 navigation button. I hope that I explained my problem correctly. Again, I'm a newbie at this and the fact that I got to this point is already a miracle. Thanks in advance! This is my code so far: $(document).ready(function () { $('#page2').delay(200); $('#page2').show('slow'); }); $(function(){ $('#content:not(.nav_block)>dt:not(.active) a,footer .privacy:not(.active) a[rel=privacy]').live('click',function(){ var next=this.rel=='privacy'? $('#privacy'):$(this).parent().next(), width=next.width(), parent=next.parent(), visible=parent.find('>dd:visible').css({overflow:'hidden'}) parent.addClass('nav_block') $('#content>dt,.privacy').removeClass('active') $(this).parent().addClass('active') if(this.rel=='privacy') $('#content>dt>a').removeClass('active').animate({opacity:0}) if(parent.css('left')!=0) next.parent().animate({left:0}) next.show().css({width:'64px'}).stop().animate({width:width+'px'},{ step:visible.length?function(now){ visible.width(width-now) }:'',complete:function(){ next.css({overflow:'visible'}) visible.css({width:width+'px'}).hide() parent.removeClass('nav_block') }}) return false }) <!-- THE PROBLEM SHOULD BE HERE, RIGHT ? --> $('.active a,#content.nav_block').live('click',function(){ return false }) Download the file: http://www.filedropper.com/testfile_1 No matter what I do, I have these two scripts, I really want on the same page 1. Is carouselGallery 2. Is flv player <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> <!-- body { text-align:center; margin-top: 100px; background-color: #111; } --> </style> <script type="text/javascript" src="js/swfobject.js"></script> <script type="text/javascript"> var flashvars = { imagesXmlPath: "" }; var params = { base: "", salign:"lt", menu:"false" }; var attributes = { }; swfobject.embedSWF("carouselGallery.swf", "myContent", "800", "400", "9.0.0", "expressInstall.swf", flashvars, params, attributes); </script></head> <body> <div id="myContent"> <h1>Alternative content</h1> <p><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></p> </div> </body> </html> Second Is <!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" lang="en" xml:lang="en"> <head> <title>FLV Player FlashVars Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="swfobject/swfobject.js"></script> </head> <body> <div id="myContent"> <h1>Please Upgrade Your Flash Player</h1> <p><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></p> </div> <script type="text/javascript"> var flashvars = { flvpFolderLocation: "flvplayer/", flvpVideoSource: "your_video_source", flvpWidth: "640", flvpHeight: "360" }; var params = { menu: "true", allowfullscreen: "true" }; swfobject.embedSWF("FLVplayer.swf", "myContent", "640", "360", "9.0.0", "swfobject/expressInstall.swf", flashvars, params); </script> </body> </html> Can someone please help me figure out how to get both to display on the page? Any help would be GREATLY appreciated. I'm just learning code. I did a small reaction game project. The idea is that the player is to click on only circles. It works unless a square comes up & is clicked on. My code is he Learning Javascript Here is the actual game: Learning Javascript Any help is appreciated! I have an input box "product" besides it there is an add input button which adds another input box product upon clicking.This array of input boxes I have created is through document.createElement('input'). My autocomplete is working for the initial input box....now when I click add Input button for the generated box also the autocomplete shld work...how do I make it work?? PS:Autocomplete script is working so I didnt post it here.... I just want it to make it working dynamically created i/p boxes I want it to hide or kill the div box with an onmouseout I've tried listeners functions and just plain vars. i can find a solution maybe here this is the code in the external file Code: ////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
function move_box(an, box) {
var cleft = 0;
var ctop = 0;
var obj = an;
while (obj.offsetParent) {
cleft += obj.offsetLeft;
ctop += obj.offsetTop;
obj = obj.offsetParent;
}
box.style.left = cleft + 'px';
ctop += an.offsetHeight + 8;
if (document.body.currentStyle &&
document.body.currentStyle['marginTop']) {
ctop += parseInt(
document.body.currentStyle['marginTop']);
}
box.style.top = ctop + 'px';
}
function show_hide_box (an, width, height, borderStyle) {
var href = an.href;
var boxdiv = document.getElementById(href);
if (boxdiv != null) {
if (boxdiv.style.display=='none') {
move_box(an, boxdiv);
boxdiv.style.display='block';
} else
boxdiv.style.display='none';
return false;
}
boxdiv = document.createElement('div');
boxdiv.setAttribute('id', href);
boxdiv.style.display = 'block';
boxdiv.style.position = 'absolute';
boxdiv.style.width = width + 'px';
boxdiv.style.height = height + 'px';
boxdiv.style.border = borderStyle;
boxdiv.style.backgroundColor = '#fff';
var contents = document.createElement('iframe');
contents.scrolling = 'no';
contents.frameBorder = '0';
contents.style.width = width + 'px';
contents.style.height = height + 'px';
contents.src = href;
boxdiv.appendChild(contents);
document.body.appendChild(boxdiv);
move_box(an, boxdiv);
boxdiv.addEventListener('mouseout', show_hide_box(boxdiv),false);
return false;
}
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
And you put this code in the body to call it. Code: /////////////////////////////////////////////////////////////////// <a href="../Menus/cleaners.html" onMouseOver="return show_hide_box(this,416,124,'2px')" >Cleaners</a> /////////////////////////////////////////////////////////////////// hello people, can anyone help me with this? i have div element and picture inside it, and that picture is created with php gd (<img src="file.php"). What i need is a function which create new image and place it in that div. I don't know how to create new image with javascript when i call php file with header content type image. something like this?? function newImage(){ document.getElementById("foo").innerHtml = "<img src='file.php'/>"; } but of course this doesn't work so how to do that? thnx Can anyone tell why IE does not handle this form submit properly? Instead of going to the action of the form in formString, it just refreshes the page. Works fine in Firefox and Chrome. Code: Here is how the form is placed on the page and then submitted:
document.getElementById('crtDiv').innerHTML = formString;
document.getElementById('crtForm').submit();
Here is an example of how the formString is built:
formString = "<form action='https://www.paypal.com/cgi-bin/webscr' method='POST' id='crtForm'>";
formString += BUNCH O INPUTS
formString += "</form>";
I've been watching an application called JSPDF http://code.google.com/p/jspdf/ that creates a PDF file solely in client side javascript. In a nutshell, it generates pdf bytes (called buffer), encodes the bytes into base64, and opens it in the browser: Code: document.location.href = 'data:application/pdf;base64,' + Base64.encode(buffer); This works for me in firefox and chrome, but not IE. My question: is there a better way to reform the file download/opening in javascript? They provide an example with downloadify and that may be acceptable unless you are trying to eliminate flash from the equation. Thanks I would love some help on this code I was assigned to debug...I never studied javascript nor have ever coded really, yet my boss(im volunteering at a company) is having me debug a website and I can't seem to figure this out. The problem is the menus stay expanded when the mouse is out, but when you activate the onMouseOver, it fixes it. Here is an extremely simplified version but it shows the problem. And I greatly appreciate any help I can get. Thanks in advance! Oh and I didn't write any of this + im a noob at coding so if the answer was explained with this in mind that'd be great! ----------- <!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" xml:lang="en" lang="en"> <!-- xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> --> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Yep</title> <link href="ReferenceFunctions.css" rel="stylesheet" type="text/css" /> <!--<script type="text/javascript" src="/offices/management_support/js/tab-view.js"></script>--> <!-- ************************ BEGIN Section 1 *************************************** --> <script type="text/javascript"> function ManageTabPanelDisplay() { // // Between the parenthesis, list the id's of the div's that // will be effected when tabs are clicked. List in any // order. Put the id's in single quotes (apostrophes) // and separate them with a comma -- all one line. // var idlist = new Array('tab1focus','tab2focus','tab3focus','tab1ready','tab2ready','tab3ready','content1','content2', 'content3'); // No other customizations are necessary. if(arguments.length < 1) { return; } for(var i = 0; i < idlist.length; i++) { var block = false; for(var ii = 0; ii < arguments.length; ii++) { if(idlist[i] == arguments[ii]) { block = true; break; } } if(block) { document.getElementById(idlist[i]).style.display = "block"; } else { document.getElementById(idlist[i]).style.display = "none"; } } } //SuckerTree Horizontal Menu (Sept 14th, 06) //By Dynamic Drive: http://www.dynamicdrive.com/style/ var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas function buildsubmenus_horizontal(){ for (var i=0; i<menuids.length; i++){ var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul") for (var t=0; t<ultags.length; t++){ if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon" } else{ //else if this is a sub level menu (ul) ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon" } ultags[t].parentNode.onmouseover=function(){ this.getElementsByTagName("ul")[0].style.visibility="visible" } ultags[t].parentNode.onmouseout=function(){ this.getElementsByTagName("ul")[0].style.visibility="hidden" } } } } if (window.addEventListener) window.addEventListener("load", buildsubmenus_horizontal, false) else if (window.attachEvent) window.attachEvent("onload", buildsubmenus_horizontal) </script> <!-- ************************ END Section 1 *************************************** --> <!-- ************************ BEGIN Section 2 *************************************** --> <script type="text/javascript"> <!-- *************Not sure why this is commented out ******** window.onload=montre; function montre(id) { var d = document.getElementById(id); for (var i = 1; i<=15; i++) { if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';} } if (d) {d.style.display='block';} } //--> </script> <!-- ************************ END Section 2 *************************************** --> <!-- ************************ BEGIN Section 3 *************************************** --> <script type="text/javascript"> function decide() { if (document.myca.search.value.length < 1) { window.alert ("Please enter a search keyword."); return false; } if (document.myca.whosearch[0].checked) { document.myca.sSearchString.value = document.myca.search.value; document.myca.submit(); } else { if (document.myca.whosearch[1].checked) { document.thissite[1].value = document.myca.search.value; document.thissite.submit(); } else { alert("You must select whether you want to search My CA or This Site."); } } return false; } </script> <!-- ************************ END Section 3 *************************************** --> <!-- ************************ BEGIN Section 4 *************************************** --> <script type="text/javascript"> <!--*************Not sure why this is commented out ********--> <!-- var defaultMainList = "Home"; function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } function FP_swapImg() {//v1.0 var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length; n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm; elm.$src=elm.src; elm.src=args[n+1]; } } } function FP_preloadImgs() {//v1.0 var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array(); for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; } } function FP_getObjectByID(id,o) {//v1.0 var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id); else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el; if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c) for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; } f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements; for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } } return null; } --> </script> <!-- ************************ END Section 4 *************************************** --> <!-- ************************ BEGIN Section 5 *************************************** --> <style type="text/css"> .blueLink { font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #000066; font-size: 71%; } .Office_functions_sub_title { font-size: xx-small; color: #0066CC; } .style1 { font-size: small } .pixel_height { font-size: 5px; } .blank_menu_space_height { font-size: 5px; font-family: Arial; } .turquoise { color: #00FFCC } .blue_font { color: #0000FF; font-size: small; } body { margin-top: 0px; margin-bottom: 0px; } .style7 {color: #000066} .style10 {font-family: Verdana, Arial, Helvetica, sans-serif} .style11 { font-size: 12px } .style12 {font-size: 14px} .style13 {font-size: 65%} .style14 {font-size: 12px; color: #800000; } .style15 { color: #FFFFFF; font-weight: bold; font-size: small; } .style17 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #4d7fb2; font-weight: bold; } .style19 { font-family: "Times New Roman", Times, serif; font-size: 18pt; color: #FFFF00; } .style22 {font-size: 11px} </style> <!-- ************************ END Section 5 *************************************** --> </head> <body onload="FP_preloadImgs(/*url*/'images/button13.jpg', /*url*/'images/button4a.jpg'); MM_preloadImages('indeed.jpg' )"> <!--<body onload="MM_preloadImages('yep.jpg','yep.jpg')">--> <table width="900" border="0" align="center" cellpadding="0" cellspacing="0"> <!-- ************************ BEGIN Section 6 *************************************** --> <tr> <!--BEGIN Table Set-Up --> <!--CLOSE Table Set-Up --> </tr> <!-- ************************ END Section 6 *************************************** --> <!-- ************************ BEGIN Section 7 *************************************** --> <tr> <td style="height:17px"><div align="center" class="style15"> <table width="100%" border="1"> <tr> <td><div align="center">link</div></td> </tr> </table> </div></td> </tr> <!-- BEGIN Table Set-Up 1 --> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color:#ffffff"> <tr> <td valign="top" style="padding-left:12px; text-align:left; line-height:186%;"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color:#ffffff"> <!-- BEGIN Table Set-Up 2 --> <tr> <td rowspan="72" valign="top"><table border="0" cellspacing="0" cellpadding="0" style="background-color:#fff"> <!--BEGIN Example Office- Menut Table SET-UP--> <tr> <td valign="top" style="padding-right:12px"><table border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td><table width="185" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="9px"></td> </tr> <tr> <td class="boxtitle style12">testings12345</td> </tr> <!-- BEGIN Sub-Section A thru C --> <tr> <td><div class="left_column_top"> <dl id="menu"> <!-- ************************ BEGIN Sub-Section A *************************************** --> <dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();"> <a href="link.htm">link</a></dt> <!-- ************************ END Sub-Section A *************************************** --> <!-- ************************ BEGIN Sub-Section B *************************************** --> <dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"> <a href="link.htm">link</a></dt> <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"> <ul> <li><a href="link.htm"> link</a></li> <li><a href="link.htm"> link</a></li> <li><a href="link.htm"> link</a></li> <li><a href="link.htm">link</a></li> <li><a href="link.htm">link</a></li> </ul> </dd> <!-- ************************ END Sub-Section B *************************************** --> <!-- ************************ BEGIN Sub-Section C *************************************** --> <dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();"> <a href="link.htm"> link</a></dt> <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();"> <ul> <li><a href="link.pdf"> link</a></li> <li><a href="link.pdf"> link</a></li> <li><a href="link.pdf"> link</a></li> <li><a href="link.htm"> link</a></li> <li><a href="link.htm">link</a></li> <li><a href="link.htm"> link</a></li> <li><a href="link.htm"> link</a></li> <li><a href="link.htm"> link</a></li> <li><a href="link.htm"> link</a></li> </ul> </dd> <!-- ************************ END Sub-Section C *************************************** --> <dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();"> <a href="ble.htm" style="line-height: 200%"> link<br /> link </a></dt> <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();"> <ul> <li><a href="link233link.htm"> link</a></li> <li><a href="indeedy.htm"> link</a></li> <li><a href="training/linsks.htm"> link</a></li> </ul> </dd> <dt onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();"> <a href="yep.htm"> link</a></dt> <dt onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();"> <a href="indeed.htm"> link</a></dt> <dt onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();"> <a href="thanks.htm"> link</a></dt> </dl> </div></td> </tr> <!-- CLOSE Sub-Section A thru C --> </table></td> </tr> <td><table width="185px" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="40px"></td> </tr> <tr> <td class="boxtitle style12">link</td> </tr> <!--BEGIN Sub-Section D thru F --> <tr> <td><div class="left_column_bottom" style="height:125px"> <dl id="menu"> <!-- ************************ BEGIN Sub-Section D *************************************** --> <dt onmouseover="javascript:montre('smenu10');" onmouseout="javascript:montre();"> <a href="yes.htm">link</a></dt> <dt onmouseover="javascript:montre('smenu11');" onmouseout="javascript:montre();"> <a href="yep.htm">random words</a></dt> <dt onmouseover="javascript:montre('smenu12');" onmouseout="javascript:montre();"> <a href="tests.htm"> <p style="line-height: 200%; margin-top: 1px; margin-bottom: 1px"> ble<br> mhm</p></a></dt> <dt onmouseover="javascript:montre('smenu13');" onmouseout="javascript:montre();"> <a href="communication/testsss.htm">Just some test</a></dt> <!-- ************************ END Sub-Section D *************************************** --> </dl> </div></td> </tr> <tr> <td > </td> </tr> <!--CLOSE Sub-Section D thu F --> </table></td> </tr> <tr> <td align="center"> <p align="center" id="legal"><!-- Original Template Designed by etc --> <a href="#heading"></a></p> </td> </tr> <!-- BEGIN Office Chief Table --> </table></td></tr> <!-- </td> SICR TAble --> <!-- </tr> CLOSE only TR Table Set-Up 2 --> </table> <p align="center"> </table> <!--CLOSE MAIN TABLE--> <a href="#heading"> Back to Top</a><br /> </td> </tr> </table> </td> </tr> <!-- CLOSE Table Set-Up 1 --> <!-- ************************ END Section 7 *************************************** --> </p> <tr> <td style="height:1px ;background-color:#CCCCCC"></td> </tr> </body> </html> www.dreamdiamond.squarespace.com This is a website I'm building for a friend. Its very basic, as is my knowledge of web design, BUT, there is one important thing I cant seem to figure out before we register it as dreamdiamond.com! ok the code on THIS website : http://tablefilter.free.fr/ I cant seem to implement into the diamond website on the Inventory Page. We need to create a filterable table for spec. diamonds and this is driving me nuts. I tried uploading the .js files through the file storage, and put the java script code into the website settings>code injection> header No matter what it's not working though. Is there anyone who can help walk me through it? Or I can give someone the username/ pass so they can maybe help me set it up? Obv the pass would be changed afterwards LOL If you can help me out man I'll be forever grateful lol I am learning JavaScript and found these tutorials at http://www.codecademy.com/courses/pr...#!/exercises/3 this is the one I got stuck on, I don't understand .. I just seem to have a block on what to do to this to make it change the while condition so that this do/while loop iterates 4 times like the tutorial wants me to do ... I have had to kill the page because it seems to be making a loop that messes w/ the browser and locks it up. ?? Code: var i = 4;
do {
console.log("This is iteration " + (i + 1) + ".");
i++;
}
while( );
Hello, I'm trying to write a script for a website that reads from a database and makes a separate table for each entry in the database. Since the number of entries can change, I want to dynamically create a div for each one, which I can later hide or display based on user selection. However, when I try to access the dynamically created elements by their ID, they return null. Is what I'm trying to do here actually possible? Code: for(var i = 0; i < tables.length; i ++)
{
var newDiv = document.createElement("div");
newDiv.setAttribute("id", tables[i].name);
newDiv.setAttribute("name", tables[i].name);
newDiv.setAttribute("class", "hidden");
newDiv.innerHTML += tables[i].name;
newDiv.innerHTML += "<table id = 'table"+tables[i].name+"' border = '1'>";
newDiv.innerHTML += "<tr>";
for(var rows = 0; rows < table.arrayOfFields.length; rows++)
{
newDiv.innerHTML+="<th>"+table.arrayOfFields[rows].title+"</th>";
numOfEntries = table.arrayOfFields[rows].arrayOfEntries.length;
}
newDiv.innerHTML+="<tr>";
for(var cols = 0; cols < numOfEntries; cols++)
{
for(var rows = 0; rows < table.arrayOfFields.length; rows++)
{
newDiv.innerHTML+="<td>"+table.arrayOfFields[rows].arrayOfEntries[cols].data+"</td>";
}
newDiv.innerHTML+="<tr>";
}
newDiv.innerHTML+="</table>";
document.body.appendChild(newDiv);
}
Hey, I'm attempting to add functuallity to some code and have been having problems getting loops to create variables that are usable. I know the actual programming seems rather redundant as im creating a variable for each div then looping it to create each div, but it is the only way i can get it to work with other parts of the website. So the actual code takes the variables defining the content of each div and uses the loop to actually produce the divs. I am having problems with the + "linkdiv" + x + part of the actual loop. however way i try to define the variable it simply prints the "linkdiv1" or "linkdiv2" ect... rather then referencing the earlier variable that was created and printing "div1". is this even possible in javascript? The whole whing works when i reference a variable directly, just not when i try to use a loop to create the reference for me. If i use a variable directly i get 5 of the same references rather than one of each reference which is not what i want. please note thati define the colour1 and colour2 variables along with the rest of the actual code earlier in the function... Code:
var linkdiv1="<p style=\"color:"+ colour1+"\">div1</p>"
var linkdiv2="<p style=\"color:"+ colour1+"\">div2</p>"
var linkdiv3="<p style=\"color:"+ colour1+"\">div3</p>"
var linkdiv4="<p style=\"color:"+ colour1+"\">div4</p>"
var linkdiv5="<p style=\"color:"+ colour1+"\">div5</p>"
<!----------------------------------------------------------------->
for (x = 1; x <= 5; x++)
{
document.write("<div style=\""+colour1+"\" id=\"div"+x+"\">" + "linkdiv" + x + "</div>")
}
feel free to ask for more infomation or more code as im not even sure if this makes enough sense to answer the question. Having troubles writing this in a way thats easily understood as i had to take a lot of code that wasnt relevent out. thanks... Hi all , i am creating a dynamic controls but one thing iam stack on is how to associate an existing class ("C1") to that dynamic control : i.e var var1 = row.insertCell(0); var1.align ="center"; var1.innerHTML - array1[A1[i]]; thoughts ? thanks I'm teaching myself JavaScript and created this animated countdown... I want to learn more advanced techniques, or shorthand code. If you see anything I can improve here or something that may not be suitable for a certain browser, please let me know... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>History Countdown</title>
<style>
* {
margin: 0;
padding:0;
}
p {
font-size: 1em;
color: white;
position: absolute;
left: 450px;
}
#insertHere {
background-color: #000;
padding: 10px;
width: 300px;
height: 40px;
position: relative;
}
#list {
border: solid black 3px;
height: 700px;
width: 320px;
}
h3 {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
form {
text-align: center;
}
</style>
<script>
function gogo(){
var number = 2011;
document.getElementById('formArea').innerHTML = "";
var pixelCount = 450;
var intervalCount = 0;
var opacityValue = 0;
var pixels = 65
var ems = 1;
var beginCount = setInterval(countDown, 1000)
function countDown() {
if(number==0){
clearInterval(beginCount);
clearInterval(mover);
alert ("done");
}
intervalCount = 0;
pixelCount = 450;
pixels = 65;
ems = 1;
var opacityValue = 0;
var mover = setInterval(moveNumber, 35);
function moveNumber() {
intervalCount += 1;
if (intervalCount <= 12) {
pixelCount -= pixels;
opacityValue += .1;
document.getElementById('para').style.left = pixelCount + "px"
document.getElementById('para').style.opacity = opacityValue;
document.getElementById('para').style.fontSize = ems + "em";
ems = ems + .1;
pixels = pixels - 7;
if (intervalCount == 2) {
document.getElementById('para').innerHTML= number;
number -= 1;
}
}//end if
else if (intervalCount == 13) {
clearInterval(mover);
}
}
}//moveNumber
}
</script>
</head>
<body>
<div id="list"><div id="insertHere"><p id="para"></p><span id="done"></span></div>
<h3>History Countdown</h3>
<div id="formArea">
<form>
<input type="button" value="Start" id="goButton" onclick="gogo()" />
</form>
</div>
</div>
</body>
</html>
Hi Peers, i have a button that helps me creating more than one dynamic text box and dropdownlist... how it possible to capture the values in those dynamic comtrols ? i am trying the following but did not work ..when the code is excuted it gives me [object] // Create Text box 1 var newStartDate = document.createElement('input'); newStartDate.setAttribute("type","date"); newStartDate.size=8; //capture the value in a temp variable val1 var val1 = document.getElementsByName(newStartDate); alert(val1); the alert gives [object] thanks |
|||||||