- Screen name: jay.blanchard
jay.blanchard's Profile
20 Posts
5083 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
- 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!- $('#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.
- 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>
- 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/- 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.- 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.
- 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?- «Prev
- Next »
Moderate user : jay.blanchard
© 2013 jQuery Foundation
Sponsored by
and others.