I want my website to show a random background image (which I've set up with javascript) but I don't want it to change again while the user is on the site. At the moment it changes every time you click a link, but I'd rather it only change when you hit the Home button.
I think this other question is similar, but as I haven't used php much before, I was wondering if there was a javascript alternative? (or just something silly i missing here?)
choose random value only once
Thanks
Javascript solution (fully client side):
Use sessionStorage
fileurls=["a.jpg","b,jpg"]// list of file URLS
function getFileURL(){
if(sessionStorage.fileurl)
return sessionStorage.fileurl;
}else{
sessionStorage.fileurl=fileurls[Math.floor(Math.rand()*fileurls.length)]
return sessionStorage.fileurl;
}
}
Now, just set the src of the image to whatever is set by the function:
document.body.style.background="url('"+getFileURL()+"')";
Basically, this puts a random file URL in browser storage for a session, and uses it whenever required.
PHP solution (fully server side):
$fileurls = array('a.jpg','b,jpg');
if(!isset($_SESSION['fileurl'])) {
$_SESSION['fileurl'] = $fileurls[rand(0, count($fileurls) - 1)];
}
And, wherever the <body> tag is, do this:
<body background="<?echo$_SESSION ['fileurl']; ?>">
You can use cookies or even window.localStorage to store informations in Javascript through navigation (and then use the same logic as in your link).
Use JavaScript to set an onClickListener for the Home button which will change the background when clicked.
Related
I want to go between pages inside a PDF File contained in a IFRAME by just clicking on a link.
This is what i made so far:
HTML:
Pagina 10
<iframe name="ifrx" id="ifrx" src="1430263377Physic.pdf" style="height:800px; width:1170px">
Script:
<script>
function pagina(pag) {
$("#ifrx").attr('src','').delay(100).attr('src','1430263377Physic.pdf#page='+pag);
return false;
}
</script>
But doesn't work, im trying to achieve this but with no luck.
Change attr to prop. Like that:
function pagina(pag) {
$("#ifrx").prop('src','1430263377Physic.pdf#page='+pag);
return false;
}
Attribute is used to set initial value of iframe object property when parsing, but when you're changing the attribute, value doesn't populate to property.
By the way, as far as I know, there is no need to clear src, wait and set it to right value.
UPDATE:
I checked this approach for websites (see here). I guess it's impossible for PDFs, so replacing iframe with new one, with updated src can be only possible way to do it.
I have a website where users can generate their own Codeigniter websites using a wizard in it users will provide module, fields and functions details. Based on the user input a website will be generated and deployed on my website and a demo will be shown to the user before they go with the download. Everything works fine.
Now I am planning to allow users to choose different styles/themes for the generated website when they are previewing it. How can allow users to see their changes immediately without reloading the entire page?
I tried by replacing their style sheet file on the generated website with the selected style and redirected to another page on the generated website. But the same style sheet file is used since it is already cached by browser. So please give me some options. If that can be done without redirecting the user it will be the best option for me.
pass a variable to the view, the variable holds the value of the filename of the stylesheet? As far as changing the style file when the user is in the same page... see this question: Is there an easy way to reload css without reloading the page?
<?php
$data['stylesheet_name'] = 'user1';
$this->load->view('viewname', $data);
/**
* View File
**/
<link rel="stylesheet" type="text/css" href="/css/user/<?= $stylesheet_name; ?>.css" />
I have used the below code and it is working without the need of changing the style sheet file name.
function reloadStylesheets() {
var queryString = '?reload=' + new Date().getTime();
$('link[rel="stylesheet"]').each(function () {
this.href = this.href.replace(/\?.*|$/, queryString);
});
}
This forces browser to reload the file since the parameter changed because of the time change.
This worked for me to replace a single stylesheet. The stylesheets are named "themegray", "themeblue", "themegreen", etc. "t" represents the new color, such as "blue".
function flipTheme(t) {
$('link[rel="stylesheet"]').each(function () {
if (this.href.indexOf(theme)>=0) {
this.href = this.href.replace(theme, t);
theme = t;
}
});
}
I compile all my javascript for different pages into one file, so I have to identify page for my all.js. I can put a hidden element in my pages and let javascript detect this element, but I don't like this solution, are there any other ways to do this?
You could go by the url using location.href (or another field from the location object).
However, a better approach is using a data- attribute on the body tag, e.g. <body data-page="whatever"> and then using $('body').data('page') to retrieve the value.
If you script is based on pages, then compiling them into one script is a bad idea, load the file separately, it will be lighter and definately increase some performace.
I am not sure, why do you need this, but in general it is not good practice to change dynamicaly change content of javascript file, since you are disabling javascript cacheing, what can be performance issue later.
Any way, you can solve it from other side, what about using all.js just to detect the page, where are you and then you can use this information, to load right javascript file dynamicaly, like in the following example
document.write('<script src="'+location.pathname+'.js"></script>');
Which will load same file as you are on, just with .js extension. So for example on index.html page it will load index.html.js file
I almost always use MVC frameworks and tend to put my action and controller as classes on the body element
<body class="main_controller index">
Which lets you do things like this:
$(document).ready(function(){
//Only for lessons#search
if (!$(body).hasClass('lessons search')) {
return;
}
function close_style_filter_box() {
$('#style_filter_box').slideUp();
}
});
$(document).ready(function(){
//Only for main_controller#index
if (!$(body).hasClass('main_controller index')) {
return;
}
function do_something_else_on_this_age() {
....
}
});
Another way is using javascript variable:
var PAGE = 'page1';
Hallo All,I have a problem. I have written a very extensive script to change my body-background from a page-specific background-image to an other background-image. For refrence:My 'mypage.html' has a default background of class='image1' defined in the default stylesheet.I have written a script to change this to class='image10' or class='image11', which are defined in the persistent stylesheet. (Believe me, this is the short version, but this part works... well, is going to. No questions here.)My 'otherpage.html' has a default background of class='image2' defined in the default stylesheet and I want to be able to change this as well to the same 'image10' and 'image11' from the persistent stylesheet.Both default backgrounds have multiple differently colored versions in alternate stylesheets... Change the stylesheet and class='image1' links to another version of the image.All this is directed by cookies that are page specific as well. This makes finding a solution quite important, because otherwise I would have to set cookies for every single page. Which I find unacceptable.My question is, do I have to copy/past the whole script to my 'otherpage.html' and change al the 'image1's to 'Image2's or is there a way to javascript something like:
if(HTML = 'otherpage.html') {
(".image1" = ".image2")
}
Excuse my very amateuristic script. I have looked all over, but I wouldn't even know how to search for this... Hope someone can help, otherwise copy/past it is ;)
You can use this little script here
var currentPage = window.location.pathname;
if (currentPage == "/somepage.html") {
// change the body class name
document.getElementsByTagName("body")[0].className = "image2";
}
You can use a switch statement if you have multiple pages to test.
You can control the styles(background and other styles) through the base class which you can set it to body tag of the document or any root container. On page load check the page name and set the class names accordingly.
if(page == "otherPage"){
document.body.className = "image2";
}
Now all the classes falling under image2 will be applied.
We are using the enhanced sub-modal script (http://gabrito.com/files/subModal/) and would like to bypass the loading.html screen that comes up by default. Can this be turned off? Setting the value to "null" shows a "page not found" error before the actual page loads.
It's not hard, but the code is scattered all over the place in the Javascript source. You might want to use a more modern alternative instead (especially if you're already using a library on your site)
First of all, we strip out all instances of the gLoading variable - this means removing the setPopUpLoadingPage function and the src="'+gLoading+'" in the part where they build the HTML string to inject into the page. And finally, one last reference to gLoading exist in the hidePopWin function, to reset the iframe source back to the loading page when the modal is hidden.
Then finally we replace the line gPopFrame.src = url; in the showPopWin function with this:
if(gPopFrame.src != url){
gPopFrame.src = url;
}
To stop the iframe from reloading if it's the same source.
You can see a live demo of the new script here: http://www.jsfiddle.net/yijiang/T2u2Z/ and also grab a copy of it here: http://dl.dropbox.com/u/1722364/submodalsource.js