Ask MetaFilter posts tagged with DOM

CSS, JQuery, PHP and Caching: Best practices?

odinsdream — Wed, 20 Aug 2008 09:29:50 -0800

CSS, JQuery, PHP and Caching: What are the best practices for creating dynamic CSS with JQuery and PHP? Examples inside. I'm using PHP to dynamically create links and their associated CSS. I'm doing it dynamically because the number and positioning of these links is dependent on the selected month.

PHP inserts these CSS declarations into the HEAD tag. This seems to work fine on Firefox, but IE apparently caches the HEAD tag. This is a problem when navigating to pages for other months since the number of days will change.

Since I'm also using JQuery for the first time in this project, I wonder if I wouldn't be better off setting the CSS with that, rather than with PHP. The problem with this would be that I'm now mixing math and functions between the PHP sections of the site and the javascript sections. Is there a better way?

An example can be seen here. Source code for the same is available here.

The hover links over each day in each graph are created with a PHP loop based on the number of days in the month. The CSS to position them properly above each day is also created with a PHP loop.

The problem arises if a user selects an old month with a different number of days. Since IE caches the head tag the user only sees 20 day hover links, rather than 30 or 31.

Online documentation, tutorials or book references are very much welcome. Also, if I'm just completely going in the wrong direction please let me know.

Not-Quite-Sex Tips

Anonymous — Sun, 25 May 2008 13:20:27 -0800

I've recently gotten out of a LTR where there was a lot of sex without foreplay-- my ex didn't like to kiss/cuddle/etc. Now I'm with a cute, fabulous girl who absolutely loves making out, and I'm thrilled, but feeling like I've forgotten a lot of my old tricks. Suggestions? We've straddled each other, I've pinned her, there's ear licking and neck biting... We're both having a great time but I'm worried about falling into a rut and 'boring' her.

Could you tell me your favorite sexual activities that aren't *actually* sex?

Side notes: She has submissive preferences, we've both big food nuts (feeding-strawberries-while-blindfolded is on the table for next time).

Dress code for male Doms?

Anonymous — Fri, 18 Apr 2008 08:21:47 -0800

What is the minimum acceptable dress code for male Doms who want to go public? There's been a lot of D/s questions on AskMe lately and it's drawing out all the kinksters, old and new alike. Awesome!

My question is this: having just recently self-identified as a straight male Dom, I've yet to mould myself to the 'scene', and am doubtful if I ever will (i.e., it will most likely remain a private indulgence, though not necessarily closeted).

However, I'm interested in attending clubs and fet-friendly gatherings- not for public play (necessarily), but simply to meet more people in the scene and just generally soak up the atmosphere.

Problem: most clubs require a strict dress code, and even public events encourage it. I'm NOT into dressing up (e.g., leather, PVC, goth, punk, TV, nude, etc.), but at the same time I want to show that I've made an effort (and actually be allowed in).

What can I possibly wear??? I can look good in a suit, and don't mind shelling out for a new outfit, but how would that go over? Tuxes seem a bit overdone, and costume?? Like... army & navy stuff? This could work, but, again, it's not my style, so I'd risk looking idiotic or phony.

Help this newbie out, please! If it helps in any way, I'm slim, 5'8", and dress 'street casual' in my vanilla life.

Let's play master and servant... all day long.

Anonymous — Fri, 25 Jan 2008 14:03:39 -0800

Someone close to me has a D/s lifestyle. Are there readings/websites I can check out to give me a better understanding of these things and help me come to terms with my worries? Specifically: I don't have any issues with incorporating D/s stuff during sex and privately; it's the "lifestyle" aspects that worry me.

Things like enacting extreme versions of patriarchal gender roles round-the-clock, and out in public. Things like the fact that even simple home interactions like watching TV together incorporate D/s (she will be kneeling at his feet) makes it seem to me almost like an obsession or an addiction. Knowing their life is comprised of this kind of immersion also makes me feel like I am part of their sex play every time I am present with them, no matter how neutral the setting. Also, this couple plans to have children in the next year, and I really really don't understand how that would work out without harming the kids.

[Private answers can go to twasmelody11 at g mail.]

Help me AJAXify a portion of my project without overwhelming me.

odinsdream — Tue, 08 Jan 2008 08:41:58 -0800

Help me AJAX-ify a very simple web process in PHP. Links to very simple AJAX tutorials much appreciated. I've been reading up on AJAX technologies for a couple weeks. I've tried out a few, but I am still stuck with taking existing tutorials and modifying them slightly without really understanding behind-the-scenes. That is, I understand conceptually what the tutorials are showing me, but not very much programmatically. I'm fairly capable with PHP and HTML. I can read and write basic Javascript, but it seems like the AJAX technologies require a deeper level of understanding.

Having said that, all I'm really looking to do is rewrite a very simple portion of my project. Hopefully taking this small step will help me better understand what AJAX can really help me do long-term.

I have one PHP script, delete.php, which does an UPDATE SQL statement setting Deleted = True for a given ID, passed via HTML GET from other pages.

This seems like the perfect thing to AJAXify, but all of the tutorials I can find jump straight into Google Mashups, SOAP, JSON, XML, etc. I don't need these yet. What are some very basic tutorials that would help me replace my delete.php script with something more efficient?

jQuery vs. Scriptaculous

afx114 — Fri, 16 Nov 2007 15:49:10 -0800

JavaScript: jQuery vs Scriptaculous - Which is currently the favorite amongst developers? I'm about to implement a JavaScript framework on a large project. I have years and years of experience with JavaScript, DOM, AJAX, etc, but this will be my first time using a JavaScript framework. Finally making the jump in the hopes that it will make my life easier.

Which of the big-boys are favorited amongst developers these days? It seems like it's currently down to jQuery vs Scriptaculous, but I'm open to other suggestions. I realize that it comes down largely to personal preference, but I'd mainly like to know the pluses, minuses, and differences between the two. Performance and Ease-of-Use are top priorities. Please no fanboy flamewars, thx. :)

XML DOM Help needed

postergeist — Thu, 30 Aug 2007 21:25:19 -0800

XML DOM question: Help a newbie. I can't figure out how to do something that seems so simple. I'm writing an extremely simple RSS reader that creates a select control. Each option element needs only to be filled with the values of the "link" and "title" elements but I can't figure out how to reference them by name. In the RSS its basicaly only the "item" elements i'm interested in and "link" and "title" are two elements which are its children that I need to fetch the values for

Heres my initial code (ASP):
-------------------------------------------------------------------------
Set Root=source.documentElement
Set PodcastList=Root.getElementsByTagName("item")

For Each Podcast In PodcastList

Set Podcast_URL = [HOW?]
Set Podcast_title = [HOW?]
Response.write("<option value=""" & Podcast_URL.text & """>" & Podcast_URL.text & "</option>")
Next
--------------------------------------------------------------------------
What I can't figure out is how to request just the element i want by its name without using getelementsbyname() since that returns a list and there seem to be properties available to return single elements like firstChild or lastChild so it seems logical that there would be a method to do it for a single named element. I know xpath is probably what I need but i'm not at the learning stage where I know how to incorporate that into my code.

Thanks for your help!

Only Fools and Webgeeks

dw — Wed, 30 May 2007 16:49:58 -0800

I need to parse an XML flat file with JavaScript, and I'm struggling with how to use the DOM to select one particular node via an attribute then use its child nodes to populate some values. [more] (Let's get one thing out of the way first: I don't think I can use XSLT. Please prove me wrong, but the problem is that I'm taking the XML node values and using them in a JavaScript function (that calls runs embedded Flash videos), and by rule don't I have to enclose JavaScript within an XSLT stylesheet inside CDATA, thus meaning any XSLT tag inside won't be parsed?)

(Oh, and my DBA is so overwhelmed there's no way I can get his attention to give me some tables before July... and I need this done a week ago.)

Anyway, here's the basic XML, really simplified:
<root>
<president ident="Clinton_Bill" />
<name> William J. Clinton </name>
<video url="http://someurl.com/clinton.flv" />
</root>

What I want is to have a query string on the URI, then use the value of that query string to match it against the ident attribute on president and if it matches use that node's values on the page.

In XSLT, I would set a param we'll call "query" and give it a value of the query string, then select root/president[@ident = $query].

So, how do I do this bit in JavaScript? I know how to load the node through XMLHTTPRequest and other methods, but how do I traverse the node until I find the right one? I'm thinking I run a for-next loop and if the attribute value matches process it, but that seems... inefficient. Is that the only way? Is there a better way?

I've gone through a dozen pages, but I haven't found anyone attempting to do this, which seems really strange to me. And, admittedly, JavaScript is my weakest web language, so there's that going against me.

Hekp me move a div!

Freen — Sat, 24 Feb 2007 16:02:04 -0800

Javascript Noob: I need to move one div inside of another div that is elsewhere on the page. How do I do this? I've got an advertiser who places ads on my page using javascript. Unfortunately, his javascript is weird in IE6, and doesn't necessarily place the ad in the correct div. (It depends on the order in which his included javascript files download relative to mine.) It has a tendency to drop the ad outside of the positioned div i've created for it, in fact fairly far down the page.

I know what the div id is for the ad, and i know what div i want it to be moved to, and i know exactly when and where the advertiser places the div on the page (even in IE6), but how do i move it there?

All of my searches seem to return stuff about animation, etc. Not about re-organizing the DOM itself.

let's say for the sake of clarity:
my div id="my_div"
and the advertiser's div="ad_div"

Any ideas?

Dynamic Function Reference in Javascript

potch — Wed, 10 Jan 2007 07:54:23 -0800

I'm writing a cross-browser JavaScript library that will allow me to apply events (onmouseover, click, etc) to elements using what look like stylesheets:

a {mouseover:someFunction;}

In writing a parser for these files, I've come upon a stumbling block. How does one reference a function given by a String? Or rather, in

element.onmouseover = someFunction

how would one let someFunction be a variable?

How can I build an OPML renderer in PHP5?

tommorris — Fri, 03 Nov 2006 09:55:19 -0800

WebApplicationFilter: Help me build an open-source outline renderer in PHP. Currently it is a practice among some people (me included) to build distributed directories using OPML. Thanks to the profusion of tools available to create OPML, it's relatively easy to contribute to these distributed directories, but hard to render them up. Currently, there are some good methods for doing so in JavaScript - Grazr and Optimal - but there isn't a very easy way of doing so on the server side. Except, of course, the tools available in the UserLand Frontier environment, but that's not something I want to battle with (and neither, I suspect, do many other people). JavaScript is fine, but I would like to be able to view things on my mobile device.

I'd like to build one, but it seems a pretty mammoth task to me. Basically, I'm thinking that I could build this in PHP 5 - but I'm not totally sure where to start. Should I use the DOM extension? SimpleXML? XSLT? I've used all three, but I'm not sure which would be best for this project (and, I admit - as a fairly newbie developer, I can't quite see the forest for the trees at the moment). I'm capable enough to pull stuff out of the OPML file, but it's getting it to follow the links through to the relevant file that gets me stuck.

The way that OPML distributed directories work is that you might have a directory tree, and a particular branch of that is handled in a completely separate document - and gets "included" when you render the document up.

Ideally, I should be able to set it up so that a person can visit whatever.com/directory/Foo/Bar (with Foo/Bar being branches on the tree). It would be helpful if it could be implemented in such a way that it can be run on the hosting account of anyone who's got PHP installed - but Cache_Lite would also be useful to have.

The way this is currently implemented in Frontier is through the functions listed in these two files: walk and viewpage (the language resource for UserTalk is here. A working example of this code in action is here).

If this is going to be a lot of work, do you think it would be possible to formulate the instructions above in to a form suitable to hire out to someone on a site like oDesk or Rent-a-Coder?

Also, any code that I produce (or commission) will be released under the GPL. Any output that it produces will also be good web standards XHTML as well (I hope) and may also use microformats where appropriate.

I have placed this up on my blog also, so non-MeFites can comment.

How could Javascript find what media-type related stylesheet has been selected?

adipocere — Fri, 01 Sep 2006 15:24:21 -0800

How could Javascript find what media-type related stylesheet has been selected by a Web browser? I would like a particular piece of Javascript to 1) trigger after external cascading style sheets have been loaded, then 2) figure out, in some fashion, which style sheet has loaded (based on the media type, like "screen" or "handheld"). Essentially, I'm adding a lot of material via the DOM that I don't want cluttering up the HTML for handheld users, or the folks who have no CSS at all.

I'd like to keep this working with Internet Explorer, FireFox, Safari, Opera, etc. Using :before and :after to generate content via a rule like content: url(somejavascriptfunction), then accessing that, won't work for IE 6.0.

I thought about trying to wait a second for the sheets to load (with a timer), then access the style of some element, a style that would be changed by an external style sheet, and then use that as a signal to see which style sheet was loaded. For some reason, I'm failing to access any style that either wasn't 1) inline CSS, 2) added by Javascript later.

Looking at the stylesheet object for the disabled property didn't work, either. althought A List Apart had something that kinda-sorta looked helpful.

I'm out of the obvious ideas, and my Google searches have pointed me mostly at forcing style sheets, rather than figuring out which have been selected by a browser.

Arbitrary [x]html DOM Containers

lodurr — Thu, 06 Jul 2006 10:57:36 -0800

Is it "standard" for a browser to parse an arbitrary tag as part of the DOM? I don't know why it never occurred to me before to do this, but for some reason today I was inspired to see whether a browser would apply style rules to a block defined by an arbitrary tag. I created a block that looks like this:

<melvin>This is Melvin</melvin>

...then I added a style container and applied a style rule to the entity "melvin" (e.g., melvin { background-color: #000000;}). And it worked, in both Safari and Firefox. Seems to work for doctypes all the way from html 4.01 transitional all the way through xhtml 1.1 strict.

Should it? Why? And if so, would it be a reliable technique? I've never heard of this before.

Bonus question: Am I a sad, sad geek for thinking this is cool?

Where did I put the Ajax?

Fezboy! — Thu, 09 Mar 2006 13:27:08 -0800

Why do browsers store the original DOM in the browser history instead of caching the most recent version? I'll admit up front that I haven't done much research into the question myself even though it is one I have been interested in for some time.

Anyway, based in large part on the tangential discussion in this AskMe thread, I am curious to know if there is something spec-wise that prohibits storing the latest DOM in the history cache. The current behavior of reverting to the original, page-load DOM when going back through the browser history poses some prickly issues when doing AJAX-like DHTML gimcrackery. If there is nothing prohibiting this, is it not more intuitive to bring the user back to their most recent state? After all, browsers remember information relating to the viewport and input fields—why should the DOM receive such a bad rap? Should I start lobbying at Mozilla?

What's a really good DOM/Javascript/DHTML quick-glance reference?

namespan — Thu, 16 Feb 2006 13:27:40 -0800

What's a really good DOM/Javascript/DHTML quick-glance reference? I'm talking about something I could post on my cube wall, or maybe a folded 11 x 16, or *maybe* a very well organized large page-size small-page # booklet. Up to date cross-browser coverage. Free is nice, but I'm willing to pay.

Looking for a modern DOM/XSLT/Xpath implementation in C

ChrisR — Tue, 14 Jun 2005 15:47:26 -0800

My boss has tasked me with tracking down a modern XML library written in C. The library has to run on (at least) RHEL3, Windows, and Solaris, but more is better. I've seen tDOM, but it doesn't look like it's as up to date as we need. However, I'm not too up on the standards (that's part of my quest) so I don't know for sure. It's possible that domc is what I'm looking for, but, again, I lack the knowledge of the standards required to judge it.

Can someone help direct my inquiries here? Are there other options? How would I best evaluate them?