I have an html page that is displayed on a television screen sort of like digital signage. Because of this, everything that is on the page has to be displayed without any user input. I have some records stored in a mySQL database that are displayed in a list format and what I would like to do is when the list gets to big to be displayed, it scrolls up (maybe one line at a time) similar to how a scrolling marquee works.
My ideas on how to do this are fragmented at best, I was hoping someone could point me in the right direction.
btw, I know using the marquee tag is "evil" to a lot of developers, however in this case because there is no user input, I don't see any other way.
Edit: What I had in mind was to somehow get the div height and then use an if statement to trigger a marquee when the height exceeds a predetermined size.
Edit: Here is what I've got so far, using JavaScript to figure out the div height...
<script type="text/javascript">
function divHeight()
{
var height = document.getElementById("list").offsetHeight;
if (height > 500)
{
activate marquee effect.
return;
}
else
{
don't activate marquee effect.
return;
}
}
</script>
Then...
<body onLoad="divHeight()">
<div id="list">
my list goes here
</div>
</body>
Look at this page
http://www.webdesignbooth.com/create-a-vertical-scrolling-news-ticker-with-jquery-and-jcarousel-lite/
They did it using jcarousel lite. I would have written an example by myself but I found this good example first saving me from do it ;)
Ok, I figured out a nice way to do this with very little coding. It uses JavaScript to alter the div contents if the size is exceeded. I've got the text that I want to scroll inside div id="scroll" and that div is populated with my data from the mySQL database using php. Here is the script:
<script type="text/javascript">
var div = document.getElementById("scroll");
var height = div.offsetHeight;
var content = div.innerHTML;
if (height > 500)
{
div.innerHTML = "<marquee direction=\"up\" scrollamount=\"2\" height=\"500px\" onfinish=\"redirect()\" loop=\"1\">" + content + "</marquee>";
}
function redirect()
{
refresh=window.setTimeout(function(){location.href=""},0);
}
</script>
Since this application is for digital signage, I have it redirect once the full marquee content has been displayed, that's why I have onfinish="redirect" and then a function to redirect.
Hopefully this will help someone out, I know I spent a lot of time scratching my head over it.
Related
I'm a pure student's beginner, right now I'm trying to create an adaptive menu for my project, but I need to change the color of my background because white on white is a little bit problematic.
What I tried is to create a script in order to add a class 'scroll' to my 'nav' when I'm scrolling down, and removed it when I'm going back to the top.
But as I said I'm a beginner, and it seems I did something wrong with either my script or my CSS.
Can you help me to understand how where I did something wrong?
Thanks for the help !
PS: Sorry for my english I did my best.
`https://codepen.io/Raz7/pen/zYKoJzY`
it's completly messed up, probably due to all the image I put in.
In your script tag you are using a JQuery Selector "$" but you did not add the JQuery library.
To keep things simple I will use the built-in querySelector from the document object and Vanilla Javascript.
The following code will do what you want:
let timeout;
window.addEventListener('scroll', function (e) {
// If there's a timer, cancel it
if (timeout) {
window.cancelAnimationFrame(timeout);
}
// Setup the new requestAnimationFrame()
timeout = window.requestAnimationFrame(function () {
// Run our scroll functions
let nav = document.querySelector('nav');
if (document.querySelector('header').getBoundingClientRect().top !== 0) {
nav.classList.add('scroll');
} else {
nav.classList.remove('scroll');
}
});
}, false);
To actually know what the distance to the top is you need a point of reference, in this script I used the header element as a point of reference since the header is relative to the body tag. If the header distance to top is not 0 then add the scroll class to the nav element else remove it. You can see also a timeout and requestAnimationFrame, this helps de-bouncing the scroll event.
Instead of using the JQuery Library, if you are a beginner I suggest learning about Vanilla Javascript and the DOM.
https://www.w3schools.com/js/js_htmldom.asp
In a web page I have an input field and a div that is fixed to the bottom of the window (with these CSS properties: position:fixed; and bottom:0;
I made a Codepen to show what I'm talking about: https://codepen.io/anon/pen/xpQWbb/
Chrome on Android keeps the div visible even when the soft keyboard is open:
However, Safari on iOS seems to draw the soft keyboard over the fixed element:
(I should mention I'm testing on the iOS simulator on my Macbook, because I don't have a working iPhone)
Is there a way to make iOS Safari keep the element visible even when the soft keyboard is open, like how Chrome does it?
I recently ran in to this problem when creating a chat input that should stay fixed at the bottom of the page. Naturally the iOS keyboard displayed on top of the chat input. Knowing the exact keyboard height seems more or less impossible. I embarked on a quest to find a solid value to base my calculations on so i can manually position the chat input container above the keyboard. I wanted to find the actual "innerHeight" value, in other words the currently visible area of the webpage. Due to how the iOS keyboard works, the only way to get that value with the keyboard open seems to be to scroll to the very bottom of the page, and then take a sample of "window.innerHeight".
So, i set up an event listener on my input field on 'click' (since on 'focus' caused a lot of issues for me). This opens the keyboard, which takes a while, so after i set a timeout for 1000ms to make sure (hopefully) that my keyboard is fully open. After 1000ms i quickly scroll to the bottom of the page with javascript, save the value of "window.innerHeight" in this state, and scroll back to where i was. This gives me the actual height of the visible area on the screen.
It seems like the browser window is placed behind the keyboard until you scroll to the very bottom, in which case the whole window 'scrolls up' and the bottom is placed at the top of the keyboard view.
Once i have this value i use currently scrolled value (window.scrollY) plus the value i saved minus the height of my absolute positioned element to determine where to place it. I opted to also hide the input while scrolling since it's flicking around quite a bit. Another downside to this is that you get a quick flick of the page when it does the measurement at the bottom.
Another thing i couldn't solve was the variable height of the address bar. I just made the input a bit higher than i needed so it would have some "padding" at the bottom.
var correctInnerHeight = window.innerHeight;
var isFocused = false;
var docHeight = $(document).height();
var input = $('.myInput');
input.click(function(e){
isFocused = true;
input.css('position', 'absolute');
// Wait for the keyboard to open
setTimeout(function(){
docHeight = $(document).height();
var lastScrollPos = $(document).scrollTop();
// Scroll to the bottom
window.scroll(0, $(document).height());
// Give it a millisecond to get there
setTimeout(function(){
// Save the innerHeight in this state
correctInnerHeight = window.innerHeight;
console.log(correctInnerHeight);
// Now scroll back to where you were, or wish to be.
window.scroll(0, lastScrollPos);
fixInputPosition();
// Make sure the input is focused
input.focus();
}, 1);
}, 1000);
});
input.on('blur', function(){
input.css('position', 'fixed');
input.css('top', 'auto');
input.css('bottom', '');
isFocused = false;
});
$(window).scroll(function(){
fixInputPosition();
});
function fixInputPosition(){
if(isFocused){
var offsetTop = ($(window).scrollTop() + correctInnerHeight) - input.height();
offsetTop = Math.min(docHeight, offsetTop);
input.css('top', offsetTop);
input.css('bottom', 'auto');
}
};
body, html{
margin: 0;
}
html{
width: 100%;
height: 2000px;
}
.myInput{
position: fixed;
height: 30px;
bottom: 0;
width: 100%;
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' class='myInput'>
Check out this thread, it talks about a work around that may be more feasible in terms of code. In brief it talks about using the height of the keyboard to move the content into view. All be it a bit hacky it may be difficult to pin down the exact height of the keyboard across devices.
Unfortunately, due to the nature of the IOs Safari keyboard it's not part of the browser viewport so cannot be referenced as you would do typical elements.
#Bhimbim's answer may a good shot too.
Regards,
-B
i experienced this before. What i did back then was :
Make a listener when keyboard is hit.
When keyboard is hit resize you webview's height with screen height - keyboard height.
To do this trick you need to make sure that you html is responsive.
I can show more code in the IOS side, if you're interested i can edit my answer and show you my IOS code. Thank you.
Hi again, sorry, i was mistaken, i thought you were creating apps with webview inside. If you still wanna do this by listening the keyboard i still have work around for you. It may not the perfect way, but i believe this will work if you want to try. Here my suggestion :
You still can have listener from webpage when the keyboard is up. You can put a listener on your textfield by jquery onkeyup or onfocus.
Then you will know when the input is hit and the keyboard will show.
Then you can create a condition in your java script to manipulate your screen.
Hope this give you an insight friend.
#Beaniie thank you !.
Hi Andreyu !. Yes correct, we can not know the keyboard height, not like my case with WebView, I can know the keyboard height through IOS code. I have another work around, not so smart, but might work. You can get the screen size and compare to array of IOS device screen size. Then you might narrowed down the keyboard height by surveying through IOS devices. Good luck friend.
Try using position:absolute and height:100% for the whole page.
When the system displays the keyboard,it plTaces it on top of the app content.
One way is to manage both the keyboard and objects is to embed them inside a UIScrollView object or one of its subclasses, like UITableView. Note that UITableViewController automatically resizes and repositions its table view when there is inline editing of text fields.
When the keyboard is displayed, all you have to do is reset the content area of the scroll view and scroll the desired text object into position. Thus, in response to a UIKeyboardDidShowNotification, your handler method would do the following:
1.Get the size of the keyboard.
2.Adjust the bottom content inset of your scroll view by the keyboard height.
3.Scroll the target text field into view.
Check the Apple developer's guideline to learn more:https://developer.apple.com/library/content/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html
I'm using a bootstrap 3 fluid grid to display thumbnails, and I love how the images scale in size as the browser is resized. The downside however, is a "big bang" effect when each page is loaded. That is, the grid begins collapsed then grows as images are added. I imagine a simple fix is to hardcode image sizes, but this would lose the scaling benefit I believe.
One attempt to fix this was to load a transparent placeholder image right before each thumbnail, which would of course be cashed on the first page of results and thus expand the grid faster. On callback for thumbnail loaded event, I remove the placeholder. This seems to help, but other times I still see the shifting as badly as before. In addition, with a slow connection you can actually for a moment see the real thumb below the placeholder.
<script type="text/javascript">
$(function(){
// For each thumbnail, insert a placeholder image.
// Once the thumb is loaded, remove the placeholder.
$("[id^=thumb-]").each(function(i, thumb) {
var $thumb = $(thumb)
var imgTag = "<img id='ph-" + (i + 1) +
"' class='placeholder' src='{% static "img/placeholder.png" %}'/>";
$thumb.parent().prepend(imgTag);
var $holder = $thumb.prev();
function loaded() {
$holder.remove();
}
if (thumb.complete) {
loaded();
} else {
$thumb.on('load', loaded);
$thumb.on('error', function() {
console.log('Error with thumbnail placeholders.');
});
}
});
});
</script>
Regarding compatibility, I'd like to at least have a usable site with older browsers, but it doesn't have to be perfect.
I'm not as interested in fixing my Javascript solution above as I am the best solution overall.
Please look at the live beta site here to help diagnose. I attempted a jsfiddle, but couldn't quite reproduce it. I will paste more context into the question once we understand what was wrong.
In this case, I would recommend adding the <img> tag to the plain HTML. Then set the src in your javascript function.
You'll also need to set height and width attributes on the <img> tags so their space is preserved, to prevent redrawing the page after the images are loaded. You could do this with a simple javascript function that determines the window.width and then sets the height and width attributes.
Something like this.
I have this complex HTML Layout:
http://jsfiddle.net/5RgjL/2/
As you can see, messages are anchored at the top of the #messages container.
I want it so they are anchored at bottom, so the first message displayed will be at bottom, and not at the top.
Also when resizing the page the view inside the scrolling box must slide up from bottom.
It is hard to explain, i will make you understand with an example:
Populate messages inside the box, till is full and there is the scroll bar.
Try to resize the entire window from bottom, you can see that the message on bottom will be covered. i do not want this, but instead, slide up from bottom.
I tried many things, like to absolute positioning the #message container, but i run into other problems and i cannot get it to work like i want.
I need some help from someone really experienced in HTML/CSS.
If you are familiar with the Facebook messages page, you will understand what i'm trying to do.
PS: Some CSS styles are applied with javascript, because i generate page content dinamically, and only in this page i need those styles.
If I understand correctly then setting an absolute bottom position for the messages until there are more messages than vertical space will solve the first requirement of new messages appearing at the bottom.
This requires a CSS and JavaScript change:
CSS
#messagesWrapper {
position:absolute;
bottom:0;
}
JavaScript
var $messages = $('#messages');
var $messagesWrapper = $('#messagesWrapper');
var $messagePageContent = $('#messagePageContent');
function populateMessages(){
var newMessage = $('<div id="msg-'+i+'" class="aMessage">Another Message<br>Message ID: '+i+'</div>');
i++;
newMessage.hide().appendTo('#messages').stop().fadeIn(400);
if ($messages.height() >= $messagePageContent.height()){
messagesWrapper .css({position:'static'});
$messagePageContent.stop().animate({ scrollTop: $messages.outerHeight() }, 700);
}
}
The scrolling also needs to occur if then window is resized, so attaching a handle to the resize event is also required.
$(window).resize(function() {
$messagePageContent.stop().animate({ scrollTop: $messages.outerHeight() }, 700);
});
However, this is not good enough because the height calculation is missing which resets the CSS position to its default value. This is required for the enscroll jQuery plugin (and I suspect any sort of scrolling) to work.
But we can simply refactor and move all of the code into a common function, for example:
var $messages = $('#messages');
var $messagesWrapper = $('#messagesWrapper');
var $messagePageContent = $('#messagePageContent');
function populateMessages(){
var newMessage = $('<div id="msg-'+i+'" class="aMessage">Another Message<br>Message ID: '+i+'</div>');
i++;
newMessage.hide().appendTo('#messages').stop().fadeIn(400);
scrollMessages();
}
function scrollMessages() {
if ($messages.height() >= $messagePageContent.height()){
$messagesWrapper.css({position:'static'});
$messagePageContent.stop().animate({ scrollTop: $messages.outerHeight() }, 700);
}
}
$(window).resize(scrollMessages);
This is the code I used in this demo. It's probably not the best solution, I was looking at using -webkit-transform: scaleY(-1) to flip the container and then flip the messages back but it messed up the scrolling (i.e. it was backwards!). There might be a better solution using CSS transforms out there.
You can have them added to the bottom by applying this style to your messages id:
position: absolute;
bottom: 0;
Also, if you want the images to add to the top of the list instead of to the bottom you can use prependTo() instead of appendTo().
I'm not sure what exactly you are asking for on the scrolling, so if you could give a bit more info I will update my answer.
I am creating a site in flash that is reading in entries from a database. I want the swf to expand downward on the html page so the user can use the browser scroll bars to see all the content. I don't want to paginate everything into a 800 px high swf or something - I want the page to expand just like it would if it were html. Possible?
We do exactly that in a private project. We have a function that uses ExternalInterface.call (http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/external/ExternalInterface.html):
if (ExternalInterface.available) ExternalInterface.call('resizeScene', newHeight)
to call a javascript function which simply resizes the div element:
function resizeScene(newHeight)
{
document.getElementById('website').style.height = parseFloat(newHeight) + 'px';
}
You may also want to investigate
http://livedocs.adobe.com/flex/3/langref/flash/display/Stage.html#align
and
http://livedocs.adobe.com/flex/3/langref/flash/display/Stage.html#scaleMode