|
JavaScript - Scrolling Text Wrapped Around Fixed Position Divs
I'm trying to find a script that will scroll text past fixed position sandbag divs.
I want the text to flow around an image as it scrolls. It's easy to do the wrap around the image part. I can't seem to find anything that will continue wrapping the content of your site around the fixed background as you scroll though. Did that make sense? Similar TutorialsI'm new to javascript and am not sure why this works in firefox and not chrome. I am trying to create a script that keeps an object fixed horizontally while bing positioned absolute vertically. if I replace the toPP variable in document.getElementById('fire').style.top = toPP; with say '50px' it will move the element down 50 pxs, but how I have it currently it doesn't do anything in chrome Code: <script type="text/javascript" >
window.onscroll = function()
{
if( window.XMLHttpRequest ) {
var x = 0 -document.documentElement.scrollTop;
var toP = String(x);
var toPP = toP + "px";
document.getElementById('fire').style.position = 'fixed';
document.getElementById('fire').style.top = toPP;
}
}
</script>
I need to convert a position:fixed element to position:absolute when the user resize their browser window below 1000px. Right now it does nothing. The element always keeps the fixed positioning even after resizing the window. Here's what I have right now: Code: <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<base href="http://www.area51entertainment.co/" />
<title>Emoto <?php echo "$section"; ?></title>
<meta charset="UTF-8" />
<meta name="verify-v1" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="Andrew McCarrick" />
<meta name="robots" content="index, follow" />
<style type="text/css">
body,html {
background: #FFFFFF; /* Old browsers */
color: #000000;
font-family: Verdana;
margin-right:auto;
margin-left:auto;
max-width:1000px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
</style>
<link rel="stylesheet" href="emoto/style.css" media="screen" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="http://www.area51entertainment.co/TouchIcon.png" />
<link rel="apple-touch-icon-precomposed" href="http://www.area51entertainment.co/TouchIcon.png" />
<link rel="image_src" href="./logo.png" />
<script language="javascript" src="emoto/float.js"></script>
</head>
<body>
<div class="wrapper">
<div id="header_float">
<div class="header_wrapper">
<div class="logo">
Picture
</div>
<div class="links">
Home | Settings | Notifications | Requests | Messages | Search Bar
</div>
<div class="links_right">
Profile Link/Sign-Out
</div>
</div>
</div>
<div class="content_wrapper">
Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 T
est2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2
</div>
</div>
</body>
</html>
style.css Code: a:link {color: #FFFFFF; text-decoration: none;}
a:visited {color: #FFFFFF; text-decoration: none;}
a:active {color: #FFFFFF; text-decoration: none;}
a:hover {color: #3399FF; text-decoration: none;}
.wrapper{
min-height: 2000px;
min-width: 1000px;
}
#header_float{
width: 100%;
min-width: 1000px;
height: 35px;
left:0;
right:0;
top:0;
position: fixed;
background: #49963A;
z-index: 1000;
}
.header_wrapper{
width: 1000px;
height: 35px;
margin-right:auto;
margin-left:auto;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
color: #FFFFFF;
}
.logo{
float: left;
width: 150px;
height: 25px;
font-size: 26px;
position: relative;
top: -1px;
left: 8px;
}
.links{
float: left;
width: 670px;
height: 25px;
position: relative;
top: 7px;
}
.links_right{
float: right;
width: 180px;
height: 25px;
position: relative;
top: 7px;
}
.content_wrapper{
position: relative;
top: 35px;
width: 995px;
min-height: 450px;
}
img{
border: 0px;
}
float.js Code: if (screen.availWidth<=999)
document.getElementById('header_float').style.position = 'absolute';
else
document.getElementById('header_float').style.position = 'fixed';
Hi, i've been searching this for a while now. I need to make a website for a school exercise and i'm looking for the next thing: i have 2 rows of 4 iframes on my site, which shows an image. u can combine these images by scrolling the iframes. but what i want is that it scrolls fixed. i have a preview of this right he http://toliademidov.ru/p/ i just need to know how to make it not scroll, but 'switch' to a next piece of image by scrolling. Thanks!! Mathieu I have created a lightbox for user display on my site. The lightbox is triggered by an onclick link. Works great but I would like to make one switch to it. I would like the lightbox to appear position:fixed; top:10px; onclick. Then if the user scrolls I would like the lightbox to appear position:absolute; top:10px; You can see an example of this here on ESPN's website http://search.espn.go.com/first-take/videos/6. If you click any video it appears position fixed onclick but then position absolute on scroll. This is what I have so far. It shows it all position fixed onclick as I desire, but stays that way on scroll. PHP Code: <a href = "javascript:void(0)" onclick = "document.getElementById('light<?php echo $count;?>').style.display='block'; document.getElementById('light<?php echo $count;?>').style.position = 'fixed'; document.getElementById('light<?php echo $count;?>').style.top = '10px'; document.getElementById('fade<?php echo $count;?>').style.display='block'"> ... [link] ... </a> PHP Code: <div id="light<?php echo $count;?>" class="log-lightbox-content-wrapper"> ... [lightbox content] ... </div> PHP Code: <style> .log-lightbox-content-wrapper {display: none; position:absolute; top: -45px; left: 50%; margin-left: -456px; width: 900px; padding: 16px;background-color: white;z-index:1002; overflow: auto; border-color:#666; border-radius:5px; border-style:solid; border-width:5px; min-height:600px; height: auto !important; height:600px;} </style> Progress: http://instride.info/admin - Click tab that says log - Then click any log post to view light box Sorry if I'm describing this wrong. But I was wondering if there was any premade dropdown menu which opens based on what position you are on the page. For example, when I'm on the top of the page and hover the mouse over the dropdown menu, the menu opens upward instead of downward because the navigation is mid-screen. But if I was to be more than halfway across the screen and still see the navigation as it was on top of the screen and hover the mouse over it, the dropdown menu opens downward as oppose to up. I hope I explained that right or at least if it sounds right to someone. Any help would be greatly appreciated. If you could direct me to a resource you may know of. Thank you for your time. I am using this code to control scrolling of 2 divs at the same time, but i want to be able control 3 (or more) divs at the same time.. what am i missing? JS in head: <script type="text/javascript"> function scrollDiv(controllingElement, controlledElementID) { var controlledElement = document.getElementById(controlledElementID); controlledElement.scrollTop = controllingElement.scrollTop; controlledElement.scrollLeft = controllingElement.scrollLeft; } </script> JS in body applied to parent / controlling div: <div id="master" onscroll="scrollDiv(this,'top');" > ...</div> Names of the 2 divs controlled by "master": <div id="top" >...</div> <div id="bottom" >...</div> Anyone have any idea why my position:fixed is being recognized by IE??? It's an embedded link: <font face="gill sans"><a href="#sect1" title="test" style="position:absolute; top:100px; left:40px; text-decoration: none; color: gray; font-size: 15; target="_blank">OUR GOALS</a></font> It works fine in Safari and Firefox... geesh! Hi. I'm trying to figure out a way that, when a user scrolls down the page and hits the footer (#footer), a div's CSS position changes from fixed to absolute. The main reason is because I don't want the div that if fixed to go over the footer - I want it to just stop scrolling with the page and stay put. I'd assume this is done with JavaScript, but I have no idea where to start. If someone could give me a basic code that I can then modify that would be awesome! Thanks! Can anyone tell me Got any javascript that can support the effect of following link http://www.markinns.com/articles/ful...uee_on_twitter but i want vertical text ...this link is for holizontal I dont wnat to use marquee, because got limitation Hello, I'm Chris, welcome everyone. I'm in a need of help. I'm writing application that displays messages from users. This messages are kept in external XML file and every time user post a new message this XML document is appended. What I want to do is to display all messages at the bottom of screen. Messages have to slide horizontally in one line. To do that I used this code: Code: horizontalScroll.js:
var scrllTmr;
window.onload = function(){
document.getElementById('scroll').style.overflow = 'hidden';
document.getElementById('scrollme').style.float = 'left';
document.getElementById('scrollme').style.position = 'relative';
cw = parseInt(document.getElementById('scroll').offsetWidth/2);
w = parseInt(document.getElementById('scrollme').offsetWidth/2);
lft = cw + w;
document.getElementById('scrollme').style.left = lft + "px";
scrollStep(cw,w,lft);
}
function scrollStep(cw,w,lft){
if(lft == w * -1)
lft = cw + w;
document.getElementById('scrollme').style.left = lft + "px";
if(scrllTmr)
clearTimeout(scrllTmr);
scrllTmr = setTimeout('scrollStep(cw,w,' + (lft - 1) + ')',10);
}
index.html:
<div id="scroll"><div id="scrollme">
<h1 style="white-space: nowrap;">Lets scroll this right here 1 | Lets scroll this right here 2 | Lets scroll this right here 3 | Lets scroll this right here 4 | Lets scroll this right here 5 | Lets scroll this right here 6 | Lets scroll this right here 7 | Lets scroll this right here 8 | Lets scroll this right here 9 | Lets scroll this right here 10 | Lets scroll this right here 11 | Lets scroll this right here 12 | Lets scroll this right here 13 | Lets scroll this right here 14 | Lets scroll this right here 15 | Lets scroll this right here 16 | Lets scroll this right here 17 | Lets scroll this right here 18 | Lets scroll this right here 19 | Lets scroll this right here 20
</h1></div></div>
The problem with that code is that at 1/3 length of text it starts from beginning and this is wrong. The text have to scroll to the very end and then start to scroll from beginning again. Another thing, that I'm unable to deal with is refreshing/reloading the content from XML file. What I need to do is to check if XML was changed/appended and if it was then I have to add this added message to text that scrolls horizontally and view it at the end of horizontal text. I'm pretty sure I have to use Ajax here. Also, if text from XML file will be added to horizontal text page cannot refresh and start scrolling from beginning, but instead of that if have to append horizontal text and continue to scroll showing appended message at the end. Any advices, please? Thanks, Chris HI I want to make a news section on right side of my webiste's main page, it can in dreamweaver, someone can help me in this regard thanks zami Sup yo, I need to add text in a <textarea>, but i can only append text at the end. Is there any way to add text to where the cursor is currently at? Code: function addCharm(var1) {
var newtext = var1;
document.lolform.inputtext.value += newtext;
}
And below i has sum buttonz that uses that function. So, again, how can I add text to where the I-beam is currently, instead of at the end? Thanks in advance. I would like to know how to do things. 1. I would like to know how i would code a javascript so if i edit the text inside of either a certain div or in the javascript document itself (which ever would work, would like to have it take the text from a div but not too picky) and then have it write that text in other parts of the same page and other pages by like putting a javascript code in it's place or however you would do it. Basically if i write "hello world" in the div/javascript document, it will write "hell world" in multiple places just from me editing that one part. ok so help with this would be awsome. My second thing. 2. I would like to take and use some javascript function, such as document.write or what ever to do pretty much the same thing as my first thing as my first problem, but with a div, for like a navigation bar or etc. So any help would be greatly appreciated! =) THANKS! This is compound. Code: //compound interest
function checkNumber2(input, min, max, msg)
{
msg = msg + " field has invalid data: " + input.value;
var str = input.value;
for (var i = 0; i < str.length; i++)
{
var ch = str.substring(i, i + 1)
if ((ch < "0" || "9" < ch) && ch != '.')
{
alert(msg);
return false;
}
}
var num = parseFloat(str)
if (num < min || max < num)
{
alert(msg + " not in range [" + min + ".." + max + "]");
return false;
}
input.value = str;
return true;
}
function computeField2(input)
{
if (input.value != null && input.value.length != 0)
input.value = "" + eval(input.value);
computeForm(input.form);
}
function computeForm2(form)
{
if ((form.payments.value == null || form.payments.value.length == 0) ||
(form.interest.value == null || form.interest.value.length == 0) ||
(form.principal.value == null || form.principal.value.length == 0))
{
return;
}
if (!checkNumber(form.payments, 1, 480, "# of payments") ||
!checkNumber(form.interest, .001, 99, "Interest") ||
!checkNumber(form.principal, 0, 10000000, "Principal"))
{
form.payment.value = "Invalid";
return;
}
var i = form.interest.value;
if (i > 1.0)
{
i = i / 100.0;
form.interest.value = i;
}
i /=12;
var pow=1;
for (var j=0; j < form.payments.value; j++)
pow=pow * (1 + i);
money="" + .01* Math.round(100*(form.principal.value * pow * i) / (pow - 1));
dec=money.indexOf(".");
dollars = money.substring(0,dec);
cents=money.substring(dec+1,dec+3);
cents=(cents.length < 2) ? cents + "0" : cents;
money=dollars + "." + cents;
form.payment.value = money;
}
function clearForm2(form)
{
form.payments.value = "";
form.interest.value = "";
form.principal.value = "";
}
//STOP compound interest
I'm not a mathmatician (or english major). what do I need to change to make this for fixed interest? Thanks in advance and I didn't know she was your sister in advance. First off by let me stating that I am not a great web devloper nor am I a good with css / javascript. I am creating this website for a friend of mines company and I have one problem. The problem is that the navigation menu on the right side will not remain fixed how i want it to be. I spoke with many people and they all said that this cannot be done with css considering your layout and because it needs to dodge the headers and the footer. I basically want this div (sidenav on the right) to scroll along the page as users scroll up or down but it can not interfere with the header or footer. Could someone please post an example or if anyone has the time please tell me exactly what code I need to add to get this to work? keep in mind that i do not want the right side navigation to go over the content or out of the wrapper. I want it to stay in the same position in all aspects - left / right / top / bottom. Here is a link to the site http://www.collisionbodyworks.com/Pl...tic/index.html Any help would be greatly appreciated. Thank you in advance fixed it.
Hello everyone! I just thought this might require some javascript, so I posted this here. Anyway, how do I create an element that is absolutely positioned first, and then, when it goes to the top of the page, it becomes fixed? Thanks Lucas Hi there, I was wondering of there is any way to have a browser window scroll down when your mouse reaches the bottom of the page? Any help would be much appreciated, Thanks Hi, I'm looking to create a div which contains a list of news items which can be vertically scrolled through by hovering near the top or the bottom of the div. It will then automatically start scrolling through the content. The nearer to the bottom of the div they position their mouse, the faster the scrolling is. Is this something which is possible, and if so how can I do this? Thanks Curt Hello. I am in the process of making a basic game board using javascript. Just a table with a bunch of cells that are blank, soon to be colored. However, what I want to do is create my board and be able to scroll depending on where the mouse cursor is. For example, if it is 100px away from the right side of the screen, then move the board to the right. I am trying to use the information from: here I can't seem to get it to work. I have checked firebug, set and checked breakpoints, but it never moves and I am not sure why. Could anyone please help? Thank you. Heres my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
#land {
table-layout: fixed;
width: 2500px;
height: 2500px;
}
#land td {
width: 25px;
height: 25px;
border: 1px solid black;
empty-cells:show;
}
#land tr {
height: 25px;
}
</style>
<script type="text/javascript" src="World/world.js"></script>
<script type="text/javascript" src="mapscrolling.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body id="mainBody">
<div id="mainDiv">
</div>
<script type="text/javascript" >
new CursorDivScroll( 'mainDiv', 20, 20 ); // HERES THE REFERENCE!
var i, j;
body = document.getElementById("mainDiv");
land = document.createElement("table");
land.setAttribute("id", "land");
land.setAttribute("cellspacing", "0");
land.style.border = "1";
for(i = 0; i < 100; ++i)
{
var row = document.createElement("tr");
for(j = 0; j < 100; ++j)
{
var cell = document.createElement("td");
cell.appendChild(document.createElement("div")) // tried &nsbd; but didn't work
row.appendChild(cell);
}
land.appendChild(row);
}
body.appendChild(land);
</script>
</body>
</html>
|
|||||||