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
Related
I have a code that allows my website users to upload to a central Google Drive account. So far it works great, I am simply trying to add in a progress bar.
Here, is the form HTML I have, I have been able to add a progress bar, it just does not move from 0%.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS File Upload</title>
<style>
.container {
width: 500px;
margin: 0 auto;
}
.progress_outer {
border: 1px solid #000;
}
.progress {
width: 20%;
background: #DEDEDE;
height: 20px;
}
</style>
<form id="myForm">
<input type="text" name="myName" placeholder="Your name..">
<input type="file" name="myFile">
<input type="submit" value="Upload File"
onclick="this.value='Uploading..';
google.script.run.withSuccessHandler(fileUploaded)
.uploadFiles(this.parentNode);
return false;">
</form>
<div id="output"></div>
<script>
function fileUploaded(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
<style>
input { display:block; margin: 20px; }
</style>
Besides that, I did some more research and have found a template example, I am just not sure how to implement it correctly into my existing code. Here is what I found from Caja Playground.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: 37
});
});
</script>
</head>
<body>
<div class="demo">
<div id="progressbar"></div>
</div><!-- End demo -->
<div class="demo-description">
<p>Default determinate progress bar.</p>
</div><!-- End demo-description -->
</body>
</html>
Hm, You only put the html file , where is the gs file ? also Its not possible unless you use chunk to upload ^^
You can use external libraries like MediaUploader js file. See the following tutorial. It includes every functions such as Create folder, upload file, view images, view content image text, show share files only etc.
Demo of using Google Drive API
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>
Can any of you have a look on my code, because I am not sure why it isn't working.
My current situation is that when you tick the radio button, it will show you an output. For example"You selected Table A".
Unfortunately for my case,it just did nothing when I clicked the radio button.
I'm thinking maybe the displacement of my JavaScript function. But I don't see anything wrong there.
<!DOC HTML>
<html>
<TITLE></TITLE>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-
1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src ="jquery-1.11.0.min.js"></script>
<script src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$('input[type="radio"]').click(function () {
$('.frame-wrapper').eq( $(this).index() -1 ).fadeIn();
});
</script>
<style type="text/css">
.frame-wrapper {
display: none;
float: left;
width: 32%;
margin-top: 20px;
margin-right: 1%;
background-color: #eee;
}
</style>
</head>
<body>
<b>Please select an option</b>
A <input type="radio" name="Option" />
B <input type="radio" name="Option" />
C <input type="radio" name="Option" />
<div style="clear: both;"></div>
<div id="tblA" class="frame-wrapper">
You selected A, table tblA is shown
<frame src="http://www.huawei.com" />
</div>
<div id="tblB" class="frame-wrapper">
You selected B, table tblB is shown
<frame src="https://www.google.com/" />
</div>
<div id="tblC" class="frame-wrapper">
You selected C, table tblC is shown
</div>
</body>
</html>
You should put your code within:
$(document).ready(function(){
//...
});
Also, you are using more than one jQuery source file, you should use only one. Read more about ready event.
Your script runs before the DOM has been applied. Move script tags to bottom or wrap in onload function. Test this by console.log'ing the results from your initial selector.
console.log($('input[type="radio"]'));
http://api.jquery.com/ready/
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;
}
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/