- Screen name: jay.blanchard
jay.blanchard's Profile
34 Posts
5736 Responses
37
Followers
Show:
- Expanded view
- List view
Private Message
- A step-by-step tutorial for those new to jQuery and wanting to use AJAX in their projects. Includes valuable information about troubleshooting using the console and understanding the request / response.
http://jayblanchard.net/basics_of_jquery_ajax.html
- 17-Sep-2014 02:30 PM
- Forum: Using jQuery
Here is a link to the full question with code and markup -
http://stackoverflow.com/q/25896831/1011527
The upshot is that hide() and show() add style attributes to elements that override classes applied to those elements. It's puzzled me (and others) for a couple of days. Using removeAttr() doesn't solve the problem correctly.
- 08-May-2014 09:08 AM
- Forum: Using jQuery
Yesterday when exploring a class toggling snippet I found that the following will work -
HTML -- <div class="smallImage">
- <img src="http://placehold.it/150x150" />
- </div>
jQuery -- $('.smallImage').click(function() {
- $(this).toggleClass('smallImage bigImage');
- });
Here it is in action - http://jsfiddle.net/jayblanchard/5j8aJ/4/
Here is where I got into a bit of confusion: it would seem to me that when you click once, causing the element to lose the smallImage class that any subsequent click would not work (and that your selector would have to be different) because you're clicking on an element that no longer has that class.
However, I understand that all selectors are performed at run-time, so those elements retain their characteristics. I would just like to understand the mechanics of this a little more so I have been looking at jQuery's source. Nothing has jumped out at me yet - can someone point me in the right direction?
- Is anyone aware of a jQuery plugin that will replicate the shimmering text effect (seen here - http://css-tricks.com/slide-to-unlock)? I need to be able to do this cross-browser (the webkit stuff fails in IE). TIA!
- 03-Jun-2013 08:03 AM
- Forum: Using jQuery
http://jsfiddle.net/jayblanchard/vgUjp/
I have some html that looks like this (this actually goes much further)-- <ul class="sideNav">
- <li>
- <div></div>
- <a data-page="PAGE_100100007">Significance</a>
- </li>
- <li>
- <div></div>
- <a data-page="PAGE_100100008">Relevance</a>
- </li>
- <li data-sub="yes">
- <div class="arrow-right"></div>
- <a data-page="PAGE_100100009">Instruction</a>
- <ul class="subNav">
- <li>
- <a data-page="PAGE_100100010">Overview</a>
- </li>
- <li>
- <a data-page="PAGE_100100011">1a - LOC</a>
- </li>
- </ul>
- </li>
- </ul>
And my jQuery is this -- $('body').on('click', '#previous', function(){
- var thisPage = $('#current').attr('data-page');
- var aIndex = $('.sideNav a[data-page="'+thisPage+'"]', this).index($('.sideNav a'));
- var newPage = $('.sideNav a').eq(aIndex - 1).attr('data-page');
- $('#current').html(thisPage + ' ' + aIndex + ' ' + newPage);
- $('#current').attr('data-page', newPage);
- });
I have been looking at this for too long, but I want to get the index of the anchor element with a specific data-page within the group of anchor elements that my be interspersed throughout the page. I have tried several different combinations but I mus be looking at it wrong. Can anyone spot the error or point me in the right direction?
- Does anyone know of a plugin that will allow you to include articles on a website that performs in the way that the include widget does on Facebook or LinkedIn?
1. Paste a URL into text area.
2. Widget retrieves synopsis and images.
3. Thumbnail for included article can be selected.
4. Preview of article with link is posted.
I have been doing some searching and I have some idea of how I would write this, but I don't want to re-invent the wheel. Thanks in advance!- 16-Apr-2013 05:46 PM
- Forum: Using jQuery
...either that or I am being an idiot since it is close to the end of the day. Here is the code -- $('.additionalInfo li').click(function() {
- var thisPopup = $(this).data('id');
- $('.popup').not('.popup[data-info="' + thisPopup + '"]').fadeOut(250, function(){
- $('.popup[data-info="' + thisPopup + '"]').fadeIn(350);
- });
- });
Simple, right?
The HTML is also simple -- <ul class="additionalInfo">
- <li class="tbPurpleGradient" data-id="association">Associated With</li>
- <li class="tbPurpleGradient" data-id="etiology">Etiologies</li>
- <li class="tbPurpleGradient" data-id="symptoms">Symptoms</li>
- <li class="tbPurpleGradient" data-id="compensatory">Compensatory Mechanism</li>
- </ul>
And ...- <div class="popup" data-info="etiology">Has multiple etiologies....</div>
- <div class="popup" data-info="symptoms">Causes symptoms of....</div>
- <div class="popup" data-info="compensatory">The body attempts to....</div>
- <div class="popup" data-info="association">
- <ul>
- <li>Is associated with....</li>
- <li>Is a progressive....</li>
- </ul>
- </div>
Essentially when one of the list items is clicked its associated div should fade out and the new one should fade in. If I add a delay equal to the fade out just before the fade in everything works as expected. If I don't, the fade out does not complete before the callback occurs.
What am I missing here?- When posting a problem try to describe it as thoroughly as you can. Just saying "this doesn't work" with no detail means that your question will take more time to answer. Here are a couple of helpful resources for learning how to post a good question -
http://www.whathaveyoutried.com
http://www.catb.org/esr/faqs/smart-questions.html
Feel free to ask general discussions too, these suggestions are for when you're having an actual issue with your code and cannot figure out why it doesn't work.
Keep in mind that your question may have been answered here before - search the forum and you may find your answers.
From @Godsbest
Another area that causes many questions/posts to be skipped over by developers who would have otherwise answered the question/contributed to the discussion, is when users insist on including server-side code in their markup. Unless server-side code is absolutely necessary, you're better off viewing your page via a browser and posting the page source (generated HTML).jQuery (JavaScript) does not really care what server-side technology you use - it does not get to see it. The web server (applications) converts the server-side code into HTML and presents that to the browser.Whenever server-side code is posted here, the developer has to do the work of the web server (which most of us are not ready/willing to do) and then, before they can do what needs to be done. Please keep that in mind next time you ask a question.Please ..... help us help you ..... if the PHP/ASP.NET/JSP ... you include in your markup does not add value to your question, do not include it!!
From @kbwood.au
Better yet, provide a link to a page that demonstrates the problem, preferably on a site like JSFiddle so that we can make changes and test things out. This process also helps you to focus on the actual problem without lots of extraneous markup and code.
If you do include code in your question, please format it using the WYSIWYG code button so that it is visible on the page.
More:
Folks here are unlikely to download zipped files of your projects and go through all of your code for many reasons, including the potential for viruses and malware. Please try to isolate the relevant code and copy it into your post.- When posting a problem try to describe it as thoroughly as you can. Just saying "this doesn't work" with no detail means that your question will take more time to answer. Here are a couple of helpful resources for learning how to post a good question -
http://www.whathaveyoutried.com
http://www.catb.org/esr/faqs/smart-questions.html
Feel free to ask general discussions too, these suggestions are for when you're having an actual issue with your code and cannot figure out why it doesn't work.
Keep in mind that your question may have been answered here before - search the forum and you may find your answers.- 14-Dec-2012 07:59 AM
- Forum: Getting Started
My newest book, the jQuery & jQuery UI Visual Quickstart Guide is now available!jQuery Visual QuickStart Guide will teach readers how to make the most of jQuery using task-based, step-by-step explanations of core tools and tasks, with plenty of helpful screen shots. It's also crammed with examples. This edition includes a free hour-long HD video and eBook so in addition to reading about how to use the tool, students can watch it in action. They can also download digital versions of this book to load on the mobile device of their choice so that they can continue learning whenever and wherever they are. If you're just starting your journey with jQuery this is the book for you.
In addition, if you 'Like' the Facebook between now and December 16th, 2012 you'll be entered into a chance to win an autographed copy of the book and a Starbucks gift card (because coffee and code go together!).
https://www.facebook.com/pages/JQuery-jQueryUI-Visual-Quickstart-Guide/396939113693065- Have a look at his site that I developed for an agency.
http://oakinteractive.co/
I have used the localScroll plugin to scroll between the sections. They asked me to add another section and for whatever reason the plugin seems to be ignored. Click "Elixir of the Day" Then click the "Submit". Instead of scrolling to the section it just jumps and the hash appears in the URL. On none of the other links does this happen.
Here is the code used to invoke the scrolling with the new section highlighted:- $('#navContainer, #navShindigs, #navTidbits, #navBarnburners, #navLegend, #shindigs, #recipeForm').localScroll({
- target: '#contentViewport',
- easing: 'easeOutSine'
- });
Here is the link to the section:- <a href="#recipeForm"><img id="submit_elixir" src="grfx/submit.png" /></a>
And here is the section:- <div id="recipeForm">
- <section id="section_recipe">
- <fieldset>
- <h2>Submit a Recipe</h2>
- <form id="mailform" 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="yourMessage">Your Recipe</label><textarea name="yourMessage" id="yourMessage" rows="3"></textarea>
- <input type="image" name="Send Recipe" alt="Send Recipe" class="sendEmail" src="grfx/submit_button.png" />
- </form>
- </fieldset>
- </section>
- </div>
Every other bit of jQuery code on the site works including scrolling for all of the other elements. It is just this added section which seems to be ignored.
Can anyone shed any light or provide any insight? I have never had a problem with the scrollTo or localScroll plugins ever before.- $('#levelCity').click(function() {
- /* presenter drawer */
- if(false == $('body').hasClass('levelCity')) {
- if(true == $('#left_nav').hasClass('open')) {
- $('#left_nav').animate({
- left: '-210px'
- }, 1000, function() {
- $('#left_nav').find('ul').remove();
- $('#left_nav').load('nav_city.html', function(){
- $(this).animate({
- left: '0px'
- }, 1000);
- });
- });
- } else {
- $('#left_nav').find('ul').remove();
- $('#left_nav').load('nav_city.html');
- }
- }
- /* main body */
- if(false == $('body').hasClass('levelCity')) {
- $('#main').find('div').fadeOut(1000, function() {
- $('#city, #landmarks, .landmark').fadeIn(2000); <-- #landmarks fades in and then fades out and back in again after everything else here runs
- });
- }
- /* top drawer */
- if(false == $('body').hasClass('levelCity')) {
- $('#top_nav').animate({
- top: '-100px'
- }, 1000, function() {
- var cityText = '<h1 class="GlyphaOblique hshadow">Touch<span class="arrow"><img src="images/actionArrowRed.png" /></span>to learn more</h1>';
- $(this).html(cityText);
- $(this).animate({
- top: '0px'
- }, 1000);
- });
- }
- /* waves */
- if(false == $('body').hasClass('levelCity')) {
- $('#waves').animate({
- bottom: '-100px'
- }, 1000);
- }
- /* set the body class */
- $('body').removeClass().addClass('levelCity');
- });
It is pretty simple, see the comments in red above. None of the other items in the selector exhibit the same behavior. I have been looking for a solution on the web for about an hour including using .stop() but nothing seems to work. The HTML is nothing special and does not even have any content in it at this point. This is for an internal website so nothing is available online.Its a head scratcher for me right now. If you can see the errors of my ways please let me know! Thanks in advance!- 25-Jun-2012 05:39 PM
- Forum: Using jQuery
Does anyone know of a plugin that will allow me to have a separate image for each layer but uses a tilling mechanism similar to Google Maps?Basically we have a large image that we want to be able to place on a touch enabled flat screen and we'd like the user to be able to double-click the screen or perform the pinch / pull gesture to 'zoom' between screens. Because the images are so large (hi-res and dimensionally - we're using 60" touch screens) we want to tile them just as is done on Google Maps. I can easily create the tiles and I am well aware of the coordinate systems used to keep those straight.Most maps or images have every last detail on one image and then are sliced for use in the Google Maps API. We actually want to use a different image at each layer. Does anyone know of anything like that?- 18-Jun-2012 09:19 AM
- Forum: jQuery Mobile
I have the following very simple code snippet which is loaded from a separate file into one jQuery Mobile page in a single page (each page stands alone) site that I am building:
$(document).bind('pageinit', function(){
$('select[name="state_choice"]').change(function(){
var thisState = $(this).val();
var indexState = '#' + thisState;
$('.state').hide();
$(indexState).show();
});
})It was working but now it only works when I reload the page. I was examining the page load with Firebug and it was not consistently loading the jQuery file because this link was not showing up until reload.
<script src="inc/jquery/belmont.custom.js"></script>
Typically the console will show when a new page is called in jQuery mobile but I did find that this particular page did not always show up in the console log when a link to it was clicked. I have tested on a desktop simulator (Dashcode's iOS Simulator), in desktop browsers (FF and Safari) and on my iPhone all with the same results.
Has anyone ever seen this behavior? How can I make sure that this works consistently?
I have added console.log(indexState) to the function and this does not fire consistently either. Do I have to load the custom file into every page, or can it just be loaded into the pages that require it.
- 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.- «Prev
- Next »
Moderate user : jay.blanchard
© 2013 jQuery Foundation
Sponsored by
and others.