javascript - How to get amount of portions of a HTML element is visible in viewport -


  • is possible know whether or not html element image viewable in current viewport or visible on scroll?
    • if viewable or partially how can amount of portions visible?

i trying explain following image: enter image description here

the 2 images @ bottom partially visible within viewport , these visible if 1 scroll down little bit.

now want the aforesaid information.

in actual scenario trying popup-zoom effect on hover of image in album google image search. fine, except if images placed in described manner zoomed div displaying in half.

normal condition image in viewport: enter image description here

and partially in viewport: enter image description here

i appreciate help.

the code:

var albumdetailonready = function() {        $('.image').each(function(){         var photo = $(this);         var wrap = $(findparentbyclassname(document.getelementbyid(photo.attr('id')), 'wrap'));         var row = $(findparentbyclassname(document.getelementbyid(wrap.attr('id')), 'albumdetailrow'));         var visiblezone = $(wrap).find('.aldtlcolumn');         var pictureblock = $(visiblezone).find('.pictuteblock');                 var hiddenzone = $(wrap).find('.hiddenzone');                  $(photo).load(function(){             if(177 > $(photo).width()){                 var imgleft = ($(pictureblock).width() - $(photo).width())/2 + 'px';                 $(photo).css({'left': imgleft});             }         });          $(photo).hover(function(){                                      var y;                         if($(photo).height() > $(photo).width()) {                 y = ($(visiblezone).offset().top - 50) + 'px';                            } else {                 y = ($(visiblezone).offset().top + 50) + 'px';             }                       var x;             if($(row).find('.wrap:first').attr('id') === $(wrap).attr('id')) {                 x = ($(visiblezone).offset().left - 10) + 'px';             } else if($(row).find('.wrap:last').attr('id') === $(wrap).attr('id')) {                 x = ($(visiblezone).offset().left - 50) + 'px';             } else {                 x = ($(visiblezone).offset().left - 20) + 'px';             }              $(hiddenzone).css({                 'top': y,                 'left': x,                                 'position': 'absolute',                 'z-index': '10'             });                        $(hiddenzone).fadein('fast');         }, function(){          });          $(hiddenzone).hover(function(){},function(){             $(hiddenzone).hide().stop(true, true);         });     });    }  var findparentbyclassname = function(element, clazz) {     while (element.parentnode) {         element = element.parentnode;         if (hasclass(element, clazz)) {             return element;         }     }     return null; }  function hasclass(element, cls) {     var regex = new regexp('\\b' + cls + '\\b');     return regex.test(element.classname); }

i unable show html haven't have any, working in adf framework.

but explanation:

i have 2 zone each image: visible , hidden. both of them in wrap. on hover image showing hidden div. top , left of hidden div measured top , left of visible div condition.

jquery.viewport

very helpfull , lightweight jquery plugin makes element handy viewport displaying elements absolute position. plugin hosted on github. can see in action right there:

https://github.com/borbit/jquery.viewport


Comments

Post a Comment

Popular posts from this blog

java - Play! framework 2.0: How to display multiple image? -

i need display gallery of photos. here template: @(photos: list[photo]) @title = { <bold>gallery</bold> } @main(title,"photo"){ <ul class="thumbnails"> @for(photo <- photos) { <li class="span3"> <a href="#" class="thumbnail"> <img src="@photo.path" alt=""> </a> </li> } </ul> } and here controller method: public static result getphotos() { return ok(views.html.photo.gallery.render(photo.get())); } and here photo bean : @entity public class photo extends model { @id public long id; @required public string label; public string path; public photo(string path, string label) { this.path = path; this.label = label; } private static finder<long, photo> find = new finder<long, photo>( long.class, photo.class); public static list<phot...
Read more

gmail - Is there any documentation for read-only access to the Google Contacts API? -

i want read-only access user's google contacts. there stackoverflow member wanted this, , received following answer : yes, there is, use https://www.googleapis.com/auth/contacts.readonly scope , "view contacts". this exchange reference read-only access google contacts can find using google. simply using access token obtained attempt read usual google contacts api (i.e. https://www.google.com/m8/feeds ) fails insufficient permissions. similarly, using google contacts api on new target fails 404 errors (for example https://www.googleapis.com/auth/contacts.readonly/default/full ). is there documentation anywhere on how use api, or permissible way access google contacts api full read-write access?
Read more

php - Controller/JToolBar not working in Joomla 2.5 -

relevant code: jtoolbarhelper::custom('savecategories', 'save', '', 'save', false, false); ... <input type="hidden" name="controller" value="easyblogcontroller"> according can dig docs , own previous questions, should call savecategories() function in easyblogcontroller . i've tried setting value easyblog , easyblog.php (file name) current easyblogcontroller (class name). clicking on save button refreshes page. not redirect, echo or var_dump test code put in savecategories() function. var_dump ing jrequest::getvar('controller') , 'task' return correct values. creating controller object , using $controller->execute('task'); works. the values going depend on location of controller trying call, , have couple options here. typically there controller in base folder of component (likely components/com_easyblog) in file called controller.php , class name inside ...
Read more