Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Placement Issues [SOLVED]

Unfortunately, I'm afraid I must start this one off with rather long prelude.

We have a site that our University uses called OwlNet, built using a Jenzabar system (?). From what I can tell, it is one of those systems where the majority of the site is built using the actual interface, and as such, much of the build code is generated by the system itself. The site also leverages themes, a bit like WordPress.

We have two themes; one is a default system theme, "Accord", and the other is a custom theme, "Woods Way", which is our active theme.

We recently upgraded our instance of the software, and noticed something odd...

The site contains pages, which themselves contain "portlets", which are just containers for information:

<div class="portlet">

Each of these portlets contains a section that acts as the header:

<div class="pHead">

When working properly, this section contains the title of the portlet, and will display a "Help" icon, and an "Edit" icon when the user mouses over it. The full structure is something like this:

<div class="portlet">
    <div class="pHead">
        <h3><a title="Title of Portlet">Title of Portlet</a></h3>
        <div style="display: none;">
            <a class="help"><img alt="help" src=
            "/ICS/ui/common/images/help.gif"></a> <a class="pSection"><img alt=
            "Edit Content" src=
            "/ICS/ui/common/images/PortletImages/Icons/edit.gif"></a>
        </div>
    </div><!-- End Div pHead -->
    <div class="pContent">
        <!-- And all of the informational content goes in here -->
    </div><!-- End Div pContent -->
</div><!-- End Div portlet -->

When we upgraded the software, however, we noticed that the help icon was visible by default, and the pencil icon was missing altogether. Nothing had been changed to the Woods Way theme-code, so we couldn't figure out what was causing it. What's more, the Accord theme works just fine.

After some tooling around, I changed this code in the Style.css specific to the Woods Way Theme:

 div[id*=divEditOrAdd] {
 display: block; /* Used to be "display: none;"*/
 float: right;
 margin: -2px 12px 0 0;
 padding: 0;
 width: 16px;
}

Now, the pencil icon is visible by default, and functions properly, but it doesn't show up in the correct location. Rather than showing up next to the Help icon in pHead, it shows up at the top-right corner of "pContent".

I assume that it uses JavaScript to place the icons, and have included the JS file in full below. The peculiar thing is that, despite running the JS file for each theme through a formatter (so they would be formatted exactly the same), and then through a diff-checker, which allows one to compare side-by-side, I have noticed no difference between the two files.

Just the same, I believe it is the function csPortletHeaders that is of concern. The JS is as follows:

/* Just a note, this is the JS file from the Woods Way theme.
It just says "Accord" because it was literally just copied over
from Accord when Woods Way was first built, by the former developer. */

/*
JICS THEME SCRIPT - Accord
Copyright Jenzabar
*/

// Execute on DOM Ready
$(function(){
  csTabs();
  $('body').supersleight();
  csSBCurrent();
  csSiteManager();
  csPortletHeaders();
  //csSlideshow();
}); 

// Execute on Window Resize
$(window).resize(function(){
  csTabOverflow();
});


/* =Do not edit below this line
-----------------------------------------*/
function csSiteManager() {
  if ($('#sideBar').children().length==0){
    $('#sideBar').css('display','none');
  }
}

function csBannerHeight() {
  newHeight = $('#masthead').height() + $('#headerTabs ul').height();
  $('#masthead').css('height',newHeight + 'px');
}

function csSBCurrent() {
  if ($('li.currentPage ul').length>0){ 
    $('li.currentPage').prepend('<a id="xpndPrtlts" href="javascript:void(0);" title="View Portlets on this page">view</a>');
    $('#xpndPrtlts').click(function(){
      $('li.currentPage ul').toggle();
      if($('li.currentPage ul').is(':visible')){
        $(this).addClass('expanded');
      }else{
       $(this).removeClass('expanded');      
    }
    });   
    //If portlet is clicked, expand portlet list
    $('li.currentPage ul li a').each(function(){
      if (location.href.indexOf($(this).attr('href'),0)>-1){
        $('li.currentPage ul').show();
        $(this).addClass('selected');
      }else{
        $('li.currentPage ul').hide().removeClass('expanded');
      }
    });

  }
}


function csFeature() {
// First portlet full-width in the 'Feature' location if custom content
  if (($('.pColumn1 .portlet:eq(0) .wysiwygtext').length>0)&&($('.pColumn2 .portlet:eq(0) .wysiwygtext').length==0)){$('.pColumn1 .portlet:eq(0)').appendTo($('#feature'));}
}


function csSlideshow() {
// Start a slideshow of content if there is more than one child element
    $('.slideshow').each(function(){
    $(this).css('display','block');
        if ($(this).children().length>1) {
      $('head').append('<script src="ui/common/scripts/cycle.js"></script>');
      $(this).cycle();
    }    
    });

}

function csAjax(module){
// Load content from link asynchronously
  if (module.attr('href').indexOf('http')>-1){
    ajaxFrame = module.replaceWith('<iframe class="ajaxFrame" src="'+module.attr('href')+'" width='+module.attr('title')+' frameborder="0" />');
  }else{
   module.parent().load(module.attr('href'));
   module.remove();
  }
}

function csIframe(){
    o = document.getElementsByTagName('iframe');
    for(i=0;i<o.length;i++){
        if (/\bautoHeight\b/.test(o[i].className)){
            csHeight(o[i]);
            csEvent(o[i],'load', csIframe);
        }
    }
}

function csHeight(e){
    if(e.contentDocument){
        e.height = e.contentDocument.body.offsetHeight + 35;
    } else {
        e.height = e.contentWindow.document.body.scrollHeight;
    }
}

function csEvent(obj, evType, fn){
    if(obj.addEventListener)
    {
    obj.addEventListener("on"+evType, fn,false);
    return true;
    } else if (obj.attachEvent){
    var r = obj.attachEvent("on"+evType, fn);
    return r;
    } else {
    return false;
    }
}


function csPortletHeaders() {
  $('.pHead div').hide();
  // Show Portlet Head icons on mouseover
  $(".pHead").mouseover(function(){$("div",this).show();}).mouseout(function(){$("div",this).hide();});
  // Move edit icon to Portlet Head
  $("div[id*=divEditOrAdd]").each(function(){$(this).appendTo($(this).closest('.portlet').find('.pHead div'));$(this).css({'display':'block','margin':'0 32px 0 0'})});
}


if (document.getElementById && document.createTextNode){
 csEvent(window,'load', csIframe);  
}

jQuery.fn.supersleight = function(settings) {
    settings = jQuery.extend({
        imgs: true,
        backgrounds: true,
        shim: 'images/blank.gif',
        apply_positioning: true
    }, settings);

    return this.each(function(){
        if (jQuery.browser.msie && parseInt(jQuery.browser.version, 10) < 7 && parseInt(jQuery.browser.version, 10) > 4) {
            jQuery(this).find('*').andSelf().each(function(i,obj) {
                var self = jQuery(obj);
                // background pngs
                if (settings.backgrounds && self.css('background-image').match(/\.png/i) !== null) {
                    var bg = self.css('background-image');
                    var src = bg.substring(5,bg.length-2);
                    var mode = (self.css('background-repeat') == 'no-repeat' ? 'crop' : 'scale');
                    var styles = {
                        'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')",
                        'background-image': 'url('+settings.shim+')'
                    };
                    self.css(styles);
                };
                // image elements
                if (settings.imgs && self.is('img[src$=png]')){
                    var styles = {
                        'width': self.width() + 'px',
                        'height': self.height() + 'px',
                        'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + self.attr('src') + "', sizingMethod='scale')"
                    };
                    self.css(styles).attr('src', settings.shim);
                };
                // apply position to 'active' elements
                if (settings.apply_positioning && self.is('a, input') && (self.css('position') === '' || self.css('position') == 'static')){
                    self.css('position', 'relative');
                };
            });
        };
    });
};

function csTabs() {
  $('#headerTabs').append("<a id='more'>more</a>");
  $('#more').css('display','none');
  $('#more').append("<ul id='moreList'></ul>");
  $('#more').mouseenter(function(){showMore();});
  $('#more').mouseleave(function(){hideMore();});
  csTabOverflow();
}

function showMore(){
  $('#more').addClass('moreSelected');
  $('#moreList').css('display','block');
}

function hideMore(){
  if (!$('#moreList .selected').length>0){ $('#more').removeClass('moreSelected');}
  $('#moreList').css('display','none');
}

function csTabOverflow()
{
  try
  {
    //Move all tabs to tab container
    $('#moreList li').each(function(){
      $('#headerTabs ul').append($(this));
    });

    $('#moreList').empty();

    //Check width and move as needed
    tabTotalWidth = 0;
    $('#headerTabs ul li').each(function(){
      tabTotalWidth += $(this).width();
      if (tabTotalWidth>($('#headerTabs').width()-110))
      {
        $('#more').css('display','block');
        $('#more').css('margin-left',$('#headerTabs').width()-100);/*---------------Changed from -60 to move more tab closer to other tabs----------------------*/ 
        $('#moreList').append($(this));
      }      
    });
    if ($('#moreList .selected').length>0){ $('#more').addClass('moreSelected');}else{ $('#more').removeClass('moreSelected');}
  }catch(e){}
}

Any insight or suggestions would be appreciated. I apologize for the length of this post.

Thanks!

---[UPDATE]---

I got it to work! Apparently there was something different in the JS file, but I have no idea what it could be.

I changed the CSS back to where the pencil icon was hidden by default, and placed an older version of the JS file into the Woods Way Theme Folder, and now it works perfectly...

Thanks!

---[UPDATE II]---

Apparently, there is also a setting for each page that says:

"[ check-box ] Show feature title bar in addition to page title bar.”

Checking this check-box seems to place the pencil icon in the appropriate place on some of the pages that weren't corrected by the earlier update.

I still have no idea what is going on, but it is doing what it needs to at least. :)

Thanks!

Would it be possible to get a link for the website so that I can view it?

Chyno Deluxe , I could send you the link, but I couldn't let you log into it. It's a site for student and employee access, and you have to be given an account by H.R. to be able to view or edit.

If you wanted to try, though, the version that we are working on is as follows:

https://wwujicstest/ics

It may also give you a security warning. Without permissions, though, and without being logged in, I don't think it will even display the pencil icon that it's supposed to, so it might be futile in and of itself.

Thanks, though! :)

1 Answer

No worries. Without being able to view the site and only going of what you have provided I would recommend you messing around with these few things below.

ORIGINAL

<div class="pHead">
        <h3><a title="Title of Portlet">Title of Portlet</a></h3>
        <div style="display: none;">
            <a class="help"><img alt="help" src=
            "/ICS/ui/common/images/help.gif"></a> <a class="pSection"><img alt=
            "Edit Content" src=
            "/ICS/ui/common/images/PortletImages/Icons/edit.gif"></a>
        </div>
    </div><!-- End Div pHead -->

The code you provided shows spaces that could potentially be an issue to how they are displayed. but since the icons are showing its not a big concern but still it would be best to remove the spaces for better readability. View Below

CHANGES

<div class="pHead">
  <h3><a title="Title of Portlet">Title of Portlet</a></h3>
  <div style="display: none;">
    <a class="help">
      <img alt="help" src="/ICS/ui/common/images/help.gif">
    </a>
    <a class="pSection">
      <img alt="Edit Content" src="/ICS/ui/common/images/PortletImages/Icons/edit.gif">
    </a>
  </div>
</div><!-- End Div pHead -->

Next I would look at the Javascript event that is connected with this section of the site.

function csPortletHeaders() {
  $('.pHead div').hide();
  // Show Portlet Head icons on mouseover
  $(".pHead").mouseover(function(){
    $("div",this).show();
  }).mouseout(function(){
    $("div",this).hide();
  });
  // Move edit icon to Portlet Head
  $("div[id*=divEditOrAdd]").each(function(){
    $(this).appendTo($(this).closest('.portlet').find('.pHead div'));
    $(this).css({'display':'block','margin':'0 32px 0 0'}) //THE MARGIN HERE COULD CAUSE ABNORMAL PLACEMENT AS IT IS ADDING TO THE RIGHT MARGIN
  });
}

And Finally, I would mess around with the CSS you provided. If the elements are to be hidden until the mouse is over the parent element then I would leave the display back to its original state of none since the javascript will change it to block when hovered.

 div[id*=divEditOrAdd] {
 display: none; 
 float: right;
 margin: -2px 12px 0 0; /*I WOULD SEE IF THESE PROPERTIES COULD CAUSE SOME ISSUES*/
 padding: 0;
 width: 16px;
}

Without being able to see whats really going on this would be my starting points to figuring out what could be the problem. I hope this helps.

Thanks for all this. I got it to work, but I'm not exactly sure just how... ^^; I'll have to dig through some more and see if I can figure out what all is going on.

My guess is that something got stripped-out when I ran the JS through the formatter and diff-checker to compare with the JS from the base-theme (Accord).

Our Database Admin found a copy of the JS from before the transfer. I plugged it in in place of the JS file that was there, and went back to the CSS and changed it back to "display:none". Now it works perfectly. :)

Thanks for the assistance, though! :)

I am glad you were able to figure it out.