Response title
This is preview!
- Screen name: blackhawk
- About Me: I currently work as a full-time web developer for Future Farmers of America. I hold a decade of web design and developing experience. I love working with jQuery...and now getting into jQuery Mobile.
blackhawk's Profile
45 Posts
123 Responses
0
Followers
Activity Trend
Last 30 days
Loading Chart...
Show:
- Expanded view
- List view
- 12-Jun-2013 03:34 PM
- Forum: Using jQuery
Anyone knows of a way to detect when a DOM attribute changes with jQuery?For example, I have the following HTML code..- <div id="ctl00_ctl00_cphMain_cphMain_upoCategories_uprProgress" style="display: none; position: absolute; z-index: 100000; width: 723px; height: 1014px; left: -50000px; top: -50000px;" role="status" aria-hidden="true" class="updateProgress">
- <div style="position: absolute; left: 353px; top: 299px;">
- <img id="ctl00_ctl00_cphMain_cphMain_upoCategories_imgUpdating" src="http://maxcdn.nexternal.com/Shared/StoreFront/Images/updating.gif" alt="Updating" style="border-width:0px;">
- </div>
- </div>
If a dropdown select value changes, this code will generate display:visible for 5 - 10 seconds, then go back to display:none.How can I detect when the sequence is over and it turns back to display:none again?I tried using the following function....- $('.updateProgress').live('DOMAttrModified',function(e){
- console.log('something has changed and..'+ $(this).css('display'));
- });
But it doesn't work for me. The page I am working on has to use jQuery 1.6., which is why I am not attempting to use the .on method.Thanks for any advice!
*Break through the ice and never look back*- 12-Jun-2013 12:13 PM
- Forum: Using jQuery
I have a very large shopping cart page that loads a lot of scripts onto the page initially and later. When the page loads, there is a select drop-down box where you can select an option to reorder the items on the page by price, or by name, etc...every time a drop-down change is made, an ajax request is called, and then reloads the projects back onto the page and re-sorts them.My question is how can I detect when then re-ordering is complete? or when XHR request through Google Chrome is complete, via jQuery?At that point I want to manipulate the DOMBut my problem is that I cannot find where the Ajax request is coming from. But do I need to know that?Thanks!
*Break through the ice and never look back*- 03-May-2013 05:32 PM
- Forum: Using jQuery Plugins
This is very critical for me right now..I'm just looking for a simple answer to this question. We had a young developer who insisted of using a combination of both jQuery tools (with the apple effect) and Video Lightbox.The Goal:Our goal is to click on either a text or image link, and smoothly see a pop-up window appear before you, loading a you-tube video inside of it. that's it.The Question:Do I have to use both of these plug-ins to complete my goal, or can I use one or the other? What do you experienced guys prefer? Is there anything more I need to learn from all this?Thanks for any advice!
*Break through the ice and never look back*- This may not look long but I promise this is not for the lighthearted
I have the following table I am trying to modify via jquery...- <table id="mtable" cellspacing="0" cellpadding="0" border="0" style="width:100%;border-collapse:collapse;">
<tbody><tr>
<td>
<span id="mspan" class="merror"></span>
<table width="100%">
<tbody><tr>
<td nowrap="nowrap">User name:</td>
<td width="100%"><input name="mname" type="text" id="mname" autocomplete="off" class="ms-inputuserfield" style="width:99%;"></td>
</tr>
<tr>
<td nowrap="nowrap">Password:</td>
<td width="100%"><input name="mpassword" type="password" id="mpassword" autocomplete="off" class="ms-inputuserfield" style="width:99%;"></td>
</tr>
<tr>
<td colspan="2" align="right"><input type="submit" name="mlogin" value="Sign In" id="mlogin"></td>
</tr>
<tr>
<td colspan="2"><input id="mremember" type="checkbox" name="mremember"><label for="mremember">Sign me in automatically</label></td>
</tr>
<tr>
<td colspan="2" class="mdescriptiontext" style="text-align:center">
<br>
<a id="mreset" href="/location.htm">Reset</a>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
..And my goal is to convert it to this...- <table id="mtable" cellspacing="0" cellpadding="0" border="0" style="width:100%;border-collapse:collapse;">
<tbody><tr>
<td>
<div id="loginerror">
<span id="mspan" class="merror"></span>
</div>
</td>
<td>
<div id="loginusername">
<input name="mname" type="text" id="mname" autocomplete="off" class="ms-inputuserfield" style="width:99%;">
</div>
</td>
<td>
<div id="loginpassword">
<input name="mpassword" type="password" id="mpassword" autocomplete="off" class="ms-inputuserfield" style="width:99%;">
</div>
</td>
<td>
<div id="loginsubmit">
<input type="submit" name="mlogin" value="Sign In" id="mlogin">
</div>
</td>
</tr>
</tbody>
</table>
I'm basically..
removing the <tr>'s ,
adding <div> tags with ids around the content in each td
...and elemenating a couple td's towards the bottom.
thats it. Any help would be awesome! I need to learn how to convert complex tables, but just don't know where to start...what should be my weapon of choice in this situation?
Thanks for any help!
*Break through the ice and never look back*- in jquery, what is the easiest way to automatically slidetoggle an object every 3 seconds after the page loads? I basically want the object to open its mouth for 3 seconds, then close his mouth for 3 seconds, then open his mouth for 3 seconds, infinity.thanks!
*Break through the ice and never look back*- 15-Feb-2013 09:22 AM
- Forum: Using jQuery
I see a lot of developers use the following technique because it guarantees that $ is being used for jQuery, when the window is ready...- (function($){
- $(window).load(function(){
- myFunction();
- })
- })(jQuery);
But why does the code below, generate an error in my console window?...- (function($){
- $(window).load(function(){
- $.myFunction();
- })
- })(jQuery);
Line 4 is just a jQuery function, as upose to a function declaration I used above. Why is that reason enough to generate an error in my console window?Thanks for helping me understand.blackhawk
*Break through the ice and never look back*- 14-Feb-2013 03:15 PM
- Forum: Using jQuery
Lets say I have several div's on the page and each div holds an anchor link, with different title attributes. How can I drill down to the anchor that has a specific title attribute and set display none on its parent container (the div).I got this far, but don't know how to finish it...- if($('.nextProdThumb').length > 0) {
- mitem = $('.nextProdThumb').attr("title");
- if((mtitle == "The title I am looking for!")) { console.log('yes we have it'); //$(this).parent().css({'display':'none !important'});// this doesn't work
- } else {
- console.log('no we dont have it');
- }
- }
Thanks!
*Break through the ice and never look back*- 05-Feb-2013 04:29 PM
- Forum: Using jQuery Plugins
Is there a simply way to save ratings to a JSON file?- I currently have a slidetoggle function which is working great! What my next goal is, is to create a link inside the div that i'm slide toggling, that will close the parent div that it is in.Here my code so far...
- /*JQ - EXPAND PANELS ON CLICK*/
- $('#panels .expand').click(function(e){
- e.preventDefault();
- var mclass=$(this).attr('class').split(' ')[1];
- var $mcontent = $("#" + mclass);
- $mcontent.slideToggle('slow', function(){
- mthis = $(this);
- if (mthis.is(':hidden')) {
- mthis.prev().css({'background-image':'url("images/arrow-down.png")'});
- }
- else {
- mthis.prev().css({'background-image':'url("images/arrow-up.png")'});
- var menulink = $(this).children().children().next().next('a:last').attr('class');
- //console.log('where am i? '+ menulink);
- $('.'+ menulink).click(function(e) {
- e.preventDefault();
- $mcontent.toggle();
- mthis.prev().css({'background-image':'url("images/arrow-down.png")'});
- });
- }
- });
- });
If you look at lines 16 - 20, you will see that I'm trying to click on an internal link to have the same effect as $mcontent on line 8 - basically to slidetoggle where I am at. But it's acting buggy when I click that link (the link associated to lines 16 - 20 in code), (sometimes it closes the div, other times it doesn't).How can I fix this so that a children() anchor link can bind to the slidetoggle parent function()?So matter if I am clicking on $('#panels .expand') or the internal anchor link, it will slidetoggle the entire function properly.Thanks!
*Break through the ice and never look back*- 23-Jan-2013 10:48 AM
- Forum: Using jQuery
What are the biggest differences or benefits between the ways that the load method are used below....I've seen some people do this...- $('#wrapper').append($("<div>").load(mfooterwrapper));
While I've seen other peoeple use this style...
- $("<div>").load(mfooterwrapper, function() {
- $("#wrapper").append($(this));
- });
Thanks for any advice!
*Break through the ice and never look back*- Ho can we optimize this, instead of writing parent().parent().parent()...etcvar mvalue = $('.start').parent().parent().next().next().html();Thanks for any advice!bh
*Break through the ice and never look back*- 07-Nov-2012 05:27 PM
- Forum: jQuery Mobile
- I would like to create a simple jQuery Mobile/ PhoneGap page with several images on the page.
- After I create this page, I would then like to view this page on my ipod touch with an internet connection.
- I would then close this page project completely
- Then "intentionally" loose my internet signal on my ipod touch device AND THEN re-open the PhoneGap project page to view it, interact with it, play with it, just as I did when I had internet a couple minutes ago.
Is this possible without any cost involved?If so, where do I learn to build something like this from start to finish?Thanks!
*Break through the ice and never look back*
If the user is viewing the jquery mobile page from a desktop pc browser, and I add target="_blank" in addition to the rel="external" will JQM simply ignore my target tag on mobile devices, and use it on desktop browsers? Or if there is a better way I should go about it, I'm all ears.
I have to update 50 external links all at once and want to make sure I do it the best way the first time.
Thanks
*Break through the ice and never look back*- 02-Oct-2012 04:06 PM
- Forum: Using jQuery
The following .each() function is inside of another larger function. I am having a hard time knowing if the "return;" below, is even nessessary...$('.something').each(function() {aid = $(this);aid.x(-player.aid.speed, true);var aidposx = aid.x();if(aidposx < 0) {aid.remove();return;}});If the point of "return' is to say "now its ok to remove aid", then how else can I write this? What if return; wasn't there, wouldn't aid.remove(); still execute? Do I really need it?? What is the point of the return in this case......or is it saying..."continue to execute this function, $('.something').each(functon() { as long as aidposx is less than 0?Thanks for any insight!
*Break through the ice and never look back*- 22-Aug-2012 02:09 PM
- Forum: Using jQuery
Is it possible to store a function into a data object for the jquery each method like this...- $.each([{keypress: 65, mcall: x()-player.speed},............], function(i, obj) {//Do something with keypress and mcall});
I'm learning to put strings and numbers for the value of mcall, but I have a situation where I need to place a custom function x() minus a javascript object player.speed. Is that ok for mcall or is there another way to write this?Thanks!
*Break through the ice and never look back*- Here are 3 chained patterns that I am trying to get compressed into "possibly" one line with the help of a looping mechanism like the each() method...
$("#background1").css("left",(parseInt($("#background1").css("left")) - smallStarSpeed - PLAYGROUND_WIDTH) % (-2 * PLAYGROUND_WIDTH) + PLAYGROUND_WIDTH);
$("#background2").css("left",(parseInt($("#background2").css("left")) - mediumStarSpeed - PLAYGROUND_WIDTH) % (-2 * PLAYGROUND_WIDTH) + PLAYGROUND_WIDTH);
$("#background3").css("left",(parseInt($("#background3").css("left")) - largeStarSpeed - PLAYGROUND_WIDTH) % (-2 * PLAYGROUND_WIDTH) + PLAYGROUND_WIDTH);
how can I condense this code with jquery. The jquery documentation shows that the each() method is great for looping through arrays and objects, but can it also be used for chained patterns like ths? The only thing that is different between the 3 are the ID selector names and the small, medium and large star variables.
Thanks!
*Break through the ice and never look back*- 31-Jul-2012 11:31 AM
- Forum: Developing jQuery Mobile
With custom select menus,
I am finding no way to show "all options were selected". Is there a way with ether javascript or PHP to show what options were selected from a single custom select menu?
This is the code I have in my HTML- <div id="ordersteak" data-role="fieldcontain">
<label id="labelsteak" for="select-steaks" class="select">Steak</label>
<select name="select-steaks" id="select-steaks" multiple="multiple" data-native-menu="false">
<option>choose a case of...</option>
<option value="newyorkstrip">New York Strip</option>
<option value="ribeyesteaks">Rib-Eye Steaks</option>
<option value="tbone">T-Bone</option>
<option value="sirloinstrips">Sirloin Strips</option>
<option value="steakburgers">Steak Burgers</option>
</select>
</div>
This is the PHP I am using to print all the options that the user has selected....- $selectsteaks = $_POST['select-steaks'];
- $nselectsteaks = count($selectsteaks);
for($i=0; $i < $nselectsteaks; $i++)
{
print($nselectsteaks[$i] . " ");
}
But my end result only prints the last option in the list (Steak Burgers), even though I checked all boxes in the custom menu.
What more do I need to do to show all options that were selected?
Thanks
*Break through the ice and never look back*- 25-Jul-2012 05:02 PM
- Forum: jQuery Mobile
I'm trying to find all the rel="external" links that are only stored under <ul data-role="listview">...</ul>. How do we go about writing that? This is what I have so far, but don't know how to implement the "listview" part into it....- if ($('ul li a').attr("rel","external").length) {
- $('ul li a').attr("rel","external").append('goes out to full site');
- }
Thanks!
*Break through the ice and never look back*- 18-Jul-2012 11:27 AM
- Forum: Developing jQuery Mobile
Not sure if this is "currently possible", if it is, would any JQM developer show me how to solve this...
If you go here...
http://jquerymobile.com/demos/1.1.1/docs/forms/selects/custom.html
...you will see towards the bottom of the page that "Multiple Select" boxes allow you to click a check box for each item in a list that pops-up. That is super! But is there anyway we can replace the checkbox for each <option>, with an actual input so we can type in quantity?
If I am checking an <option> item, I might as well consider that as "1". And if I do, it seems to make sense to me to have the option of saying I want 2 or 3 or 4, etc... of that <option> within the <select> of that Multiple Select Menu.
Does that make sense? If there is a alternative creative way to go about this, I'm all for it!
Thanks for any advice!
*Break through the ice and never look back*- 17-Jul-2012 11:57 PM
- Forum: jQuery Mobile
Does anyone know of a date picker that works with JQM 1.1.1?Basically I need someone to pick a certain date in the month as an input type, and I will then send the form input results to another page, etc...Thanks
*Break through the ice and never look back*- 16-Jul-2012 02:30 PM
- Forum: jQuery Mobile
placing a ui-disable class on a button is sorta what I wanted, but without fading to almost white. How can I remove the press-down .class of a jQuery mobile button, this way it looks the same whether you press on it or not?
I tried the following but it doesn't work...Any one got any tips? *.active is a third button which shouldn't play along with the disabling process just in case you are wondering about the a:not(.active) code.- $.disablebtns = function() {
$('#panels .details a:not(.active)').click(function() {
$(this).removeClass('ui-btn-hover-e','ui-btn-down-e');
});
} - $(document).delegate("#mpage", "pageinit", function() {
$.disablebtns();
});
Thanks for any advice!
*Break through the ice and never look back*- I completely understand what it means to post data from one page to another. The following code I've been working on shows that to me...
- var mload = $.post('feedback.htm', {name: "John", time: "2pm"} , function(mdata){});
- mload.success(function(mdata) {
- $('#feedback').html(mdata);
- });
What I don't understand at all, is how to use the {name: "John", time: "2pm"} in the post request.In context to this post request, what are some basic things i can do with that data? can it be sent anywhere? can I view is through the console.log() request? what does it mean for it to be a "payload of data" as the jquery documentation states? Just trying to wrap my mind around it - thanks!
*Break through the ice and never look back*- Is there anyway in jQuery that I can chain or combine the following 2 statements into one? #footer is a <div> element, and .fullsite is an anchor link <a />.
- $.dslinkval = function() {
- $("#footer .fullsite").attr("href","http://www.google.com");
- $("#footer .fullsite span span").text('GOOGLE');
- }
Still learning here...Thanks.
*Break through the ice and never look back*- I'm using the following guide as a start for grouping buttons, but I want my buttons to the right of my window screen, not the left. How do I achieve this?
<!--*floats the group to the left by default*//-->
<div data-role="controlgroup"><a href="index.html" data-role="button">Yes</a><a href="index.html" data-role="button">No</a><a href="index.html" data-role="button">Maybe</a></div>
*Break through the ice and never look back*- 10-Jul-2012 03:15 PM
- Forum: jQuery Mobile
Does anyone have any quick examples of how to use events for search inputs? I'm trying to learn how use the following example but the documentation doesn't provide any...$( ".selector" ).textinput({create: function(event, ui) { ... }});
Does anyone have any quick demos?
Thanks!
*Break through the ice and never look back*
© 2013 jQuery Foundation
Sponsored by
and others.
- <table id="mtable" cellspacing="0" cellpadding="0" border="0" style="width:100%;border-collapse:collapse;">