SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question my panel and content area is not silde back

    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. #2
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I assume it is now working. Is that right?

  3. #3
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    21 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    I suppose it's wrong.
    • 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 never in vain.
    • 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. #4
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    21 Post(s)
    Tagged
    0 Thread(s)
    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.
    • See this overview of screenshots 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 JWplayer, 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 explained over here 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. #7
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sweetysweety View Post
    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?

    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. #9
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    21 Post(s)
    Tagged
    0 Thread(s)
    "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 html5-video-test.htm the results are:
      Now Firefox is playing both: the .webm file and the .ogv file (not the .mp4).
      Screenshot in FF:

    The code I used is:
    HTML Code:
    <!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. #10
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •