Guys i wrote a very simple jquery script to place elements properly on a webpage, basically making it responsive without media queries. Now it works just fine but the window.resize is not triggering so on document.ready it works on window resize it does not. Any help would be highly appreciated. Putting the link to the page at the bottom
// JavaScript Document
$(document).ready(PlaceContents);
$(window).ready(PlaceContents);
$(window).on('resize',PlaceContents);
function PlaceContents() {
var Wheight = $(document).height();
var Wwidth = $(document).width();
var contentPos = Wwidth/4;
var contentH = Wheight/5;
//adjust menubar height
$('#menubar').height(Wheight);
//center main content
$("#maincontent").css({top: contentH, left: contentPos, position:'absolute'});
};
http://www.mobileapplicationlabs.com/goldentreehotels/
Hope this is what you are looking for.
window.addEventListener('resize', function() {
PlaceContents();
}, false);
you can use following function
$(window).bind("load resize", function () {
PlaceContents();
});
Hope this will help you.
you should do callback on this:
$(document).ready(function(){
PlaceContents();
});
function PlaceContents() {
var Wheight = $(document).height();
var Wwidth = $(document).width();
var contentPos = Wwidth/4;
var contentH = Wheight/5;
//adjust menubar height
$('#menubar').height(Wheight);
//center main content
$("#maincontent").css({top: contentH, left: contentPos, position:'absolute'});
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="maincontent" method="POST">
<input type="submit" value="menubar" name="menubar" id="menubar">
</form>
Well you can write the same code like this :
resize function will run once the page has been loaded and also on resize event.
Good luck :)
$(document).ready(function(){
$(window).resize(function(){
var Wheight = $(window).height();
var Wwidth = $(window).width();
var contentPos = Wwidth/4;
var contentH = Wheight/5;
//adjust menubar height
$('#menubar').height(Wheight);
//center main content
$("#maincontent").css({top: contentH, left: contentPos, position:'absolute'});
}).resize();
});
Try this code:
$(document).ready(function(){
$(window).resize(function(){
var Wheight = $(window).height();
var Wwidth = $(window).width();
var contentPos = Wwidth/4;
var contentH = Wheight/5;
//adjust menubar height
$('#menubar').height(Wheight);
//center main content
$("#maincontent").css({top: contentH, left: contentPos, position:'absolute'});
});
});
Related
i'm new to Jquery and it doesn't look efficient copying the same code in two functions.
Is it possible to make this function more efficient?
By efficient i mean shrinking the code.
What it does is, changing the size of an ID element when it will be resized.
Why i need copy it twice? When i leave the code inside .resize and remove the other inside .ready, the elements will have unset sizes.
It works like i would have it working, but the problem is it doesn't look "clean".
I'm using latest Jquery.
$(document).ready( function() {
var files = ["home.html","test.html","random.html","noob.html"];
var a = 0;
var wh = $(window).height();
var ww = $(window).width();
var btn_n = $("#btn_nav button");
btn_n.height(ww*0.05);
btn_n.width(ww*0.12);
$(window).resize(function() {
var wh = $(window).height();
var ww = $(window).width();
var btn_n = $("#btn_nav button");
btn_n.height(ww*0.05);
btn_n.width(ww*0.12);
});
});
Just move the code you want to run in multiple places into a function, then call it on document ready, and on resize events.
$(document).ready( function() {
var files = ["home.html","test.html","random.html","noob.html"];
var a = 0;
function layout() {
var wh = $(window).height();
var ww = $(window).width();
var btn_n = $("#btn_nav button");
btn_n.height(ww*0.05);
btn_n.width(ww*0.12);
}
layout();
$(window).resize(layout);
});
Put the logic into a named function - then call it on page load and then again on window resize.
$(document).ready( function() {
updateSizes();
var files = ["home.html","test.html","random.html","noob.html"];
var a = 0;
$(window).resize(updateSizes)
function updateSizes(){
var wh = $(window).height();
var ww = $(window).width();
var btn_n = $("#btn_nav button");
btn_n.height(ww*0.05);
btn_n.width(ww*0.12);
}
});
I want to stop scroll after a dynamic div reaches its end. This div will be holding dynamic content so the size never stays the same. I know how to lock in position when scroll hits a pre-defined height, but not sure how to do it when the hight is constantly changing. here's what i'm using for my standard locking scroll when it hits specific point:
var profile_rc = $("#profile-rc");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 285) {
profile_rc.addClass("p-right-column");
} else {
profile_rc.removeClass("p-right-column");
}
});
Looks like you are using jQuery, the following 2 examples might help.
Detecting dynamic height of screen
<script>
$(function(){
var windowHeight = $(window).height();
$(window).resize(function() {
windowHeight = $(window).height();
console.log(windowHeight);
});
});
<script>
Detecting dynamic height of a div
<script>
$(function(){
var divHeight = $('#your-div-id').css("height");
$( window ).on("resize", function() {
divHeight = $('#your-div-id').css("height");
console.log(divHeight);
});
});
</script>
I got it to work doing this:
$(window).scroll(function() {
var divHeight = $('#farleft-cont').outerheight(true);
var ycbc = $('#target-div');
var scroll = $(window).scrollTop();
if (scroll >= divHeight) {
ycbc.addClass("target-div-fixed");
} else {
ycbc.removeClass("target-div-fixed");
}
});
I am trying to change the width of a div element on window resize but due to the resize function the width of the element is always 0 in the end
function resizeUploadField() {
var uploadInputField = $('.input-append');
var uploadSelectButton = $('.btn-file');
var uploadRemoveButton = $('.fileupload-exists');
if (uploadRemoveButton.length) {
}
console.log(uploadInputField.width());
uploadInputField.width(uploadInputField.width() - uploadSelectButton.outerWidth() - 2);
console.log(uploadInputField.width());
}
$(document).ready(function() {
var windowWidth = $(window).width();
resizeUploadField();
$(window).resize(function(event) {
console.log($(event.target).width());
if ($(event.target).width() != windowWidth) {
resizeUploadField();
windowWidth = $(event.target).width();
}
});
The resizeUploadField function seems to work properly since the field is properly resized when called in onDocumentReady
Maybe someone can give me a hint what is going wrong
Try to redeclare the windowWidth = $(window).width(); inside the resize() function.
E.g.
$(document).ready(function() {
var windowWidth = $(window).width();
resizeUploadField();
$(window).resize(function(event) {
windowWidth = $(window).width();
console.log($(event.target).width());
if ($(event.target).width() != windowWidth) {
resizeUploadField();
windowWidth = $(event.target).width();
}
});
});
Hope it helps.
I have this code
$(document).ready(function(){
var oldwidth= $(window).width();
$(window).resize(function(){
var nw= $(window).width();
//compare new and old width
});
});
The problem is the old width is only set during loading of document, new width changes during every resize. I want to get the width just before resizing, so I can check if user is decreasing width or increasing width of screen.
In the resize() handler, update oldwidth with the new width as the very last line of the function.
$(document).ready(function () {
var oldwidth = $(window).width();
$(window).resize(function () {
var nw = $(window).width();
//compare new and old width
oldwidth = nw;
});
});
Resize event detection, loging on stop resize:
function resize_event_analysis()
{
var resized_to;
//On resize events
$(window).resize(function()
{
clearTimeout(resized_to);
resized_to = setTimeout(function() {
var now = new Date();
now.toString('yyyy-MM-dd, hh:mm:ss');;
var dwidth = "Device width = " + window.screen.width;
var swidth = "Window width = " + $(document).width();
console.log("Resize detected successfully - " + now);
console.log(dwidth);
console.log(swidth);
}, 100);
});
Call like i.e.:
$(document).ready(function() {
resize_event_analysis();
});
The previous solution only works the first time you load the page, but if you resize the browser it does not calculate it anymore, so my solution for the whole problem is:
on my master page I get the initial size:
$(document).ready(function () {
var oldWidth = $(window).width();
});
then on the resize event we do this:
$(window).resize(function () {
if ($(window).width() != oldWidth) {
// do whatever we want to do
// update the size of the current browser (oldWidth)
oldWidth = $(window).width();
}
});
I have an html page where in the middle there is a pic.
Is there a way to scale down the image with javascript in case it's too big for the current monitor resolution?
I mean if a user with a resolution of 1600*1200 open an image of 1900*1200 the image should be scaled down to fit the window.
I can use jquery
Why not just use css?
.imgresize {
max-width: 100%;
max-height: 100%;
}
Look here: Image resize to fit screen
else: http://jsfiddle.net/jsNDW/1/
HTML
<img src="http://placehold.it/1950x550" class="imgresize">
And JQUERY
var wWidth = $(window).width();
var wHeight = $(window).height();
$('.imgresize').each( function() {
var imgWidth = $(this).width();
var imgHeight = $(this).height();
if(imgWidth > wWidth)
{
$(this).width(wWidth);
}
if(imgHeight > wHeight )
{
$(this).width(wHeight);
}
});
$(window).resize(function() {
var wWidth = $(window).width();
var wHeight = $(window).height();
$('.imgresize').each( function() {
var imgWidth = $(this).width();
var imgHeight = $(this).height();
if(imgWidth > wWidth)
{
$(this).width(wWidth);
}
if(imgHeight > wHeight )
{
$(this).height(wHeight);
}
});
});