http://reference.sitepoint.com/html/a/target

&gt; &quot;_top&quot;
&gt; 
&gt; loads content in the top-level frameset (in effect, the whole browser
&gt; window), no matter how many nested levels down the current frame is
&gt; located

    &lt;a href=&quot;page&quot; target=&quot;_top&quot;&gt;Replace parent url!&lt;/a&gt;

Change your link from this:

    &lt;a href=&quot;link-here.html&quot;&gt;

To this:

    &lt;a href=&quot;#&quot; onclick=&quot;top.window.location.href=&#39;yourURL&#39;;&quot;&gt;

If you want, you could just put the `onclick` handler on the image instead and get rid of the anchor.

Note that this is not the correct place to have javascript (handlers should be bound from a .js file, not in markup), but i get the feeling you are looking for a surgical answer and don&#39;t care much for best practices.

edit: as Victor Nicollet pointed out, this will throw a security exception if your iframe and parent page do not share domains. see http://en.wikipedia.org/wiki/Same_origin_policy

In my case I used the following
```
if (window.self !== window.top) { // checking if it is an iframe
  window.parent.location.href = websiteUrl;
} else {
  window.location.href = websiteUrl;
}
```

In case @biziclop decides to delete his answer as he seems to be threatening to do in the comments, here&#39;s his answer again which is very useful:

http://reference.sitepoint.com/html/a/target

&gt; &quot;_top&quot;
&gt; 
&gt; loads content in the top-level frameset (in effect, the whole browser
&gt; window), no matter how many nested levels down the current frame is
&gt; located

    &lt;a href=&quot;page&quot; target=&quot;_top&quot;&gt;Replace parent url!&lt;/a&gt;

In the code:

    y = 7
    x = y
    x = 8

Now, `y` will be 7 and x will be 8. But actually I wan to change `y`. Can I assign the reference of `y` and do that?

For example, in C++ the same thing can be achieved as:

&lt;!-- language: lang-c++ --&gt;

    int y = 8;
    int &amp;x = y;
    x = 9;

Now both `y` &amp; `x` will be 9


How to create a reference to a variable in python?

What is the file `packages/repositories.config`? Should it be kept under version control?

What is the Nuget repositories.config file for?

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

Need help with a simple problem! which has the following criteria:
<ol>
<li>click on images link in iframe changes Parent page, click on another iframe image link changes Parent to another page (see below).</li>
</ol>
It may sound simple but I'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'm new to coding or recode the test site: <a href="http://www.howiepotter.com/parent.html" target="_blank" rel="noopener noreferrer">http://www.howiepotter.com/parent.html</a>
<img src="http://i.stack.imgur.com/DqDds.jpg" alt="enter image description here">

The following code alerts `ls exist` in IE7:

    if(window.localStorage) {
    	alert(&#39;ls exists&#39;);
    } else {
    	alert(&#39;ls does not exist&#39;);
    }

IE7 doesn&#39;t really support local storage but this still alerts it does. Perhaps this is because I am using IE9 in IE7 browser and document modes using the IE9 developer tool. Or maybe this is just the wrong way to test if LS is supported. What is the right way?

Also I don&#39;t want to use Modernizr since I am using only a few HTML5 features and loading a large script isn&#39;t worth it just to detect support for those few things.



How to detect if browser supports HTML5 Local Storage

I have tried using the code below but it only display results in Chrome and Mozilla not working in IE6. 

    &lt;div id=&quot;example&quot;&gt;&lt;/div&gt;
    
    &lt;script type=&quot;text/javascript&quot;&gt;
    
    txt = &quot;&lt;p&gt;Browser CodeName: &quot; + navigator.appCodeName + &quot;&lt;/p&gt;&quot;;
    txt+= &quot;&lt;p&gt;Browser Name: &quot; + navigator.appName + &quot;&lt;/p&gt;&quot;;
    txt+= &quot;&lt;p&gt;Browser Version: &quot; + navigator.appVersion + &quot;&lt;/p&gt;&quot;;
    txt+= &quot;&lt;p&gt;Cookies Enabled: &quot; + navigator.cookieEnabled + &quot;&lt;/p&gt;&quot;;
    txt+= &quot;&lt;p&gt;Platform: &quot; + navigator.platform + &quot;&lt;/p&gt;&quot;;
    txt+= &quot;&lt;p&gt;User-agent header: &quot; + navigator.userAgent + &quot;&lt;/p&gt;&quot;;
    
    document.getElementById(&quot;example&quot;).innerHTML=txt;
    
    &lt;/script&gt;

Output:

    Browser CodeName: Mozilla
    
    Browser Name: Netscape
    
    Browser Version: 5.0 (Windows)
    
    Cookies Enabled: true
    
    Platform: Win32
    
    User-agent header: Mozilla/5.0 (Windows NT 5.1; rv:12.0) Gecko/20100101 Firefox/12.0

I need to get the version &quot;Firefox/12.0&quot; only.


How to detect my browser version and operating system using JavaScript?

I have multiple Node applications (build on Express framework).

Now I have placed them like this -

- `/var/www/app1`
- `/var/www/app2`
- `/var/www/app3`

Now I want to run these 3 apps on the same port (say 8080). Is that possible ?

One thing to note is that, Each app has common routes like these -

- `app.get(&#39;/&#39;, func...);`
- `app.get(&#39;/about&#39;, func...);`
- `app.post(&#39;/foo&#39;, func...);`
- `app.post(&#39;/bar&#39;, func...);`

Basically I want to do it like you can do with Apache/PHP setup.

So with a LAMP stack when you have -

- `/var/www/app1`
- `/var/www/app2`
- `/var/www/app3`

You can easily access them as different apps from -

- `localhost/app1`
- `localhost/app2`
- `localhost/app3`

Running multiple Node (Express) apps on same port

I was looking to using the [Twitter Bootstrap Modal windows][1] as a partial view.  However, I do not really think that it was designed to be used in this fashion; it seems like it was meant to be used in a fairly static fashion.  Nevertheless, I think it&#39;d be cool to be able to use it as a partial view.

So for example, let&#39;s say I have a list of Games.  Upon clicking on a link for a given game, I&#39;d like to request data from the server and then display information about that game in a modal window &quot;over the top of&quot; the present page.

I&#39;ve done a little bit of research and found [this post](https://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal) which is similar but not quite the same.  

Has anyone tried this with success or failure?  Anyone have something on jsFiddle or some source they&#39;d be willing to share?

Thanks for your help.


  [1]: http://twitter.github.com/bootstrap/javascript.html

Using Bootstrap Modal window as PartialView

I&#39;m using a service which uses incorrect JSON format (no double quotes around properties). So I need to send

`{ name: &quot;John Smith&quot; }` instead of `{ &quot;name&quot;: &quot;John Smith&quot; }`

This format cannot be changed as this is not my service.

Anyone know of a stringify routing to format an JavaScript object like above?

JSON.stringify without quotes on properties?

I use the following code to dynamically create an iframe.

    var iframe_jquery = $(&quot;&lt;iframe&gt;&quot;)
    	.addClass(&quot;foo&quot;)
    	.appendTo(container); // container is a jQuery object containing a &lt;div&gt; which already exists

Then, I want to access its contentWindow, but it&#39;s null:

    var iframe = iframe_jquery.get(0);
    if (iframe){ // iFrame exists
        console.log(iframe.contentWindow); // Prints &quot;null&quot;
        var doc = iframe.contentWindow.document; // NullpointerException
    }

So I thought: &quot;Maybe the iframe isn&#39;t ready yet?&quot; So I tried:

    iframe_jquery.ready(function(){
        var iframe = iframe_jquery.get(0);
        console.log(iframe.contentWindow); // Prints &quot;null&quot;
        var doc = iframe.contentWindow.document; // NullpointerException
    });

Same result.

**What&#39;s wrong?**

Why is iframe.contentWindow == null?

I am trying to check whether an iframe has loaded after the user clicks a button.

I have


    $(&#39;#MainPopupIframe&#39;).load(function(){
        console.log(&#39;load the iframe&#39;)
        //the console won&#39;t show anything even if the iframe is loaded.
    })

HTML

    &lt;button id=&#39;click&#39;&gt;click me&lt;/button&gt;
    
    //the iframe is created after the user clicks the button.
    &lt;iframe id=&#39;MainPopupIframe&#39; src=&#39;http://...&#39; /&gt;...&lt;/iframe&gt;

Any suggestions?

By the way, my iframe is created dynamically. It doesn’t load with the initial page load.

How can I detect whether an iframe is loaded?

I cannot get `z-index` working on a `iframe` that contains a pdf file with IE8. It works with Google Chrome.

Example ([JSFiddle](http://jsfiddle.net/5J6zL/9/)):

**HTML**

    &lt;div id=&quot;div-text&quot;&gt;
          &lt;div id=&quot;shouldBeOnTop&quot;&gt;my text that should be on top&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id=&quot;div-frame&quot;&gt;
        &lt;iframe src=&quot;http://legallo1.free.fr/french/CV_JLG.pdf&quot; width=&quot;200&quot; height=&quot;200&quot;/&gt;
    &lt;/div&gt;

**CSS**

&lt;!-- language: lang-css --&gt;

    #div-text{
        position:relative;
        left:210px;
        top:20px
    }
    
    #shouldBeOnTop{
        position:relative;
        right:60px;
        background-color:red;
        width:100px;
        z-index:2;
    }
    
    #div-frame{
        position:relative;
         z-index:1;
    }

z-index does not work in Internet Explorer with pdf in iframe

I understand that you can set HTTP request headers very easily when making AJAX calls in JavaScript.

However is it also possible to set custom HTTP request headers when inserting an iframe into a page via script?

    &lt;iframe src=&quot;someURL&quot;&gt; &lt;!-- is there any place to set headers in this? --&gt;

Is it possible to add Request Headers to an iframe src request?

I&#39;m writing a plugin for TinyMCE and have a problem with detecting click events inside an iframe. 

From my search I&#39;ve come up with this:

Loading iframe:
   
    &lt;iframe src=&#39;resource/file.php?mode=tinymce&#39; id=&#39;filecontainer&#39;&gt;&lt;/iframe&gt;


HTML inside iframe:

    &lt;input type=button id=choose_pics value=&#39;Choose&#39;&gt;

jQuery:

    //Detect click
    $(&quot;#filecontainer&quot;).contents().find(&quot;#choose_pic&quot;).click(function(){
        //do something		
    });	

Other posts I&#39;ve seen usually have a problem with different domains (this hasn&#39;t). But, still, the event isn&#39;t detected. 

Can something like this be done?

Detect click event inside iframe

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

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?

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?

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/)**

Content Type	Original Author	Original Content on Stackoverflow
Question	user1476899	View Question on Stackoverflow
Solution 1 - Javascript	biziclop	View Answer on Stackoverflow
Solution 2 - Javascript	jbabey	View Answer on Stackoverflow
Solution 3 - Javascript	Artem Luzhanovskyi	View Answer on Stackoverflow
Solution 4 - Javascript	Pixelomo	View Answer on Stackoverflow

Change Parent url from iframe

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Solution 3 - Javascript

Solution 4 - Javascript

What is the Nuget repositories.config file for?

How to create a reference to a variable in python?

Attributions