PDA

Click to See Complete Forum and Search --> : Looking for a script

Tygurtar
01-06-2004, 03:46 PM
Hey, Im looking for a script of somesort that makes an html page slide across the main html page, then stop at a specific spot. Im would like the new page to also be semi-transparent.

if anyone could help me out that would be great.
Vladdy
01-06-2004, 04:51 PM
How close is that: http://www.vladdy.net/Demos/ContentSlider.html
requestcode
01-06-2004, 04:53 PM
Maybe you will find something here:
http://www.dynamicdrive.com/dynamicindex3/index.html
http://www.dynamicdrive.com/dynamicindex17/index.html
Tygurtar
01-06-2004, 10:32 PM
Im thinking more of a, when you click a link, the new page slides in from the right, ontop of the main page, and stops with a gap still on the left. Also a gap on the top and bottom, but no gap at the side. Then when you click back on that page that slides onto the mainpage, it slides out. I would perfer the page that sides in to be semitransparent but thats just a wish
Tygurtar
01-07-2004, 08:17 AM
this is really making me mad. I really wish i knew how to do this stuff, i could do it myself then, but i dont even know what i'm looking for.

Somebody please help me.
If you think you might have an answer to my problem, please respond. Im desperate
TheBearMay
01-07-2004, 10:38 AM
Okay, this is a little rough, but it may point you in the right direction...or not. I used an IFrame inside the slideDiv but you can play around and see what works best for you. Hope this helps.
Vladdy
01-07-2004, 12:16 PM
If you are really de$perate ;), I can develop such script to your exact specifications (as long as that is doable). E-mail me if interested.
Tygurtar
01-07-2004, 04:08 PM
Thanks TheBearMay!

You pretty much hit it on the head. The action is exactly what I wanted. I have no problems with the script at all. However if there is a way that i can have a back link in the frame to close it, that would be wonderful (although the little arrow is nice, someone might not know or see its there) Also, is there a way to have a semitransparent background in the frame? I dont think there is because it is a seperate document, but im just asking.

Other than that, thanks a bunch. Not i feel i can finally get somewhere with my project!
TheBearMay
01-08-2004, 07:16 AM
Actually if you use something other than an IFrame you can click anywhere in the Div to slide it back. Something that might work depending on your application, may be to use an image containing your content and then play with the image settings...
Tygurtar
01-14-2004, 08:18 AM
How would I cause a different link to open a different page using this script? I have been trying to tinker around with the script and do it myself, but everything i have tired isn't working.
Tygurtar
01-14-2004, 08:31 AM
i pretty much need to use the same script more than one time on the same site as you open different pages.
Tygurtar
01-14-2004, 06:13 PM
can anyone help me? I am completely clueless when it comes to javascript
Tygurtar
01-15-2004, 08:25 AM
anyone? please?
TheBearMay
01-15-2004, 06:26 PM
Sorry I didn't reply, my main system seems to be a little disconnected at the moment. Not sure what you're trying to do, but if you just want to include the code on all the pages it's just a matter of placing in a file by itself (by convention the extension is JS) and without the <script> </script> tags and then add:

<script src="yourFileURL.js"</script>

in between the <head></head> tags. I you want to change the content just replace what is bewteen the <div id=slideDiv..> and </div> tags - alternately the src attribute of the Iframe can be changed.

If you just need to open a new page from a link it's:

<a href="http://newPageUrl">New Page</a>

or via javascript use:

window.open("http://newPageUrl");
Tygurtar
01-15-2004, 08:34 PM
sumed up in a simple sentance i just now thought of:

i need to open more than one content page, with their own link.
Paul Jr
01-15-2004, 10:34 PM
Well, I looked at it, and I think I figured out one way to do it. There is most certainly a better way, but I'm pumped 'cause I'm still learning JS. ;)

You can remove the src="" from the Iframe, give it an ID, and do something like this:

<a href="#" onclick="slideStart(); document.getElementById('Frame').src='frameContent.htm';">Slider</a>

You just change the src="" in there to whichever page you're linking to.

Now, this means that your content will be inaccessible for those without JS, but I think it might be anyway. You could include a <noscript> tag to fix this (I think). Pardon me if I'm stepping on anyone's toes, I'm just pumped.
Tygurtar
01-15-2004, 10:51 PM
that looks like it might work

for those with no java, is there a way to create a "noframes" version, ie just have the page open normally and not have the slide in effect that i get with the script?

would it just be a normal link in a <noscript> tag?
Tygurtar
01-15-2004, 11:03 PM
k i did this.

i copyed the content page and pasted it as framecontent2, then changed the bg color so i could tell if it works.

here is the script

<a href="#" onclick="slideStart(); document.getElementById('Frame').src='frameContent.html';">Content</a><br>
<a href="#" onclick="slideStart(); document.getElementById('Frame').src='frameContent2.html';">Content2</a>

but when i click on the links it says error on page down at the bottom, and Content2 still shows the frameContent document
Paul Jr
01-15-2004, 11:12 PM
Did you make sure to give the Iframe the ID of "Frame"? You can also remove the original src="" tag from the Iframe.

Also, to keep your pages accessible to those without JS, you just do something like this:

<a href="frameContent.html" onclick="slideStart(); document.getElementById('Frame').src='frameContent.html';return false;">Content</a>
Now, the return false; at the end disables the href="" tag at the beginning for those with JS, but for users that don't have JS, the return false will be ignored, since it's JavaScript, so the link will take the person to the page "frameContent.html".
Tygurtar
01-15-2004, 11:28 PM
yeah it wasnt working at first because i forgot to take the src= out of the iframe, so i did that and gave the iframe an id, then it still wasnt working.
I realized that the links were trying to open .htm when the files are saved .html. . . IT WORKS NOW!!!! HORRAY!! THANK YOU SO MUCH!!!

here is the script in it entirety. . .

<html>
<head>
<script type="text/JavaScript">
var SbrowseIE = navigator.appName;
if(SbrowseIE == "Microsoft Internet Explorer") SbrowseIE = true;
else SbrowseIE = false;

var stopPoint=50;
var Sstep=-10;
var sDelay=1;
var slideInterval;
var xPos=1000;

function slider() {
if(SbrowseIE) {
SWinWidth = document.body.clientWidth;
slideDiv.style.left = xPos + document.body.scrollLeft;
} else {
SWinWidth = window.innerWidth;
document.slideDiv.pageY = xPos + window.pageXOffset;
}

xPos = xPos + Sstep;

if (xPos <= stopPoint) {
clearInterval(slideInterval);
xPos = stopPoint;
Sstep = Sstep * (-1);
}

if (xPos >= SWinWidth && Sstep > 0) {
clearInterval(slideInterval);
xPos = SWinWidth;
Sstep = Sstep * (-1);
if(SbrowseIE) slideDiv.style.visibility = "hidden";
else document.slideDiv.visibility = "hidden";
}
}

function slideStart() {
if(SbrowseIE) slideDiv.style.visibility="visible";
else document.slideDiv.visibility = "visible";
slideInterval = setInterval('slider()',sDelay);
}

</script>

</head>
<body>


<a href="frameContent.html" onclick="slideStart(); document.getElementById('frame').src='frameContent.htm' ;return false;">Content</a><br>
<a href="frameContent2.html" onclick="slideStart(); document.getElementById('frame').src='frameContent2.htm' ;return false;">Content2</a>
<div>
Background Content<br/>
Line 1<br/>
Line 2<br/>
Line 3<br/>
Line 4<br/>
Line 5<br/>
Line 6 - This is a longer line to check for wrapping....<br/>
Line 7<br/>
Line 8<br/>
Line 9<br/>
Line 10<br/>
Line 11<br/>
Line 12<br/>
EndContent
</div>
<div id="slideDiv" style="position:absolute; left:1000;top:50; visibility:hidden" onclick="slideStart();">
<img src="Return.gif" height=10 width=10></img>
<iframe id="frame" width="100%" height=400 scrolling="no" noresize></iframe>
</div>

</body>
</html>
Paul Jr
01-15-2004, 11:31 PM
Woohoo! Glad you got it working!

You should still keep your ears open, though, 'cause someone might just pop in and give you a better solution. ;)
Tygurtar
01-15-2004, 11:41 PM
why fix something if it ain't broken?

your correction to the script works beautifully!

thanks again for helping me out. Im really excited about this now! :D
Paul Jr
01-15-2004, 11:56 PM
Originally posted by Tygurtar
why fix something if it ain't broken?

your correction to the script works beautifully!

thanks again for helping me out. Im really excited about this now! :D
You're welcome. :D
Also, there may be a mo' betta' solution out there someplace. ;)