How to rotate a div in opera browser

How to rotate a div in opera browser - javascript

I want to rotate a div in 20 degrees in below opera 10.50 versions
below is my Javascript code for rotate the div:
<script type="text/javascript">
function rotator(value) {
document.getElementById('divId').style.webkitTransform = "rotate(" + value + "deg)";
document.getElementById('divId').style.msTransform = "rotate(" + value + "deg)";
document.getElementById('divId').style.MozTransform = "rotate(" + value + "deg)";
document.getElementById('divId').style.OTransform = "rotate(" + value + "deg)";
document.getElementById('divId').style.transform = "rotate(" + value + "deg)";
document.getElementById('span1').innerHTML = value + " deg";
}
</script>
HTML Code:
<body>
<div id="divId" style="height: 150px; width: 150px background-color:red; border: 1px solid #000;">
This is Rotator Div
</div>
<br />
Rotate:
<input type="range" min="-360" max="360" value="0" onchange="rotator(this.value)" /><br />
Rotate Div in <span id="span1">Zero deg</span>
</body>
How can I resolve my problem?

CSS rotate transforms are not supported in Opera versions below 10.5, that's why this JavaScript method of you doesn't work.
See: http://caniuse.com/#feat=transforms2d
What you can do is rotate your image in photoshop and then upload that image with a transparent background, but then the image would be static of course and I doubt that's what you desire.

Related

Circular Progress bar around image

I'm looking to get some help on a progress bar that goes around an image. I have provided my code below. If anyone can help it is highly appreciated!
Example Of what I need (The red Circles are the "images" and the green bars are the percentage bars that revolve around the image):
CODE:
<div class="imgmeter">
<div class="img-percent-bar">
<td class="usrimg">
<img src="assets/img/img.png">
<div class="bar"></div>
</div>
<div class="percentage">
<i><b>50.00%</b></i>
</div>
</div>

This can be done using an svg element with a circle that has a stroke-dasharray property in its styling. You can then use JavaScript to set the 'stroke-dasharray' property for the circle.
var circle = document.getElementById("circle_loader"),
percentage = document.getElementById("percentage"),
radius = document.getElementById("radius");
document.getElementById("percentage").addEventListener("change", function() { //when the percentage changes
var dasharray = (Number(percentage.value) * 2 * Number((Number(radius.value) * Math.PI))) + ", " + ((1 - Number(percentage.value)) * 2 * Number((Number(radius.value) * Math.PI)));
circle.style.strokeDasharray = dasharray; //sets the dasharray
});
radius.addEventListener("change", function() { //when the radius changes
var dasharray = (Number(percentage.value) * 2 * (Number(radius.value) * Math.PI)) + ", " + ((1 - Number(percentage.value)) * 2 * (Number(radius.value) * Math.PI));
circle.style.strokeDasharray = dasharray; //sets the dasharray
circle.setAttribute("r", radius.value); //sets the radius
circle.style.strokeDashoffset = Number(radius.value) * Math.PI * 0.5; //sets the starting point of the stroke to the top of the circle
});
#svg_circle_loader {
background: none;
border: none;
margin: none;
padding: none;
}
#circle_loader {
fill: none;
stroke: #F00;
stroke-width: 10px;
/* rotates the circle's stroke so that the start is at the top */
stroke-dashoffset: 78.5;
/* the 0 is the length of the arc filled by the stroke, and the 314 is the diameter (2 times the circle radius) times pi (3.14...) which is the "gap" between the coloured stroke arcs */
stroke-dasharray: 0, 314;
/* not necessary, but makes it look smoother */
transition: all 0.2s linear;
}
<form>
<!-- to demonstrate the system -->
<input id="radius" type="range" min="10" max="100" value="50" step="1" name="radius">
<br><span>radius</span>
<br>
<input id="percentage" type="range" min="0" max="1" value="0" step="0.01" name="percentage">
<br><span>percent complete</span>
</form>
<!-- the loader itself -->
<svg id="svg_circle_loader" width="200" height="200">
<!-- example values for dimensions -->
<circle cx="100" cy="100" r="50" id="circle_loader"></circle>
</svg>
This example is slightly complex, but I think that it is better to try and demonstrate with different radii rather than forcing you to use one that I have determined.

create a div with a text where i click an image

I have an image in HTML and i want the user to write an input in HTML and then if he click on the image it will create a colored div which is written inside the input, the position of this div is based of the coordinates where the user clicked (not centered, a little on top and to the left), for now I can create the rectangular div, but i don't know how to put a text in it.
let listaAre = [];
let quantiClic = 0;
document.getElementById('blah').addEventListener('click', event => {
document.getElementById('squareContaine').innerHTML =
document.getElementById('squareContaine').innerHTML +
'<div id="squar' + quantiClic + '" style="background-color: blue; height: 50px; width: 50px; position: absolute;"></div>';
document.getElementById('squar' + quantiClic).style.top = (event.pageY - Number(document.getElementById('dimensione').value) / 2) + 'px';
document.getElementById('squar' + quantiClic).style.left = (event.pageX - Number(document.getElementById('dimensione').value) / 2) + 'px';
document.getElementById('squar' + quantiClic).style.width = Number(document.getElementById('dimensione').value)/4 + 'px';
document.getElementById('squar' + quantiClic).style.height = Number(document.getElementById('dimensione').value)/10 + 'px';
document.getElementById('squar' + quantiClic).style.background =(document.getElementById('colorebordo').value);
listaAre.push({
x: (event.offsetX - Number(document.getElementById('dimensione').value) / 2),
y: (event.offsetY - Number(document.getElementById('dimensione').value) / 2),
width: Number(document.getElementById('dimensione').value),
height: Number(document.getElementById('dimensione').value),
background:(document.getElementById('colorebordo').value)
});
document.getElementById('squar' + quantiClic).addEventListener('click', function (e) {
this.style.display = 'none';
});
quantiClic = quantiClic + 1;
});
article, aside, figure, footer, header,
hgroup, menu, nav, section { display: block; }
.fasciaalta {
position: fixed;
background-color: white;
}
<div class="fasciaalta">
<input type="color" id="colorebordo">
<input type="text" id="nome">
<input type="number" id="dimensione" value="200">
<hr size="2px" color="blue" width="100">
</div>
<img id="blah" src="montagna.jpg" alt="your image" />
<div id="squareContaine"></div>
<div id="previewImage"></div>

You can get the coordinates of the mouse on the event click by accessing the clientX and clientY properties of the event object. Then you simply tell the new element to use them as top and left styles to position it.
Snippet
document.getElementById('blah').addEventListener('click', function(event) {
var div = document.createElement("DIV"); // Create a <div> element
var t = document.createTextNode("HELLO");// Create a text node
div.appendChild(t); // Append the text to <div>
document.body.appendChild(div); //Add <div> to document
div.style.position = 'absolute'; //Make its position absolute
//Set the coordinates
div.style.left = event.clientX + "px";
div.style.top = event.clientY + "px";
})
<div>
<img id="blah" src="http://img1.wikia.nocookie.net/__cb6/nyancat/images/5/50/Wiki-background" alt="your image" />
</div>
Extra
If instead of creating a new div, you want to use one simply access that element with getElementById and change its properties instead. I've made the example as simple as possible so that it can apply to not only your case but anyone else's trying to solve their issue.

If you need the text value then all you need is to change the first 2 statements of your click function. - Check this Codepen
1) Onclick, get the value of the textbox like so
var val = document.getElementById('nome').value;
2) Next insert this val into your innerHTML statement
document.getElementById('squareContaine').innerHTML =
document.getElementById('squareContaine').innerHTML +
'<div id="squar' + quantiClic + '" style="background-color: blue; height: 50px; width: 50px; position: absolute;">'+ val + '</div>';
Scroll the very end of the above statement to see the val inserted.
Also do not forget to change the color of the text if the background of the box is black.
document.getElementById('blah').addEventListener('click', event => {
var val = document.getElementById('nome').value; //added
//below statement changed
document.getElementById('squareContaine').innerHTML =
document.getElementById('squareContaine').innerHTML +
'<div id="squar' + quantiClic + '" style="background-color: blue; height: 50px; width: 50px; position: absolute;">'+ val + '</div>';
.. rest of the code remain the same ..
});

HTML5 input type="range" image opacity

I currently have two images and an input:
<input type="range" min="0" max="50" value="25">
.image_1 {
filter: blur(5px);
opacity: .8;
}
.image_2 {
filter: blur(5px);
opacity: .8;
}
The goal is when slider moves right image_2 {filter: blur(0px); opacity: 1; comes into focus and opacity full; meanwhile image_1 {opacity: 0} goes away. Vice versa should happen when the slider is moved to the left.
Any ideas or suggestions are greatly appreciated.
Thank you so far for all your suggestions and answers. I have yet to fully answer my question with provided solutions but I have gotten closer. What I have done is I have added oninput=showVal(this.value) to my input element. I have then created a function:
function showVal(newVal) {
var img_1 = document.getElementById("img_1");
var img_2 = document.getElementById("img_2");
// code to change blur upon value of slider changing (img_1.style.etc)
// unsure how to do
console.log(newVal);
}
Due to all the great answers, I think I have found a solution. However, I am still having an issue with adjusting the opacity. Here is the current open question about it: Google Web Designer dynamically adjust opacity in source code

Done. There is no real way to do this with only CSS as you probably already noticed. You could also send the max blur from the dom as another function parameter to make the code more modular. Also don't forget to add all the filter implementations (I only added webkit's because of time) and watch out for IE10 since onchange might have some issues. See this answer for a fallback
EDIT: added cross browser filter setting compatibility
var config = {
img1: document.querySelector('.image_1'),
img2: document.querySelector('.image_2'),
maxBlurPx: 10
}
function getInput(value, max) {
var sliderPercentage = (value / max).toFixed(2);
config.img1.style.opacity = 1 - sliderPercentage;
setBlur(config.img1, (10*sliderPercentage).toFixed(2));
config.img2.style.opacity = sliderPercentage;
setBlur(config.img2, 10-(10*sliderPercentage).toFixed(2));
config.img2.style.webkitFilter = "blur(" + (10 - (10 * sliderPercentage).toFixed(1)) + "px)";
}
function setBlur(el, value) {
if (el.style.hasOwnProperty('filter'))
el.style.filter = "blur("+value+"px)";
if (el.style.hasOwnProperty('webkitFilter'))
el.style.webkitFilter = "blur("+value+"px)";
if (el.style.hasOwnProperty('mozFilter'))
el.style.mozFilter = "blur("+value+"px)";
if (el.style.hasOwnProperty('oFilter'))
el.style.oFilter = "blur("+value+"px)";
if (el.style.hasOwnProperty('msFilter'))
el.style.msFilter = "blur("+value+"px)";
}
.image_1,
.image_2 {
width: 150px;
}
.image_1 {
filter: blur(5px);
opacity: .8;
}
.image_2 {
filter: blur(5px);
opacity: .8;
}
<input type="range" min="0" max="50" value="25" oninput="getInput(this.value, this.max)">
<br />
<img src="http://www.istockphoto.com/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/EssentialBackgrounds79139997.jpg" alt="" class="image_1" />
<img src="http://www.istockphoto.com/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/EssentialBackgrounds79139997.jpg" alt="" class="image_2" />

Update
If you have two images, and want to change the opacity, you can still listen for the change event.
The first image's opacity value will be the value of the range input divided by its maximum value. The second image's opacity value will be the difference between the maximum and current value divided by the maximum value.
In other words, one image will become more transparent, and the other will become more opaque.
var range = document.getElementById("range");
var imgOne = document.getElementsByClassName("img1")[0];
var imgTwo = document.getElementsByClassName("img2")[0];
range.addEventListener("change", function() {
imgOne.style.opacity = this.value / this.max;
imgTwo.style.opacity = (this.max - this.value) / this.max;
});
.img1, .img2 {
opacity: 0.5;
}
<input id="range" type="range" min="0" max="50" value="25"><br><br>
<img class="img1" height="200" width="200" src="http://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-11.jpg" />
<img class="img2" height="200" width="200" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLg8Fo8YK5SNLqmZUUCjaUh_2Y57jxBgkmjOwxj7dNSui2jZcb" />

Try this snippet. I used this code on my website http://stark-cove-24150.herokuapp.com
$(document).ready(function(){
$("#designer").mouseenter(function(){
$("#xyz").attr("src", "design.jpg");
$("#face").css("background-image", "url(des2.jpg)");
$("#coder").css("opacity", "0.5");
});
$("#designer").mouseleave(function(){
$("#xyz").attr("src", "def.jpg");
$("#coder").css("opacity", "");
});
$("#coder").mouseenter(function(){
$("#xyz").attr("src", "cp2.jpg");
$("#designer").css("opacity", "0.5");
$("#face").css("background-image", "url(coding.jpg)");
});
$("#coder").mouseleave(function(){
$("#xyz").attr("src", "def.jpg");
$("#face").css("background-image", "url()");
$("#designer").css("opacity", "");
});
});

You can create objects where properties, values correspond to current value of input element
var imgs = $(".image_1, .image_2"),
i = {
"0.4": .6,
"0.3": .7,
"0.2": .8,
"0.1": .9,
"0": 1,
"0.6": .4,
"0.7": .3,
"0.8": .2,
"0.9": .1,
"1": 0
},
blur = {
"0.5": "5px",
"0.6": "4px",
"0.7": "3px",
"0.8": "2px",
"0.9": "1px",
"1": "0px",
"0.4": "4px",
"0.3": "3px",
"0.2": "2px",
"0.1": "1px",
"0": "0px"
};
$("input[type=range]").change(function() {
var n = this.value;
if (n == .5) {
imgs.css({
"-webkit-filter": "blur(" + blur[n] + ")",
"-moz-filter": "blur(" + blur[n] + ")",
"filter": "blur(" + blur[n] + ")"
})
};
if (n > .5) {
imgs.eq(1).css({
"opacity": n,
"-webkit-filter": "blur(" + blur[n] + ")",
"-moz-filter": "blur(" + blur[n] + ")",
"filter": "blur(" + blur[n] + ")"
});
imgs.eq(0).css({
"opacity": i[n]
});
} else {
if (n < .5) {
imgs.eq(1).css({
"opacity": n
});
imgs.eq(0).css({
"opacity": i[n],
"-webkit-filter": "blur(" + blur[n] + ")",
"-moz-filter": "blur(" + blur[n] + ")",
"filter": "blur(" + blur[n] + ")"
})
}
}
}).focus()
img {
transition: all .01s linear;
}
.image_1 {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
filter: blur(5px);
opacity: .5;
}
.image_2 {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
filter: blur(5px);
opacity: .5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" step=".1" min="0" max="1" value=".5">
<img src="http://lorempixel.com/100/100/technics" class="image_1" />
<img src="http://lorempixel.com/100/100/nature" class="image_2" />

var val=25;
$("input[type='range']").change(function(){
if($(this).val()>val){
$(".image_2").css({
"filter":"blur(0px)",
"opacity":"1"
});
$(".image_1").css({
"opacity":"0"
});
} else {
$(".image_1").css({
"filter":"blur(0px)",
"opacity":"1"
});
$(".image_2").css({
"opacity":"0"
});
}
val=$(this).val();
});
I havent checked this code yet so im not sure if this will work..

here is another example
http://codepen.io/mozzi/pen/qNqJXe
<input id="slider" type="range" min="0" max="50" value="25">
<img id="img1" src="http://www.pd4pic.com/images/number-1-red-circle.png" alt="Smiley face" height="200" width="200">
<img id="img2" src="http://images.clipartpanda.com/numbers-clipart-1-10-4cb4KkKgi.png" alt="Smiley face" height="200" width="200">
$("#img1").fadeTo(0,0.5);
$("#img2").fadeTo(0,0.5 ) ;
$("#slider").change(function() {
var rangeVal = $("#slider").val();
var val1 = (rangeVal/50);
var val2 = ((50-rangeVal)/50);
$("#img1").fadeTo(0,val1);
$("#img2").fadeTo(0,val2 ) ;
});

Image zoom in and out with respect to the centre of div not working

I have an image zoom property in one of my website.I want to zoom an image with respect to the centre of the div.
<div class="img"><img src="http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/men-wedding-rings.jpg" /></div>
<input class="beta" type="button" onclick="zoom(1.1)" value="+">
<input class="beta" type="button" onclick="zoom(0.9)" value="-">
And the zoom funcction is as follows.
function zoom(zm)
{
img=document.getElementById("pic")
wid=img.width
ht=img.height
img.style.width=(wid*zm)+"px"
img.style.height=(ht*zm)+"px"
}
I want to zoom the image with respect to the centre.
Thanks in advance.

How about this http://jsfiddle.net/sajith/J6Y3X/
JS
function zoom(zm) {
img = document.getElementById("pic")
wid = img.width
ht = img.height
img.style.width = (wid * zm) + "px"
img.style.height = (ht * zm) + "px"
img.style.marginLeft = "-" + (wid * zm)/2 + "px"
img.style.marginTop = "-" + (ht * zm)/2 + "px"
}
CSS
.img {
width:450px;
height:450px;
}
#pic {
position: absolute;
left: 225px;
top: 225px;
margin: -225px 0 0 -225px;
}
HTML
<div class="img"><img id="pic" src="http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/men-wedding-rings.jpg" /></div>
<input class="beta" type="button" onclick="zoom(1.1)" value="+">
<input class="beta" type="button" onclick="zoom(0.9)" value="-">

Javascript event listener works in browser, not in phonegap?

I am writing a color picker with an RGB slider in jquery mobile for a phonegap application. it works in the browser, but does NOT work when pushed to the phone (using phonegap/eclipse). I don't know how to get javascript console feedback using phonegap, so I am kind of at a loss.
I have tried using ".on .change .live .bind" for the change event listeners and all of them I can get working in the browser, but NONE in the phonegap application.
Heres what it looks like:
Here is the javascript:
$(function () {
$("#red, #green, #blue").change(function () {
var red = $("#red").val();
var green = $("#green").val();
var blue = $("#blue").val();
var redp = Math.round((red * 100) / 255);
var greenp = Math.round((green * 100) / 255);
var bluep = Math.round((blue * 100) / 255);
$('#redrgb').html(red);
$('#greenrgb').html(green);
$('#bluergb').html(blue);
$('#redpercent').html(redp + "%");
$('#greenpercent').html(greenp + "%");
$('#bluepercent').html(bluep + "%");
$("#swatch").css("background-color", "rgb(" + red + "," + green + "," + blue + ")");
console.log(red); }); });
Here is the HTML
<div id="colorpicker">
<div id="swatch">
<div class="rgb swatchtext" id="redrgb">255</div><div class="percent swatchtext" id="redpercent">100%</div>
<div class="rgb swatchtext" id="greenrgb">140</div><div class="percent swatchtext" id="greenpercent">55%</div>
<div class="rgb swatchtext" id="bluergb">60</div><div class="percent swatchtext" id="bluepercent">24%</div>
</div>
<div class="rgbslider" id="sliderred"><input type="range" class="rgbsliders" id="red" value="255" min="0" max="255" /></div>
<div class="rgbslider" id="slidergreen"><input type="range" class="rgbsliders" id="green" value="140" min="0" max="255" /></div>
<div class="rgbslider" id="sliderblue"><input type="range" class="rgbsliders" id="blue" value="60" min="0" max="255" /></div>
</div>
I am using JQuery-Mobile, phonegap, and right now I'm testing on android, but once I get it working it will be on iOS as well.

Have you tried put this in a $(document).bind('pageinit') block instead ?

This works!!!!
$(function () {
$("#red, #green, #blue").slider({
create: function (event, ui) {
$(this).bind('change', function () {
var red = $("#red").val();
var green = $("#green").val();
var blue = $("#blue").val();
var redp = Math.round((red * 100) / 255);
var greenp = Math.round((green * 100) / 255);
var bluep = Math.round((blue * 100) / 255);
$('#redrgb').html(red);
$('#greenrgb').html(green);
$('#bluergb').html(blue);
$('#redpercent').html(redp + "%");
$('#greenpercent').html(greenp + "%");
$('#bluepercent').html(bluep + "%");
$("#swatch").css("background-color", "rgb(" + red + "," + green + "," + blue + ")");
console.log(red);
});}});});
and I had to change type="range" to type="text" in the html inputs.

Develop Reference

JavaScript is the programming language of the Web.

How to rotate a div in opera browser - javascript

Related

Circular Progress bar around image

create a div with a text where i click an image

HTML5 input type="range" image opacity

Image zoom in and out with respect to the centre of div not working

Javascript event listener works in browser, not in phonegap?

Categories

Resources