Response title
This is preview!
- Screen name: jay.blanchard
- Website:
- Twitter Link:
- Facebook Link:
- Linkedin Link:
jay.blanchard's Profile
20 Posts
3264 Responses
22
Followers
Activity Trend
Last 30 days
Loading Chart...
Show:
- Expanded view
- List view
- 22-Mar-2012 08:37 AM
- Forum: Using jQuery Plugins
Hav any of you used the jQuery orgChart plugin?I have worked with it successfully for producing complex horizontal charts but I now have a need to make it vertical. Has anyone done this before?- If this is your first time posting to the jQuery forums you may not see your posts show up right away. All new users are moderated in order to cut down on spam in the forum.
- Does anyone know of a plugin or code snippet that will take results from a database and create a properly nested unordered list so that I can use it with jQuery OrgChart(https://github.com/wesnolte/jOrgChart#readme).
I have data that might be as many as 14 levels deep that needs to be displayed in a tree-like fashion. The single largest problem that I have is that I must recursively search each item for dependents and add them to the tree. I have been working on it for a couple of days and it seems that I cannot get the nested unordered lists closed properly. The OrgChart plugin works great and is easy to customize for look and feel - I just need to crack the underlying logic.
I have shortened the tree to a three level tree to see where I might be going wrong, but to no avail. I am just missing the logic on how to close each <ul>. from the routine that gets the data. Here is how the current logic works - (pseudo-code)
while(level1) {
if(thisLevel1Item has children) {
echo <li>thisLevel1Item
echo <ul>
} else {
echo <li>thisLevel1Item
}
while(level2 is related to thisLevel1Item) {
....etc
- 01-Feb-2012 07:17 PM
- Forum: jQuery Mobile
I am working on a site and regardless of the orientation on the iPhone I can move the site from side to side to see essentially what is a black background. On the jQuery Mobile docs site when I view it on the iPhone I cannot make that same kind of move. I fiddled with the viewport settings but they do not make a difference. Does anyone know where I might look to solve the issue? CSS?- I seem to have a 3-5 px tall black margin underneath my header and I cannot find where to override this in the CSS. Is anyone familiar with what I am talking about? How can I get rid of it? It looks to be tacked on under this:
<div data-role="header" class="b_header">
<img src="../images/header.jpg" width="100%" />
<a href="javascript:history.back();" data-icon="back" data-direction="reverse" style="top: 30px;">Back</a>
<a href="home.php" data-icon="home" data-theme="b" data-direction="reverse" style="top: 30px;">Home</a>
</div>
- My newest article - A jQuery Reading List - is out: http://www.peachpit.com/articles/article.aspx?p=1829342
Enjoy!- I currently have 2 buttons in the header of my page -
- <div data-role="header" class="b_header">
- <img src="../images/leather-header-tall-with-lettering.jpg" width="100%" />
- <a href="javascript:history.back();" data-icon="back" data-direction="reverse">Back</a>
- <a href="home.php" data-icon="home" data-theme="b" data-direction="reverse">Home</a>
- </div>
jQM generates the following
<a class="ui-btn-left ui-btn ui-btn-up-a ui-btn-icon-left ui-btn-corner-all ui-shadow" data-direction="reverse" data-icon="back" href="javascript:history.back();" data-theme="a">icon="back"
<span class="ui-btn-inner ui-btn-corner-all">
- <span class="ui-btn-text">Back</span>
- <span class="ui-icon ui-icon-back ui-icon-shadow"></span>
- </span>
- </a>
Both buttons are glued about 5px from the top of the header. I need to move them down some and two hours of tracking down various CSS hasn't yielded a solution. I do not want to do position absolute. Can anyone point me in the right direction?- I know that we have discussed it before, but I cannot find the post here or by googling for it. How do you get the width of a form dynamically loaded into a modal window?
The modal is hidden to begin with, the form is loaded and then the modal is revealed;- $('#modal').load('forms/eprice.html', function(){
- $(this).fadeIn();
- });
EDIT: I am on to something, I'll post when I finish testing.- I am exhausted today, not to include the funk that the BCS national championship put me in, so I must be either crazy or missing something. When I do the following the code works;
- $('#modalShade').live('click', function(event) {
- console.log('shade clicked');
- });
- $('#modalShade').on('click', function(event) {
- console.log('shade clicked');
- });
#modalShade is a div that is added in an append()- <div id="modalShade"></div>
EDIT: I set up a fiddle, but it works there http://jsfiddle.net/TpCHy/As part of an experiment I have run into another interesting item that I have tested and seems to work, but just because it seems to work may not mean that it is best practice. I am looping through source paths contained in links for the images and using this;
$('<img/>')
.attr('src', photoPath),
.css('display', 'none');
It does seem to have the desired effect, photos loaded into a lightweight lightbox style modal window properly center themselves in the screen. When I remove this it is hit or miss on whether the image will center properly.
When I remove the css method the images should show up in the page, right? Because they don't. The display property seems not to be needed and I cannot see the image tags in Firebug.
Normally to preload images I would do something like this;
$('<img/>').load(function(){
$('body').append('<div class="photoHolder"><img src="'+photoPath+'"/></div>');
$('.photoHolder').css('display','none');
}).attr('src', photoPath);
...which invokes a load function for each image. I can see the hidden div's in Firebug and of course if I remove the css method the images show up in the page.
The first method sure does take a lot less code and seems functional for the purposes of opening the full-sized image centered on the page in a modal window but something about it strikes me as fishy - like it wouldn't be best practice. Anyone have any insight on this?
- 03-Nov-2011 05:20 PM
- Forum: Using jQuery
I have a form in a div;- <div class="mailform">
- <form name="contact" method="post" action="inc/procMail.php">
- <label for="yourName">Your Name</label><input type="text" name="yourName" id="yourName" value="" />
- <label for="yourEmail">E-mail Address</label><input type="text" name="yourEmail" id="yourEmail" value=""/>
- <label for="yourProject">Describe Your Wreath</label><textarea name="yourProject" id="yourProject" rows="6"></textarea>
- <button name="submit" id="sendEmail" type="submit">Send the E-Mail</button>
- </form>
- </div>
I wanted to simply handle the form so I capture the form elements in a variable, replace the HTML of the div with a thank you message, then replace the html again with the form elements in the saved variable. You would think that the click function (without the live() method) would work when the HTML "re-appears" since those elements had been in the DOM already. That is not the case and I think it is often one of the ways that developers get confused about why their jQuery doesn't work.The "re-appearing" form elements are NEW to the DOM which is why the live() method is required for the form to work over and over again should the user need to submit information over and over.Here is the jQuery;- $('#sendEmail').live('click', function(e){
- /* keep the click function from performing normally */
- e.preventDefault();
- /* serialize the form data and add data to keep PHP from redirecting */
- var formData = $('form').serialize();
- var javascriptOn = '&javascript=yes';
- var varSend = formData + javascriptOn;
- /* send the info to the email script */
- $.post('inc/procMail.php',
- varSend,
- function(data){
- /* capture existing form layout */
- var currentMailForm = $('.mailform').html();
- /* set up thank you message */
- var thankYouMessage = '<div class="thankYou"><br /><br />Thank You!</div>';
- /*
- * fade the mailform out
- * replace the mailform html with thank you message
- * show the message for 1 second
- * fade the thank you message out
- * replace the thank you with the form
- * fade the form back in, available to use again
- */
- $('.mailform').fadeOut('fast', function(){
- $(this).html(thankYouMessage)
- .fadeIn()
- .delay(1000)
- .fadeOut(1550, function(){
- $(this).html(currentMailForm).fadeIn('slow');
- });
- });
- });
- });
Of course it makes total sense now that I observed the behavior. I hope that this post helps others.- Hi folks!
My new book, Applied jQuery (Peachpit Press) is now available:
http://www.peachpit.com/store/product.aspx?isbn=0321772563
From the publisher:
Applied jQuery teaches readers how to quickly start writing application interfaces. The beautifully designed book offers practical techniques and provides lots of real-world advice and guidance. The Author, Jay Blanchard, has practical experience working in the field and wastes no time getting to the instruction, taking the reader from a beginner to a proficient interface programmer by the end of the book.
From me:
The book aims to teach you how to combine HTML, CSS, jQuery and other technologies together to achieve great looking and working results easily. This is done by creating widgets to add to web sites. Each step is clearly explained and presents the information in an easy fashion.
Thanks!- 06-May-2011 01:35 PM
- Forum: jQuery Mobile
Hey folks!
One of my friends who is a book editor needs help bringing one of her authors up to speed quickly in jQuery Mobile pages in CS5.5. If you are willing to help contact me as quickly as possible via PM and I wil set up the contact.
Thanks!
Jay- I have this div that gets animated until a button click calls the jpLand() function.
function jpTakeOff(){When jpLand() finishes it should stop the animation withe the div in its final position. The animation does go to the final position and then jumps back to the middle (jpHover()) for 1 'cycle' and then jumps to its final position. I have tried various methods to stop the jump - I just haven't been able to find a way. I appreciate any guidance that anyone can give me!
$('#flyer').animate({
top: '125px',
left: '150px'
}, 1800, 'easeOutCubic', jpHover);
};
function jpHover(){
$('#flyer').animate({
top: '135px',
left: '145px'
}, 1000, function(){
$(this).animate({
top: '125px',
left: '150px'
}, 1000, jpHover);
});
};
function jpLand(){
$('#flyer').animate({
top: '50px',
left: '700px'
}, 1800, 'easeOutCubic', function(){
$(this).dequeue();
$(this).animate({
top: '500px',
left: '750px'
}, 2000, 'easeOutCubic', function(){
$(this).stop(true, false);
$(this).dequeue();
});
});
};- $('#dataForm').submit(function() {
- var formData = $(this).serialize();
- $.post('inc/insert.php', formData, function(data) {
- if(data == 1){
- alert(data);
- }
- }, 'html');
- });
In Firebug there are no response headers or response even though I can confirm that the PHP is returning the 1. The data is being inserted into the database, all seems to work as expected excepted for returning a response.
Maybe I should have chosen not to work this weekend.
Can anyone tell me the error that I am committing? I apparently cannot see the forest for the trees.- This is based on http://www.bennadel.com/blog/1244-ColdFusion-jQuery-And-AJAX-File-Upload-Demo.htm
The data never gets sent to the target iFrame (all of my tests have been FF)
HTML
form enctype="multipart/form-data" name="photoUpload" id="uploadForm" action="" method="post">
<label class="label" for="pUpload1">Select File: </label><input type="file" name="pUpload[]" id="pUpload1" value="" size="48" /><span class="error">extension must be jpg, jpeg or png</span><br />
<label class="label" for="pUpload2">Select File: </label><input type="file" name="pUpload[]" id="pUpload2" value="" size="48" /><span class="error">extension must be jpg, jpeg or png</span><br />
<label class="label" for="pUpload3">Select File: </label><input type="file" name="pUpload[]" id="pUpload3" value="" size="48" /><span class="error">extension must be jpg, jpeg or png</span><br />
<label class="label" for="pUpload4">Select File: </label><input type="file" name="pUpload[]" id="pUpload4" value="" size="48" /><span class="error">extension must be jpg, jpeg or png</span><br />
<label class="label" for="pUpload5">Select File: </label><input type="file" name="pUpload[]" id="pUpload5" value="" size="48" /><span class="error">extension must be jpg, jpeg or png</span><br />
<input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
<input type="hidden" name="formName" value="photoUpload" />
<label class="label"> </label><input type="submit" value="Upload" /><input type="reset" value="Clear" />
</form>
jQuery
$(function(){
$('#uploadForm').submit(function(){
/* create unique iFrame name */
var iframeName = ('iframeUpload' + (new Date().getTime()));
/* configure iFrame */
var iframeTemp = $('<iframe name="'+iframeName+'" src="about:blank" />');
/* set the display properties */
iframeTemp.css('display', 'none');
/* load the iFrame */
iframeTemp.load(function(){
var iframeBody = window.frames[iframeName].document.getElementsByTagName('body')[0];
var currentBody = $(iframeBody);
var currentData = currentBody.html();
alert( "Return Data:", currentData ); // no data
/*setTimeout(function() {
$('iframe[name="'+iframeName+'"').remove();
}, 100);*/
});
$('body').append(iframeTemp);
$(this).attr({
action: 'photoUpload.php',
method: 'post',
enctype: 'multipart/form-data',
encoding: 'multipart/form-data',
target: iframeName
});
return false;
});
Thanks very much in advance!!!- Some of the discussions seem to be losing their replies....or is it just me.
- ....but it has a quirk.
http://jsfiddle.net/jayblanchard/JpStH/
I threw this together for someone else on the board that I am helping, but I really haven't had time to revisit it. It is a simple set of forms that add and subtract from each other. The quirk? Enter a number into one of the fields then click back on the field and then out to lose focus again. Now look at the totals. I totally brain-farted on this. Is there an easy way to fix or do I have to refactor the code all together?- Are there any conferences scheduled for the U.S. in 2011 yet?
- 19-Jan-2011 03:00 PM
- Forum: About the jQuery Forum
based on a discussion I had with someone looking for a jQuery developer and having seen it mentioned a couple of times in other thread is it possible to get a jobs board added to the forum? I know that jquery.com uses http://jobs.jsninja.com/ - this would just be another avenue.
© 2012 jQuery Foundation
Sponsored by
and others.