I'm working with MVC3 and Bootstrap Responsive, and I want to detect by Razor (or javascript) which mode is active (desktop, tablet or phone) to show the correct partial view in one case or another.
For example:
#if( mode=='phone')
{
#html.Partial("_partialPhone")
}
#if( mode=='desktop')
{
#html.Partial("_partialDesktop")
}
...etc
I don't want to use just ".visible-phone" "visible-tablet" and ".visible-desktop" css classes, because although only one partial view is displayed, all of them are loaded in the DOM and rendered by Razor engine. And that is not good for a Phone and Tablet performance.
Can anyone help me?
Thanks
Media queries happen on the client.
This is fundamentally impossible.
You could have the client set its size in a cookie, then read the cookie on the server.
You should be able to do that with MVC4 (I don't know if this functionality exists in MVC3, but the sample on the site below uses MVC4 so that's what I'm basing my response on).
Switchable Mobile Views
It appears that you can start making files named like [ActionName].Mobile.cshtml and ASP.NET automatically uses those when it detects a request from a mobile device (and this appears to be customizable so you could create your own for tablets or whatever). He demonstrates something similar to what you are asking about in Razor - he renders different links based on the current display mode, but I assume this would work to render different partial views as well:
#if (Request.Browser.IsMobileDevice && Request.HttpMethod == "GET")
{
<div class="view-switcher ui-bar-a">
#if (ViewContext.HttpContext.GetOverriddenBrowser().IsMobileDevice)
{
#: Displaying mobile view
#Html.ActionLink("Desktop view", "SwitchView", "ViewSwitcher", new { mobile = false, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
}
else
{
#: Displaying desktop view
#Html.ActionLink("Mobile view", "SwitchView", "ViewSwitcher", new { mobile = true, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
}
</div>
}
Though if you have separate mobile views and desktop views then it I wouldn't think you'd need to manually switch between the two partials like you are asking about.
Related information
Related
I've recently created a separate mobile skin for a website. The site serves the mobile version of a page based on the screen size of the device it is being viewed on using the following code.
<script type="text/javascript">
if (screen.width <= 600) {
window.location = "mobile/";
}
</script>
I'd now like to add a "view desktop version" link at the bottom of the page. Naturally, with the above code in the header of each page, it just detects the screen size again and loops back.
Could someone please suggest how I could get around this. I suspect this will be a session or a cookie but I'm very new to java and don't know how to set these up.
thanks in advance for any advice.
This should be handled by the viewport in the metatag of your website. The use of jquery can allow users to opt out of responsive design:
var targetWidth = 980;
$('#view-full').bind('click', function(){
$('meta[name="viewport"]').attr('content', 'width=' + targetWidth);
});
See this link for more clarification.
To detect if link was clicked you can:
Add a specific query parameter (like ?forceDesktop=true) which should be removed if returned to mobile
Use media queries and single skin (see bootstrap)
Maybe look for more elaborate version to detect mobile (link)
Chrome for Android has option to request desktop site (How to request desktop
I've managed to come up with another solution using local storage which is really simple for a beginner like me. It's probably an amateurish way of doing things but it certainly works for my purposes.
So updated the code on the desktop version of the site to:
var GetDesk = 0;
var GetDesk = localStorage.getItem('GetDesk');
//check screen size is less than 600
if (screen.width <= 600) {
//check if there's anything in local storage showing the users requested the desktop
if (GetDesk == 0 ) {
window.location = "/mobile.html";
}
}
then added code to the mobile version of the site to check if the user has previously requested the desktop version:
var GetDesk = localStorage.getItem('GetDesk');
if (GetDesk == 1 ) {
window.location = "/desktop.html";
}
Then at the bottom of the mobile version added the button:
<!-- onclick set the value of GetDesk to 1 and redirect user to desktop site -->
<button onclick="localStorage.setItem('GetDesk','1'); window.location.href = '/desktop.html';">View desktop</button>
As I say, perhaps not the best way but it certainly works and is easy for beginners.
Is it possible to call chrome cast via a HTML button?
I've written a web page that uses a custom receiver and basically allows a user to show reports to a room of people in the form of stats/charts, but they see controls on their screen.
However because this is PURELY a cast app, I want to show a button on the webpage that shows when the user isn't casting and then disappears when they are not casting.
So something like:
<button id="castStart" style="display:none;">Start</button>
<button id="castStop" style="display:none;">Stop</button>
And then some JS like:
if( CASTAVAILBLE ) {
if( CASTING ) {
$('#castStart').hide();
$('#castStop').show();
} else {
$('#castStart').show();
$('#castStop').hide();
}
$('#castStart').on('click', function(e){
startCasting();
$('#castStart').hide();
$('#castStop').show();
});
$('#castStop').on('click', function(e){
sttopCasting();
$('#castStart').show();
$('#castStop').hide();
});
}
So basically the plan is to hide and show the buttons based on when they are casting and ONLY if they are ABLE to cast (i.e. the cast extension is installed).
Is this possible?
Update: This seems to do what I want: https://chrome.com/photowall so it is possible!
Casting is part of browser chrome (i.e. "everything that's not the web page" not "Chrome browser") functionality.
If you're looking at displaying different content for desktop and cast version, you can get away with just css media queries
#media tv {
.only-visible-on-chromecast { /*or when a tv is used as a screen ¯\_(ツ)_/¯ */
display: block;
}
}
If you're looking for a javascript implementation of casting functionality, you may want to look into adapting the chromecasts package for browser usage.
In my Drupal 7 site I have a view with two block displays. The only difference between both is one filter criteria -URL Aias-: one block shows content with "/html5" in its alias and the other shows "/flash" url aliased content
Those blocks must be dispalyed only on certains pages. This logic is controlled by Context module based on the URL. In this way, the block will be showed if the URL is like "perm/type/man/*"
At this URL I need to display one block or another depending on flash content is enabled or not at device level: if device support flash (like PC) the flash content must be dislayed. If device doesn't support flash (mobile), the html5 content will be shown.
I found this js code to detect if flash is enabled on the device
var hasFlash = false;
try {
var fo = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
if (fo) {
hasFlash = true;
}
} catch (e) {
if (navigator.mimeTypes
&& navigator.mimeTypes['application/x-shockwave-flash'] != undefined
&& navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin) {
hasFlash = true;
}
}
but I don't know what to do with it nor where I must include the code.
Can you help me?
You may try to add the above code into a file or as an inline script with drupal_add_js and continue as follows:
Load both blocks on the same page initialy hidden and show the one that meets your conditions in the js.
Or load the correct block's content with ajax and dump it into the DOM based on your desired criteria.
I have a website which has all pages contents in one page called "pagecontents". When a menu in navbar is clicked the jQuery load function is triggered and the relevant content is loaded into the main page.
It's working fine, however I added an hash to the URL for whenever a particular content is loaded , so that users can go directly into viewing relevant content when they type or paste the url with the hash. This works fine in my local host but not on remote host I wonder What's the problem.
if(location.hash == '#web') {
$('#contentFetch').load('pagecontents.php #webC');
}if(location.hash == '#graphic') {
$('#contentFetch').load('pagecontents.php #graphicC');
}if(location.hash == '#mobile') {
//$('#testLocation').text("mobile Works");
$('#contentFetch').load('pagecontents.php #mobileC');
}if(location.hash == '#contact') {
$('#contentFetch').load('pagecontents.php #contactC');
}else{
$('#contentFetch').load('pagecontents.php #indexC');
}
Edit: About the hash in query string:
the website url ex: 'www.mywebsite.com/'. when i add the '#graphic' at the end: 'www.mywebsite.com/#graphic' it's not loading the content. I noticed that if keep on pressing enter even though is not loading, it then loads!!!? it seems very incosistent as it loads 1 time out of 5. I wonder if using this is reliable in real world, or is there another way of doing it? Thanks, Mike
Make sure to check the runtime versions that your host is using and that they comply with the ones you have locally.
Usually, a host will run a version of a software that is often outdated in order to accommodate older websites. (ex. running PHP 4 instead of PHP 5).
I am writing an application for my parent's photo booth business.
They upload all the event pictures to different Flickr photosets on their account, and on the website they have an albums page with a collection of all their events so that people from the events can go and see all their photo strips, as well as each individual picture and then download them for themselves.
Most of their traffic is from mobile devices (my brother wrote the website specifically to fit mobile device screens as well as normal computer screens just as well); however, downloading and sharing the images is easier through an app (thanks to Apple's iOS 6 UIActivityViewController and UICollectionView).
So I'm writing the app that makes it easier to view and share the pictures. I have most of it done and working great! However, it currently only supports iOS 6 and I'm trying to include iOS 5. It only supports iOS 6 because I am using a UICollectionView to display the pictures from events. However, since iOS 5 does not include collection views I use a web view of our albums web page which displays all images.
When you select an image, you can choose a size of the image to view. When you pick a size, it opens a new tab, that includes the image and two links. One to download the image, and one to close the tab. The two links are within an unordered list and each link is its own list item.
This is the link to download the image:
Download Image
And the closing tab link has a tag of:
<a href="javascript:window.close();">
I've seen that you can use the webView's delegate method shouldStartLoadWithRequest: and then:
if ([[[request URL] absoluteString] hasPrefix:#"/downloadImage.php"]) {
UIImageWriteToSavedPhotosAlbum(imageToBeSaved, nil, nil, nil);
return NO;
} else if ([[[request URL] absoluteString] hasPrefix:#"javascript"]) {
[webView goBack];
return NO;
} else { return YES; }
Which would make it do those functions when the links are clicked...right?
These do not work though. And I'm not sure how to make them work.
I am searching for the correct way to use this method, or some alternative method, if possible, to use Objective-C to do the equivalent of what the html normally does.
I figured out a way to do basically what I wanted. Rather than let the webView open a new page when you selected an image size. I set the size links to just download the image right there using this code:
// for links thats contain the displayImage.php do not allow user interaction
if ([[[request URL] absoluteString] hasPrefix:#"http://www.remembermephotobooths.com/displayImage.php?link="]) {
//scan through the link url get the image link so that I can download it
NSMutableArray *substring = [NSMutableArray new];
NSScanner *scanner = [NSScanner scannerWithString:[[request URL] absoluteString]];
[scanner scanUpToString:#"http://farm9" intoString:nil]; // Scan all characters after and including http://farm9 because all download links begin with http://farm9
while(![scanner isAtEnd]) {
NSString *string = nil;
[scanner scanString:#"&title=" intoString:nil]; // Scan up to &title
if([scanner scanUpToString:#"&" intoString:&string]) {
[substring addObject:string];
}
[scanner scanUpToString:#".jpg" intoString:nil]; // Scan all characters up to and including .jpg because all images are jpegs
}
// save image to photo library
UIImageWriteToSavedPhotosAlbum([UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:substring[0]]]], nil, nil, nil);
// let the user know the image was saved
MBProgressHUD *hud = [MBProgressHUD showHUDAddedTo:self.view animated:YES];
[hud setMode:MBProgressHUDModeText];
hud.labelText = #"Saved Image!";
[hud setMinShowTime:1.5];
[MBProgressHUD hideHUDForView:self.view animated:YES];
[substring release];
return NO; //this is what disables the links usual code and has it run my code instead
}
else { //all other links are enabled
return YES;
}