Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Locked thread
adrenaline_junket
May 29, 2005
gotta get a rush!
i want to create a modal window box that hovers over the top of my page. However unlike a lightbox or popup window i want to let the user interact with the page and not lose visual focus of the box. The purpose of this dialog is to have a floating help pane that can be moved around the parent window by the user.

Is there a jQuery plugin that has this functionality already or will i be left to code my own?

Adbot
ADBOT LOVES YOU

Zorilla
Mar 23, 2005

GOING APE SPIT

adrenaline_junket posted:

i want to create a modal window box that hovers over the top of my page. However unlike a lightbox or popup window i want to let the user interact with the page and not lose visual focus of the box. The purpose of this dialog is to have a floating help pane that can be moved around the parent window by the user.

Is there a jQuery plugin that has this functionality already or will i be left to code my own?

BlockUI probably does what you need. Using showOverlay: false should keep the page unblocked like you want. See the Growl demo on this page for a good example.

Zorilla fucked around with this message at 13:03 on Apr 27, 2009

adrenaline_junket
May 29, 2005
gotta get a rush!
Thats a good starting point for what im after. thanks for the link

sim
Sep 24, 2003

Going completely against logic I am nesting an accordion within some tabs using jQuery UI. It works well enough, except that I am running into some problems with absolute positioning and z-index. Part of my problem is that jQuery UI is creating unnecessary divs because I have more links than tabs (the extra links being nested lists that make up the accordion). From my searching it appears that in a previous version you could select just the list to create the tabs from $("#tabs > ul") but if I try doing that now, it doesn't know which divs to create the panels from.

Is it possible to prevent jQuery UI from creating the extra divs, or if not, what would be the least taxing way to remove them from the DOM?

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

sim posted:

Going completely against logic I am nesting an accordion within some tabs using jQuery UI. It works well enough, except that I am running into some problems with absolute positioning and z-index. Part of my problem is that jQuery UI is creating unnecessary divs because I have more links than tabs (the extra links being nested lists that make up the accordion). From my searching it appears that in a previous version you could select just the list to create the tabs from $("#tabs > ul") but if I try doing that now, it doesn't know which divs to create the panels from.

Is it possible to prevent jQuery UI from creating the extra divs, or if not, what would be the least taxing way to remove them from the DOM?

I doubt anyone can help you without seeing your code. Post a link to the page.

sim
Sep 24, 2003

I apologize! I'm working locally, so here's the code:

code:
<script type="text/javascript">
$(function() {
	$("#nav > ul").accordion({ header: '.section-link', active: false, autoHeight: false });	
	$("#nav").tabs();
});
</script>
<div id="nav">
<ul>
	
	<li><a href="#work" class="section-link">Work</a>
        <ul class="work-sub">
		<li><a href="subpage.php">Sub-link</a></li>
	</ul></li>
        <li><a href="#company" class="section-link">Company</a>
	<ul class="company-sub">
             	<li><a href="subpage.php">Sub-link 2</a></li>
        </ul></li>
        <li><a href="#clients" class="section-link">Clients</a></li>
        <li><a href="#contact" class="section-link">Contact</a></li>
            
</ul>
<div id="work">work</div>
<div id="company">company</div>
<div id="clients">clients</div>
<div id="contact">contact</div>
</div>
I only want panels for the top level links (the divs I've created), however jQuery UI sees the nested lists and creates divs for each link.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

sim posted:

I apologize! I'm working locally, so here's the code:


I only want panels for the top level links (the divs I've created), however jQuery UI sees the nested lists and creates divs for each link.


Yeah, your code is all confused. You want an accordion inside the tab portion (upper part) itself instead of the content area??? That is a terrible idea from a UI perspective, so if you are trying to do that, don't. If not, then your accordion stuff is in the wrong spot. It's easy to have one of the content areas of your tabs be an accordion, but could you explain what exactly you are trying to do?

Lumpy fucked around with this message at 03:50 on Jun 5, 2009

sim
Sep 24, 2003

I'm aware its all jumbled up. Yes, the designers would like to have a menu where the top level links both open a tab and slide out sub-menu items below. The tab panels are mostly just titles with short descriptions and clicking on a sub-menu link will bring up a new page with content.

Postess with the Mostest
Apr 4, 2007

Arabian nights
'neath Arabian moons
A fool off his guard
could fall and fall hard
out there on the dunes
Can anyone point me to anything that helps free up memory in JQuery? I have a report with a bunch of controls at the top and a div on the bottom, when you submit the form, it makes an ajax request and pulls down a table and sticks it in the div. When they hit the form button again, I'd like to free up the memory taken up by the first table. The tables themselves can hit up to 3-4k rows, with 10-11 cells each and every browser seems to grab an extra 50-250 megs of memory each time I get a new big table.

My understanding is that JQuery removes the table from the DOM when I call empty() on the div or remove() on the table but it keeps a copy of the whole thing inside the JQuery object itself.

My first thought was to re-write it and just download the JSON to populate the table but it's still going to keep the rows and cells in memory so my last resort is an IFRAME but I'd rather stay clear of those.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Ikantski posted:

Can anyone point me to anything that helps free up memory in JQuery? I have a report with a bunch of controls at the top and a div on the bottom, when you submit the form, it makes an ajax request and pulls down a table and sticks it in the div. When they hit the form button again, I'd like to free up the memory taken up by the first table. The tables themselves can hit up to 3-4k rows, with 10-11 cells each and every browser seems to grab an extra 50-250 megs of memory each time I get a new big table.

My understanding is that JQuery removes the table from the DOM when I call empty() on the div or remove() on the table but it keeps a copy of the whole thing inside the JQuery object itself.

My first thought was to re-write it and just download the JSON to populate the table but it's still going to keep the rows and cells in memory so my last resort is an IFRAME but I'd rather stay clear of those.

If your problem is IE (oh IE, we love you!) then 2 seconds of google found this:

http://groups.google.com/group/jquery-dev/browse_thread/thread/4a99f6e9b2e33057

Postess with the Mostest
Apr 4, 2007

Arabian nights
'neath Arabian moons
A fool off his guard
could fall and fall hard
out there on the dunes
It's actually Chrome and Firefox as well, not "each and every" browser like I said. I don't test Safari or anything other than those 3. That does make sense though, IE was the one going up 250 each time, if it keeps two copies of the DOM, I could see that.

Oben
Aug 7, 2004

Oh, the lights changed
Just wondering, is there a way to get the RGB pixel data for an image with jquery/js? I'm having trouble googling it.

Weird Uncle Dave
Sep 2, 2003

I could do this all day.

Buglord
I just started tinkering with jQuery yesterday, because it seemed like it'd make something a bit easier (and if it does other stuff too, hey, bonus).

I have a small snippet of code/HTML thus:
code:
<a href="javascript:$('#ipdb_hidden').toggle();">(Show IP)</a>
<div id="ipdb_hidden" style="display:none">
Stuff gets displayed here!
</div>
This sorta-works: If you click on the above link, it shows the stuff in the previously-hidden DIV. For a fraction of a second. Then the Web browser (Firefox 3) puts my JavaScript in the address bar (java script:$('#ipdb_hidden').toggle();), and shows me page containing the words "[object Object]".

I presume this means jQuery has some sort of mechanism where the above code is returning something, and I'd really like it not to - since I'm not yet that familiar with jQuery, I'm not even sure what to Google for. Help, please!

Avenging Dentist
Oct 1, 2005

oh my god is that a circular saw that does not go in my mouth aaaaagh

Weird Uncle Dave posted:

I presume this means jQuery has some sort of mechanism where the above code is returning something, and I'd really like it not to - since I'm not yet that familiar with jQuery, I'm not even sure what to Google for. Help, please!

You're not supposed to use "javascript:" links, really. Either make it an onclick event, or preferably, use unobtrusive java script:

code:
$(document).ready(function() {
    $('#butts').click(function() {
        $('#ipdb_hidden').toggle();
    });
});

...

<a href="#" id="butts">Click for butts</a>
Or something like that, I think. (It'll probably scroll you up to the top of the page, which is annoying, but you get the idea.)

Avenging Dentist fucked around with this message at 18:53 on Jun 12, 2009

MononcQc
May 29, 2007

Avenging Dentist posted:

code:
<a href="#" id="butts">Click for butts</a>
Or something like that, I think. (It'll probably scroll you up to the top of the page, which is annoying, but you get the idea.)
Just return false from the last function that executes through a click on a link to keep the browser from switching pages.

Lamb-Blaster 4000
Sep 20, 2007

instead of adding a click handler, you could set the href to something like javascript: clickFunc();

Avenging Dentist
Oct 1, 2005

oh my god is that a circular saw that does not go in my mouth aaaaagh

Lamb-Blaster 4000 posted:

instead of adding a click handler, you could set the href to something like java script: clickFunc();

As I mentioned briefly, using href="java script:whatever()" is frowned upon. (That particular example uses void(0), but the general rule applies.)

A better explanation:

quote:

In any case, you should never use "java script:;" for href value; because in Internet Explorer, documents stop loading as soon as a user clicks on such links.

Avenging Dentist fucked around with this message at 20:00 on Jun 12, 2009

cletus42o
Apr 11, 2003

Try to imagine all life as you know it stopping instantaneously and every molecule in your body exploding at the speed of light.
College Slice
Also, instead of doing an inline style to start your div off as hidden, I'd suggest creating a class. I usually call mine hideStart. Then on every page, the first thing I call is $(".hideStart").hide(); This hides all elements you want hidden for people using JavaScript. If they don't have JavaScript, the element would be shown.

The way you're doing it now, if someone doesn't have JS enabled (and yeah, I know, I don't really code for these people either), they won't be able to see your content.

Weird Uncle Dave
Sep 2, 2003

I could do this all day.

Buglord
Putting my code in an onClick() works just fine, and I feel silly for having not thought of it. Thanks!

This is all in-house software for a company of a dozen people, if there's anyone here not using JavaScript I can find them and beat them. :)

Edit: Well, it almost-works-perfectly. I'm using this:
code:
<a href="#" onClick="javascript:$('#ipdb_hidden').toggle();">click for butts</a>
but that adds an extra page to your browser history (page.php then page.php#). I suppose I could just remove the href and underline the text (because my office is trained to think "underlined means clickable") but that seems a bit kludgey. Any other suggestions?

Further edit: that void() trick, while maybe not recommended, seems to work. I'll play some more. Thanks again!

Weird Uncle Dave fucked around with this message at 21:57 on Jun 12, 2009

king_kilr
May 25, 2007
I'm still not getting why you don't just do

code:
$(function () {
    $('#id').onClick(function() { $('#ipdb_hidden').toggle(); return false; });
});

SuckerPunched
Dec 20, 2006

king_kilr posted:

I'm still not getting why you don't just do

code:
$(function () {
    $('#id').onClick(function() { $('#ipdb_hidden').toggle(); return false; });
});


This and Avenging Dentist's methods are the correct way.

Edit, well techincally it's $('#whatever').click(), not .onClick().

king_kilr
May 25, 2007

SuckerPunched posted:

This and Avenging Dentist's methods are the correct way.

Edit, well techincally it's $('#whatever').click(), not .onClick().

Ah, right. It's been almost a week since I looked at any JS :/

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Weird Uncle Dave posted:

Putting my code in an onClick() works just fine, and I feel silly for having not thought of it. Thanks!

Why bother using jQuery if you are going to write crappy JS anyway?

Weird Uncle Dave
Sep 2, 2003

I could do this all day.

Buglord

king_kilr posted:

I'm still not getting why you don't just do

code:
$(function () {
    $('#id').onClick(function() { $('#ipdb_hidden').toggle(); return false; });
});

I'm relatively new to JavaScript generally (I grew up doing everything server-side), and yesterday was my first exposure ever to jQuery. That said, I don't see why this is "better" than my approach.

Honest newbie question: does this, for instance, take care of the weird browser history problem automatically, so I don't have to do <a href="java script:void();"> or some other silly workaround?

Also, where does the #id come from? To do it this way, would I have to name all my hrefs? Since I'm just adding little tiny tweaks here and there to an already-existing page, not building a whole AJAX application from scratch, this looks like it would add an extra layer of complication I don't need.

OddObserver
Apr 3, 2009

Oben posted:

Just wondering, is there a way to get the RGB pixel data for an image with jquery/js? I'm having trouble googling it.

On some of really new browsers, you can get to pixel data for images, with some XSS restrictions, using getImageData canvas APIs. I don't believe anything else can do it; and this may not be sufficiently cross-browser to be of use...

Kekekela
Oct 28, 2004

Weird Uncle Dave posted:

I'm relatively new to JavaScript generally (I grew up doing everything server-side), and yesterday was my first exposure ever to jQuery. That said, I don't see why this is "better" than my approach.

Unobtrusive javascript is a cleaner approach. The syntax he's using is a jQuery upgrade to the window.onload method used in the wiki article samples.

Kekekela fucked around with this message at 05:29 on Jun 13, 2009

Avenging Dentist
Oct 1, 2005

oh my god is that a circular saw that does not go in my mouth aaaaagh

Weird Uncle Dave posted:

Also, where does the #id come from? To do it this way, would I have to name all my hrefs?

You'd have to add onclick attributes to all the links anyway, so I don't see how your method is simplifying anything. Using unobtrusive Javascript 1) makes it easier to write code that degrades properly if you're not using JS, 2) puts all your JS in one spot so it's easy to find later.

Just because you're writing an internal app is no excuse for slipshod design. Someone else is going to have to come along and maintain it eventually, and you should do your best to make that person's life not a living hell.

Ned
May 23, 2002

by Hand Knit

Weird Uncle Dave posted:

I'm relatively new to JavaScript generally (I grew up doing everything server-side), and yesterday was my first exposure ever to jQuery. That said, I don't see why this is "better" than my approach.

Honest newbie question: does this, for instance, take care of the weird browser history problem automatically, so I don't have to do <a href="java script:void();"> or some other silly workaround?

Also, where does the #id come from? To do it this way, would I have to name all my hrefs? Since I'm just adding little tiny tweaks here and there to an already-existing page, not building a whole AJAX application from scratch, this looks like it would add an extra layer of complication I don't need.

jQuery works best when you break up your site into different layers. Content, Presentation, Interaction. Content should be pure HTML and Presentation should largely be taken care of by CSS. Interaction is best done as unobtrusive Javascript.

As far as the whole #id stuff is concerned, you don't need to be giving ids to everything, you just need to be able to reliably find your target in the DOM.

One of the great things about using jQuery on an already existing page is being able to leave the original markup as is and just include the jQuery javascript and functions you need to manipulate the page. That way you aren't responsible for the content or presentation, just interaction.

firetech
Oct 26, 2005

I am trying to incorporate jQuery with an FCKEditor Plug-in.

However, in FireFox, I cannot access any of the necessary resources from jQuery's anonymous callback functions. WTF?

Here's my current code (I have tried so many things...):
code:
var dialog = window.parent;
var editorWindow = dialog.InnerDialogLoaded();
var editorInstance = editorWindow.FCK;
var mother = dialog.parent;
var jQuery = mother.jQuery;

window.onload = function() {
	mother.galleryInputPath = document.getElementById('fck_gallery_input_path');
	dialog.SetOkButton(true);
}

function insertFCKEditorContent(content) {
	if (content)
		editorInstance.InsertHtml(content);
	else alert("No content to insert!");
}

function Ok() {

	// in the lines below, I have access to my normal JS framework
	var url = mother.SITEHOST+mother.SITELINK+'gallery';
	var path = mother.galleryInputPath.value;

	// however, in the jQuery callback, I don't get anything.
	mother.jQuery.post(url, {'mode':'3','path':path}, function(data){
		if (mother != undefined) window.alert("Yay!"); // never reaches realization
		insertFCKEditorContent(data); // undefined function
	});
	return true;
}
I cannot (even for the life of me) figure out what the hell I am doing wrong. Any help would be very much appreciated!

The really weird thing is that Safari 4.0.1b allows access to that insertFCKEditorContent() function from the callback...

Just FYI, I have attempted to use the jQuery FCKEditor plugin, but that poo poo sucks. AFAIK, I cannot use my normal PHP configuration of FCKEditor which poses a major disadvantage as most of the resources necessary for configuration are more difficult to access via javascript.

EDIT: PROBLEM SOLVED! (mostly)
code:
//Its best to grab the inputs out here
window.onload = function(){
	window.parent.parent.jQuery.gallery_input = document.getElementById('fck_gallery_input_path');
}

//Then use an anonymous function, passing in jQuery
if(window.parent.parent.jQuery)(function($){
	var dialog = window.parent;
	var editorWindow = dialog.InnerDialogLoaded();
	var editorInstance = editorWindow.FCK;
	var mother = dialog.parent;
	
	$(document).ready(function(){
		dialog.SetOkButton(true);
	});
	
	dialog.Ok = function () {
		var url = mother.SITEHOST+mother.SITELINK+'gallery';
		var path = $.gallery_input.value;
		$.post(url, {'mode':'3','path':path,'class':'left'}, function(data){
			editorInstance.InsertHtml(data);
		});
		return true;
	}	
	
}(window.parent.parent.jQuery));
There is only one problem remaining... the return true in Ok() doesn't work :[

firetech fucked around with this message at 19:02 on Jun 20, 2009

Save the whales
Aug 31, 2004

by T. Finn

Weird Uncle Dave posted:

I'm relatively new to JavaScript generally (I grew up doing everything server-side), and yesterday was my first exposure ever to jQuery. That said, I don't see why this is "better" than my approach.

Honest newbie question: does this, for instance, take care of the weird browser history problem automatically, so I don't have to do <a href="java script:void();"> or some other silly workaround?

Also, where does the #id come from? To do it this way, would I have to name all my hrefs? Since I'm just adding little tiny tweaks here and there to an already-existing page, not building a whole AJAX application from scratch, this looks like it would add an extra layer of complication I don't need.

This post is old and you're probably not reading the thread anymore but I wanted to say this anyway.

Anchor tags are great because they can interact with your site whether the user has javascript enabled or not. If you want some div to be toggled when the user clicks something, you can do it with HTML + whatever server-side language you're using. JSP syntax:

code:
<% boolean menuClosed = ... //read some request parameter %>
<a id="menu_label" href="thecurrentpage/?menu=<%=!menuClosed%>">Menu</a>
<div id="menu"<%if(menuClosed){%> style="display:none;"<%}%>>
blah blah im in the menu!
</div>
Then you can enhance it with javascript.

code:
<script type="text/javascript">
$(document).ready(function() {
  $('#menu_label').click(function() {
    $('#menu').toggle();
    return false;
  });
});
</script>
You shouldn't have to rely on javascript to do what you want in the first place. It's not just because you want to worry about people who have javascript disabled (Firefox + NoScript for example), but because often times those onclick events reference things in the dom that might not yet be ready.

In that example, when #menu_label is loaded and the user clicks, #menu might not be ready, and if you just had the javascript as an href="java script:stuff" or onclick="stuff", it could fail. In the code I just posted, the user would see the same effect because until the entire document is ready, the user would get plain HTML behavior from clicking your link - he'd reload the page with the menu toggled - and once the document is ready, the javascript would enhance the experience, so the menu would toggle without the page reloading.

Also, no, you don't have to name all your anchors. jQuery can find elements by any CSS selector, so even something like $('div > p.foo a:nth-child(3n)') can work. You can also find multiple elements at once, in case you want to bind similar functions to a group of elements.

ATLbeer
Sep 26, 2004
Über nerd
This is an insane question but, I'm working on a project using jQuery Datatables and want to start constructing an implementation that's a bit complex using the API but, I have a problem. Their website has been down for 3 days now. Would anyone have (or know where) a copy of the docs?

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

ATLbeer posted:

This is an insane question but, I'm working on a project using jQuery Datatables and want to start constructing an implementation that's a bit complex using the API but, I have a problem. Their website has been down for 3 days now. Would anyone have (or know where) a copy of the docs?

http://docs.jquery.com/Main_Page

is up, and has been up for me at least, all weekend.

you can also get a version here: http://visualjquery.com/ although it's for 1.2.6

ATLbeer
Sep 26, 2004
Über nerd

Lumpy posted:

http://docs.jquery.com/Main_Page

is up, and has been up for me at least, all weekend.

you can also get a version here: http://visualjquery.com/ although it's for 1.2.6

Opps.. Sorry. I meant the doc sheets for the jQuery DataTable plugin... Sorry

http://www.datatables.net/

Xenos
Jun 17, 2005

The site's down, but you can still access everything from Google's cache.

API Docs: http://74.125.95.132/search?q=cache:tiw0QdUm2LEJ:www.datatables.net/api+http://www.datatables.net/api&hl=en&client=firefox-a&gl=us&strip=1

Usage Docs: http://74.125.95.132/search?q=cache...a&gl=us&strip=1

ATLbeer
Sep 26, 2004
Über nerd

Xenos posted:

The site's down, but you can still access everything from Google's cache.

API Docs: [url]http://74.125.95.132/search?q=cache:tiw0QdUm2LEJ:https://www.datatables.net/api+http://www.datatables.net/api&hl=en&client=firefox-a&gl=us&strip=1[/url]

Usage Docs: [url]http://74.125.95.132/search?q=cache:MZ678s8M2XAJ:https://www.datatables.net/usage+http://www.datatables.net/usage&hl=en&client=firefox-a&gl=us&strip=1[/url]

SWEEEEET

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice
Came across this today and thought fellow jQuery-ers might find it helpful or interesting:

http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx

jink
May 8, 2002

Drop it like it's Hot.
Taco Defender

Lumpy posted:

Came across this today and thought fellow jQuery-ers might find it helpful or interesting:

http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx

This is a wonderful guide. It made me understand quite a bit more about speeding up sites with jQuery. I've hit snags while working on ASP.net sites and their munging of IDs, so we use classes the majority of the time (I don't like using <% Element.ClientID %> everywhere).

I've found this helpful as well, but it does not center around coding aspects (mostly plugins)...
http://www.smashingmagazine.com/2009/01/15/45-new-jquery-techniques-for-a-good-user-experience/

keveh
Sep 14, 2004

If you have a problem.....
Just a quick jquizzle question that I am stumped with.

I am using $(window).width() which returns the width of the window when it's loaded, but when the window is resized the width still returns that initial load value.

Is there anyway of getting the width of the current window state?

SuckerPunched
Dec 20, 2006

You probably want .offsetWidth, not width.

Adbot
ADBOT LOVES YOU

keveh
Sep 14, 2004

If you have a problem.....
That still returns the value of the window on load unfortunately.

:edit:

Sorry, that did work. I just had to change window.offsetWidth to document.body.offsetWidth

Thanks

keveh fucked around with this message at 16:52 on Jul 9, 2009

  • Locked thread