my javascript megamenu dropdown is not working and the sidebanner too. I think its a javascript problem but I am trying hard to determine what actually goes wrong.
I used google chrome "Inspect Element" > Console and there are 3 issues:
TypeError: $.browser is undefined fixed: !$.browser.msie || $.browser.version > 6,
Use of getPreventDefault() is deprecated. Use defaultPrevented instead.
TypeError: $j.browser is undefined
var safari = $j.browser.safari; /* We need to check for safari to fix the input:...
I would appreciate if anybody can point me to the correct directions on what is wrong with the javascript? Thank you in advance.
You should use less Div(s) in your code.
Your Two Drop-Menus : Account and Shop by Categories aren't working.
As for the sidebar, I believe your have wrong box dimensions. Your Bullon chart is cut.
Some of your Menus are longer than the rest.
What makes you believe that there is an error in your page ?
You should use the inner variables provided by browser. I have seen many translate code.
Here is a sample code :
function alertSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
window.alert( 'Width = ' + myWidth );
window.alert( 'Height = ' + myHeight );
}
It was taken from HowtoCreate.co.uk
If you want to use drop menus, you need to use events like Click. W3C has many code samples and good documentation.
Here is a fun code sample from W3C School :
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
You can always use JQuery if you want the easy or effective method. Javascript has many libraries that you can use.
See this page to find deprecated and obsolete functions in JQuery : http://api.jquery.com/category/deprecated/
You can find deprecated functions in Javascript in this page : "Mozilla Deprecated and Obsolete features"
If you want to continue using old functions, you can downgrade or make use of plug-ins to restore old features.
Related
I am working on my first responsive site, using 3 testing devices:
htc desire 500 dual,
iphone6, and
my windows laptop.
And I am testing with various 'languages':
css media queries
jquery
angular
When testing, angularjs gives strange results in the HTC:
#media screen and (max-width : 320px)
{ some_selector{ /* css that IS triggered */ }
}
jQuery(document).on( 'ready ',
function()
{ alert( jQuery( window ).innerWidth()) ;
}
) ; // RETURN: 320
my_app.controller( "my_controller" ,
function( $scope , $window )
{ alert( $window.innerWidth ) ;
}
) ; // RETURN: sometimes 980, sometimes 320, sometimes 192
EDIT
based on Jonathan's answer, I realize that this is just the same old problem of different browsers handling different window properties differently, especially during the document loading phase ... (which is basically the reason why everybody adopted jQuery, especially jQuery(document).ready(...) handler)
The call to angular's my_app.controller(...) is occurring before jquery's document ready phase, when the DOM is still going through initial setup phases (as you can see by the example below);
And the explanation of why HTC is different from iphone is almost certainly due to the fact that I am using firefox in the htc, and safari in the iphone ...
my_app
.controller( "my_controller" ,
function( $scope , $window )
{ alert( $window.innerWidth + "," + window.innerWidth + "," + window.document.documentElement.clientWidth ) ;
// returns 154,154,980
alert( $window.innerWidth + "," + window.innerWidth + "," + window.document.documentElement.clientWidth ) ;
// returns 320,320,320
}
) ;
While angular has a built in version of jQuery, it's called jqLite, at it doesn't have all the weight of jQuery. The short versions is that angular's $window is, by default, just the plain old Window object and its innerWidth property (see $WindowProvider).
jQuery is looking at different properties to determine the width. It does this to try to normalize values between browsers. If we are to examine jQuery's code (using v1.8.3 and up), we can conclude it is using window.document.documentElement.clientWidth instead.
If you want to learn more about the difference between these two, here is a StackOverflow question asking just that. Also, you could just switch out $window.innerWidth in angular for $window.document.documentElement.clientWidth if you prefer how jQuery calculates it.
I am using ui-screen-shooter, which makes use of the UI Automation JavaScript API to take screenshots of apps. My app has a slightly different structure on iPad and iPhone, so I need to detect the device type in my shoot_the_screen.js script and run different code. I would like something equivalent to [[UIDevice currentDevice] userInterfaceIdiom] that I can use in JavaScript. Here is the best I have come up with. It works, but do you know of a cleaner, less device-dependent way to get the same information?
var target = UIATarget.localTarget();
var width = target.rect().size.width;
if (width == 1024 || width == 768)
{
// iPad
}
else
{
// iPhone
}
You can call model() on the target to get the information you need. That's exactly what I'm doing in the ui-screen-shooter itself.
var modelName = UIATarget.localTarget().model();
// This prints "iPhone" or "iPad" for device. "iPhone Simulator" and "iPad Simulator" for sim.
UIALogger.logMessage(modelName);
I have some simple JavaScript (embedded in an event) that I want to fire only for small devices. Phones, etc...
Currently I'm doing
if ($(window).width() < 606) {
do_things();
}
But this feels clunky. Is there a way to only execute this for devices smaller than a certain breakpoint (aside from just setting an earlier variable)? Ideally something that works with my CSS breakpoints.
I'm using Bootstrap, so there may be an easy option that utilizes that.
As crude as your code might look to you, this is actually in a nutshell what a media query is. If you look at the source for responsive.js (JS lib that adds media query support to older browsers) it includes this function:
function getDeviceWidth() {
if (typeof (window.innerWidth) == 'number') {
//Non-IE
return window.innerWidth;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
//IE 6+ in 'standards compliant mode'
return document.documentElement.clientWidth;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
//IE 4 compatible
return document.body.clientWidth;
}
return 0;
}
While this is a more complete approach to detecting device width (and this is combined with an onResize event handler to detect things like rotation), it is fundamentally what you are doing.
I have been searching on the internet for a reason why my fullscreen javascript doesn't work in Safari, but yet works in webkit browser Chrome. It seems to that safari doesn't support the element.ALLOW_KEYBOARD_INPUT add-on for webkitRequestFullScreen.
function cancelFullScreen(el) {
var requestMethod = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullscreen;
if (requestMethod) { // cancel full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
function requestFullScreen(el) {
// Supports most browsers and their versions.
var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen(el.ALLOW_KEYBOARD_INPUT) || el.mozRequestFullScreen || el.msRequestFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
return false
}
function toggleFull() {
var elem = document.body; // Make the body go full screen.
var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) || (document.mozFullScreen || document.webkitIsFullScreen);
if (isInFullScreen) {
cancelFullScreen(document);
} else {
requestFullScreen(elem);
}
return false;
}
Does anybody know a way to make safari accept fullscreen yet still be able to handle keyboard inputs?
According to Apple's documentation, this is supposed to work in Safari 5.1 and later, but obviously it doesn't. I filed a bug report with Apple (which they don't make public), and the reply was as follows:
Engineering has determined that this issue behaves as intended based on the following:
We intentionally disable keyboard access in full screen for security reasons.
I have replied asking that they at least update the documentation and make the lack of feature support detectable somehow. I will update here if I get a reply.
Unfortunately, there isn't a good way to even do feature detection, since element.ALLOW_KEYBOARD_INPUT is defined in Safari, and the function call with that flag doesn't throw an error. The only remaining option is to parse the user agent string (try this library).
Obviously, Apple doesn't yet document which version supports this, but according to this, it stopped working as of v5.1.2. That would leave a very small number of people using 5.1 un-patched, if it ever even worked at all. So it's probably not even worth detecting the version.
As a fallback, I would expand the desired DOM element to fill the browser window by setting CSS height and width to 100% and position to "fixed" or "absolute".
Update: It looks like the documentation has been corrected and no longer mentions the ALLOW_KEYBOARD_INPUT flag.
This has been fixed in Safari 10.1!
Under the "Safari Browser Behavior" section.
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.