As a part of a Bootstrap table I have the following code:
<xp:text escape="false"
id="tableRowstart" >
<xp:this.value><![CDATA[#{javascript:
if (rIndex % 2){
return "<tr style='background-color:#e6e6e6'><td>"
}else{
return "<tr style='background-color:#fbfbfb'><td>"}}]]></xp:this.value>
</xp:text>
this is part of a repeat control and rIndex is the repeat index value. The above code works fine, but I want to use it in a css. So I added these lines to my css:
.oddLineBackground {background-color:#e6e6e6 ;}
.evenLineBackground {background-color:#fbfbfb ;}
If I modify my code to use the css as follows:
<xp:text escape="false"
id="tableRowstart" >
<xp:this.value><![CDATA[#{javascript:
if (rIndex % 2){
return "<tr style='oddLineBackground'><td>"
}else{
return "<tr style='evenLineBackground'><td>"}}]]></xp:this.value>
</xp:text>
The line colors do not change, they display with no style applied. I can apply the oddLineBackground and evenLineBackground to a panel or ??? directly from the style picker and they display correctly but when I compute them they don't seem to compute correctly. I'm guessing that it is something in my syntax, but can't figure it out.
Change:
<tr style='oddLineBackground'>
to this:
<tr class='oddLineBackground'>
Related
$Option = "<p>6 < x < 8</p>" //For demo I have assigned directly, in reality the value will come from MySQL database.
I want to display this value something like:
But I am getting it like:
I know the reason why it is like that because the input tag is out of paragraph tag.
<input type="radio" name="<?php echo $i; ?>" value="A"><?php echo $Option; ?>
What can I do so that the radio button is inside paragraph tag?
p elements are block elements by default. You can make them inline elements by setting the display property value to inline:
$Option = '<p style="display:inline">6 < x < 8</p>';
Update: If you are not able to change the value of the variable then you can try using external or internal CSS:
input[type=radio] + p{
display: inline;
}
I have part of a code where it displays a Multi Select box and displays the options depending on the if statement:
$moduleSELECT = '<select name="moduletextarea" id="moduleselect" size="10">'.PHP_EOL;
if($modulenum == 0){
$moduleSELECT .= "<option disabled='disabled' value=''>No Modules currently on this Course</option>";
}else{
while ( $currentmodstmt->fetch() ) {
$moduleSELECT .= sprintf("<option disabled='disabled' value='%s'>%s - %s</option>", $dbModuleId, $dbModuleNo, $dbModuleName) . PHP_EOL;
}
}
$moduleSELECT .= '</select>';
Now from doing some research on the internet I think it is bad practice to include tags inside option tags. So my question is that if the if statement is true where number of records in 0, how can I display the text for "<option disabled='disabled' value=''>No Modules currently on this Course</option>"; in red colour and if the else statement is met how can I display these options sprintf("<option disabled='disabled' value='%s'>%s - %s</option>", $dbModuleId, $dbModuleNo, $dbModuleName) . PHP_EOL; in black colour text?
Thanks
just set a css style to the select (if there are no options), in this case color: red;
you can also have different colors for the options as well, just set different colors on each option. example fiddle here: http://jsfiddle.net/kennypu/CP8Xf/1/
I don't believe you can style individual <option> tags with CSS, but you could style the entire <select> as #kennypu points out.
Another way to achieve the results you want with a better/more intuative UI might be to only output the <select> tag when you actually have data to put inside it. When $modulenum == 0 maybe you should just output some different HTML that you can style properly.
HTML
<div class='no-data'>No Modules currently on this Course</div>
CSS
.no-data{
background-color: #CCC;
color: red;
padding: 5px;
}
I have a text area tag, wanted to write water mark functionality. So, i have assigned a class (css) to that tag. but it is not getting recognised. if i write css style for the textarea ID it is working.
function renderhtml(subgrid_id, row_id) {debugger;
var script = "<div style='margin-left:10px; margin-top:10px; margin-bottom:10px;'>";
script += "<textarea cssClass=watermarkOn cols=20 id=txtCommentSection name=txtCommentSection rows=2>Type your comments here</textarea>";
script += "<input type='image' id='image' src='../../Content/Images/commentIcon.png'/>";
script += "</div>";
return script;
}
This is the css style:
.watermarkOn{color: #CCCCCC; font-style: italic;width:800px; height:30px; }
i have tried changing the class from "cssClass" to just "class" but still the style is not getting affected.
Please help.
This line is the culprit.
script += "<textarea cssClass=watermarkOn cols=20 id=txtCommentSection name=txtCommentSection rows=2>Type your comments here</textarea>";
It should be:
script += '<textarea class="watermarkOn" cols=20 id="txtCommentSection" name="txtCommentSection "rows=2>Type your comments here</textarea>';
Use textarea class="watermarkOn" instead of textarea cssClass=watermarkOn
I have this code, when the row is clicked the row is changed to 'selected_row'. When clicked again it´s supposed to change back to '$class', but it doesn't. What is causing the trouble and how can I solve this?
$class = ($class == 'even') ? 'odd' : 'even';
echo '<tr class="'.$class.'" onclick="this.className=this.className==\'selected_row\'? '.$class.' :\'selected_row\';">
You forgot a closing quote behind the last $class.
I think these kind of syntax errors should show up when you use FireBug or similar debugging tools.
Hi you could try this, simply place the function below within the section of your html code.
<script type="text/javascript">
function toggleClass(ele,customClass)
{
ele.className=ele.className=='selected_row' ? customClass:'selected_row';
}
</script>
Then change your existing syntax from:
echo '<tr class="'.$class.'" onclick="this.className=this.className==\'selected_row\'? '.$class.' :\'selected_row\';">
To:
echo '<tr class="'.$class.'" onclick="toggleClass(this,\''.$class.'\');"><td>apple</td></tr>';
Hope this helps.
I have a menu that I am using and it will change the background color when I hover using a:hover but I want to know how to change the class=line so that it sticks.
So from the home if they click contacts the home pages
from (a href="#" class="clr") to (a href="#")
and Contacts would change
from (a href="#") to (a href="#" class="clr")
any help?
JD
I believe you are wanting to highlight the navigational item that you're on. My answer here is fairly valid in this question as well, I believe:
It's a better semantic match and likely an easier variable to set to keep the navigation using the same classes or ids everywhere and only alter the body element's id to match:
<li id="homeNav">home</li>
<li id="blogNav">blog</li>
and then on each page...
<body id="home">
<body id="blog">
And in the css:
#home #homeNav {background-image:url(homeNav-on.jpg);}
#blog #blogNav {background-image:url(blogNav-on.jpg);}
The way to change class (I assume you're talking of the DOM), in javascript is:
document.getElementById("element").className='myClass';
Hope this helps.
The mechanism we use frequently is by having a few generic event listeners on the body and have all required events bubble up. Once caught, we check for a certain className (or className pattern) on the triggering element. If such a className is found, we consider it a state identifier, and we trigger behavior based on such states.
For instance, we have defined className pairs (such as "selected" and "unselected") with the default behavior of toggling. Or make them exclusive by giving the parent element the className "exclusive-selected".
A simple mechanism like that can be extended to your liking and can be very powerful.
Allow me to post a simple demonstration. Non-generic, but it is just to illustrate the inner workings of such a mechanism. For this example I consider the className pair "selected" and "unselected" to be exclusive.
<html>
<head>
<script>
document.onclick = function(evt) {
var el = window.event? event.srcElement : evt.target;
if (el && el.className == "unselected") {
el.className = "selected";
var siblings = el.parentNode.childNodes;
for (var i = 0, l = siblings.length; i < l; i++) {
var sib = siblings[i];
if (sib != el && sib.className == "selected")
sib.className = "unselected";
}
}
}
</script>
<style>
.selected { background: #f00; }
</style>
</head>
<body>
One
Two
Three
</body>
</html>
It ought to work on IE, Firefox and other browsers. Of course this mechanism can be made generic and have all kinds of className states and behaviors implemented.
This may not apply to you, but it may lead you down the right path. If you are using PHP, stick this in your head before the doctype declaration or the (x)html tag:
<?php
// Get current page file name
$url = Explode('/', $_SERVER["PHP_SELF"]);
$page = $parts[count($url) - 1];
?>
Then, in your menu item where you would like the class designation, place the following, but change "index.php" to the name of the page:
<?php if ($page == "index.php") echo ' class="current"' ?>
So ultimately your menu should look similar to this:
<div id="navigation">
<ul>
<li><a href="index.php"<?php if ($page == "index.php") echo ' class="current"' ?>>Home</a></li>
<li><a href="page1.php"<?php if ($page == "page1.php") echo ' class="current"' ?>>Resume</a></li>
<li><a href="page2.php"<?php if ($page == "page2.php") echo ' class="current"' ?>>Photography</a></li>
</ul>
</div>
Last step is adding the CSS:
#navigation ul li a.current {
background-color: #FFF;
}
Hope this helps.
You may want to check out jQuery (jquery.com).
Using jQuery, you would change the class (and stick it) like this:
$('#link-id').addClass('your-class');
You could bind the code to the links like this:
$('#link-id').mouseover(
function(){
$(this).addClass('your-class');
}
);
http://docs.jquery.com/Attributes