I was designing a mobile version of my website but then realized I need to support at least three (iPhone, iPad and Android). In that case, I was thinking of using jQuery for the task where I would first detect what device it is and then load the appropriate CSS. How would I go about doing this? Is it something like this? And is this even the good way or is there a better way of achieving the same?
<html>
<head>
<script type="text/javascript">
//Detect device type using jQuery
//Insert the proper stylesheet?
//Rest of the javascript
</script>
</head>
<body>
...
</body>
If you don't mind putting all you CSS into one stylesheet you could do this:
Place this in the <head> tag of your HTML:
<link id="ss" rel="stylesheet" type="text/css" href="norm.css" />
And then add this to your javascript file.
var uagent = navigator.userAgent.toLowerCase();
if (uagent.search("iphone") > -1)
{
$("#ss").attr("herf", "iphone.css");
}
if (uagent.search("ipad") > -1)
{
$("#ss").attr("herf", "ipad.css");
}
if (uagent.search("andriod") > -1)
{
$("#ss").attr("herf", "android.css");
}
Related
Is there a way to use javascript to modify a script element?
Like for example:
HTML:
<script id="something" src="/js/file.js"></script>
Javascript:
var something = document.getElementById("something");
something.src = "/js/anotherfile.js"
Is it possible? Because I have a bit of code that works like that and it sort of doesn't work
To be specific, here's the code:
<!DOCTYPE html>
<html>
<head>
<title>MyohTheGod's Website</title>
<link rel="icon" type="image/x-icon" href="/supercorn.gif" defer>
</link>
<link id="css" href="/css/dark.css" rel="stylesheet" type="text/css">
</link>
<script src="/js/particles.js" defer></script>
<script src="/js/header.js"></script>
<script src="/js/theme.js"></script>
<script>window.alert("Welcome to the Home of MyohTheGod. You can play games, check out our web proxies, and more. Also, please do check out the About page. Press OK to continue...");</script>
</head>
<body>
-snip-
</body>
<script id="foot" src="/js/footer.js"></script>
</html>
<script>
-snip-
</script>
var css = document.getElementById("css");
var foot = document.getElementById("foot");
function toggleDLmode(m) {
-snip-
if (dlmodebool) {
css.href = "/css/dark.css"
foot.src="/js/dark-footer.js"
} else {
css.href = "/css/index.css"
foot.src="/js/footer.js"
}
}
-snip-
It is working, do you inspect it? It does changed, but maybe you're thinking, "hm why this /js/anotherfile.js is not downloaded?". Well because of the script tag is already rendered and already downloaded, so you can't do that. What you can do though add NEW script tag.
Maybe this will help How to dynamically change the script src?. This links would explain more why your code "does not work".
There certainly is. You can use document.scripts which returns an collection that you can iterate through like an array. You can change the code using the innerHTML property very much like a normal element. See here https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection
Edited to add: If you've got a html page with multiple script tags, the document.script collection has each script in the order they appear. The code below will log out the source (src tag) or the actual javascript for each script element.
You can also 'write' javascript by setting the innerHTML property.
IMHO it's a bit of a solution that's looking for a problem but at least it gives you access to the number of scripts you have.
[...document.scripts].forEach(script => {
if (script.src != '') {
console.log("Script source:" + script.src);
} else {
console.log(script.innerHTML);
}
});
I read many topics but I can't solve this. In js fiddle it works..in my browser it does not.
fiddle
and this is a screen of my browser..the green header won't stick to the top but some lines below..
this is the code in my page
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="css/styles.css" title="Style" media="all" />
<title> title </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="sticky-header.js"></script>
</head>
<body>
<script>
$(function () {
$("table").stickyTableHeaders();
});
</script>
<table.... //from here is identical to the fiddle html
thanks
The following line of code seems to be a piece of optimization that is causing problems. The line below it tells the header where to position itself, but this part is telling the function to exit early because it thinks it's not necessary for some reason. Taking it out means that the code may run a bit slower, but will always work. It seems to run fine without it but if the page is noticeably lagging when scrolling in a real-world scenario then it might be better to try optimizing it instead of just taking it out completely.
if (!base.isSticky || winScrollTop < 0 || winScrollTop + base.$window.height() <= base.$originalHeader.parent().get(0).scrollHeight || winScrollLeft < 0 || winScrollLeft + base.$window.width() > base.$document.width()) {
return;
}
For some reason this works fine in jsfiddle where there are different frames, but does not work when everything is in the main window. Easy solution: remove it.
For the header just make it position: fixed. That will make it stick to the top! :)
EDIT
This does not require Javascript (JQuery). This can be simply done with CSS. Make a ID for the header container, and then make it position:fixed. Simple! Then it will stick to the top of the page.
EDIT 2
Please refer to this fiddle:http://jsfiddle.net/yu765bwh/
IMPORTANT I have meant position:fixed not relative!
To elaborate more on my question, I designed a website specifically to be viewed on a desktop. It does not look good if being tested on a mobile device. Therefore, I made a complete different layout for my website (containing all of the same content) by using jQuery mobile (due to its simplicity).
I realize now that there were probably better ways in doing this, such as implementing the mobile view in my CSS file, based on media queries, but this is the way that I chose to do it and would prefer to stick with it.
So here's my problem:
I want to use my JavaScript file to detect the different screen sizes, in order to display the desktop view or mobile view, based on their specified screen width and height. As of now, my desktop view and mobile view are in two different html files, and I know that is not good.
I don't want two html files, I want to combine the two! That's the only way I would be able to call the two different codes in my .js file, correct? Does anyone know how to do this?
In my mobile view file, I needed to include the jQuery libraries. Without those, it will not work. But when I tried including that in my desktop view file (since I am now trying to combine the files), I tested it alone with just that and it completely messed up the view on my desktop. How do I solve this?? Other than that, I'm assuming I would just separate the codes with two different 's as far as combining the rest of the code, yeah?
For example,
<div id="desktop"> ..... </div> <!-- this is for desktop view -->
and
<div id="mobile"> ..... </div> <!-- this is for mobile view -->
Please, any help would be so appreciated. I've tried researching this, but I can't find anything specific enough to answer my questions.
Here is the beginning of my desktop view file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="hwk5.css">
<script type="text/javascript" src="hwk5.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
And here is the beginning of my mobile view file:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<style>
img.fullscreen {
max-height:50%;
max-width:50%;
}
</style>
</head>
<body>
As I said in my comment, you could just detect mobile browsing with PHP and redirect the user to the desktop or mobile site accordingly, but if you really want to do this with jQuery, it is possible.
You would want to check the page width onReady and onResize:
$(document).ready(function(){resize();});
$(window).resize(function(){resize();});
function resize()
{
var mobileMaxWidth = 640; //Define this to whatever size you want
if($(window).width() > mobileMaxWidth)
{
$("div#desktop").show();
$("div#mobile").hide();
}
else
{
$("div#desktop").hide();
$("div#mobile").show();
}
}
JSFiddle
As far as jQuery messing up your desktop site, you must be using another DOM. Are you importing MooTools or another popular DOM that uses $? If so, you would need to explicitly mark jQuery code as jQuery("selector")... instead of $ or use jQuery.noConflict.
For more information, see this post.
I Suggest You To Write Two Seperate CSS Files... One For Desktop And Other For Mobile. And According to the current screen size change the css files using javascript.
To achieve this You Can Use this script
<script type="text/javascript">
$(document).ready(function () {
changecss();
});
$(window).resize(function () { changecss(); });
function changecss() {
var windowwidth = $(window).width();
var windowheight = $(window).height();
if (windowwidth >= 1024 && windowheight >= 768) {
//alert('Screen size: 1024x768 or larger');
$("link[rel=stylesheet]:not(:first)").attr({ href: "Style2.css" });
}
else {
$("link[rel=stylesheet]:not(:first)").attr({ href: "Style1.css" });
}
}
</script>
HTML
<div>
The colour of this text will change.
</div>
Already searched the whole web for a solution. First i used jqplot for the visualization of a mysqldatabase, but with growing arrays i'm trying to switch to dygraph, moreover its optimiesed for timedate, the problem is i cannot get it to work on ie explorer <9 especially with regard to the document modus. also tested ietester....
the page of dygraph itself works with the graphs, copied the important parts from it but still cannot get it working, maybe someone can show me my mistake or is it better not to use dygraph?anyone makes use of this and gets it working for internetexplorer 6-8?
The problem is the jquery document.ready function without it everything works fine...
<!DOCTYPE html>
<html>
<head>
<!-- Framework,Diagramm-Klasse,Jqplot,Jqplot Plugin -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Konfigurationstool</title>
<script type="text/javascript" src="jquery-test.js"></script>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="dygraph-combined.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
g = new Dygraph(document.getElementById("diagrammpreview"), [[1,10,100], [2,20,80], [3,50,60], [4,70,80]]
);
});
</script>
<div id="diagrammpreview" style="height:500px;width:500px;"></div>
</body>
</html>
thanks in advance
What does the debug console in IE say the problem is? It's probably either a race condition or a conflict with the $ variable. You can try to use a pure javascript alternative the ready/load function such as:
window.onload=function() {
g = new Dygraph(document.getElementById("diagrammpreview"), [[1,10,100], [2,20,80[3,50,60], [4,70,80]]);
});
I had the same problem in IE and FF.
$(window).load(function) {
instead of
$(document).ready(function) {
helped, together with including the jquery library directly into the html file (although it was included in my CMS)
I'm writing text to a page using document.write for a Chrome extension, but the associated custom CSS isn't applied:
<!DOCTYPE html>
<html>
<head>
<title>TITLE GOES HERE</title>
<link rel="stylesheet" href="css/popup.css" type="text/css" />
</head>
<body>
<script type="text/javascript">
...
function showFolder(folder) {
console.debug('FOLDER: '+folder.title);
document.write('<p>'+folder.title+'<br></p>');
}
</script>
</body>
</html>
The CSS is simple, just for debugging:
p {
color: red;
}
I can get it to work if I put the stylesheet link inside the function showFolder, but that can't be the proper way to do it. I'm learning jscript/CSS on the fly, so the answer is probably something remedial. Is the problem in the jscript, the CSS or both?
Use innerHTML.
<div id="towrite"></div>
then you can write in it like this:
div=document.getElementById('towrite');
div.innerHTML = '<p>'+folder.title+'<br></p>';
If you run your document.write() before the page finishes loading (perhaps calling your showFolder call directly from a script on the page), then the text will be written into the document as you might expect.
However, if you call document.write after the page loads, as in an event handler, you will be writing an entirely new page. This is usually not what you want.
Instead, follow Zoltan's advice and set the innerHTML property of an empty div.
I'm not javascript expert... I mainly use jQuery.. but try this, kind of makes sense:
<!DOCTYPE html>
TITLE GOES HERE
<script type="text/javascript">
...
function showFolder(folder) {
console.debug('FOLDER: '+folder.title);
document.write('<p>'+folder.title+'<br></p>');
}
</script>
<link rel="stylesheet" href="css/popup.css" type="text/css" />
EDIT:
So the above didn't work, but I just thought about another solution. When are you actually calling the function? Try to put it in <body onLoad="functionnamehere()">
No idea if that works, but give it a try.