I have two different div element (one for desktop and other for mobile) which have to be loaded based on the device accessing my website. What is the best way to do this? I do not want to check the user agent since it gets updated often.
Right now I'm using css media queries to find the device specs and hide / show the corresponding div. The problem is, I'm loading both the divs irrespective of the device. I only want to load the corresponding div.
Furthermore, re-sizing the desktop browser to the size of mobile should load the mobile div. What is the best way to do this?
Thanks.
If you can use JavaScript (and jQuery ), you can manage to load the content based on the width of the devise. The basic idea is something like this:
index.html
<body>
<div id="content">
<!-- content will be loaded here based on the width of the devise -->
</div>
</body>
phone.html
<div>
This file is for small devices
</div>
pc.html:
<div>
This file is for large devices
</div>
JavaScript in index.html:
function loadcontent(){
var BreakPoint = 480; // pixcel
if($(window).width() < BreakPoint){
file = "phone.html";
}else{
file = "pc.html";
}
$("#content").load(file);
}
loadcontent();
$(window).resize(function () {
....
loadcontent();
....
});
The above code is just the basic concept.
To handle the window.resize events smoothly, there are several functions to be implemented. If you would like to see the codes of that part, I will update my answer.
hope this helps.
Related
I want to resize input date boxes of TelerikDateRangePicker component in Blazor in order to fit it better in my page. It looks to be a bit long and I want to resize it. This is the original size:
I tried adding
<style>
.k-floating-label-container {
width: 140px !important;
}
</style>
to the header of the page when running which made it as follows:
However, when I do the same in my CSS file and then run the application it goes back to the default. Any idea on this?
I have contacted them and they said: "To resize the inner inputs for the DateRangePicker you can use some custom CSS styles. To make cascading easier you can use the Class parameter that is available for the TelerikDateRangePicker. To better illustrate the concept, I have created a small sample that you can see from this REPL link, as well as quickly run it to see the rendered result."
I have two web pages:
mobile.html with mobile.css and desktop.html with desktop.css.
How can I make a redirect to the mobile one (the default page is desktop.html) if screen size is less than 12″.
This is not recommended the best way is to use media queries to make your site responsive. By adding the class and detecting the browser width change.
<div class=" mobilehidden">
<p>This text is hidden in mobile</p>
</div>
Now in Css put this line
#media only screen and (max-width: 500px){
.mobilehidden{
display = none;
}
}
if you want to do this then you can use JavaScript for this. You can also use php ,css but JavaScript is easier. Simply use this inside script tag
if (screen.width <= 700) {
document.location = "samplepage.html";
}
If you are using bootstrap there is a class for this
.visible-xs-*
.visible-sm-*
The mentioned above sm is for tablets whereas xs is for mobile.
You can accomplish this with PHP, using a lightweight class such as Mobile Detect. Once downloaded and added to the server in the root of your website, you can then use this code to detect if the device is a mobile and set the location to the url of your mobile site:
<?php
/* Change path info depending on your file locations */
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
if($detect->isMobile()) {
header('Location: http://mobile.example1.com/');
exit;
}
?>
Other devices can be detected and further examples can be found here
You dont have to change the page but just use bootstrap for making page responsive i hope you know bootstrap if you don't see learning tutorial in youtube.
I have a page set out similar to this:
My question is about mobile support and how should I go about doing the following:
When the user resizes the window to about the size of a smartphone screen, I want to remove the main content, which is everything below the header area/login, and keep only the header, the login form and the footer. So I have been using css media queries to do this. My problem is that my login form markup resides within the header area.
<div id = "header">
<div id= "logo"><img src =""/> </div>
+-------form markup here------+
|<div id= "login-form">..... </div>|
+ ----------------------------+
</div>
<div id= "main-content">
This is where I want to put the login form
</div>
So my question is, How should I do this?
should I just create another css file and link/apply that when the screen width-height is detected to be smartphone size ?
Should I create the markup block inside main-content, and set its css style display to none UNTIL the screen is resized to smartphone size, where a media query is set to change display attribute ?
What is the best way to accomplish this? I greatly appreciate any help and at least, some little explanation to justify that answer. Also links and other references are very welcome !
Cheers..
Use Media Queries to hide and show content based on device or device width/height.
Here's a good Media Queries Cheat-sheet:
http://stephen.io/mediaqueries/
I wouldn't position the form as 'absolute' and put it outside the header as another poster suggested. This is super sloppy and bad practice. What's the 'absolute' form going to be positioned too? The body? Aghh. You'd need a wrapper - and that's just more code. You can do it all via CSS. Just use Media Queries to change the CSS styles for the header, show/hide elements, and reposition.
OR
JQUERY (Not the best route, but for what you want you're a limited without a redesign). I kept it simple for easy explanation. Note, I haven't tested this:
$(window).resize(function(){
var maxwidth = $(window).width(); // get device window width
var form = $('#login-form'); // form
if(maxwidth <= 320) { // 320 px or whatever you want
form.clone().appendTo('#main-content'); // clone form and append to main content
form.eq(0).hide(); // hide first form, the one in the header
}
else {
form.eq(0).show(); // show initial form
form.eq(1).remove(); // remove cloned form, if set
}
});
I can see two ways you could go about accomplishing your goal:
Take your login-form out of the header div, put it in the main-content div and absolutely position it to make it appear inside the header when on a desktop screen, then use a media query to move it to below the header for viewing on mobile devices.
Use your idea of having two login-forms: one in the header, and one in the main-content area. Use media queries to change the display attribute so that the correct login-form is showing at the right time depending on the screen size. I'm not sure if duplicating the login-form is good practice, so I would try option 1 to start.
Let me know if this works out!
Chrome flickers when reloading content in iframes. Can this be avoided in any way, thinking of:
Wrapping a-links with js that does some magic.
Meta-tags in content-html. (I have source control over the html in the iframes)
Please note that the content-type in the iframe may vary (pdfs, html, images) so if ajax is the only way out here, does it reflect the http-content-type back to the iframe?
Please visit the demo at http://jsfiddle.net/2tEVr/
Excerpt of fiddle:
<iframe name="if" width="800" height="600"></iframe>
UPDATE
The solution that worked best for me was to replace regular href's with ajax-requests, repopulating the body-area, (solution 4 below) Flickering is gone but comes at a price of akward debugging since sync between content and "view-source" is lost on ajax-request.
Also, since the content-type in my case may change, the method for performing the ajax-request had to have some brains and possibly fall back to regular location request.
regards,
#user247245: From your question, its not entirely clear how you (want to) use the iframe. Does it reload periodically, or once when the whole webpage loads?
Solution 1: Different background color
In case you just want to avoid the ugly white, and avoid over-complication. Set a different background color in your HTML header of the framecontents.html file, like so:
<!DOCTYPE html>
<html style="background-color: #F48;">
This way, while the CSS file loads,parses, and gets applied, the background is not #fff.
Solution 2: Transparent iframe
While there is no content, the iframe should simply not be visible. Solution:
<iframe src="/framecontents.html" allowTransparency="true" background="transparent"></iframe>
Ofcourse dont use this in combination with solution 1, you'll shoot yourself in the foot.
Solution 3: Preload iframe page
In case you are loading the iframe later (such as user clicking a link), consider preloading its contents. Hide this in near the top of your (parent) page:
<iframe src="/framecontents.html" style="position: absolute; width: 0px; height: 0px"></iframe>
But i'd advise using solution 2 instead.
Solution 4: If doing a mobile web interface:
See how jQuery Mobile did it. We built a web interface that had to feel like a native app, so without reload flashes. jQM fixed that. Basically does a background ajax call to retrieve the full HTML contents, then extracts the body (the "page" div to be more precise) and then replaces the contents (with a transition if you like). All the while a reload spinner is shown.
All in all this feels like more like a mobile application: no reload flashes. Other solutions would be:
Solution 5: Use JS to inject CSS:
See answer by jmva, or http://css-tricks.com/prevent-white-flash-iframe/ .
Solution 6: use JS to inject CSS (simple version)
<script type="text/javascript">
parent.document.getElementById("theframe").style.visibility = "hidden";
</script>
<iframe id="theframe" src="/framecontents.html" onload="this.style.visibility='visible';"></iframe>
You could ofcourse leave out the <script> part and add style="visibility:hidden;" to the iframe, but the above would make sure that the frame is visible for visitors with JS disabled. Actually, i'd advise to do that because 99% of visitors has it enabled anyway, and its simpler and more effective.
A common trick is to display the iframe just when it's full loaded but it's better to not rely on that.
<iframe src="..." style="visibility:hidden;"
onload="this.style.visibility='visible';"></iframe>
The same trick a bit optimized using JS.
// Prevent variables from being global
(function () {
/*
1. Inject CSS which makes iframe invisible
*/
var div = document.createElement('div'),
ref = document.getElementsByTagName('base')[0] ||
document.getElementsByTagName('script')[0];
div.innerHTML = '<style> iframe { visibility: hidden; } </style>';
ref.parentNode.insertBefore(div, ref);
/*
2. When window loads, remove that CSS,
making iframe visible again
*/
window.onload = function() {
div.parentNode.removeChild(div);
}
})();
Extracted from css-trick
If you have to switch between different sites and that trick of onload isn't working the only viable solution would be destroy and create the iframe programatically.
Try adding transform: translate3d(0, 0, 0); on a parent element.
I had an issue where the iframe was taller than its parent (parent has overflow: hidden). The iframe's overflown portion was flickering on each video loop on Chrome (YouTube iframe API).
Forcing hardware acceleration this way was the only thing that worked for me.
A simpler solution that worked in my case was just adding this CSS to the iframe
will-change: height;
min-height: 400px;
I've seen an effect on a few websites that gives you what are essentially vertical 'pages' which each fill the browser window. Examples:
http://www.bleed.no/
http://www.weworkonsunday.com/
The first is a good deal cleaner and more sophisticated.
I've been puzzling how to achieve this effect. It would be simple enough to do with page anchors etc. if height wasn't an issue, but filling the vertical of the window (as well as the width) is what's throwing me off.
Is there a straightforward method I'm missing? Or is all some complex java tomfoolery?
Many thanks for any help
Conceptually I would build a vertical page with stacked divs all with the same class that responds to the height of the window (and also responds when the browser is resized). Untested code using jQuery:
<div id="page1" class="page">content</div>
<div id="page2" class="page">content</div>
<div id="page3" class="page">content</div>
<script>
// set up onResize event handler
window.onresize = onResizeScreen;
// run onResize event handler once on load
$.(function() { onResizeScreen(); });
// onResize event handler
function onResizeScreen(event) {
$(".page").attr("height", screen.height);
}
// function to scroll to specific page
function gotoPage(pageNumber){
window.scroll(screen.height*pageNumber-1);
}
</script>
<style>
.page {
width: 100%;
}
</style>
You sound new to solving these kinds of problems. If you don't know what the above means check up on jQuery and handling JavaScript events.
This result does require some javascript expertise (in the way thats is implemented in your examples).
There is a jquery library that tries to simplify this process.
http://stephband.info/jparallax/
Even tho there are no really simple way to implement. Among the reasons the effect is very layout dependent and being a "new" way of doing websites... it will take some time until someone tackles the problem.
Here is another example of how to implement parallax in the way you described without teh help of the lib.
HOW-TO: http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/
Demo: http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/index.html
you will find plenty other resources if you search for "parallax scrolling".