I have a list of objects in DOM, which is longer than screen height area.  I need to detect on-screen visible objects only to make something like timeline tree-view.  (something like on the picture below):    My DOM looks like this:  &lt;!-- elements visibility on screen to be DETECTED --&gt; &lt;div id="elements"&gt;     &lt;div id="elem-1"&gt;Lorem ipsum&lt;/div&gt;     &lt;div id="elem-2"&gt;Lorem ipsum&lt;/div&gt;     &lt;div id="elem-3"&gt;Lorem ipsum&lt;/div&gt;     &lt;div id="elem-4"&gt;Lorem ipsum&lt;/div&gt;     &lt;div id="elem-5"&gt;Lorem ipsum&lt;/div&gt;     &lt;div id="elem-6"&gt;Lorem ipsum&lt;/div&gt;     &lt;div id="elem-7"&gt;Lorem ipsum&lt;/div&gt;     &lt;div id="elem-8"&gt;Lorem ipsum&lt;/div&gt; &lt;/div&gt;   &lt;!--elements visibility on screen to be AFFECTED  --&gt; &lt;ul id="timeline"&gt;     &lt;li view-id="elem-1"&gt;Elem-1&lt;/li&gt;     &lt;li view-id="elem-2"&gt;Elem-2&lt;/li&gt;     &lt;li view-id="elem-3" class="active"&gt;Elem-3&lt;/li&gt;     &lt;li view-id="elem-4" class="active"&gt;Elem-4&lt;/li&gt;     &lt;li view-id="elem-5" class="active"&gt;Elem-5&lt;/li&gt;     &lt;li view-id="elem-6" class="active"&gt;Elem-6&lt;/li&gt;     &lt;li view-id="elem-7"&gt;Elem-7&lt;/li&gt;     &lt;li view-id="elem-8"&gt;Elem-8&lt;/li&gt; &lt;/ul&gt;   My goal is to detect IDs' of on-screen visible elements from #elements container and assign active class to corresponding elements in #timeline container.  I need to do this process on Scroll event.  Any ideas how to achieve this?
5173
Is there an efficient way to tell if a DOM element (in an HTML document) is currently visible (appears in the viewport)?  (The question refers to Firefox.)
104040
&lt;div aria-hidden="false" aura:id="newClientSectionId" role="dialog" class="slds-modal slds-modal--large slds-fade-in-open slds-hide"       style="width: 60%; margin: auto; "&gt;     &lt;div class="slds-m-bottom--xx-large"&gt;&lt;/div&gt;     &lt;div class="slds-modal__container"&gt;         &lt;div class="slds-modal__header"&gt;             &lt;button class="slds-button slds-button--icon-inverse slds-modal__close" onclick="{!c.showModalBox}"&gt;                 &lt;span class="slds-assistive-text"&gt;Close&lt;/span&gt;             &lt;/button&gt;             &lt;h2 class="slds-text-heading--medium"&gt;Create Opportunity&lt;/h2&gt;         &lt;/div&gt;         &lt;div class="slds-modal__content slds-p-around--medium"&gt;             &lt;div class="slds-m-top--xx-large"&gt;&lt;/div&gt;         &lt;/div&gt;         &lt;div class="slds-modal__footer"&gt; &lt;button class="slds-button slds-button--neutral" onclick="{!c.showModalBox}"&gt;Cancel&lt;/button&gt;             &lt;ui:button class="slds-button slds-button--brand" press="{!c.saveOpportunity}" label="Save" /&gt;         &lt;/div&gt;     &lt;/div&gt; &lt;/div&gt;  &lt;div class="slds-backdrop slds-backdrop--open slds-hide" id="backGroundSectionId"&gt;&lt;/div&gt;   Controller  //for showing modal $A.util.removeClass(component.find("newClientSectionId"), "slds-hide"); $A.util.removeClass(component.find("backGroundSectionId"), "slds-hide");   CSS  .THIS.slds-hide {    display:none; }
104576
I'm just trying to get a simple show/hide experiment running using the code below. It runs fine when the code is outside the SLDS grid. However when I place the div inside a grid column, the console log "test" is displayed but the div remains visible. Am I missing something?? ..Thanks  Component  &lt;aura:component &gt;         &lt;lightning:button label="Toggle" onclick="{!c.doInit}"/&gt;      &lt;div class="slds-grid"&gt;         &lt;div class="slds-col"&gt;             &lt;div class="slds-box"&gt;                 &lt;div aura:id="detailDiv" &gt;                     &lt;c:ShowHideCmpFilter Message="Detail"/&gt;                    &lt;/div&gt;             &lt;/div&gt;         &lt;/div&gt;             &lt;/div&gt;  &lt;aura:component &gt;   CSS  .THIS.toggle {     display: none; }   Controller  ({     doInit : function(component, event, helper) {         console.log("test");                 var toggleText = component.find("detailDiv");                 $A.util.toggleClass(toggleText, "toggle");             } })
64167
I need to debug a web application that uses jQuery to do some fairly complex and messy  manipulation. At one point, some of the events that were bound to particular elements, are not fired and simply stop working.  If I had a capability to edit the application source, I would drill down and add a bunch of  console.log() statements and comment/uncomment pieces of code to try to pinpoint the problem. But let's assume I cannot edit the application code and need to work entirely in Firefox using Firebug or similar tools.  Firebug is very good at letting me navigate and manipulate the DOM. So far, though, I have not been able to figure out how to do event debugging with Firebug. Specifically, I just want to see a list of event handlers bound to a particular element at a given time (using Firebug JavaScript breakpoints to trace the changes). But either Firebug does not have the capability to see bound events, or I'm too dumb to find it. :-)  Any recommendations or ideas? Ideally, I would just like to see and edit events bound to elements, similarly to how I can edit DOM today.
54585
I've been working on a pretty complicated component, and I've had all kinds of trouble simply trying to identify which element is currently being used. After all sorts of experiments, I found a really nifty property on event, the "path" attribute. It seems to be a list of all elements that the event has gone through, and actually includes the data I'm looking for. However, I don't see this in the documentation anywhere, so I want to know if this attribute is reliable.  Here's some demo code:  &lt;aura:application extends="force:slds"&gt;     &lt;aura:attribute name="items" type="Integer[]" default="[1,2,3]" /&gt;     &lt;aura:attribute name="currentIndex" type="Integer" /&gt;     &lt;aura:iteration items="{!v.items}" var="item" indexVar="index"&gt;         &lt;div data-value="{!index}" &gt;             &lt;lightning:input onfocus="{!c.focused}" name="demo" label="Text" /&gt;         &lt;/div&gt;     &lt;/aura:iteration&gt;     &lt;lightning:input disabled="true" readOnly="true" type="number"                      value="{!v.currentIndex}" label="Last Focused Item" /&gt; &lt;/aura:application&gt;     ({     focused: function(component, event, helper) {         var index = event.path.reduce(             (a,c) =&gt; c &amp;&amp; c.dataset &amp;&amp; c.dataset.value !== undefined?              c.dataset.value: a, null);         component.set("v.currentIndex", parseInt(index));     } })     Does anyone know where I can find the documentation for this, or otherwise figure out if this supported behavior? I'd rather not use a feature that will be patched out of existence later, and it would finally solve  about how to actually use a supported method that doesn't involve using a class, style, or name attribute, which should ideally be used for their intended purpose.
50286
I have a funciton that I am currently using to show a hidden div.a_type  How can I modify this code so that instead of fading in the hidden div, I can add the new div to the DOM   jQuery(function(){   // Add Answer      jQuery(".add_answer").click(function(){       if(count >= "4"){         alert('Only 4 Answers Allowed');         }else{       var count = $(this).attr("alt");       count++;       $(this).parents('div:first').find('.a_type_'+count+'').fadeIn();       $(this).attr("alt", count);     }      });   });     Ok, now that i have this sorted out, i have one more question,  I have another function that removes the inserted div's if a button is clicked. It's not working now that the additional divs are not loaded into the dom on pageload. How can i trigger the function to remove these now?  jQuery(function(){   // Hide Answer  jQuery(".destroy_answer").click(function(){   $(this).parents("div:first").fadeOut(function (){ $(this).remove() });    var count = $(this).parents('div:first').parents('div:first').find('.add_answer').attr("alt");    count--;    $(this).parents('div:first').parents('div:first').find('.add_answer').attr("alt", count);  });    });
64174
Is there a way to stop blender from rendering hidden objects (that do not show in the rendered view)?
1115
Would it be possible to screen capture or output node-tree network like really big, bigger than actual monitor screen. If possible, a way to capture the node-tree boundary.  So far, I only screen shot limited to my monitor.  Thanks.
21250
I have a page where some event listeners are attached to input boxes and select boxes. Is there a way to find out which event listeners are observing a particular DOM node and for what event?  Events are attached using:    Event.observe; DOM's addEventListener; As element attribute element.onclick.
35404
I want to find the first span element after class counter, in code something like this:  &lt;div class="counter"&gt;&lt;/div&gt; &lt;p&gt;&lt;/p&gt; &lt;span&gt;&lt;/span&gt;   It seems like the next() function only finds the immediate next element, so something like this:  $(".counter").next("span")   Won't work. The way I have been using is a bit lengthy and I was wondering if there was a shorter way, it is this:  $(".counter").nextAll("span").eq(0)   I think the closest() method in jQuery 3 will do the trick, but I am using 1.2.6 -- is there a better way to do this (am I just using next() wrong?)
42682
I'm using jQuery and I want to check the existence of an element in my page. I have written following code, but it's not working:  if($("#btext" + i) != null) {     //alert($("#btext" + i).text());     $("#btext" + i).text("Branch " + i); }   How do I check the existence of the element?
89265
What is Animation Nodes addon used for? Where can I find more information about it?
17344
Is there a way to hide the selected object's origin in the 3D view? By default all unselected object's origins do not show, but even after deselecting everything with A A it still shows the active object's origin. I know the Only Render checkbox will hide all the origins, but in this case it hides too much.
67490
I have a header page with links to all the visualforce page as tabs.I need to highlight the tab on select of it.      &lt;apex:page title="{!$Label.site.site_login}" showHeader="false" sidebar="false"       standardStylesheets="false"&gt; &lt;apex:includeScript value="{!URLFOR($Resource.jQuery, '/js/jquery-1.4.2.min.js')}"  /&gt;   &lt;apex:includeScript value="{!URLFOR($Resource.jQuery, '/js/jquery-ui-1.8.6.custom.min.js')}"  /&gt; &lt;apex:stylesheet value="{!URLFOR($Resource.jQuery, '/css/ui-lightness/jquery-ui-1.8.6.custom.css')}"  /&gt;          &lt;html lang="en"&gt;  &lt;head&gt;   &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"&gt;  $(function()  {   $( "#tabs" ).tabs();   });  &lt;/script&gt;   &lt;style&gt;   #tabs .ui-tabs-active    { background: red; }  &lt;/style&gt;     &lt;/head&gt;      &lt;body&gt;         &lt;nav class="navbar navbar-static-top navbar-inverse" role="navigation"&gt;             &lt;div class="container"&gt;                 &lt;div class="navbar-header"&gt;                     &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"&gt;                         &lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;                         &lt;span class="icon-bar"&gt;&lt;/span&gt;                      &lt;/button&gt;                     &lt;a class="navbar-brand" style="line-height: 0px; padding: 10px 15px;" href="index.php.html"&gt;                         &lt;img height="30px" src="{!URLFOR($Resource.Resources, 'img/logo.png ')}" /&gt;                     &lt;/a&gt;                 &lt;/div&gt;                 &lt;div class="collapse navbar-collapse navbar-ex1-collapse" id="tabs"&gt;                     &lt;ul class="nav navbar-nav"&gt;                         &lt;li id="Home"&gt;                             &lt;apex:outputLink value="{!$Page.Home}"&gt;Home&lt;/apex:outputLink&gt;                         &lt;/li&gt;                         &lt;li id="chatter"&gt;                             &lt;apex:outputLink value="{!$Page.Chatter}"&gt;Chatter&lt;/apex:outputLink&gt;                         &lt;/li&gt;                         &lt;li id="page3"&gt;                             &lt;apex:outputLink value="{!$Page.page3}"&gt;Room&lt;/apex:outputLink&gt;                         &lt;/li&gt;                         &lt;li id="page4"&gt;                             &lt;apex:outputLink value="{!$Page.page4}"&gt;Page4&lt;/apex:outputLink&gt;                         &lt;/li&gt;                     &lt;/ul&gt;                 &lt;/div&gt;             &lt;/div&gt;         &lt;/nav&gt;     &lt;/body&gt;      &lt;/html&gt; &lt;/apex:page&gt;
51787
I want to be able to determine what group number is currently being processed to that I can treat the output of the first group differently than subsequent groups. Unlike rows, I do not see a way to find the current count of groups or loops through the view such that I could, for instance, do something like the following (i.e., classing group content by group iteration) - &lt;div class=&quot;item-list&quot;&gt;   &lt;h3 class=&quot;group-1&quot;&gt;{{ title }}&lt;/h3&gt;   &lt;ul class=&quot;group-1&quot;&gt;     {% for row in rows %}       &lt;li{{ row.attributes }}&gt;         {{- row.content -}}       &lt;/li&gt;     {% endfor %}   &lt;/ul&gt; &lt;/div&gt; &lt;div class=&quot;item-list&quot;&gt;   &lt;h3 class=&quot;group-2&quot;&gt;{{ title }}&lt;/h3&gt;   &lt;ul class=&quot;group-2&quot;&gt;     {% for row in rows %}       &lt;li{{ row.attributes }}&gt;         {{- row.content -}}       &lt;/li&gt;     {% endfor %}   &lt;/ul&gt; &lt;/div&gt; ... &lt;div class=&quot;item-list&quot;&gt;   &lt;h3 class=&quot;group-n&quot;&gt;{{ title }}&lt;/h3&gt;   &lt;ul class=&quot;group-n&quot;&gt;     {% for row in rows %}       &lt;li{{ row.attributes }}&gt;         {{- row.content -}}       &lt;/li&gt;     {% endfor %}   &lt;/ul&gt; &lt;/div&gt;
80790
If I have a list like this:  &lt;ul id="mylist"&gt;     &lt;li id="list-item1"&gt;text 1&lt;/li&gt;     &lt;li id="list-item2"&gt;text 2&lt;/li&gt;     &lt;li id="list-item3"&gt;text 3&lt;/li&gt;     &lt;li id="list-item4"&gt;text 4&lt;/li&gt; &lt;/ul&gt;   What's the easiest way to re-arrange the DOM nodes to my preference? (This needs to happen automatically when the page loads, the list-order preference is gained from a cookie)  E.g.  &lt;ul id="mylist"&gt;     &lt;li id="list-item3"&gt;text 3&lt;/li&gt;     &lt;li id="list-item4"&gt;text 4&lt;/li&gt;     &lt;li id="list-item2"&gt;text 2&lt;/li&gt;     &lt;li id="list-item1"&gt;text 1&lt;/li&gt; &lt;/ul&gt;
107230
I need to do some custom theming on the search block in Drupal 7.  Specifically, I need to add a class to the submit button that makes it invisible and removes it from the content flow.  So:  &lt;div class="form-actions form-wrapper" id="edit-actions"&gt;   &lt;input type="submit" id="edit-submit" name="op" value="Search" class="form-submit"&gt; &lt;/div&gt;   Becomes...  &lt;div class="form-actions form-wrapper element-invisible" id="edit-actions"&gt;   &lt;input type="submit" id="edit-submit" name="op" value="Search" class="form-submit"&gt; &lt;/div&gt;   I added element-invisible to the edit-actions div element.  However, I can't figure out how to do this.  What's the best practice for doing this sort of thing?