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.
Related
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.
I ran into Uncaught TypeError: undefined is not a function when I was trying to include a jQuery plugin (fancyBox image viewer plugin).
My page has 2 divs which use php require codes. I have been testing, the jQuery script works fine when there are no php codes, but once I add the php codes, jQuery no longer works, it produced Uncaught TypeError: undefined is not a function. The php codes work fine.
The php codes are:
<?php
require($DOCUMENT_ROOT . "#sub-html/menu-nav.html");
?>
and
<?php
require($DOCUMENT_ROOT . "#sub-html/footer.html");
?>
This is the jQuery script to call the plugin:
$(document).ready(function() {
$(".fancybox-thumb").fancybox({
(Uncaught TypeError: undefined is not a function - this is where the error is)
prevEffect : 'none',
nextEffect : 'none',
closeBtn : true,
arrows : true,
nextClick : true,
helpers : {
title : {
type : 'inside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
I save this file in .html. I think this error is something specific to how this plugin is compatible when used with other php codes, as in another page, with same structure, different plugin works fine. I have tried putting the jQuery script in the head and body sections of html, both did not work, if that matters.
I searched around, the majority of this error is caused when there are more than 1 jQuery libraries included in the file. Mine has 1 library only. So I think that reason can be crossed out.
Please help me with this. Thank you very much.
P/S: I have figured out the reason why I got this error. I will post my answer after the 8-hour time frame. Thank you for taking time to help me.
I have figured this error out.
The reason was really because there were more than 1 jQuery libraries (or more correctly: 1 library was called multiple times).
The turning point here was when I wrote separate small subpage for header and footer, I included a jQuery library for each page. In the complete page, I also linked that jQuery library, then used the php codes to include those subpages. This, when run, actually called the jQuery library 3 times, resulting in the Uncaught Typoerror.
Thank you very taking your time to help me.
Often, you will get errors like this often if jQuery and/or your plugin is not loaded properly and therefore, some object or variable that's being called or assigned is NOT DEFINED yet.
Make sure that jQuery and your fancybox plugin are loading, that is, that the correct path is being referenced/used in your <script src="..."></script> statements.
If you are using PHP to also generate the paths to the jQuery and fancybox scripts, then make sure it is generated the correct path. The BEST way to do this, is simply to view the HTML source of your page in your browser after it's been generated, downloaded, and rendered. In most browsers simply Right-Click on the page in the browser > choose VIEW SOURCE from the menu. You can also usually type something like view-source:server/path/page.html directly into your browser.
So for instance, http://yahoo.com would look like view-source:yahoo.com in the address bar of your browser.
I need to access some TD values in a TABLE that is in another HTML file. I am not really sure what way helps me get a working solution for this. Currently I want to access it using jquery. All I imagine for solving this issue is to load the whole external HTML file into a DIV in my main file and seek through the TDs to find my favorite one and print its content to my main TABLE TD. I do not seem to be able to figure it out. please help me with this!
My main PHP file:
<?php
...
...
$loading_transmitter = $_POST['transmitter'];
?>
<script>
$("#result").load('<?php echo $loading_transmitter; ?>',function(){
var main_proc_temp = $(table:nth-child(2).tr:nth-child(1).td:nth-child(3)).text();#table loaded from the external file
alert(main_proc_temp);#it should alert: "OK" but alets: "Undefined"
});
</script>
Is the content of the loaded file available this way? Because after loading it on the page (which goes well), I checked the source code and found out that the result div is yet empty.
I think you don't have tr and td class so remove the . from the selectors then check.
Also you should find your table in your responselike,
like,
$("#result").load('<?php echo $loading_transmitter; ?>',function(data){
var main_proc_temp = $(data).find('table:nth-child(2) tr:nth-child(1) td:nth-child(3)').text();
alert(main_proc_temp);
});
If you're using PHP, can you not write these values to a database as they change and access them that way?
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'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.