Ok, so I am no jQuery expert but I am profficient enough to hang myself. Which I have done, and now I need a jQuery pro to assist me.
I have a document I am developing in which I want to take the value of the title attribute of an <area> tag and make content out of it when the tag is mousedover. That is working without a glitch. The problem I am facing is that I want users to be able to take the generated content from the mouseover and close the content if they choose.
So basically the process is "roll over an element and display a div somewhere else on the screen. Append a link to the generated div that allows for the clearing of div when clicked."
My challenge is that it seems that jQuery is not recognizing the content it generates outside of the function that generated it. I am not all that sure how to handle scope in JS, so any help would be much appreciated in figuring this out.
Just so I am clear, I can make the content show up and all of that. I just cannot, for the life of me, figure out how to tell jQuery to take an element that it has created and, when clicked, clear the div in which that created content resides.
jQuery generated content not seen by jQuery
Moderator: General Moderators
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
Re: jQuery generated content not seen by jQuery
I got it sorted out. What I ended up doing was creating the div with the elements that would eventually show on the screen and defaulted the box. Then I applied a hidden property to the CSS for it, then used jQuery to show it and replace elements as needed in the box.
This is what I have now and it is working:
And the markup:
This is what I have now and it is working:
Code: Select all
// Takes a string and makes address parts of the string function getBranch(string, piece) { // This expects something like: Corporate Branch: 20 Kieran Drive - Aboot, CA 99999 stopOne = string.indexOf(':'); string = string.replace(':', ''); stopTwo = string.indexOf(' - '); string = string.replace(' - ', ''); // Now fetch and return what is being asked for if (piece == 'branch') { return string.substring(0, stopOne); } else if (piece == 'address') { return string.substring(stopOne+1, stopTwo); } else if (piece == 'locale') { return string.substring(stopTwo, string.length); } } // Handle the replacement of values in the show box function showBranch(branchString) { $('#branch-location').removeClass('hide-location').addClass('show-location'); $('#branch-location-name').html(getBranch(branchString, 'branch')); $('#branch-location-address').html(getBranch(branchString, 'address')); $('#branch-location-locale').html(getBranch(branchString, 'locale')); } // Area map stuffs $("area").mouseover(function() { showBranch($(this).attr('title')); }); // Branch listing stuffs $('.branch-listing span').mouseover(function() { showBranch($(this).attr('title')); }); // Close the branch info box stuffs $('a.close-location').click(function() { $('#branch-location').removeClass('show-location').addClass('hide-location'); });Code: Select all
<div id="branch-location" class="hide-location">
<?php $branches->startRecord(); ?>
<h3 id="branch-location-name"><?php echo $this->escape($branches->fields['branch_name']) ?> Branch</h3>
<p id="branch-location-address"><?php echo $this->escape($branches->fields['branch_address']) ?></p>
<p id="branch-location-locale"><?php echo $this->escape($branches->fields['branch_city']) ?>, <?php echo $this->escape($branches->fields['branch_state']) ?> <?php echo $this->escape($branches->fields['branch_zip']) ?></p>
<p><a title="Close this box" class="close-location">Remove this information</a></p>
</div>