This is a followup question to WebView vs TextView for displaying html content
Here is the code
webView.loadDataWithBaseURL(url,value, "text/html", "UTF-8",url);
And here is the html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link href="/stylesheets/shCore.css" rel="stylesheet" type="text/css"/>
<link href="/js/style/shThemeDefault.css" rel="stylesheet" type="text/css"/>
<script src="/js/shCore.js" type="text/javascript"></script>
<script src="/js/shAutoloader.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/shBrushPython.js"></script>
<script type="text/javascript" src="/js/shBrushJava.js"></script>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
<link rel="stylesheet" href="/stylesheets/jquery-ui.css"/>
<link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon"/>
<script src="/js/jquery/jquery-1.8.3.js"></script>
<script src="/js/jquery/jquery-ui.js"></script>
<style>
.syntaxhighlighter .toolbar {
background-color: #ffffff !important;
color: #ffffff !important;
}
.syntaxhighlighter .toolbar a,.syntaxhighlighter .toolbar a:hover {
background-color: #ffffff !important;
color: #ffffff !important;
}
</style>
</head>
<body>
<pre class='brush:java'>my java code in here </pre>
</body>
</html>
The CSS is not taking effect as the code is not highlighted. How might I fix this?
Related
I'm new to this topic and I have an index.html file and there I want to use three.js
this is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
<canvas class="webgl"></canvas>
<script src="../libs/three.js"></script>
<script src="../libs/three.min.js"></script>
<script src="../libs/stats.min.js"></script>
<script src="../libs/OrbitControls.js"></script>
<script type="module" src="./main.js"></script>
</div>
</body>
</html>
I also try this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<canvas class="webgl"></canvas>
<script src="../libs/three.js"></script>
<script src="../libs/three.min.js"></script>
<script src="../libs/stats.min.js"></script>
<script src="../libs/OrbitControls.js"></script>
<script type="module" src="./main.js"></script>
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
</div>
</body>
</html>
and my css file :
* {
margin: 0;
padding: 0;
}
html,
body {
overflow: hidden;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04aa6d;
color: white;
}
.webgl {
position: fixed;
top: 0;
left: 0;
outline: none;
}
My problem is that div for menubar didn't show in front of the canvas.
what should I do?
Thanks.
Transform your HTML into something like below:
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
</div>
<canvas class="webgl"></canvas>
<!-- script tags -->
then remove position, left and top properties from webgl class.
My resizeable function will not work, despite the fact that I have the correct jqueryui libraries. Here is what my code looks like:
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Default functionality</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>
<link href="jqueryi-ui/jquery-ui.css" rel="stylesheet">
<style type="text/css">
#resizable {
width: 150px;
height: 150px;
background-color:green;
padding: 0.5em; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</body>
</html>
What am I doing wrong?
Try your code at Codepen
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Default functionality</title>
<!--
<script type="text/javascript" src="jquery.min.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>
<link href="jqueryi-ui/jquery-ui.css" rel="stylesheet">
-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style type="text/css">
#resizable {
width: 150px;
height: 150px;
background-color:green;
padding: 0.5em; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</body>
</html>
WORKED, by only replace your jquery.js/jquery-ui.js/jquery-ui.css reference. So, you may check your jquery/jquery-ui lib version and path reference.
Or check this post: jquery-ui Resizable.
When I run my code I can only see the STANDARD TEST paper-header-panel.
Everything within paper-drawer-panel seems to be hidden.
If I set the initial paper-header-panel(class=blue) to 1000px, The rest of the content will show.
Is there anything I need to set so the initial paper-header-panel will change it's height automatically based on the content?
Thanks
<link rel="import" href="/apps/polymer-chat/js/bower_components/polymer/polymer.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-menu/paper-menu.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-item/paper-item.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/apps/polymer-chat/css/app-theme.html">
<dom-module id="main-component">
<link rel="import" type="css" href="/apps/polymer-chat/css/main-component.css">
<template>
<paper-header-panel class="blue">
<div class="paper-header">STANDARD TEST</div>
<paper-drawer-panel
id="mainDrawerPanel"
class="main-drawer-panel"
responsive-width="600px"
drawer-width="[[_computeListWidth(_isMobile)]]"
drawer-toggle-attribute="list-toggle"
narrow="{{_isMobile}}"
>
<paper-header-panel class="list-panel" drawer>
<paper-menu class="list" on-iron-activate="_listTap">
<paper-item>1</paper-item>
<paper-item>2</paper-item>
<paper-item>3</paper-item>
<paper-item>4</paper-item>
</paper-menu>
</paper-header-panel>
<paper-header-panel class="content-panel" main>
<paper-toolbar responsive-width="600px">
<paper-icon-button icon="menu" list-toggle></paper-icon-button>
<span class="flex">CHAT PERSON NAME HERE</span>
</paper-toolbar>
<div class="content">MAIN AREA</div>
</paper-header-panel>
</paper-drawer-panel>
</paper-header-panel>
</template>
<script>
Polymer({
is: 'main-component',
_computeListWidth: function(isMobile) {
// when in mobile screen size, make the list be 100% width to cover the whole screen
return isMobile ? '100%' : '25%';
},
_listTap: function() {
this.$.mainDrawerPanel.closeDrawer();
}
});
</script>
</dom-module>
:host {
display:block;
}
.paper-header {
height: 60px;
font-size: 20px;
color: var(--text-primary-color);
line-height: 60px;
padding: 0 30px;
}
.blue .paper-header {
background-color: var(--default-primary-color);
}
.list-panel {
background-color: #fafafa;
--paper-header-panel-standard-container: {
border-right: 1px solid #ccc;
};
}
paper-toolbar {
background-color: #42A5F5;
}
.list {
background-color: #FFFFFF;
}
.list paper-item {
height: 80px;
border-bottom: 1px solid #dedede;
background-color: #fafafa;
color: #000000;
}
.main-drawer-panel:not([narrow]) [list-toggle] {
display: none;
}
.content {
height: 3000px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>Polymer Demo</title>
<script src="js/bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="/apps/polymer-demo/components/main-component.html">
<style is="custom-style">
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body class="fullbleed layout vertical">
<main-component></main-component>
</body>
</html>
Nevermind. I figured out the problem.
The issue was being caused by the HTML DOCTYPE
After removing it. Everything is now working correctly.
Hello everyone I am creating a math game for kids and I want the user to be able to change the background image of their game when he/she clicks a button
I have a space / jungle / desert theme I tried this code that i found online but it won't work it works here though http://jsfiddle.net/Eqdfs/27/
how come?
Please keep in mind that I am using jquery mobile in my original program and I have a default background set with this code
<style>
body {
background-image: url("http://s21.postimg.org/9bj52fal3/sdfsdfdsf.jpg");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
background-size:100% 100%;
}
.ui-page {
background: transparent;
}
.ui-content{
background: transparent;
}
</style>
then i found this code that claims it can add buttons that will change the background image but I cant get it to work in this simple html file yet alone in my actual game
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset = "utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="//http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.js></script>
<script src="//http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.min.js></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style>
body {
background-repeat:repeat;
background-position:top-left;
}
body.class1 {
background-image:url('http://www.dca.fee.unicamp.br/~lotufo/Courses/ia-636-1995/alberto/proj5/html/pattern_Id.gif');
}
body.class2 {
background-image:url('http://upload.wikimedia.org/wikipedia/commons/e/ec/Pattern_square_16.png');
}
body.class3 {
background-image:url('http://www.herbactive.com.br/catalog/view/theme/default/image/pattern/pattern-11.png');
}
</style>
<script>
$("#btn1").click(function() {
$('body').removeClass();
$('body').addClass('class1');
});
$("#btn2").click(function() {
$('body').removeClass();
$('body').addClass('class2');
});
$("#btn3").click(function() {
$('body').removeClass();
$('body').addClass('class3');
});
</script>
</head>
<body>
<a id="btn1">Noise BG</a><br/>
<a id="btn2">RVB BG</a><br/>
<a id="btn3">dunno BG</a>
</body>
</html>
the real problem is the jquery-mobile and jquery-UI are conflicting each other. Also there are few markup problems in your design. Try this code and check if its working
EDIT Updated jquery. Now the background is changing with single click.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style type="text/css">
body {
background-repeat: repeat;
background-position: top-left;
}
a#btn1,
a#btn2,
a#btn3 {
color: #fff;
cursor: pointer;
background: #333;
padding: 0px 15px;
}
body.class1 {
background-image: url('http://www.dca.fee.unicamp.br/~lotufo/Courses/ia-636-1995/alberto/proj5/html/pattern_Id.gif');
}
body.class2 {
background-image: url('http://upload.wikimedia.org/wikipedia/commons/e/ec/Pattern_square_16.png');
}
body.class3 {
background-image: url('http://www.herbactive.com.br/catalog/view/theme/default/image/pattern/pattern-11.png');
}
</style>
</head>
<body>
<a id="btn1">Noise BG</a>
<br/>
<a id="btn2">RVB BG</a>
<br/>
<a id="btn3">dunno BG</a>
<script>
$("#btn1").click(function() {
$('body').removeAttr('class');
$('body').attr('class', 'class1');
});
$("#btn2").click(function() {
$('body').removeAttr('class');
$('body').attr('class', 'class2');
});
$("#btn3").click(function() {
$('body').removeAttr('class');
$('body').attr('class', 'class3');
});
</script>
</body>
</html>
Your fiddle code actually worked for me running inside MS Edge.
Just Change this line:
<SCRIPT LANGUAGE="JavaScript">
to
<script>
Additionally, You aren't defining type while including script files, Add this line too in each opening <script> tag
type="text/javascript"
I tried to create a jQuery function .hover to change the background-color of div by using another class and using hover to addClass and removeClass.
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script type='text/javascript' src='script.js'></script>
<title>Untitled 1</title>
</head>
<body>
<div>HOME</div>
<div>ABOUT</div>
<div>CONTACT</div>
</body>
</html>
CSS:
div {
display:inline;
font-family: Helvetica;
color: white;
background-color:#FF6666;
padding: 20px;
}
.hltd {
display:inline;
font-family: Helvetica;
color: black;
background-color:#66FF33;
padding: 20px;
}
Javascript:
$(document).ready(function(){
$('div').hover(
function(){
$(this).addClass('hltd');
},
function(){
$(this).removeClass('hltd');
}
);
});
You haven't included the Jquery library. Include it before your script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>
$(document).ready(function() {
$('div').hover(
function() {
$(this).addClass('hltd');
},
function() {
$(this).removeClass('hltd');
}
);
});
div {
display: inline;
font-family: Helvetica;
color: white;
background-color: #FF6666;
padding: 20px;
}
.hltd {
display: inline;
font-family: Helvetica;
color: black;
background-color: #66FF33;
padding: 20px;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>
<title>Untitled 1</title>
</head>
<body>
<div>HOME</div>
<div>ABOUT</div>
<div>CONTACT</div>
</body>
</html>
Though, if you are only trying to change the background colour, CSS would be a better option.
use css :hover pseudo-class instead of JS
div {
display: inline;
font-family: Helvetica;
color: white;
background-color: #FF6666;
padding: 20px;
}
div:hover {
color: black;
background-color: #66FF33;
}
<div>HOME</div>
<div>ABOUT</div>
<div>CONTACT</div>
Its work for me..
$(document).ready(function(){
$('div').hover(
function(){
$(this).addClass('hltd');
},
function(){
$(this).removeClass('hltd');
}
);
});
div {
display:inline;
font-family: Helvetica;
color: white;
background-color:#FF6666;
padding: 20px;
}
.hltd {
display:inline;
font-family: Helvetica;
color: black;
background-color:#66FF33;
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script type='text/javascript' src='script.js'></script>
<title>Untitled 1</title>
</head>
<body>
<div>HOME</div>
<div>ABOUT</div>
<div>CONTACT</div>
</body>
</html>
It has worked for me, confirm your script referenced correctly. I could suggest to open your inspect element and check the console and view any errors which you may encounter. If you nothing appears, use the browser debugger.
I have used the following online link for jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>