I wish to overwrite (not override), a css file with the click of a button. Currently my button simply downloads the css file instead of writing it to a path on my server. I want to write my style.css file to /templates/mypath/style.css and overwrite whenever the button is clicked. NOTE: I already have the button part working - Just need some ideas to overwrite the file to a path.
Why am I doing this?
I have built a css customizer where user can modify css from Joomla admin panel (for simplicity - lets just call it php based admin page). The user can then click APPLY CSS button to write the new css file to the server path which will then take over the styling of the website.
Here is my code:
BUTTON - HTML
Get CSS
I still need some jQuery because the code below does the trick to generate the css for me and I cannot probably convert that to php:
My JQuery Code:
$("a[download='uikit.css']").on("click", function(e) {
downloadCSS($(this), $style);
});
....
....
a.attr("href", $url.createObjectURL(new Blob([css], {type: "application/force-download"})));
Please help me to write PHP function to achieve this.
This is an example of what my button does - http://getuikit.com/docs/customizer.html - The Get CSS button at the bottom dowloads the css file but I would like to overwrite it to a path.
If you have the CSS loaded into a form simply POST the form content via Ajax to a php script on your server and use file_put_contents('/path/to/style.css',$_POST['css']) to write/overwrite the file.
Alternately, you could just submit the form to the php script and post the data that way.
Related
I have a welcome animation on my website file that is all contained in one CSS file. How can I have this CSS file load only once per session?
I am using Wordpress, and I have got the animation linked inside a header file which only loads on the homepage. I only want this CSS file to load once, so that when the user clicks back onto the homepage, the CSS file does not load.
I understand I will have to set a cookie but I'm not sure what the best way of doing this is. I hope someone can point me in the right direction, thank you
EDIT: Here is some code I have attempted, using jquery.cookie.js. My code is throwing the error:
Uncaught TypeError: ("<link/>" , (intermediate value)(intermediate value)(intermediate value)).appendTo is not a function
Code -
jQuery(document).ready(function() {
if (jQuery.cookie('noShowWelcome')){}
else {
jQuery(("<link/>", {
rel: "stylesheet",
type: "text/css",
href: "http://le1dev.co.uk/pureretail/1/wp-content/themes/le1-web-package-a/library/css/header-animation.css"
}).appendTo("head"));
jQuery.cookie('noShowWelcome', true);
};
});
Refer to this question and answer for setting session cookies using js, and this question for loading a CSS file using js.
You can combine these to check for a session cookie. If it doesn't exist, create one and load the CSS. If it does exist, do nothing.
This is a bit of a follow on from this question/answer: https://stackoverflow.com/a/4152528/348922
I'm simply not sure how to apply this to my situation (if it's at all possible).
I have a container div that when a button is clicked a file is loaded into the div via jquery:
var root = location.protocol + '//' + location.host;
$(".button-book").click(function(e) {
e.preventDefault();
$('#container').load(root+'/loaded-file.php');
});
Fine. BUT that file has a number of text strings that I need wrapped in php in order to hook into them for translation purposes (using WPML plugin for Wordpress):
<?php _e('Arrival Date', 'mywptheme'); ?>
<?php _e("Day", 'mywptheme'); ?>
<?php _e("Month", 'mywptheme'); ?>
<?php _e("Year", 'mywptheme'); ?>
// etc...
Obviously this doesn't work when the file is loaded dynamically. Is it at all possible or am I completely wasting my time?
Your issue is that _e(...) is a wordpress function, so when this file (loaded-file.php) is executed outside of wordress, it does not work. Its not actually anything to do with jquery - if you visit the file directly in your browser it wont work either.
Simply add the following to the top of loaded-file.php:
require($_SERVER['DOCUMENT_ROOT'].'/blog/wp-blog-header.php');
Adjust for your actual wordress location, in the above case wordpress is in domain.com/blog/
I'm trying to modify an existing module to insert collapsible div.
my javascript functions are in the file 'my_module.js' and look like that :
my_module.js
function myFunction1(param){
...
}
function myFunction2(paramA, paramB){
...
}
I added my_module.js in module file using drupal_add_js and then I don’t know what to do next!
<?php
drupal_add_js(drupal_get_path('module', 'my_module') . '/my_module.js');
// -----> I want to call myFunction2 here !!
?>
The website has Drupal core 6.24.
thx
Just continue with my_module.js as normal javascript file. You can try to insert div by using JQuery.
$("#foo").append("<div id='my_collapsible'>hello world</div>")
And by JQuery attach to #my_collapsible some actions you want (make it collapsible).
That method should actually work.
Have you:
Checked the file paths are correct
Checked in firebug/webkit inspector that the JS file is being loaded?
I know we can get some path with <?php bloginfo('something');?> into php files, but is it some equivalent for javascript file loaded with the enqueue_script function ?
Did wordpress change some shortcode into those files ?
EDIT : I think I did not clearly express my needs. So i want to know if wordpress had some shortcode who, placed into a js file who is loaded with the enqueue method, will be replaced by the template path. Typically i need to make some ajax call form a .php file from my template and want to avoid hard linking file
No javascript files won't be parsed as php, and as such won't process any shortcodes or php.
Why not just make your links relative. Often I find subdomaining my dev copy, removes any problems when moving a site live and broken links.
You could cheat and link to a php file, which then passes header information as Javascript. Doesn't seem very elegant though. See here.
Or you could just declare the variable in a little bit of inline Javascript and pick it up in the external JS file.
<script type="text/javascript">
var siteURL= '<?php bloginfo('url');?>';
</script>
<script type="text/javascript" src="yourscript.js"></script>
Then in yourscript.js just reference the variable 'siteURL'
You have to register scripts using wp_register_script(). Then by placing wp_enqueue_script before wp_head() it will load them in for you. The idea of using wp_enqueue_script is that you don't need to enter them all in manually, and you can load other scripts depending on whether a certain script has been loaded.
I've searched the entire web for a clear answer but haven't found one yet.
I have this site:
www.helixagent.com/todo/
and I want to load that entire site into a portlet in my main index page.
I tried an iFrame approach but it fails to load the site correctly. The styles and javascript files don't get loaded (i think)
Is there a way to make a portal that mimics a new browser page and load the content exactly as it would if it was directly accessed via the url bar?
It’s possible to perform cross-domain requests using jQuery.
Simply include this file after loading jQuery, and then you can do funky stuff like:
$('html').load('http://helixagent.com/todo/');
Note that this of course won’t load the embedded CSS and JS files. You’ll need to use an iframe for that:
$(function() {
$('body').append('<iframe src="http://www.helixagent.com/todo/" />');
});
Live example: http://jsbin.com/uruka
Here's an example using jQuery and iframe:
$(document).ready(function(){
$('#somediv').html("<iframe src='http://www.helixagent.com/todo/'></iframe>");
});
This should be placed inside the <head> tag of your page and it will load the entire site with all the js and css too into a div.
Have you looked at using Server Side Includes.