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.
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.
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?
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 centered
jQuery('._tab_content').css({'display' : 'none'}); //hides 2nd map so only tab 1 content shows
jQuery('.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?
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.