JavaScript - Generated Divs And Their Onclicks Don't Work Ie8

Alright so for a school assignment I need to create a button with the name of the color it is going to turn the background to.
the assignment says nothing about naming the buttons the hex numbers for the color therefo

I was curious if someone could show me how to create a button in java script that would generate a random hex number for a color ie: #+()+()+()+()+()+()
and the text shown on the button would be the same as the hex number generated.

feed back please

Hi

I am a complete beginner when it comes to JS so anything and everything will be in very basic terms...

It is probably easier if i show you my problem,


I use milonic s menu for my website, as such i need to generate some sort of site map so that the various crawlers can get full access....

I used to use the phpsite map which came with Milonic Menu, however since i have moved hosts, this has stopped working....

http://www.tugtracker.co.uk/menu/sitemap.php - any offers on why it has stopped working are welcome (windows hosting)

as it still works on my other site (linux hosting)
http://locodocs.co.uk/misc/sitemap.php

anyway, thats not the point of my post....

Also provided by milonic is the option to provide a list based menu using some js...

http://support.milonic.com/demos/site_index/index.htm

I have incorporated this into my site

www.tugtracker.co.uk - click misc on the menu then "Site index"

You will see a pop-up erm pops up.... This looks okay and something like what i want,

However i need it to be placed into a webpage so i can give it a www.tug..... address and then i can point the crawlers at it....

How do i code it into the page to that the JS will run within the body and result within the body of a page?

I'm new here and this is my first post, I hope I can find help here.

How can i dynamically generate this type of form element in javascript, including the table rows and columns enclosing the form elements and whenever that 'Add More' button is clicked, a new instant of the same form will generated and select drop down list populated.

I have try to google for solution, but without success.

I code in PHP, but i need it to integrate in my code.


Thanks for your help.

When i try to understand why a control is not raised - i check the F12 "code".. then, when i look for the required control there - it appears under CDATA tag.
So - why?

thx,
Rach

Im working on a 2nd case and I could use some help

I need to replace the content of the welcome box

Code:

 <div id="welcome">
   Today is<br />
   Tuesday, May 29, 2007
   <br /><br />
   Born today<br />
   Ian Fleming (1908) - Author
</div>

with generated text that displays the current date, and the name of a famous person born on that date. Including comments that describe each of the variables used in writing this code and the functions that the code accesses.

Hi All

I'm going to keep this simple. I'm using a hashchange plugin for my page navigation

I can't get scripts to run for the AJAX generated content. They run perfectly without the hashchange

Here is a link to my current project:

http://www.bluecoast.co.uk/test/temptation

Here is the script that handles the hashchange:

Code:

$(function() {

    var newHash      = "",
        $mainContent = $("#right"),
        $pageWrap    = $("#wrap"),
        baseHeight   = 0,
        $el;
        
    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $pageWrap.height();
    
    $("nav").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });
    
    $(window).bind('hashchange', function(){
    
        newHash = window.location.hash.substring(1);
        
        if (newHash) {
            $mainContent
                .find("#guts")
                .fadeOut(200, function() {
                    $mainContent.hide().load(newHash + " #guts", function() {
                        $mainContent.fadeIn(200, function() {
                            $pageWrap.animate({
                                height: baseHeight + $mainContent.height() + "px"
                            });
                        });
                        $("nav a").removeClass("current");
                        $("nav a[href="+newHash+"]").addClass("current");
                    });
                });
        };
        
    });
    
    $(window).trigger('hashchange');
	
});

I'm loading the scripts in the header of the main index.php page like so:

Code:

<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery.tweet.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/jquery.anythingslider.min.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/jquery.localscroll-1.2.7-min.js"></script>

<!--[if IE 7]><link href="css/ie7.css" rel="stylesheet" type="text/css" media="screen" /><![endif]-->

<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>
<!--[if IE]>
   <script src="js/html5.js"></script>
<![endif]-->

<script type="text/javascript" src="js/custom.js"></script>

Would somebody be kind enough to help me with this?

Thanks in advance
Craig

hi Peers,

i am having issue capturing the value of the selected DDL using IE.
the code below works just fine in Firefox...


// Create a new drop down list -- for text box use 'input' instead of 'select'
var newDDL = document.createElement('select');

// size lenght of the DDL for both IE or Firefox
newDDL.setAttribute("style","width:300px");
//firefox
newDDL.setAttribute("width","300px");
newDDL.style.width = "300px";
newDDL.id = 'id' + elementid + ColumnElement;
newDDL.setAttribute('name','newDDL'+ elementid+ColumnElement);

// filling the DDL by ITEM array Elements
var i=0;
for (i=0;i<=rec_count;i++)
{
objOption = document.createElement('option')
objOption.text = ITEM[i]
newDDL.options.add(objOption)
}

counter++;
newDDL.onchange = show1;

both cases are giving the value selected in firefox

function 1:
function show1()
{
alert('id=' + this.getAttribute('id') + 'name = ' + this.getAttribute('name') + 'value=' + this.value );

}

function 2:
function show1()
{
alert('id=' + this.getAttribute('id') + 'name = ' + this.getAttribute('name') + 'value='+ this.getAttribute('value'));

}


any suggestion will be appreciated
thanks

PLEASE IGNORE - I'D DONE A BOO BOO! </facepalm>


Hi guys,

not sure i have a decent explanation in the title. so, let me explain.

i have a script that collapses rows in tables but i create the array in php. the button needs to be above the content else i could just create it using php

if i try this function in a .js file it all works:

Code:

		function toggleAll() { //collapse all layers in

			var togglelist = "['380','379','378','377','376','374','373','369','367']";

			for (var i=0; i<togglelist.length; i++) {
				collapseTableRows(togglelist[i]);
			}
		}

the problem is that i need to create togglelist when im doing the php. if i just do a simple:

Code:

<script>
var togglelist = "['380','379','378','377','376','374','373','369','367']";
</script>

at the bottom of the page i cant seem to pass togglelist to the function in the .js file

im a bit rusty at JS so i think im doing something wrong. or is it just that i cant pass a variable array to a function if the variable is below the function on the page...

i hope that makes sense.

Hello, I'm not sure if this is the best forum for my question or not, but I'll explain what I'm doing and we'll see. I am trying to make a little easter egg hidden inside a web application and its going great except I'd like to hide my .gif files by changing their file extension to something like .dat instead so it won't be so obvious what they are. Basically all I really want to do is have an html image tag that points to a file who's extension is not gif, but really does contain gif content. (I want to mask the fact that the file is really a gif when looking at it in the directory listing.) So, my idea was I would point the <img src=""> tag's src attribute to a cgi script that could write out a Content-type: image/gif header and return the binary gif data. So, I did this and it worked great, but its really slow. (I output the image multiple times and animate it.) So, I thought I could maybe use Javascript to preload these cgi requests and cache them, but every attempt I've made to do this fails! It's like the browser doesn't want to cache the cgi requests. My method of attempting this was to create Image() objects in javascript and set their src attribute to my cgi script call and then set an onload to keep track of when they were all loaded. That seemed to work fine, but then when I try to display an image with the src tag equal to the cgi location (after they were all loaded) its like it goes and reads the code to pull it down again instead of using a cached copy because its really slow. So, then I thought, hey maybe I could just manually edit the binary content of the gif file (which has an extension like .dat) to also contain Content-type: image/gif\n\n embedded at the front of the file. So, I opened the binary file with a hex editor and inserted that text content at the front... but it didn't work. I had <img src="myfile.dat"/> Is there an easy way to make the browser recognize my gif file even if I don't use a gif extension? If not is there a way to preload and cache cgi responses with Javascript so that they don't keep reloading each time I refer to them? Any other ideas? Thanks.

Hello!

Im having problem generating the labels for content created by the following function:
Code:

function setOutput(){
    if(httpObject.readyState == 4){
		var answer = httpObject.resultsponseText.split(",");
		var results = document.getElementById("resultsultadosScan1");
		var article = document.createElement("div");
		var weight = document.createElement("div");
		var price = document.createElement("div");
		article.className = "article";
		weight.className = "weight";
		price.className = "price";
                document.getElementById('outputText0').value = httpObject.innerHTML= answer[0];
		document.getElementById('outputText1').value = httpObject.innerHTML= answer[1];
		document.getElementById('outputText2').value = httpObject.innerHTML= answer[2];
		article.innerHTML = httpObject.innerHTML= answer[0];
		weight.innerHTML = httpObject.innerHTML= answer[1];
		price.innerHTML = httpObject.innerHTML= answer[2];
		results.appendChild(article);
		results.appendChild(weight);
		results.appendChild(price);
    }
 
}

A friend wrote this sample script to achieve generation of labels on my script, but I have been trying for hours with no luck, can someone take a look and tell me the correct usage of this script:

Code:

function createLabel() {
    var target = document.getElementById("target");
    var label = document.createElement("label"); 
    var text = document.createTextNode("Article"); 
    label.appendChild(text);
    target.appendChild(label); 
}

Can you help me with the correct "combination" using my script above, a "real life" example?


Thanks a lot!

Hello friends,
I want to trigger click event on an iframe's element through the main window, Doing it both ways, with or without jquery, will be usable for me. Basically, what I want to do is, I have developed a website http://www.ipjugaad.com, and on every document download page, I have placed an fb like button, what I want to do is that the like button should be automatically clicked when a user click on download button on my website. Give me some idea about how to do it?

Hi all,

I use a javascript to generate a checkbox list.
It works well but all the <input type="checkbox"> generated have the same id.

I would like to find a way to auto-implement the id (with a unique id). So if my javascript generates 10 checkboxes, I will get id from 1 to 10 or something similar.

Code:

// here I build the filter checkboxes based on all the class names
$.each(arrayUniqueClasses, function() {
$('<li><input class="styled" type="checkbox" checked="checked" name="1" value="'+this+'" id="1" />
<label class="check" for="1"></label>
<label class="info" for="filterID'+this+'">'+this+'<\/label><\/li>').appendTo('ul.filters');
});

so I tried something but it doesn't work at all (I'm a beginner as you can guess) :

Code:

var getUniqueId =
(function ()
{
var id=0;
return function()
{
if (arguments[0]==0) id=0;
return id++;
}
}
)();

Thanks for helping


here the full script if needed :
Code:

function unique(a) {
	tmp = new Array(0);
	for(i=0;i<a.length;i++){
		if(!contains(tmp, a[i])){
			tmp.length+=1;
			tmp[tmp.length-1]=a[i];
		}
	}
	return tmp;
}


function contains(a, e) {
	for(j=0;j<a.length;j++)if(a[j]==e)return true;
	return false;
}

function removeItems(array, item) {
	var i = 0;
	while (i < array.length) {
		if (array[i] == item) {
			array.splice(i, 1);
		} else {
			i++;
		}
	}
	return array;
}


$(document).ready(function () {
	
	
	if ($('.filterThis > li').length < 2) { return; }
	
	var stringOfClassNames = '';
	
	$('.filterThis > li').each( function (i) {
		var thisClassString = $(this).attr('class');
		stringOfClassNames = stringOfClassNames +' '+ thisClassString
	});

	stringOfClassNames = jQuery.trim(stringOfClassNames);

	var arrayClasses = stringOfClassNames.split(' ');
	
	var arrayClasses = arrayClasses.sort();
	totalNumberOfItemsToFilter = $('.filterThis > li').length;

	var result = new Object();
	for (var filterClass in arrayClasses) {
		if (result[arrayClasses[filterClass]] === undefined) {
			result[arrayClasses[filterClass]] = 1;
		} else {
			result[arrayClasses[filterClass]]++;
		}
	}
	var resultsToRemoveFromFilters = new Array();
	for (var item in result) {
		if (result[item] == totalNumberOfItemsToFilter) {
			resultsToRemoveFromFilters.push(item);
		}
	}

	arrayUniqueClasses = (unique(arrayClasses));

	if (arrayUniqueClasses.length > 1) {


		$('<ul class="filters"><\/ul>').insertAfter('h3');

		$.each(arrayUniqueClasses, function() {
			$('<li><input class="styled" type="checkbox" checked="checked" name="1" value="'+this+'" id="0" /><label class="check" for="0"></label><label class="info" for="filterID'+this+'">'+this+'<\/label><\/li>').appendTo('ul.filters');
		});

		var classesStringOfSin = new Array();
		classesStringOfSalvation = arrayUniqueClasses;

		$('.filterThis > li').addClass('filterTriggerShown');

		$('.filters input').click( function() {
			var value= $(this).val();
			stringValue = '.filterThis > li.'+value;

			if ($(this).is(':checked')) {

				classesStringOfSalvation.push(value);

				classesStringOfSin = removeItems(classesStringOfSin, value);

				$(stringValue).removeClass('filterTriggerHidden').addClass('filterTriggerShown').slideDown();

			} else {

				classesStringOfSin.push(value);
				classesStringOfSalvation = removeItems(classesStringOfSalvation, value);

				$(stringValue).removeClass('filterTriggerShown').addClass('filterTriggerHidden');
				$.each(classesStringOfSalvation, function() {
					var newStringValue = stringValue+'.'+this;
					$(newStringValue).removeClass('filterTriggerHidden').addClass('filterTriggerShown');
				});
				$('.filterTriggerHidden').slideUp();
			}

		});
	}
});

Hi all, i'm using this code:

Code:

var r_text = new Array ();

r_text[0] = "Random Text 0";
r_text[1] = "Random Text 1";
r_text[2] = "Random Text 2";
r_text[3] = "Random Text 3";
r_text[4] = "Random Text 4";
r_text[5] = "Random Text 5";
r_text[6] = "Random Text 6";
r_text[7] = "Random Text 7";
r_text[8] = "Random Text 8";


var i = Math.floor(9*Math.random());

   {
   document.write("<Marquee SCROLLAMOUNT=10><FONT-FAMILY: 'Calibri'><FONT-SIZE: 13pt)<B><FONT COLOR='#FFFF00'>" +
   r_text[i] + "</FONT></B></FONT-SIZE></FONT-FAMILY></Marquee>");
	}

This code works as far as me getting a right to left marquee, which, every time the page reloads, generates one of the random pieces of text.

I'd like to add a piece of coding to this so that on mouseover, the marquee will pause, but I don't have a clue what to add, or where.

My other problem:

The text is yellow..size 10, yet whatever font family i specify, will ALWAYS appear in the font Georgia (in the browser im using, Firefox.) in both Opera and IE, it comes out Times New Roman! this is a real rooky problem, but i am a rooky and i'd just like to understand why, and how to ACTUALLY get Calibri.

Any help would be greatly appreciated

Hello all, I made a fade script that will fade any element in or out. Works great on all browser I've tested but IE 7. With IE I have only tested this will IE 8 and IE 7. IE 7 the effect doesn't work. No error message or anything. I'm unsure what to do from here. I was hoping I could find some help here.

Code:

function fade(obj, duration, toggle) {
	steps = 1000;
	elem = document.getElementById(obj);
		
	function fadeIn() {
		for(var i = 0; i <= 1; i+=(1/steps)) {
				setTimeout("elem.style.opacity = "+ i +"", i * duration);
				setTimeout("elem.style.filter='alpha(opacity="+ i * 102 +")'", i * duration);
		}
	}
	
	function fadeOut() {
		for(var i = 0; i <= 1; i+=(1/steps)) {
				setTimeout("elem.style.opacity = "+ (1-i) +"", i * duration);
				setTimeout("elem.style.filter='alpha(opacity="+ (1-i) * 102 +")'", i * duration);
		}
	}
	
	/* One for Fade in and anything will be fade out*/
	if(toggle == 1) {
	fadeIn();
	}
	else {
	fadeOut();
	}
	
}

Thanks,
Jon W