Develop Reference

HTML localStorage CSS Issues?

Okay so I've successfully managed after a couple of hours to call over an image using HTML localStorage system but I now have one problem with the called over image.... I can't dictate where it goes..... It just sits at the bottom of the page as the code is purely javascript..... I've tried putting it in a div and changing its position but it won't budge any suggestions.... heres the code thats calling the image across:
window.onload = function() {
var picture = localStorage.getItem('img');
var image = document.createElement('img');
image.src = picture;
document.body.appendChild(image);
};
How can I edit the position on the page as well as the hight etc......................? Any help appreciated!

You're appending the image to the document body, so likewise, it's going to be added to the bottom of the page.
You can set the properties of image.style to change the image's CSS properties such as height (image.style.height) and width (image.style.width).
To position it elsewhere on the page, you can change it's display properties
image.style.position = "absolute"; //(for example)
image.style.top = "50px"; //drops the image down 50px from the top of the page
Or, you can add it to a different part of the DOM altogether:
document.getElementById('ID_OF_YOUR_DIV').appendChild(image);
Hope this helps.

How to apply blur effect to background image in Blogger?

I've been trying to add blur effect to my posts but only thing that gets blurred is the main post content (pic: http://i.gyazo.com/9d94d2be5dc3f3ada982564aa212336e.jpg). Any idea how to target the background-image, instead of the content?
The code I am using at the moment is:
<script type="text/javascript">
var image = document.querySelector('.post-body img').src;
var target = document.body;
target.style.backgroundImage = "url(" + image + ")";
target.style.backgroundSize = "cover";
document.body.style["background-attachment"] = "fixed";
</script>
I have a odd feeling that you need to make the actual background image into standalone element but I have no idea how.
Also, is there a possibility I could add Blur.js into blogger or is it only for Wordpress? If yes, I'd like to know how?
Thanks in advance.

I worked on this and saw this question. So here's a suggestion.
<script type="text/javascript">
function showBackground() {
document.getElementsByClassName('body-fauxcolumn-outer')[0].style.backgroundImage = "url('http://backgroundImage.jpg')";
document.getElementsByClassName('body-fauxcolumn-outer')[0].style.backgroundPosition = "center center";
document.getElementsByClassName('body-fauxcolumn-outer')[0].style.backgroundRepeat = "no-repeat";
document.getElementsByClassName('body-fauxcolumn-outer')[0].style.backgroundAttachment = "fixed";
document.getElementsByClassName('body-fauxcolumn-outer')[0].style.webkitFilter = "blur(5px)";
}
window.onload = showBackground();
</script>
Explanation
As I used the simple template at this time, I noticed that the standard template has a class named body-fauxcolumn-outer which is used to set the background color.
So I adapt my answer here to answer this question.
I just added the following to fix the blur as you can see in the image bellow.
document.getElementsByClassName('body-fauxcolumn-outer')[0].style.webkitFilter = "blur(15px)";

You could try use this CSS 3 tag:
filter: blur(5px);
You can see the mdn documentation here: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

You can do this on Blogger without using any JS or CSS.
Upload your image into a Blogger post as if you want to put it in an article.
Copy the URL of the image and paste it into the body css like so:
body {
background-image: url('YOUR IMAGE URL HERE');
}
Replace the /s-1600/ part of the url with /s1600-fcrop64=1,000f0000ffceffff:Soften=1,20,0/
Note: You can adjust the radius of the blur by fiddling with the second number after Soften=(in the case above, 20).
The advantage of doing this is it's lighter on code and completely compatible with every device and browser that is capable of loading an image!

How to make image change on a hover

I've been trying to think of ways to do this but I haven't figured one out yet, so I thought I'd ask here!
So for example I have this:
<img src="arrow.png"/>Index
I want that on hovering Index, the image should change to arrow_hover.png, using CSS.

Use the pseudo class :hover
First, give the image a class so that it doesn't target every img. Say, hover-image
Then...
.hover-image:hover {
background: url('arrow_hover.png');
}
HOWEVER! THIS WILL NOT WORK! Using only CSS, you cannot change an images attribute src. You will need to use javascript.
You can change this to a div instead of an img tag, and this code will work. But not with your current markup.
To do this in javascript, give the element an id to make things easier. In this case.. derp.
You would do:
var x = document.getElementById("derp");
x.mouseenter = function() {
this.src = "arrow_hover.png";
}
x.mouseout = function() {
this.src = "arrow.png";
}

You could do this with CSS only. Try this CSS:
#theImage {
height:250px; //Or whatever size it needs to be
width:320px; //Or, again, whatever it needs to be
background-image:url(stuff.jpg);
}
#theImage:hover {
background-image:url(otherstuff.jpg);
}
#theImage would be a div.

preload image then change background javascript

Im changing the background image with the following code inside a script tag. This is causing a whiteflash when the background changes, all my pages are ajax. I cant just pick a background color like the background as im also using this on profiles page and each profile has a different background.
is it possible to preload the image then change the background to stop the whiteflash? thanks
$('body').css('background-image', 'url(../images/waves.jpg)');
$('body').css('background-attachment', 'fixed');
$('body').css('background-size', 'cover');

You could load a hidden image and change it when the image finishes loading, like this:
function preloadImage(source, destElem) {
var image = new Image();
image.src = source;
image.onload = function () {
var cssBackground = 'url(' + image.src + ')';
$(destElem).css('background-image', cssBackground);
};
}
Usage:
preloadImage('images/waves.jpg', 'body');
EDIT: Wrapped the code inside a function.
EDIT 2: Here is an example without the background flash while changing. http://jsbin.com/admmx/4/edit?html,css,js,output.

You can preluad image using Image() object.
var newImg = new Image();
newImg.src = "img2.jpg";
$('body').css('background-image', 'url('+ newImg.src +')');

I don't know if it would suit you, but I would use wrapper for the background and wrapper for the content. That way I can animate the change for my background without too much worry about the rest of the page.
If you know the pictures upfront you can use CSS classes to change them smoothly.
<body>
<div id="bg-wrapper" style="position: absolute; left: 0; top: 0"></div>
<div id="content-wrapper"></div>
</body>
of course I would write some code to look after re-sizing the browser window.
Here is an example fiddle

javascript image overlay over a specified div

i am new at javascript. very new actually, this ought to be my first script.
can anyone explain to me how to make a transparent overlay over any specified fixed width region, say 700x300px.

You can define the overlay such as
<div id="myoverlay" class="myoverlay">...contents...</div>
and define the dimensions and position and z-index etc... in CSS
.myoverlay {
position: absolute;
display: none;
...
}
I don't quite see the need for JavaScript just yet, but I guess you will want to use JS to toggle the overlay's display attribute on/off.
<script type="text/javascript">
function showOverlay(){
document.getElementById("myoverlay").style.display = "block";
}
</script>
Is this roughly what you're after? Sorry for unintentional syntax mistakes, for this is untested code purely off the top of my head. Just to give you an idea.

You can create a div with transparency and absolutely position it over the specified region.
var shimDiv = document.createElement('div');
shimDiv.id = 'shim';
shimDiv.style.position = 'absolute';
shimDiv.style.top = 0;
shimDiv.style.left = 0;
shimDiv.style.width = "700px";
shimDiv.style.height = "300px";
shimDiv.style.backgroundColor = '#000';
shimDiv.style.zIndex = 3;
For non IE browsers set opacity:
shimDiv.style.opacity = '0.75';
As IE doesn't natively support transparency you should use the filter like this:
shimDiv.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=75)';
And add this new div to the end of the document body:
document.body.appendChild(shimDiv);
To support older IE versions you will have to put IFrame element under your transparent DIV.
To create IFrame dynamically from JavaScript try the following code:
var iframe = document.createElement('iframe');
iframe.setAttribute("src", "javascript:false");
Don't forget to set IFrame src attribute with useless 'javascript:false' statement to prevent IFrame from trying to load the page (which you won't notice it doing, but it will be the cause for tripping the "Unsecured Items" message if you use it on a HTTPS page).
Position this IFrame under the div by giving it a lower z-index property value.
iframe.style.zIndex = 2;
All the styling can be done with CSS. I just wanted to show how it done with JavaScript.