I was wondering if I had an HTML page, how would I delete an element with php, by the name or id of it. so I could have HTML code like this
<div>
<span id='todelete' name='todelete'>This should be deleted</span>
<?php
delete('todelete');
?>
</div>
or something like that, and the web browser would just show an empty div without the span.
Is that possible, or is it more useful to just use javascript for this.
Basically, what I'm saying is before the page is compiled, can you delete elements from it, based on some conditionals, not after the page has loaded
It appears you are getting confused between server side and client side scripting languages.
PHP is a server side language meaning that once it has been compiled that's it, it can't be changed dynamically in the users browser.
JavaScript on the other hand is a client side scripting language and can manipulate what is on the page dynamically.
Therefore what you are asking to do is impossible using pure PHP once the page has been rendered.
You can use AJAX technology to call a PHP script from within a page already in a browser using JavaScript. You can then use the PHP script being called by the AJAX request to return something that you can use to update a particular section of your page, but there is no pure PHP way that doesn't involve JavaScript at all to do this.
Just an idea... have you thought about PHP XPath Query?
// CSS not important
<style>
div { border:1px solid rgba(255,0,0,0.5); background:rgba(255,0,0,0.1) }
span{ border:1px solid rgba(0,255,0,0.5); margin:0px 2px; padding:0 20px;
background:rgba(0,255,0,0.5)}
</style>
// PHP your HTML, in this example a string.
<?php
$string = '
<div>
<span id="keep"> John </span>
<span id="keep"> Susane </span>
<span id="todelete"> Tree </span>
<span id="keep"> Karin </span>
<span id="keep"> Jack </span>
</div>
';
echo $string;
// PHP start new Class DOMDocument and make the query
$doc = new DOMDocument;
#$doc->loadHTML($string);
$xpath = new DOMXPath($doc);
$found = $xpath->query("//span[contains(#id, 'todelete')]");
// more PHP I can't explain this well. I hope someone else can?
// But The query found the span that contains attribute id with 'todelete'
// I guess it output it as HTML
$element = $found[0]->ownerDocument->saveXML($found[0]);
/* ##### <span id="todelete"> Tree </span> ##### */
echo '<p>delete:' . $element . '<p>';
//Finally PHP Replace in your string what you found with nothing
echo str_replace($element, '' , $string);
?>
I hope its useful. XPath is very powerful and often forgotten. Give it a try. I hope it's enough for your needs. you can copy all the code above and paste it in a .php document.
You can't use php for removing DOM elements. You need to do it with javascript or jQuery.
With javascript it will be so
var element = document.getElementById("todelete");
element.parentNode.removeChild(element);
And with jQuery (after including the library)
$(document).ready(function() {
$("#todelete").remove();
});
You can't really use php to delete the html once it has been rendered, but you can use conditions in your php code to selectively render certain sections of html depending on the outcome of tests you perform in php...
Related
In wordpress there is a plugin that assigns a header graphic for each page. You call that header graphic by placing this code in your header.php file:
<?php if(function_exists('show_media_header')){ show_media_header();} ?>
This basically calls the image assigned and places it as an IMG in HTML.
I would like to have it called as a background image with CSS but don't know how. For example:
.header-graphic{ background:url("show_media_header();"); }
I know that will obviously not work but that should explain what I'm trying to do.
Any help would be great.
Thanks!
Depending on the scope of show_media_header() and that it actually returns the path to an image you could write the following:
.header-graphic{ background:url("<?php echo show_media_header(); ?>"); }
However this is of course under the assumption that your css is in the php-file, which wouldn't be recommended. You should look at using SASS or LESS instead.
It's generally a bad idea to serve static files (like CSS) dynamically, since it can't be cached effectively. So inserting the result of show_media_header() directly into your CSS is a no-go.
However, there is an alternative: Insert just that style into the HTML like so:
<h3 style='background-image: url("<?= show_media_header(); ?>");'>
Foo
</h3>
Which can then be further modified by CSS that is in a statically-served and unchanging file - for example:
h3 {
background-position: left 3px top 3px;
}
This of course assumes the function returns just the image URL; I've not used Wordpress personally.
Based on another comment, apparently this function generates a complete <img> tag (ugh!) so you might instead have to do something like this:
<h3>
<?= show_media_header(); ?>
Foo
</h3>
And style it as appropriate like so:
h3 img {
margin: 3px 0 0 3px;
}
I'm gonna post it down here because no one is considering your statement:
"and places it as an IMG in HTML"
You may have to edit you plugin output. Since show_media_header(); echo a value, the function itself is creating a <img> element. Look for the plugin file, search for the function and, either create another one, duplicating the original, something like show_media_header_bg where you manipulate the element, or change the original.
How about if you use descendant CSS selectors as such:
#page #header {
background-image: url("image.jpg");
}
#another-page #header {
background-image: url("another-image.jpg");
}
and so assign each page to its background image.
Here, I'm assuming you can grab into each page by an id (here called "page" and "another-page", and that your header template has an id of header. It would help to see some HTML to see how best to exactly achieve this via CSS.
Got it to work!
Dug around in the plugin PHP file and found this:
function get_media_header_url() {
global $post;
$post_id = $post->ID;
So I did this:
.header-graphic-background{ background:url("images/<?php echo get_media_header_url() ?>"); }
Works great!
You guys absolutely pointed me in the right direction. THANKS!!!
I'm currently working on a website. And I need to use PHP to select a div with a certain class. For example:
<body>
<div class="header"></div>
<div class="other-class"></div>
<div class="one-two-three"></div>
<div class="footer"></div>
</body>
<?php
if(div.hasClass('one-two-three'))
{
//function code here...
}
?>
But keep in mind that I want to use PHP and not jQuery for this...
If you want do manipulate the DOM, prior to sending it to the client then the Dom object is offers what you need. It even has similar methods to what you might know already from JS.
$htmlString = '<html>...</html>';//either generated, or loaded from a file
$dom = new DOMDocument;
$dom->loadHTML($htmlString);//or loadHTMLFile
$divs = $dom->getElementsByTagName('div');
foreach($divs as $div)
{
if ($div->hasAttribute('class') && strstr($div->getAttribute('class'), 'one-two-three'))
{
//$div ~= <div class='one-two-three'>
$div->appendChild();//check the docs to see what you can do
}
}
Here's an overview of the methods at your disposal
You probably will fill the div with content using php and then you can process your content first and then print it in the div. If you need to do stuff to the div's contents when the div's already in the browser you will need to use javascript to do it or else call a php script to do the processing using ajax to call the php script on the backend and retrieve the response.
use simplephpdom library for this. You can select form elements with selectors like you do in jquery.
http://simplehtmldom.sourceforge.net
I have a small problem with my PHP code and It would be very nice if someone could help me. I want to display an image when hovering over a link. This is the link with the PHP code that I have now:
<?php if ( has_post_thumbnail() ) {the_post_thumbnail();} else if ( has_post_video() ) {the_post_video_image();}?>
This code shows a image, but I want to execute this code when hovering over the link with the image:
<?php echo print_image_function(); ?>
The code also shows a image that belongs to a category. I don't want the initial image to disappear I simply want to show the second image on top off the first image when hovering over the first image.
I don't know if it is helpful but I use Wordpress and I am not a PHP expert. I even don't know if this is going to work. Thats why I am asking if somebody can help me with this.
Thanks in advance
THANKS EVERYONE
I want to thank everybody that took the time to read my post and helped me by giving their solution.
I didnt exspect so many answers in such a fast time. After spending a few hours trying it to get it to work with PHP, CSS and Javacript, I stumbled upon the following question on this website: Solution
It was exactly where I was looking for and with a few modifications to fit my needs, I got it to work. Sometimes things can be so easy while you are looking for the hard way. So for everyone that has the same problem: You can use one of the solutions that where given by the awesome people here or take a look at the link above.
Thanks again! :)
You can do this with CSS (if you so please and this fits with your overall architecture) - here is an example using the :hover condition and :after pseudo element.
html
<img src="http://www.gravatar.com/avatar/e5b801f3e9b405c4feb5a4461aff73c2?s=32&d=identicon&r=PG" />
css
.foo {
position: relative;
}
.foo:hover:after {
content: ' ';
background-image: url(http://www.gravatar.com/avatar/ca536e1d909e8d58cba0fdb55be0c6c5?s=32&d=identicon&r=PG);
position: absolute;
top: 10px;
left: 10px;
height: 32px;
width: 32px;
}
http://jsfiddle.net/rlemon/3kWhf/ demo here
Edit:
Always when using new or experimental CSS features reference a compatibility chart http://caniuse.com/ to ensure you are still in your supported browsers. For example, :after is only supported starting IE8.
You cannot randomly execute server side code on the client side.
Try using javascript AJAX requests instead.
PHP is a server-side language; you can't get PHP to execute after the page has loaded (because PHP completely finishes parsing before the page loads). If you want hover events, you need JS.
Firstly you don't need the elseif statement. An else will serve the same purpose, unless you intend to have blank tags where neither a thumbnail or a video image are present.
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() )
{
the_post_thumbnail();
}
else
{
the_post_video_image();
}
?>
</a>
You can't explicitly use PHP for client side functionality. You will need to use javascript or jquery to supply the on hover capability.
Jquery example:
$(function() {
$('a').hover(function() {
// Code to execute whenever the <a> is hovered over
// Example: Whenever THIS <a> tag is hovered over, display
// the hidden image that has a class of .rollover
$(this + ' .rollover').fadeIn(300);
}, function() {
// Execute this code when the mouse exits the hover area
// Example (inline with above example)
$(this + ' .rollover').fadeOut(300);
});
});
To have an image placed on top of another image you would need to make sure your CSS uses absolute positioning for the images with the image that is to overlay the other on hover is given a z-index value higher than the image to sit underneath it.
Hope this helps.
You'll need some JavaScript and/or CSS to make this work, since PHP is on the server side, not in the client browser.
I want in my template.php (drupal theme) something like this:
$search_button ='search-button.png';
if($('#page-wrapper').hasClass('blue-colour')) {
$search_button ='search-button-blue.png';
}
else if ($('#page-wrapper').hasClass('green-colour')) {
$search_button ='search-button-green.png';
}
$form['actions']['submit'] = array('#type' => 'image_button', '#src' => base_path() . path_to_theme() . '/images/'.$search_button);
Which doesn't work because it is jQuery. The problem is the syntax on this bit:
if($('#page-wrapper').hasClass('blue-colour'))
How can I do the same thing without using javascript or jQuery and only php and/or some Drupal function?
I want to replace the icon for a search box based on a class set on a HTML element:
<div id="page-wrapper" class="blue-colour">
In this case it would check that the class is 'blue-colour' and would set the correct blue icon on the variable ($search_button).
This doesn't answer your question directly, but you can solve this very nicely using just css:
Don't use an image for your button, but a text and do something like text-indent: -9999em;
Set the background image of the button to the image you want like (simple example):
.blue-colour .button {
background: url(search-button-blue.png);
}
.green-colour .button {
background: url(search-button-green.png);
}
javascript and jQuery are client-side, meaning the page is already loaded and javascript operates on the loaded DOM directly on the client's computer.
PHP is server-side, meaning the page is being written by PHP on the server and then the hypertext will be transferred to the client's computer.
Changing the image based on the class would require client-side code unless you already knew the class.
For example,
$class = 'blue-colour';
switch ($class) {
case 'blue-colour':
echo '<img src="blue-colour.jpg" alt="blue-colour" />'
break;
default:
echo '<img src="default.jpg" alt="default" />';
}
How you determine the class is up to your code, but it has to be done during the parsing on the page.
You could try to use dom parser, though its going to be tricky.
http://simplehtmldom.sourceforge.net/manual.htm
Hello i am trying to animate a div background color this way with php and javascript html.
<div background="<?=for($step = 0; $step < 256; $step++)
echo "rgb($step, $step, $step);"; ?>" /> contents </div>
So the code will make change the div from black to white as my example clearly shows.
But it is not working, any ideas?
i want to implement it in my personal website http://www.nickersonweb.com/ buttons
Once your page is generated by PHP and sent to the client, your PHP code can no longer change the content on the client side.
That's where client-side code (Javascript) comes in.
To quickly achieve what you're trying to do, have a look at this question: jQuery animate backgroundColor , which recommends using jQuery with the jquery-color plugin. Here's a quick demo: http://jsfiddle.net/MCwxG/
p.s. I'm sure it's possible to do it with pure javascript, but my js-fu is not accomplished enough to show you how.
You can't do it with php, it's server side.
But you can do it with the color plugin with jQuery.
Well, you're using <?= with a for loop statement, when it should only be used with an expression. You need to change that to <?php (or <? if your server supports it).
<div>s don't have a background attribute. You'd need to modify their style.
You're writing all of the style changes to the page before you're writing the content.
The browser can't even try to render the <div> before it's closed with >, and all of your styles will be interpreted at once, and only the last one will be visible.