Search jQuery

jQuery Forum

Screen name:
toonbon

toonbon's Profile

67 Posts

96 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Making the SE handle for the UI resizable module lock in the aspect ratio
[6Replies]
- 22-May-2013 09:59 PM
- Forum: Using jQuery UI
The standard resize module with jQuery-UI has a SE grip area for dragging east and south simultaneously, but it allows you to also just drag east or just drag south. So if your user doesn't pay attention to keep dragging at a 45 degree angle, they can easily drag east or south accidentally and destroy the aspect ratio of their object. I'd like to make the SE handle always lock in the aspectRatio so this doesn't happen.

I put together a jsfiddle at http://jsfiddle.net/f9Vwp/2/ that I thought should do it, but it doesn't work. The idea to to catch a mouse hover over the SE corner and then reconfigure the resizable option with aspectRatio : true. Does anyone see why this doesn't work?

Thanks

How to make the se grip handle larger for a jQuery-UI resizeable?
[1Reply]
- 09-May-2013 02:40 AM
- Forum: Using jQuery UI
I'd like to make the SE grip handle of a resizeable DIV larger so my novice users won't be as likely to drag right or down when t hey mean to drag diagonally. It looks about 16px x 16px now and I can see that the icon assigned is
```
 ui-icon ui-icon-gripsmall-diagonal-se 
```
It seems like there should be a ui-icon-gripslarge-diagonal-se somewhere, or a way to use my own icon and choose the size. I'd like to end up with a grip handle about 32px x 32px.

Thanks for any ideas.

insertAfter strange behavior
[0Replies]
- 27-Feb-2013 05:29 AM
- Forum: Using jQuery
I'm trying to move a div that contains an object element that contains a JW Player. The div looks like this, where it's currently nestled between some p elements:

The view above is from the Firebug HTML panel.

The jQuery I'm using is

$('#container_wrapper').insertAfter('p#crown_li');

After this executes, the player is no longer visible and the HTML looks like this:

The div and the object moved to where they should have, but the object element is faded and it no longer displays on the page.

Does anyone know what might have happened?

Thanks

Unclear JavaScript in jQueryt-UI
[2Replies]
- 10-Feb-2013 03:38 AM
- Forum: Using jQuery UI
Can someone explain the JavaScript below that came from the beginning of the jQuery-UI at http://code.google.com/p/jquery-ui/source/browse/trunk/ui/jquery.effects.core.js?r=3751 ?

Thanks,
Steve

Drag and drop between windows
[0Replies]
- 01-Feb-2013 05:05 AM
- Forum: Using jQuery UI
I have a page that loads and then that page's JavaScript opens a popup window that will become a gallery. The user will upload images, using JavaScript and PHP that is part of the popup gallery window, and these uploaded images will be displayed in the gallery window that we popped up

Once several images have been uploaded and displayed in the gallery window I would like to drag and drop them into the primary window. Actually I'd like to leave the image in the gallery and just drag a ghost image across and drop it in the main window, so we end with the image in both windows.

This seems a bit tricky since the main widow and the popup gallery window are different JavaScript execution contexts. How can I implement a jQuery Drag and Drop that works from the popup window to the main window?

Thanks for any ideas.

Picking a color from an image
[9Replies]
- 22-Jan-2013 02:39 AM
- Forum: Using jQuery Plugins
I know there are color pickers that let you chose a color from a grid or a gradient, but I'd like to let users click on some image on the page pick up the color at that point. Are there any plugins that can do that?

Thanks
Steve

jQuery Graphics Plugin
[0Replies]
- 21-Dec-2012 09:11 AM
- Forum: Using jQuery Plugins
I'm looking for a jQuery graphics plugin that will let me insert a div by clicking down anywhere and dragging from one corner to the opposite corner, as you do in an ordinary graphics package. Then you could click the div later and move it somewhere else.

Thanks for any suggestions

10 x 10 Grid Color Picker
[2Replies]
- 26-Oct-2012 03:01 PM
- Forum: Using jQuery Plugins
I'm looking for a color picker that presents a 10 x 10 grid of colors. Does anyone know of something like this that's already out there?

Thanks

Jerky togglepanel
[7Replies]
- 22-Oct-2012 10:43 AM
- Forum: Using jQuery UI
Does anyone see why the first question in the togglepanel FAQ below closes with a jerk at the end? I've read that togglepanel jerkiness is due to the final height being different than the height that jQuery calculates and that the solution is to specify a width for the element that is being closed or opened. I seem to be doing that but I'm still getting the jump at the end.

Thanks for any help.
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" xml:lang="en">
3. <head><title>FAQ</title>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <meta http-equiv="content-language" content="en" />
6. <script type="text/javascript" src="jscript/validation.js"></script>
7. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
8. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
9. <script>
10. $(document).ready(function(){
11. $("#togglepanel").addClass("ui-accordion ui-accordion-icons ui-widget ui-helper-reset")
12. .find("h3")
13. .addClass("ui-state-default")
14. .hover(function() { $(this).toggleClass("ui-state-hover"); })
15. .click(function() {
16. $(this)
17. .toggleClass("ui-accordion-header-active ui-state-active ui-state-default ui-corner-bottom")
18. .next().toggleClass("ui-accordion-content-active").slideToggle(1000);
19. return false;
20. })
21. .next()
22. .addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom")
23. .hide();
24. });
25. </script>
26. <style type="text/css">
27. div.answer {
28. width:450px;
29. margin-left:50px;
30. }
31. h3 {
32. width:450px;
33. }
34. </style>
35. </head>
38. <body>
39. <div id="togglepanel">
40. <h3> <a href="#">Question 1?</a></h3>
41. <div class="answer">
42. This is the answer I want to provide for the first question.
43. </div>
45. <h3> <a href="#">Question 2?</a></h3>
46. <div class="answer" >
47. And here's the answer for the second question.
48. </div>
49. </div>
50. </body>
51. </html>

fadeToggle is non-symetrical
[2Replies]
- 15-Oct-2012 02:04 AM
- Forum: Using jQuery
I have a simple box within a box and I fadeToggle the inner box when the outer box is rolled over:
1. $("div#varcontents").hide(); // start with varcontents hidden
2. $("div#varbox").hover(function(){
3. $("div#varcontents").fadeToggle(800, 'linear');
4. });
5. <div id='varbox' >
6. <div id='varcontents'>
7. <br />product_id =$product_id
8. <br />owner = $owner
9. <br />member_id = $member_id</p>
10. </div>
11. </div>
But I notice that when I roll over the outer box the inner box comes on almost immediately while when I roll off of the outer box the inner box fades out in the time I specified, 800ms, above. Why doesn't it take 800ms for the inner box to fade in? The result is the same with or without the 'linear' easing.

Thanks for any help.

Fading one image to anothr on a hover
[2Replies]
- 14-Sep-2012 03:27 AM
- Forum: Using jQuery UI
I have a hover function that switches images on a button:

$("img#wel_viewmy_btn").hover(
            function(){
                $(this).attr('src', 'images/wel_viewmy_btn_hvr_red.png');
            },
            function () {
                $(this).attr('src', 'images/wel_viewmy_btn_red.png');
            }
        );

No problem.

But I'd like the button images to fade from one image to the other over a few hundred milliseconds.

I tried putting the fadeIn and fadeOut methods in the chain, but that didn't work.

Does anyone know the proper way to do this?

Thanks for any help.

Positioning a dialog with the Position Module
[2Replies]
- 09-Sep-2012 08:51 AM
- Forum: Using jQuery UI
When I use the Position module to position a dialog box I can only move the dialog down from the top of its reference box until the bottom of the dialog hits the bottom of the view window. Adding more offset from the top has no effect. Is there a way to allow the dialog to obey to top offset, even if this pushes the dialog off the view window at the bottom?

Thanks for any information.

Getting beforeclose to work with the dialog module
[4Replies]
- 08-Sep-2012 09:19 PM
- Forum: Using jQuery UI
I have a dialog that I open up and close with the functions:

function turnon_product_name() {
    $('div#show_product_name').dialog('open');
    $('span#product_name').addClass('highlight');
    $('span#product_name_link').text(' hide');
    product_name_help = 1;
}

function turnoff_product_name() {
    $('div#show_product_name').dialog('close');
    $('span#product_name').removeClass('highlight');
    $('span#product_name_link').text(' show me');
    product_name_help = 0;
    return true;
}

$('div#show_product_name').dialog({autoOpen: false,
                                       modal:false,
                                       position: {my: 'right top', at: 'right top', of: $('#outer_box'), offset:'100 240'},
                                       width:'575',
                                       height:'825',
                                       show: 'fade'}
                                );

As you can see, when the dialog turns on other things change on the screen and when it turns off those things need to change back. But

if someone clicks the X button for the dialog the only thing that happens is that the dialog disappears. So I need to get this X turn

off to do more. I thought I could just add the beforeclose option and run my turnoff_product_name() function, something like below:

$('div#show_product_name').dialog({autoOpen: false,
                                       modal:false,
                                       position: {my: 'right top', at: 'right top', of: $('#outer_box'), offset:'100 240'},
                                       width:'575',
                                       height:'825',
                                       show: 'fade',
                                       beforeclose: function(event, ui) { return turnoff_product_name(); }
                                      }
                                );

But every variation of this I can think of fails to work. Could someone point out the correct way to do this?

Thanks

Loading jQuery
[0Replies]
- 13-Jul-2012 09:37 PM
- Forum: Using jQuery
After looking at some Firebug NET displays (below) it seems that the loading of jQuery is actually free. The display below shows that the browser first gets the raw page, then goes after the CSS files and in parallel, goes after the jQuery.js module. The download of the jQuery module is completely overlapped with the download of the CSS files and so adds 0ms to the page load. Also, the browser has no use for any jQuery until after the DOM content is loaded, so even without the CSS files loads, the jQuery load would be occurring at the same time that the browser is building the DOM. So for these two reasons, the load time of jQuery is really irrelevant.

Am I missing something here?

Thanks for any input.

Displaying an image file picked up by a form FILE input
[2Replies]
- 15-Jun-2012 08:15 AM
- Forum: Using jQuery
I have an HTML form with some information fields (name, phone, etc.) and then comes a file field to browse the local computer and select an image file to upload. Then comes more information fields.

When the user clicks browse and selects a local image to upload, I would like to display that image in a div on the page, to give instant feedback to the user of the file that was selected. The user will then continue filling in the form and when Submit is finally clicked the information fields and the image file will be uploaded to the server.

Also, the image may be bigger than the div, so I may have to scale it to fit, or maybe the browser can do that for me automatically.

Can I make this happen with jQuery?

Thanks for any suggestions.

Persistent tool tips with links
[2Replies]
- 19-Mar-2012 11:42 PM
- Forum: Getting Started
Most tooltips disappear as soon as you roll off the hot spot and they don't contain any links you can click. But Google has implemented some very nice tooltips on their AdWords pages that

1) contain links you can click
2) stay on for a half second after you roll off of the hot spot.
3) if when you roll off of the hot spot you roll onto the tooltip, it stays active and lets you click the link.

For example, on the AdWords Campaigns | Keyword page there is a small circled question mark by each column head that is a hot spot for a tooltip. When you roll over the question mark a tooltip comes up with a short explanation of that heading, with a link to a page with more information. You can then roll onto the tooltip message and click the link if you want more information.

Does anyone know how these are implemented? I don't even see any jQuery loaded for the Google page so Google appears to have rendered it all in JavaScript. But I thought maybe someone has worked out a similar solution in jQuery.

Thanks for any info.

Steve

Toggle Panel by rdworth
[5Replies]
- 21-Feb-2012 01:09 AM
- Forum: Using jQuery
I'm trying to understand the jQuery in rdworth's 15-line toggle panel at http://jsbin.com/eqape/edit#javascript,html. Several things are a mystery to me and I wonder if someone might be able to shed some light on this for me.

The DOM representation for the HTML is
                                                          div#notaccordion

     h3     div               h3     div                             h3     div                      h3     div
      |        |              |        |            |        |       |        |
      a       p                          a       p                               a       p              a       p

If this were a FAQ there would be four questions, in the a elements, and four answers, in the p elements. When you click an h3 you toggleSlide the div associated with that h3.

The jQuery is:
1. $("#notaccordion").addClass("ui-accordion ui-accordion-icons ui-widget ui-helper-reset")
2. .find("h3")
3. .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom")
4. .hover(function() { $(this).toggleClass("ui-state-hover"); })
5. .prepend('<span class="ui-icon ui-icon-triangle-1-e"></span>')
6. .click(function() {
7. $(this)
8. .toggleClass("ui-accordion-header-active ui-state-active ui-state-default ui-corner-bottom")
9. .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end()
10. .next().toggleClass("ui-accordion-content-active").slideToggle();
11. return false;
12. })
13. .next()
14. .addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom")
15. .hide();
The first thing that puzzles me is line 9. We're looking at one of the h3 elements we've selected and .find("> .ui-icon) says to find grandchildren or lower elements that have a ui-icon class. But if you look at the markup at this point with Firebug, you see that the only element below h3 with a ui-icon class is the <span> that was prepended to the h3 by line 5:

So it seems that find(".ui-icon") is what we want, not find("> .ui-icon"). In fact, the togglePanel works fine if you change the code to find(".ui-icon") so the question is why does it work with find("> .ui-icon")?

In line 10 .next moves across to the div associated with this h3 and adds a class and a slideToggle method. If you look at the div line with Firebug before clicking the associated h3, you see that it has the inline style="display:none". You can see this in the last line of the inserted image above. How did the line get initialized with this inline style? Does slideToggle put this in behind the scenes when it's first attached to a div?

The third issue is the return false from the click routine. I know you might do this if you wanted to disable the normal action of click, but I'm not sure why it's done here. Normally .click would return the element set we're working on. If we don't get that back, what does the .next in the following line refer to?

Finally, I've noticed when implementing togglePanels (or accordions) that there's often a snap movement at the end, that seems to occur when the display is set to none or to block.It's as if the animation moved the edge too high or not high enough and when the display style got applied the image snapped to 0 or the full div height. Does anyone know what causes this and how it can be avoided?

Many thanks for any insight into this code.

Displaying the current element set
[1Reply]
- 20-Feb-2012 01:49 AM
- Forum: Using jQuery
When trying to walk through and understand someone else's jQuery it would be helpful if there was a way to echo out the current element set at any point. Is there a way to do this?

Thanks

jQuery AJAX call not connecting
[2Replies]
- 14-Feb-2012 05:01 PM
- Forum: Using jQuery
I have a JavaScript function that is called when a particular song is played on my page ("HappyTimes" below):
1. function playHappyTimes() {
2. $.post("bumpPlays.php", { song: "HappyTimes" });
3. turnoff_dialogs();
4. jwplayer('container').playlistItem(2);
5. turnoff_speakers();
6. document.getElementById('Epitaph_li').style.background= 'url(../../images/speaker_on.png) no-repeat';
7. $("div#HappyTimes").dialog('open');
8. currentSong='HappyTimes';
9. }
The first line is a .post call to call bumpPlays.php on my server, which will bump a counter in the database for that song. bumpPlays.php is in the same directory as the page playing the songs. bumpPlays.php has an echo at the top that reports entry, but it doesn't report, so it looks like I'm not making any connection from the JavaScript here. I don't have any jQuery loaded other than

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

I've tried using an absolute string for the .post url

"http://www.mysite.com/music/thisAlbum/bumpPlays.php:

But that doesn't work either.

Does anyone see the problem?

Thanks

Implementing a div box that acts like a link
[3Replies]
- 07-Feb-2012 03:08 AM
- Forum: Using jQuery
I'm wondering how you would use jQuery to implement a div that executes a link when clicked. It's easy enough to do this in HTML, as shown below, but it seems that a jQuery solution might also be available. I'm not sure, though, how to execute the link to another URL in jQuery. Thanks for any ideas.
1. <style>
2. div#download {
3. width:200px;
4. height:75px;
5. background-image:url(../../images/download.png); <-- has text for front of the div
6. }
7. a#dwnld {
8. display:block;
9. width:100%;
10. height:100%;
11. }
12. </style>
1. <body>
2. <div id="download">
3. <a id="dwnld" href="../../pay_form.php?pn=10"></a>
4. </div>

focus() not
[2Replies]
- 25-Jan-2012 08:50 PM
- Forum: Using jQuery
I have a form with several input elements. The first inpup has id= txtName, the second id= txtEmail, etc. If someone skips the txtName field I want to alert them and bring them back to the txtName field, so I have the code below:

$('#txtName').blur (
        function() {
            if(this.value == ''){
                this.className = 'highlighted';
                alert("Please enter your name.");
                this.focus();
        }
    });

This highlights the txtName field and displays the alert ok but the focus() line doesn't return the focus to the txtName field. I've tried all three syntaxes below for the focus line but nothing works:
                  this.focus(); , $(this).focus; and       setTimeout(function() { $(this).focus();}, 100);

Thanks for any ideas.

.show and .hide are jerky
[1Reply]
- 25-Jan-2012 03:15 AM
- Forum: Using jQuery
I'm trying to use .hide() and .show() to smoothly expand a table to show extra rows or to collapse the table to remove the rows. But the .show() animation is very jerky and on the .hide() the animation doesn't seems reduce the height of the rows; they fade out and then suddenly dissappear at the end when the display is set to none. You can see the action at http://www.buyabarcodex.com/pay_form.php by checking and unchecking the first box at the top: "Check if you are not in the US or Canada."

Thanks for any suggestions.

Steve

Getting element to disappear after delay(3000).
[7Replies]
- 23-Jan-2012 02:27 AM
- Forum: Using jQuery
I have a div#pointer_1 that I want to fade in when I roll over an unrelated li#application element. After 3 seconds I then want div#pointer_1 to disappear again. It seems like the code below should do the job, but it doesn't . When I roll over li#application div#pointer fades in as I want, but nothing happens after the 3 second delay. Does anyone see the problem here?
1. div#pointer_1 {
2. position:absolute;
3. bottom:0px;
4. left:0px;
5. opacity:0;
6. }
7. <div id=pointer_1>
8. <img src="images/pointer_1.png" alt="pointer_1" />
9. </div>
1. $('li#application').mouseover(function() {
2. $('div#pointer_1').animate({'opacity':1},1000).delay(3000).css('opacity', '0');
4. });
Thanks for any ideas.

Testing checked state on a checkbox
[7Replies]
- 18-Jan-2012 01:35 PM
- Forum: Using jQuery
I have the code below to initially clear all my page checkboxes to false, i.e., unchecked:
1. $('input:checkbox').attr('checked', 'false'); // Clear all checkboxes
Then farther down I have:
1. state=$('#outside').attr('checked'); // get the state for the #outside checkbox
2. alert("formcheck:outside.checked is " + state); // alerts "false"
3. if($('#outside').attr('checked')) {
4. alert("checking city"); // even though above alerted "false" we fall through to here!
5. state=$('#outside').attr('checked');
6. alert("formcheck:outside.checked now is " + state); // still "false"
Even though the checked state tests "false" in lines 1 and 2, line 3 finds it true and falls through to line 4. And at lines 5 and 6 the checked state still tests false. So what was the "if" statement in line 3 checking?.

Thanks for any insight.

Fixing the IE8 problem of not sending change events
[0Replies]
- 10-Jan-2012 03:32 AM
- Forum: Using jQuery
I implemented some styled check boxes with jQuery that worked great. The idea is to set the original check box element to display:none and then follow the check box element with a <label> element that has a background image assigned that is what you want the new check box to look like. When you click this new image you're actually clicking the label element which, according to standard HTML, passes the click event to the check box element. jQuery handling the change event changes the image to the opposite state and does whatever else you want to do when the state changes.

This all worked great until I tried it with IE8. IE8 has a bug, apparently, that prevents it from sending the change event. Great!

This is known and a fix is described in the comments below here -http://api.jquery.com/change/ - (see Kyle Florence comment and those after) but I'm having trouble following what's being recommended. Basically, they're replacing change with propertychange, but making the change below in my code (replacing line 3 with line 2) doesn't work for me:
1. $(document).ready(function(){
2. $('#outside').bind($.browser.msie ? 'propertychange': 'change', function() {
3. // $('#outside').'change'(function(){ // original code
4. alert("outside changing");
5. if($(this).is(":checked")){
6. $(this).next("label").addClass("LabelSelected"); // label "for" must match the previous checkbox if in the HTML
7. $('.input2').removeClass("hidden");
8. }
9. else{
10. $(this).next("label").removeClass("LabelSelected");
11. $('.input2').addClass("hidden");
12. }
13. });
Could someone who undertands what's going on here maybe nudge me toward a solution that will let my styled check boxes work with IE8?

Thanks for any help.

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend