I am using extjs 3.2. I just tried one sample for grid row coloring with reference to http://skirtlesden.com/articles/styling-extjs-grid-cells. added grid view config in gridExample.js file which is holding static gird.,
viewConfig: {
stripeRows: false,
getRowClass: function(record) {
return record.get('age') < 18 ? 'child-row' : 'adult-row';
}
and added CSS in html page.
HTML code is,
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>success</title>
<link href="/testing/ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<link href="/testing/ext/resources/css/test.css" rel="stylesheet" type="text/css" />
<style>
.child-row .x-grid-cell {
background-color: #ffe2e2;
color: #900;
}
.adult-row .x-grid-cell {
background-color: #e2ffe2;
color: #090;
}
</style>
<script src="/testing/ext/adapter/ext/ext-base.js"></script>
<script src="/testing/ext/ext-all.js"></script>
<script src="/testing/JS/gridExample.js"></script>
</head>
<body>
</body>
</html>
But grid row color not changed. Most of forums sure about code. So, is it any problem with css in html page? Thanks in advance.
Ext 3.x uses CSS classes of the form x-grid3-... for grid elements.
You can inspect this 3.2 example's markup to see for yourself.
So, your CSS should be:
.child-row .x-grid3-cell {
background-color: #ffe2e2;
color: #900;
}
I had to add !important to those properties to get something similar to work.
.child-row .x-grid-cell {
background-color: #ffe2e2 !important;
color: #900 !important;
}
Related
There is a variation of threads on this topic but unfortunately none appears to address my issue.
Our progress bar is design to display when page loads and this progress bar is doing just that.
The issue is that after showing progress bar briefly, user is supposed to be redirected to another page called classes.aspx.
This is not happening. The progress bar does not disappear and does not redirect to another page.
Any ideas what I am missing?
Below is the exact code I am using.
//HTML
<%# Page Language="VB" AutoEventWireup="false" CodeFile="default.aspx.vb" Inherits="Main" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Class Form</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge, IE=8, IE=9, IE=10, IE11,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
$(window).load(function () {
ShowProgress();
});
</script>
<link rel="shortcut icon" href="~/images/favicon.ico" />
<style type="text/css">
.modal {
position:relative;
top:-1em;
z-index:100;
}
.loading{
font-family: Arial;
font-size: 10pt;
width: 200px;
height: 100px;
display: none;
position: fixed;
margin-top:400px;
margin-left: 0px;
background-color: White;
z-index: 999;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="loading" style="margin-top:100px;margin: auto;">
Loading. Please wait.<br />
<br />
<img src="images/loader.gif" alt="" />
</div>
</form>
</body>
</html>
//VB
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Threading
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Partial Public Class Main
Inherits System.Web.UI.Page
Protected Sub Page_Load(sender As Object, e As EventArgs)
Response.Redirect("classes.aspx")
End Sub
End Class
Thanks in advance
Following is the html-javascript code for setting the background image and background image.
<html>
<link rel="stylesheet" type="text/css" href="try2.css">
<body>
Choose the color<br>
<div class="foo" id="#13b4ff" style="background-color:#13b4ff;"></div>
<div class="foo" id="ab3fdd" style="background-color:#ab3fdd;"></div>
<div class="foo" id="ae163e" style="background-color:#ae163e;"></div>
<br><br>
<div id="myframe1" style="padding:5px;width:300px;height:400px;border:1px solid black;">
<p><img src="img-thing.png" style="width:200px;height:200px;"/><p>
</div>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$('.foo').click(function(){
var str1 = $(this).attr('id');
var myframe = document.getElementById('myframe1');
myframe.style.backgroundColor=str1;
myframe.style.width=300;
myframe.style.height=400;
});
});
</script>
<div><input type='file' onchange="readURL(this);" />
<img id="blah"/></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#myframe1').css({
'background':'url('+e.target.result +')',
'background-size':'310px 410px'
});
};
reader.readAsDataURL(input.files[0]);//To display images uncomment this
}
}
</script>
</body>
</html>
The CSS FILE FOR COLORS IS(just in case you need to look at that as well)
.foo {
float: left;
width: 20px;
height: 20px;
margin: 5px 5px 5px 5px;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
}
Now the problem is:
I want that user may click upload image option first and upload the image as a background. But once that is done it not allowing user to se color as a background. How to fix that? On the contrary if color is choosen and then image, image can override as background.I want that both must be able to override each other. For convenience I also the fiddle link : here Also one more issue in the fiddle, other colors are not showing up, but they are working in my html file.
First of all correct your id name of class foo . use # in all ids ok
next empty the background of the div while on clicking of color div by
myframe.style.background="";
: Here is your corrected working code now
I think you can achieve by adopting two DIVs, one of them is used to render background images and the other render background color.
By changing 'z-index' of DIV, you can display COLOR at top or bottom.
Hope this can help you .
The following code should work under mainstream browser.
Take a try.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<style>
#DivBgColor,#DivBgImage{
position:absolute;
left:100px;
top:100px;
width:300px;
height:300px;
}
#DivBgColor{background-color:red;z-index:2}
#DivBgImage{background-image: url(https://s.yimg.com/rz/l/yahoo_en-US_f_p_142x37.png);background-repeat: no-repeat;z-index:4}
</style>
<script language=javascript>
function makeColorAbove(){
var objColor = document.getElementById("DivBgColor");
var objImage = document.getElementById("DivBgImage");
objColor.style.zIndex=2;
objImage.style.zIndex=1;
}
function makeImageAbove(){
var objColor = document.getElementById("DivBgColor");
var objImage = document.getElementById("DivBgImage");
objColor.style.zIndex=1;
objImage.style.zIndex=2;
}
</script>
<body>
<div id="DivBgColor" ></div>
<div id="DivBgImage"></div>
<input type=button value="makeColorAbove" onclick="makeColorAbove()">
<input type=button value="makeImageAbove" onclick="makeImageAbove()">
</body>
</html>
I am using Cufon and I have my navigation and all of my content is on one page and it is scrolling via anchor tag to that section of the page, yet the navigation stays visible I want when you click a link that link will light up:
Here is what I have so far:
<!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" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Veneer_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1 a', {
hover: true
});
</script>
<style type="text/css">
h1 a.selected {
color: red;
}
</style>
</head>
<body>
<div class="home-link"><h1><a class="selected" href="#home">Home</a></h1></div>
<div class="hiw-link"><h1><a class="" href="#howitworks">How It Works</a></h1></div>
<div class="faq-link"><h1><a class="" href="#faq">Faq</a></h1></div>
<div class="prize-link"><h1><a class="" href="#prizes">Prizes</a></h1></div>
<div class="media-link"><h1><a class="" href="#media">Media</a></h1></div>
<div class="rules-link"><h1><a class="" href="#rules">Rules</a></h1></div>
<script type="text/javascript">
$('#home-link','#hiw-link','#faq-link','#prize-link','#media-link','#rules-link').toggleClass(selected, addOrRemove);
</script>
</body>
</html>
So basically as you see I am just trying to add the class of selected to the anchor tag and remove it from everything else so only that link is red. Help is greatly appreciated.
jsBin demo
$('div[class$=link] h1 a').click(function(e){
e.preventDefault();
$('div[class$=link] h1 a').removeClass('selected');
$(this).addClass('selected');
Cufon.refresh(); // Will refresh all `Cufon` text
});
Since you are using Cufon text so you need to call Cufon.refresh(); after you change any class to Cufon text, otherwise it won't take effect.
$('div[class$=link] h1 a').click(function(e){
e.preventDefault();
$('div[class$=link] h1 a').removeClass('selected');
$(this).addClass('selected');
Cufon.refresh(); // Will refresh all `Cufon` text
});
You are using the ID selectors, instead you should be using the class selectors (since you have home-link etc assigned to class attribute and not id attribute of the div elements)
Try this:
var selected = "selected"; //Assuming you are storing it in a variable
$(function(){
var allLinks = $('.home-link,.hiw-link,.faq-link,.prize-link,.media-link,.rules-link');
allLinks.click(function(e){
allLinks.find("h1 > a").removeClass(selected);
$(this).find("h1 > a").addClass(selected);
});
});
JsFiddle: http://jsfiddle.net/JsNBt/1/
I am having 2 issues with my code:
I want to limit the effects of the script to the div <div id="photo">
How can I make a sub layer to the script so that all the elements in the page don`t change position when the animation is triggered.
This is my code hope you can help.
<!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" />
<title>Untitled Document</title>
<style type="text/css">
.selected { border-style:solid; border-width:10px; border-color:#C00; margin:auto; z-index:2;}
#cret {
position:relative;
z-index:3;
border-style:solid; border-width:5px; border-color:#000000;
padding: 10px 10px 10px 10px;
margin:auto;
width:620px;
height:420px;
}
img {
position:static;
z-index:1;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"/></script>
</head>
<body>
<script type="text/javascript"/>
$(document).ready(function() {
$('img').width('10%').height('10%');
$('img').on("click", function() {
$(this).wrap('<div id="cret"/>');
$(this).animate({width:'600px', height:'400px'}).addClass("selected");
});
$(document).on("click", function(){
$("img").unwrap();
});
$('img').click(function(){ return false; });
$('#cret').click(function(){ return false; });
$(document).on("click", function(){
$('img').animate({width:'10%', height:'10%'}).removeClass("selected");
});
$('img').click(function(){ return false; });
$('#cret').click(function(){ return false; });
});
</script>
<div id="photo">
<img src="image source"/>
<img src="image source"/>
</div>
</body>
</html>
To limit the scope of the selector, you can specify a more precise jquery selector
instead of $('img') $('#photo img'); it will affect only img present in photo id div.
you should review your selector and the animate will be more effectively use in correct one...
like put your animate only on img.selected.
Hope it helps http://api.jquery.com/category/selectors/
My page:JSP+Struts2 tags+JQuery Library+JqueryUI
I have a JQuery selectmenu and two JQuery UI themes, i want to style the selectmenu with the second JQuery UI theme(css scope), but the content area(background of option tags) of my selectmenu is styled with the first theme!
What should I do?
here are some of my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%# taglib prefix="s" uri="/struts-tags"%>
<%# taglib prefix="sj" uri="/struts-jquery-tags"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<sj:head jqueryui="true" jquerytheme="orange" customBasepath="css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* selectmenu css */
fieldset { border:0; margin-bottom: 40px;}
label,select,.ui-select-menu { float: right; }
select { }
/*select with custom icons*/
body a.customicons { height: 2.8em;}
body .customicons li a, body a.customicons span.ui-selectmenu-status { line-height: 2em; padding-left: 30px !important; }
body .video .ui-selectmenu-item-icon, body .podcast .ui-selectmenu-item-icon, body .rss .ui-selectmenu-item-icon { height: 24px; width: 24px; }
/* /selectmenu css */
</style>
<!-- JQuery --><link type="text/css" href="css/orange/jquery-ui.custom.css" rel="stylesheet"/>
<!-- JQuery --><script type="text/javascript" src="js/jquery-ui.custom.min.js"></script>
<!-- interiorTheme --><link type="text/css" rel="Stylesheet" href="css/interior_uilightness/jquery-ui-1.8.13.custom.css">
<!-- selectMenu --><link type="text/css" rel="Stylesheet" href="css/element/jquery.ui.selectmenu.css">
<!-- selectMenu --><script type="text/javascript" src="js/element/jquery.ui.selectmenu.js"></script>
<script type="text/javascript">
//--selectmenu
$(function(){
$('select#buy_groupBy').selectmenu({
width: 220,
maxHeight: 400,
style:'popup',
format: addressFormatting
});
});
//a custom format option callback
var addressFormatting = function(text){
var newText = text;
//array of find replaces
var findreps = [
{find:/^([^\-]+) \- /g, rep: '<span class="ui-selectmenu-item-header">$1</span>'},
{find:/([^\|><]+) \| /g, rep: '<span class="ui-selectmenu-item-content">$1</span>'},
{find:/([^\|><\(\)]+) (\()/g, rep: '<span class="ui-selectmenu-item-content">$1</span>$2'},
{find:/([^\|><\(\)]+)$/g, rep: '<span class="ui-selectmenu-item-content">$1</span>'},
{find:/(\([^\|><]+\))$/g, rep: '<span class="ui-selectmenu-item-footer">$1</span>'}
];
for(var i in findreps){
newText = newText.replace(findreps[i].find, findreps[i].rep);
}
return newText;
}
//--/selectmenu
</script>
</head>
<body>
<div class="interior_UILightness">
<s:form action="buy.action" method="post" onsubmit="return validateBuy()" cssStyle="margin-top:-5px;">
<tr><td></td><td><s:hidden name="selectedGame"/></td></tr>
<s:select name="groupBy" label="xxxx" list="#{'1':'1','2':'2','3':'3'}" cssStyle="width:220px;"/>
<s:textfield name="symbol" label="xxxx" readonly="true" cssClass="strutsBuyTextField"/>
<s:textfield id="price" name="price" maxlength="16" label="xxxx" readonly="true" cssClass="strutsBuyTextField"/>
<s:textfield name="shares" maxlength="7" label="xxxx" cssClass="strutsBuyTextField" onkeyup="showDetails();" onkeydown="hideMessage();"/>
<s:submit value="xxxx" name="buySubmit" cssClass="submit" cssStyle="margin-right:80px"/>
</s:form>
</div>
</body>
</html>
I think you need to add the CSS scope before you download a custom theme. The struts jQuery plugin custom base path is used to specify the path to the theme if it is not in the default directory.
So, I think you need to download the custom theme and supply a CSS scope and also a theme folder name and then change the customBasepath to the directory with the theme folder name.
I know the question was asked over 3 years ago but I will answer it for those ( like me ) who found this topic while looking for the exact same problem.
I assume that your select box is placed in some div with the CSS scope of the second theme, e.g:
<div class="scope2" id="select-div">
<select id="select"></select>
</div>
In such case, if you take a look at the API of the selectmenu, you can find the information about appendTo property of the menu. If no value is passed, the div containing the expandable menu will be placed somewhere in the body of the page, probably at the bottom. In such case, the div with '' and all the <li> elements will not be placed in scope of the scope2 class and that is why the menu is styled with first theme.
$('#select').selectmenu( { appendTo : '#select-div' } ); will do the trick