Javascript

Is this acceptable code to redirect mobile users?

2010-11-15T19:38:50Z

After looking through many pages showing fairly large chunks of JS code (of which I am not fluent) I found this very very short code block which appears to work after a quick test from a Desktop and Mobile device. Is this good enough to use for a non-enterprise site?

<script>

if (navigator.userAgent.indexOf("Mobile") != -1) {
            window.location = "http://Domain.com/mobile.html"
            }
else {
    <!--Do nothing, remain on page-->
}

</script>

Thanks for any help! :)

Autostereogram Builder

2010-11-09T05:44:08Z

http://www.tumuski.com/stereo/

Cross-posted to youmaylikethis

Need help with javascript

2010-10-21T20:00:48Z

I have a form that has some fields that are being dynamically generated through javascript. This form goes through a validation process and I want to make sure that the fields that are generated dynamically are actually being filled in. The problecm is, it doesn't appear to be able to do that.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
<html>
<head>
<script type="text/javascript"> 

 
</script>
<script type="text/javascript"> 

 
</script>
 
 
<title>SLA Information Entry</title>
</head>
<body>
<form method="POST" name="SLA" action="validate.php?id=00000004" onsubmit="return validate_form(this);">
 
<br />
<table>
<tr><td colspan="2">
<input type="checkbox" name="SLABUDR" value="" onblur="if(this.checked){this.value = 1;} else{this.value='';}" />BUDR Sold</td></tr>
<tr><td>
Workstation(s)<br /> 
Number of Licenses sold: <input type="text" name="SLAWksLic" value="" onblur="change_workstations(this)" /><br />
All workstations will be the same SLA.<br />
Workstation SLA: <select name="SLAWks">
<option value="" selected>Please Select</option>
<option value="Basic">Basic</option>
<option value="Plus">Plus</option>
<option value="Premium">Premium</option>
</select></td>
<td>Server(s)<br />
Number of Licenses sold: <input type="text" name="SLASvrLic" value="" /><br />
All servers will be the same SLA.<br />
Server SLA: <select name="SLASvr">
<option value="" selected>Please Select</option>
<option value="Basic">Basic</option>
<option value="Plus">Plus</option>
<option value="Premium">Premium</option></select><br />
</td></tr>
</table><br />
Workstations:
 
</table>
<div id='workstationtable'></div>
<input type="submit" name="SLAForm" value="Proceed" />
 
</form>
</body>
</html>

Is there a way to enter password in protected video on Vimeo

2010-09-25T20:34:19Z

I want to protect my videos on Vimeo using password, but allow users of my site to watch embedded videos without entering password. Is there a way to send keypress events to enter password in onLoad page event?

hoverDelay jQuery Plug-in

2010-09-24T06:52:01Z

Like jQuery's built-in .hover(), but with delay:
http://www.tumuski.com/2010/09/hoverdelay-jquery-plug-in/

JavaScript. 2 issues

2010-08-24T14:46:13Z

Hello.
I'm a newbie in JavaScript (and jQuery, too).
I've got some little troubles with it.

First. I'd love to know how to obtain an ID of clicked element inside click event handler.
According to the book "Learning jQuery" by Jonathan Chaffer and Karl Swedberg, I gotta use "this.id" construction.
Perhaps this book is little outdated because it doesn't work under jQuery 1.4.2.
Calling "alert(this.id);" in the event handler is resulting in "undefined" message.

Second. I'm trying to figure out how to attach a click event handler to the element created dynamically by script.
The following line of code is resulting in new unclickable picture on my page:
myDiv.innerHTML = myDiv.innerHTML + '<img alt="" class="Pics" src="img2.jpg" onclick="return ClickIMG()" />';
This problem is not being solved by using the code like this: $('.Pics').Click('ClickIMG').

I think these issues are quite common and can be easily solved.
So you probably can help me.
Thank you.

Using Javascript to search a share point list

2010-07-16T07:31:13Z

I found this code a while ago that creates a drop down search box that will search a sharepoint list. I am extremely new to this so I am clueless in how I can modify this code to suit my needs. The code redirects to the same page with querystring data added to the URL. I was able to modify the drop down list and I changed the Column names to match the columns in my list. I changed to column names because it wasnt returning any records and I believe it is because it is referencing the columns that dont match my list. Once I did that it didnt work, It wouldnt return any records. I have a feeling it is because of this piece of code:

<script type="text/javascript">
 function RedirectUrl() {
 var tb = document.getElementById("tbSearch").value;
 var cs = document.getElementById("sfield").value;
 var url = "";

 if (tb != "") {
  if (cs == "Column5" || cs == "Column6"){
  url = "FilterField1=" + cs + "&FilterValue1=" + tb;
  window.location.href = "AllItems.aspx?" + url;
  }

I dont understand why it is referencing just Column5 and Column6. The rest of the code is under the cut. I have played with this all night and forgot where I found it so I cant go back and ask the person who created it. If anyone could shed some light on this and help I would be very happy.

<script type="text/javascript">
 function RedirectUrl() {
 var tb = document.getElementById("tbSearch").value;
 var cs = document.getElementById("sfield").value;
 var url = "";

 if (tb != "") {
  if (cs == "Column5" || cs == "Column6"){
  url = "FilterField1=" + cs + "&FilterValue1=" + tb;
  window.location.href = "AllItems.aspx?" + url;
  }
  else {  
  url = "FilterName=" + cs + "&FilterMultiValue=*" + tb + "*";
  window.location.href = "AllItems.aspx?" + url;
  }
  }
  else {
  return false;
  }
 } 
 function ClearUrl() {
 window.location.href = "AllItems.aspx";
 }
</script>
Search Field: <select id="sfield">
<option selected value="Title" >Person Name</option>
<option value="Column2">Status</option>
<option value="Column4">Case #</option>
<option value="Column5">Date taken</option>
<option value="Column6">DOB</option>
<option value="Column8">other #</option>
<option value="Column10">Notes</option>
<option value="Column12">employee</option>
</select>
&nbsp;
Search text: <input type="text" id="tbSearch" />
<input type="button" id="btnSearch" value="Search" onclick="return RedirectUrl();" />
<input type="button" id="btnClear" value="Clear" onclick="return ClearUrl();" />

X-posted to webdesign & javascript

Nibbler: Multi-Base Encoder Generator

2010-04-06T04:11:01Z

Recently, I was as surprised as you will no doubt be, to discover that there didn’t seem to be a Base32 encoder for JavaScript! There are lots of Base64 encoders out there (and just as many for Hexadecimal), but Base32 seems to be a pretty small niche.

So I decided to write my own, and about half-way through, it evolved from a Base32 encoder to a multi-base encoder:

http://www.tumuski.com/2010/04/nibbler/

Drag and Drop in Mootools

2010-03-02T22:33:44Z

I'm writing my first class using Mootools, building off a class called Drag.Ghost [link] (which itself inherts from Drag.Move; Drag.Ghost -> Drag.Move -> Drag)

Since I want this to be reusable and multi-purpose, I want to define custom behaviors within the class itself rather than within each page which is the usual, idiomatic way. That is, I want to define the drag, drop, move, etc handlers within the class rather than pass them as parameters to an instance of the class

The problem is, I can't manage to set these handlers. They never fire at all (again, the class itself and the idiomatic way works fine)

My version of the class:

Drag fires, but drop, enter, and leave do not (adding a console.log call to drag produces a message in Firebug. The others do not)

Drag is an event of the base Drag class while drop, enter, and leave are events on Drag.Move, so I'm thinking that might have something to do with it.

I have plenty of experience with OOP and a fair bit with JS specifically, but I'm unclear how things work in Mootools yet. I didn't see any references to, say, needing to explicitly call the superclass, but there's apparently something wrong with this subclass preventing it from passing on events belonging to its direct parent. Or maybe not. I'm stumped.

And here's how I'm calling it in the document HEAD section (which I'm sure is unneeded, but sometimes I miss the simplest things...)

xpost: javascript webdesign

jquery, ajax, and waiting until data is fully loaded

2010-01-27T11:35:01Z

We have this little image gallery thing built with jquery. It fetches a page that selects some random images and writes some html, then updates the html in the image gallery container. It's supposed to work like this:

- button clicked
- fetch page
- data received
- old stuff fades out
- new stuff fades in

The images loaded are really big (they're coming from a photographer and we have no control over the file size), so what's happening is the "new stuff fades in," event is occurring while the images are still loading, and it looks kind of dumb. This is a simplified version that just loads one random image:

    <script type="text/javascript">
    $(document).ready(function() {
        $("#nextButton").click(function() {
            $('#an_image').fadeOut('fast', function() {
                $.get('./image_swap.php?n=1&node=117', function(data) {
                    $('#an_image').html(data);
                    //i've tried timeouts here, but it's imprecise
                    $('#an_image').fadeIn("slow");
                });
            });
        });
    });

I've tried rearranging the nesting, thinking putting everything else under $.get('./image_swap.php?n=1&node=117', function(data) {...} would cause the callbacks to not happen until the data was loaded, but it's somehow even worse that way.

Is there a way to have jquery fetch the new page and not do anything else until the contents (specifically, the images) have fully loaded? Given their size and number, pre-loading the images in the background isn't really an option.

Making a wordpress header slide left?

2010-01-06T00:11:27Z

I need help with coding. I've recently designed a blog on Wordpress and it has to get up before Friday. I'm having troubles with making my header slide to the left (I have 4 headers and I want them to slide). I've been trying for about 3 days now.
I know I have to install and upload that JQuery plugin thing, but even though I installed and have been trying, it hasn't been working for me. Can anyone help me out?

Javascript variable names & arrays (variable variables?)

2009-12-22T16:38:20Z

I wrote a function to select one of an array of checkboxes. The form name, checkbox name, and value to be checked is passed. If I hardcode the form name, it works great. I want to make the function flexible to reuse in other situations, so the form name needs to be a variable.

EDITED - problem solved. If anyone needs this feel free to use or improve.

Scope:
Will toggle checkbox matching a certain value in an array of checkboxes. Similar to the "select all" but it just selects one. It's designed to be invoked with onClick from the checkbox description. See below....

Javascript:

Usage:

Simple Interfaciness in JavaScript

2009-10-16T22:04:34Z

This script provides some simple interface-like behavior in JavaScript, by asserting that a given constructor must produce objects that have certain members.
http://www.tumuski.com/2009/10/simple-interfaciness-in-javascript/

javascript @ 2009-09-05T19:14:00

2009-09-06T00:14:22Z

Hi, I have an interesting problem, and so far I haven't been able to find any solutions online.

I have a page that automatically fills in data fields every so often. It does this with an ajax call to a page that just spits out raw javascript in name=value pairs. I then use eval() to load the new values and change the page to the new values. Everything works great, except when I run into UTF-8 characters such as ä or à. The output of the called page is fine, but something happens in the eval() I guess that turns most of these characters into undesired characters. Anybody have any suggestions?

Blur / removing the browser selection box

2009-06-08T23:55:23Z

I am not a big user of blur(), but for the tab-panel app I have below I want to get rid of the box the browser is drawing around the tab some one just clicked. I thought I could use blur(this) or this.blur() or even onfocus="blur(this)" but all versions are blurring the entire window not just the element selected/highlighted.

Any ideas

Couloir Slideshow Captions

2009-06-08T19:17:12Z

Hello everybody,

This is a slideshow that I used and adapted for one of my website — original site is: http://www.couloir.org/js_slideshow/

Is there an easy way to make the captions link to different pages within a website. I appreciate any help I can get.

This the code that defines photos and their attributes (from the file called slideshow.js). Do I need to create a href function? If so, how can I do it?
Please help.

// Define each photo's name, height, width, and caption

var photoArray = new Array(

// Source, Width, Height, Caption

new Array("IMG_0470.jpg", "600", "450", "Cycling from Telluride to Moab"),

new Array("IMG_2441.jpg", "582", "350", "Mt. Toll as seen from the slopes of Mt. Audubon"),

new Array("IMG_2449.jpg", "600", "300", "Taking flight from the summit of Paiute"),

new Array("IMG_0677.jpg", "650", "488", "Plodding up Queen's Way Couloir on Apache"),

new Array("P3220073.jpg", "600", "400", "A storm brews in the distance (Red Rocks, NV)")

);

Thanks :)

Targeting a sub element to change CSS styles

2009-06-08T17:59:14Z

What I want to do is close all the tab-panels and then open the target panel

Seems like the code could be two lines in a function

function switchPanel(target) 
  {
  [display:none all elements with class="panel"]
  document.getElementById(target).style.display = "inline";
  }

Any ideas?

*
This is for a set of tabs and panels. I already know how to do by id-ing all the panels and looping through an array to close them all then open the requested one, but I am looking for fewer lines of code that requires less id-tags (genral solution)

I've done it before by
document.getElementById(panelsetname).getElementsByTagName('div')

But then you can't have any sub divs. I've looked online but all the solutions I have found are longer than the one I am already using.

JSLinux

2009-04-01T14:09:23Z

Linux in JavaScript

ideas regarding preventing form submission when there is JS error

2009-03-25T00:16:34Z

Below is a snippet of the code I am using to validate a form.

//this function validates the form
function Validate() {
	document.getElementById('submit_form').value="Sending...";
	document.getElementById('submit_form').disabled=true;

	var errfound = "false";
	var errmsg = "";

	var valfname = document.regform.fname.value;

	
	if (valfname.length < 1) {
		errfound = "true";
		errmsg = errmsg + "Please enter a First Name. \n";
	}


	if (errfound == "true") {
		alert(errmsg);
	    document.getElementById('submit_form').disabled=false;
	    document.getElementById('submit_form').value="Submit";
		return(false);
	} else {
		return(true);
	}
	return(false);
}//end function

Is there a way to stop the form from submitting (returning "true") if there is an error in the Javascript?

Normally, I include the form action in the JS - but I am working a team who keeps reversing my code and frankly I just dont want to deal with their unbending ideology. However, I don't want my forms to submit without passing the validation script. (Forms using this script will submit if there is a Javascript error).

Javascript, CSS and UI

2009-03-20T00:48:39Z

Hello, I am doing some UI work and I wonding if there is a way to send "this" value to a funtion without having to give every item a unique id

in other works, I can put this inline on mouse over = this.style.borderTopColor='#0B226B';

but I would prefer to do something like
on mouse over = this.changeColor();

And then the function changeColor() contains ...style.borderTopColor='#0B226B';

Its going to be crazy if I have to give each item its own id. *js code not exactly right to get through the filters

Eep, HELP!

2009-03-12T23:47:29Z

I am taking a javascript class and the instructor isn't very good at giving directions or showing us exactly what to do. He has us pretty much work from our book. Well, I have an assignment do and for the past hour I have been racking my brain trying to figure out what I am doing wrong. I followed the assignment as per the book and it's still not working (maybe a book error?)

The idea is to input the dollar amount in one field, the rate in the next and use the button to calculate into the third.

<html>
<head>
<title>
    Exchange Rates
</title>

<script type="text/javascript">
<!--hide me from older browsers

function multiplyTheFieilds()
{
    var number_one = window.document.the_form.the_dollar.value;
    var number_two = window.document.the_form.the_rate.value;
    var product = number_one * number_two;
    window.document.the_form.the_answer.value = product;
}
// show me-->
</script>

</head>

<body>

<center>
<h1>Welcome to the Travel Assistant!</h1><p>
<h4>For All of Your Traveling Needs.</hr><p>
<br />
<hr>
<br />

Exchange rates:<br />

<table>
<tr>
<td>EUR
</td>
<td>GBP
</td>
<td>CAD
</td>
<td>JPY
</td>
<td>AUD
</td>
</tr>
<tr>
<td>0.7886
</td>
<td>0.6991
</td>
<td>1.2697
</td>
<td>97.81
</td>
<td>1.5603
</td>
</tr>
</table>
<br />

<form name="the_form">
<input type="text" name="the_dollar" value="Input Dollar Amount"> x <input type="text" 

name="the_rate" value="input desired exchange rate"> = <input type="text" 

name="the_answer"><br />
<input type="button" value="Calculate!" onClick="multiplyTheFields();">
</form>

<br />
<form><input type="button" value="Close Window" onClick="window.close();"></form>

</center>

</body>
</html>

Any advice will be greatly appreciated!

Photo Gallery wanted

2009-02-11T08:25:15Z

Hi there! I'm looking for help and I hope the JavaScript savvies can help me here. I can't write JS myself, but I am good enough to be able to read most of the code I copy&paste and know where to change the variables :-)

I am trying to set up a photo gallery using simple java script.

The requirements are relatively easy:

- I want a placeholder at the top where the images appear. Like 800x800 or something.
- I want thumbnails (or links) underneath and when you click one of them, the big image appears in the placeholder atop.
- I need the placeholder to adjust to landscape and portrait format. Most of my images have different aspect ratios.
- I need it to be pure JavaScript in one html page. No php or anything because my server does not allow it. CSS is ok, though.
- I want to be able to add an image once in a while without changing multiple html pages, so album generators which generate several pages from a set or images is out. I use that for vacation pics, but not for the purpose I have in mind now.

I found this page: Image Gallery and it's almost all I need, except that the creator is of the strange opinion that all pictures should have an aspect ratio of 1:1.

Any help, or pointing me to a website that can help is greatly appreciated!

Thanks so much!

Problem

2009-02-11T06:41:01Z

Hello.

I'll start off by saying I suck at Javascript.

I have a classic ASP page which has a basic 2D table. The rows of text boxes are dynamically created and have names like txtItem1, txtItem2, txtQuantity1, txtQuantity2, etc. There are 10, but of the 10, they will rarely all be used. If the user needs more than 10, they can create another ten rows by pressing a button and submitting the form, so potentially the controls can be numbered up to 20 and up to 20 used.

I need to multiply 2 columns (txtItem and txtQuantity) of user inputted data and put the value in a 3rd column (txtTotal - appended with whatever row number it happens to be in as the rest of the controls are named). There may or may not be data in these fields, even if there is other data in the row, the user wants the option to just type in the value of the total "manually" as that is how the business works.

I need to do this on the fly, the user does not want to post back, so I have to use client side scripting.

Additionally, of these txtTotal fields, I need a subtotal at the bottom of the column.

Then I need to calculate a percentage, show it, and add it to the total for a grand total.

I'm a little overwhelmed.

If I could get some help with any of the three or so tasks I have:

1. Multiplying field one by field two giving field three... only if there is data to calculate.
2. Adding a column of fields of a variable number (ignore fields that are not populated) to give a grand total.
3. Calculate a percentage of the grand total, and total that again for a final total.

I would be forever in your debt, eternally grateful, and blissfully happy. Thank you in advance, a thousand times.

I've searched and found a few scripts that don't seem to do exactly what I want, so I'm begging.

Clumpy

2009-01-14T05:32:15Z

For those who liked Asynchronizer, it's now greatly improved, renamed, and with better documentation:

http://www.tumuski.com/code/clumpy/overview/

Drop-Down Menu in GoLive Component Page

2009-01-08T16:20:27Z

I'm creating a website in GoLive, using a component page for the menu, which will appear on every content page. There will be at least 50 pages. So when the menu needs editing, making changes to each page separately is not an option. Creating and customizing the menu in the component page is easy enough. I am using a found javascript to create drop-downs as well.

The problem I'm having is when using the menu as a GoLive component. When I edit the component, save and go back to the index page, the menu acts strangely and duplicates itself, putting an extra one at the bottom of the page. I don't know why it's doing this, and the problem is very frustrating. Could the component menu be too complicated? Could there too many nested div's and GoLive is getting confused? I have done this successfully many times before, but never with javascript drop down's. Could that be causing my error?

Please let me know if you've had any similar problems. I really need help with this issue. Thanks!

(Also, I know code, but not enough to build a website without using the help of GoLive.)