css animation doesnt appear first when going onto second html page - html

Hi I am doing an assignment that recquires me to only use html and css only no javascript. Usually, with javascript this is hella easy to do but html and css only is a bit annoying. In my first page I have a link to my second but when I press the link from the first page to go onto the second page. The animation I made does not work at all and the secondary text only shows up.
I will provide photos and code to show what I mean. I dont understand what I am doing incorrectly to cause this but it is annoying.
firstpage
second page
from the first page going onto the second via clicking 'start' the second text only shows up but I need the whole thing to show up. Heres the animation part I want to show up as well. animation_part
second page html:
html
second page css
css-part1
css-part2
I am not sure if this will further show my predicament but heres the code for the first html and css pages:
For some reason it is not allowing me to post the code here so I have done my best to showcase to go around the error
GITHUB: https://github.com/TheGraeDev/ADV201

It might be possible that your required character went to the back of main background. Try changes in css to bring your panda to front. Hope it helps!

Okay Incase anyone else comes across the same issue. Change position to relative and instead of using percentage value for Top in css using px. it fixed the problem

Related

Browser tab not showing full URL?

I'm having a odd issue with this site I'm building:
http://limetreeyoga.uk
If you click on "about" it takes you to the "about" page but if you refresh the page it takes you back to the home page?
Same with the other pages, its also not showing the "title" tag in the browser? I have no idea why, can anyone help?
Cheers
T
This website uses FRAMES - extremely old (i.e. outdated) technology....
The outer frame always stays the same, that's the reason for the reload problem. Only the inner frames change when you click the menu.
ADDITION: In fact, it seems you have a complete regular (useable) document structure inside the first frame. Try to erase all HTML outside the first <frame> element - that might even work... (although I didn't look into it in detail)

Drupal 6 - sticky image with link

I have a Drupal 6 website and would like to place a contact button image on the right-hand middle side of the website. The idea is that when the user scrolls down the page, the button remains in its position. What's the easiest way of implementing that? If possible please provide procedures as I'm not very skilled with HTML.
If button is suppose to always stay in one place then you don't need JS at all. Just set it's position to fixed and it will always stay at one place. You need that button on every page put it's code page.tpl.php template file...

How to display highlighted sprite

I don't really know how to explain this, so I drew a picture:
I want the initial look of the page to look like the right envelope, but when you hover over each piece of the envelope it highlights and describes the envelope and if you click on it then you will be redirected to a page about the envelope
this is what I have tried to do
If you can explain how to do this through html and css please help!
You have both images, you'll add a javascript handler on hover (you can use jquery) which changes the first image into the second when the mouse is over it. And of course the div surrounding is a link to the desired page.

Anchor links are not all pointing to their name counterparts

I have a site where a few of the anchor links are not landing on the right spots of the second page while some are. I've quadruple checked the names for accuracy, ran it through the validator, etc but with no luck.
On the page http://webnamix.com/clients/pmgideas/index.php there is a link "Working with PMG saves you money" that is supposed to go to the #benefit bits of the faq page but it drops me to the bottom of the page. Same goes with "consultants who offer 'moment in time' analysis or advice". However, the "Gil Price's background" link seems to be doing just fine.
Can I please get a second pair of eyes on why this is happening?
I don't see any of them working. Can you turn off the CSS and try again or create a separate node and see if the same code works?
the #benefit anchor works fine. The page lands to the bottom which is the most possible to scroll down.
If you want you can activate/open the "benefits" anchor by writing javascript code. This will increment the bottom size, so it can point exactly where you want to land.

Hold website position when navigating

Is there a way to make it so the page doesn't shoot to the top of the site when clicking different links in the navigation bar?
e. So say I'm browsing my site and I'm scrolled down a little bit. Then I click on a link that navigates to a different page on my site. It automatically scrolls to the top. Is there a way to make it not do that.
instead of simply linking to a page, you could link to an anchor on that page using
link text
if that anchor is placed properly on the target page, you will not experience the jump back to top every time you link to another page. hope this helps
If this is the problem I'm picturing:
Change your links to point to <a href="#"> or <href="javascript:void(0);">
If you're going to different pages, you can use a link like:
My Link
Down in the page:
<div id="Section5">
Stuff!
</div>
This is the way that the web works. But still you can do a few work a rounds but each one will take a little work.
First option:
When you click on any link on the page, get the margin of the link from the top, then add it as a parameter to this link, and only then do the navigation. (the format of the line will be like page.html#margin-from-top).
Then in the new loaded page, you can look for this value and do the scroll. (I prefer the scrolling with a little duration).
Second option:
Another idea is to stay always on the same page and only change the content of it. you can do that with a little effects too.
It seems, too, like you might want to use a mooTools ScrollTo affect or possibly even invoke an AJAX method like SWFAddress.
Depending on exactly what you're trying to do, you may be able to accomplish it without using any fancy javascript, but it will depend on the inclusion of labels/etc. on your target page (as has been mentioned before).