Search jQuery

jQuery Forum

Screen name:
jedierikb

jedierikb's Profile

4 Posts

3 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

how to place large irregular sized image into a jQuery UI button
[0Replies]
- 20-Feb-2013 04:45 PM
- Forum: Using jQuery UI
Given a button of a fixed size and an image of an unknown size (but smaller dimensions than the button), how do I dynamically place that graphic onto the button?
This example only handles something icon sized, as does this example.
My own attempts end up cropping the image in the lower right. Hoping to get something robust that works across anything themeroller can spit out. Here's a link to a live example:
http://jsbin.com/iliqih/2/edit
1. <html>
2. <head>
3. <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css"
4. />
5. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
6. <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
7. <script>
9. $(document).ready( function() {
10. var butt = $("<div class='butt' style='width:500; height:500px' />");
11. $('body').append(butt);
12. butt.button();
14. var cssKey = ".ui-icon.bigIcon";
15. $(".butt").button("option", {
16. icons: {
17. primary: 'bigIcon'
18. },
19. text: false
20. });
22. var imgUrl = "http://www.artisancomplete.com/wp-content/uploads/2011/03/testpattern-hd-1080-480x270.png";
23. var imgW = 480;
24. var imgH = 270;
25. var str = "<style type='text/css'> " + cssKey + " { background-image: url(" + imgUrl + ") !important; width:" + imgW + "px; height:" + imgH + "px; margin-left:-" + (imgW/2) + "; margin-top:-" + (imgH/2) + "} </style>";
26. $(str).appendTo("head");
27. });
28. </script>
29. </head>
30. </html>

unable to get custom icon on jQueryUI button
[2Replies]
- 14-Jan-2013 02:37 AM
- Forum: Using jQuery UI
Here is what I am trying to do -- use base64 data on my button...

http://jsfiddle.net/ryFSx/

but it is not working out. Any suggestions?

( got the idea from here: http://stackoverflow.com/questions/3224537/change-the-icon-of-a-jquery-ui-button-with-own-image )

making on indeterminate progress bar?
[5Replies]
- 09-Jan-2013 10:41 PM
- Forum: Using jQuery UI
There is a nice animated progress bar here in the demos:
http://jqueryui.com/progressbar/#animated

How do I get such a nice animated gif from themeroller? Where did that graphic come from?

I want it so that I can make an indeterminate progressbar. The links about an indeterminate progressbar are all pretty stale. However, it is mentioned in the API

"if the actual status cannot be calculated, an indeterminate progress bar or spinner animation is a better way to provide user feedback."

What is the best practice in early 2013 for making an indeterminate progress bar?

jQueryUI dialog cropping content?
[0Replies]
- 09-Jan-2013 10:12 PM
- Forum: Using jQuery UI
Here is a fiddle which demonstrates the problem.

First I display a jQueryUI dialog with a fixed size. Then I enlarge it via an animation to a new fixed size. Then I add new content to the dialog. The new content is being cropped by the height of the original dialog window. Alas, my research on how to fix this is coming up blank.
1. $(function() {
2. var dg = $("#dialog");
3. dg.dialog( {
4. height: 200,
5. width: 80,
6. modal: true,
7. draggable: false,
8. resizable: false,
9. position: 'center'
10. });
12. dg.dialog("widget").animate({
13. width: '400px',
14. height: '400px'
15. }, {
16. duration: 500,
17. step: function() {
18. dg.dialog('option', 'position', 'center' );
19. },
20. complete: function( evt ) {
21. //big --> font-size: 200px;
22. dg.html( "<span class='big'>YA!</span>" );
23. }
24. });

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend