Is this acceptable code to redirect mobile users?
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?



Thanks for any help! :)

(12 Comments |Comment on this)

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

Cross-posted to youmaylikethis

(Comment on this)

Need help with javascript
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.( Look at my code behind the cutCollapse )

(1 Comment |Comment on this)

Is there a way to enter password in protected video on Vimeo
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? 

(2 Comments |Comment on this)

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

(Comment on this)

JavaScript. 2 issues
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.

(3 Comments |Comment on this)

Using Javascript to search a share point list
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:


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.

( Read more...Collapse )

Current Mood: embarrassed

(5 Comments |Comment on this)

Nibbler: Multi-Base Encoder Generator
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/

(Comment on this)

Drag and Drop in Mootools
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.Ghost = new Class({ Extends: Drag.Move, Implements: [Options, Events], initialize: function(el, options) { this.parent(el); this.setOptions(options); }, ....standard code omitted. see link..... drag: function(event) { this.parent(event); }, drop: function(element, droppable, event) { console.log('dropped'); this.parent(event); }, enter: function(element, droppable){ console.log('entered'); this.parent(event); }, leave: function(element, droppable) { console.log('left'); this.parent(event); }

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...)

window.addEvent('domready', function() { //TEST: Make all items draggable $$('.rpgitem').each(function(item) { new Drag.Ghost(item, {'opacity': 0.4}); }); });

xpost: javascript webdesign

(Comment on this)

jquery, ajax, and waiting until data is fully loaded
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:



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.

(4 Comments |Comment on this)

Making a wordpress header slide left?
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?

(Comment on this)

Javascript variable names & arrays (variable variables?)
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:
function SelectCheckboxArrayElement(form_name, checkbox_name, checkbox_value) { for(i=0;i<document[form_name][checkbox_name].length;i++) { curr_checkbox_value = document[form_name][checkbox_name][i].value; if( curr_checkbox_value==checkbox_value && document[form_name][checkbox_name][i].checked == false ) { document[form_name][checkbox_name][i].checked = true; } else if ( curr_checkbox_value==checkbox_value && document[form_name][checkbox_name][i].checked == true ) { document[form_name][checkbox_name][i].checked = false; } } }

Usage:
<form name="demoform" id="demoform"> <input type="checkbox" name="testing[]" value="green" checked="yes"> <span onClick="javascript:SelectCheckboxArrayElement('demoform', 'testing[]','green');">Select Green</span> <br> <input type="checkbox" name="testing[]" value="blue"> <span onClick="javascript:SelectCheckboxArrayElement('demoform', 'testing[]','blue'); ">Select Blue</span><br> </form>

(4 Comments |Comment on this)

Simple Interfaciness in JavaScript
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/

(Comment on this)

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?

(5 Comments |Comment on this)

Blur / removing the browser selection box
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

(6 Comments |Comment on this)

Couloir Slideshow Captions
 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 :)

(3 Comments |Comment on this)

Targeting a sub element to change CSS styles
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.

(4 Comments |Comment on this)

JSLinux
Linux in JavaScript

(1 Comment |Comment on this)

ideas regarding preventing form submission when there is JS error
Below is a snippet of the code I am using to validate a form.

( Read more...Collapse )

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).

(12 Comments |Comment on this)

Javascript, CSS and UI
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

(3 Comments |Comment on this)