How can I reference the script element that loaded the javascript that is currently running?

Here&#39;s the situation. I have a &quot;master&quot; script being loaded high in the page, first thing under the HEAD tag.

    &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; 
    &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
    &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;&gt;
    &lt;head&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;scripts.js&quot;&gt;&lt;/script&gt;

There is a script in &quot;scripts.js&quot; which needs to be able to do on-demand loading of other scripts. The normal method doesn&#39;t quite work for me because I need to add new scripts without referencing the HEAD tag, because the HEAD element hasn&#39;t finished rendering:

    document.getElementsByTagName(&#39;head&#39;)[0].appendChild(v);

What I want to do is reference the script element that loaded the current script so that I can then append my new dynamically loaded script tags into the DOM after it.

    &lt;script type=&quot;text/javascript&quot; src=&quot;scripts.js&quot;&gt;&lt;/script&gt;
    loaded by scripts.js--&gt;&lt;script type=&quot;text/javascript&quot; src=&quot;new_script1.js&quot;&gt;&lt;/script&gt;
    loaded by scripts.js --&gt;&lt;script type=&quot;text/javascript&quot; src=&quot;new_script2.js&quot;&gt;&lt;/script&gt;




How may I reference the script tag that loaded the currently-executing script?

I have a `&lt;div&gt;` that has many other `&lt;div&gt;`s within it, each at a different nesting level. Rather than give every child `&lt;div&gt;` an identifier, I rather just give the root `&lt;div&gt;` the identifier. Here’s an example:

    &lt;div class=&quot;a&quot; id=&quot;a5&quot;&gt;
      &lt;div class=&quot;b&quot;&gt;
        &lt;div class=&quot;c&quot;&gt;
          &lt;a class=&quot;d&quot;&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

If I write a function in jQuery to respond to class `d` and I want to find the ID for its parent, class `a`, how would I do this? 

I cannot simply do `$(&#39;.a&#39;).attr(&#39;id&#39;);`, because there are multiple class `a`s. I could find its parent’s parent’s parent’s ID but that seems of poor design, slow, and not very polymorphic (I would have to write different code for finding the ID for class `c`).

How to find a parent with a known class in jQuery?

I get some error that I can&#39;t figure out. Any clue what is wrong with my sample code?

    class B:
        def meth(self, arg):
            print arg
    
    class C(B):
        def meth(self, arg):
            super(C, self).meth(arg)
    
    print C().meth(1)

I got the sample test code from help of &#39;super&#39; built-in method. 

Here is the error:

    Traceback (most recent call last):
      File &quot;./test.py&quot;, line 10, in ?
        print C().meth(1)
      File &quot;./test.py&quot;, line 8, in meth
        super(C, self).meth(arg)
    TypeError: super() argument 1 must be type, not classobj

FYI, here is the help(super) from python itself:

    Help on class super in module __builtin__:
    
    class super(object)
     |  super(type) -&gt; unbound super object
     |  super(type, obj) -&gt; bound super object; requires isinstance(obj, type)
     |  super(type, type2) -&gt; bound super object; requires issubclass(type2, type)
     |  Typical use to call a cooperative superclass method:
     |  class C(B):
     |      def meth(self, arg):
     |          super(C, self).meth(arg)
     |



super() fails with error: TypeError &quot;argument 1 must be type, not classobj&quot; when parent does not inherit from object

I&#39;ve spent the last couple of hours trying to find a solution to my problem but it seems to be hopeless.

Basically I need to know how to call a parent method from a child class.
All the stuff that I&#39;ve tried so far ends up in either not working or over-writing the parent method.

I am using the following code to set up OOP in javascript:

    // SET UP OOP
    // surrogate constructor (empty function)
    function surrogateCtor() {}
    
    function extend(base, sub) {
    	// copy the prototype from the base to setup inheritance
    	surrogateCtor.prototype = base.prototype;
    	sub.prototype = new surrogateCtor();
    	sub.prototype.constructor = sub;
    }
    
    // parent class
    function ParentObject(name) {
    	this.name = name;
    }
    // parent&#39;s methods
    ParentObject.prototype = {
    	myMethod: function(arg) {
    		this.name = arg;
    	}
    }
    
    // child
    function ChildObject(name) {
    	// call the parent&#39;s constructor
    	ParentObject.call(this, name);
    	this.myMethod = function(arg) {
    		// HOW DO I CALL THE PARENT METHOD HERE?
    		// do stuff
    	}
    }
    
    // setup the prototype chain
    extend(ParentObject, ChildObject);

I need to call the parent&#39;s method first and then add some more stuff to it in the child class.

In most OOP languages that would be as simple as calling `parent.myMethod()`
But I really cant grasp how its done in javascript.

Any help is much appreciated, thank you! 

How to call a parent method from child class in javascript?

First of all, I&#39;m assuming this is too complex for CSS3, but if there&#39;s a solution in there somewhere, I&#39;d love to go with that instead.

The HTML is pretty straightforward.

    &lt;div class=&quot;parent&quot;&gt;
        &lt;div class=&quot;child&quot;&gt;
            Text Block 1
        &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;parent&quot;&gt;
        &lt;div class=&quot;child&quot;&gt;
            Text Block 2
        &lt;/div&gt;
    &lt;/div&gt;

The child div is set to display:none; by default, but then changes to display:block; when the mouse is hovered over the parent div. The problem is that this markup appears in several places on my site, and I only want the child to be displayed if the mouse is over it&#39;s parent, and not if the mouse is over any of the other parents (they all have the same class name and no IDs).

I&#39;ve tried using `$(this)` and `.children()` to no avail.

    $(&#39;.parent&#39;).hover(function(){
    			$(this).children(&#39;.child&#39;).css(&quot;display&quot;,&quot;block&quot;);
    		}, function() {
    			$(this).children(&#39;.child&#39;).css(&quot;display&quot;,&quot;none&quot;);
    		});

Changing the child element&#39;s CSS when the parent is hovered

I have 2 activities (A and B) in my android application and I use an intent to get from activity A to activity B. The use of parent_activity is enabled:
&lt;!-- language: xml --&gt;
     &lt;activity
            android:name=&quot;.B&quot;
            android:label=&quot;B&quot; &gt;
            &lt;meta-data
                android:name=&quot;android.support.PARENT_ACTIVITY&quot;
                android:value=&quot;com.example.app_name.A&quot; /&gt;
      &lt;/activity&gt;

I also use a theme which provides an UP-button.

So after I called activity B I can use the UP-button to get back to the activity A. The problem is that the application seems to call the *onCreate()*-function of activity A again and this is not the behaviour I need. I need activity A to look the same way like it looked before I called activity B.

Is there a way to achieve this?

### EDIT

I didn&#39;t write any code to start activity B from activity A. I think it is auto-generated by Eclipse.

Class B looks like:

        @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_b);
        getActionBar().setDisplayHomeAsUpEnabled(true);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_b, menu);
        return true;
    }

    
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                NavUtils.navigateUpFromSameTask(this);
                return true;
        }
        return super.onOptionsItemSelected(item);
    }

How can I return to a parent activity correctly?

When I want to get, for example, the 3rd level parent of the element I must write `$(&#39;#element&#39;).parent().parent().parent()` Is there a more optimal method for this?

How do I get the n-th level parent of an element in jQuery?

I have a certain element that I can select with [Selenium][1] 1.

Unfortunately I need to click the parent element to get the desired behaviour. The element I can easily locate has attribute unselectable, making it dead for clicking. How do I navigate upwards with [XPath][2]?

  [1]: http://en.wikipedia.org/wiki/Selenium_%28software%29
  [2]: http://en.wikipedia.org/wiki/XPath


Select parent element of known element in Selenium

Consider the following HTML/css code sample:

    &lt;div id=&quot;container&quot;&gt;
        &lt;div id=&quot;up&quot;&gt;Text&lt;br /&gt;Text&lt;br /&gt;Text&lt;br /&gt;&lt;/div&gt;
        &lt;div id=&quot;down&quot;&gt;Text&lt;br /&gt;Text&lt;br /&gt;Text&lt;br /&gt;&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- language: css --&gt;

    #container { width: 300px; height: 300px; border:1px solid red;}
    #up { background: green; }
    #down { background:pink;}

where I have a container `div` with two children (also here: http://jsfiddle.net/S8g4E/). The first child has a given height. How can I make the second child to occupy the &quot;free space&quot; of the container `div` without giving a specific height?

In the example, the pink `div` should occupy also the white space.

---

Similar to this question: https://stackoverflow.com/questions/7198282/how-to-make-div-occupy-remaining-height

But I don&#39;t want to give **position absolute**.



Make div (height) occupy parent remaining height

To give a simplified example, I&#39;ve got the following block repeated on the page lots of times (it&#39;s dynamically generated):

    &lt;div class=&quot;box&quot;&gt;
       &lt;div class=&quot;something1&quot;&gt;&lt;/div&gt;
       &lt;div class=&quot;something2&quot;&gt;
          &lt;a class=&quot;mylink&quot;&gt;My link&lt;/a&gt;
       &lt;/div&gt;
    &lt;/div&gt;
      
When clicked, I can get to the parent of the link with:

    $(&quot;.mylink&quot;).click(function() {
       $(this).parents(&quot;.box&quot;).fadeOut(&quot;fast&quot;);
    });

However... I need to get to the `&lt;div class=&quot;something1&quot;&gt;` of that particular parent.

Basically, can someone tell me how to refer to a higher-level sibling without being able to refer to it directly? Let&#39;s call it big brother. A direct reference to the big brother&#39;s class name would cause every instance of that element on the page to fade out - which is not the desired effect. 

I&#39;ve tried:

    parents(&quot;.box .something1&quot;) ... no luck.
    parents(&quot;.box &gt; .something1&quot;) ... no luck.
    siblings() ... no luck.

Anyone? Thanks.

jQuery: How to get to a particular child of a parent?

I was looking a lot for method to get parent process in .NET, but found only P/Invoke way.

How to get parent process in .NET in managed way

I have the following HTML:

    &lt;table id=&quot;MwDataList&quot; class=&quot;data&quot; width=&quot;100%&quot; cellspacing=&quot;10px&quot;&gt;
        ....

        &lt;td class=&quot;centerText&quot; style=&quot;height: 56px;&quot;&gt;
            &lt;input id=&quot;selectRadioButton&quot; type=&quot;radio&quot; name=&quot;selectRadioGroup&quot;&gt;
        &lt;/td&gt;

        ....
    &lt;/table&gt;

In other words I have a table with few rows, in each row in the last cell I have a radio button.  
How can I get *parent* row for selected radio button?

What I have tried:

    function getSelectedRowGuid() {
        var row = $(&quot;#MwDataList &gt; input:radio[@name=selectRadioGroup]:checked :parent tr&quot;);
        var guid = GetRowGuid(row);
        return guid;
    }

But it seems like this selector is incorrect.

jQuery: get parent tr for selected radio button

My question is if there is a way, without using JavaScript, to cause child divs to extend to the borders of their parent, without exceeding those borders, when you cannot know beforehand the size of the parent div?

Below is sample markup/styles demonstrating my issue. If you load it into a browser you will see that `#two` and `#three` both extend outside their parent, `#one`, and cause scrollbars to appear.  

My issue is not so much the scrollbars, but that I do not know how to tell the child divs to occupy the width or height remaining to them, rather than the full height or width of the parent.

    &lt;html&gt;
        &lt;head&gt;
            &lt;style&gt;
                html, body {width:100%;height:100%;margin:0;padding:0;}
                .border {border:1px solid black;}
                .margin { margin:5px;}
                #one {width:100%;height:100%;}
                #two {width:100%;height:50px;}
                #three {width:100px;height:100%;}
            &lt;/style&gt;
        &lt;/head&gt;
    	&lt;body&gt;
	    	&lt;div id=&quot;one&quot; class=&quot;border&quot;&gt;
			    &lt;div id=&quot;two&quot; class=&quot;border margin&quot;&gt;&lt;/div&gt;
    			&lt;div id=&quot;three&quot; class=&quot;border margin&quot;&gt;&lt;/div&gt;
	    	&lt;/div&gt;
    	&lt;/body&gt;
    &lt;/html&gt;

How to make child divs always fit inside parent div?

I have some list item tags in my jsp. Each list item has some elements inside, including a link (&quot;a&quot; tag) called delete. All that I want is to delete the entire list item when I click the link.

Here is the structure of my code:

   

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    $(&quot;a&quot;).click(function(event) {
      event.preventDefault();
      $(this).parent(&#39;.li&#39;).remove();
    });

&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;li id=&quot;191&quot; class=&quot;li&quot;&gt;
      &lt;div class=&quot;text&quot;&gt;Some text&lt;/div&gt;
      &lt;h4&gt;&lt;a href=&quot;URL&quot;&gt;Text&lt;/a&gt;&lt;/h4&gt;
      &lt;div class=&quot;details&quot;&gt;
        &lt;img src=&quot;URL_image.jpg&quot;&gt;
        &lt;span class=&quot;author&quot;&gt;Some info&lt;/span&gt;
        &lt;div class=&quot;info&quot;&gt; Text
          &lt;div class=&quot;msg-modification&quot; display=&quot;inline&quot; align=&quot;right&quot;&gt;
            &lt;a name=&quot;delete&quot; id=&quot;191&quot; href=&quot;#&quot;&gt;Delete&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;

&lt;!-- end snippet --&gt;

But this doesn&#39;t work. I&#39;m new at jQuery, so I tried some things, like for example:

    $(this).remove();

This works, it deletes the link when clicked.
		  
    $(&quot;#221&quot;).remove();

This works, it deletes the indicated list item, but it&#39;s not &quot;dynamic&quot;.

Can someone give me a tip?



How to delete parent element using jQuery

I have a jquery class within a normal class in javascript. Is it possible to access variables in the scope of the parent class from a callback function in the jquery class?  

A simple example of what I mean is shown below

    var simpleClass = function () {    
        this.status = &quot;pending&quot;;
        this.target = jqueryObject;
        this.updateStatus = function() {
            this.target.fadeOut(&quot;fast&quot;,function () {
               this.status = &quot;complete&quot;; //this needs to update the parent class 
            });
        };
    };

Now in the above example,  the callback function tries to access the scope of the jquery object. is there any way to access the status variable in the parent class?

js: accessing scope of parent class

I don&#39;t know if there is an issue, but I was wondering why the `overflow:hidden` does not function on `fixed` parent/children element.

Here&#39;s an example:

**CSS and HTML:**

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    .parent{
      position:fixed;
      overflow:hidden;
      width:300px;
      height:300px;
      background:#555;
    }
    .children{
      position:fixed;
      top:200px;
      left:200px;
      width:150px;
      height:150px;
      background:#333;
    }

&lt;!-- language: lang-html --&gt;


    &lt;div class=&quot;parent&quot;&gt;
      &lt;div class=&quot;children&quot;&gt;
      &lt;/div&gt;
    &lt;/div&gt;


&lt;!-- end snippet --&gt;

**Live demo: [jsFiddle](http://jsfiddle.net/kirkas/DBHUv/)**

parent &amp; child with position fixed, parent overflow:hidden bug

Need help with a simple problem! which has the following criteria:

1) click on images link in iframe changes Parent page, click on another iframe image link changes Parent to another page (see below).

It may sound simple but I&#39;m being googled it for days now and looked over many forums. 
Code can be in html css or js, but please keep any answers simple as possible and post a full working example to work as I&#39;m new to coding or recode the test site: http://www.howiepotter.com/parent.html

![enter image description here][1]


  [1]: http://i.stack.imgur.com/DqDds.jpg

Change Parent url from iframe

In Win32 programming, what is the difference between a window&#39;s parent and a window&#39;s owner? I thought I had it figured out, then I came across this code:

    SetWindowLong(handle, GWL_HWNDPARENT, foo);

This actually sets the window&#39;s owner, not the parent - despite the GWL_HWNDPARENT being used. Are the terms parent/owner interchangeable, or is there actually a difference?

Win32 window Owner vs window Parent?

Is there a way to select a DIV in the parent window using jQuery?

For example:

Main page contains this,

    &lt;div id=&quot;testdiv&quot;&gt;&lt;/div&gt;
Popup page has a form with some options and an &#39;Apply&#39; button. When the user clicks apply it affects the style attribute on the main page.

Something along the logic of,

    parent.$(&quot;#testdiv&quot;).attr(&quot;style&quot;, content from form);


jQuery select element in parent window

I search a way to access to the parent, parent function of a class without to call the parent... Hmmm, that sound a bit weird explanation so i will give an example: 

    class myclass
    {
      public function test() { return &#39;level 1&#39;; }
    }
    class myclass2 extends myclass
    {
      public function test() { return parent::test() . &#39;-level 2&#39;; }
    }
    class myclass3 extends myclass2
    {
      public function test() { return parent::test() . &#39;-level 3&#39;; }
    }
    $example = new myclass3();
    echo $example-&gt;test(); // should display &quot;level 1-level 2-level 3&quot;

I would like to display &quot;level 1-level 3&quot; then doing something like that:

    class myclass3 extends myclass2
    {
      public function test() { return parent::parent::test() . &#39;-level 3&#39;; }
    }


Do you have an idea how I can do this? (I am not allow to edit myclass and myclass2, they are part of a framework...)

parent::parent in PHP

I want to get an Element&#39;s parent which has an specified tag name.

Sample code:

    &lt;table&gt;
       &lt;tr&gt;
          &lt;td&gt;
              &lt;input type=&#39;button&#39; id=&#39;myId&#39; /&gt;
          &lt;/td&gt;
       &lt;/tr&gt;
    &lt;/table&gt;

Now i want something like this:

    $(&#39;#myId&#39;).specificParent(&#39;table&#39;); //returns NEAREST parent of myId Element which table is it&#39;s tagname.



How to get parent element by specified tag name using jquery?

I want to find the nth parent element of an given element and access the attributes of parent.

    &lt;div id=&#39;parent1&#39;&gt;&lt;br/&gt;
      &lt;div id=&#39;parent2&#39;&gt;&lt;br/&gt;
           &lt;span&gt;&lt;p id=&#39;element1&#39;&gt;Test&lt;/p&gt;&lt;/span&gt;&lt;br/&gt;
      &lt;/div&gt;&lt;br/&gt;
      &lt;div id=&#39;parent3&#39;&gt;&lt;br/&gt;
           &lt;span&gt;&lt;p id=&#39;element2&#39;&gt;Test&lt;/p&gt;&lt;/span&gt;&lt;br/&gt;
      &lt;/div&gt;&lt;br/&gt;
    &lt;/div&gt;

I want to access the 3rd parent element of element1 without using 
     
    $(&#39;#element1&#39;).parent().parent().parent()

Any help would be appreciated

All Parent Solutions on Gang of Coders

Total of 22 Parent Solutions