Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

row_height setting for responsive design #10

Closed
desmond86 opened this issue Apr 10, 2014 · 2 comments
Closed

row_height setting for responsive design #10

desmond86 opened this issue Apr 10, 2014 · 2 comments

Comments

@desmond86
Copy link

Hi there,
I am using the example 'nt_example1' to create a news ticker. Is it possible to customize row_height dynamically according to the screen resolution? For example, if the screen resolution 1024px, the row_height is set to be 100px. However, if the screen resolution is smaller than that, I would need around 150px for the row_height. Is there any way to change it based on the screen resolution?

Or is it possible to adjust the row_height according to the size of the content?

@risq
Copy link
Owner

risq commented Apr 15, 2014

Hi,
The plugin does not currently support fluid row height. However, you can achieve this very easily using updateOption method. Check this fiddle : http://jsfiddle.net/h7kxC/ (try to resize the viewport)

I just created a function which check the current window width and update the plugin's row_height :

function checkWidth() {
    if($(window).width() < 680){
        nt.newsTicker('updateOption','row_height','24');
        $('.newsticker').height(48);
    }
    else {
        nt.newsTicker('updateOption','row_height','48');
        $('.newsticker').height(92);
    }
};

This function is called on document ready.
Additionally, don't forget to call it on resize event :

$(window).resize(checkWidth);  

@risq risq closed this as completed Apr 15, 2014
@klentoy
Copy link

klentoy commented Jun 27, 2014

or use the "hasMoved" option like this for dynamic height:
hasMoved: function(){
var visibleHeight = $('.newsticker li:visible').height();
visibleHeight = visibleHeight - 1;
$('.newsticker').animate({'height': visibleHeight}, 100);
}
and also add this to the resize function

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants