Dynamic Drive Forums - Blogs - ddadmin

Updating Menu scripts for iPad/iPhone and Android devices

ddadmin — Wed, 29 Jun 2011 06:34:01 GMT

Mobile devices such as the iPad, iPhone or Android tablets are pretty on par with modern desktop browsers when it comes to rendering JavaScript, though that's not to say they do so without hiccups. One of the more crippling limitations is mobile devices' lack of support for the onmouseover/out events of JavaScript, which if you think about is more of a fundamental "shortcoming" of touch based devices in general rather than a deliberate act of omission. Regardless, this lack of support means many menu scripts on DD that rely on the onmouseover event to trigger the dropping down of a menu do not work in said devices. One way to overcome this so these menu scripts are at least functional in mobile devices is to modify them so when a mobile device is detected, the onclick event is used instead to trigger their associated drop down menus instead of the default onmouseover. I'm sure I'll be getting an earful on better ways to target mobile devices, for for now I'm using the following scheme:
Code:
var ismobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null, //boolean check for popular mobile browsers
I'll be going through relevant menu scripts on DD to add in the necessary modification so they are functional in the major mobile devices. The first two to get the treatment are:

June 28th, 11

1) Anylink Drop Down Menu
2) Anylink CSS Menu

July 1st, 11

1) Flex Level Popup Menu

July 2nd, 11

1) Flex Level Drop Down Menu

July 17th, 11

1) All Levels Navigational Menu

I'll update this list each time another menu script is updated. In general only the .js file in each case is affected unless noted otherwise. Feedback, suggestions, fire away!

"Drop Up" option for Anylink and Anylink CSS Menu

ddadmin — Tue, 01 Jun 2010 08:19:18 GMT

Quite a few members have asked for the ability to have a menu drop upwards (instead of the default downwards) for either Anylink Menu and Anylink CSS Menu. With that said, use the below attached modified versions of the respective .js files for the two scripts to achieve this. Then, inside the HTML markup for the anchor link of a menu, to get the menu to drop up for it, make use of the data-dir attribute:
Code:
data-dir="up">Default Example
The presence of the attribute in red in combination with the modified .js file will cause the menu for that anchor to drop upwards.

Enjoy!

Attached Files

All Levels Menu- top headers revealed onClick instead of onMouseover

ddadmin — Tue, 28 Jul 2009 16:36:55 GMT

Original Script: All Levels Navigational Menu v2.2

Changes: This modified version of ddlevelsmenu.js causes the top level sub menus to be revealed onClick of the primary headers (instead of the default onMouseover). The remaining sub levels are still revealed onMouseover like before.

Usage: Just replace the original .js file with the modified one.

Attached Files

Dynamically minimizing a DHTML Window

ddadmin — Fri, 19 Jun 2009 21:46:29 GMT

Original Script: DHTML Window

By default the DHTML Window script can only be minimized by clicking on the "minimize" icon located on the upper right of the opened window. Someone asked on the forums if there's a way to do this dynamically, such as via a link instead. Well, certainly. Given the below example DHTML Window:
Code:
var googlewin=dhtmlwindow.open("googlebox", "iframe", "http://images.google.com/", "#1: Google Web site", "width=590px,height=350px,resize=1,scrolling=1,center=1", "recal")
To dynamically "minimize" it, you can call the internal function:
Code:
dhtmlwindow.minimize(googlewin.controls.firstChild, googlewin)
where "googlewin" in the above case is the variable assigned to the DHTML window when you opened it. The following creates a link that minimizes this window:
Code:
Minimize Window

"Operation Aborted" error in IE when inserting new elements into the DOM, and fix

ddadmin — Wed, 03 Jun 2009 19:48:28 GMT

The DOM lets you dynamically create and add elements to the page, such as the following, which creates an image on the fly and adds it to the end of the document:
Code:
var img=document.createElement("img")
img.setAttribute('src', 'dd.gif')
document.body.appendChild(img)
Ideally such an operation should be done after the document has loaded, though in most browsers, I noticed you can get away with it. In IE6 and IE7, however, things get a lot more unpredictable, and in the worst case scenario, disastrous. The exact curcumstances in which this can occur is described in the article "Why do I receive an "Operation aborted" error message when I visit a Web page in Internet Explorer?". I encountered this first hand while trying to debug Anylink JS Menu. This script dynamically adds a DIV to the page, with the operation run at the end of the document (instead of after it has fully loaded). I thought such timing would suffice in all the relevant browsers, and in my own testing, it does, including in IE6 and 7. Through bug reports posted on the forums, however, it became clear this wasn't always the case- depending on the page the script is added to, just calling the script- in turn trying to dynamically append an element to the document- at the bottom of the page isn't enough, and IE6/7 will fail, in a big way. Apparently when IE fails in inserting a new element to the document, it doesn't just spit out a JavaScript error, but it actually clears the entire page and shows a blank page with the error:

"Internet Explorer cannot open the Internet site. Operation Aborted".

It's as if you've just visited a page that failed to load. This is a severe error, and one that an illegal JavaScript operation should never lead to. But then again, we are talking about IE.

The fix is fairly simple- if you're attempting to dynamically create and insert new elements into the document, always do so either after the document has fully loaded, or its DOM has (DOMContentLoaded). The later is more desirable since it's fired much sooner than the former, though implementing it across browsers is more tricky. There are numerous tutorials on the web explaining how to check for DOM readiness, such as this and this tutorial.

And yes, Anylink JS Menu has been fixed for the aforementioned bug. It now is initialized on DOM ready. Here's the relevant piece of code it relies on:
Code:
domready:function(functionref){ //based on code from the jQuery library
	if (dd_domreadycheck){
		functionref()
		return
	}
	// Mozilla, Opera and webkit nightlies currently support this event
	if (document.addEventListener) {
		// Use the handy event callback
		document.addEventListener("DOMContentLoaded", function(){
			document.removeEventListener("DOMContentLoaded", arguments.callee, false )
			functionref();
			dd_domreadycheck=true
		}, false )
	}
	else if (document.attachEvent){
		// If IE and not an iframe
		// continually check to see if the document is ready
		if ( document.documentElement.doScroll && window == window.top) (function(){
			if (dd_domreadycheck) return
			try{
				// If IE is used, use the trick by Diego Perini
				// http://javascript.nwbox.com/IEContentLoaded/
				document.documentElement.doScroll("left")
			}catch(error){
				setTimeout( arguments.callee, 0)
				return;
			}
			//and execute any waiting functions
			functionref();
			dd_domreadycheck=true
		})();
	}
	// A fallback to window.onload, that will always work
	anylinkmenu.addEvent([window], function(){if (!dd_domreadycheck){functionref(); dd_domreadycheck=true}}, "load");
},

Tab Content script- Getting it to stop auto rotating after x cycles

ddadmin — Fri, 08 May 2009 00:57:09 GMT

Original Script: DD Drop Down Panel v1.01

By default, when the script is set to auto cycle through the tabs, it does this indefinitely until the user clicks on one of the tabs. With the following modified version of the .js file, you can have it automatically stop after x cycles, even if the user doesn't click on a tab during this time. Simply use the following modified .js file. If you wish to change the # of cycles from 2 to something else, change the part in red below inside it:
Code:
if (this.elapsedcycles >= this.hottabspositions.length*2)

Attached Files

Updating a JavaScript to be XHTML compliant

ddadmin — Thu, 02 Apr 2009 05:16:06 GMT

As a webmaster you've undoubtedly noticed the increasing shift in coding practices from HTML to XHTML on the web. If you're a professional web designer, you've probably even heard it first hand from your clients who demand their web pages be XHTML compliant. I get quite a lot of emails on a monthly basis asking for help in making a webpage that contains a DHTML script to be XHTML compliant. A common misconception is that this is a difficult process, which can be no further from the truth.

There are two ways to go about making a DHTML or JavaScript XHTML compliant, both should take no more than a few moments of your time.

Method 1: For inline JavaScript, wrap the code itself in the CDATA tag coupled with some clever use of JavaScript comments to let the validator know the content within the script should not be parsed for XHTML validity:
Code:
As you can see, just wrap any inline JavaScript with the parts in red, and you're done. You may also choose to use an alternate version of the CDATA/ JavaScript comment code:
Code:
Either code wrappers work.

Method 2: The other method for making your JavaScript XHTML compliant is to remove the entire script from your page, and place its contents inside an external JavaScript file, then reference this file on your page:
Code:
Where "myscript.js" contains the script itself minus the surrounding SCRIPT tags. Comments within the script tags are still allowed.

And there you have it. Now a JavaScript no longer has to trip up the XHTML validity of your pages!

DD Drop Down Panel v1.01- Adding a fade effect

ddadmin — Tue, 24 Mar 2009 06:46:04 GMT

Original Script: DD Drop Down Panel v1.01

Changes: This modified version of dddropdownpanel.js adds an optional fade effect to the original slide up/down animation, so both effects are shown simultaneously. If you're looking for more flare for the animation, this is it!

Usage: Just replace the original .js file with the modified one. The fade effect can be toggled at the end of the .js file where you initialize the script:
Code:
var defaultpanel=new ddpanel({
	ids: ["mypanel", "mypanelcontent", "mypaneltab"], // id of main panel DIV, content DIV, and tab DIV
	stateconfig: {initial: "5px", persiststate: true}, // initial: initial reveal amount in pixels (ie: 5px)
	animate: {enabled: true, fadeeffect: true, steps: 20}, //steps: number of animation steps. Int between 1-20. Smaller=faster.
	pointerimage: {enabled: true, src: ["arrow-down.gif", "arrow-up.gif"]},
	closepanelonclick: {enabled: true} // close panel when links or elements with CSS class="closepanel" within container is clicked on?
})

Attached Files

IE8 has arrived- so has the work to ensure DD scripts are compatible in it

ddadmin — Fri, 20 Mar 2009 03:07:03 GMT

Well, IE8 was officially released today, and most reviews I've come across on the web seems to be more or less positive, some even saying it puts IE back on top of FF. I've been using IE8 since the beta releases, and to me it's no FF killer. But personal feelings aside, the fact of the matter is, IE8 has arrived, it will eventually become the top browser market share wise in time as it's fed to Windows users, and unfortunately, this means it's also time to go through all scripts on DD to ensure they are compatible in IE8.

I'll be using this entry to update folks on scripts that have just been modified for the sake of IE8 moving forward. These updates may not show up on the DD Revised Scripts Page if they are minor in nature, so you should check in here instead. Feel free to let me know of a particular DD script that doesn't work in IE8 as well (by replying here).

For those do-it-yourself kind of people, there are resources on the web on getting JavaScript to properly work in IE8, from the simpliest but least graceful to getting to the possible root of the issue.

IE8, for better or for worse, welcome.

Simple Controls Gallery- Adding left/right arrow keys navigation

ddadmin — Fri, 06 Mar 2009 20:30:10 GMT

Original Script: Simple Controls Gallery v1.3

Changes: This modified version of simplegallery.js hooks up the left and right arrow keys on the keyboard so pressing them moves the gallery back and forth, respectively, in addition to the default navigation methods of course.

Usage: Just replace the original .js file with the modified one.

Attached Files

Using Google to host your jQuery (or other) JavaScript libraries

ddadmin — Thu, 05 Mar 2009 21:28:41 GMT

A growing number of scripts here on DD utilize the popular jQuery JavaScript library as its backbone, which means at the top of these scripts you'll see a reference such as:
Code:
which obviously requires you to download and host "jquery-1.2.6.pack.js" locally on your server. For those of you who likes to minimize hosting your own files for whatever reason, Google does provide the service of remote hosting of all of the popular JavaScript libraries- including jQuery- in which all you have to do is point your script to access that library on Google's server instead.

There are two ways to access jQuery on Google's server.

1) A direct, static reference to the desired jQuery file/ version:
Code:
As of writing version 1.3.2 is the latest version of jQuery, so I've chosen to access that particular file. Google hosts previous versions of the library as well unless otherwise noted, such as "1.2.6/jquery.min.js", if you wish to access that instead.

In general method 1) is the simplest way to take advantage of Google hosted libraries, and is the approach we will be slowly implementing for future jQuery related scripts here on DD. An example would be the updated Animated Collapsible DIV script.

2) A dynamic reference to the desired jQuery file using Google Ajax API:

This approach lets you reference a version of jQuery more generically, so instead of being locked into a specific version of jQuery (that will become outdated in time), you can, for example, reference the latest build of version 1.3.x (with x always reflecting the latest minor release at the time). Lets start with just referencing version 1.3.2 of jQuery, however:
Code:
When accessing jQuery dynamically using Google's Ajax API, you must use google.setOnLoadCallback() instead of the venerable jQuery(document).ready() function to execute any code once the document's DOM has become available. That's because jQuery is now being dynamically loaded, and only by using google.setOnLoadCallback() can you reliably know when jQuery has fully loaded (including access to jQuery(document).ready()).

Using the Google Ajax API syntax, if you wish to load the latest version of jQuery 1.3.x, you'd just do:
Code:
google.load("jquery", "1.3"); //load latest version 1.3.x of jQuery
Personally I'm not a fan of this second approach of accessing jQuery on Google. It requires loading Google's Ajax API first (which slows things down a bit), use of the "awkward" google.setOnLoadCallback(), plus the automatic versioning feature which if used may actually break a jQuery script that's not tested in the latest version.

Featured Content Glider- Fade instead of Glide

ddadmin — Tue, 03 Mar 2009 00:45:02 GMT

Original Script: Featured Content Glider

Changes: By default this script glides the contents into view. With this mod, it fades them into view instead.

Usage: Just replace the original .js file with the modified one.

Attached Files

Featured Content Slider v2.4- Pause content rotation onMouseover

ddadmin — Mon, 02 Mar 2009 06:13:02 GMT

Original Script: Featured Content Slider v2.4

Changes: The following modified .js file causes the script to pause the rotating of each slide (in auto mode) whenever the user rolls the mouse over the Slider or the pagination links, and resume playing onMouseout.

Usage: Just replace the original .js file with the modified one.

Attached Files

Welcome to the new DD Blog

ddadmin — Mon, 02 Mar 2009 05:35:25 GMT

Just a quick welcome to the new DD Blog! Currently the following usergroups have permission to post in the Blog:

- Senior Members
- Elite Members
- Mods and Admin

All other members have permission to read the blog and post comments to an entry. Personally I'll be using the Blog mainly to post modifications to DD related Scripts asked by members on the forums and that could benefit the general audience as well.

For the above 3 usergroups with permission to post in the Blog, please observe the following guidelines when doing so:

1) The Blog should not be used just to make short passing remarks or the chance to lead the user to another site. It is a way to share your knowledge with other members without having to be asked first a question, which is the case on the forums. Use it to post your favorite snippet of code, tip, or other info you think is worthy of an audience. Each entry should contain enough info to be useful in its own right, and not just a sentence or two that then leads people off to another URL.

2) There is an "off topic" category where you can post misc related entries. You can use that to share something about your daily lives deemed interesting, for example, but again, avoid the short passing remarks that's devoid of any substance or just a chance to spread a link.

3) Please categorize your entry based on the available categories.

4) You can transfer the contents of a post (should be your own) to become a Blog Entry instead. For example, alot of you have posted in the Coding Tips and Tutorials forum. A lot of these posts probably are better served as a blog entry instead. Just click on the little icon to the lower right of the post to get started.

In summary, The Blog should only not be used just to post any random thought that comes into your head. The idea is to create an archive of helpful and interesting information that can't be done so easily using the forums alone.

That's all for now!

IE8 beta and CSS/ JavaScript compatibility quick fix

ddadmin — Fri, 27 Feb 2009 06:33:47 GMT

IE8 has yet to formally launch, though the Beta and RC releases have been available for download for developers and those curious already. The advent of a new browser always brings up new issues with compatibility, and IE8 beta is no different. I've gotten quite a few emails lately regarding a DHTML script or CSS code not quite working properly in the new browser. A handful of scripts on DD fall into this group. I plan on eventually checking all scripts on DD for IE8 once it's officially released, when all the dust has settled in terms of changes to the browser's rendering engine. In the meantime, however, a quick way to fix pages on your site that don't quite function properly in IE8 beta is just to add the IE7 mode meta tag to the HEAD of your page:
Code:
This META tag causes IE8 to utilize IE7's rendering behavior while still maintaining all IE8 features. This approach is in fact recommended by Microsoft as a way to easily resolve any current IE8 rendering issues.