Iframe size manipulation - javascript

Is there a way to make the Iframe request an external website as if it is a mobile device, so the content returned will have a small dimension etc?
I am displaying external websites in iframes, using width and height attributes
<iframe src="http://marketwatch.com" width="300px" height="300px" ></iframe>
but because the browser is not a mobile browser, the content returned is tailored to normal browser, and I end up having scrollbars.
If the content returned is that for a mobile device, then no more scrollbars etc.

It depends on how the website detects if it should be a mobile browser.
If the site has a mobile-specific URL you can go to that always renders the mobile site, then just go to that.
If it looks at the user-agent string and does things like that then you might not be able to do it. I think a lot will detect based on the user agent, but just redirect to a mobile version of the site though. If you know the mobile version of the site then you can just use that and it should be fine.
Of course, this requires you to know before hand what sites you want to use. Not sure if there's a generic solution.

Related

IFrame HTML5 keyboard focus,

I'm making a game in HTML5 canvas, and I need it to be multiplayer so I am using node.js to accomplish this. But since my website is run a different server I have had to find a way to load the app on a page, on that server, I have used HTML IFrame to do that, which works fine and looks good except it doesn't get keyboard focus.
Is there a simple js script I can run to give it focus, either on the front end og inside the iframe?
<iframe src="mysite.com" height=750 width=1000 frameborder = 0 scrolling = "no" name="myFrame">
<p>Your browser does not support iframes.</p>
</iframe>
I have seen there is a Jquery solution, but I hopped I could get around it, since the simple HTML is working well.

Switch web site to mobile css client side with JQuery

I am trying to change the display of my web pages depending on the version of the browser and space on screen. I need to completely change the look of the pages as follow:
If the site is displayed on a mobile phone I want the mini version.
If the site is displayed on a desktop browser but the size of the window is too small I want the mini version.
If the site is displayed on a desktop browser and the window can accommodate the full version I want the full version displayed.
If no javascript is available the full version should display.
I just started with some pretty basic code which relies on userAgent:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) )
Is there a clean way to achieve what I'm trying to do with JQuery for example?
Use CSS media queries. Sniffing the user agent is not reliable, and will lead to maintenance headaches in the future. Also, using media queries means no javascript is required which is good from a separation of concerns point of view.

IFRAME has a lot of problems with iPad safari

i am developing a java web application which will be browsed using iPad safari through 3G\VPN connection, i have an IFRAME its SRC is a url to a servlet that sends a pdf file to the IFRAM
<iframe src="documentviewer?docid=#{viewIncomingBean.incoming.id}" width="610px" height="5000px"></iframe>
problems with IFRAM on iPad Safari are:
1 -after calculating the time taken on server side to flush the pdf file in the output stream to the client i found that the IFRAME takes a very long time to getting rendered and the pdf file loaded on client side (please have a look Using Iframes Sparingly).
2 - on iPad Safari the IFRAME can't be scrolled using regular one finger touch style, you must use two fingers to scroll the IFRAME up and down (please have a look ipad and iframe problem).
is there is any other better way to load the pdf file in a web page ????
I had to develop a pdf viewer for an ipad site we were working on. We could not make the scroll work with other thing but the two fingers.
What we did was to use http://mozilla.github.com/pdf.js
it is a javascript renderer for pdf documents. It works great ... of course, if you dont use IE.
another solution is to use the document reader of google ... https://docs.google.com/viewer

What should I use for my website mobile version ?jquery mobile / CSS3 page media / detecting browser size by jscript or redirecting to new page?

I have an personal profile website at http://www.kaidul.web44.net/ and I have used jquery, flash & high interactive component in it. But developing a small device version of it is becoming a challenge for me.It's page structure is based on jquery. I am now in fix in what should I approach ?
( jquery mobile / CSS3 page media / detecting browser size by jscript or redirecting to new page or anything else )
You can recommend me about it's structure whether I should modify it or not.
please help me.Thanks in advance.
My opinion is that you should do a redirect to a new page... because.. in the future you might want to modify something and will be difficult.. and another reason.. because is another view... Almost everybody is doing in a subdomain... and if the user want to view the desktop version... even if he is mobile.. redirect him to the large view...

Loading JS script for only iOS devices?

I have a jQuery script I'm using on a site to allow fixed position background images on iPhone/iPad/iPod. However it seems to be clashing with another script I am using on the site that enlarges background images full screen. Luckily they're independent of each other, I don't need the clashing background image script to work on iOS devices and vice versa.
Is there a way I can specifically target IOS devices to serve a JS file? I initially thought about using some kind of IF statement and doing it on window size but that started to get a bit complicated and affects other non-IOS devices. It just needs to run something like this...
..."if IOS device then load scroll.js"
I know device/browser sniffing is frowned upon but I can't think of another way around this problem.
You can use the Mobile Safari user agent string to detect mobile safari server-side, see: How do I detect Mobile Safari server side using PHP?
You can also do this in JavaScript:
if(navigator.userAgent.match(/(iPhone|iPod|iPad)/i))
See iPhone & iPod Detection Using JavaScript for more information.
You can use Detect Mobile Browser (it has a library for javascript).
you can also try this
if (navigator.userAgent.match(/like Mac OS X/i)) {
alert('Hi, you\'re browsing from an iOS device.');
}

Categories

Resources