jrails button not doing anything I want

[winterquilt]

I have been battling all night with this code, I do not code so its really annoying for me. Now this site has lots of examples that are supposed to help the coder and save them time but as usual I ony want one bit and i want it somewhere different to where it is, this has taken me a long time, its 4am and i HATE all this stuff.

On top of that this page has, it seems to me, two different ways of doing the same thing so here is what I started with:

http://www.hotajax.org/jquery/photos--other-plugins/486-jrails-jquery-on-rails.html

I just wanted one button so deleted lines and got just one, but then it kept referencing to the css file (which I don't understand) and then I found a customisable compartmental section on the website, so I went here:

http://ui.jquery.com/download_builder/

downloaded stuff, but didn't get it, So then I went here and got this:

http://docs.jquery.com/UI/Effects/Slide

But its green! I want it to look like the first one with all the boxes, that style. I sort of got that with this:

http://lovelago.googlepages.com/test_4.html

(my best effort) but its not the same is it, and on top of that I would like to have it placed at the bottom of the screen so the button is right on the edge at the bottom and just dissapears, with the word "men.u" in it, I can't figure out how to add that and for it to link to a new page. oh and about 500 along the page.

Can anybody please help, thanks. They dont have a forum on their website only IRC and I dont get that, every time I've been on I get into trouble, I hate IRC.

Thanks.

 

[angelwatt]

I believe it may be a script order problem. Switch the order of these two lines and be sure to add the type attribute to all your script tags.

<script src="jquery-fx.js" type="text/javascript"></script>
<script src="jquery-latest.js" type="text/javascript"></script>

Code in jquery-fx.js makes references to objects in jquery-latest.js, which doesn't run until after it currently, which is why you need to swap their order. Also be sure to keep an eye on your Error Console, it gives somewhat helpful error messages, which led me to this solution.

 

[winterquilt]

new attempt

Thanks for replying, I don't have an error console. I use Smultron for OS X. I changed it like you suggested but it doesn't work:

http://lovelago.googlepages.com/test_4c.html

I have this one now, which uses the different code from the same site and I also tried to integrate some new script to send the button to the bottom of the page.


Here is my new attempt:

http://lovelago.googlepages.com/test_4a.html


Here is the article on moving something to the bottom of a page:

http://www.themaninblue.com/writing/perspective/2005/08/29/


Here is the new code from the same button site:

http://docs.jquery.com/UI/Effects/Slide#source

Thanks for your help.

 

[angelwatt]

Thanks for replying, I don't have an error console. I use Smultron for OS X. I changed it like you suggested but it doesn't work:

Error Console is part of Firefox. Safari also has the same type of thing. Just open your test page in either browser and look under the Tools (Firefox) / Develop (Safari) menu. For Safari's Develop menu you'll need to turn it on first, which is in the preferences on the Advanced tab at the bottom.

What specifically isn't working on your test page? I checked it out and clicking on things made boxes move down and disappear, but not sure what effect you're trying for.

 

[winterquilt]

new version, kind of right

Okay, just to confuse you I have made another attempt, this one sort of works:

http://lovelago.googlepages.com/test5.html


I cleared the Error Console and loaded the page and it comes up with no error, but this is not what I want the page to behave like. Just to clear things up I would like the green button at the bottom of the page, as one of them is, but not two at the top. Only one button.

The problem here, aside from the two buttons at the top, is that when I click the button at the bottom it does its transition at the top ~strange.

So I want just one button, at the footer of the page and so when I click it the transition obviously happens at the bottom. Not only that but I would like to move the button to the right by a percentage e.g. 70% so that anybody who views the page - even on a different size screen - will still get the right proportions.

I am going for full screen.

Thanks.

 

[angelwatt]

Well, a big problem is your HTML. You have two head tags and two body tags. This is a big problem. Clean up the HTML a bit first, then it may be easier to debug the problem. Part of it is you're referencing div, but there's 4 of them on the page currently, which is why you have so many green boxes. Give the intended div an id attribute to reference so it only effects one piece.

 

[winterquilt]

now they're all at the top

I tried trimming it, but I don't get all this other stuff about attributes and I'm still not getting any error console feedback. Now the boxes, 3 of them, are all at the top, overlapping.

Christ its one button on a blank screen at the bottom of the page how hard can it be. Why is it web programming is so hard?

http://lovelago.googlepages.com/test5.html

 

[angelwatt]

Christ its one button on a blank screen at the bottom of the page how hard can it be. Why is it web programming is so hard?

It only seems hard because you don't know what you're doing If you want to learn something, you need to be ready to read and take the time to learn it properly, not just copy and paste things you don't understand.

An attribute is what comes after a tag name. For example,

<div id="footer"> ... </div>

Here the tag (or element) is a div, and it has an id attribute. The value of the id attribute is "footer."

I cleaned up your code some and I think I have it working for what you're attempting. Put the following in a file and try it out.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Home</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="The Man in Blue" />
<meta name="robots" content="all" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<style type="text/css" media="all">
	@import "css/main.css";
	@import "css/product_features.css";

	/* The CSS that's required to position the footer */

	html
	{
		height: 100%;
	}

	body
	{
		height: 100%;
	}

	#page
	{
		position: relative;
		min-height: 100%;
	}

	* html #page
	{
		height: 100%;
	}

	#footer
	{
		position: absolute;
		bottom: 0;
	}
#thisDiv {
 position: absolute; bottom: 0;
 margin: 0px;
 width: 100px; height: 80px;
 background: green;
 border: 1px solid black;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"
 type="text/javascript"></script> 
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"
 type="text/javascript"></script> 
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.slide.js"
 type="text/javascript"></script> 
</head>
<body>
<div id="nonFooter">
<div id="content">
<div id="footer">

<div id="thisDiv"></div>

</div><!-- end footer -->
</div><!-- end content -->

<script type="text/javascript">
$(document).ready(function(){ 
	$("#thisDiv").click(function () { 
		$(this).hide("slide", { direction: "left" }, 1000); 
		}); 
	}); 
</script>

</div><!-- end nonFooter -->
</body>
</html>

 

[winterquilt]

final

Thanks for your time, I read what you wrote, I must confess I'll never be a programmer. When I tried the code the button did stay at the bottom, but, there is a margin around the button when I thought that code I found would make it go right to the edge. Also I tried it in Safari and its playing up.

You see that's the problem, compatibility. I have an idea for what I want and there's no way I'm going to be able to do it, I will probably have to hire somebody and I didn't want to. Shame.

Thanks for your help, but you can see this thing is just going no where. Just as a final piece of advice you see this page here: http://marcgrabanski.com/articles/archives/1 where the button at the bottom will scroll the page by clicking on it, what's that technique called?

I wanted to have a long page but with no scroll bars and no mouse scrolling, so clicking the button I was trying to do would fold away and then the page would seemingly be pulled up from beneath in a single flowing motion. I don't like the idea of a page refresh. I only would need to do this once as the main page is the program downloading bit and the one beneath would be the info.

Thanks.

 

[angelwatt]

Thanks for your help, but you can see this thing is just going no where. Just as a final piece of advice you see this page here: http://marcgrabanski.com/articles/archives/1 where the button at the bottom will scroll the page by clicking on it, what's that technique called

I'd call it a JavaScript powered div scroller. It's very similar to my Gentle Anchors script. Though it's only setup for scrolling to certain spots on the page, but could be a start to a window scroller script like you want.

 

[winterquilt]

great

Ah, fancy that! Can the script be told just to scroll to the end of the page, if I made the page double the size of the viewing pane, it would then only be able to scroll just once?

How does it work on small screens like 800x600 and 1024x768, and larger, if I wanted would the script auto size to fit any screen, auto scrolling to just fill two screens fulls?

 

[angelwatt]

Ah, fancy that! Can the script be told just to scroll to the end of the page, if I made the page double the size of the viewing pane, it would then only be able to scroll just once?

How does it work on small screens like 800x600 and 1024x768, and larger, if I wanted would the script auto size to fit any screen, auto scrolling to just fill two screens fulls?

Sure, that would be simple enough. If you setup a link somewhere on the page, like below (it could be an image link or text), then you'd do an internal page link, which starts with the #. This links to a tag element that has an id attribute of "bottom." Below I have the link point to a div tag, but it could be any tag with that attribute.

<a href="#bottom">Go to bottom</a>
...
<div id="bottom"></div>

My script will try to bring the linked tag (the div in the above example) to the top of the browser window. Obviously if the tag is at the very bottom of the page, it won't be able to bring it to top, and so will just stop at the bottom of the scroll bar. This means you can have the destination tag on anything near the bottom, like say a footer div.

As far as I know, the script works the same no matter the screen resolution. The script only scrolls the window, it doesn't do any resizing of things on the page.

 

[winterquilt]

margins & animation

Hey it worked first time, I am pleased! That #button trick seems familiar, is that an old one? It seems like it makes your script a little superfluous? This does what I want. I think it looks better than scrolling down.

I have been working a little more on the button:

http://lovelago.googlepages.com/test6.html

its to the hard right now but I think the way it goes to the bottom of the page is not going to be any good for me, I will need to make it come some way down, just to show a full top page and then when clicked to scroll down to the bottom which should measure a full second page.

My two problems are the margins still around the button, about 5px and that the animation is still showing in the top right corner - which might have something to do with the .js things it links to?

 

[angelwatt]

That #button trick seems familiar, is that an old one?
...
My two problems are the margins still around the button, about 5px and that the animation is still showing in the top right corner - which might have something to do with the .js things it links to?

Having a link with #something has been around since the beginning of the web, so no, nothing new. My script just adds some visual flare and provides better user feedback than a jump.

You just have some default styles causing that. Add the following CSS,

body {
 margin: 0; padding: 0;
}

You can just add the margin/padding line to the body selector that already exists in the HTML file or just add it somewhere inside the style tag.

I didn't see an animation in the top right so not sure about that.

 

[winterquilt]

now to put the button on the page, in the right place

This is great it works. I have now a button that works, and your scrolling page, I'd like to put the two together, but how do I place the button just in the right place so I get a screen worth and then a screen down?

Isn't that where my webpage will fall over if people have different screen sizes?


Button page: http://lovelago.googlepages.com/test6.html

Scrolling webpage: http://lovelago.googlepages.com/test7.html


The problem with the animation is in Safari, I was testing in safari but my browser of choice is FireFox - I just noticed. The last time I did an ACID test with Safari it passed but FF did so only partially, so how come Safari is suffering?

 

[angelwatt]

This is great it works. I have now a button that works, and your scrolling page, I'd like to put the two together, but how do I place the button just in the right place so I get a screen worth and then a screen down?

I don't believe the two scripts are compatible for working together. I presented my script as an alternative, not as a conjunction. I'm not even sure what combining them would look like.

As far as Safari's concerned, I'm not familiar with jQuery to understand what's going on there, which is why I don't use JavaScript libraries other than my own. The problem could be from CSS or JavaScript, and is not likely Safari's fault. IE probably doesn't something different visually too.

 

[winterquilt]

not compatible

Well I did get something together:

http://lovelago.googlepages.com/test8.html

As you can see the button actually does stay at the bottom viewer rather than the page and that's what I wanted but for some reason when I click the "Description" link after it scroll down it just goes back to the top of the page again.

nb. Ultimately the description link will be the green button, its only there as a test but I'm not sure how to link the two.

I tried my page in the CS3 Markup Validation Service and it gave me all these errors, which is even more of a headache:

http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0