Develop Reference

repeatable marquee that's optional based on text width

I've spent most of my morning trying to resolve how to create a scrolling marquee on an Angular app; my goal is when the dynamic text is longer than its viewport, it will scroll (repeating, meaning you don't have to wait for the entire title to scroll off the page before you see it again) but when it's short enough to display without being cut off in the viewport width, it does not scroll.
I like examples I'm seeing but need to combine them somehow and I am very beginner when it comes to adding any kind of javascript.
One is using jQuery and marquee:
$('.marquee').marquee({
duplicated: true
});
This one is great because it repeats the text and continues without it having to completely leave the screen to start again. But, my trouble comes when trying to figure out a way to add in javascript to figure out how wide that text will be; either to have it be static or scroll.
For some reason, I am unable to understand how to link to codepen or jsfiddle of the examples I've found that hit close to home. Hoping my inquiry above is enough information. I know commenters can be a bit rough—please be patient with me.

You could use text-shadow(to clone text) and animation if it is only about text.
JS will be necessary to get the width(from text lenght) of the piece to scroll and to update/insert css rule's values.
example inspired from your jsfiddle
function isElementOverflowing(element) {
var overflowX = element.offsetWidth < element.scrollWidth,
overflowY = element.offsetHeight < element.scrollHeight;
return (overflowX || overflowY);
}
// below css updated and injected . can be shorten and nicely rewritten
var element = document.getElementById('ov1');
if (isElementOverflowing(element)) {
var toscroll = element.scrollWidth;
element.style.textShadow = toscroll + 'px 0 ';
element.style.animation = 'marqueeme 5s infinite linear';
var csstyle = document.createElement('style');
csstyle.innerText = '#keyframes marqueeme {100%{ text-indent:-' + toscroll + 'px;}}';
element.appendChild(csstyle)
}
#marquee {
max-width: 15em;
overflow: hidden;
}
#ov1 {
white-space: nowrap;
margin: 0;
}
<div id="marquee">
<p id="ov1">
Yadda yadda overflowing text this line is too long oh noes!
</p>
</div>
example here is using text-indent within the animation, but negative margin-left or translateX will do the same visual.
Another example with
a text-shadow of different color
transform to see it working instead text-indent.
It also sets speed according to text length
# https://codepen.io/gc-nomade/pen/owPNZg

How to make scrollbar to see full content in below case?

see demo url of the framework i'm using: http://alvarotrigo.com/fullPage/examples/navigationH.html#secondPage
However,using almost same kind of code from above,
when I try to achieve below effect in which title text is excluded from slider. (title text to be static, and content is sliding)
jsfiddle url: http://jsfiddle.net/097wvnot/8/
I can't scroll to see all the content; what's the best code to achieve this effect?
if i want to use the top framework, must i do a lot of hack into its core functions?
if not hacking the top animation framework , what are other recommendations to this effect

Use an absolute positioned element for your title. Fullpage.js calculates the height of your content inside the slide elements. (as they are suppose to be full height...).
If you place anything outside any slide, it would have to be absoluted positioned.
Take a look at the solution I propose: http://jsfiddle.net/097wvnot/11/
I added the following style to your title:
#demo{
position:absolute;
top:50px;
margin: 0;
left:0;
right:0;
text-align:center;
}

It looks like the plugin is calculating the height of the fp-scrollable incorrectly. At least for your use case. I was able to get it looking good by just manually adjusting the fp-scrollable's height attribute to a smaller amount (obviously that is not a long term fix, just something I was doing for testing). I'm not sure if the calculating takes into account your font size, and things like that, so that might effect it.
If you want to hack on the plugin, generally the place you need to make your changes is fairly restricted, and wouldn't be too bad. From the github page. https://github.com/alvarotrigo/fullPage.js/blob/master/jquery.fullPage.js
All you need to do is fix the value being placed into the scrollHeight variable. I'm not sure exactly what it's not accounting for in the scroll height calculation (the scrollHeight needs to be smaller in your case, it's too big), but I think that's an exercise you can try your hand at first :) I've got to get to bed z.z
You also may need to mess with the calculation for the contentHeight, since ostensibly you'll be shrinking the scrollHeight, and the script only puts the scroll bar on there if the content is bigger than the scroll.
function createSlimScrolling(element){
//needed to make `scrollHeight` work under Opera 12
element.css('overflow', 'hidden');
//in case element is a slide
var section = element.closest('.fp-section');
var scrollable = element.find('.fp-scrollable');
//if there was scroll, the contentHeight will be the one in the scrollable section
if(scrollable.length){
var contentHeight = scrollable.get(0).scrollHeight;
}else{
var contentHeight = element.get(0).scrollHeight;
if(options.verticalCentered){
contentHeight = element.find('.fp-tableCell').get(0).scrollHeight;
}
}
var scrollHeight = windowsHeight - parseInt(section.css('padding-bottom')) - parseInt(section.css('padding-top'));
//needs scroll?
if ( contentHeight > scrollHeight) {
//was there already an scroll ? Updating it
if(scrollable.length){
scrollable.css('height', scrollHeight + 'px').parent().css('height', scrollHeight + 'px');
}
//creating the scrolling
else{
if(options.verticalCentered){
element.find('.fp-tableCell').wrapInner('<div class="fp-scrollable" />');
}else{
element.wrapInner('<div class="fp-scrollable" />');
}
element.find('.fp-scrollable').slimScroll({
allowPageScroll: true,
height: scrollHeight + 'px',
size: '10px',
alwaysVisible: true
});
}
}
//removing the scrolling when it is not necessary anymore
else{
removeSlimScroll(element);
}
//undo
element.css('overflow', '');
}

Changing grid depending on device orientation

I'm trying to change the size of divs depending of screen size.
If the phone is laying it changes the sizes of divs.
Example:
block is default: 330px width and 250px high on a 768x1280 screen resolution.
The factor is:
width: 330px; factor x 2,18
height: 250px; factor x 5,12
When i change my phone to laying the sizes should be:
width: 587px
height: 150px
which doesnt work in the first place, can someone tell my why not?
js:
var devicewidth = $( window ).width();
var deviceheight = $( window ).height();
var mbwsize = devicewidth / 2.18;
var mbhsize = deviceheight / 5.12;
var mbisize = mbhsize / 1.25;
$('#mainmenublok').css('width', mbwsize+'px');
$('#mainmenublok').css('height', mbhsize+'px');
$('#mainmenublok').css('background-size', mbisize+'px'+mbisize+'px');
dont get errors, it just keeps the content in the middle as 720px width (768 - offset)
I changed the main div already here:
$('#maintable').css('width', devicewidth+'px');
Will try to change window to document but can someone look at this?
With document it doesnt change either.
The calculation is correct if you look at the picture at the debug.
I also tried it in a function but that did not work.
Added a picture to explain what happens
explain:
debug:

Based on the HTML provided by the author in the comments
<div onclick="bb.pushScreen('timeline.html', 'timeline');"class="mainmenublok" id="blocktimeline" style="background-image:url(ico/timeline.png); background-size:200px 200px; background-repeat: no-repeat; background-position:center;">
<img id="pictimeline" src="ico/bbaction.png" width="50" height="50" style="display:none;">
</div>
and the js used as shown above, I suggest to use $('.mainmenublok').css('width', mbwsize+'px'); instead of $('#mainmenublok').css('width', mbwsize+'px');. Dots are used to indicate classes in CSS, as hashtags are used to indicate ID's.

You could use mediaqueries or device.js?

The way you are trying to achieve by script.... Is okay but in some browser it may give you bugs ... better you try with any of the css frameworks like twitter bootstrap its not really huge.... the your site will be responsive as according to your device....

advice on how to best to reveal additional content based on the contents height

I have a #banner that holds content, basically what i want to do is show a certain amount of the content and then have a more button that will show the rest of the content if clicked. This in turn will also animate the height of #banner, I have set the #banner height at 300px but want to find the height of the content #inner and animate this accordingly. At the moment I have the following version but reckon Im using a lot of #ids / to achieve the effect, can anyone advise how I can make this better?
Fiddle here: http://jsfiddle.net/43gTt/1/
Thanks
Kyle

I suggest you compute the height of the inner div and use that to animate.
var $tmpInner = inner.clone().appendTo('body');
var divHeight = $tmpInner.outerHeight();
$tmpInner.remove();
Below will compute the height of the innerDiv based on the content of the div.
Also, updated the css style for the banner to overflow:hidden so that you don't need separate animate for the banner.
DEMO
CSS:
#banner{background:#dedede;overflow: hidden; }
#outer{margin:0 auto;width:200px;}
#middle{height:200px;overflow:hidden}
#inner{width:200px;margin:0 auto;}
.entry{display:none;}
JS:
$(document).ready(function() {
var outer = $('#outer'),
middle = $('#middle'),
inner = $('#inner'),
/*innerH = inner.height(),*/
banner = $('#banner'),
more = $('#more');
var $tmpInner = inner.clone().appendTo('body');
var divHeight = $tmpInner.outerHeight();
$tmpInner.remove();
// animate banner and #middle to reveal additional content
more.on('click', function(e) {
middle.animate({
height: divHeight
}, 300);
/*banner.animate({
height: innerH
}, 300);*/
});
});
Note: I am not sure why you need that many wrappers div, but I presume that would be part of your HTML. Also I will leave the code cleanup to you.

How to create a fixed / sticky sidebar in CSS / JS?

I'm trying to create a website with main content area and a sidebar, something like here on Stack Overflow. The goal is that when you scroll down, the sidebar stays visible.
I have seen two approaches to this:
position:fixed;
JavaScript manipulation with the DOM
Approach no. 1, as far as I know, will have a problem when the viewport is smaller than the sidebar contents so I guess that can't be used reliably and JavaScript scripts that I have seen are usually animated or generally "slow" (you can see that there is redrawing going on after each scroll).
Can someone point out a JavScript library / CSS approach that would not suffer from the aforementioned issues?
Edit: an example would be this page but with the sidebar sticking to the top without an animation and correctly handling the situation when the sidebar is higher than content / viewport.

I don't like heavy JS solutions, so important thing to ask is - preferred compatibility. In IE8+ it is possible instead of
var $window = $(window),
$sidebar = $(sidebar);
$window.on('resize', function(){
$sidebar.height($window.innerHeight());
});
$window.resize();
do something like this (pure CSS solution):
#sidebar {
position: fixed;
left: 0; /* or right */
top: 0;
bottom: 0;
overflow: auto;
}
When you have top&bottom / left&right value at the same time, box will be stretched. (JSFiddle demo)

Got it. It is Javascript based, but I'm sure that's nothing heavy and even IE8 should solve it pretty fine.
var top = $('#sidebar').offset().top;
var height = $('#sidebar').height();
var winHeight = $(window).height();
var gap = 10;
$(window).scroll(function(event) {
var scrollTop = $(this).scrollTop();
// sidebar reached the (end - viewport height)
if (scrollTop + winHeight >= top + height + gap) {
// if so, fix the sidebar and make sure that offset().top will not give us results which would cancel the fixation
$('#sidebar').addClass('fixed').css('top', winHeight - height - gap + 'px');
} else {
// otherwise remove it
$('#sidebar').removeClass('fixed').css('top', '0px');
}
});​
demo

You could catch client window's height and giving it to your sidebar like this :
var sidebarHeight = $(window).innerHeight();
$('#sidebar')​​​​​​​​​​​.css('height',sidebarHeight);​​​​​​​​​​​​​
With the proper CSS for the sidebar :
#sidebar {
position: fixed;
right: 0;
top: 0;
width: 200px;
overflow: hidden;
}
Here is a working JSFiddle.
You could also watch for window resizing to avoid a mess on resize :) Here is the way to go with jQuery
Good luck

Not sure if you have this figured out but I have created a contained sticky sidebar jQuery plugin. It's really simple and allows you to invoke with just one line of jQuery. Take a look here: http://mojotech.github.com/stickymojo/
It starts by position: fixed; then uses javascript to handle any resizes, scrolls and even allows you to specify a footer element that it should not intersect. By combining these approaches you will get a smooth looking fixed element. Plus, we made it easy for you.

Code and demo here: http://closure-library.googlecode.com/svn/docs/class_goog_ui_ScrollFloater.html