open another web-page in iframe, optimize for appearance - javascript

Looking to integrate a calendar scheduling service (http://calendly.com/), which is awesome and allows unauthenticated users to schedule appointments that then go into a Google Calendar.
However I want this all to happen on my site without users leaving.
Calendly doesn't offer this, so the workaround looks like this (click the top "Book it, baby!" button).
I want to do the same thing, but I really don't want to depend on some random javascript framework like fancybox.
What is a way to open a new link in an iframe such that it:
Is easily and gracefully exited from
Looks great as a new window on top of my site content
The content on the foreign page resizes to size of open screen as needed
Thanks all!

<a target="FRAME_NAME" id="showFrame" href="http://example.com">I open in an iframe!</a>
Then use javascript to display a hidden frame when an element with the id showFrame is clicked. You can then style the frame with css to make it fit the screen nicely.

Related

Is there a way of exiting Google Translate's iframe?

In our website we have a link that allows people to view the page using Google Translate, e.g. https://translate.google.com/translate?sl=auto&tl=fr&js=n&prev=_t&ie=UTF-8&layout=2&eotf=1&u=http%3A%2F%2Fwww.example.com. Google Translate wraps our page in an iframe and does its magic.
We open this link in a new tab. Once the user has finished we'd like to provide an easy way for the user to get back to what they were doing. They can close the tab themselves, but their focus is on the content rather than on browser controls. Is there any way for us to provide a button on the page that will close the tab? I'm thinking something like window.close() would do for a normal tab.

Do links with javascript slow down a page?

Due to an issue that came up with a website I have to use javascript for all of the links on the page.
like so...
<img src="image.png"/>
Will having many links with javascript on the webpage slow it down significantly?
Does the Javascript run when the page initially loads or only when a link is clicked?
EDIT: For those asking why I'm doing this. I'm creating an iPad site, when you use the 'add to home page' button to add the site as an icon, it allows users to view the site with no address bar.
However everytime a link is clicked it reopens Safari in a new window with the address bar back.
The only solution I could find was using javascript instead of an html based link to open the page.
For further reference see...
iPad WebApp Full Screen in Safari
2nd answer
"It only opens the first (bookmarked) page full screen. Any next page will be opened WITH the address bar visible again. Whatever meta tag you put into your page header..."
3rd answer down
"If you want to stay in a browser without launching a new window use this HTML code:
a href="javascript:this.location = 'index.php?page=1'"
"
I can see this adding to the bandwidth needs of a site marginally (very marginally), but the render time and the response time on clicking shouldn't be noticeable.
If it is a large concern I would recommend benchmarking the two different approaches to compare the real impact.
What do you mean by slow it down?
Page load time? Depends on the number of links on your page. It would have to be a LOT to be noticeable. Execution time? Again, not noticeable.
The better question to ask is are you o.k. with effectively deleting your website for those without javascript?
Also, if you are worried about SEO, you will need to take additional measures to ensure your site can still be indexed. (I doubt Google follows those kinds of URLs... could be wrong I guess).
EDIT: Now that you explained your situation above, you could easily just "hide" the address bar. See this SO question.

Detect when user wants to open the in a new window/tab

I'm writing an AJAX application so every link on my page is a javascript link (href="javascript:void(blahblah)"). Some of them opens small webpages in an iframe in a boxed, absolutely positioned div element (that can be dragged around).
This looks nice but if the user middle click on the link he can't open the page in a new tab, because the browser tries to execute the script on a new page which fails.
So what I want to do is:
If the user clicks on the link it opens a webpage in an iframe in an absolutely positioned div. (this works currently).
If the user middle clicks these links (or somehow opens the link in a new tab/window etc.) the page should load in the new tab/window as expected.
Optional: middle click should do nothing on all other javascript links.
Is there a (preferably cross browser) way to accomplish this?
EDIT: this web app is a browser game which uses the canvas element to render the game world, so I don't mind if your solution works only in canvas-capable browsers.
Is there a (preferably cross browser) way to accomplish this?
Yes, don't do href="javascript:void(blahblah)", build on things that work.
Check out the hijax technique, which allows you to progressively enhance your application to use either regular or JavaScript links. There's an hijax jQuery plugin that can help.

Javascript for removing menu and scroll bars

I have this script on my html page:
<script language='javascript'>parent.resizeTo(550,510);</script>
I'd like to add to it so it positions the window in the middle of the screen. Also, I want to remove the address and tool bars (I've managed to hide the scrollbars by using body{overflow:hidden;}).
I know how to do this using JS upon opening a new window from the browser but this needs to work from clicking a link on a PDF.
Does anyone have any suggestions? Thank you!
You can't remove address bars, etc. from the user's browser window (even if the user is only you) unless you create a new window object. And the trend is toward removing more and more of your ability to "customize" such popup windows, for security reasons.
This is actually a feature, not a bug. Think about it.
If you're opening a browser window from a separate application, the page starts off its life with a completely-decorated browser window. There's no way to make those decorations go away after the page is loaded.
While I seriously doubt the justification of your desires the way to do it is to somehow open a window. That means that your pdf links to a page that as its action will open a window with an url that has the actual content. The pdf links to a page that is basically a redirector. You give the final URL as a parameter and launch it. Of course you need to disable the popup blocker for this to work, but you should not even consider doing this on a public (no browser control) website anyway. You also might want to add to the redirector page a button that the user can click to open the page if it was blocked by the popup blocker.

How to embed functionality into HTML email?

We want to let users click a thumbs up or thumbs down button from an HTML email, without causing the clicking to open a browser window.
Is there a way to essentially embed limited web functionality (i.e., clicking an icon, showing confirmation) within HTML emails?
Thanks!
I'm afraid such functionality, while theoretically possible, wouldn't be very practical given that most email clients strip out or disable JavaScript in order to prevent malicious code execution or other security issues. Your best bet is to use an image that looks like the thumbs up or thumbs down and then links directly back to your website. The browser window will still need to be opened, but you'll at least achieve the main part of your goal.
The short answer is no, not reliably across email clients. Usually with something like this I'd embed an image that looked like your functional element and just have it link to a web page that has that functional element.

Categories