Actually I don't know how I should call It, but I have Seen that -(Actually I don't have A IPhone But I have Seen Right!) In some Apple Phones(Some Or All?) have a System Like When We rotate the phone The Display Icons And Other staff are like to be floating Moving Slightly Here And There.
It's Cool For Me if I can use it in my website. I need to know How Can I make Such A HTML img Using CSS,HTML and with or without JAVASCRIPT or JQUERY. But Instead of Rotating A Phone(Of course no Phone) I need It to be done with the Mouse Pointer. Sample Code or Link for a Code Will Be Useful.
If there Is Already A answered Question Like this, Please Mark this as duplicate (with pleasure) :)
It sounds like you gotta go with Progressive Web App which will allow you to use native features - in this case getting movement of user's phone. This way you'll be able to apply 3D Transforms to DOM elements based on device movement/rotation.
If you want to stick with a cursor as an animation input, there are plenty of libraries and ready examples showing exactly how to do it.
Also, it's already been very well known topic on StackOverflow so you just gotta search a little to find your perfect solution.
StackOverflow: https://stackoverflow.com/a/35016817/8923822
CodePen by Thomas Podgrodzki: https://codepen.io/Podgro/pen/WQpEwY/
!(function ($doc, $win) {
var screenWidth = $win.screen.width / 2,
screenHeight = $win.screen.height / 2,
$elems = $doc.getElementsByClassName("elem"),
validPropertyPrefix = '',
otherProperty = 'perspective(1000px)',
elemStyle = $elems[0].style;
if(typeof elemStyle.webkitTransform == 'string') {
validPropertyPrefix = 'webkitTransform';
} else if (typeof elemStyle.MozTransform == 'string') {
validPropertyPrefix = 'MozTransform';
}
$doc.addEventListener('mousemove', function (e) {
var centroX = e.clientX - screenWidth,
centroY = screenHeight - (e.clientY + 13),
degX = centroX * 0.04,
degY = centroY * 0.02,
$elem
for (var i = 0; i < $elems.length; i++) {
$elem = $elems[i];
$elem.style[validPropertyPrefix] = otherProperty + 'rotateY('+ degX +'deg) rotateX('+ degY +'deg)';
};
});
})(document, window);
You can always make use of 3rd party libraries.
Animate.css
For your particular animation I believe Shake would be the appropriate one.
Go to their github page to get more information. I've used this almost in each of my websites to add animations. Hope it helps!
Related
I want to develop chrome extension to put a check on the script say this website runs http://whatsmyscreenresolution.com/
e.g.
if (his_script==my_script)
then
block it or return "123".
I want to do something like this.Is it possible or can I even block websites to detect my screen resolution, font, etc other than disabling javascript at my end?
can I even block websites to detect my screen resolution
You could define a new window.screen object
(function (screen) {
function clone(e) {
var o = {}, k;
for (k in e) o[k] = e[k];
return o;
}
Object.defineProperty(window, 'screen', {get: function () {
var o = clone(screen);
o.availHeight = o.height = Math.random() * (o.height - 600) + 600;
o.availWidth = o.width = Math.random() * (o.width - 600) + 600;
return o;
}});
}(window.screen));
After this, trying to access screen or window.screen will give you randomised (but not entirely unreasonable for styling purposes) values
DEMO
Take a look at the chrome.webRequest api: https://developer.chrome.com/extensions/webRequest
Theoretically, you could do this with the onBeforeRequest listener.
It doesn't think it's possible. Tried setting window.screen and creating a var screen but no matter what is written to screen.width and screen.height it always returns the correct resolution. It doesn't seem spoofable at least from a javascript console. You might try a hidden frame with the desired screen resolution for privacy and when the page is loaded adjust the resolution to actual browser resolution and display the frame.
My problem is the following.
I am attempting to connect the compressor.reduction.value of the compressor node to a div's height so I can monitor the compression reduction effect dynamically. This works fine. The problem is when the audio signal stops the div freezes at its current position. I would like the div to not freeze and have it's height go to zero. The way I fixed this is by using a setInterval that checks for the height of the div and if it remains at exactly the same height for more than a few seconds then the display is set to none effectively hiding the div. Now my question is two fold. First, if there is a better way to do this please share, but irrespective there is one little thing that is irking me that I can't figure out. When I write the code as such it works. However, it looks a bit ugly since the compressor node is outside the play function..........
var compressor = audioContext.createDynamicsCompressor();
soundObj.play = function() {
$(".compression-meter").css("display", "block");
var playSound = audioContext.createBufferSource();
compressor.threshold.value = -40;
compressor.ratio.value = 20;
playSound.buffer = soundObj.soundToPlay;
playSound.connect(compressor);
compressor.connect(audioContext.destination)
playSound.start(audioContext.currentTime);
compReductionMeter()
}
/*______________ Compressor metering __________*/
var cachedMeterValue = null
function compReductionMeter() {
cachedMeterValue = $(".compression-meter").height()
var reduction = compressor.reduction.value;
var bar = $(".compression-meter");
bar.height((-1 * reduction) + '%');
requestAnimationFrame(compReductionMeter);
};
window.setInterval(function() {
if ($(".compression-meter").height() == cachedMeterValue) {
console.log("checking compression meter height when matched with cachedMeterValue.It is " + $(".compression-meter").height())
$(".compression-meter").css("display", "none")
}
}, 2000);
When I write the code like this the div doesn't even appear and I am not sure why. From my view it "should" work and I really want to know why it doesn't and what I'm missing.
soundObj.play = function() {
$(".compression-meter").css("display", "block");
var playSound = audioContext.createBufferSource();
var compressor = audioContext.createDynamicsCompressor(); // modified placement
compressor.threshold.value = -40;
compressor.ratio.value = 20;
playSound.buffer = soundObj.soundToPlay;
playSound.connect(compressor);
compressor.connect(audioContext.destination)
playSound.start(audioContext.currentTime);
compReductionMeter(compressor.reduction.value) // modified - added argument
}
/*______________ Compressor metering __________*/
var cachedMeterValue = null
function compReductionMeter(compVal) { // modified - added parameter
cachedMeterValue = $(".compression-meter").height()
var reduction = compVal; // modified - is now param value
var bar = $(".compression-meter");
bar.height((-1 * reduction) + '%');
requestAnimationFrame(compReductionMeter);
};
window.setInterval(function() {
if ($(".compression-meter").height() == cachedMeterValue) {
console.log("checking compression meter height when matched with cachedMeterValue.It is " + $(".compression-meter").height())
$(".compression-meter").css("display", "none")
}
}, 2000);
Thank you.
This annoyance in DynamicsComporessorNode will be fixed at Chrome version M40.
https://codereview.chromium.org/645853010/
Unfortunately, the current design of DynamicCompressorNode keeps the gain reduction value from being updated when the stream from source node stops. That is, the GR value is only being updated when the active audio stream is running. AnalyserNode has the very same issue.
If your audio graph is simply using a single source node, you can use .onended event from the source node to zero the height of DIV. However, if you rather have a complex audio graph, then it is going to be a bit more involved.
http://www.w3.org/TR/webaudio/#dfn-onended_AudioBufferSourceNode
Here is a possible hack to get zeroes to the compressor and analyzer. Create a new buffer of all zeroes. Assign that to a new AudioBufferSourceNode. Connect this node to the compressor and/or analyser and schedule the source to start when your source ends (or slightly before). This should keep the compressor/analyser node processing so the GR value and analyser node to drop to zero.
I didn't actually try this.
Requirement - Detect tablets using JavaScript
I'm not allowed to use any plugin or lib (jQuery is an exception) and want to keep code to minimum.
I have read many posts on this topic and came up with this solution (Checking screen resolution and touch):
var _w = Math.max($(window).width(), $(window).height());
var _h = Math.min($(window).width(), $(window).height());
var tabletView = (_w >= 1000 && _h >= 600);
var is_touch_device = 'ontouchstart' in document.documentElement;
if (tabletView && is_touch_device) {
alert('tablet');
}
else {
alert('Not a Tablet');
}
Question: Is this code reliable enough? If not what's the better approach?
This will also see phones with larger screen resolutions as tablets.
Other than that, this code is reliable, and there isn't really anything you could do to detect the difference between a phone and tablet, without libraries, or manually parsing user-agents.
I have a case where I'd like to animate the zoom style of a div (and it's entire contents). Legibility is not an issue, as this will be to 'pop' the element into view. Now I can get just about every other style aspect animating with Fx, but I can't seem to get this working for the zoom.
This is in chrome (though obviously I want to get it browser agnostic as well).
Using the Elements tab in the Chrome dev tools I can manually set the zoom style on the html element and it behaves accordingly, so I knew it must be possible to modify in code. Using the answer on this question: zoom css/javascript
I can get the element to zoom in and out with code:
dialog.setStyle('WebkitTransform', 'scale(0.1)')
Now I could write a 'native' function to do this, but then I'd lose out on all the great animation options in Fx. Can anyone suggest an elegent way to achieve this with Fx?
yes, you need to hack some of the CSS parsers in the mootools core to enable FX to work with them.
check this fun example I did a while back for another SO problem: http://jsfiddle.net/dimitar/ZwMUH/ - click on any 2 icons to swap them and it will transition them via scale.
or this light box base class I wrote that also uses it: http://jsfiddle.net/dimitar/6creP/
at its basic, start by modding the parsers:
Element.Styles.MozTransform = "rotate(#deg) scale(#)";
Element.Styles.MsTransform = "rotate(#deg) scale(#)";
Element.Styles.OTransform = "rotate(#deg) scale(#)";
Element.Styles.WebkitTransform = "rotate(#deg) scale(#)";
Object.append(Fx.CSS.Parsers, {
TransformScale: {
parse: function(value) {
return ((value = value.match(/^scale\((([0-9]*\.)?[0-9]+)\)$/i))) ? parseFloat(value[1]) : false;
},
compute: function(from, to, delta) {
return Fx.compute(from, to, delta);
},
serve: function(value) {
return 'scale(' + value + ')';
}
}
});
also relevant, define public and scripting vers of all styles cross browser:
transforms: {
computed: ['transformProperty', 'WebkitTransform', 'MozTransform', 'OTransform', 'msTransform'],
raw: ['transform', '-webkit-transform', '-moz-transform', '-o-transform', 'msTransform']
};
detection method which will loop through the transforms defined above and return the first one that the element supports as the definitive property to work with in the future, or opacity as fallback if unavailable:
var testEl = new Element("div"),
self = this;
this.scaleTransform = this.options.transforms.computed.some(function(el, index) {
var test = el in testEl.style;
if (test) {
self.prop = self.options.transforms.raw[index];
}
return test;
});
if (!this.prop) {
this.prop = "opacity";
}
then this.prop will refer to the correct browser property, vendor prefixed or opacity as fallback for tweening/morphing whereas this.scaleTransform will be a boolean that points to the ability to scale - you can then check against that to see if its supported when you are creating the morph object.
The object itself would be like this:
var morphObj = {};
morphObj[this.prop] = ["scale(0)", "scale(1)"]; // call it dynamically
el.morph(morphObj);
other solutions are available such as this plugin http://mootools.net/forge/p/fx_tween_css3, there's also one by Theiry Bela I know of: https://github.com/tbela99/Fx.css
its also going to be natively available in mootools 2.0
have fun.
Greetings
One of my clients javascript files is failing. I have found the reason, but the discovery has made me REALLY confused as I have never seen anything like it.
The issue is that when the browser reads through the script sources and enters a specific custom .js file which contains 543 lines of code, it only reads to line 502 which is this if (isValidWidthChange) { but what confuses me is that when I use developer tool in IE and firebug in FireFox and uses their script debug tool, when it hits line 502, the javascript is cut off like so - if (isValidWidthChan
if (isValidWidthChange) {
if (isValidWidthChan
Can anyone give me a logic explanation on WHY this happens?
I can say so much that I was adding a few things to the file, but I took a back-up of the original before starting, and this is actually the error which keeps occuring even after I set the website to use the original file again.
I have tried IISRESET a lot of times. I have tried copying the file from a healthy environment. I have cleared all the caches in my browsers and on the server. Yet it still appears.
I didn't develop it myself, it's a third party product. But this has never happened before.
Codesnippet of where the error occurs
(function($) {
// jQuery autoGrowInput plugin by James Padolsey
// See related thread: http://stackoverflow.com/questions/931207/is-there-a-jquery-autogrow-plugin-for-text-fields
$.fn.autoGrowInput = function(o) {
o = $.extend({
maxWidth: 1000,
minWidth: 0,
comfortZone: 70
}, o);
this.filter('input:text').each(function() {
var minWidth = o.minWidth || $(this).width(),
val = '',
input = $(this),
testSubject = $('<tester/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap'
}),
check = function() {
if (val === (val = input.val())) { return; }
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&').replace(/\s/g, ' ').replace(/</g, '<').replace(/>/g, '>');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
currentWidth = input.width(),
isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
|| (newWidth > minWidth && newWidth < o.maxWidth);
// Animate width
if (isValidWidthChange) { // This is where it stops
input.width(newWidth);
}
};
testSubject.insertAfter(input);
$(this).bind('keyup keydown blur update', check);
});
return this;
};
})(jQuery);
It's probably encoding issue, please make sure you don't have special characters in all the script;
Look on the characters near Owns and Rate, that characters will be ignored by the browser and the script will be cut off by the amount of them
/*
Mapping GUI to event types
Click - clickEvents
Purchase -purchaseEvents
Consume - consumeEvents
Recommended - clickedRecommended
Rendered - renderedEvents
Rate ײateEvents
Blacklist - blacklistEvents
Owns ׯwnsEvents
Total
*/
Is it possible for you to split the script into two parts? 543 lines is quite a lot of code, and I would be surprised if there are not at least some functions or modules which could be moved to a separate script.
As for debugging the issue, your symptoms would suggest that your server may have some kind of maximum content length. I know there are maximums (maxima?) for requests (there is something called maxAllowedContentLength, which is configurable), but I would be surprised if there was an upper limit on the size of files served. (Frankly that would be damn stupid, and would cause lots of problems but hey, IIS is not always smart - or maybe your administrator has been a bit too parsimonious?). It would be interesting to check if the maximum is a matter of lines or (more likely) bytes. So, to check this, have you tried:
Adding comments - does this shift the
break-off point?
Adding additional
(unused) code - does this shift the
break-off point?
Serving another long
script, for example you could get a
hold of the developer version of
jQuery (rather than the minified
one). Does this get broken-off too?
The results of these experiments and similar would help narrow down the issue a little.