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>
Related
When I do the CTRL click in both visual studio and chrome console, the link goes to the right stylesheet so I know the link is right but for some reason it doesn't show in the console under "sources", only the index and js. Its not loading any of the CSS either. No idea why.
<head>
<link ref="stylesheet" type="text/css" href="stylesheet.css">
<script src='javascript.js' defer></script>
</head>
<body>
As long as the stylesheet is in the same folder as this HTML file, you'll want to change your <link> tag to read: <link rel="stylesheet" type="text/css" href="stylesheet.css"> (Source: https://www.w3schools.com/css/css_howto.asp)
I am trying to link my css to my vue.js file. I was building this out without the webpack. So I had many style worked out.. However, when I decided to move it to a webpack none of my custom css is even calling. I did research that said to include the css in the index.html as a link so that is what I have done. Is there a better way to do this that I didn't see? Any help would be much appreciated. It is also worth mentioning that I tried to use Include in the App.vue as well as require as I had seen in other suggestions but both pulled up errors and refused to compile any of my files....
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
<link rel="stylesheet" type="text/css" href="../src/assets/css/main.css">
<title>my-project</title>
</head>
<body>
<noscript>
<strong>We're sorry but my-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<p>this is test script</p>
<!-- built files will be auto injected -->
</body>
</html>
I used JQM's Themeroller to develop a theme for my application. Right now, I'm just trying to get it to work in Chrome.
I have the head of my HTML file set up like so:
<head>
<title>SafeRides</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="themes/SafeRidesTheme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
and my file director is as follows:
Application/
index.html
themes/
SafeRidesTheme.css
SafeRidesTheme.min.css
images/
Am I just missing something obvious in the layout of my files? If someone could help me realize what's going on here I'd greatly appreciate it.
When using custom theme made by Theme Roller, libraries should be loaded this way.
You should remove jQM defualt style sheet and load jQM structure style sheet before your custom one.
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<link rel="stylesheet" href="themes/SafeRidesTheme.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
I have tried looking through this site and Google'd many options, there are various ideas about saving the state of the UpdatePanel before the post-back, however I am unsure how to implement such a thing.
I have a UpdatePanel within a ASP.NET Page which refreshes a GridView - my code works well. However on the Async Post-back it causes the JQuery CSS to disappear which makes the text boxes look rounded, colour of text etc...
I do not need to add any JQuery events - however just need to know how to add the styling back into the Panel - adding the whole framework back in could also be an option.
I would add the code to my project but its massive - below are my JQuery references on my Site Master:
<!DOCTYPE html>
<html class="ui-mobile">
<head>
<!-- Apple Settings -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Apple Icons -->
<link rel="apple-touch-icon" href="/touch-icon-iphone.png"/>
<link rel="apple-touch-icon" href="/touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/touch-icon-ipad-retina.png" />
<link rel="icon" href="/touch-icon-ipad-retina.png" />
<!-- Style Sheets -->
<link rel="stylesheet" href="/themes/Sequencing_App_V2.min.css" />
<link rel="stylesheet" href="/css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="/css/Custom.css" />
<!-- JavaScript -->
<script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/javascript/Custom.js"></script>
<script type="text/javascript">
</script>
<script type="text/javascript" src="/js/jquery.mobile-1.2.0.min.js"></script>
<!-- Content Placeholders -->
<title><asp:ContentPlaceHolder ID="page_title" runat="server"></asp:ContentPlaceHolder></title>
<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
Can anyone help here?
I appreciate all the help you can offer.
Steve
jQuery mobile adds a lot of extra html elements when you construct it.
These will be lost after a PostBack, and you need to recreate it for the new elements in your UpdatePanel.
If you are using a listview to present your data, you will need to refresh it after the PostBack
<script type="text/javascript">
function handleEndRequest(sender, args)
{
$('table').listview('refresh');
//Refresh any other elements
}
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(handleEndRequest);
</script>
I have written a new website template. All works fine but there is one problem:
IE8 and lower don't load my stylesheet. I have no idea why.
I have tried it on multiple computers to eliminate the possibility of cache-problems or something like that.
The stylesheet is written with SASS (http://sass-lang.com/). But I think, this isn't the problem because I've made some other websites with SASS and everything works fine.
//EDIT:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>***</title>
<link rel="stylesheet" type="text/css" href="/styles/screen.css" />
</head>
<body>
</body>
</html>
You are using <section> elements that are new and IE8 doesn't know about by default. And because it doesn't know about them they are treated sort of like a span except you can't style them either using CSS.
The trick is to create the element before the page is is loaded and the browser can style them. The easiest way is to use something like html5shim. Just make sure to add the following code to your head section as it needs to run before the HTML starts rendering:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Some problem in your path I guess..
Possibility 1 :
<link rel="stylesheet" type="text/css" href="styles/screen.css" media="screen" />
Possibility 2 :
<link rel="stylesheet" type="text/css" href="../styles/screen.css" media="screen" />