I have a span tag that is assigned css classes via a stylesheet depending on whether it is clicked it changes values. The css image is done via content as shown below:
ie. here is part of the css:
.nav li > a > span:after {
font-size: 19px;
content: url(../images/expand.gif);
}
.nav li.open > a > span:after {
content: url(../images/collapse.gif);
}
The span does not have an id but is within a hyperlink tag that does have a unique id.
I was able to assign a variable via jQuery to each specific span tag. The code I will paste below gives me the link value of the hyperlink parent node but what I actually need is the current value of the content url assigned in the css.
Here is an example of the php & jQuery from the code I am working on:
$content = '
<script type="text/javascript">
$(document).ready(function() {';
foreach ($catchClass as $id)
{
$content .= '
var $span = $("#' . $id['id'] . ' span");
var check = $span.after("eq")[0].parentNode;
// alert("test: " + check);
if (check === "../images/collapse.gif") {
$span.attr("style", "font-size: 19px; content: url(../images/collapsex.gif);");
}
elseif (check === "../images/expand.gif") {
$span.attr("style", "font-size: 19px; content: url(../images/expandx.gif);");
}
';
}
$content .= '
});
</script>';
The alert is just so I can see when I get the proper value I am looking for. The line containing this: var check = $span.after("eq")[0].parentNode; ... is what I need to change to get the content url value I am looking for. $catchClass holds the array of hyperlink id's displayed on the page. I have been searching through all kinds of threads on this forum for the answer but to no avail. Would someone be able to help me with this dilemma?
Thank you.
Since :after pseudo its rendered by CSS, it's not a DOM element, so you have to access it through getComputedStyle
var check = window.getComputedStyle(
document.querySelector('#ELEMENT_ID span'), ':after'
);
if (check['content'] == 'url(../images/collapse.gif)') { ...
Hope it helps.
Related
I've been working with Joomla's custom fields in an article override, but I'm not having any luck adding markup ONLY when a field is used. I have very limited knowledge of PHP.
Here's my statement:
<?php if(isset($this->item->jcfields[x]) === true && empty($this->item->jcfields[x]) === false): ?>
<div class="name"><?php echo $this->item->jcfields[x]->value; ?></div>
<?php endif; ?>
In my limited understanding this would seem to check if the field has content and is not empty. If true, display the second line that wraps the field value in a div. That works.
Conversely, if the field is empty, the second line should be skipped, which would not create the wrapping div.
In reality, the div is created either way.
What am I missing?
I went a different way since Joomla fields didn't register the output as empty with the above code.
Instead, I retrieved the value of the field and searched the text:
<?php
$word = "https";
$mystring = ($this->item->jcfields[x]->value);
if(strpos($mystring, $word) == false){echo "";
} else{
echo "<div class='facebook-link'>" . $mystring . "</div>";
}
?>
Combined with this CSS:
.facebook-link a {font-size: 25px; display: inline-block; text-indent: -999em; text-decoration:none;}
.facebook-link a:after {font-family: "FontAwesome"; display: block; text-indent: 0;content: "\f09a";}
The PHP code was added to an article override and wrapped in an outer wrapper that was designated as a css-grid with the grid-template-columns set to repeat{8, 40px).
The end result is a row of linked icons for whatever social media accounts the page user defines.
How do I make a sample html input text area that immediately outputs the results in another html box on the same page, like they do on this MDN page? https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals . See the 'Active Learning' section at the bottom of the page. There may be tutorials out there, but hard to find since I don't know what this is called...
You can add a listener to the textarea's input event, and copy its value to the innerHTML of some output element:
var txt = document.querySelector('textarea'),
out = document.querySelector('div');
txt.addEventListener('input', updateOutput);
function updateOutput() {
out.innerHTML = txt.value;
}
updateOutput(); // also fill output at page load
div { border: 1px solid; white-space: pre-wrap; }
textarea { width: 100%; }
<textarea>type some text <b>here</b></textarea>
<h3>output</h3>
<div></div>
I'm extracting some exif infos from an image and show them on my page (html generated by php).
Below that I have some text fields, where user can add some infos to an image.
Some images have none, some others only 1 and some other multiple exif informations.
Final target is to fill up the text fields, either manually or with already known - but unstructured - exif data.
Having only 1 text value, it is not a problem to use the native browser drag&drop support to move from list of exif data into text input field..
But with 2 or more text values like "water flower, red & green", it is more difficult for handicaped people.
So I was thinking about a possibility to bound such multiple text values together.
Tried with a linked text, but dropping drops the href source and not the anchor text
Any ideas, examples and help is welcome.
Finally I got it.
Maybe it is helpfull for others too, so here below how I did it.
The target:
Allow to drag and drop a combination of words without the needs of first marking them before.
1) the JS part
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var id = ev.dataTransfer.getData("text");
var addtext = document.getElementById(id).innerHTML;
var oldtext = document.getElementById(ev.target.id).value;
if ( oldtext )
{
ev.target.value = oldtext + ', ' + addtext;
}
else
{
ev.target.value = addtext;
}
$( '#' + id ).addClass( 'dropped' );
}
This base logic I found on w3schools website.
I adapted and enhanced drop function to get the anchor text and extend target. In addition I add a specific class to dropped links to indicate that this link has been used already.
2) the CSS
a.exif_items {
border-radius: 25px;
background: #73AD21;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
word-break: keep-all;
word-wrap: normal;
hyphens: none;
}
a.exif_items:visited ,
a.exif_items:hover ,
a.exif_items:active ,
a.exif_items:link {
text-decoration: none;
}
a.exif_items:hover {
font-weight: 600;
color: black;
}
a.dropped {
background: #21AEAE;
}
nothing special. Just a green box around the links. Dropped links get a blue box. The word-break, word-warp and hyphens are set to avoid line breaks in the boxes.
3) the links for the exifs
<a id='{{ unique_exif_item_key }}'
href='#'
class='exif_items'
draggable='true'
ondragstart='drag(event)'
>{{ exif_item_text }}</a>
the {{ ... }} fields needs to be set by you accordingly!
Also nothing special here, just the 2 tags draggable and ondragstart.
4) the target inputs
<input type='text'
name='{{ unique_field_name }}'
id='{{ unique_field_id }}'
size='35'
ondrop='drop(event)'
ondragover='allowDrop(event)'
value='{{ field_value }}'
/>
Again the {{ ... }} fields needs to be set by you accordingly!
Here we have the 2 drop counterparts ondrop and ondragover.
Well, quite simple and easy after you get it. But until you find the info ... ;-)
Hope it is helpfull for others too.
I am creating multiple divs in a loop in php shown below.
<?php
for ($i=0; $i<=9; $i++)
{
for ($j=0; $j<=9; $j++)
{
echo "<div class=\"bg\" id=\"aaa".$i."\" style=\" position:absolute;top:".($i*10)."%;left:".($j*10)."%;\">
</div>";
}
}
?>
i want to select multiple divs (not all) and change their backgrounds using jquery. i cant seem to be able to figure out how to proceed with this
You can select div with id starting with aaa
$('div[id^=aaa]')
if you want to select yhe div's based on their index, you could use the nth-of-type selector:
divs = $('.bg:nth-of-type(1)');
divs.css('background-color','blue');
You can select multiple elements by adding them to the variable:
divs.add('.bg:nth-of-type(2)').add('.bg:nth-of-type(3)');
Note that these are css selectors so it may be an idea to simply do this in css:
.bg:nth-of-type(1),
.bg:nth-of-type(2),
.bg:nth-of-type(3){
background-color: blue;
}
also note you can use an expression inside the brackets to represent multiple values in a sequence.
.bg:nth-of-type(3n+1){ //will select every fourth div
background-color: blue;
}
Unless you can come up with a better criteria for which div's you want to change, this is probably the best way.
Source(s)
jQuery API - .add()
MDN - CSS :nth-of-type selector
This should do the trick:
var arrayDivs = $('div[id^=aaa]');
$.each(arrayDivs, function(){
$(this).css('background-color', '#000');
});
If you want to select multiple lists and not all "aaa"+integer ones, you will need to either know the numbers of those or you need to differ within your loops already.
More information would be awesome!
The "proper" way (if you can say that) would be to group the elements you want to assign common properties with appropriate classes. You can then manipulate them via CSS
So in essense, while looping in the above code :
for ($i=0; $i<=9; $i++) {
for ($j=0; $j<=9; $j++) {
$classes = 'bg';
if( [somelogic] ) { $classes .= ' bluefront'; }
if( [otherlogic] ) { $classes .= ' greenback'; }
echo "<div class=\"".$classes."\" id=\"aaa".$i."\" style=\" position:absolute;top:".($i*10)."%;left:".($j*10)."%;\"></div>";
}
}
and then, via CSS :
.bg.bluefront { color: blue; }
.bg.greenback.bluefront { background-color: green; color: white; }
//select all elements with class bg and add background image
$('.bg').css('background-image',"url('some_image.gif')");
better yet use css:
.bg {
background-image: url('some_image.gif');
}
if you only want some divs from the class bg:
$('.bg').each(function(index,element){
//your code here eg:
if(index == 2)
alert(index);
});
I have some numbers, and depending on the number's value I need to highlight a string which is in a table. The table is not in database.
Does anyone know how to highlight text in php?
PHP won't "highlight" text, that is done with CSS/HTML. You only use PHP to output the correct HTML.
Something like this:
$my_num = 9;
foreach ($my_array_of_numbers as $num)
{
// See if $num matches $my_num, if so - add the "highlight"
// class to the HTML element we're using
$css_class = ($num == $my_num) ? 'highlight' : '';
echo '<td class="'.$css_class.'">'.$num.'</td>';
}
Then in your CSS:
.highlight {
background:yellow;
}
You may also want to consider using javascript for this, which can handle the task after the HTML has already been generated.
Presentation, like highlighting, is done in CSS, not PHP.
My advice would be to create a CSS class which has a background-color defined to be used as highlighting. Then, in PHP, you can conditionally wrap your string in <span> tags which have that class, so the text would be highlighted.
CSS:
.highlight {
background-color: #FF0;
}
PHP:
if (highlightCondition) {
echo '<span class="highlight">' . $string . '</span>';
} else {
echo $string;
}