QUERCUS BLOG
Industry Insights from Our Experts

Tag Archives: jQuery

jQuery UI elements behaving strangely? The answer may be simple …

Comments Off
Filed under JavaScript

I just was struggling with an issue on a client website for hours where a drop down list was disappearing when I moused over.  I forgot the old standby first thing to check when your jQuery UI elements are behaving oddly.

 

Check that you don’t have references to multiple jQuery and jQuery UI libraries referenced on the same page!

 

This is an issue I find can sneak up on you if you use .NET bundling and have leftover jQuery references in your script file.  It can also happen when you hard code your libraries and upgrade without deleting the older reference.  I find the jQuery library conflicts tend to be identified right away because they cause errors on your page.  jQuery UI references can be more subtle though.  So subtle that you might only get an error on one of your UI components.

 

I don’t know how many times this has happened, or how many more it will have to before I remember to check my library references before I try anything else.

CSS: The difference between display and visibility

Comments Off
Filed under JavaScript

A lot of developers struggle with understanding the difference between CSS’s visibility and display styling attributes. It’s caused headaches for users who wonder why their webpage has content jumping all over, or why there is a big empty space in the middle of their content.  If you aren’t fully familiar with the difference, you might assume the following were basically identical:

1
h1.hidden {visibility:hidden;}
1
h1.hidden {display:none;}

However, these two class definitions will do two very different things.

Read More »

jQuery Function to check if an HTML Element is Visible

Comments Off
Filed under JavaScript

An interesting issue that you might have run into when writing jQuery code for your page; is a particular element currently visible in the users browser?  I found this little bit of code today in my travels on Stack Overflow (original post here).  The function will return true if an element is ENTIRELY visible by the current browser, and returns false otherwise.  Useful for those times when you may want to be loading content or setting focus on elements that are/aren’t currently in the users view.  Here’s the code for the function:

function IsElementEntirelyVisible(element) {
    var off = $(element).offset();
    var t = off.top;
    var l = off.left;
    var h = $(element).height();
    var w = $(element).width();
    var docH = $(window).height();
    var docW = $(window).width();

    return (t >= 0 && l >= 0 && t + h <= docH && l + w <= docW);
 }
Copyright 2017 by Quercus Solutions
Login