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',
});
Related
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);
I am having a problem with the SKrollr.js plugin for Parallax and smooth scrolling. Everything works fine except Bootstrap carousel's, and im sure any carousel for that matter. It's clearly a display:none problem when the plugin is setting itself up on load and can't see any of the .item classes. But I can't figure out how on earth to get Skrollr to see all of the slides/.item classes when it's rendering.
I even tried this kinda stuff. My Skrollr markup isn't the problem that code always works for me.
Skrollr Markup
data-10p-top-bottom="background-position-y: 100%;" data-bottom-top="background-position-y: 0%;"
CSS
.displaying {
display: block !important;
}
JS
var sk = skrollr.init({
forceHeight: false,
beforerender: function(data) {
$(".item").addClass('displaying');
},
render: function(data) {
$(".item").removeClass('displaying');
}
});
EDIT
I made a JSFiddle for it here or you can see it fullscreen for debugging here
Sorry I was being vague and general because I know my HTML is solid. Check the fiddle. The slider functions just fine it's Skrollr not being able to see the hidden slides at runtime that is the problem. I just need a better solution to solve this.
I'm guessing that you need to do a refresh since I notice it works if I resize the browser.
Try this code:
setTimeout(function () {
skrollr.get().refresh();
}, 0);
You can change the timeout to 1000 if necessary to ensure everything loads.
I have a responsive site using jQuery mobile.
At a certain size, I swap out the header and footer (moving from a mobile like look and feel to a more traditional design) by showing the high res header and hiding the low res one.
The problem that I'm faced with is that JQM's styles don't seem to apply to the elements that are hidden, so when I adjust the screen size then the styles are all messed up.
I tried this...
$(window).on('resize', function() {
$.mobile.activePage.trigger('create');
});
Which doesn't seem to do anything at all. From hunting around all the examples I've seen mention refreshing or triggering on specific elements, but I'm looking for something more page wide to allow me to use my media queries properly.
It doesn't do anything at all because you are calling trigger with incorrect parameter.
It should be:
$(window).on('resize', function() {
$.mobile.activePage.trigger('pagecreate');
});
Create will only enhance page content, pagecreate will enhance page header, content and footer.
Working example: http://jsfiddle.net/Gajotres/PMrDn/52/
Try something like:
$(window).on('resize', function()
{
jQuery.mobile.changePage(window.location.href,
{
allowSamePageTransition: true,
transition: 'none',
reloadPage: true
});
});
i am designing a site that adjusts itself to the window size, and i need to make the text size relative to it's container (a div). I searched about doing it with css, and found out that it is not possible. So i am trying with JavaScript, but i am not a JavaScript programmer. So i searched each piece of the code i needed and compiled it to this:
<script type="text/javascript">
$(document).ready(function() {
while(true) {
document.getElementById("text").style.fontSize = $("container").height();
}
});
</script>
(the "while" is to re-size it constantly, considering that the user might re-size the window)
I put the script in the "head" tag, and it doesn't work. I don't know if the script is wrong, or if it is not running. What am i doing wrong?
Also i want to put a delay in the end of the script, to avoid it running like crazy, but i don't know how to do that.
Thanks in advance,
Luca
Thanks to the answers, but nothing working.
I guess that the script is not running, what can be wrong??? Please help!
http://jsfiddle.net/AyRMC/
You can use viewport units:
.vw{
font-size:3vw;
color:red;
}
.vh{
font-size:3vh;
color:green;
}
.vmin{
font-size:3vmin;
color:blue;
}
Doesn't have full support quite yet, but IE10, Chrome, Firefox, and Safari all support it.
One downside (or possible upside) is that, at least in chrome, the text doesn't scale as the viewport is resized.
Compatibility: http://caniuse.com/viewport-units
You should try something like this instead (if I understand correctly what you want to do):
$(".container").each(function(){ //if container is a class
$('.text', $(this)).css({'font-size': $(this).height()+"px"}); //you should only have 1 #text in your document, instead, use class
});
or something more like this
$(window).resize(function(){
$('.text').css({'font-size': $('#container').height()+"px"});
});
If you mean that you are making a responsive site, then you can change the font-size based on document.documentElement.clientWidth inside of the window resize handler.
Also, you can use em units instead of pixels which are scalable and mobile-friendly.
CSS3 also has a new interesting "root em" unit :
CSS3 introduces a few new units, including the rem unit, which stands
for "root em". If this hasn't put you to sleep yet, then let's look at
how rem works.
The em unit is relative to the font-size of the parent, which causes
the compounding issue. The rem unit is relative to the root—or the
html—element. That means that we can define a single font size on the
html element and define all rem units to be a percentage of that.
http://snook.ca/archives/html_and_css/font-size-with-rem
Try this:
<script type="text/javascript">
$(document).ready(function() {
$(window).resize(function() {
document.getElementById("text").style.fontSize = $(".container").height();
// let container is a class
});
});
</script>
You can use the .resize() event handler which will only fire when the window is resized
var constant = [Some magic number]
$(window).resize(function() {
var fontSize = $(this).height()*$(this).width()*constant;
$(html).css("font-size",fontSize)
}
Using a constant to calculate the font size based on the new width/height
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
});