Onresize event isn't running on resizing - javascript

I set the javascript window.onresize event to run other functions that fit div's size with the body's size. The problem is that when the screen is resized by adding a comment (using disqus), the divs whose sizes are supposed to fit with the new body's size, don't fit. I mean onresize function isn't being ran.
As you can see, the right side div doesn't grow as comments are being added (see the border). Do you have any idea about how make onresize event work?
PS: When I open developer tools on firefox, the div is resized, I don't know why, but the onresize event is ran. Only in this situation.
Edit: Tried to run this jquery script:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script>
$(document).resize(function(){
tamanho_barra();
});
</script>
But, isn't working yet. I've tried to change the "document" to a random div and see if something would happen, but nothing. I have no idea about what is the problem. Could you help me please?
Edit2: Working now with rcabral's help. He told me to add a background image to the content which is a black point of 1px and repeat it until the bottom of the page.
#content { background:url('<?php bloginfo('template_directory'); ?>/images/gray_dot.gif') 634px 0px repeat-y; }

Your script isn't run automatically. You must include it inside a function that is run when the DOM is ready: $(document).ready(function() { here }); or $(function() { here });
For example:
<script>
$(function() {
$(window).resize(function(){
$("#barra").tamanho_barra();
});
});
</script>
And your code has a few errors:
1. You are using two opening parentheses after "resize" instead of just one.
2. And you should select window instead of document for the resize function.
I hope that helps.

There's a jQuery plugin that will let you target the container element that Disqus is running in.
Here's a demo: http://jsfiddle.net/hansvedo/S3R7w/
Here's the plugin: http://benalman.com/projects/jquery-resize-plugin/
And here's the syntax:
$('div#disqus-container').bind('resize', function(){
// your code
});

Related

Image resize within the div on manual browser width change

thanks to some external resources and help of some great people the following codepen.io image(post) grid with zoom in effect on hoover was created. There is only one small feature that actually I can't figure out is if for example the user will decide to resize his browser width the images will behaive very very badly, this JS code in some kind destroy responsive behavior of images, but if you refresh the page everything will look nice again.
JS CODE
$(function(){
$('.item-inner').each(function(){
var img = $(this).find('img');
$(this).css({height:img.height(), width:img.width()});
})
})
This code should be put inside a resize() event and also on ready()
function updateImageSize(){
$('.item-inner').each(function(){
var img = $(this).find('img');
$(this).css({height:img.height(), width:img.width()});
})
}
$(window).on('resize',updateImageSize);

How do I apply a browser-position to my code?

Earlier today I asked a question about my webpage being very 'jumpy'.
I've posted a test version of my webpage here: http://armandbakx.nl/
And a codepen can be viewed here: http://codepen.io/anon/pen/GpmQoY
$('img').on('click', show);
$('.overlay').on('click', hide);
function show(){
$('.scroll-container').eq($(this).parent().index()).addClass('show');
$('.content-container').addClass('no-scroll');
$('.overlay').addClass('opacity');
}
function hide() {
$('.scroll-container').removeClass('show');
$('.content-container').removeClass('no-scroll');
$('.overlay').removeClass('opacity');
}
The idea of the page is that you click on an image (in this case a red square), resulting in a hidden container showing, which can be scrolled through, containing more information and images about this image.
However, when you click one of the squares, and the container and overlay show, the other images (squares) move. It was suggested to me that in my show function I should try and keep track of the position my browser was in when this container opened. Then in my hide function, return the browser to that position.
Truth to be told, I am not good with JavaScript AT ALL, so I'm pretty much clueless as to how I should apply this. I'm having more issues with this webpage and I have to fix them fast, hence I'm asking again. Could anybody help me with this?
From what I can tell, your squares are moving around because of the .no-scroll class. If I remove it, everything appears to work correctly.
try this:
$('img').on('click', show);
$('.overlay').on('click', hide);
function show(){
$('.scroll-container').eq($(this).parent().index()).addClass('show');
$('.overlay').addClass('opacity');
}
function hide() {
$('.scroll-container').removeClass('show');
$('.overlay').removeClass('opacity');
}
In your show function, you can retrieve the scroll position before the Text is shown.
scrollHeight = $(document).scrollTop();
In your hide function, set the scroll position to the value you got previously.
$(document).scrollTop( scrollHeight );

Jquery dotdotdot only fired properly on window resize

In order to create an ellipsis after the second line within an element, I'm using jquery dotdotdot.
I'm using it with the google font 'source sans pro', however it doesn't work properly until after the window is resized.
this is how the text appears before the window is resized (the ellipsis is created too early)
this is how the text appears after the window is resized (the ellipsis is in the proper position)
(I'm assuming this is happening because the font isn't fully loaded on the page's load, but I could be wrong?)
This is the way that I call the jquery dotdotdot.
$(document).ready(function(){
doResize();
$(window).on('resize', doResize);
});
function doResize() {
$(".col-mid a").dotdotdot({
ellipsis: '...',
height : 40
});
}
How would I make it so it works properly? I've tried delaying the time that the dotdotdot function is called but this seems hacky, and like a bad solution.
Here's a jsfiddle of relevant code. (Weirdly enough it seems to work fine on jsfiddle, however it doesn't work on my computer.)
If it works after resize you can trigger resize on page load and solve your problem:
$(window).trigger('resize');
OR
Try embedding your code within:
$(window).load(function(){ });
Because thats how the code is displayed in the source of jsfiddle and you mentioned that its working in jsfiddle.Therefore give it a try.
Change your script code to:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function(){
doResize();
$(window).on('resize', doResize);
});
function doResize() {
$("a").dotdotdot({
ellipsis: '...',
height : 60
});
}
});//]]>
</script>
Try this:
$(document).ready(function(){
//doResize();
$(window).on('load resize', doResize);
});
in case anyone ends up here two years after this question was posted (...like I just did because I had the same problem):
You don't need to trigger a resize() function. You can solve this problem with pure CSS:
Just choose a different (websafe) fallback font for your webfont. The fallback font should render similar/ as wide as your webfont so that the text-elements take the same space before and after your webfont is fully loaded.
For 'Source Sans Pro', '"Times New Roman", Times, serif' is probably the best option. See http://www.w3schools.com/cssref/css_websafe_fonts.asp
The best and only solution I found is this:
jQuery(window).load(function(){
jQuery("a").trigger("update.dot");
});
This solution is taken by the code proposed for the next versione (1.7.5) of dotdotdot. You can see it here: Added functionality to use CSS classes without need of JS programming and added some more features
You can add option through dotodotdot by watch: 'window'
$(".content-class").dotdotdot({
ellipsis : '... ',
watch : 'window',
});

How do I get a div to change the max-height upon window resize?

code: http://jsfiddle.net/MDnrk/7/
for those too lazy to click the link:
$j(function(){
// need to fix some things that CSS doesn't seem to be able to fix (esp cross browser)
fix_drawer_height()
$j(window).resize(function() {
fix_drawer_height()
});
})
function fix_drawer_height(){
var new_height = document.body.offsetHeight - $j(".redline_info_scrollable").offset().top;
$j(".redline_info_scrollable").css({
'max-height': new_height + 'px;'
});
}
now, in my app, fix_drawer_height() gets called on DOM ready, but it doesn't seem to be called in teh JS fiddle.. so I'm not sure if that is the correct medium to show this problem.
Still not sure what would couse the window resize listener to not set the max-height appropriately. =\
The goal is to have the scrollable div always stretch to the height of the window.
Normally I'd just use height: 100% in the CSS, but that isn't really cross browser, and won't work with how the div is positioned in my actual app.
thanks!
You can use this:
function fix_drawer_height() {
$('.redline_info_scrollable').height($(document).height());
}
and add it in your onload or onresize;
working code: http://jsfiddle.net/MDnrk/13/

scrollTop() returns 0 in chrome

I want to check if page is scrolled after it has finished loading and I'm using this code:
$(document).ready(function(){
alert($(window).scrollTop());
});
It works well in Firefox but allways returns 0 in Chrome. Why is this?
Actually Firefox is the only browser that doesn't return 0 for $(window).scrollTop() on domReady or window.onload. Chrome, Safari and IE all return 0. The only safe way to get correct position of scrollbar on domReady is, as mentioned in another answer above, to set an event handler on window's scroll event as below:
$(document).ready(function(){
$(window).scroll(function() {
console.log($(window).scrollTop());
$(window).unbind('scroll');
});
});
$(window).scrollTop() will return 0 when the window isn't scrollable.
The chrome restores the pre-refresh scroll position once the DOM is loaded. So, getting scrollTop on scroll event instead of ready event will work.
I also had the problem that scrollTop() always returned 0 in Chrome, whether I used it on window, on document or on 'html,body'. I finally found out that css was the problem:
html, body {
height: 100%;
overflow-x: hidden;
}
Actually, I don't know exactly why because you can remove parts of this code and then it works again. Strange but problem solved ;)
Try the following code in a page that has some text and a link in the bottom of the page. Remember to have enough text or blank lines in order to make a scroll of the page until you can see the my button
$(document).ready(function () {
alert($(window).scrollTop()); // first load if you did not scroll = 0
$("#button").click(function () { alert($(window).scrollTop()); });
// hitting the button that is located on bottom of page
// - i had to scroll the page = xxx (68 in may case)
});
It is normal in your case to get 0 because the page is not scrolled, the offset between your position and the top of the page is 0.
I tried in Chrome, FF6, IE9.
I hope i was helpful.
I had the same problem but got fixed by adding the document declaration:
<!DOCTYPE html>

Categories