I have seen similar posts ..I have modified my code and currently using this Code to add color to Hyperlink Text..My Hyperlink generates at runtime in HTML output..I have multiple css ..I think css effects are overriding
a:link
{
color: red;
color: inherit;
text-decoration:underline;
}
also tried this one :
a:link
{
color: #fff;
text-decoration:underline;
}
My Script:
function (response) {
obj =response.d;
var output = "<table class='table'><tr><th>Serial No.</th><th>UFZillaID</th><th>MZillaID</th><th>Status</th></tr>";
for (var x = 0; x < obj.length; x++) {
output += "<tr><td >" + obj[x].EMID + "</td></tr>";
}
output += "</table>";
$("#result").append(output);
this is my markup
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="UFZillaErrorStatus.aspx.cs"
Inherits="Dashboard.Web.UFZillaErrorStatus" %>
<!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 runat="server">
<title>UFZillaErrorStatus</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800|Open+Sans+Condensed:300,700"
rel="stylesheet" />
<link href="css/home.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/themes/ui-lightness/jquery-ui-1.10.1.custom.css" rel="stylesheet"
type="text/css" />
<link href="css/assets/style.css" rel="stylesheet" type="text/css" />
<link href="js/common/jquery.jqGrid-4.5.4/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="js/common/jquery.jqGrid-4.5.4/js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/common/jquery/json2.js" type="text/javascript"></script>
<script src="js/common/jquery/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="js/common/jquery.jqGrid-4.5.4/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/common/jquery.jqGrid-4.5.4/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/common/jquery.jqGrid-4.5.4/plugins/grid.postext.js" type="text/javascript"></script>
<script src="js/JqueryFileupload/jquery.fileupload.js" type="text/javascript"></script>
<script src="js/JqueryFileupload/jquery.iframe-transport.js" type="text/javascript"></script>
<script src="js/common/jquery/jquery.alphanumeric.js" type="text/javascript"></script>
<script src="js/dashboard/UFZillaErrorStatus.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="content1" style="background: 0 0 0 #FFFFF">
<div id="uferrdivs" align="center">
<table>
<tr>
<td>
Product
</td>
</tr>
<tr>
<td>
<select id="proselct">
</select>
</td>
</tr>
</table>
<center>
<div>
<div id="result" style="background-color: #F5F5F5; width: 800px; margin-top: 50px;">
</div>
</div>
</center>
</div>
</div>
</form>
</body>
</html>
..Underline effect appears..But color not changing ..I have tried other method .But Not working ...
Any Suggestion would be helpful
Remove:
color: inherit;
As this is overriding your colour that you want.
Ensure that your tag contains
href="#"
At minimum.
Try simplest way
use this css
a, a * {
color: #FFF !important; // important will avoid if any other css try to override it
}
If your background color is WHITE, link will not be visible. Because you set the same color for link
color: #FFF;
Try with different color
Try to remove
color: inherit;
and see it will work.
Simple demo of both
Fiddle Demo using inherit
Fiddle Demo without using inherit
Related
How can I use Ace text editor to open local files with extensions such as HTML, CSS, and js? I imagine there is a way to set up a button that opens your file selector, you can open one, and it opens the file for you to edit. Here is the code I use right now for Ace.
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/html");
// editor.setTheme("ace/theme/themeHere")
// editor.session.setmode("ace/mode/languageHere")
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE HTML Editor</title>
<!-- Put editor language e.g.: Ace HTML Editor -->
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<meta charset="UTF-8">
<!-- Defines character set -->
<link type="text/css" rel="stylesheet" href="../CSS/stylesheet.css">
<!-- CSS Stylesheet -->
<link type="image/x-icon" rel="shorcut icon" href="../Other/html5favicon.ico">
<!-- Favicon -->
<script type="text/javascript" src="../JavaScript/index.js"></script>
<!-- JavaScript Index -->
</head>
<body>
<div id="editnav">
<input type="button" id="downloadbtn" onclick="downloadHTML()" value="Download">
<input type="button" id="openbtn" onclick="openCode()" value="Open">
<input type="button" id="homebtn2" onclick="window.location.href = 'index.html';" value="Home">
</div>
<input type="button" id="togglebtn2" onclick="toggleVisibility2()" value="Toggle">
<div id="editor"><!DOCTYPE html>
<html>
<head lang="">
<meta charset="">
<link type="text/css" rel="stylesheet" href="">
<!-- CSS Stylesheet -->
<link type="image/x-icon" rel="shortcut icon" href="">
<!-- Favicon -->
<title></title>
</head>
<body>
<p>Ace HTML Editor</p>
</body>
</html></div>
<!-- In this div, put filler text -->
<!-- use < for < -->
<script src="../Other/Ace/ace-builds-master/src/ace.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
You can use the file input element as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE HTML Editor</title>
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 3em;
right: 0;
bottom: 0;
left: 0;
}
</style>
<meta charset="UTF-8">
</head>
<body>
<div id="editnav">
<input type="button" id="downloadbtn" onclick="downloadHTML()" value="Download">
<input type="file" id="openbtn" onchange="openCode(this.files)" value="Open">
<input type="button" id="homebtn2" onclick="window.location.href = 'index.html';" value="Home">
</div>
<div id="editor"></div>
<script src="http://ajaxorg.github.io/ace-builds/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="http://ajaxorg.github.io/ace-builds/src/ext-modelist.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor", {
theme: "ace/theme/monokai",
mode: "ace/mode/html",
placeholder: "choose file to edit"
});
function openCode(files) {
var file = files[0]
if (!file) return;
var modelist = ace.require("ace/ext/modelist")
var modeName = modelist.getModeForPath(file.name).mode
editor.session.setMode(modeName)
reader = new FileReader();
reader.onload = function() {
editor.session.setValue(reader.result)
}
reader.readAsText(file)
}
</script>
</body>
</html>
I'm using angular to make page identification before access to the app main,
in the templateUrl: login.html i cant do anything !
note: when I called the ng-app="myApp" will give this error :
Uncaught Error: [$injector:modulerr]
here my code JS:
angular.module('training')
.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'index.html',
controller: 'mainCtrl'
})
.when('/login',{
templateUrl: 'login.html',
controller: 'loginCrtl'
});
})
.controller('loginCrtl',['$scope','$timeout','apiservice','$routeProvider', function($scope,$timeout,apiservice,$routeProvider){
$scope.ppp= function(){
alert('ok');
}
}])
.controller('mainCtrl'......
here my login.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="public/jquery-1.11.2.min.js"></script>
<script src="public/jquery-ui.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<!-- <script src="bower_components/angular-route/angular-route.min.js"></script> -->
<script src="controllers/app.js"></script>
<script src="services/apiService.js"></script>
<script src="controllers/mainCrtl.js"></script>
</head>
<body ng-controller="loginCrtl">
<div class="center" style="width: 500px; height: 300px; background-color: #e5e5e5;">
Veuillez authentifier:<br><br>
Login: <input type="text" id="login"><br><br>
Password: <input type="text" id="pass">
<br><br>
<button id="ValidAccess" ng-click="ppp()">ok</button>
</div>
</body>
<style >
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</html>
my index.html:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Planni</title>
<link rel="stylesheet" type="text/css" href="mystyle/bootstrap-tokenfield.css">
<link rel="stylesheet" type="text/css" href="mystyle/bootstrap.min.css">
<link rel="stylesheet" href="mystyle/bootstrap-datepicker.css">
<link rel="stylesheet" href="mystyle/jquery-ui.css">
<script src="public/jquery-1.11.2.min.js"></script>
<script src="public/jquery-ui.js"></script>
<script src="public/bootstrap-datepicker.js"></script>
<script src="node_modules/lodash/lodash.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/moment/min/moment-with-locales.min.js"></script>
<script src="public/daypilot/daypilot-all.min.js"></script>
<script src="public/bootstrap-tokenfield.js"></script>
<script src="public/bootstrap.min.js"></script>
<!-- <script src="bower_components/angular-route/angular-route.js"></script> -->
<script src="controllers/app.js"></script>
<script src="services/apiService.js"></script>
<script src="controllers/mainCrtl.js"></script>
</head>
<body data-ng-app="training" data-ng-controller="mainCtrl">
....
</body>
</html>
Where your ng-app ? module of you is training call ng-app ='training' not ng-app='myApp'
Promblem of you is not setting it use like this
angular.module('training',['ngRoute'])
Here is set a module
angular.module('training',[])
and here is get a module
angular.module('training')
EDIT
You use like this
angular.module('training',['ngRoute'])
.controller('mainCtrl',mainCtrl)
.controller('loginCtrl',loginCtrl)
function mainCtrl(){
//
}
function loginCtrl(){
//
}
or if you have another module contain loginctr use like this
angular.module('anothermodule',[])
.controller('loginCtrl',loginCtrl)
function loginCtrl(){
//
}
And in training app include it
angular.module('training',['ngRoute','anothermodule'])
first of all, you need to add the ng-app directive to your html file. my recommendation is to add it inside html tag
<html ng-app="training">
then in the js, when you are initializing the module, need to add empty square brackets to the module
angular.module('training',[])
I assume for the router you are using ngRoute. in that case, you need to inject the route module to your training module
angular.module('training',['ngRoute'])
i want embed a nplot into shiny, the server.R like
shinyServer(function(input, output) {
output$testChart <- renderChart2({
n1<-nPlot(Freq ~ Var1, data=speedTable, type="discreteBarChart", color="blue")
n1$xAxis(axisLabel = "Heading")
n1$yAxis(axisLabel = "label", width = 40)
n1$set(title = "Title")
n1$addParams(dom = 'testChart')
return(n1)
})
})
and my index.html like this:
<html>
<head>
<script src="shared/jquery.js" type="text/javascript"></script>
<script src="shared/shiny.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="shared/shiny.css"/>
</head>
<body>
<br />
<br />
<hr />
<div class="rChart nvd3" id="testChart"></div>
</body>
</html>
but in the page dosenot show anything?
Your help will be much appreciated
Hi you have to download D3 and NVD3 and include those into your HTML :
<script src="d3.min.js"></script>
<link href="nv.d3.min.css" rel="stylesheet">
<script src="nv.d3.min.js"></script>
And for the graph do something like that :
<div id="testChart" class="shiny-html-output rChart nvd3"></div>
<style>.nvd3-svg { margin: 0px; padding: 0px; height: 100%; width: 100%; }</style>
I have created two href's which act like buttons, in a comic game. I am following this tutorial . The issue i have is the links are not clickable. They dont respond to touch, nothing happens when clicked.
Here is the project structure:
here is my styles.css:
* {
font-family: Verdana, Lucida Sans, Arial, Helvetica, sans-serif;
}
body {
margin: 0px auto;
background-color:#0a3003;
}
img {
margin:0px;
padding:0px;
border:0px;
width:100%;
height:auto;
display:block;
float:left;
}
.btn {
display: inline-block;
padding: 15px 4% 15px 4%;
margin-left: 1%;
margin-right: 1%;
margin-top: 5px;
margin-bottom: 5px;
font-size: 30px;
text-align: center;
vertical-align: middle;
border: 0;
color: #ffffff;
background-color: #4b4237;
width: 40%;
height: 80px;
text-decoration: none;
}
and now i'll show you the index.html where the button is not clickable from :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>2nd Race</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<!-- load theme file for your application -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<div>
<img src="images/coverpage.png" alt="Cover Page"/>
</div>
<div>
<a href="#" class="btn" ><<</a>
<a href="comic/page1.html" class="btn" >>></a>
</div>
</div>
<script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
<script type="text/javascript" src="js/circle-helper.js"></script>
<script src="app.js"></script>
<script src="lowBatteryCheck.js"></script>
</body>
</html>
When i load the program onto the tizen wearable emulator it looks like this but nothing is clickable:
In my opinion,
if you want to move between pages with tau.js library, you need to follow their rule. Here is some reference guide.
https://developer.tizen.org/development/ui-practices/web-application/tau/hello-world#fill_content
Maybe this issue was appeared because you didn't define "page" of TAU.
It is very simple. Just insert class="ui-page" in root <div> tag.
I tested on my desktop with Tizen IDE. In your index.html,
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>2nd Race</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<!-- load theme file for your application -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="ui-page">
<div class="ui-content">
<img src="images/coverpage.png" alt="Cover Page"/>
<div>
<<
>>
</div>
</div>
</div>
<script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
<script type="text/javascript" src="js/circle-helper.js"></script>
<script src="app.js"></script>
<script src="lowBatteryCheck.js"></script>
</body>
</html>
And on every other pages(comic/page1.html, page2.html... etc)
<!DOCTYPE html>
<html>
<body>
<div class="ui-page">
<div class="ui-content">
<img src="../images/page1.png" alt="Page 1" />
<div>
<a href="../index.html" class="btn" ><<</a>
<a href="page2.html" class="btn" >>></a>
</div>
</div>
</div>
<script type="text/javascript" src="../../lib/tau/wearable/js/tau.min.js"></script>
</body>
</html>
Please try again with above my example.
I checked that project runs well now :)
Have updated the css and html as the answers indicate but unfortunately the style information is still not being passed to the td. The class is defined as limits but no style.
Having some trouble with something very basic.
HTML
<%= stylesheet_link_tag "test.css" %>
</head>
<body>
<table class="results">
<% #result.each do |object|%>
<tr>
<td class="limit"> <%= object%> </td>
</tr>
<%end%>
</table>
</body>
CSS
table.results
{
width: 100%;
border: .2em ridge #000000;
}
td.limit
{
width:50%;
background-color: #fff000;
border: .2em ridge #0f0f0f;
}
In the resulting output. the table which has its class defined outside the ruby loop has all its style attributes included fine.
However the TD inside the ruby for.each loop does not. Is there some specific way to add a class to a HTML element in Ruby?
output html table as requested
<!DOCTYPE html>
<html>
<head>
<title>Crawler</title>
<link href="/stylesheets/globalStyleSheet.css?1312383253" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.inputlimiter.1.0.css?1312464674" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/test.css?1313055311" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/prototype.js" type="text/javascript"></script>
<script src="/javascripts/effects.js" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js" type="text/javascript"></script>
<script src="/javascripts/controls.js" type="text/javascript"></script>
<script src="/javascripts/rails.js" type="text/javascript"></script>
<meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="fQ/oa3q+Aq68GZenV26YuwPjDgbijTeuO3VJihtYHI8="/>
</head>
<body>
<html>
<head>
<link href="/stylesheets/test.css?1313055311" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<table class="results">
<tr id="test-tr">
<td class="limit"> blag blah </td>
</tr>
<tr >
<td class="limit"> testing 45 </td>
</tr>
<tr >
<td class="limit"> testing</td>
</tr>
</table>
</body>
</html>
</body>
</html>
You're missing a semicolon after the background-color property in the CSS for your td. That'll be knocking out both the background-color and border properties.
You may want to take advantage of the W3C CSS Validation Service for basic sanity checking of your CSS. In your case, it says:
td.limit Value Error : background-color attempt to find a semi-colon before the property name. add it
...which is a bit cryptic, I admit, but at least a reasonable pointer towards your problem.
It is not about Ruby or Rails at all.
You have got EXTRA space between class and ="limit"
<td class ="limit"> <%= object%> </td>
#=> should be
<td class="limit"><%= object %></td>