incorporating scrolling feed twitter style - javascript

I'm trying to make a twitter like system that scrolls through info slowly and then repeats.
I have it down(kinda) thanks to this tutorial. I have it working on its own and I added my own content but when I try adding it to my webpage it takes a c*** on me and throws all of my content all together at the top of the page. Any suggestions?
<div class="header">
<h2><span>Resteruant Consulting</span></h2>
<h1>Tasty Solutions</h1>
</div>
<div class="content">
<DIV align=center style="background:#fff">
<DIV id="tempholder"></DIV>
<SCRIPT language=JavaScript
src="dhtmllib.js"></SCRIPT>
<SCRIPT language=JavaScript
src="scroller.js"></SCRIPT>
<SCRIPT language=JavaScript
src="mydata.js"></SCRIPT>
<SCRIPT language=JavaScript>
//SET SCROLLER APPEARANCE AND MESSAGES
function runmikescroll() {
var layer;
var mikex, mikey;
// Locate placeholder layer so we can use it to position the scrollers.
layer = getLayer("placeholder");
mikex = getPageLeft(layer);
mikey = getPageTop(layer);
// Create the first scroller and position it.
myScroller1.create();
myScroller1.hide();
myScroller1.moveTo(mikex, mikey);
myScroller1.setzIndex(200);
myScroller1.show();
}
window.onload=runmikescroll
</SCRIPT>
<center><DIV id='placeholder'></DIV></div></DIV></center>
</div>
I have all the other javascript in the same directory. I have javascript enabled in my web browser, and it works on its on its just when I incorporate it into my index.html it gets screwy.

each headline has a "position:absolute", perhaps if you put those headlines in a div with
position:relative;
so the headlines at least will stay just in that div.
if I'm wrong pardon me, if I'm right let me know.

Related

Set page scroll position on page load of MVC view with javascript

I've been trying to automatically go to the bottom of the web page upon page load. On the get AND the post, in fact, no matter how the view has been called, it has to go automatically to the bottom of the page.
I want to do it with javascript.
Seemed like something simple, something I could find in here easily. Well this looks like it :
Set page scroll position on page load of MVC app
There is only one problem... The answer doesn't put the javascript solution in context. And without context... I have no idea where to put these line, no matter what I try...
I won't play all day to know how to accomplish this, so HERE'S A CONTEXT :
#model WhateverModelYouWant
#{
ViewBag.Title = "Formulaire de reprise";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
document.getElementById("ImportantStuff").scrollIntoView();
</script>
<h2> TITLE OF THE VIEW <h2>
<div> Lots of content here </div>
<div> Even more content here </div>
<div id="ImportantStuff"> Important stuff here </div>
<input type="submit" value="ImportantButton" >
Needless to say this doesn't make the page scroll anywhere... Thanks in advance.
ERROR :
In your example nothing can be scrolled anyway because everything is in the visible area. Apart from that mituw16 already gave you the right solution. Here is an example how to use the scrollIntoView function.
<script type="text/javascript">
function scrollToImportantStuff() {
document.getElementById('ImportantStuff').scrollIntoView()
}
window.onload = scrollToImportantStuff;
</script>
<h2> TITLE OF THE VIEW <h2>
<input type="button" onclick="document.getElementById('ImportantStuff').scrollIntoView()" value="Scroll ImportantStuff into View" />
<div style="height:500px;"> Lots of content here </div>
<div style="height:500px;"> Even more content here </div>
<div id="ImportantStuff"> Important stuff here </div>
This doesn't really have anything to with MVC. It is accomplished with javascript.
document.getElementById("ImportantStuff").scrollIntoView();
https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView

Set text after a three.js scene defined by a <div id="mainWindow">

I have coded a small Three.js animation that I put i following way in my HTML page :
<div id="mainWindow" class="popup_block">
<!-- Javascript for simulation -->
<script src="../temp/webgl-debug.js"></script>
<script src="../temp/three.min.js"></script>
<script src="../temp/Detector.js"></script>
<script src="../temp/TrackballControls.js"></script>
<script src="../temp/OrbitControls.js"></script>
<script src="../temp/dat.gui.js"></script>
<script src="./main_simulation.js"></script>
<br>
This is a test : I want to put text below the "div id="mainWindow", not above like here :<br>
How could I do that ???
</div>
where I handle the Three.js scene of "mainWindow" in main_simulation.js
Unfortunately, I can't get to put after </div> some text or other HTML elements : they are systematically put above the <div id="mainWindow">... </div> block
You can see this issue on the following link :
Can't put text below Three.js
Maybe this problem comes from the fact that I am loading JS scripts at the bottom of HTML page but I am not sure.
If I load JS scripts in <head> section, I can't make appear the Three.js scene.
Could anyone give me a trick to put text after the main div of Three.js ?
Regards
UPDATE 1 :
I have also tried with :
<div id="mainWindow" class="popup_block"></div>
<!-- Javascript for simulation -->
<script src="../temp/webgl-debug.js"></script>
<script src="../temp/three.min.js"></script>
<script src="../temp/Detector.js"></script>
<script src="../temp/TrackballControls.js"></script>
<script src="../temp/OrbitControls.js"></script>
<script src="../temp/dat.gui.js"></script>
<script src="./main_simulation.js"></script>
<br>
This is a test : I want to put text below the "div id="mainWindow", not above like here :<br>
How could I do that ???
But the problem is still present
UPDATE 2 :
Here's an illustration of my issue :
In HTML source, the text is located below the three.js div, but the rendering makes put it above.
UPDATE 3 :
First of all, its not really a matter of three.js, but there is still an important issue to address.
Whatever functions You have, either plain image positioning, or three.js placing the renderer in a div, It's easy to lose track of what is appended where.
It can happen when the html skeleton is being rather scarce, for most of the page is created in js. It's a bit unclear to anyone but the original developer, so he needs to keep track of what is going on. Imo this is a bit impractical.
I wouldn't create elements in the body in js, I'd rather append them to existing wrapper containers, so I could easily manage them with any css:
<div id="mainWindow"></div>
<div id="image"></div>
<div id="below"></div>
if You switch the target div from the body, to #image, You can rearrange them however You like, without making any changes in the js code, which could cause a chain of unpredicted behaviour.
Now the desired arrangement could be made using the position:relative; css property.

How do you display specific text onscreen using jQuery and HTML?

I'm new to Javascript. With the code below, I'm interested in displaying three values. The first problem that I've encountered is the document.write won't work. What am I typing in wrong? The other problem is that I'd like to display
the text that the first_div contains on the screen in the browser window. I believe that all of the divs in the first_div will show the text 'value.' How do I get this to display?
<html>
<head>
</head>
<body>
<div class= 'first_div'>
<p>Content</p>
<div class='comment'></div>
<div class='comment'></div>
<div id='pagination'></div>
</div>
<script type='text/javascript'>
document.write("Hello");
jQuery(function() {
$('#pagination').addClass('comment');
$('.first_div.comment').text('value');
$(document.body).append('hello');
});
</script>
</body>
</html>
Currently .first_div.comment is looking for an element with both classes. You want an element .first_div with a child element .comment. To do this, use a space to select all descendants (not just children) of what was prior to the space.
Your line of code would then look like this: $('.first_div .comment').text('value');
Learn more about CSS selectors here (this will help you for other similar problems): https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors#Information_Selectors_based_on_relationships

footer JS adjustment issues

Recently just used a piece of JS from another user question and answer and it serves to be quite good in terms of being a solution to the initial issue I had which was to have footer stick to bottom of viewport height even on a page which content doesn't fill whole page, but it now seems to have caused another issue.
On pages that need scrolling to view all content, the page ends at viewport height and does not allow scrolling which means portions of content cannot be viewed.
The code which i have used is below, credit for the code goes to claudix and was from his answer on this page:
How to make the web page height to fit screen height
<!--Code Starts-->
<body style="overflow:hidden; margin:0">
<form id="form1" runat="server">
<div id="main" style="background-color:red">
<div id="content">
</div>
<div id="footer">
</div>
</div>
</form>
<script language="javascript">
function autoResizeDiv()
{
document.getElementById('main').style.height = window.innerHeight +'px';
}
window.onresize = autoResizeDiv;
autoResizeDiv();
</script>
</body>
<!--Code Ends-->
Was wondering if anybody knew something i could add to that piece of javascript that would have the above code work for a page that does not have full content, however, when scrolling is needed, the JS code is disabled ?
Thanks !
Use this code in your head tag
<script type="text/javascript">
jQuery(document).ready(function(){
var docheight = jQuery(document).height();
var bodyheight = jQuery('body').height();
var bodywidth = jQuery('body').width();
/*alert(docheight+'--'+bodyheight);*/
if (bodyheight < docheight && bodywidth >= 1000) {
$(".footer-class-name").css('position',"absolute");
}
});
</script>
Try switching of the overflow:hidden; on the body tag as it is prevent content to be spead out.
From my understanding you want to create a one page site using your own custom scrolling techiques.
You could try adding slimScroll for jquery to create custom scrolling panels for your site while keeping everything in perspective without using the browser's scroll.
Just read a post form a blog. I've removed the JS code, it was good for anybody else that might need it, however, just want to make it clear i'm not saying anything bad about Claudix's JS code. However, I just used min-height: 100vh; on page container and now footer is always botton, even when there are no floating elements to clear and it solved both issues. Thanks ! :)

Showing a Div Once per visit

On my website I have a slider to only show on the Homepage. My home page looks something like this:
<body>
<div class="wrapper">
<div class="header"></div>
<div class="slider"></div>
<div class="maincontent"></div>
</div>
</body>
My Pages are the same layout, except I only want the Slider div to show on the first page. So when the user first arrives to the website, they can see the slider, but if they go to a different page, the slider is gone.
I was wondering if there was a way to do that with, jquery? Cookies? If anyone has any suggestions, please let me know how I would do this. Thanks!
Yes, there is a way to do this. In fact, there are multiple ways. You can do it both using Javascript and a server-side scripting language like PHP. I recommend using a server-side scripting language, because there's no point in adding an element to a page if it isn't used, while it does take up a tiny amount of bandwidth. Anyways, an example using both methods follows:
Using PHP:
<body>
<div class="wrapper">
<div class="header"></div>
<?php
if (!isset($_COOKIE['visisted'])) {
setcookie('visited', true, time() + 3600 * 24); // Save a cookie for 1 day
echo '<div class="slider"></div>';
}
?>
<div class="maincontent"></div>
</div>
</body>
And using Javascript:
<head>
<style type="text/css">
div#slider {
/* Hide the div */
display: none;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="slider"></div>
<div class="maincontent"></div>
</div>
<script type="text/javascript">
var cookie = document.cookie;
if (cookie.indexOf('visited=', 0) == -1) {
var expiration = new Date();
expiration.setDate(expiration.getDate()+1);
document.cookie = 'visited=1;expires=' + expiration + ';path=/';
var element = document.getElementById('slider');
element.style.display = 'block';
}
</script>
</body>
By the way, I assume this isn't your whole HTML page? Because obviously you should add a doctype, tags, etc.
Sure, you can use:
Cookies, that can be accessed from js
HTML5 WebStorage, which is a great place too, but works only on new browsers
If you aren't bound to browsers I'd recommend to use the HTML5 LocalStorage variable.
http://www.w3schools.com/html/html5_webstorage.asp
However if you are supposed to be browser independent (support IE6 etc.)
I would go with cookies or a database with visited IP's.

Categories