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.
Related
Stucked with somehting and i need your help on this.
For below image:
if a contact have one of the client_contact_type labeled either as Owner,Apporval or Manager the span style echo text should show green and for anything else should be red
`<span style="color:<?php echo ($client_contact_type=="Owner"?"green":"red");?>;`
on this code, i could only put one label, dont know how to put multiple
Thank you in advance!
You can use the or operators:
echo ($client_contact_type=="Owner" || $client_contact_type=="Approval" || $client_contact_type=="Manager") ? "green" : "red";
Or use the in_array function:
echo in_array($client_contact_type, ["Owner", "Approval", "Manager"]) ? "green" : "red"
I'm confused. I'm trying to check in a loop if the outputted key is a mail key, if yes, I want to wrap the output into a <a> tag to make the email clickable. Somehow it's not working and it's printing the whole content inside the div:
<div>{{contactInfo.key === 'mail_outline' ? '' + contactInfo.value + '' : contactInfo.value}}</div>
Current result on the page:
{{contactInfo.key === 'mail_outline' ? '' + contactInfo.value + '' : contactInfo.value}}
I'm not sure if I understood the whole thing correctly. I'm coming from PHP and there I can do something like this. Can someone please explain me my issue?
If you surround the html elements inside the div with quotes like you did, you are telling angular that the divcontent is actually a text value. So it will end up displaying your condition as text.
You can add dynamic html by binding to innerHtml property like suggested, however I find it cleaner to keep display logic in the template using one of the options below. Besides, they will avoid the extra overhead of calling a function every round of change detection
*ngIf
<div >
<a *ngIf="contactInfo.key === 'mail_outline'" href="{{contactInfo.value}}">{{contactInfo.value}}</a>
<ng-container *ngIf="contactInfo.key !== 'mail_outline'">{{contactInfo.value}}</ng-container>
</div>
Or use *ngSwitch, which will be more adequate if you've got several different cases
<div [ngSwitch]="contactInfo.key">
<a *ngSwitchCase="'mail_outline'" href="{{contactInfo.value}}">{{contactInfo.value}}</a>
<ng-container *ngSwitchDefault>{{contactInfo.value}}</ng-container>
</div>
Use angular Html binding. Update your html
<div [innerHtml]="getLink()"></div>
In your typescript
getLink(){
if(this.contactInfo.key === 'mail_outline')
{
return `<a href='${this.contactInfo.value}'>${this.contactInfo.value}</a>`;
}
else
{
return this.contactInfo.value;
}
}
Thanks.
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'>
i want to remove the link from my header using CSS so that only the text "my inner yoga" shows, but it is not a hyperlink. i tried to do
#post-28 .site-title.a {display:none;}
but it didnt work. i know it has to do with the site-title because i don't know how to say in CSS that i want to only have the "a" tag not working, but only in the site-title div.
also, is it possible to remove the "learn more" text from the right side of my header? i don't know PHP so that part is confusing to me. i dont know if its possible to do with css.
the link is: http://myinneryoga.com/strange-exotic-fruit-supplement/
Can't be done with CSS, but you can just display the site title itself using
<?php echo $bloginfo('name'); ?>
If you only want it removed on one page, use a conditional IF statement to query the page ID or slug and set a version without the site URL attached and an ELSE to set a version with the URL.
To remove the learn more text, add this code to the end of your functions.php file:
function improved_trim_excerpt($text) { // Fakes an excerpt if needed
global $post;
if ( '' == $text ) {
$text = get_the_content('');
$text = apply_filters('the_content', $text);
$text = str_replace(']]>', ']]>', $text);
$text = strip_tags($text, '<p>');
$excerpt_length = 100;
$words = explode(' ', $text, $excerpt_length + 1);
if (count($words)> $excerpt_length) {
array_pop($words);
array_push($words, '');
$text = implode(' ', $words);
}
}
return $text;
}
remove_filter('get_the_excerpt', 'wp_trim_excerpt');
add_filter('get_the_excerpt', 'improved_trim_excerpt');
If I'm correct the theme developer added a custom excerpt ending. Either that or it's just a hardcoded link, in which case go into the header file and use the find function of whatever editor you are using and search for the "learn more" text, then just remove it and the tag around it.
Not sure how you're generating "Learn Now", but if it's just a link you should be able to do something like the following (let's say the post ID is 17).
<?php if (!is_single(17)) { ?>
Learn More
<?php } ?>
Like Corey said above, use <?php echo $bloginfo('name'); ?> to show the name. Remove any <a> tag that might be surrounding it.
Try this..
Modify style.css line 482
#site-title a {
color: #FFFFFF;
cursor: default;
pointer-events: none;
}
I am writing a rater script so items can be rated 1 through 5 stars. My script works at first, causing the stars to change from the current rating to whatever they are moused over, and then back to the current rating when they mouse out. But then, hovering back over the stars causes no change. (No clicks in the meantime.)
So hover works, then mouseleave works, then hover no longer works although mouseleave continues to work. Here is my code from the javascript file:
$(document).ready(function(){
$("img.rateImage").hover(function(){
$(this).attr("src","images/vote-star.png");
$(this).prevAll("img.rateImage").attr("src","images/vote-star.png");
$(this).nextAll("img.rateImage").attr("src","images/vote-star-off.png");
});
$("div#invRate").mouseleave(function(){
var rate = $(this).attr("ref");
var i = 1;
var imgs = "";
while (rate > 0){
imgs += "<img class=\"rateImage\" id=\"vote"+i+"\" src=\"images/vote-star.png\" alt=\""+i+"\" style=\"cursor:pointer;\" /> ";
i++;
rate--;
}
while (i < 6){
imgs += "<img class=\"rateImage\" id=\"vote"+i+"\" src=\"images/vote-star-off.png\" alt=\""+i+"\" style=\"cursor:pointer;\" /> ";
i++;
}
$(this).html(imgs);
});
});
And here is the div tag and code where all of this is happening:
<div style="display:block; text-align:center;" id="invRate" ref="<?= $curRate; ?>">
<?
while ($curRate > 0){?>
<img class="rateImage" id="vote<?= $i ?>" src="images/vote-star.png" alt="<?= $i ?>" style="cursor:pointer;" />
<? $i ++;
$curRate --;
}
while ($i < 6){?>
<img class="rateImage" id="vote<?= $i ?>" src="images/vote-star-off.png" alt="<?= $i ?>" style="cursor:pointer;" />
<? $i ++;
}
?>
</div>
Is there any reason the mouseleave event would cause the hover event to stop working? The html that the mouseleave event passes back to the div tag is the exact same html as what is there to begin with. So I'm kind of lost.
Thanks in advance for any suggestions and help.
EDIT
With Anthony's suggestions, I looked into live() but found that it was deprecated, and that I should use on(). The delegate method also suggested to use on(). So that's what I went with. After getting a couple errors, I realized that my jquery.js was just old, so I updated that and it worked like a charm. I only changed the first line inside of the ready(function(){}) to look like:
$("#invRate").on("hover","img.rateImage",function(){
Your mouseleave event handler function is replacing the HTML of the div, thereby creating new DOM elements that no longer have the hover event handler attached to them. You can use jQuery's live() method to automatically add the event handler to any newly created DOM elements that match the selector.