My panel and content area is not silde back

JavaScript
1

hi everyone,

here is my website:http://www.terranartworks.com/testsite/tsv1/index.html

i try to do that,when user clicks one of three button on bottom,then clicks on logo button,the red panel and content panel slide back to its begin position.
i wrote a jquery for this but it will not slide back.
how can i solve this problem?

2

I assume it is now working. Is that right?

3

Hi,
I suppose it’s wrong. :wink:

  • First, the doctype has to be html5 (<!doctype html>), otherwise the <video> tag isn’t recognized in Firefox.
  • A check with the html-validator is [U]never in vain[/U].
  • A click on the logo does reload the page by means of the link over there. And with a reload the page will start all over again: as a new page, without sliding back from a state in “the page before” (in this case: the same page).
  • To get the sliding back effect, you have to stay on the page, and therefore you’ll have to move the logo-link into the list of the other menu items: as a new <li> in the <ul id=“menuButtons” class=“group”>.
  • With css you can style the logo button above the slider.
4

i changed doctype to html5 but ff still does not working.
is it any other solution for sliden back effect?cause this means changing all the structure of site will be extra job for me.

5

i changed doctype to html5 but ff still does not working.
is it any other solution for sliden back effect?cause this means changing all the structure of site will be extra job for me.

6

Hi sweetysweety,

Video problems
I guess the no-show in Firefox will be due to something wrong in encoding the files.
If I take other examples of a .webm file and .ogg file, everything is fine in FF.

But … there is another problem: Internet Explorer 8 and earlier versions do not support the <video> element. :rolleyes:

  • See this [U]overview of screenshots[/U] of the the IE-results (the mp4 file should work in IE9 and IE10; as a WinXP-user I can’t test both).
  • To overcome this, you can use the [U]JWplayer[/U], which gives html5-support as well as a flash-player for IE8 and before; the so-called “dual mode”.
  • How you can do this, is [U]explained over here[/U] and on other pages of the site.
  • Maybe an easy alternative could be to make a YouTube-video, and embed that in your page. (I’m not sure if iPod and iPad can handle that)

Slider problem
I’m afraid I don’t see an other solution then re-arranging the html / css. - Well, maybe with some added javascript it is possible; but I suppose developing that will ask much more time.

7

what you mean wrong encoding the files?
i added all video sources in video tag.and they works good in chrome,opera and safari.
besides the links you added are not opened in my country.it banned.
i do not want to load video to youtube cause everybody will saw my video.i want to show only the users of my site.
if i write a script that controls the browser type and load video sources according to browser type,is the browser work for ff?

8

if i remove index.html from link of logo button and when user clicked to logo button,changing link of logo button.then will it be sliden?

9

“what you mean wrong encoding the files?”

I suppose you started with one video file, and have it converted to .webm, .ogv and .mp4 files.
Probably this conversion had something which causes Firefox not to work.

I got an other .webm and .mp4 example from the web, and converted your .ogv file into a new version.

  • In my testpage [U]html5-video-test.htm[/U] the results are:
    Now Firefox is playing both: the .webm file and the .ogv file (not the .mp4).
    Screenshot in FF:
    [CENTER][/CENTER]

The code I used is:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<!-- http://www.sitepoint.com/forums/showthread.php?1148141-my-panel-and-content-area-is-not-silde-back -->

<title>html5-video-test</title>

<style type="text/css">
video {
	display: block;
	width: 900px;
	height: 350px;
	margin: 0 auto 40px auto;
	background: #1A1717;
	border: 5px solid #1A1717;
	}
p {
	text-align: center;
	}
</style>
</head>

<body>

<h1>html5 video test</h1>

<p><strong>.webm</strong> file:</p>

<video autoplay controls id="video1">
	<source type="video/webm" src="big-buck-bunny_trailer.webm">
	Your browser doesn't seem to support the video tag.
</video>

<hr>

<p><strong>.ogv</strong> file:</p>
<video autoplay controls id="video2">
	<source type="video/ogg" src="giris-nw.ogv">
	Your browser doesn't seem to support the video tag.
</video>

<hr>

<p><strong>.mp4</strong> file:</p>
<video autoplay controls id="video3">
	<source type="video/mp4" src="big_buck_bunny.mp4">
	Your browser doesn't seem to support the video tag.
</video>

</body>
</html>
  • If you don’t want to publish the video’s on YouTube, I suggest you take a look at the JWplayer I mentioned (I hope you can get that from your country; if not, I don’t know how to support Internet Explorer).
10

when i add jw player,the video works in i.e.,but my redAndGreyPointMovement script begins not to work.
besides all the videos on other browsers become the video that plays on i.e.