So, I have that WordPress website on which I installed a template (Zoo). My problem is that I want the whole site to be in French, and there are three buttons in that template which title tag is coded deep in a js file that is inside a plugin which has been integrated to the template.
These are my first steps as a web developer (I come from C++) and I'm having quite a hard time understanding what is missing in the files, but I understood a few things by looking around.
So I made a child theme. This is the functions.php file. I think it works fine, but here it is in case I am doing it wrong :
<?php
function removethosedamntooltips(){
wp_register_script('removetooltips', get_stylesheet_directory_uri() . '/js/removetooltips.js');
wp_enqueue_script( 'removetooltips' );
}
add_action('wp_enqueue_scripts', 'removethosedamntooltips');
This is the aforementioned removetooltips.js file. I believe I have to call for a button hover because the template is single-page parallax and the buttons I want to modify are not visible until you click another button which allows for another display without sending the browser to another URL (if I remove line 2 and the closing brackets that go with it, it doesn't work anyway). Also, those tooltips appear only on mouse hover, so it seems a good idea :
jQuery(document).ready(function(){
alert("jQuery!!");
jQuery("button").hover(function(){
alert("jQuery!!");
jQuery(".mfp-arrow-left").attr("title", "Précédent (flèche gauche)");
jQuery(".mfp-arrow-right").attr("title", "Suivant (flèche droite)");
jQuery(".mfp-close").attr("title", "Fermer (Esc)");
});
});
The first alert displays after the page is loaded, but the second one does not show up. The tooltips (button title) still show up in English.
A piece of information that might be useful to solve this problem (I'm only 2 days into reading stuff about JavaScript and jQuery so I don't really know): I had to use jQuery instead of $ or the console would tell me that $ is an unknown function. Do I need to somehow include the jQuery framework in my file (if so, where and how ?), although a calling for the jQuery library already shows up in the header ?
If you provide a solution that will remove the tooltips instead of replacing their content, I will be happy enough.
Thank you in advance !
Instead of using
jQuery("button").hover(function(){...});
You should find the container in which all buttons are placed or just use body
and use jquery .on() method. As far as I know it'll work.
so your complete code will be like this
jQuery(document).ready(function(){
alert("jQuery!!");
jQuery("body").on("hover", "button", function(){
jQuery(".mfp-arrow-left").attr("title", "Précédent (flèche gauche)");
jQuery(".mfp-arrow-right").attr("title", "Suivant (flèche droite)");
jQuery(".mfp-close").attr("title", "Fermer (Esc)");
});
});
Explanation:
Using .on() method binds the event with dynamically created elements too. As you mentioned in your question that buttons are not created until another button/link is clicked.
Edit: Tested this one and its working. I've removed the second alert because with that you won't be able to test.
Related
I am a newbie and this is the first time ever I am asking a question in this community.
One of my friends just recently update his WHMCS to the latest version and suddenly he got a branding line before the footer area. In the previous version, he was able to remove that line by editing the footer.tpl file but in this version, he couldn't find it because now it's written in tags. (p and a)
I found one jquery code mentioned below:
$(document).ready(function() {
$("p a").each(function(){
if( $(this).attr("href")=="http://www.whmcs.com/" ) {
$(this).parent().hide();
}
});
});
But I don't know either it's fine or where to put this one.
Please guide and help how to remove it, as now in the client area it is visible to everyone now.
Using attribute selector... This should work:
$(document).ready(function() {
$("[href*='whmcs.com']").each(function(){
$(this).parent().remove();
});
});
So you now target the elements by the href value... Whatever the DOM structure.
If the href contains whmcs.com (the *= operator), the parent of that element will be removed.
In version 8.3 go to your template, I am using the "twentyone" template. Access your footer.tpl and paste this on line 1.
<script type="text/javascript">$("p:contains('Powered by')").remove();$('#page');</script>
For anyone interested.
Am using the SwiftModders theme and found it in the following file
\templates\swiftmodders\js\swiftmodders.min.js
Used Notepad++ and searched "Powered by" and deleted that section.
Issue resolved ^^
There are two ways to remove WHMCS branding.
<script>
if($("p:contains('Powered by')").length){
$("p:contains('Powered by')").hide();
}
</script>
There are two ways to remove WHMCS branding.
In the admin area, you can edit the footer.tpl file to remove the link to whmcs.com from the main admin area.
From the login page, you can edit admindir/templates/login.tpl to remove the link
Second goto your Footer file and paste this script.
<script>if ($(“p:contains(‘Powered by’)”).length) {$(“p:contains(‘Powered by’)”).hide();}</script>
Try adding this code in custom.css in your template
#main-body .primary-content p:last-child{
display: none;
}
I'm stuck using a theme in WordPress for a client where the header is horrible in responsive view. I can work with desktop widths but anything below 768px needs to have an entirely different markup because of the clients demands -- any attempt to try to do this via CSS has led to even more UI disasters. My hope was to utilize jQuery's .html() functionality to swap out Bootstrap grid elements at < 768px. Here's a snippet example -- say I needed to move the logo from a far right position in desktop to the first element on the left in a header. I'm using the theme's declarations for the dynamic logo correctly:
if($(window).width() < 768) {
$('.top-bar').html('<div class="col-md-3"><?php vg_ebuilder_display_logo_sticky(); ?><div class="logo-inside"><?php vg_ebuilder_display_top_logo(); ?></div></div>');
}
But this returns commented out PHP:
<!--?php vg_ebuilder_display_logo_sticky(); ?-->
and
<!--?php vg_ebuilder_display_top_logo(); ?-->
So, maybe two questions here: is there a way to add dynamic PHP like this in WordPress via a jQuery .html() function on $(document).ready and, assuming it could, would it indeed be dynamic if loaded after the DOM?
No. PHP runs on the server, not the client. The javascript would need to make a call to an endpoint that would perform the php logic, return a response, and that response put on the page. Inserting php on the client will not be invoked.
I can't 'comment' a suggestion to you as my reputation isn't yet 50, so hopefully this is the right answer. I found this worked for me with a similar issue in Joomla (Q48891999).
In the div you want to change, add a unique class, e.g. "builder".
Then, if you need to, write a new css class or classes starting with
#media (max-width: 767px) {
.your_new_class {
}
}
- but not using the name 'builder' for the new class - in your custom css file for the div you want to change.
Then use jquery .addClass to apply the css class to your div in your index.php. Something like this:
<script>
$( ".builder" ).addClass( "the_class_you_want_to_apply another_class" );
</script>
The spaces between the parentheses and the double quotes are deliberate, as used in the examples on the jquery website.
In my case, I added this to the bottom of my index.php just before the closing body tag.
You may need to have more than one of these scripts to apply to different elements.
This seems like it should be super-easy to resolve, but it has me stumped.
All the links on my page added via get_header() and get_footer() work just fine. The links added via single-class.php and archive-class.php don't work.
Looking at the source code in Google Chrome, the links appear to be perfectly formed, but when I click on them nothing happens. Here are two examples:
<a class="btn btn-default" href="http://markrummel.com/dev/enzas/classes/culinary-nunnsense-sunday-brunch/" alt="Culinary Nunnsense Sunday Brunch">Class Details</a>
Enjoy More Photos on Our Facebook Page
The first one the href attribute is populated via get_permalink(). The second is hard-coded exactly as it appears above.
The class custom post type is added via a plugin I created. The single-class and archive-class are added via a custom theme I created.
Here are the two live pages:
archive-class.php --> http://markrummel.com/dev/enzas/classes/
single-class.php --> http://markrummel.com/dev/enzas/classes/culinary-nunnsense-sunday-brunch/
There are links a part of the body of other pages added via template-[template-name] that work just fine. It seems like it is only the main content area of the pages associated with the class custom post type that have broken links.
Any help figuring out what is going on would be most appreciated!
Thanks!
Javascript is preventing those links from firing. It appears to be coming from this section in scripts.js starting on line 8:
$('.class').click(function(e) {
e.preventDefault();
});
All links that are children/grandchildren of element with class 'class' will become void, which is causing all of your links to fail.
I am using 'jQuery AJAX PHP' to do some '.jpg' file copying (approx 330kb per file). I copy files to a new directory location.
When I return to the HTML and use jQuery to add an IMG tag to a Table element, some of the files I have copied are shown as Not Found with 404 errors, but they are there.
I am wondering if it is a speed error. I tried to slow down the return from the PHP, by reading the directory where the files had been copied to, but that did not seem to help.
Am I right in thinking it is a speed problem and does anyone have an idea as to how I may overcome this problem, because only by displaying the copied file, can I be certain it has been copied.
Sometimes I have the same problem with not loading the images. If you are going to use jQuery I will recommend that you put your script (which loads the images) in
$(document).ready(function() {
// put all your jQuery goodness in here.
});
The fact is that your DOM object is not ready when you want to show or make operation with it.
Don't forget to call
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
in the head of your HTML.
Having tried various options suggested here and some others, I researched, I decided to try putting the display of the images in a different function from the AJAX/PHP. In other words instead of processing the images in the result function of the AJAX call, I just passed the results from the success function to another function.
This seems to have cured my not-found displays.
This may be a coincidence, with something else going on, because I am very poor in the knowledge of the flow of the DOM.
I had one page in Views in CakePHP, it have normal javascript block,
Just inserted:
<script language="JavaScript" type="text/javascript">
---code---
</script>
Inside page, and it was all working okay...
But now... It doesn't show...
How can I change configuration or something to enable showing javascript blocks without CakePHP commands.
Javascript needs data from that page so I can't use outer file,
and it's too long to use $javascript->codeBlock
Is there any way to reconfigure stupid CakePHP to start showing those blocks?
Some files are showing javascript, and it's working all okay, but some of them won't show...
Please help...
If you mean that you want to view the code when the page is displayed, try surrounding it with <pre>...</pre>
If you mean you want the browser to process the code, then provided you are
actually going to that view file and
the code isn't commented out (<!-- ... --> or <?php /* ?> ... <?php */ ?> etc.) and
the code isn't being obliviated by a php conditional (if ... then ... else... endif)
then it will be there. Try Firefox ctrl-u to view the source.
Also try posting the view code here so that we can give you some sort of informed solution.