Response title
This is preview!
- Screen name: pingram3541
pingram3541's Profile
6 Posts
11 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- 21-Dec-2014 09:20 PM
- Forum: Using jQuery
I have 3 elements. An update button (initially hidden), the code editor element and a preview div element.The preview div's innerhtml is updated from the codemirror "update" event. This is working great.The preview div is set contenteditable="true" and I detect keyup events using the "on" delegate method from the body since it is added to the dom by the codemirror instance after page load. The update button is revealed when the keyup event is detected on the preview div so I can pass the updated html back to my codemirror instance, because firing a "save" back to codemirror instantly removes focus from the editable preview thus making it ineffective for actual use.The issue is that the keyup event, while only supposed to be watched on the actual preview div, fires when the codemirror instance is also updated. So essentially, every time my codemirror updates (actually replaces) the html of the preview, the preview fires a keyup event??? This doesn't sound right but I have a fiddle that proves the undesired result.I even tried watching events only if the element has focus but that didn't work either.- I'm using absolute positioning to place my form labels inside my form input and select fields and I'm able to show/hide the label based on focus() and onblur() events, however, I have some undesired effects with the drop down select boxes where if you click on the label portion, the label disappears appropriately but the options are not revealed until you click it again. Is there a way via jquery to force the "drop down" event on click of the label element?I've tried $('#selectID').attr("disabled", false); and $('#selectID').prop("disabled", false); without luck.
- 06-Feb-2013 03:22 AM
- Forum: Using jQuery
I have a multi-part form which is a CMS plugin I prefer not to hack. I am using absolute positioning for the labels to appear inside (over) each input and select elements.The following code works great for focus and blur events at any stage of the form but once the first step is submitted, any returns to the previous step(s) retain the values and result in both the label and value being present.I need to find a way to hide the labels if values are present but I'm not sure how or if I can do this without modifying the plugins code that perfoms the callback.- //show hide form labels/descriptions on focus
- jQuery('#simple-form').on({
- focus: function(){
- jQuery(this).parent().siblings("label").hide();
- jQuery(this).parent().next('.gfield_description').fadeIn(500);
- },
- blur: function(){
- // hide or show the label based on whether we have values in the field
- jQuery(this).parent().siblings("label")[!this.value ? 'show' : 'hide']();
- jQuery(this).parent().next('.gfield_description').fadeOut(100);
- }},'input, select');
- 06-Jul-2012 01:45 AM
- Forum: Using jQuery
I have the following which cleans up a php array to json string, for now there is only 1 database field I am retrieving via php and passing it to my script and storing it in a variable called "stretchcontent ":- var stretchcontent = databaseOptions.data.replace(/"/g, '"'); //removes unnecessary characters
When I console.log(stretchcontent), I get the following, which is a little more than what I want to end up with- {"checkbox_field_id":true} //I only want the value true or null, not the rest
How do I end up with just the value "true"? I know I'm going to slap myself because this has got to be really easy but I just can't figure it out. I've already tried stretchcontent['checkbox_field_id'] but that results in undefined, so does stretchcontent.val().I can do this stretchcontent[0] which returns { (so it gives me a single character in that position, i.e. stretchcontent[1] results with "I simply want to always get the value between the : and the }for now I have this but shouldn't there be a simpler way to do this?- stretchcontent = stretchcontent.substring(21,
stretchcontent.indexOf('}'));
any help is greatly appreciated.- 16-Sep-2010 03:50 AM
- Forum: Using jQuery
I am working on a website that has a contact page with 2 google maps being loaded (2 offices). Google's embed code is via iframe markup. I am using a custom theme with wordpress that uses jquery to tab the content. The page loads and office 1 is visible on the first "active" tab, while the second office is only revealed by clicking on the second tab. Both maps load, however, the second map does not show the marker for the address centered on the map, and if the viewers monitor is a widescreen format, like most today are, the address marker is completely out of view until you click and drag around on the map a bit. This only happens on the second map (tab 2)So I loaded both maps on tab 1 and problem went away. My customer really likes the tab functionality though.Ok,I figured out this happens when the page loads, the second tab is given a "display:none" style. This defaults the positioning of the content being loaded within the iframe at top:0px, left:0px. So when the page initially loads, google positions the marker according to the current position of the non-displayed iframe, up and to the left. My web page is a centered layout. When you click on the second tab, the div then changes to "display:block" and the map is revealed but the marker remains where it first loaded (in the background).At first I tried to wrap the iframe and position with css but then I realize that display:none will always release it from being a child from anything, even the body, so it will always load from the browsers 0,0 x,y coordinates.So then I realized my tabs have different classes and mayvbe I can use jQuery to the rescue.This is when tab 1 is active[code]<div class="tab_content active_tab_content">...</div> <!-- this has display:block --><div class="tab_content _tab_content">...</div> <!-- this has display:none -->[/code]This is when tab 2 is active[code]<div class="tab_content">...</div> <!-- this has display:none --><div class="tab_content _tab_content active_tab_content">...</div> <!-- this has display:block -->[/code]So that got me thinking, if I could override display:none until the page loads and then set it back to display:none upon completion.Here is what I have tried but the content remains display:none even after I click the tab[code]jQuery('._tab_content').css({'display' : 'block'}); //loads 2nd map just below tab 1 content but centeredjQuery('._tab_content').css({'display' : 'none'}); //hides 2nd map so only tab 1 content showsjQuery('.active_tab_content').css({'display' : 'block'}); //should reveal 2nd map when tab2 is revealed??[/code]However, all the content on tab 2 remains hidden. I suppose line 3 doesn't override line 2?the site is safeandgentlechiropractic.com- Having some trouble with the loop and fade parts. I have a header logo that has threee png sparkle images layered just above it. I then placed an empty span over the top and sized the width/height to cover my "hover" area.What I want is when there is a hover event, the 3 sparkle png images fade in/out at different intervals and delays and to repeat this function until mouse out. (like this but not using css -webkit)What I have so far is the hover triggering the loop and the fade intervals but I can;t seem to get delay to work and I can't get the loop to stop on exiting the hover event. Also, this eventually crashes the browser if left open and continuing the loop.
- var pause = 5000;
- jQuery('#empty_span').hover(function hoverfade(){
- jQuery('#Sparkle1').fadeOut(2500);jQuery('#Sparkle1').fadeIn(2500);
- jQuery('#Sparkle2').fadeOut(600);jQuery('#Sparkle2').fadeIn(600);
- jQuery('#Sparkle3').fadeOut(1200);jQuery('#Sparkle3').fadeIn(1200);
- interval = setInterval(hoverfade, pause);
- });
- jQuery('#empty_span').dequeue;
- «Prev
- Next »
Moderate user : pingram3541
© 2013 jQuery Foundation
Sponsored by and others.
