So... the website i'm working on have three elements that they use on every webpage, the header, footer and a side element (sideLeft). I can access all the files and can even create templates for the post I want to make. The problem is it auot loads those 3 elements so I was hoping that there is a snippet of code that I can implement either into the element file or on the template that would cause it to not laod the sideLeft.el.php element just for that specific webpage?
Why not simply not including the part you don't want to be loaded on that page?
Get the pagename from the url and put condition in sideleft.el.php to not render.
<?php>
$urlPath = $_SERVER['REQUEST_URI'];
if(strpos($urlPath, 'pagename') > 0)
{
// dont display
}else{
//display
}
</?>
Related
In wordpress is there a way to set the body tag attribute on a Page like this :
<body onBlur="window.focus()">
WP Block editor does not allow editing the page html, because it is visual editor of course.
I would use this code so I can make a popup window stay always on top.
BTW I solved the problem how to popup the window, just dont know how to make it stay on top
how to create Popup window
If there is other way let me know.
thanks #ruvee
Wrote step by step instruction here: update body tag
There is a hook you could use called wp_footer. You could add extra attributes to your body tag using pure/vanilla javascript like this:
add_action("wp_footer", "your_theme_adding_extra_attributes");
function your_theme_adding_extra_attributes(){
?>
<script>
let body = document.getElementsByTagName("body");
body[0].setAttribute("onBlur", "window.focus()");
</script>
<?php }
Code goes into the functions.php file of your active theme.
This answer has been tested on wordpress 5.8 and works.
Running it on a specific page:
Depending on which page you would need to run it on, you could use different conditional statements. For example:
Only on archive pages:
is_archive() would be a proper conditional check
Only on the index of your blog:
is_home() would be a conditional check.
Only on front page that may or may not be your blog index:
is_front_page() would be a conditional check
etc...
UPDATE (related to the second request that was not part of the first question)
If you have a page with a slug of blah and you want to modify its body tag, you could use the following snippet:
# The following code would only get executed on yourwebsite.com/blah
add_action("wp_footer", "your_theme_adding_extra_attributes");
function your_theme_adding_extra_attributes(){
if(is_page("blah")){ ?>
<script>
let body = document.getElementsByTagName("body");
body[0].setAttribute("onBlur", "window.focus()");
</script>
<?php }
}
is_pageDocs
For people who would need to add an extra class NOT an extra attributes, there is a hook called body_class and there are too many answers already on Stackoverflow, such as:
Add a custom class name to Wordpress body tag?
body class in WooCommerce
You could hook into the body class filter and do a echo for your attribute, not how filters are meant to work but it gets the job done without js.
add_filter('body_class', 'bt_add_attr_to_body');
function bt_add_attr_to_body ($classes) {
echo 'onBlur="window.focus()"';
return $classes;
}
I noticed from your comments that you would also like to limit to specific pages.
Lets say you want to to happen only on front page.
Youll need to add a if condition for front page, like this
add_filter('body_class', 'bt_add_attr_to_body');
function bt_add_attr_to_body ($classes) {
if (is_front_page()) echo 'onBlur="window.focus()"';
return $classes;
}
Based on where you want this attribute to appeare, you will need to create the appropriate condition.
Using PHP/Javascript, is it possible to check whether an element (let's say a link) exists AND is actually VISIBLE by a real person on a remote website?
I know it's possible to check if a link/element exists in a source of a page (via using cURL or file_get_contents() function), but it may happen an element is hidden behind a <style="display:none">{element}</style> CSS style or class or between <script> or comment tags - then it won't show up for a public user.
So I wanted to check if it's possible to find out if an element is visible in a source code, but not visible to an actual/real user. It's probably impossible but wanted to make sure..
I see 2 options:
using javascript (and jQuery) to check for visility and hidden tags
see: https://api.jquery.com/visible-selector/ and https://api.jquery.com/hidden-selector/
Recreate the page in a DOMDocument and iterate the nodes to check for attributes that make the element not visible. see: http://php.net/manual/en/class.domdocument.php
The second option is a short answer, it would take multiples step to get it done and i'm not sure how since i never made it myself but studying the manual make me say it is possible.
If the target is cross-domain you can accomplish this by scraping the external page into a php holder page using curl, then loading that php holder page as a jQuery Ajax function and the :hidden selector.
holder.php
$ch = curl_init("http://www.foo.com/bar");
$html = curl_exec($ch);
echo $html;
page.php or page.html
$.get('holder.php', function (data) {
hidden_tags = $(data).find('a:hidden');
});
working on a custom weather page for a small ops dashboard. getweather#.php scrapes the weather information I want, and then index.php loads the specific elements on demand with jQuery.
so - I'm trying to get jQuery to check if specific DIV exists on external page, and if it does, then load it, but if it doesn't, load another DIV that always will exist
based on the other questions I've found here, I put together this code, thinking it would work:
<script>
$(function(){
if ($('getweather2.php?wx=1 #warning').is('*')) {
$('#wxwarning').load('getweather2.php?wx=1 #warning');
} else {
$('#wxwarning').load('getweather2.php?wx=1 #nowarning');
}
});
</script>
sadly, this does not appear to work, furthermore, it causes all other jQuery functions to fail.
I can't seem to find any examples or anything really to help me get this script to work.
thank you.
You have to actually get the data before you can check if elements exists or not.
You can't use load(), as it inserts the data directly, but it's just a shortcut for $.get, so you can use that instead, and check if the element exists, and if it does insert it, if not insert another element :
$.get('getweather2.php?wx=1', function(html) {
var el = $('<div />').append(html);
if ( el.find('#warning').length ) {
$('#wxwarning').html(el.find('#warning'));
}else{
$('#wxwarning').html(el.find('#nowarning'));
}
});
I'm trying to make a simple site with two pages, "Search" and "Results".
At first, I had a multi-page template working fairly well. I would change the page, and on page change I would use ajax to get the results. The problem was that I wanted to be able to load the results page without first going back to the search page.
I want to pass parameters to the results page via the querystring so that I can have something like this:
search.html + "some search terms" -> results.html?q=some+search+terms
The problem is that I can't seem to get anything to work right when I split up the html into two files.
I try calling
$.mobile.changePage("results.html?q=" + escape(search))
on the search page, but the $(document).ready function is not firing. I kind of get why it doesn't, since changePage is loading the second page into the DOM?
I also tried manually redirecting, in which case the $(document).ready function does fire on results.html, but using the back button or going back to the search page doesn't fire THAT $(document).ready.
I tried wiring up the pagechange function to search.html, assuming that this would fire when I load the second page, but nothing happened.
Does anyone have suggestions as to how I would pull this off? Or the best way to get the results page to act more independent of the search page?
I've been bitten by this too, it really isn't a good idea to pass parameters through the query string and it makes jQueryMobile behave in an odd way.
Instead I've been using sessionStorage which works perfectly. You could also use a cookie.
I'm not 100% sure where you're actually having issues, but here is some important jQuery Mobile specific info that can help you.
First, read the big yellow section at the top of this page: http://jquerymobile.com/demos/1.1.0/docs/api/events.html
document.ready does not fire when a page is brought into the DOM from an external document. Instead you need to use event delegation and the page-events specified in the link above. Most likely you want to use pageinit as a replacement for document.ready.
Then read the top section of this page: http://jquerymobile.com/demos/1.1.0/docs/api/methods.html (the part about $.mobile.changePage()).
The important part about the second link is that you can pass data via the $.mobile.changePage() function like so:
$.mobile.changePage('results.html', { data : { q : search } });
You can even set the type option to post so there will not be a query-string sent (this should ensure you don't get multiple of the same page in the DOM at a time).
$.mobile.changePage('results.html', { data : { q : search }, type : 'post' });
Another fix would be to manually add the data-url attribute to the <div data-role="page" id="results"> page. When you grab a page like this:
$.mobile.changePage("results.html?q=search+term+here");
It's data-url gets set to: results.html?q=search+term+here. If you manually set the data-url to results.html then you can navigate to the page like this:
$.mobile.changePage("results.html", { data : { q : 'search+term+here' } });
Which will look first for the data-role="page" element that has the data-url attribute set to results.html before re-loading the pseudo-page via AJAX.
Thanks for the input guys. I used a plugin that allows me to use faux-query parameters in the hash for a multi-page layout.
https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params
I just added this in and ran the search on page change, getting those page parameters for the search.
I am using this code to refresh the data inside of the div:
<script>
$(function() {
$("#refresh").click(function() {
$("#new").load("/new.php")
})
})
</script>
Except it loads the who page inside of the div, instead of just the information that is inside of the div.
How do I make it refresh only the data that is inside of the div? Is there a way of doing it other than putting the information for that div in a seperate page?
If you mean that new.php is a script that returns the entire page, the answer is no.
You have to send just the html fragment you need for refreshing the div.
You can always get the result from new.php, take the good part and discard the rest but it is inefficent.
You can load page fragments with 'load'. Say the information you need is inside a div called "#info" on new.php, change the load line to this:
$("#new").load("/new.php #info")
If you were refreshing data from the server you have to reload the whole page/frame (you could request the client to cache images, CSS, etc.) or use Ajax.