Determine Minheight and put it via javascript. It work successfully twice but same code is not working in third calling. This one (document.getElementById("rightadmin").style.minHeight=wrapHeight+'px';) is not working. More amazing is that if I make the 3rd one elevate to 2nd position then it works and then 3rd one not working. So basically whatever I put after 2nd one don't work.
JavaScript:
function height(){
var dheight= ($(document).height());
var wheight= ($(window).height());
if(dheight>wheight){
var wrapHeight= dheight;
}
else {
var wrapHeight=wheight;
}
document.getElementById("iframeArea").style.minHeight=wrapHeight+'px';
document.getElementById("dailySchedule").style.minHeight=wrapHeight+'px';
document.getElementById("rightadmin").style.minHeight=wrapHeight+'px';
}
html:
<body onload="height();">
<!--Start of iframeArea-->
<div class="iframeArea" id="iframeArea">
<div class="btnRight" id="rightadmin">
</div>
<!--End of btnRight-->
</div>
<!--End of iframeArea-->
Are you sure the dailySchedule id exists ? If not your function will throw an error and won't execute the last line.
Might be due to scope problems - the variable wrapHeight is local in two blocks.
Should not have any effect on the outcome, but this code is more elegant way to assign the third variable:
var dheight = $(document).height();
var wheight = $(window).height();
var wrapHeight = (dheight > wheight) ? dheight : wheight;
As all others already said, something else is the problem.
I don't see element with id=dailySchedule on the page. If no element with that id is on the page you should get an error. Check browser console for javascript error.
you say <body onload='height()'> and never check if the document is ready, and then there is perhaps no div with id rightadmin...
Try to convert to jQuery and do something like this and delete the onload attribute.
$(document).ready(function(){
//your code here
}
I am using now the following code. It works fine for everything.
$(function(){
var dheight= ($(document).height());
var wheight= ($(window).height());
var wrapHeight = (dheight > wheight) ? dheight : wheight;
$('.dailySchedule').css({ "min-height": wrapHeight + 'px' });
$('.iframeArea').css({ "min-height": wrapHeight + 'px' });
$('.btnRight').css({ "min-height": wrapHeight + 'px' });
});
Thanks for answeri
Related
I am trying to set the margin of my wrapper dynamically. Here is my JavaScript code:
var w = window.innerWidth;
if (w > 800) {
var margin = (w - 800) / 2;
$('.ui-page').css('margin-left', margin);
var output = $('.ui-page').css('margin-left');
$('.ui-footer').css('margin-left', margin);
$('.ui-header').css('margin-left', margin);
alert(output);
}
But when I open the page, the alert says undefined !?
In addition to my previous answer, which shows it working, there is this fail-safe.. this is a different approach that must always work. I suspect your page is not loaded when the code is run:
http://jsfiddle.net/digitalextremist/xfVdL/1/
$( document ).ready( function() {
var w = window.innerWidth;
var maxWidth = 300
if ( w > maxWidth ) {
var margin = (w - maxWidth) / 2;
$('.ui-page').css('margin-left', margin);
var output = $('.ui-page').css('margin-left');
$('.ui-footer').css('margin-left', margin);
$('.ui-header').css('margin-left', margin);
alert( output );
}
});
Or, if you use jQuery Mobile:
$( document ).on( 'pagebeforeshow', function( event ) {
var w = window.innerWidth;
var maxWidth = 300
if ( w > maxWidth ) {
var margin = (w - maxWidth) / 2;
$('.ui-page').css('margin-left', margin);
var output = $('.ui-page').css('margin-left');
$('.ui-footer').css('margin-left', margin);
$('.ui-header').css('margin-left', margin);
alert( output );
}
});
It is critical that you let the page load first before testing sizes as you are doing.
What you are doing is correct, but jQuery and jQuery Mobile render the page in stages. To make sure you take your measurement of .ui-page at the right time, once everything is properly loaded by jQuery or jQuery Mobile, you need to make sure it all rendered first, which means you need to use $( document ).on( 'pagebeforeshow' ) for jQuery Mobile, or $( document ).ready() for jQuery itself. These make sure your code runs after the page is fully rendered. Before that, your measurements will be wrong! And before that, .ui-page might not even exist yet, if it is added by jQuery Mobile.
Here is more information for you:
When should I use jQuery's document.ready function?
jQuery: Why use document.ready if external JS at bottom of page?
http://learn.jquery.com/about-jquery/how-jquery-works/
http://www.w3schools.com/jquerymobile/event_pagebeforeshow.asp
http://jquerymobile.com/demos/1.1.0/docs/api/events.html
Try setting the margin with a unit; something like:
$('.ui-page').css('margin-left', margin + 'px');
Also, you can use margin: 0 auto; to have your div's center themselves within the page. See MDN for some details.
It looks like your query for .ui-page is returning no elements.
Therefore, when trying to retrieve the margin-left property, it returns undefined.
Try checking whether whether .ui-page actually exists on the page.
A quick way to do this:
if ( $('.ui-page').length > 0 ) alert('.ui-page exists!');
What version of jQuery are you using? And what browser?
Without changing your code really at all, it works fine under version 1.10.1
( It also works under every other version... on Chrome and Firefox )
See what I mean? http://jsfiddle.net/digitalextremist/xfVdL/
So, it does work... No "px" required.
I am trying to make a persistent-header for my website. I wrote the following codes which does not work. While I am doing debugging I find it cannot even read the correct position of the div and that is the problem. Here is the code:
<script>
function UpdateTableHeaders() {
/*var el = $("#top_menu", this);
var offset = el.offset();
var scrollTop = $(window).scrollTop();
var floatingHeader = $(".floatingHeader", this);
if (scrollTop > offset.top) {
floatingHeader.css(
"visibility", "visible"
);
} else {
floatingHeader.css(
"visibility", "hidden"
);
}; */
//following lines is the code I have tried in turns to see if it can actually read the correct position or not
$("#content").append( "position top:" + $('#top_menu').position().top);
$("#content").append( "position top:" + $('#top_menu').offset().top);
}
// DOM Ready
$(function() {
var clonedHeaderRow;
clonedHeaderRow = $("#top_menu", this);
clonedHeaderRow
.before(clonedHeaderRow.clone())
.addClass("floatingHeader");
$(window)
.scroll(UpdateTableHeaders)
.trigger("scroll");
});
However, the output answer doesn't seems to be correct. Here is the output when I scroll the page:
position top:101.45001220703125position top:101.41668701171875position top:101.41668701171875position top:101.04998779296875position top:101.16668701171875position top:101.39999389648438position top:100.63333129882812position top:100.98333740234375position top:101.33331298828125position top:100.79998779296875position top:101.21665954589844position top:101.10000610351562position top:100.63333129882812position top:101.05000305175781position top:100.93333435058594position top:101.23333740234375position top:101.41667175292969position top:100.60000610351562position top:100.71665954589844position top:101.18333435058594position top:100.53334045410156position top:101.23333740234375position top:101.35000610351562position top:100.69999694824219position top:101.05000305175781position top:100.51666259765625position top:100.63333129882812position top:100.86666870117188position top:101.33332824707031position top:100.91667175292969
it fluctuates around 100. Can anyone tell me where did I go wrong?
Thank in advance for any help!
Don't do it this way. Use css position : fixed on your header instead.
I have two div in my website page one beside the other(one left and one right),I want to change the height of the left one with the content of the right one using javascript
I tried to have the dynamic height of the right div :
function getHeight() {
var doc = document.getElementById('div.right');
if (document.all) // ok I.E
{
H = doc.currentStyle.height;
}
else // ok FF
{
H = document.defaultView.getComputedStyle(doc, null).height;
}
}
But I stopped here because I don't know how to pass the javascript variable to my page of style CSS,I mean I dont know how to apply this value in the other div(left div) in the same page automatically.
Any Idea?
Just use
document.getElementById('div.left').style.height = H;
Edit
AFAIK you cant modify an external stylesheet from javascript
Is the height of the div determined at the time the document is served, loaded or or any arbitrary time after the document has loaded?
The code I suggested above was to be used like this(I'm assuming your IE code is correct)
function getHeight() {
var doc = document.getElementById('div.right');
if (document.all) // ok I.E
{
H = doc.currentStyle.height;
}
else // ok FF
{
H = document.defaultView.getComputedStyle(doc, null).height;
}
document.getElementById('div.left').style.height = H;//✔
}
Just to help people I found a great code to change the height of two div autoamtically using a little of Jquery :
<script type='text/javascript'>
$(window).load(function(){
var lh = $('#div.right').height();
var rh = $('#div.left').height();
if (lh >= rh){
//alert('left : ' + lh);
$('#div.left').height(lh);
} else {
//alert('right : ' + rh);
$('#div.right').height(rh);
};
});
</script>
It's works for all navigators.
I was having a problem on getting the height and also calculating other calculations.
I want to get the image height after it has loaded, so I put it on the onload attribute of <img></img> function, here's my code
<p class="test1" style="position:absolute;bottom:0px;">
<img src="'+getBaseURL()+'js/check/no-image.png" rel="fullname"
onload="verticalCenter()"/>
</p>
function verticalCenter(){
var imageHeight = jQuery(".test1 img").height(); //I get a result of 0
var total = imageHeight / 2 + 80
}
I already tried using setTimeout but it still fails.
What I was planning to do here is to set the css of <p class="test1"> into like this:
jQuery(".test1").css("bottom","-"+total);
As I said, this isn't working because I don't get a result in total.
How would I do this, Is there a way to solve this problems, I'm already scratching my head on this.
Thanks in advance!
$(window).load(function () {
var imageHeight = jQuery(".test1 img").height(); //I get a result of 0
var total = imageHeight / 2 + 80
}
<p class="test1" style="position:absolute;bottom:0px;">
<img src="'+getBaseURL()+'js/check/no-image.png" rel="fullname"/>
</p>
You need units on CSS dimensions.
jQuery(".test1").css("bottom","-"+total+"px");
You should also check to make sure that total is the value you are expecting it to be before setting it.
http://jsfiddle.net/jfriend00/yHqr7/
It might be easier to set all the image heights when the form is ready:
$(document).ready(
$('p.text1 img').each(verticalCenter);
)
Unless you're using ajax to load the images; if that is the case, then you should use the live() event:
$('p.text1 img').live(verticalCenter);
Then in your function you can set everything:
function verticalCenter(){
$(this).css('bottom',"-" + ($(this).height() / 2 + 80) + 'px');
}
I'm having slight troubles with my code. What I'm trying to do is make these element's css property 'left' update according to the difference of it's current left value, and the amount the page resizes. This way, when the page resizes and the background moves over, the elements will move too. Take a look at the code below and I'll describe the issue:
$(window).resize(function() {
var docWidth = $(window).width();
if (docWidth < 1000) {
var difference = 1000-docWidth;
$('#headNav a,#icons div').each(function() {
var left = $(this).position().left;
var newLeft = left - difference;
$(this).css({ 'left' : newLeft });
});
}
});
So the issue that I'm getting is the elements are being given left values of wild numbers, while the value of the variable 'newLeft' is the reasonable, desired value. The each function I think is collecting the sums of these values and running them for each element x amount of times that the elements found exist (so if there's 5 elements it runs 5 times, I mean.) What I want is this code to execute uniquely for each element, but just once each, not each element 10 times! (that's how many elements are in the html).
So my question is, how can this be achieved? I hope I explained myself well enough, this was tough to iterate. Any help is extremely appreciated. Thank you!
Here's a fun trick: Include += in your .css() call:
$(this).css({left: "+=" + difference});
jQuery does the math for you to get the new value.
Try this:
$(window).resize(function() {
var docWidth = $(window).width();
if (docWidth < 1000) {
var difference = 1000-docWidth;
$('#headNav a,#icons div').each(function(iconInst) {
var left = $("#" + iconInst).position().left;
var newLeft = left - difference;
$("#" + iconInst).css({ 'left' : newLeft });
});
}
});