I must work on Oracle MaxyMiser for make some changes into one site.
I've already tryied to modify the Html and it's more or less clear for me how make change from this section. Now I see there is another section inside the Maxymiser panel for make some changes. This section is the script section. I don't understand how this section works. I tryied to change one css property of one html div without succes.
This is how I try to change one proprety:
var salesAmount;
salesAmount = jQuery('#regionForm')[0];
console.log(salesAmount);
console.log(salesAmount.style.display); --> ""
console.log(salesAmount.css); --> undefined
//salesAmount.style.display = "block"; --> doen't work
});
Here I tryied to change the css display property without success ( the div already have one property display:none setted from the original css rule ).
I would like to open one modal already present into the html from one script and chage some css class or properties.
Can someone help me?
Thanks.
After several tests I was able to add a custom script from the appropriate section.
In order to connect a click action to a custom button added via a variant of MaxyMiser I had to work through the window.onload function.
An example of js I added:
//insert script code here
window.onload = function(){
const btn_close = document.querySelector(".class-button");
const banner = document.querySelector("#idDiv");
btn_close.addEventListener('click', function(){
banner.classList.add('hidden');
},false);
};
I hope this can help someone.
Bye
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.
I would like to hide a HTML Form before even the page loads using javascript.
I was able to use display='none' style property to hide the form using javascript but the form content loads visible for a second before disappearing.
var searchbar = document.getElementById("searchform");
searchbar.style.display = 'none';
I have read many solutions in stackoverflow adding some css code in the page and display the content later using removeClass.
Problem is I do not have access to code behind the web page to add the CSS content. However I can add some custom javascript code only in header or a footer.(cannot use jQuery as well).
Please let me know if its possible hiding the form element as expected.
I am quite new to javascripting. Please provide your valuable suggestions.
edit: Sorry, if you only can use some javascript and cannot access the html or css there is probably no solution for your problem.
You can store all you form in a javascript variable, and write it in your div when the page is ready
Simple example :
function showForm(){
var container = $('#formContainer');
var form = '<input type="text" name="myInput">'; // Or you can load it from an external file
container.html(form);
}
$(document).ready(function(){
showForm();
});
But the best way is adding a css rule to hide your form, and show it when the page is loaded.
Web browser first render HTML. It takes time, while browser download css or js file. Best apprach would be to use inline display='none', not in css file.
<form style="display:none;">
...
</form>
I'm looking for a solution that will allow me to display a div when I click on a single link (which will change the way css style) with variable content (eg a sub-div with service1, service2, service3 ). This div will be displayed also propose several offers that will only display the div payment when one of these offers will be selected.
It's maybe hard to explain (i'm not english so sorry for really noob level), so maybe with this image you will "understand" a little bit more:
http://image.noelshack.com/fichiers/2015/38/1442422045-fonctionnement.jpg
I confess to being a bit lost with JavaScript for this kind of thing. I know it's probably achievable, but how? :-(
Thank you for your help folks!
If you want to go the way with altering CSS with javascript, assuming you are not creating the variable content on the fly, have the divs css for display set to none.
#divID {
display = none;
}
Then set an event listener on your link to change the display style to block.
document.getElementById("linkID").addEventListener("click", function() {
document.getElementById("divID").style.display = "block";
}
Ok so I created a crude representation of what you asked without much effects. But the fiddle I created completely functions as you intended. If you click buttons on div 1 the content of div 2 gets updated. If you click anything on div2 the information is displayed in div3. Here is the example: Working Example
window.function1 = function(){
var edits = document.getElementById('2');
edits.style.background="aliceblue";
}
//SAMPLE CODE TO EDIT ANY ELEMENT BY REFERRING BY ID. CALL SUCH FUNCTION ONCLICK
Please check the example to understand it fully.
Recently I made a archive box for my blog. Firstly I use style attribute for styling my list. But when I moved the css code in style attribute to a separate css file, my JS code didn't work. The following codes work fine when click the -> button.
But when I use class of css instead of style attribute, the JS code doesnt't work. I cannot see the sub list items on the screen when I click the -> button. So I don't want to use style attribute. Because it easy to read style code from css file in my website. What can I do for handling this problem? Any suggestion?
Note: Because "insert into post" button in code snippet tool doesn't work, I put codes as images into my post.
It's because you're checking the style attribute, which you're not setting anymore. Just assume that the thing is not visible when you don't see a value since that's the default.
if (!months.style.display || months.style.display == "none") {
months.style.display = "block";
}
After the first click the style attribute will have a value and it should work.
I can't understand why this inner html script isn't working. I posted the javascript on jsFiddle. You can see it here: http://jsfiddle.net/JyV73/1/
I have two versions of the link. In the first the rewrite link is within a popup that needs to be closed and another opened with the proper text within the textarea.
In the second, there is just a link on the page that when it is clicked should hopefully open the popup with the proper text within wht textarea.
The only problem is that it doesn't work for the second version because of I must close the popup. If I comment out that first document.getElementById(id).style.display = 'none' then the plain link works, so my first thought is to create two function. But since this javascript is part of a php template file that is included I think it would be simpler on the php code to just solve this using pure javascript.
I'm still learning javascript, and any help would be appreciated. I hope I was clear. Thank you so much.
HTML
open
<div id="popup" class="popup"> Rewrite
</div>
<div id="new" class="popup">
<textarea id="new-text"></textarea>
</div>
<!-- This is the stuff that doesnt work for some reason Rewrite
<div id="new" class="popup">
<textarea id="new-text"></textarea>
</div>
-->
The Javascript
function rewrite(id, text) {
document.getElementById(id).style.display = 'none';
document.getElementById('new-text').innerHTML = text;
}
I am not entirely clear on what you are trying to do here, but from the way I read your code you want to set the value of the text area to a specific value.
here is how you do that: http://jsfiddle.net/JyV73/9/
function rewrite(id, text) {
$('#new-text').val(text);
}
You're not using pop-ups, you're using modals, which means its' a div inside the page that toggles visibility. You can access information from those components whether they are visible or not, fyi.
Still, Im not entirely sure on what you're trying to do here.
I changed document.getElementById('new-text').innerHTML = text; to document.getElementById('new-text').value = text; because it's the value attribute of the text box which you want to set.
Also each element on the page with an ID needs to have a unique ID (it seems like you might have been trying to reuse IDs at one point but maybe I'm wrong!)
I still haven't worked out exactly what you're trying to achieve but those changes needed to be made no matter what.
This code is sufficient to achieve your second goal though: http://jsfiddle.net/JyV73/19/
I added an onClick attribute (onClick="rewrite('popup', 'blah')") to your "open" link to do the writing to the textbox. :)