Nir Levy - Eureka: Javascript

Showing posts with label Javascript. Show all posts

Thursday, May 14, 2009

GA_googleAddAttr is not defined error

If you are using Google Ad Manager you can define custom attributes for targeting.

If you are getting a javascript error GA_googleAddAttr is not defined just make sure to put the call(s) to GA_googleAddAttr in a seperate <script> line, after the GS_googleEnableAllServices.


<script type="text/javascript">
GS_googleAddAdSenseService("ca-pub-0000000000"); 
GS_googleEnableAllServices();
</script>
<script type="text/javascript">
GA_googleAddAttr("ATTRB1", "whatever");
</script>
<script type="text/javascript">
GA_googleAddSlot("ca-pub-0000000000", "slotname_216x311");
</script>

Tuesday, September 9, 2008

Internet explorer cannot open the internet site: operation aborted

During an integration with a third party provider we were unfortunate enough to get the error

Internet explorer cannot open the internet site http://localhost: operation aborted

Yes, we have read http://support.microsoft.com/kb/927917 and did move the 3rd-party's script to be just before the </BODY> tag but to no avail.

After a long and hard effort by this provider they pointed out that while the view-source indeed looked like the script is just before </BODY> when looking at the DOM itself (they used Dominspector, I used the IE Developer Toolbar) it showed that the script was inside a <DIV> element.

As it turns out there was some code on the page that wrote an unclosed <DIV>. This made IE "fill in the blanks" and guess (wrongly) where it should place the closing </DIV> Fixing this javascript made the error go away on most pages. But not all.

I found out that the broken pages used some JQuery plugins (tooltips, jqmodal, etc.) to produce fancy decorations and effects. These scripts attached to $document.ready and did $('body').appendTo(...). This effectively added a couple of items to the DOM between the 3rd-party script and the </BODY>. I am still not quite sure why this should cause IE to choke but since we have a tight schedule we simply changed those scripts to add their stuff to some other elements. This indeed solved out problem.

They funny (or maybe sad) thing was that on Firefox we did not get any error but the page simply disappeared. Chrome worked just fine.

Wednesday, May 14, 2008

Annoying FireBug Bug

I came across an annoying bug in firebug. If there is a global variable with the same name as a local variable then firebug does not correctly show the value of the local variable in the tooltips and the watch window.

The most annoying thing is that it has been reported several months ago, but still no fix.

UPDATE: Confirmed Fixed in 1.2 on FF3.

Thursday, January 3, 2008

document.body.scrollTop in IE

It seems that document.body.scrollTop does not work in IE6 if the document's doctype is defined as

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

To find out the scrolling offset in a way that works for both DTD3 and DTD4.01 you can use

(document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop)

Same goes for scrollLeft.
See more at document.body.scrollTop in IE

Sunday, December 23, 2007

Blog Archive Carousel Widget

I've played around with blogspots' widget system and came up with a nice blog archive carousel widget. The widget is based on the standard blogger.com blog archive widget and jcarousel, a jquery plugin.
DISCLAIMER: Use at your own discretion.
How to use:

Go to your blog's Template -> Edit HTML.

Download Full Template for backup and save it somewhere you'll remember.

Go go Template -> Page elements and add a blog archive widget, save the page.

Go back to Template -> Edit HTML.

Make sure Expand Widget Templates is not checked.

Just below the <data:blog.pagetitle/> add the code below


 <!-- archive carousel -->
 <script src='http://javajavaproxy.googlepages.com/jquery-1.2.1.min.js'/>
 <script src='http://javajavaproxy.googlepages.com/jquery.jcarousel.pack.js'/>
 <script type='text/javascript'>
 jQuery(document).ready(function() {
     jQuery('#mycarousel').jcarousel({  vertical: true,  scroll: 3}); });
 </script>
 <!-- //archive carousel -->

At the end of the <skin> section, just above the ]]></b:skin>add the code below


/* new archive */
UL.posts LI {  font-size:80%;  width:170px;  padding-right:2px;  border-bottom:1px solid silver;}
.jcarousel-container { position: relative; }
.jcarousel-clip { z-index: 2; padding: 0; margin: 0; overflow: hidden; position: relative; }
.jcarousel-list { z-index: 1; overflow: hidden; position: relative; top: 0; left: 0; margin: 0; padding: 0; }
.jcarousel-item { float: left; list-style: none; width: 170px; xheight: 18px; }
.jcarousel-next { z-index: 3; display: none; }
.jcarousel-prev { z-index: 3; display: none; }
.jcarousel-skin-tango.jcarousel-container { -moz-border-radius: 10px; background: #F0F6F9; border: 1px solid #346F97; }
.jcarousel-skin-tango.jcarousel-container-vertical { width: 170px; height: 170px; padding: 40px 20px; }
.jcarousel-skin-tango .jcarousel-clip-vertical { width:  190px; height: 170px; }
.jcarousel-skin-tango .jcarousel-item { width: 170px; xheight: 18px; }
.jcarousel-skin-tango .jcarousel-item-vertical { margin-bottom: 10px; }
.jcarousel-skin-tango .jcarousel-item-placeholder { background: #fff; color: #000; }
.jcarousel-skin-tango .jcarousel-next-vertical { position: absolute; bottom: 5px; left: 99px; width: 32px; height: 32px; cursor: pointer; background: transparent url(http://javajavaproxy.googlepages.com/next-vertical.png) no-repeat 0 0; }
.jcarousel-skin-tango .jcarousel-next-vertical:hover { background-position: 0 -32px; }
.jcarousel-skin-tango .jcarousel-next-vertical:active { background-position: 0 -64px; }
.jcarousel-skin-tango .jcarousel-next-disabled-vertical,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active { cursor: default; background-position: 0 -96px; }
.jcarousel-skin-tango .jcarousel-prev-vertical { position: absolute; top: 5px; left: 99px; width: 32px; height: 32px; cursor: pointer; background: transparent url(http://javajavaproxy.googlepages.com/prev-vertical.png) no-repeat 0 0; }
.jcarousel-skin-tango .jcarousel-prev-vertical:hover { background-position: 0 -32px; }
.jcarousel-skin-tango .jcarousel-prev-vertical:active { background-position: 0 -64px; }
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active { cursor: default; background-position: 0 -96px; }

find the
<b:widget id="'BlogArchive1'" locked="'false'" title="'Blog" type="'BlogArchive'/">
and replace this line with the following code


<b:widget id='BlogArchiveCarousel' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='toggle' var='interval'>
  <b:if cond='data:interval.toggleId'>
  <b:if cond='data:interval.expclass == "expanded"'>
    <a class='toggle' expr:href='data:widget.actionUrl + "&amp;action=toggle" +       "&amp;dir=close&amp;toggle=" + data:interval.toggleId +       "&amp;toggleopen=" + data:toggleopen'>
        <span class='zippy toggle-open'>&#9660; </span>
    </a>
  <b:else/>
    <a class='toggle' expr:href='data:widget.actionUrl + "&amp;action=toggle" +         "&amp;dir=open&amp;toggle=" + data:interval.toggleId +         "&amp;toggleopen=" + data:toggleopen'>
          <span class='zippy'>
            <b:if cond='data:blog.languageDirection == "rtl"'>
              &#9668;
            <b:else/>
              &#9658;
            </b:if>
          </span>
    </a>
  </b:if>
 </b:if>
</b:includable>
<b:includable id='interval' var='intervalData'>
    <b:loop values='data:intervalData' var='i'>
     <b:if cond='data:i.data'>
       <b:include data='i.data' name='interval'/>
     </b:if>
     <b:if cond='data:i.posts'>
       <b:include data='i.posts' name='posts'/>
     </b:if>
    </b:loop>
 </b:includable>
<b:includable id='menu' var='data'>
  <select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
    <option value=''><data:title/></option>
    <b:loop values='data:data' var='i'>
      <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
    </b:loop>
  </select>
</b:includable>
<b:includable id='flat' var='data'>
  <ul>
    <b:loop values='data:data' var='i'>
      <li class='archivedate'>
        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
      </li>
    </b:loop>
  </ul>
</b:includable>
<b:includable id='posts' var='posts'>
     <b:loop values='data:posts' var='i'>
       <li>&amp;nbsp;<a expr:href='data:i.url'><data:i.title/></a></li>
     </b:loop>
 </b:includable>
<b:includable id='main'>
    <b:if cond='data:title'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <div id='ArchiveList'>
     <div expr:id='data:widget.instanceId + "_ArchiveList"'>
       <ul class='jcarousel-skin-tango posts' id='mycarousel'>
          <b:include data='data' name='interval'/>
       </ul>
     </div>
    </div>
    <b:include name='quickedit'/>
    </div>
 </b:includable>
</b:widget>

Preview the template

If all looks well, you can save your template. You might get prompted to confirm that BlogArchive1 will be deleted. Allow it (we changed it's name to "BlogArchiveCarousel")

Thursday, September 6, 2007

Avoding browser history when changing iframe src

We ran into a problem where we needed to have an iframe who's source needed to be changed dynamically by a javascript based on some user data. The issue was that Internet Explorer saved the iframe's old url in the history. The simple solution is to dynamically write the iframe with it's real src instead of having an iframe on the page and then changing it's src.

You do it like this:


var iframeHeaderCell = document.getElementById('wheretoputheiframe');
var dynamicURL = 'http://...' //your url
var iframeHeader = document.createElement('IFRAME');
iframeHeader.id = 'iframeHeader';
iframeHeader.src = dynamicURL ;
iframeHeader.width = ...;
iframeHeader.height = ...;
iframeHeader.scrolling = 'no';
iframeHeader.frameBorder = 0;
iframeHeader.align = 'center';
iframeHeader.valign='top'
iframeHeader.marginwidth = 0;
iframeHeader.marginheight = 0;
iframeHeader.hspace = 0;
iframeHeader.vspace = 0;
iframeHeaderCell.appendChild(iframeHeader);

Elementry, my dear Watson.