Many sites these days have 'theming' functionality, when user is able to customize the pages' look. Sometimes it's only a fixed set of themes, but sometimes people are free to choose any style they want - for example, they can set up any color of the pages' background.
I want to go a step further - and let them choose the background image as well. The flow is very simple: user uploads a file (via <input type="file" />), then this file becomes a background image - but only for this user.
I can't find anything about this functionality online, though, and I have no clue about what to do.
Something else I was thinking was that, if a user selects a background, maybe I could use HTML5 localstorage to make that background come up every-time that visitor visits the page.
Here's a proof of concept (mostly based on the code given at MDN FileReader doc page + this answer):
HTML:
<input id="test" type="file" onchange="loadImageFile(this)" />
JS: no wrap (head) mode
$(switchBackground);
var oFReader = new FileReader(),
rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
oFReader.onload = function(oFREvent) {
localStorage.setItem('b', oFREvent.target.result);
switchBackground();
};
function switchBackground() {
var backgroundImage = localStorage.getItem('b');
if (backgroundImage) {
$('body').css('background-image', 'url(' + backgroundImage + ')');
}
}
function loadImageFile(testEl) {
if (! testEl.files.length) { return; }
var oFile = testEl.files[0];
if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
oFReader.readAsDataURL(oFile);
}
And here's a working demo, checked in latest Firefox and Chrome versions. Looks to work OK, at least. )
here's a quick solution to this problem.
custom-background.js is a lightweight jQuery plugin to allow users change the website’s default background and saves the background selected to local storage. This plugin can easily be added to any website or web app without any compromise on website's performance.
you can download it from here and check the code
https://github.com/CybrSys/custom-background.js
Related
I'm making an android and ios app using kony and I want to be able to import an image from the phone's library (jpeg or png).
I have the function for my import button here:
this.control("btnImportPicture").onClick = function (button) {
// Insert solution here
};
The name of my image widget (which I want to set to the selected image) is imgUser
Problem is I have no idea what to do for my btnImportPicture button onClick function
Edit:
I have seen that you can use the following in the onClick function:
var config = {
selectMultipleFiles: false,
filter: ["image/png", "image/jpeg"]
};
kony.io.FileSystem.browse(config, selectedFileCallback);
But I have no idea what to do for the selectedFileCallback, currently it just crashes everytime I click the button.
I got an answer on the kony forums and thought I better share it here in-case anyone else runs into this issue.
kony.io.FileSystem.browse API is applicable for only Desktopweb Platform. it will not work in Mobile richclient applications.
we can use "kony.phone.openMediaGallery" API. The main usecase of this API is to open the gallery of the phone and to pick any image. Once we select any image then onselectioncallback function will trigger with image rawBytes as input parameter . we can use this rawBytes in our Application either to display image on the image Widget or for other usecases
Please refer below documentation link.
http://docs.kony.com/konylibrary/studio/kony_studio_api_reference_guide/Default.htm#phone.htm#phone.op
Put this in your onClick:
function openGallery()
{
var querycontext = {mimetype:"image/*"};
var returnStatus = kony.phone.openMediaGallery(onselectioncallback, querycontext);
}
function onselectioncallback(rawbytes)
{
if (rawbytes == null)
{
alert("Please select an Image");
return;
}
frmone.image26850851102837.rawBytes=rawbytes;
}
Note : we can select only one image at a time.
I need to detect if the browser disables images on the current page. Is this possible with JavaScript (jQuery/Modernizr)?
Problem: The project uses image sprites for icons and displays them like <i class="icon-user"></i>. The app is partially used by mobile users and some of them disable images if they're surfing with edge. As a result some buttons disappear.
The only thing I need is to display something (a gray square, circle…) if images are blocked. Via CSS class on the <html> element or so (class="no-images" e.g.). Writing alternative text between <i>…</i> is unhappily no option.
Thanks for your thoughts! I hope it exists a simple solution.
You can use the following script:
function noimage()
{
if ((document.getElementById('flag').offsetWidth==1
&& document.getElementById('flag').readyState=='complete')
||(document.getElementById('flag').offsetWidth==1
&& document.getElementById('flag').readyState==undefined))
{
var objHead = document.getElementsByTagName('head');
var objCSS = objHead[0].appendChild(document.createElement('link'));
objCSS.rel = 'stylesheet';
objCSS.href = 'alt.css';
objCSS.type = 'text/css';
}
}
And you need the following html markup:
<body onload="noimage();">
<img id="flag" src="clear.gif" alt="">
Just add it to the body. What this does is check the offsetWidth property to look for a 1x1 pixel image at the top of the browser. If it returns true it means that images are enabled.
If you need more info go here.
i'm fairly newbie in JS, just learning so don't bash me hard if i say something unorthodox.
Aim
Load specific background image when user enters specific topic on forum
What I've tried
I searched some options and found Window.Onload option that would allow me to load image on background after page loading is complete. The question is how do i trigger specific images on specific topics?
Pseudo Code
if (user enters) /t/sueper-topic
load - super-background.png
else - carry on
var pathImages = {
'/t/sueper-topic': 'super-background.png'
};
window.addEventListener('load', function(){
var src = pathImages[location.pathname];
if(src)
document.body.style.backgroundImage = 'url(' + src + ')';
});
I have a Div on my site, I want to place a button/link (or other things of the sort) that when clicked will save the div and all its contents to the users computer, much like the printing code which is used to print divs. I'm a coding novice so all help will be apreciated.
There is a browser support limit doing this. HTML2Canvas can render your HTML content into a canvas element. Then you can use canvas.toDataURL("image/png"); (docs in MDN) method to export the canvas element to an jpeg or png image.
It's not widely supported but it's still possible.
Easy way
var MyDiv1 = document.getElementById('DIV1');
var MyDiv3 = document.getElementById('DIV2');
MyDiv3.innerHTML = MyDiv1.innerHTML;
html2canvas(MyDiv3, {
useCORS: true,
onrendered: function (canvas) {
var dataUrl = canvas.toDataURL("image/png");
document.getElementById("HiddenField1").value = dataUrl;
}
});
use a button and call ur hidden field value
ButtonClick1()
{
string imgval = HiddenField1.Value;
imgval = imgval.Replace("data:image/png;base64,", "");
byte[] imgData = Convert.FromBase64String(imgval);
using (System.Drawing.Image image = System.Drawing.Image.FromStream(new MemoryStream(imgData)))
{
String path = Server.MapPath("~/imgFolder");
image.Save(path + "\\output.jpg", ImageFormat.Jpeg); // Or Png
}
}
Assuming you want a text or HTML file, not an image file like a screen shot, JavaScript by itself can't initiate a "Save" dialog on a web browser, only a response from a web request to a server will do so.
To start with, you'll need a form with your button and a hidden field:
<div id="saveme">stuff to save</div>
<form action="saveme.aspx" method="POST">
<input type="submit" onclick="prepsave()">
<input type="hidden" id="savemepost">
</form>
And you need some Javascript to save the DIV contents to the hidden field before submittal:
<script>
function prepsave() {
document.getElementById("savemepost").value =
document.getElementById("saveme").innerHTML;
return true;
}
</script>
On the server, you'll need some code to accept the text and spit it back out in the form of a file attachment:
<script runat="server">
Response.Clear()
Response.AddHeader("content-disposition","attachment; filename=saved.html")
Response.Write(Request.Form("savemepost"))
</script>
Caveat #1: There are probably some minor bugs in there and plenty of room for improvement, this is just a proof of concept.
Caveat #2: The server-side code above is potentially insecure, as it allows any web page to control content going to the user's web browser from your domain. You'll need to add some measures to protect this from being abused.
I'm using plupload to client scaling of pictures before they are uploaded. I like the feature that it gracefully falls back to html4 if the user doesn't have flash, silverlight etc engines installed.
I want to be able to start the upload when the user clicks certain elements on the page and i want to handle the events (sometimes stopping a file dialog from opening). In fact i'd like to pop open the file dialog using javascript.
Ok, so HTML4 (or rather the browser, except chrome :P) won't let me do this, unless the user clicks a browse-button (or an overlay covering a browse-button), so when i get the fallback to HTML4 i'll accept that i can't do it, but most users will have flash or silverlight installed and they do not have this restriction. So my question is this:
How do i trigger the file open dialog in plupload (keeping in mind i only need the flash and silverlight engines to do this).
The former solutions not worked on iPhones with plupload 2.1.2.
The following code did the trick (jquery needed):
$("#id_of_the_second_button").click(function() {
$('div.moxie-shim input[type=file]').trigger('click');
});
Fallback runtimes will become irrelevant as times goes by. This means that sooner or later, we'll be all using HTML5 runtime. In case that you are using HTML5 runtime, but don't use pluploadQueue(), this will work as well:
// Set up and initialise uploader
var uploader = new plupload.Uploader({
'runtimes' : 'html5',
'browse_button' : 'id_of_the_first_button'
// Other options
});
uploader.init();
// Hook in the second button
plupload.addEvent(document.getElementById('id_of_the_second_button'), 'click', function(e) {
var input = document.getElementById(uploader.id + '_html5');
if (input && !input.disabled) {
input.click();
} // if
e.preventDefault();
});
If someone is searching for the HTML5 solution, here it is:
var up= $('#uploader').pluploadQueue();
if (up.features.triggerDialog) {
plupload.addEvent(document.getElementById('idOtherButton'), 'click', function(e) {
var input = document.getElementById(up.id + '_html5');
if (input && !input.disabled) { // for some reason FF (up to 8.0.1 so far) lets to click disabled input[type=file]
input.click();
}
e.preventDefault();
});
}
Ok. It doesn't seem possible to do this, so unless someone implements event handles for the silverlight and flash components i'm out of luck
I read your problem.
I found some articles that may help to figure this out. check them. It may help...!
01. https://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input-e
02. https://stackoverflow.com/questions/2048026/open-file-dialog-box-in-javascript
#Per Hornshøj-Schierbeck
After uploader has been init. It take few time to render input file to select. So you need to wait like below:
this.uploader.init();
var task = new Ext.util.DelayedTask(function () {
var inputArray = $('div.moxie-shim input[type=file]');
var input = inputArray.length > 1 ? inputArray[inputArray.length - 1] :
inputArray[0];
$(input).trigger('click');
});
task.delay(100);
The code in javascript is similar. Worked for me with plupload 2.3.6
Hop this help!