how can i make somthing scroll down the page with you?

  • 1
  • Question
  • Updated 10 years ago
  • Answered
hi,

i have an image and i want it to scroll down a page with me, i have seen it on a website made with Yola, whats the code,

thanks

alex

http://sports-info.synthasite.com
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
  • Happy!

Posted 10 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Alex

Can you provide a bit more information as to what you'd like?

Is this image a background image that you'd like to scroll? Can you provide an example of what you've seen?

Hopefully, we can find something that meets your needs.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
okay,

i did have 2 images i wanted to scroll down a page when the user scrolled don with it,

i have seen it on a website made with yola so i know it can be done,

alex
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Can you remember the site where you saw this Alex? I just want to get a clear picture of what you want done. Sometimes it's hard to describe in text what you're looking for and it's so much easier to see it visually.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
i cant remember it anymore but i do think this website has Somthing like what i want.

http://www.myvue.com/cinemas/index.as...
scroll down and look at the navigation menu.

thats what i want.
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Hi Alex,

Found this little piece on

http://www.dynamicdrive.com/style/lay...

This is a two columns liquid layout with the left column being static, always in view. Tested and works in IE5+, Opera7+, and Firefox.

<!--

Force IE6 into quirks mode with this comment tag-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml...>

Dynamic Drive: CSS Left Frame Layout

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}

#framecontent{
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 200px; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: navy;
color: white;
}

#maincontent{
position: fixed;
top: 0;
left: 200px; /*Set left value to WidthOfFrameDiv*/
right: 0;
bottom: 0;
overflow: auto;
background: #fff;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 0 0 0 200px; /*Set value to (0 0 0 WidthOfFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}




CSS Left Frame Layout


Sample text here









Dynamic Drive CSS Library




Credits: Dynamic Drive CSS Library



-->

Suggest place it on a trial site and see what it looks like (If anything !)
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
thanks peter
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
peter, it doesnt work
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
I'll keep checking then.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
thank you so much peter.
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Alex, I just placed it on a trial site and it works well.

Try again. The other possibility is that the code is being truncated on GS. I can send it to you by email if you like?
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
okay, you have it dont ya?
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
The LHS stays stationary (blue) and the RHS scrolls like normally.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
thats brilliant, just what im after!
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Sent to your email Alex. Good luck with it.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
thanks peter, i will test it now.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
Peter it doesnt work, it just broke the page :(
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Did you remove the old widget and then add a new widget rather than deleting the content and putting the newer code in?

Is there anything else on the page?
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
the page is blank apart from 1 long image to test if it works, it just screws the page, it removes the footer then the browser crashes, i had to delete my test site than go again.
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
I can only suggest what i would do i guess.

Place a smaller image in the LHS. I don't think that you would want to go to close to the top and bottom edges as this is a fixed area. I'm thinking that if it goes beyond the boundaries that may cause a problem. I don't think that I would use image widgets to place an image either.I would simply use HTML

Certainly nothing else on the page as that may do something as it 's trying to contain the whole of the page.

This is really all guess work at this stage.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
i have tried it multiple times nothing else on the page. im realy stumped.
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
because it's CSS and it's being added to the body of the page it will over-ride the existing CSS which has all the other stuff on the page layout with it. This has included the menu and the footer pretty well all of the style of the page.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
ohh, so i will loose the pages BG and other HTML?
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Another option is to use an inline frame
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
whats one of them?
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
iframe.

Here is a good explanation. I'll get you a code for it.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
thanks
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
here's one that works alex!

take a look:

http://rumballchick.synthasite.com
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
littleus, can you help me with the code you have? it looks great on that site, can i replace it with images?

alex
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I'm sure you could Alex. Take a look at this site: http://dejavuapparel.synthasite.com/test I used button images in that one. Is that what you mean?
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
yes please littleus, its great but can i get rid of the yellow bit at the top so its just an image?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
yep... you can. take a look now - like that? http://dejavuapparel.synthasite.com/test
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
yup, thats brilliant, please can you post the code.
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Here's a good set of code for a simple frame setup. Have a look at this and I'll keep reading to see if I can find extras
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Here's the most simple code for an I-frame Alex.

I think a really logical place to start and as you find aspects that you wish to add then add them
<!--
<iframe src=http://yourinsertpage. width=500 height=500>
//Insert the target site on this line... you can change the width and height to whatever you wish...

</iframe>
//End IFrame tag here.
-->
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
Peter, whats in iframe tag?
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
itself is a tag.

I'm not quite sure what you're asking Alex so I hope that makes sense :)

Let me know.

So you would have as a start tag and as an end tag of the i-frame.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
<!--
sorry you see how it breaks anything?

Peter if the original code worked for you theres only 1 answer, Alex you didnt enter it correctly, did you run it through a notepad program?

1. copy it into notepad
2. start at <style type="text/css"> and end at </style>
3. paste that into a html widget at the top of the page

After that im not sure how you would call it but i think that would be the best way to add it.

Lee

-->
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I hope I can get the code to paste here.

<!--<div id="divStayTopLeft" style="position:absolute">
<!--EDIT BELOW CODE TO YOUR OWN MENU-->


PUT YOUR MENU CONTENTHERE


<!--END OF EDIT-->
-->

<!--<script type="text/javascript">

/*
Floating Menu script- Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

//Enter "frombottom" or "fromtop"
var verticalpos="fromtop"

function JSFX_FloatTopDiv()
{
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}
var startX = 3,
startY = 20;
var PX='px', d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers){el.style=el,PX='';}
el.sP=function(x,y){el.style.left=x+PX;el.style.top=y+PX;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = window.innerHeight ? pageYOffset + window.innerHeight : ietruebody().scrollTop + ietruebody().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = window.innerHeight ? pageYOffset : ietruebody().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = window.innerHeight ? pageYOffset + window.innerHeight : ietruebody().scrollTop + ietruebody().clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv("divTopLeft", 10,30).floatIt();
</script>-->
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
thanks LU
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
you're welcome! I might add this code to my site as well. =)
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
i am having a problem though.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Yep...I figured you would cuz I just noticed that the code didn't exactly paste everything! lol. Lemme try again okay.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
LU, umm how can i insert an image to the code? it just doesnt work
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
<!--<div id="divStayTopLeft" style="position:absolute">
<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<!--<table border="1" style="width: 130px;" cellspacing="0" cellpadding="0">

<tr>-->
<!--<td style="width: 100%; background-color: #fff;">-->
<!--<a href="http://dejavuapparel.synthasite.com">... style="border:0px;" src="resources/cooltext420262486.png" onmouseover="this.src='resources/cooltext420262486MouseOver.png';" onmouseout="this.src='resources/cooltext420262486.png';" /></a>
<a href="http://dejavuapparel.synthasite.com/a... style="border:0px;" src="resources/about me button.png"/></a>
<a href="http://dejavuapparel.synthasite.com/t... style="border:0px;" src="resources/cooltext420262401.png" onmouseover="this.src='resources/cooltext420262401MouseOver.png';" onmouseout="this.src='resources/cooltext420262401.png';" /></a>
<a href="http://dejavuapparel.synthasite.com/f... style="border:0px;" src="resources/cooltext420262261.png" onmouseover="this.src='resources/cooltext420262261MouseOver.png';" onmouseout="this.src='resources/cooltext420262261.png';" /></a>
<a href="http://dejavuapparel.synthasite.com/m... style="border:0px;" src="resources/cooltext420347096.png" onmouseover="this.src='resources/cooltext420347096MouseOver.png';" onmouseout="this.src='resources/cooltext420347096.png';" /></a>
<a href="http://dejavuapparel.synthasite.com/c... style="border:0px;" src="resources/cooltext420262196.png" onmouseover="this.src='resources/cooltext420262196MouseOver.png';" onmouseout="this.src='resources/cooltext420262196.png';" /></a></p></td>-->

<!--END OF EDIT-->

<!--<script type="text/javascript">

/*
Floating Menu script- Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

//Enter "frombottom" or "fromtop"
var verticalpos="fromtop"

function JSFX_FloatTopDiv()
{
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}
var startX = 3,
startY = 20;
var PX='px', d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers){el.style=el,PX='';}
el.sP=function(x,y){el.style.left=x+PX;el.style.top=y+PX;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = window.innerHeight ? pageYOffset + window.innerHeight : ietruebody().scrollTop + ietruebody().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = window.innerHeight ? pageYOffset : ietruebody().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = window.innerHeight ? pageYOffset + window.innerHeight : ietruebody().scrollTop + ietruebody().clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv().floatIt();
</script>-->

Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Alex.. I'm gonna have to email it to you I think. It's still not copying the whole thing.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
okay, its
alex [at] logikomedy [dot] tk
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
littleus, can you just paste it to the email because i cant download the file.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Alex

I just re-sent it again. =)
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
thanks.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
LU, I Cant Get It To Work.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
you gave me the code, do you want the pages URL?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
You have to add your content Alex. Take a look at the code again. Where you see my stuff.. that's where you put in your stuff. Replace all of my images with your images.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
i have but it just breaks.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
from what I can see Alex... it's still my stuff in your code.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
look at da image behind it.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I have a proposition for you, but only if you're comfortable with it.

How about you email me with your login & password and I'll go into your Unnamed site and paste the code in for you. Then, all you have to do is just copy it directly!

Send me all the image info too and I'll include it in there. Don't forget to include the all the paths.

It's up to you though if you feel comfortable with this idea. If not, I totally understand. It just seems that you have real trouble with these codes.

Let me know what you think of this idea.

If you do like this idea, you can just respond to the email I sent you.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
okay LU, i will email you with a new accounts P word and U name, if its still okay with you!

(sorry about the late reply, i have been Golfing!)
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
also, i got no email from you.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
LittleUs,

I have sent you the login details!

alex