Coldfusion tabs create javascript style width - javascript

New at coldfusion here. I am needing to change the width of a tab area. This is the following code that I currently have:
<script>
$(document).ready(function() {
var x = screen.width - 100;
console.log(x);
$("[name=theTabs]").css({'width':x + 'px'});
});
</script>
<cflayout name="theTabs" type="tab" style="width: 10px;">
Once the page loads up, the width of the tab area is still 10px....
What could I be doing incorrect?

There are 4 elemets that need to be resized.
I don't know 100% if it matters, but you may want to put the script after the cflayout just to make sure it rendered in the page before trying to run js against it.
<cflayout name="theTabs" type="tab" style="width: 10px;"></cflayout>
<script>
$(document).ready(function() {
var x = screen.width - 100;
console.log(x);
$("#theTabs").css({'width':x +'px'});
$(".x-tab-panel").css({'width':x +'px'});
$(".x-tab-panel-header").css({'width':(x-2) +'px'});
$(".x-tab-panel-body").css({'width':(x-2) +'px'});
});
</script>

Related

how to get width of a mobiles using javascript

so I try to get the width of the device using jquery I made responsive website with 2 interface for laptop and mobiles but the problem is it doesn't work in mobile even the dimension of the div test was out of size in mobiles please help me the code that I use for redirecting is below with comments
<html>
<head>
<script src="./js/jquery-3.2.1.js"></script>
</head>
<body>
<div id='test' style=" width: 2.54cm; height:2.54cm;"></div>
//this div dimension works on laptop it measure exactly 2.54cm or 1nch
//using ruler but in mobiles it shrink and out of measure
<script>
//as you see I get the width of the div to get the pixel per inch
var sqw=$('#test').width();
var sqh=$('#test').height();
//and I get the total width of the document
var dheight=$(document).height();
var dwidth=$(document).width();
var w=dwidth/sqw;
//and I divide the total width of the document to pixel per inch
//the problem is the mobile show 10.98 inch where the mobile I use is
//miniFlare S5 cherrymobile with width of just 2.5 inches
if(w<=7) {
window.location.replace("./m_index.php");
} else {
window.location.replace("./d_index.php");
}
</script>
</body>
</html>
Your are using jQuery. From the docs .width() they say:
This method is also able to find the width of the window and document.
// Returns width of browser viewport
$( window ).width(); // <- this is the one you are looking for!
// Returns width of HTML document
$( document ).width();
var dwidth = window.innerWidth;
var dheight = window.innerHeight;
would do the job
You can get cross platform using the following script:
const w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
const h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
please try below code, it may satisfy your requirement
<script>
getScreensize(){
var sqw=$("body,html").width();
if(sqw<768){
//mobile screen logic
}
else{
//desktop screen logic
}
}
$(window).resize(function(){
getScreensize();
})
</script>

More efficient way of using javascript to stick columns to bottom of page?

I've been designing a web site for a while, its a two column layout, and I want each column to go to the bottom of the page regardless of resolution. Currently to accomplish this, I have two JavaScript files - One that adjusts the column length to fit the browser window, and the other JavaScript file is to match the resized one. One major problem I have, is that if you change the browser window size, the columns do no auto adjust, so they may not go to the bottom of the page. I am wondering if there is some way I could do this all in one file, and most importantly make the columns always stick to the bottom of the page no matter what the window size is. Here is the code for each JavaScript file:
Adjust column height to browser window:
$(function(){
var grid = $(window).height();
var gridFinal = grid - 140;
$('.grid').css({'min-height': ((gridFinal))+'px'});
});
Adjust the other column to match the resized one:
window.onload = getIDHeight;
function getIDHeight() {
var myHomeHeight = document.getElementById("home").offsetHeight;
document.getElementById("home-services").style.height = myHomeHeight - 15 +"px";
}
window.addEventListener('load', function (){
var myNewsHeight = document.getElementById("blog").offsetHeight;
document.getElementById("social-media").style.height = myNewsHeight - 15 +"px";
});
window.addEventListener('load', function (){
var myAboutHeight = document.getElementById("references").offsetHeight;
document.getElementById("about").style.height = myAboutHeight - 25 +"px";
});
window.addEventListener('load', function (){
var myServicesHeight = document.getElementById("services").offsetHeight;
document.getElementById("guidelines").style.height = myServicesHeight - 15 +"px";
});
window.addEventListener('load', function (){
var myTipsHeight = document.getElementById("tips").offsetHeight;
document.getElementById("recommendations").style.height = myTipsHeight - 20 +"px";
});
window.addEventListener('load', function (){
var myContactHeight = document.getElementById("contact-info").offsetHeight;
document.getElementById("email").style.height = myContactHeight - 15 +"px";
});
Any help here would be greatly appreciated. If there is a simpler way of doing this that increases functionality, please let me know.
You could do it with CSS. Set the height of html & body to 100%, then set the columns to height 100%
Fiddle here : DEMO
html,body{
height:100%;
}
#column1{
height:100%;
}
#column2{
height:100%;
}

Auto-Align Script misaligns on page load but not on refresh?

Hi please take a look at my site, the code snippet in question i have to center my images since ive never had any luck with the css-html methods. Sometimes it will load centered and sometimes it wont, please tell me how i can center my images on page load.
site: http://bit.ly/11nAQJK
<script type="text/javascript"> //Centering Script
$(document).ready(function () {
updateContainer();
$(window).resize(function() {
updateContainer();
});
});
function updateContainer() {
(function ($) {
$.fn.vAlign = function() {
return this.each(function(i){
var h = $(this).height();
var oh = $(this).outerHeight();
var mt = (h + (oh - h)) / 2;
$(this).css("margin-top", "-" + mt + "px");
$(this).css("top", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);
(function ($) {
$.fn.hAlign = function() {
return this.each(function(i){
var w = $(this).width();
var ow = $(this).outerWidth();
var ml = (w + (ow - w)) / 2;
$(this).css("margin-left", "-" + ml + "px");
$(this).css("left", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);
To do this you have many variants. In your case you can do some like this
<div style="
background: url('Assets/OrderSheet.png') center center no-repeat;
width: 100%;
height: 500px;
">
<a href="Assets/OrderSheet.xls">
</a>
</div>
I'd use CSS over JavaScript for this, but that another story. To answer your question I think. pageLoad would be better than .ready
You are using $(document).ready(), so the function is executed when the DOM is ready, but not necessarily all the images and such are loaded, so height and width info are not available yet, when you refresh the page, the info is available and you get the desired behavior.
To overcome this, use $(window).load(), so the function is executed when everything on the page is fully loaded, and info like width and height are available and you should get what you are expecting the first time the page is loaded.
Alternatively, if you need to keep using $(document).ready(), you need to specify the dimensions of the elements like the images explicitly so when the DOM is loaded the browser already knows the dimensions and doesn't have to wait for the elements like images to be fully loaded.

Acquire IMG-element width before it is rendered

I wrote this script so that the wallpaper (picture of an object) on my site is positioned right and centred correctly when the window is resized. Now it works just the way I want, but only when the window resizes, under normal conditions when the window hasn't been resized it apparently can't get the width of the img element cause it doesn't subtract the half of it for the left css property. How do I get it?
HTML:
<div class="wallpaper" id="wallpaper">
<img src=#bgImage.img id="wallpaperImg" style="height:100%; width: auto; position: fixed;">
</div>
JS:
<script type="text/javascript">
var screenWidth;
var screenHight;
var totalHeight;
var aspectRatio;
var blah = false; //Ugly hack
var navbarSize = 41;
var wallpaper = $("#wallpaperImg");
function getAspectRatio(h,w){
return (h-1)/w; //Ugly hack
}
function resizeWallpaper(w,h){
if(typeof(aspectRatio)==='undefined') aspectRatio = #bgImage.aspectRatio; //delivered by server framework
totalHeight = (h-navbarSize).toString() + 'px';
wallpaper.css("height",totalHeight);
wallpaper.css("width","auto");
wallpaper.css("left",(w/2)-(wallpaper.width()/2)+'px');
wallpaper.css("top",'41px');
if(getAspectRatio(wallpaper.height(),wallpaper.width()) > aspectRatio && blah){
wallpaper.css("width",(w).toString() + 'px')
wallpaper.css("height","auto")
wallpaper.css("top",((h/2)-(wallpaper.height()/2))+20.5+'px');
wallpaper.css("left",'0px');
}
}
resizeWallpaper($(window).width(),$(window).height());
blah = true;
$(window).resize(function() {
resizeWallpaper($(window).width(),$(window).height());
});
</script>
Quick upload of what I'm talking about: Site
You have to wait for the image to download before you can resize it. Surround the initial call in a load handler:
wallpaper.on('load', function() {
resizeWallpaper($(window).width(),$(window).height());
});

Javascript: How to capture the height of the content of a website?

I am trying to find the correct Javascript code to capture the height of all the content on a webpage.
I have looked at document.height, window.screen.height, document.body.offsetHeight, bodyScroll, clientArea.style.height, bodyHeight, and document.documentElement.clientHeight.
I am using FireBug to test these values but all (except for the window.screen.height) seem to change as I resize my window, so they are not actual reporting the actual height of the content.
Now, the window.screen.height never changes, even if I change to different pages with different sizes.
How can I determine the total height of the content? Basically I need to know what the scroll bar knows. Th scrollbar knows how much to scroll per page and how much to scroll to reach the end of the content.
Any help would be greatly appreciated.
Try this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
document_height = $(document).height();
document_width = $(document).width();
window_height = $(window).height();
window_width = $(window).width();
alert(document_height + ' x ' + document_width);
alert(window_height + ' x ' + window_width);
});
</script>
Different browers report the size of the window and size of the document in different ways. You can use a library to get around the cross browser problems, like this code in jQuery:
$(document).height();
Without a library, I have used this code to get the dimensions:
var b, h, info;
b = document.body;
h = b.parentNode;
if (window.opera) {
info = { winWidth: b.clientWidth, winHeight: b.clientHeight, pageWidth: h.clientWidth, pageHeight: h.clientHeight };
} else {
info = { winWidth: h.clientWidth, winHeight: h.clientHeight, pageWidth: b.clientWidth, pageHeight: b.clientHeight };
}
var height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);

Categories