Develop Reference

Prevent reloading certain parts of page

I'm fairly new to web development so I don't have much experience with any of this. I currently have a navbar at the top of my website (made with Foundation), but I don't want it to reload every time the page reloads. I've noticed on several websites that certain parts of the page are kept in place when links are clicked and the url changes. How can I achieve this?
Thanks

There are several ways to achieve this. Using AJAX calls is one of them, iframe another. You could even create a one page application and show/hide elements when certain buttons are clicked. This will however force you to load all the data at once so I won't recommend that (depending on the website).
A small article about how you can use the iframe option.
A small article about the AJAX option, they include a small demo to show how it works.

You can set an <iframe> in your code and have the links in your nav target it. When you click on a link, the <iframe> will load the new content, but the rest of your page will not change.

How to load pages into divs and display their URL in the browser's address bar?

I want to load pages in a specific div. I want to display the URL of the loaded page in the browser's address bar.
How I can do that?

well, the easiest way to load an external page into a div is by using the jquery .load function - $('#div_id').load('../url_to_page.html');
as far as changing the address bar, this can be done with HTML5, but anything before that you might be out of luck.
HTML5 example:
window.history.pushState("object or string", "Title", "/new-url");

With my knowledge there are two possibilities to load another website into a div:
First one would be to change the div's content via Ajax.
Second one would be to integrate an <iframe></iframe> into the div, in order to load the desired page in the iframe.
Hope I could help.

If your trying to change the entire url displayed, domain and all, I don't believe you can and for good reason. I'd hate for you to create a phishing site of stackoverflow or otherwise and pretend to be legit while you steal my password. But managing anything after the domain is doable as answered above (or below, wherever it is by now~).
Thanks!

Creating iframe embeds and using modals

The company I work for is trying to come up with their own version of embed buttons. The logic is similar to what Twitter and Facebook offer. Unlike Twitter, we are using modals in-place of opening a new window. As the moment, we have developer a modal library which suits our needs.
Now, I will explain the process we are following:
Our embed script will be loaded in the user's website.
It looks for a link which we will provide to the user, and an iframe will be loaded in place of it.
The iframe uses two scripts — jQuery and our modal library.
On clicking the button present inside the iframe, the modal should open but it is present on our domain and it should open in the parent window.
From my analysis of the situation, I have come up with the following questions:
I have looked around the net but I have a feeling that opening a modal inside a parent window is not possible. Is there a workaround for this?
To prevent clickjacking we have set X-Frame-Options to SAMEORIGIN. How can we load content in an iframe from our website?
If we skip loading the button inside the iframe and modify the parent DOM, we can use our modal script, but applying our own styles to the buttons becomes a pain as we will be using important! for all styles. What other options are we left with?

To answer your first question, it isn't impossible as I've done something similar, thus I think it should solve your third question as well.
So on the parent page you would have a script such as
function showModal(display) {
var colorbox = $('#colorbox');
var overlay = $('#cboxOverlay');
if (display) {
colorbox.fadeIn("medium");
} else {
colorbox.fadeOut("medium");
overlay.fadeOut("medium");
}
}
I've used colorbox but you could use your custom modal, I've also used a parameter so you can show and hide it as you please.
Then from your iframe you could use this script to call your modal
javascript: window.parent.showModal(true);
Hope this helps.

1) Why dont you just open the modal from the iframe? It will make no difference if you call it from parent window or the child window.
2) Use JSON-P

Reload iFrame CSS

I'm developing a system, which supports CSS themes. It's Ok so far, I can change the theme as desired, but the system is composed by two parts:
First is the "skeleton" of the system: it contains the menu and the options to change theme. That menu loads the contents of the second part which is composed essentially by an iframe which loads the modules called by the clicks on menu.
I can change the theme of the first part of the system using the following code:
$("link").attr("href", "css/temas/"+theme_name+".css");
The theme_name is gathered by reading the link on the menu click. The system is ok here, and no change is needed. Beyond changing the main theme, it records a cookie, which is used to read for further system theming.
So, the second part of the system also reads that cookie to apply the theme, but it doesn't change instantly as the main part does!
For example, when I click the theme icon, it instantly applies the theme without refreshing the screen, but that doesn't happens to the second part! It apply the theme, but it's shown only if I reload the iframe, and reloading, ain't cool!
I'm trying to change the iframe theme with the following code:
$("#ifr_main link").attr("href", theme_name);
Where #ifr_main is the iframe name!
Does anybody knows how can I figure that out and apply the new CSS without having to refresh the page, as I do on the menu?

You need to select the content of the iFrame first before trying to select it's link element.
$("#ifr_main").contents().find("link").attr("href", theme_name);
Side note, iFrames can be ugly :)

It is because iframe content was loaded when your page is loaded, so after it, you cannot change its looking unless you are using JQuery/ajax methods or reload.
Yo can find some questions about it
here, here and here
maybe you can reload your ifreame via ajax, read here
Finally you should watch this video for more unique way.

Make links inside an iframe open in a new window

I'm trying to display an map inside an iframe that has a needle which on mouseover shows some information about a certain company, the thing is once you click the link the page opens up inside the iframe which ruins the experience, so i was wondering is it possible to make the links inside an iframe open up in a new window instead perhaps using jquery or something similiar?
the code i have atm is
http://www.jsfiddle.net/rkd59/1/
Edit: the very least capture a click within the iframe so i might resize the iframe

You will need some kind of open API to do this properly, and Eniro doesn't provide one according to this page (in Swedish).
I would recommend you to use the Google Maps API v3 instead. I've made an example on jsFiddle that looks similar to that of Eniro.
I'll gladly give you more help with this, so just ask away!

You can't (or it is extremely hard to ) make events inside the iframe affect the parent page. This is to prevent attacks from XSS, or cross site scripting. Having said that, if the site within the iframe is on your own domain and you want to set up some extremely tricky ajaxing and php session IDs, maybe you could make something work, but even then I'm not sure. And I don't know if this would be a security hole, maybe someone else can speak to that. It would perhaps look like:
main page sets up session ID and passes that to the iframe url via a get variable
the iframe takes click information and sends it to a Session variable via an ajaxing call to a script on the server.
The main page then reads (how?) the session cookie and makes changes based on it's value.
All in all, you may find that it may be much simpler and more secure to acheive what you want using a different method.

Due this map is loaded inside an iFrame, it's not possible to run any javascript event listeners on the links, neither is it possible to change the html.

Please try the following:
<script>
x=document.querySelectorAll("a");
for(i=0;i<x.length;i++)
{
x[i].setAttribute("target","_blank");
}
</script>
Thus all links open in new frame.

To make a link popup in a new window you would usually use target="_blank" as such:
Go to Yahoo
However this will only work if you can modify the code you're showing within the iFrame

There is a partial solution.
You can add an absolutely positioned DIV tag over the top of the IFRAME and capture clicks on this instead. See example here shaded in 20% alpha red.
http://www.jsfiddle.net/rkd59/6/
However, this means that the map works in "read-only mode" and while you can capture the click event you wont know what link the user has clicked on.