Attempting a beginner's tutorial.
I have the following in my head:
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<linkrel="stylesheet"href="http://code.jquery.com/mobile/1.0.1/jquery.mobile1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
My result is just text, no Jquery mobile styling.
Is your mobile css not applying?
That CSS Link is invalid. You are missing the hyphen (-) in the link:
Here's the correct URL:
http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css
Related
I got a UI issue on bootstrap with sharepoint-2013. I had given all CSS and JS file path are correctly, but if i change CDN link from fire bug its working properly(only working in firebug), actually i am confusing why its not working directly from sharepoint. can you please help me anyone?
I have given file path
<link href="../../_layouts/15/Site/css/bootstrap.min.css" rel="stylesheet">
<script src="../../_layouts/15/Site/js/jquery.min.js" type="text/javascript"></script>
<script src="../../_layouts/15/Site/js/bootstrap.min.js" type="text/javascript"></script>
CDN
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
CDN working only when I change it from firebug. It is also not working from sharepoint after compiling.
Access the layout directly
Change path to
<link href="/_layouts/15/Site/css/bootstrap.min.css" rel="stylesheet">
<script src="/_layouts/15/Site/js/jquery.min.js" type="text/javascript"></script>
<script src="/_layouts/15/Site/js/bootstrap.min.js" type="text/javascript"></script>
Also will be better if you can use ~SiteCollection and ~Site using Sharepoint:scriptLink
<SharePoint:ScriptLink ID="ScriptLink1" Name="~SiteCollection/_layouts/...js" runat="server" />
<SharePoint:CssRegistration ID="CssRegistration1" Name="<% $SPUrl:~SiteCollection/_layouts/....css" %>" runat="server" After="corev15.css" />
I am using the resources plugin (1.2.8) to load my css and js files. it work great but the thing is that the URLs are "relative".
Example:
<r:require module="core"/>
I get something like this
<script src="/app/static/js/core.js" type="text/javascript"></script>
<link href="/app/static/css/core.css" type="text/css" rel="stylesheet" media="screen, projection">
But i want the URL to be ABSOLUTE. Something like this:
<script src="http://myServer.com/app/static/js/core.js" type="text/javascript"></script>
The behaviour i am looking is the same as the "absolute" option when using grails resources
<g:resource dir="css" file="main.css" absolute="true" />
Thanks in advance!
I'm trying to use Steroids with AngularJS for an application. Below is the stuff in my head tag.
<link rel="stylesheet" href="/vendor/ionic/css/ionic.css" />
<link rel="stylesheet" href="/stylesheets/application.css" />
<script src="http://localhost/cordova.js"></script>
<script src="/components/steroids-js/steroids.js"></script>
<script src="/components/angular/angular.min.js"></script>
<script src="/components/angular-touch/angular-touch.min.js"></script>
<script src="/components/lodash/dist/lodash.min.js"></script>
<script src="/components/restangular/dist/restangular.min.js"></script>
<script src="/models/<%= yield.controller %>.js"></script>
<script src="/controllers/<%= yield.controller %>.js"></script>
Now, I can tell the scripts are working, because the Angular stuff is. But the CSS won't load at all. It's in the /dist folder under the correct location, but it just won't load. Copy and pasting into a <style> works.
Any idea how I can fix this?
Thanks!
Try removing the DOCTYPE tag on your layout html file. It is a known issue, hope they fix this problem soon.
I've used colorbox in my project to show some details in a jQuery popup window. But the target page does not appear.
This is the code :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/colorbox.css" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.colorbox.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$(".iframe").colorbox({iframe:true, width:"70%", height:"70%"});
});
</script>
</head>
<body>
Click here
</body>
</html>
You can see at Here.
What's the problem ?
You are trying to display google.com in an iframe which is not as easy as with other sides.
It should work the way you did it with almost any other side.
Read this for more information: How to show google.com in an iframe?
I'm not sure with your purpose but if you want to embed google search on your website with iframe, you can try http://www.google.com/custom.
You can see demo here http://jsfiddle.net/devchill/LVunZ/
Click here
$(".iframe").colorbox({iframe:true, width:"70%", height:"70%"});
i am new to anything JQuery and only know basic HTML codes.
So I was wondering what why
<div data-inline="true">
Cancel
Save
</div>
did not work in my html file, even though I blatantly copied off the Jquery Documentation. The buttons did not appear side by side. Whereas when I tried
Cancel
Save
and the buttons appeared side by side.
Does it have to do with my importing the script?
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script
I'm not sure, but it is probale that:
the surrounding div causes that the anchors cannot be found by jQuery (or have different style)
you miss data-inline="true" in the upper lines
Cheers
i think you're referring to the documents from here.
my guess is that you didn't include the css file. jqm-docs.css
<head><base href="http://jquerymobile.com/test/docs/buttons/buttons-inline.html">
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>jQuery Mobile Docs - Buttons</title>
<link href="../../themes/default/" rel="stylesheet">
<link href="../_assets/css/jqm-docs.css" rel="stylesheet">
<script src="../../js/jquery.js"></script>
<script src="../../js/"></script>
<script src="../docs/docs.js"></script>
</head>