jQuery Forum

Customize data-filter-placeholder
[5Replies]
- 22-Apr-2013 06:59 PM
- Forum: jQuery Mobile
Can the attribute data-filter-placeholder be customized? I've been wanting to have that change based on a filter that is selected.
So placeholder defaults to "search", but if they select Location from the filter list, I'd like it to change to "Search Location". I tried something like below but, obviously, it's a greasefire. Has anyone ever attempted this?

Thanks,
Shadraq
1. $("#filterButton").click(function () {
2. $("#searchResults").change(function(){
3. $(this).data-filter-placeholder("Search Location");
4. });
5. });

Auto Resize Font-Size
[4Replies]
- 31-Jan-2013 05:55 PM
- Forum: Using jQuery
I'm working on some code to automatically change the font-size based not only on $(window).resize() but also to ensure it the text doesn't wrap, and instead shrinks to the size of its container. I do not care if the size ends up at 4...just so long as it does not wrap.

My HTML:
1. <div id="UL16" class="bracketSize L b16">
2. <ul class="tlist">
3. <li class="theTeams t16">1 upLeft upLeft upLeft</li>
4. <li class="theTeams t16">2 upLeft</li>
5. <li class="theTeams t16">3 upLeft</li>
6. <li class="theTeams t16">4 upLeft</li>
7. <li class="theTeams t16">5 upLeft</li>
8. <li class="theTeams t16">6 upLeft</li>
9. <li class="theTeams t16">7 upLeft</li>
10. <li class="theTeams t16">8 upLeft</li>
11. <li class="theTeams t16">9 upLeft</li>
12. <li class="theTeams t16">10 upLeft</li>
13. <li class="theTeams t16">11 upLeft</li>
14. <li class="theTeams t16">12 upLeft</li>
15. <li class="theTeams t16">13 upLeft</li>
16. <li class="theTeams t16">14 upLeft</li>
17. <li class="theTeams t16">15 upLeft</li>
18. <li class="theTeams">16 upLeft</li>
19. </ul>
20. </div>
Here is my .js attempt
//it works great with the resize, but the text wraps if the input is too long
1. $(document).ready(function () {
      //set the originals
      var originalWinHeight = $(window).height();
      var originalWinWidth = $(window).width();
  
      //set the original font size
      var originalFontSize = getOriginalFontSize();
  
      //set the ratio of change for each size change
      var ratioOfChange = 50;
  
      //set the font size using jquery
      $("#Full").css("font-size", originalFontSize);
  
      $(window).resize(function () {
          //get the width and height as the window resizes
          var winHeight = $(window).height();
          var winWidth = $(window).width();
  
          //get the difference in width
          var widthDiff = winWidth - originalWinWidth;
  
          //check if the window is larger or smaller than the original
          if (widthDiff > 0) {
              //our window is larger than the original so increase font size
              var pixelsToIncrease = Math.round(widthDiff / ratioOfChange);
  
              //calculate the new font size
              var newFontSize = originalFontSize + pixelsToIncrease;
  
              //set new font size
              $("#Full").css("font-size", newFontSize);
          }
          else {
              //our window is smaller than the original so decrease font size
              var pixelsToDecrease = Math.round(Math.abs(widthDiff) / ratioOfChange);
  
              //calculate the new font size
              var newFontSize = originalFontSize - pixelsToDecrease;
  
              //set the new font size
              $("#Full").css("font-size", newFontSize);
          }
      })
  });
  
  getOriginalFontSize = function () {
      var windowWidth = $(window).width();
      var thisFontSize = windowWidth / 50;
      if (thisFontSize > "16") { thisFontSize = "16"; }
      return thisFontSize;
  }
I have messed with the css property white-space:nowrap;, That stops wrapping, but simply overruns, rather than shrink down. Any help you have would be appreciated.

Checkbox question
[2Replies]
- 12-Jan-2013 09:49 PM
- Forum: Using jQuery UI
I have a simple checkbox. I need to know if it's end position is on or off upon submit. The problem is that no matter if the button is clicked once or twice, the ALERT is always "on"... I need to know how to make it "true" if clicked and "false" if unclicked...or ON/OFF...either way. I've tried a couple things but to no avail.

Thanks,
Shadraq
1. /*js*/
2. $("#class04").on("change", function(event){
3. setChildClassAttended04($(this).val());
4. alert($(this).val());
5. });
6. $("#classElem").on("change", function(event){
7. setChildClassAttendedElem($(this).val());
8. alert($(this).val());
9. });
10. /*html*/
11. <span id="checkClass">
12. <span id="spanClass04"><input type="checkbox" id="class04" /><label for="class04">0-4</label></span>
13. <span id="spanClassElem"><input type="checkbox" id="classElem"/><label for="classElem">Elementary</label></span>
14. </span>

Checkbox - unchecking if other box is checked
[4Replies]
- 09-Jan-2013 07:55 AM
- Forum: Using jQuery UI
I used checkboxes recently to allow a box to be selected if yes or if no. The problem is that the boxes can both be checked at the same time. I'd like them to toggle the other if checked.

So if "Yes" is checked, then "No" would uncheck.

Below is my code. The buttons work great. The checking to see if a value is true, then setting it to false works...but the checkbox button still reads as though selected.

Any help you have would be appreciated.
1. $(function() {
2. $( "#checkWelcomeFormat" ).buttonset();
3. });
4. $(function() {
5. $( "#checkChildrenFormat" ).buttonset();
6. });
7. $("#checkWelcomeYes").on("change", function(event){
8. setWelcome($(this).val());
9. if($("#checkWelcomeNo").prop('checked') == true)
10. {
11. $("#checkWelcomeNo").removeClass( "ui-state-active" ).addClass("ui-state-default");
12. $("#checkWelcomeNo").prop("checked", false);
13. }
14. });
15. $("#checkWelcomeNo").on("change", function(event){
16. setWelcome($(this).val());
17. if($("#checkWelcomeYes").prop('checked') == true)
18. {
19. $("#checkWelcomeYes").removeClass( "ui-state-active" ).addClass("ui-state-default");
20. $("#checkWelcomeYes").prop("checked", false);
21. }
22. });

Function problems using .post
[5Replies]
- 01-Jan-2013 11:36 PM
- Forum: Using jQuery
I recently started using JQuery after about a 3-year lapse. Needless to say, I'm quite rusty. I have a button that, when clicked, needs to send various variables to a .php file containing the appropriate function. My issue is that the button will click, any test alerts pass the appropriate values into said alert...however nothing fires off on my .php file. I'm at a loss. The function below exists inside of the $(document).ready
1. $(function() {
2. $( "#buttonSubmit" )
3. .click(function()
4. {
5. $.post(
6. //"../customwidgets/survey/surveyF.php",
7. "surveyF.php",
8. {
9. "function": "sendVisitorSurvey",
10. "f_dateAttended": dateAttended,
11. "f_welcome": welcome,
12. "f_messageFeedback": messageFeedback,
13. "f_ageGroup": ageGroup,
14. "f_heardAboutUs": heardAboutUs,
15. "f_questions": questions,
16. "f_childHasChildren": childHasChildren,
17. "f_childClassAttended": childClassAttended,
18. "f_childClassFeedback": childClassFeedback,
19. "f_childCheckIn": childCheckIn,
20. "f_contactName": contactName,
21. "f_contactEmail": contactEmail,
22. "f_contactPhone": contactPhone
23. }
24. );
25. /* alert(
26. "Date Attended?: "+dateAttended+"\n"+
27. "Did you feel welcome?: "+welcome+"\n"+
28. "Feedback on the message?: "+messageFeedback+"\n"+
29. "What is your age group?: "+ageGroup+"\n"+
30. "How did you hear about us?: "+heardAboutUs+"\n"+
31. "Do you have any questions?: "+questions+"\n"+
32. "Have Children?: "+childHasChildren+"\n"+
33. "What class attended?: "+childClassAttended+"\n"+
34. "Class Feedback from child?: "+childClassFeedback+"\n"+
35. "Children Check In Easy?: "+childCheckIn+"\n"+
36. "Contact Name: "+contactName+"\n"+
37. "Contact Email: "+contactEmail+"\n"+
38. "Contact Phone: "+contactPhone
39. );*/
41. });
42. });

[jQuery] BlockUI not always firing
[7Replies]
- 02-Jun-2009 02:29 AM
- Forum: Using jQuery
I posted this in the UI group and was told to put it in here...
My problem is that I have a function that is to call blockUI both
upon
login and logout. BlockUI only fires upon logout.
Here's my code:
**code**
function Processing(dataString,l_processing,control)
{
if (l_processing == "yes")
{
$().ajaxStart(function()
{
$.blockUI(
{
message: $
('img#l-processing'),
css:
{

border: 'none',

padding: '15px',

backgroundColor: '#000',

'-webkit-border-radius': '10px',

'-moz-border-radius': '10px',

'-ms-filter': 'progid:DXImageTransform.Microsoft.Alpha
(Opacity=50)',

'filter': 'progid:DXImageTransform.Microsoft.Alpha
(Opacity=50)',

opacity: '.5'
}
})
});
if(control == "logout")
{
$.ajax({

type: "POST",
url:
"logout.php",

data: dataString,
});

ReloadPage();
}
else if(control == "login")
{
$.ajax({
type:
"POST",
url:
"login.php",
data:
dataString,
});
ReloadPage();
//return
false;
}
}
l_processing = "no";
control = "no";
}
**end code**
All vars are being passed correctly. "else if(control == "login")"
fires just fine, within the "if(l_processing == "yes")", but the
BlockUI portion does not start. However, when control = "logout"
BlockUI starts up just fine.
I've done alerts and find that all variables being sent into the
function are populating as they should.
Any ideas?

BlockUI not always firing
[5Replies]
- 01-Jun-2009 03:44 AM
- Forum: Using jQuery UI
My problem is that I have a function that is to call blockUI both upon
login and logout. BlockUI only fires upon logout.
Here's my code:
**code**
function Processing(dataString,l_processing,control)
    {
        if (l_processing == "yes")
            {
                $().ajaxStart(function()
                    {
                        $.blockUI(
                            {
                            message: $('img#l-processing'),
                                css: {
                                    border: 'none',
                                    padding: '15px',
                                    backgroundColor: '#000',
                                    '-webkit-border-radius': '10px',
                                    '-moz-border-radius': '10px',
                                    '-ms-filter': 'progid:DXImageTransform.Microsoft.Alpha
(Opacity=50)',
                                    'filter': 'progid:DXImageTransform.Microsoft.Alpha
(Opacity=50)',
                                    opacity: '.5'
                                    }
                            })
                    });
                if(control == "logout")
                        {
                             $.ajax({
                                 type: "POST",
                                 url: "logout.php",
                                 data: dataString,
                                });
                                ReloadPage();
                        }
                else if(control == "login")
                        {
                            $.ajax({
                             type: "POST",
                             url: "login.php",
                             data: dataString,
                            });
                            ReloadPage();
                            //return false;
                        }
            }
        l_processing = "no";
        control = "no";
    }
**end code**
All vars are being passed correctly. "else if(control == "login")"
fires just fine, within the "if(l_processing == "yes")", but the
BlockUI portion does not start. However, when control = "logout"
BlockUI starts up just fine.
I've done alerts and find that all variables being sent into the
function are populating as they should.
Any ideas?

[jQuery] IE8 error: Invalid Argument
[3Replies]
- 13-May-2009 08:36 AM
- Forum: Using jQuery
I realize that there are numerous posts on this subject. But, alas, I
will start with the same phrasing that everyone else does.
"This works in FF, but not in IE".
So, having said that, I'm not using the .min Jquery file, I'm using
the developers file.
I debugged it using Firebug Lite in IE8, as well as IE8's Dev console.
Here is what the errors were:
Firebug: "Invalid argument. (jquery-1.3.2.js,1061)"
IE8 Dev: Specific Line in the above js file is:
if ( set )
            elem[ name ] = value;
        return elem[ name ];
Now, I have a similar page that runs just fine in IE, making similar
calls. So I assume that it's only a syntax error. But for the life of
me I cannot find it. I know that the error occurs when I click on a
button (code shown below):
html += '<img src="/demo_images/walkin_search.ico" title="Search for
User" onClick="addEvent(\'' + e_id + '\'); return false;" />';
To call a function (showm below):
function addEvent(e_id)
    {
        event_id = e_id;
        $('#dialog-search').dialog('open');
    }
Which, in turn, calls a modal (code below):
$('#dialog-search').dialog(
            {
                bgiframe:true,
                autoOpen:false,
                title:"Search For User",
                resizable:false,
                height:200,
                modal:true,
                closeOnEscape:false,
                overlay:
                    {
                    backgroundColor: '#000',
                    opacity: 0.5
                    },
                buttons:
                    {
                        'Search': function()
                            {
                                firstname_s = $('#s-firstname').val();
                                lastname_s = $('#s-lastname').val();
                                validate = true;
                                validate1 = true;
                                allFields_s.removeClass('ui-state-error');
                                validate1 = validate && FillCheck(firstname_s,"At least 1
field must be filled in",$('#s-firstname'),$('#tips-search'));
                                validate = validate && FillCheck(lastname_s,"At least 1 field
must be filled in",$('#s-lastname'),$('#tips-search'));
                                if(validate1 || validate)
                                    {
                                        UserSearch("user",firstname_s,lastname_s,"");
                                        $('#dialog-no_user').dialog('close');
                                        $(this).dialog('close');
                                    }
                            },
                        'Cancel': function()
                            {
                                $(this).dialog('close');
                            }
                    },
                close: function()
                    {
                        $('#s-firstname').removeClass('ui-state-error');
                        $('#s-lastname').removeClass('ui-state-error');
                    }
            });
        $('#button-newsearch').click(function() {
                $('#dialog-search').dialog('open');
            })
            .hover(
                function(){
                    $(this).addClass("ui-state-hover");
                },
                function(){
                    $(this).removeClass("ui-state-hover");
                }
            ).mousedown(function(){
                $(this).addClass("ui-state-active");
            })
            .mouseup(function(){
                    $(this).removeClass("ui-state-active");
            });
I realize that I may not have given enough nuggets for anyone to be
able to help, so if you need more, just let me know.
Thanks for your time,
Shadraq

[jQuery] Cross Port Jquery Library Call
[3Replies]
- 13-May-2009 07:03 AM
- Forum: Using jQuery
I have created a payment system using Jquery. The problem I run into
is when I move from http to https. I get the following error:
Error: [Exception... "Access to restricted URI denied" code: "1012"
nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)" location: "https://
www.stirthewater.com/scripts/js/jquery-1.3.1.min.js Line: 19"]
Source File: https://www.mysite/scripts/js/jquery-1.3.1.min.js
Line: 19
I spent roughly 3 hours on Google trying to find a solution to this
library cross-port call. It's possible I didn't see the right article.
However, if someone could toss me a lifeline and help me out, it would
make my day.
Thanks,
Shadraq

[jQuery] Alternating Row Colors: Last row not coloring
[5Replies]
- 13-May-2009 06:58 AM
- Forum: Using jQuery
I have a function that is calling a list of events. Within the
<code>.each</code> is alternating row colors code (see below):
function DisplayEventList(info,event_id)
    {
        $.post('/url/server.php',
            {
                request:info,
                event_id:event_id
            },
        function(xml)
            {
                $('#event-listing tbody').empty();
                $(xml).find('list').each(function()
                    {
                        var startdate = $("start",this).text();
                        var location = $("location",this).text();
                        var event_name = $("event_name",this).text();
                        var speaker = $("speaker",this).text();
                        var e_id = $("event",this).text();
                        if(info == "specific")
                            {
                                var currentpricing = $("current_pricing",this).text();
                            }
                        $('#event-listing tbody tr:odd').css("background-color",
"#EFF1F1");
                        $('#event-listing tbody tr:even').css("background-color",
"#A4D1FF");
                        var html = '<tr height="35" style="font-size:smaller;"
align="center">';
                        html += '<td>' + startdate + '</td>';
                        html += '<td>' + location + '</td>';
                        html += '<td>' + event_name + '</td>';
                        html += '<td>' + speaker + '</td>';
                        if(info == "specific")
                            {
                                html += '<td>' + currentpricing + '</td>';
                            }
                        html += '</tr>';
                        $('#event-listing tbody').append($(html));
                    });
            });
    }
***END CODE***
And my table looks like:
<table id="event-listing" width="100%" class="ui-widget ui-widget-
content" cellspacing="0">
                <thead>
                    <tr class="ui-widget-header" style="font-size:small">
                        <th> </th>
                        <th>Begins</th>
                        <th>Location</th>
                        <th>Event</th>
                        <th>Speaker</th>
                    <? if($_GET['event'])
                        {
                            ?>
                                <th>Current Pricing</th>
                            <?
                        }
                    ?>
                    </tr>
                </thead>
<tbody>
                </tbody>
</table>
***END CODE***
My problem is that the last line of my returned rows isn't coloring.
If 14 rows return, the first 13 will alternate coloring, but the 14th
will not. Consequently, if only 1 line is returned, it does not color.
Thanks for your time,
Shadraq

[jQuery] "Please Wait While Processing" help
[5Replies]
- 24-Apr-2009 04:02 AM
- Forum: Using jQuery
I've designed a payment system that, generally gets a response
quickly. However, if there is any delay at all, customers will click
"Pay" again, thinking that they didn't hit it. This, of course, will
cause duplicate transactions.
I'm looking for some sort of "Please wait while we process your
request." message/decal/modal that freezes the screen while the
payment is processing, and releases once a response comes back from
the server.
Any ideas/links to examples. I googled and searched the UI...and
didn't find anything that I could use. It is likely I missed
something.
Thanks,
Shadraq

Dialog Modal; clicking "x" to close
[2Replies]
- 25-Mar-2009 05:40 AM
- Forum: Using jQuery UI
I am running into an odd issue. I have a UI modal dialog box that asks
the user to "Submit" or "Cancel". Both buttons unleash various
actions.
The problem I am running into is when the user closes the box by
clicking "x" on the top right of the box, rather than "Cancel". No
actions are unleashed when that happens. I have implemented
closeOnEscape:false to remove that option, but I am wondering if:
a) the "x" can be removed,
or
b) the "Cancel" actions can be assigned to the "x" (preferable option)
Thanks for you time,
Shadraq

Response title

Attachments

jQuery Forum

Activity Trend