Adding class to an element if it is out of viewport

I am working with a navigation dropdown and it has several dropdowns options. So I want to add a class move-left if it goes out of the viewport edge.

I have tried getBoundingClientRect(); but it gives me following error :

Uncaught TypeError: el.getBoundingClientRect is not a function

My browser is chrome latest version.

My code is:

var isElemInViewport = function(el){ var rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } var el = $('ul.nav-menu li ul li ul'); $('ul.nav-menu li ul li').hover(function(){ if(!isElemInViewport(el)){ alert('o ya') } }, function(){ if(!isElemInViewport(el)){ alert('no more') } })

-------------Problems Reply------------

You are trying to access a method that belongs to native DOM elements, through a jQuery object.

So, you need to change this line:

var el = $('ul.nav-menu li ul li ul');

To this:

// The jQuery object, at property '0', contains the native DOM element
// you want. If you were to get multiple matches for your selector,
// they'll be numbered in order:
// $('selector')[0], $('selector')[1], $('selector')[2], ...

var el = $('ul.nav-menu li ul li ul')[0];

Category:javascript Views:2 Time:2018-08-09

Related post

  • Can I remove just the last added class from an element with jQuery 2010-11-11

    Hey guys, the question pretty much asks itself... however, for more clarity: I have an element called "chuckPalahniuk" and it has classes named "choke", "fightclub" and "haunted". How could I get it so when I click on the "chuckPalahniuk" element, it

  • adding class to an element via jQuery .live or .delegate 2011-07-03

    hi everyone: I'm trying to add a class via jquery .live to an ajaxed element using .load but with mouse action depending events I cant find the right solution. Any ideas? Thanks in advance. --------------Solutions------------- .live() and .delegate()

  • JQuery adding class to cloned element 2012-01-04

    This is my script: $('.addprop').click(function() { $('#clone').clone().insertAfter('.addprop'); }) I need to add a class to the new element that is being created. Is it possible? --------------Solutions------------- Yes, it is: $('.addprop').click(f

  • adding class to an element selected with :contains 2011-08-05

    i tried to do this : var selec = $("li:Contains('"+ $("#main").val() +"')"); selec.eq(1).addClass("virtual"); And my css : .virtual { backgroung:red; color:white; } And html looks something like this <input type="text" id="main" /> <div id="

  • Adding lots of CSS classes to HTML elements 2009-07-30

    I have a messageboard and one of my users has written a greasemonkey script to stylize various elements within the page. He did a great job with it but in order to make his job easier, the first step in his script is to parse the current page and add

  • Adding a class to an element in quirksmode 2010-03-04

    I try to add a class to a td-element using javascript with the internet explorer 8 in quirks-mode. That seems to work, because I can see the added class when I view the source, but my css doens't affect it so nothing visually changes at all. I simply

  • jquery validation plugin: class "error" is added to the input element 2011-03-30

    I have this code: <head> <script> $(document).ready(function(){ $('form').validate({ rules: { 'input_name': { email: true} }, messages: { 'input_name': "Is not an email" } }) }); </script> </head> <body> <form id="cla

  • adding class to element that the mouse is on 2011-06-15

    I need a function that will add a class to a element that the mouse is on now. this has to change when the mouse moves, every were it goes that element should have the extra class. I know how to get the x and y of a element using this var mouseX = 0;

  • jQuery remove class when adding it to other elements 2012-01-31

    I have 6 images in a line, the first one when the page loads has a class applied to it which using CSS3 applies web transformations. When the other images are hovered over the same class is applied to these, then removed when mouseout. The final thin

  • Adding class to element with matching custom data attribute 2014-07-28

    I have a list of elements with Custom Data Attributes. I need to be able to add a class to another element on click when the data attribute of a clicked element matches the data attribute of that element. HTML <div data-my-element="value1">clic

  • How can I add a hover class to an element? 2009-05-03

    In my CSS I have: li.sort:hover {color: #F00;} All my LI elements under the sort class function properly when the DOM is ready. If I create a new LI element (using mootools el.addClass(classname)) I can set the base class, but can't figure out how to

  • how to append a css class to an element by javascript? 2009-05-29

    suppose id is known, so the element can be specified by document.getElementById(element_id); but I don't know if there is a built-in function that can be used to append a css class to that element? --------------Solutions------------- var element = d

  • Get class value of element having multiple classes assigned using jquery 2009-10-21

    I need to add and delete class on an element having multiple classes: This is the html: <div class="heading"> more html code here </div> I want to add class and get value of the added class. Can I do this? If not, how can a new class be a

  • How can I apply a CSS class to an element with a given id, without modifying the element? 2010-02-08

    I have a page that looks like: <div id="header">...</div><div id="navigation">...</div> similar for body and footer. I'd like to use a grid system to style the page, all of which seem to rely on giving the divs mentioned a cla

  • Add class to an element 2010-03-02

    I try to write these code to make grid view through CSS:( jsbin ) var tables = document.getElementsByClassName('tableData'); var rows = tables[0].getElementsByTagName('tr'); for(var i=1; i<rows.length; i +=2) { alert(rows[i]); rows[i].className =

  • Creating a javascript function to switch classes between list elements depending on which one has been clicked 2010-05-12

    I am trying to create a function to change the class on a series of 5 list elements depending on which has been clicked. The goal is to change the style of the element depending on which one is the current element. I had tried something like this: fu

  • Can we edit an exsiting class of an element using jquery? 2010-07-05

    I want to alter styles of an existing class of an element. Can we do this in Jquery? If not, what can be the alternate approach ? --------------Solutions------------- I don't believe it's possible to edit a class using jQuery, and you shouldn't have

  • Adding class functionality via composition 2010-08-12

    Suppose we have an abstract class Element from which classes Triangle and Quadrilateral are derived from. Suppose yet that these classes are used in conjunction with interpolation methods that depend on the shape of the element. So, basically we crea

  • How do I selected a table row based on a dynamically added class name? 2010-09-01

    I have a table where I select a row by clicking it. On click, the class selected is added to the row. Here is the code: // Change row background color on click jQuery('#rowList tr').live("click", function() { jQuery(this).closest("tr").siblings().rem

  • Adding class is not working 2011-05-21

    Hi i am creating a table dynamically in jquery. What i am doing over here is also adding class which is "draggable ui-widget" but it is not affecting/working on my table. var tab_title = $tab_title_input.val() || 'Tab '+tab_counter; //alert(tab_title

  • jQuery - add classes to separate elements in order? 2011-06-17

    I have classes with different values in them and i want to add those classes to set elements in order. This is supposed to be just an explanation of what im looking for: <div class="These">Lorem ipsum</div> <div class="These">Lorem

  • How to append class to an element in prototype javascript framework? 2011-07-05

    I have this Prototype code at the top of my page <script type="text/javascript"> if( window.location == 'http://example.com/about-us.html' ) { $('about-us').addClassName('active'); } </script> and this html afer this javascript code <u

  • Problem with adding class to every children node 2011-07-27

    I have problem with adding class to every list element. This is example html: <ul id="main_list"> <li>item1</li> <li>item2<li> <ul> And my jquery code which i don't understand why it don't work like i expect: $(fun

  • JQuery different methods for adding classes 2011-09-13

    I have seen a few different methods for adding classes to dynamically created elements using JQuery. I'm most familiar with $("<div />").addClass("class1 class2"); however I have seen a lot of $("<div />", { class : "class1 class2" }); Wh

  • Apply a random class to every element specified 2011-10-07

    I am trying to add a random class to even < li > element within my #container div Here is my code: $( "#container li" ).each( $().ready(function() { $("#container li:random").addClass("one"); $("#container li:random").addClass("two"); $("#conta

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.079 (s). 11 q(s)