[jQuery] Thank you John Resig
I just want to say, thank you John. I have been developing sites with
jQuery for the better part of a year and it has just made the amount
of work I can get done sky rocket. Now, however, I just started a new
job this week and they are using YUI.
I have been patient and have spent the better part of 5 days trying to
do the most basic things the YUI-way and I'm falling flat on my damned
face. I have actually resorted to writing code using basic DOM api
functions simply because YUI is so frakking hard to use. Their
documentation is all over the map. They have multiple sub-libraries to
do the most basic thing like DOM selections and manipulation. Should I
be using YAHOO.util.Selector, or YAHOO.util.Dom.get, or
YAHOO.util.Element.getByElementId( or TagNames, or ClassNames).
CHRIST!
oh, the joy of $('#my id, .someclass, divp)
I think people that insist on their work being hard must be aliens.
That's about the only explanation that I can come up with.
Good god, are there any ex-YUI people that found the goodness of
jQuery that can point me at a coherent tutorial for this pile of crap
called YUI?
[jQuery] Re: test for css selector capability?
I think my question was misunderstood. I'm not asking about detecting browser versions. I want to test if the current browser has native support for a particular kind of CSS selector. My previous example was the :first- child pseudo selector that isn't supported in IE6, but is supported in most other browsers. Another example would be ul li, which selects only li elements that are immediate children of a ul. Anyone have some ideas on how this could be implemented? On Feb 9, 7:16 am, Aaron Gundel aaron.gun...@gmail.com wrote: jQuery.browser is deprecated in 1.3 + (don't use it). JQuery now uses feature detection. This is a more extensible way of detecting which browser is being utilized. See the following page for more details...http://docs.jquery.com/Utilities/jQuery.support On Mon, Feb 9, 2009 at 4:02 AM, Mohd.Tareq tareq.m...@gmail.com wrote: HiGeuis, Ther is a function with alias ($.browser) it will gives u functionality to identify browser name like this $.browser.mozilla , $.browser.msie , $.browser.opera , $.browser.safari. if u wana return the version of browser , then u have use below function $.browser.version it will return version of current browser according to ur problem ie6 u can add css on the fly. hope this will work . cheers cioa On Mon, Feb 9, 2009 at 11:47 AM,Geuisgeuis.te...@gmail.com wrote: I'm working on a project where I need to detect if the browser natively supports a given CSS selector. For example, if I am using the selector 'ul li:first-child', this is supported by IE7, FF, and Safari but not by IE6 and below. Is there a way that I can test that selector to see if the current browser supports it? A feature that returns a simple boolean status would be awesome. -- ---| Regard |--- Mohd.Tareque
[jQuery] Re: test for css selector capability?
I think my question was misunderstood. I'm not asking about detecting browser versions. I want to test if the current browser has native support for a particular kind of CSS selector. My previous example was the :first- child pseudo selector that isn't supported in IE6, but is supported in most other browsers. Another example would be ul li, which selects only li elements that are immediate children of a ul. Anyone have some ideas on how this could be implemented? On Feb 9, 7:16 am, Aaron Gundel aaron.gun...@gmail.com wrote: jQuery.browser is deprecated in 1.3 + (don't use it). JQuery now uses feature detection. This is a more extensible way of detecting which browser is being utilized. See the following page for more details...http://docs.jquery.com/Utilities/jQuery.support On Mon, Feb 9, 2009 at 4:02 AM, Mohd.Tareq tareq.m...@gmail.com wrote: HiGeuis, Ther is a function with alias ($.browser) it will gives u functionality to identify browser name like this $.browser.mozilla , $.browser.msie , $.browser.opera , $.browser.safari. if u wana return the version of browser , then u have use below function $.browser.version it will return version of current browser according to ur problem ie6 u can add css on the fly. hope this will work . cheers cioa On Mon, Feb 9, 2009 at 11:47 AM,Geuisgeuis.te...@gmail.com wrote: I'm working on a project where I need to detect if the browser natively supports a given CSS selector. For example, if I am using the selector 'ul li:first-child', this is supported by IE7, FF, and Safari but not by IE6 and below. Is there a way that I can test that selector to see if the current browser supports it? A feature that returns a simple boolean status would be awesome. -- ---| Regard |--- Mohd.Tareque
[jQuery] Re: test for css selector capability?
I guess this really is a hard concept to get across after all.
Ok, so there's browser feature detection with .support.
So imagine the thing I'm talking about works like this:
alert( $('ul li:first-child').support );
alerts 'true' if Firefox, but alerts 'false' if IE6.
I'm not trying use the selectors to do styling, I'm trying to use the
selectors to detect browser capability.
On Feb 9, 2:50 pm, MorningZ morni...@gmail.com wrote:
Are you *sure* that parent child doesn't work in IE6?
I could see that this CSS declaration, and pretty sure it doesn't work
ul li {
color: blue;
}
but part of the magic of jQuery (and other libraries) is that it takes
that into account already. and saying $(ul li) should work no
matter what (supported) browser it runs on
On Feb 9, 5:33 pm,Geuisgeuis.te...@gmail.com wrote:
I think my question was misunderstood. I'm not asking about detecting
browser versions.
I want to test if the current browser has native support for a
particular kind of CSS selector. My previous example was the :first-
child pseudo selector that isn't supported in IE6, but is supported in
most other browsers. Another example would be ul li, which selects
only li elements that are immediate children of a ul.
Anyone have some ideas on how this could be implemented?
On Feb 9, 7:16 am, Aaron Gundel aaron.gun...@gmail.com wrote:
jQuery.browser is deprecated in 1.3 + (don't use it).
JQuery now uses feature detection. This is a more extensible way of
detecting which browser is being utilized.
See the following page for more
details...http://docs.jquery.com/Utilities/jQuery.support
On Mon, Feb 9, 2009 at 4:02 AM, Mohd.Tareq tareq.m...@gmail.com wrote:
HiGeuis,
Ther is a function with alias ($.browser) it will gives u functionality
to
identify browser name
like this $.browser.mozilla , $.browser.msie , $.browser.opera ,
$.browser.safari.
if u wana return the version of browser , then u have use below
function
$.browser.version it will return version of current browser according
to ur
problem ie6 u can add css on the fly.
hope this will work .
cheers cioa
On Mon, Feb 9, 2009 at 11:47 AM,Geuisgeuis.te...@gmail.com wrote:
I'm working on a project where I need to detect if the browser
natively supports a given CSS selector.
For example, if I am using the selector 'ul li:first-child', this is
supported by IE7, FF, and Safari but not by IE6 and below. Is there a
way that I can test that selector to see if the current browser
supports it? A feature that returns a simple boolean status would be
awesome.
--
---| Regard |---
Mohd.Tareque
[jQuery] Re: test for css selector capability?
Ahh, that's a great point! Thanks Karl, I think you solved my problem!
On Feb 9, 4:06 pm, Karl Rudd karl.r...@gmail.com wrote:
You could do this because the .css(attribute) returns the computed
(the result of all the CSS applied) value of an element's CSS
attribute.
It would involve adding a stylesheet to the document with the
particular selector in it, with say a change to the background colour.
Then create elements that should be selected (and add them to the
document), then test the .css('background-color') of the element to
see if it matches the colour in the stylesheet.
Slightly tricky but doable.
Karl Rudd
On Tue, Feb 10, 2009 at 10:31 AM,Geuisgeuis.te...@gmail.com wrote:
I guess this really is a hard concept to get across after all.
Ok, so there's browser feature detection with .support.
So imagine the thing I'm talking about works like this:
alert( $('ul li:first-child').support );
alerts 'true' if Firefox, but alerts 'false' if IE6.
I'm not trying use the selectors to do styling, I'm trying to use the
selectors to detect browser capability.
On Feb 9, 2:50 pm, MorningZ morni...@gmail.com wrote:
Are you *sure* that parent child doesn't work in IE6?
I could see that this CSS declaration, and pretty sure it doesn't work
ul li {
color: blue;
}
but part of the magic of jQuery (and other libraries) is that it takes
that into account already. and saying $(ul li) should work no
matter what (supported) browser it runs on
On Feb 9, 5:33 pm,Geuisgeuis.te...@gmail.com wrote:
I think my question was misunderstood. I'm not asking about detecting
browser versions.
I want to test if the current browser has native support for a
particular kind of CSS selector. My previous example was the :first-
child pseudo selector that isn't supported in IE6, but is supported in
most other browsers. Another example would be ul li, which selects
only li elements that are immediate children of a ul.
Anyone have some ideas on how this could be implemented?
On Feb 9, 7:16 am, Aaron Gundel aaron.gun...@gmail.com wrote:
jQuery.browser is deprecated in 1.3 + (don't use it).
JQuery now uses feature detection. This is a more extensible way of
detecting which browser is being utilized.
See the following page for more
details...http://docs.jquery.com/Utilities/jQuery.support
On Mon, Feb 9, 2009 at 4:02 AM, Mohd.Tareq tareq.m...@gmail.com
wrote:
HiGeuis,
Ther is a function with alias ($.browser) it will gives u
functionality to
identify browser name
like this $.browser.mozilla , $.browser.msie ,
$.browser.opera ,
$.browser.safari.
if u wana return the version of browser , then u have use below
function
$.browser.version it will return version of current browser
according to ur
problem ie6 u can add css on the fly.
hope this will work .
cheers cioa
On Mon, Feb 9, 2009 at 11:47 AM,Geuisgeuis.te...@gmail.com wrote:
I'm working on a project where I need to detect if the browser
natively supports a given CSS selector.
For example, if I am using the selector 'ul li:first-child', this is
supported by IE7, FF, and Safari but not by IE6 and below. Is there
a
way that I can test that selector to see if the current browser
supports it? A feature that returns a simple boolean status would be
awesome.
--
---| Regard |---
Mohd.Tareque
[jQuery] test for css selector capability?
I'm working on a project where I need to detect if the browser natively supports a given CSS selector. For example, if I am using the selector 'ul li:first-child', this is supported by IE7, FF, and Safari but not by IE6 and below. Is there a way that I can test that selector to see if the current browser supports it? A feature that returns a simple boolean status would be awesome.
[jQuery] Re: Passing a Index to a function
$(table tr).click(function() {
clickFunc($('table tr').index(this);
});
On Feb 8, 10:54 pm, Pedram pedram...@gmail.com wrote:
Dear folk,
I want to get the index of the TR and send it to the Function , I
don't know how to it . this is what I'm trying to do
$(table tr).bind(click,{IndexName:$(this).index(this)},clickFunc)
function clickFunc(event){
console.log(event.data.IndexName);
}
[jQuery] Re: How to make hyperlink failed
I think you're asking, how do you prevent a link from doing anything
when the browser has javascript enabled.
$('#xxx').click(function(){
//your stuff
return false;
}
On Feb 8, 11:22 pm, David .Wu chan1...@gmail.com wrote:
If I got a hyperlink a href=http://xxx.com; id=xx/a
$(function() {
$('#xxx').click(function() {
.
..//do something
});
})
I want to make the link doing something if browser opened javascript,
and if not, it go to the page it referred.
[jQuery] How to detect jQuery version?
Wondering what an easy way to detect which version of jQuery is running on a page. Is there a $.version property? Doing feature detection based on deprecated methods probably wouldn't work well, since they would still exist in some newer versions.
[jQuery] hyphen breaking starts with selector
I'm wondering if this is a bug or if I'm missing something.
The selector $('span[class^=err]') matches span class=error but
*not* span class=err-2.
$('span[class^=err-]') does *not* match span class=err-or or
span class=err-2
What's the deal with the hyphen? Is it a special character?
[jQuery] how to detect node removal in IE?
I'm working on a plugin that extends the change event to detect when non-input elements are modified. For example, when a span tag has new content added/changed/removed. I've got some of the basic behaviors working well using DOM Mutation events in FF, Safari, and Chrome. IE 6/7 is being its typical self. pt... Does anyone know of an event that fires in IE when a node is removed? My initial line of inquiry is using onreadystatechange but I'm not getting anywhere with it just yet.
[jQuery] Re: JQuery is really a nice tool
Ok, there's no freaking jquery on that page. More so, the html of the page is absolutely HORRIBLE. Right-click disabled. Html above the doctype. No closing body or html tags. On Dec 12, 10:30 am, Sid harshal...@gmail.com wrote: Just look at this URLhttp://googlelance.com You see the login and button click on it then you find that a pop up appears in middle of your page for login that is done with Jquery
[jQuery] detect when content of element changes?
On the site I'm working on, we have some span tags with IDs. The spans are initially rendered on the page with no text content. When certain events happen, text error messages are loaded into these spans. I want to write an additional handler that is triggered when the text content of the span is changed. The onchange(jquery change) event doesn't fire on non-form elements. I suspect I can utilize DOM Mutation events, however the support for these is not universal, especially in IE. Has someone else worked out a solution for this? I can jank it and use a timer, but that is messy and causes additional load in the page.
[jQuery] Possible to use a non ID selector in .load()?
I'm loading a full page using .load() and trying to use a selector to
only get part of the page, however it doesn't seem to be working. Is
it necessary that the selector always start with an id?
My code:
$('#mydiv').load('/path/index.php bodycentertabletbodytr:eq(2)
tdtabletbodytr');
Examples I've seen:
$('#mydiv').load('/path/index.php #containertable');
[jQuery] need some basic json object help
I've gotten to be fairly intermediate at consuming json objects, such
as those I'm retrieving from web api's. However, I'm trying to push
the boundaries of what I understand about JSON objects once the client
has loaded them. I have been searching around google for the last
couple of hours for what I think I want to know but I'm getting
nowhere. Hoping some other js wizzes can help me out. This isn't
directly a jQuery question, but I need to understand more about this
to help me write better jQuery code.
This is my sample data for the following questions:
var obj = { nodes :[
{
type : 'a',
name : 'stuff'
},
{type : 'b'},
{type : 'c'}
]
};
1) How can I add new nodes to an existing object? I can reference
obj.nodes[x].type for example. Now I want to add a new type to
nodes. I tried: obj += {type:'d'}; but got nothing usable. Except
that obj.nodes.length went from 3 to 62.
2) Is there a list of core Javascript methods that let you work with
JSON objects? Something like .push, .pop, etc?
3) How do you search a JSON object? Suppose I want to find a group of
nodes that all have the name stuff, regardless of what their type
property is?
I know I can loop through an object using for(i in obj){}.
[jQuery] Re: need some basic json object help
Thanks for the tips. That helps a bunch.
On Nov 16, 6:27 pm, RobG [EMAIL PROTECTED] wrote:
On Nov 17, 8:57 am, Geuis [EMAIL PROTECTED] wrote:
I've gotten to be fairly intermediate at consuming json objects, such
as those I'm retrieving from web api's. However, I'm trying to push
the boundaries of what I understand about JSON objects once the client
has loaded them. I have been searching around google for the last
couple of hours for what I think I want to know but I'm getting
nowhere. Hoping some other js wizzes can help me out. This isn't
directly a jQuery question, but I need to understand more about this
to help me write better jQuery code.
This is my sample data for the following questions:
var obj = { nodes :[
{
type : 'a',
name : 'stuff'
},
{type : 'b'},
{type : 'c'}
]
};
1) How can I add new nodes to an existing object? I can reference
obj.nodes[x].type for example. Now I want to add a new type to
nodes. I tried: obj += {type:'d'}; but got nothing usable. Except
that obj.nodes.length went from 3 to 62.
obj.nodes.push({type:'d'});
2) Is there a list of core Javascript methods that let you work with
JSON objects? Something like .push, .pop, etc?
Methods belong to objects, the methods you mention belong to
Array.prototype and therefore instances of Array.
3) How do you search a JSON object? Suppose I want to find a group of
nodes that all have the name stuff, regardless of what their type
property is?
I know I can loop through an object using for(i in obj){}.
Since nodes is an array, you can iterate over it using a for loop (or
an each method) and check:
var t = nodes[i];
var stuffGroup = [];
if ( t.name t.name == 'stuff' ) {
stuffGroup.push(t);
}
You might want to make the relevant methods properties of some object
that you construct and pass it the JSON data to work with.
--
Rob
[jQuery] How to get complete event object model for a page?
Sorry if the subject doesn't quite describe what I'm after. Hopefully
the description works better.
Ok, so is there a way to find out all of the events and functions that
have been bound to elements in a page? For example, if you did body
onload=func(), or if you did
document.body.addEventListener('load',func(),false). The first being
inline and the second binding the function func() to the load event.
I have this code that searches for all inline-defined events, but its
only doing attribute matching and not actually doing anything with the
event object for the page.
$
('*[onabort],*[onblur],*[onchange],*[onclick],*[ondblclick],*[onerror],*[onfocus],*[onkeydown],*[onkeypress],*[onkeyup],*[onload],*[onmousedown],*[onmousemove],*[onmouseout],*[onmouseover],*[onmouseup],*[onreset],*[onresize],*[onselect],*[onsubmit],*[onunload],a[href^=javascript:]').each(function(i)
{});
[jQuery] Re: jQuery + HTML namespaces
I have absolutely no idea if this will help with your problem, but check out http://docs.jquery.com/Core/jQuery.noConflict On Nov 6, 2:58 pm, ken [EMAIL PROTECTED] wrote: I've found several instances of people having trouble using jQuery with a document that implements custom HTML namespaces (i.e. foo:bar /), and I was wondering if anyone had developed any work-arounds? I've recently been tasked with incorporating jQuery into our corporate application -- largely due to my prodding and fanfare -- and the first area I'm working on has some DOM manipulation, but it fails with jQuery due to our namespacing that we use. I am simply attempting to insert HTML into the document using html(). I'm not sure what all the html() method does behind-the-scenes, but evidently it does alot more than I ever gave it credit for. Using a pre-existing implementation of Mootools, the content is inserted with no issues. Using innerHTML, the content is inserted with no issues. Using .html(), the DOM structure is clobbered and errors are thrown. I hacked the selector regex and added in a : (for the namespaced items), but that seems to have little effect on the final result. Also, the HTML chunk I am inserting has a link to an external .js via script tag, and for some reason that .js is loaded fresh, even though the browser already has it cached; using Mootools, or .innerHTML, you can see the browser request the .js but the server returns a 304 and thus its not downloaded again. Why is jQuery forcing it to download, and can I disable this? Thoughts? Thanks in advance, Ken
[jQuery] Re: Help with jQuery Suckerfish 2-tier navigation
Don't use a strict javascript approach to building suckerfish menus.
Use CSS, and only add javascript to support hover on non-anchor
elements in IE6.
Use the Son of Suckerfish page for the basics.
http://www.htmldog.com/articles/suckerfish/dropdowns/
Here is a complete working example:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd;
html
head
titleSuckerfish Dropdowns - Two Level Bones/title
style type=text/css
body {
font-family: arial, helvetica, serif;
}
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#nav a {
display: block;
width: 10em;
}
#nav li { /* all list items */
float: left;
width: 10em; /* width needed or else Opera goes nuts */
}
#nav li ul { /* second-level lists */
position: absolute;
background: orange;
width: 10em;
left: -999em; /* using left instead of display to hide menus because
display: none isn't read by screen readers */
}
#nav li ul ul { /* third-and-above-level lists */
margin: -1em 0 0 10em;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li
li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
#content {
clear: left;
color: #ccc;
}
/style
script type=text/javascript src=jquery-1.2.6.pack.js/script
script type=text/javascript
$(document).ready(function(){
if($.browser.msie){
$(#nav li).hover(
function () {
$(this).addClass(sfhover);
},
function () {
$(this).removeClass(sfhover);
}
);
}
});
/script
/head
body
h1PERCIFORMES! (2)/h1
pWelcome to the world of Perciformes - perch-like fish including the
world famous strongSuckerfish/strong/p
ul id=nav
lia href=#Percoidei/a
ul
lia href=#Remoras/a
ul
lia href=#Echeneis/a/li
lia href=#Phtheirichthys/a/li
lia href=#Remora/a/li
lia href=#Remorina/a/li
lia href=#Rhombochirus/a/li
/ul
/li
lia href=#Tilefishes/a
ul
lia href=#Caulolatilus/a/li
lia href=#Lopholatilus/a/li
lia href=#Malacanthus/a/li
/ul
/li
lia href=#Bluefishes/a
ul
lia href=#Pomatomus/a/li
lia href=#Scombrops/a/li
lia href=#Sphyraenops/a/li
/ul
/li
lia href=#Tigerfishes/a
ul
lia href=#Amniataba/a/li
lia href=#Bidyanus/a/li
lia href=#Hannia/a/li
lia href=#Hephaestus/a/li
lia href=#Lagusia/a/li
lia href=#Leiopotherapon/a/li
lia href=#Mesopristes/a/li
lia href=#Pelates/a/li
lia href=#Pelsartia/a/li
lia href=#Pingalla/a/li
lia href=#Rhyncopelates/a/li
lia href=#Scortum/a/li
lia href=#Syncomistes/a/li
lia href=#Terapon/a/li
/ul
/li
/ul
/li
/ul
div id=content
pLorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit.
[jQuery] How to determine filter used to select $(this)?
If I do a match that is using multiple selectors, how(or is it
possible) do I know which filter was used to select the item in the
current index?
For example:
$('*[onabort],*[onblur],*[onchange]').each(function(){
$(this).css('border','1px solid #000');
});
This scans the DOM for any elements with these inline javascript
attributes. In the .each() loop, I need to know which filter was used
to match the current selection. Can this be done?
[jQuery] Re: pure CSS hover problem
Ernes, can you post your html and CSS? Feel free to email me directly if you want. [EMAIL PROTECTED] On Nov 4, 8:22 am, Enes Fazli [EMAIL PROTECTED] wrote: Hello everybody, I have a menu that is similar to the fourth example onhttp://users.tpg.com.au/j_birch/plugins/superfish/. The problem exists only if JS is deactivated. If for example the second menu item is activated and I hover over the first menu item (long menu item) I still see the last submenu item of the second menu (subitem 2d). The reason of this behaviour is that on hover the submenu items get a higher index than the items of the current selection, but if there are more items in the current selection than in the hovers submenu these items can still be seen. Now i just have some fake items in the submenus so every submenu has the same amount of items. This is just a workaround for the moment. My question now is: *Is there a more elegant solution to fix this problem?* Enes
[jQuery] wrap isn't working, or I'm doing it wrong?
There's a page of some damn tables that I'm trying to redo
dynamically. Its a page I don't have control over so this code is
running from a bookmarklet in my browser. I'm trying to sample out the
content I want and re-wrap it in an an unordered list. I can't get
the .wrap function to work.
The sample html looks like this:
table
tr
td class=title
a href=linkLink/a
/td
/tr
/table
I'm using this jQuery code to 1) sample the data I want. 2) destroy
the contents of the page, write the start/end ul tags. 3) loop through
the sampled data, wrap li tags around them, then append to the ul.
However, it will write out the contents but doesn't wrap the li
tags.
anchors = $(td.title[valign!='top']).children();
$('body').html(ul id='hn'/ul);
anchors.each(function(){
$(#hn).append( $(this).wrap(li/li));
});
[jQuery] need help in making dynamic form validation
Hi everyone, I'm hoping someone can help me learn the right way to do
this. Its experimental for me at this point. Example code is at the
bottom.
So what I'm attempting to do is to do input form validation by loading
a function which self-assembles an object that has its properties set
as the ID names of the inputs in a given form. The values of those
inputs are then assigned as the values of those properties. In this
way, you can pull all of the data in a form at once and iterate
through the object to do your data checks, validation, etc. Since the
properties correspond to the ID names, its easy to dynamically
manipulate the DOM based on the structure of the object.
In my example code below, I have a version that works correctly but it
is commented out. It is setup so that the properties are predefined,
then sets their values. It works, but its not the more dynamic self
assembling one that I want.
The second function that is not commented out was my (poor) attempt at
building a working one. Basically, given a form ID, we loop through
all inputs in the form and retrieves their IDs and values. The problem
I have is that I don't know how to create new properties for the
check function based on the IDs of the inputs.
Thank you!
script type=text/javascript
$(document).ready(function(){
//standard method that works
//check = function(){
//this.user = $('#user').attr('value');
//this.pass = $('#pass').attr('value');
//this.one = $('#one').attr('value');
//this.two = $('#two').attr('value');
//}
//attempted jquery version
check = function(){
$('#form1 :input').each(function(obj){
obj.$(this).attr('id') = $(this).attr('value');
});
}
$('#clicker').click(function(){
c = new check();
alert( c.user+ | +c.pass+ | +c.one+ | +c.two );
});
});
/script
form id=form1
h4user/h4
input type=input id=user/
h4pass/h4
input type=input id=pass/
h4one/h4
input type=input id=one/
h4two/h4
input type=input id=two/
/form
input type=button id=clicker value=Click/
[jQuery] Re: Bind events on DOM elements inserted from other frame
I keep seeing people talking about different ways to access the
document of an iframe. This method(after much hairpulling and testing)
works very well.
$('iframeID').contents()
The .contents() method will automatically handle the browser
differences between contentWindow and contentDocument. It will give
you standard access to the iframe document no matter what browser.
Further, if there are particular non-jQuery things you want to do in
an iframe, its still a great way to do it. So for example, a problem I
have been working on for several weeks involves adding a script into
the iframe which itself calls another script for our forum
system(Jive) that displays a list of comments. As a sidenote, the
commenting system in Jive absolutely SUCKS. No caching, does
document.writes, etc. The forum bit is really nice, but the comment
system needs to be shot.
So I am loading an iframe into the dom, then writing the script that
loads the Jive comments into the iframe. When I was using the strict
jQuery methods:
$('#commentiframe').contents().find('body').html(scriptvar)
It would write into the iframe, but it conflicted with some of the ads
we serve on our site. Jive's comment widget does a bunch of
document.write's into the document, and using the standard jQuery
method the comments were being added to the page at the first
occurrence of a script tag. Very, very wierd.
So, the way I found around that was to drop back into normal
javascript methods and came up with this:
$('iframe id=commentiframe src='+scriptvar+'/
iframe').appendTo('body');
f=$('#commentiframe').contents()[0];
f.open();
f.write(scriptvar);
f.close();
[jQuery] Why is getElementById different from $('testid')?
So I have this code to write a content to an iframe which works just
fine. I'm trying to rewrite it using Jquery though.
var f=document.getElementById('testiframe');
var doc = f.contentWindow ? f.contentWindow.document :
f.contentDocument ? f.contentDocument : f.document;
doc.open();
doc.write(scriptvar);
doc.close();
In testing, I'm finding that these are different:
1) var f=document.getElementById('testiframe');
2) var f=$('#testiframe');
So #1 gives [object HTMLIFrameElement] if I alert().
#2 gives [object Object].
What is the difference between these two?
[jQuery] How dynamically create iframe and add/remove data from it
Hi folks, hoping for some knowledgeable assistance with this problem.
What I'm doing is dynamically creating an iframe in the DOM, then
trying to write some data into it. That's the part I'm stuck at.
I *am* able to create the iframe, no problem. I have a div with the id
#container built into the page in which the iframe is added:
$
(document.createElement('iframe')).attr('id','commentiframe').appendTo('#container');
At this point, I don't know how to write data into the iframe that has
been created. I've been trying to use this but to no success.
var f = $('#commentiframe')[0];
// get iframe's document
var doc = f.contentWindow ? f.contentWindow.document :
f.contentDocument ? f.contentDocument : f.document;
var $framebody = $('body',doc);
var $framebody.html('h2test/h2');
