I'm trying to figure out with this isn't working.
It used to take care of height instead of width, but i simply can't get it it work.
Anyone could point me in the right direction of the problem perhaps?
function getWindowWidth() {
var windowWidth = 0;
if (typeof(window.innerWidth) == 'number') {
innerWidth = window.innerWidth;
}
else {
if (document.documentElement && document.documentElement.clientWidth) {
windowWidth = document.documentElement.clientWidth;
}
else {
if (document.body && document.body.clientWidth) {
windowWidth = document.body.clientWidth;
}
}
}
return windowWidth;
}
function Removewhensmall(id) {
if (document.getElementById) {
var windowWidth = getWindowWidth();
if (windowWidth > 0) {
var contentElement = document.getElementById(id);
var contentWidth = contentElement.offsetWidth;
if (windowWidth < 600) {
contentElement.style.display = 'none';
}
}
}
}
window.onload = function() {
Removewhensmall('rightwrap');
Removewhensmall('leftwrap2');
}
window.onresize = function() {
Removewhensmall('rightwrap');
Removewhensmall('leftwrap2');
}
if (typeof(window.innerWidth) == 'number') {
innerWidth = window.innerWidth;
}
shouldn't that be
if (typeof(window.innerWidth) == 'number') {
windowWidth = window.innerWidth;
}
?
And further in the code
var contentWidth = contentElement.offsetWidth;
is defined, but contentWidth is never used again...
Also, you should make use of elseif() to prevent many nested if-clausules.
Related
I have the jQuery function below that is meant to remove a class on window load and resize if the width is greater than 992 px and add a class if its less than 992px.
It seems to be working fine however the class stays added if i increase the window size from 992 to 1010px. At 1011px it is removed.
jQuery(document).ready(function($){
$(window).on('resize', function() {
if($(window).width() > 992) {
$('.bid-overlay-booking').removeClass('fancyboxID-booking');
}
else{
$('.bid-overlay-booking').addClass('fancyboxID-booking');
}
}).resize();
});
I wrestled with something similar a while back. Here was my kludge fix.
var windowHeight = 460;
var windowWidth = 800;
if (document.body && document.body.offsetWidth) {
windowHeight = document.body.offsetHeight;
windowWidth = document.body.offsetWidth;
}
if (document.compatMode == 'CSS1Compat' && document.documentElement && document.documentElement.offsetWidth) {
windowHeight = document.documentElement.offsetHeight;
windowWidth = document.documentElement.offsetWidth;
}
if (window.innerWidth && window.innerHeight) {
windowHeight = window.innerHeight;
windowWidth = window.innerWidth;
}
if(windowWidth > 992) {
$('.bid-overlay-booking').removeClass('fancyboxID-booking');
}
else{
$('.bid-overlay-booking').addClass('fancyboxID-booking');
}
I am writing this code to change my navigation link colour(white to #03c1cb) based on the url address not but it doesn't run properly please help me. I want to change the color of navigation link at that particular url address
my html code is
<a href="#home" id="start1" class="scroll" style="text-decoration:none;position:absolute;
right:450px;top:37px;font-weight:bold;color:white;font-size:15px;z-index:200;
transition:0.5s" onmouseover="big(this)" onmouseout="small(this)">HOME</a>
function big(x) {
x.style.fontSize = "17px";
x.style.color = "#03c1cb";
}
function small(x) {
var y = location.hash;
if (x.href == y) {
x.style.fontSize = "17px";
x.style.color = "#03c1cb";
} else {
x.style.color = "white";
x.style.fontSize = "15px";
}
}
function isElementInViewport(el) {
//special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $j(window).height() */
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $j(window).width() */
);
}
// url change on clicking
$(document).ready(function() {
$(".scroll").click(function(e) {
e.preventDefault();
var section = this.href,
sectionClean = section.substring(section.indexOf("#"));
$("html, body").animate({
scrollTop: $j(sectionClean).offset().top
}, 1000, function() {
window.location.hash = sectionClean;
});
});
});
// listen for the scroll event
$(document).on("scroll", function() {
console.log("onscroll event fired...");
// check if the anchor elements are visible
$(".anchor").each(function(idx, el) {
if (isElementInViewport(el)) {
// update the URL hash
if (window.history.pushState) {
var urlHash = "#" + $j(el).attr("id");
window.history.pushState(null, null, urlHash);
}
}
});
});
Please help me
I'm trying to get the dimensions of my containerNode which is a member of my dojox dialog widget, when the widget's showing animation ends.
this.dialog = new dojox.widget.Dialog( { sizeToViewport: true });
var dialogContainer = this.dialog.containerNode;
Which function or property should I use?
Since dojo V1.7 you could use dojo.position.
With the given example:
var position = dojo.position(dialogContainer);
var dimensions = {
width: position.w,
height: position.h
}
This call requires dojo/dom-geometry.
Let me know if it worked pls..
Ok, 2nd attempt now. As experimenting a little bit, didn't lead to a solution. How about a nasty little workaround?
Researching on the sizeToViewPort-option of the dojox.widget.dialog i found out, that by default there is a padding of 35px to the ViewPort. So if you know the size of the viewport, you could get the dimensions of the dialog by substracting the padding from it..
So maybe this helps:
function getNewDialog(the_padding) {
if (!the_padding || isNaN(the_padding)) {
the_padding = 35;
}
var dialog = new dojox.widget.Dialog({
sizeToViewport: true,
padding: the_padding + 'px' //nasty string conversion
});
return dialog;
}
function getViewPortSize() {
var viewPortWidth;
var viewPortHeight;
// mozilla/netscape/opera/IE7
if (typeof window.innerWidth != 'undefined') {
viewPortWidth = window.innerWidth;
viewPortHeight = window.innerHeight;
}
// IE6 in standards compliant mode
else if (typeof document.documentElement !== 'undefined' && typeof document.documentElement.clientWidth !== 'undefined' && document.documentElement.clientWidth !== 0) {
viewPortWidth = document.documentElement.clientWidth;
viewPortHeight = document.documentElement.clientHeight;
}
// older versions of IE fallback
else {
viewPortWidth = document.getElementsByTagName('body')[0].clientWidth;
viewPortHeight = document.getElementsByTagName('body')[0].clientHeight;
}
return {
width: viewPortWidth,
heigth: viewPortHeight
};
}
function getDialogSize(the_padding) {
if (!the_padding) {
the_padding = 35;
}
var vp_size = getViewPortSize();
return {
width: vp_size.width - the_padding,
heigth: vp_size.heigth - the_padding
};
}
var costumPadding = 35; // this is also the default value of dojox.widget.dialog ...
var dialog = getNewDialog(costumPadding);
var dialogSize = getDialogSize(costumPadding);
Hope I didn't miss anything.
This is one of possible sollutions
dojo.connect(mydialog, "show", function(){
setTimeout(function(){
var position = dojo.position(dialogContainer);
var dimensions = {
width: position.w,
height: position.h
}
alert(position.h);
},mydialog.duration + 1500);
});
How can I make this script IE friendly? The only parts that aren't IE friendly are the variables scrolledtonum and heightofbody...
function getheight() {
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;
}
var scrolledtonum = window.pageYOffset + myHeight + 2;
var heightofbody = document.body.offsetHeight;
if (scrolledtonum >= heightofbody) {
document.body.scrollTop = 0;
}
}
window.onscroll = getheight;
function func() {
window.document.body.scrollTop++;
}
window.document.onmouseover = function () {
clearInterval(interval);
};
window.document.onmouseout = function () {
interval = setInterval(func, 20);
};
var interval = setInterval(func, 20);
The mozilla MDN documentation for scrollY contains sample code for dealing with compatibility issues with pageYOffset: https://developer.mozilla.org/En/DOM/Window.scrollY.
It says the following:
For cross-browser compatibility, use window.pageYOffset instead of window.scrollY, except use
(((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop
when window.pageYOffset (and window.scrollY) is undefined.
I'm trying to make 'dark' area when my modal window is opened. Here is what I wrote: the first function f_documentSize will return size of the window, the second one will make fullwindow div.
It works great but there are scrollbars (vertical and horizontal). When I scroll them the page makes bigger (free space). Why?
function f_documentSize () {
var n_scrollX = 0,
n_scrollY = 0;
if (typeof(window.pageYOffset) == 'number') {
n_scrollX = window.pageXOffset;
n_scrollY = window.pageYOffset;
}
else if (document.body && (document.body.scrollLeft || document.body.scrollTop )) {
n_scrollX = document.body.scrollLeft;
n_scrollY = document.body.scrollTop;
}
else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
n_scrollX = document.documentElement.scrollLeft;
n_scrollY = document.documentElement.scrollTop;
}
if (typeof(window.innerWidth) == 'number')
return [window.innerWidth, window.innerHeight, n_scrollX, n_scrollY];
if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight))
return [document.documentElement.clientWidth, document.documentElement.clientHeight, n_scrollX, n_scrollY];
if (document.body && (document.body.clientWidth || document.body.clientHeight))
return [document.body.clientWidth, document.body.clientHeight, n_scrollX, n_scrollY];
return [0, 0];
}
function f_putScreen (b_show) {
if (b_show == null && !window.b_screenOn)
return;
if (b_show == false) {
window.b_screenOn = false;
if (e_screen) e_screen.style.display = 'none';
return;
}
if (window.e_screen == null) {
window.e_screen = document.createElement("div");
e_screen.innerHTML = " ";
document.body.appendChild(e_screen);
e_screen.style.position = 'absolute';
e_screen.id = 'eScreen';
if (document.addEventListener) {
window.addEventListener('resize', f_putScreen, false);
window.addEventListener('scroll', f_putScreen, false);
}
if (window.attachEvent) {
window.attachEvent('onresize', f_putScreen);
window.attachEvent('onscroll', f_putScreen);
}
else {
window.onresize = f_putScreen;
window.onscroll = f_putScreen;
}
}
// set properties
var a_docSize = f_documentSize();
e_screen.style.left = a_docSize[2] + 'px';
e_screen.style.top = a_docSize[3] + 'px';
e_screen.style.width = a_docSize[0] + 'px';
e_screen.style.height = a_docSize[1] + 'px';
e_screen.style.zIndex = 1000;
e_screen.style.display = 'block';
}
Try setting the "modal background" DIV's display style to position:absolute and set its left, top, right, and bottom properties to 0. Also make sure its margin is 0.
#modalDiv {
position:absolute;
background-color: #CCCCCC;
-moz-opacity: 0.5;
opacity: 0.5;
filter:alpha(opacity=50);
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: 0;
z-index: 9999 /* where 10K is the dialog and 9999 > everything else */
}