i use jquery UI Select menu and i want to make a custom icon for every option tag
i use php and mysql to get my icons and elements
i try to use span and give it an icon as a background image but it's not working
<label class="langLabel" for="filesA">Select your language:</label>
<select name="filesA" id="filesA">
<?php
$langs = select("*","lang");
while($lang=fa($langs)){
echo "<option value={$lang['lang_id']} data-class=\"ui-icon-script\">{$lang['lang_full_name']}
</option>";
echo "<span class='test' style='background: url('".
"img/flags2".$lang['lang_flag'] ."') />";
}
?>
</select>
Please have a look at the following jQuery UI demo.
The first example is most likely what you are looking for.
The source code is available too.
Related
I am trying to give every second div in my container a different background color compared to the first one. The issue I have is, that there is a JavaScript code in between the divs. Here is an example:
echo '<div class="holder">';
echo '<script type="text/javascript"></script>';
echo '<div class="list_item"></div>';
echo '<script type="text/javascript"></script>';
echo '<div class="list_item"></div>';
echo '<script type="text/javascript"></script>';
echo '<div class="list_item"></div>';
echo '<script type="text/javascript"></script>';
echo '<div class="list_item"></div>';
echo '<script type="text/javascript"></script>';
echo '<div class="list_item"></div>';
echo '</div>';
When I now add the following css code:
.holder .list_item:nth-child(even) {
background-color:#fff;
}
it will give all of the divs the white background color.
Does anyone have an idea how to solve this???
P.S: I changed the css code to nth-child(odd) as well to test it. But that didn't work either.
You need nth-of-type instead of nth-child. This will only take <div> tags into account, regardless of what is in between of them.
The :nth-child() pseudo-class will count all siblings sharing the same parent.
Since you have multiple element types in the container, and you are targeting only the divs, you can skip over the script elements by using :nth-of-type() instead.
:nth-of-type() matches only elements of the same type.
So when you say:
I am trying to give every second div in my container a different background color compared to the first one.
Try something like this:
div:nth-of-type(even)
There are two child elements per entry. There is a script child and a div child. You could either address the divs using :nth-child(4n+1) (or +3 for even), or you could use the :nth-of-type selector to just address the div elements:
:nth-of-type(odd / even) {…}
I have added following PHP code in my Joomla webapplication.
This will create a table of all users from a User Group.
How Can I make this table sortable?
Is there some Joomla/PHP code or plugin to order this list by Name?
Can I add a parameter to sort this by any column?
<?php
$teachers = JAccess::getUsersByGroup(10); //change number in the brackets
echo "<table class=\"table table-striped\">";
echo "<thead>";
echo "<tr>";
echo "<th>Name</th>";
echo "<th>Street</th>";
echo "<th>Zip</th>";
echo "<th>City</th>";
echo "<th>Phone</th>";
echo "<th>Email</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
foreach($teachers as $user_id) {
$user = JFactory::getUser($user_id);
$profile = JUserHelper::getProfile($user->id);
echo "<tr>";
echo "<td>".$user->name."</td>";
echo "<td>".$profile->profile['address1']."</td>";
echo "<td>".$profile->profile['postal_code']."</td>";
echo "<td>".$profile->profile['city']."</td>";
echo "<td>".$profile->profile['phone']."</td>";
echo "<td>".$user->email."</td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
?>
e.g.
if you want it make title sortable use code similar like follwing to add table headers
<?php echo JHTML::_('grid.sort', JText::_('TITLE'), 'title',
$this->lists['order_Dir'], $this->lists['order'] ); ?>
and use following function in modal to build your where clause in SQL.
getUserStateFromRequest(
$option.'filter_order_Dir', 'filter_order_Dir', 'ASC'));
above function will return you the ASC or DSC based upon user choice
JHTMLand JHTMLGRID are useful classes to build interactive tables
details page 279
I think the easiest way would be to use jquery or use a jquery plugin. You can use DataTables or Tablesorter, they are jquery plugins that would put that feature.
I assume you want the table to sortable on the client side, which means you will need some Javascript code. There are some jquery libraries out there that do that (like DataTables), but there also Joomla specific extensions that do exactly that, like Tabulizer for Joomla at http://www.tabulizer.com with many sorting options, plus you avoid any jQuery conflicts with other extensions. Here is a sorting demo http://www.tabulizer.com/index.php/support-menu/tabulizer-tips/63-sort-second-row
You can also use plugin Szaki Table developed directly for Joomla (currently available for J! 2.5 and J! 3.x).
Check it out, it's powerful and highly customizable tool.
I am trying to display an xmlhttp.responseText as HTML code and specifically to fill a dropdownbox, however it seems to be processed as a string and not HTML code.
I am using the code that I would like to display in HTML format as various menu <option>s in a <span> tag
javascript code within the xmlhttprequest function:
document.getElementById("test").innerHTML=xmlhttp.responseText;
Code in html that is found within the dropdown menu:
< span id="test">
< /span>
The php file that is called by the xmlhttprequest echo's the following:
$option="<option>";
(this is in a while loop)
{
echo $option.$row['productName'].$option="<option>";
}
if you want html outcome then use html, don't use special chars.
in your loop use
echo "<option>" . $row['productName'] . "</option>";
Use your code like,
$str='';
while(1) {
$str.='<option>'.$row['productName'].'</option>';
}
echo $str;
Also, option should be placed in drop down list like select not in span
So, change your HTML like,
<select id="test">
</select>
I have a script which will list all the files from the image folder on the server into a drop down box.
$dir='images';
$list=scandir($dir);
if(isset($_POST['submit'])) echo 'Selected: ' . $_POST['image'];
foreach($list as $file)
{
//ignore . (current dir) and .. (parent dir)
if($file!=='.'&&$file!=='..')
{
echo "<option value=\"$file\"";
if(isset($_POST['submit'])&&$_POST['image']==$file) echo 'selected="selected"';
echo ">$file</option>";
}
}
What I am trying to do is when the file name of the image is selected that image is displayed.
echo "<img src='images/". $file ."' />";
I tried using the file verable but it only seams to display the last image in the directory. How would I go about fixing this.
You will have to do this with Javascript. Once the php script loads it has no one of knowing what is happening in the users window. You will want to create an event listener to the onChange even of your option group. And when the selection changes you will want to replace the src of the image tag being used to show a preview.
I'd highly suggest using a JS Library such as Jquery or simliar to help with the event listening, and dom manipulation.
If you mean doing this on the form load, I’d say replace
if(isset($_POST['submit'])&&$_POST['image']==$file) echo 'selected="selected"';
with
if(isset($_POST['submit'])&&$_POST['image']==$file)
{
echo 'selected="selected"';
$selected_file = $file;
}
then this instead
echo "<img src='images/". $selected_file ."' />";
Because at the moment, it’ll just load which ever one is last out of the foreach
I have record set where iam looping through and displaying options in select box if the record contains a value as status as "Y"
than i have to display the option in red color
echo "<select name='select1' size='10' multiple >";
foreach ($this->arr['record'] as $rows) {
if($rows['status'] == "Y"){
echo "<option value='". $rows['COLA'] . '*' . $rows['COLB'] . "' bgcolor='#ff0000' style = 'bgcolor=red;font-size=5'>".$rows['COLC'].":".$rows['COLD'].":".$rows['COLE'].":".$rows['COLF'].":".$rows['COLG']." </option>";
}else{
echo "<option value='". $rows['COLA'] . '*' . $rows['COLB'] . "' bgcolor='#ff0000' style = 'bgcolor=red;font-size=5'>".$rows['COLC'].":".$rows['COLD'].":".$rows['COLE'].":".$rows['COLF'].":".$rows['COLG']." </option>";
}
}
echo "</select>";
Here if we have status as "Y" than we are want to highlight the entire option . I used the font tag but it is not working can you please tell us what to do
This has to do with HTML, not PHP. Set the selected attribute for the <option>.
In your case:
if($rows['status'] == "Y") {
echo '<option selected="selected" ....
}
please just look on the generated html source code. Your question is really not related to php. Use the source view of your browser or use firebug to determine why your html attributes / css style is not applied.
Derby, you're using the style attribute the wrong way. Inside the style attribute you may specify "inline" CSS, just according to the general CSS rules.
So to highlight the selected item in red use the following code according to your needs:
echo "<option value='". $rows['COLA'] . '*' . $rows['COLB'] . "' style='background-color: red; font-size: 5pt'>".$rows['COLC'].":".$rows['COLD'].":".$rows['COLE'].":".$rows['COLF'].":".$rows['COLG']." </option>";
But please note, as Jason already stated, that drop-down boxes are normally handled by the Operating System, so this style MAY apply but there's no official way to style the drop-down elements.
More Info on how to use inline style sheets may be found here.