The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Cannot make this html page work

3 posters

The forum of the forums :: Miscellaneous :: Garbage

Go down

Solved Cannot make this html page work

Post by ioncube May 27th 2011, 12:47 am

Made a page from a scratch [not using existing forum header footer...]
Code:
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   
   <title>Video Tutorials</title>
   
   <link rel="stylesheet" href="http://nivo-slider-mine.googlecode.com/svn/nathanslider/global1.css">
   
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
   <script src="http://nivo-slider-mine.googlecode.com/svn/nathanslider/slides.min.jquery.js"></script>
   <script>
      $(function(){
         // Set starting slide to 1
         var startSlide = 1;
         // Get slide number if it exists
         if (window.location.hash) {
            startSlide = window.location.hash.replace('#','');
         }
         // Initialize Slides
         $('#slides').slides({
            preload: true,
            preloadImage: 'http://nivo-slider-mine.googlecode.com/svn/nathanslider/loading.gif',
            generatePagination: true,
            play: 5000,
            pause: 2500,
            hoverPause: true,
            // Get the starting slide
            start: startSlide,
            animationComplete: function(current){
               // Set the slide number as a hash
               window.location.hash = '#' + current;
            }
         });
      });
   </script>
</head>

<style>


.flt-wdt{
position:fixed;
margin-right:10px;
right:0;
top:40%;
}
.flt-wdt img{
float:right;
clear:right;
margin:5px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.flt-wdt img:hover{
-moz-transform: scale(1.2) rotate(6deg);
-webkit-transform: scale(1.2) rotate(6deg);
-o-transform: scale(1.2) rotate(6deg);
-ms-transform: scale(1.2) rotate(6deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1.2) rotate(6deg);
}

</style>

<body>
   <div id="container">
      <div id="example">
         <div id="slides">
            <div class="slides_container">
               <div class="slide">
                  <h1>Compatibility</h1>
                  <p align="center">Works best on: <img style="display: block; float: none; margin-left: auto; margin-right: auto" src="https://nivo-slider-mine.googlecode.com/svn/nathanslider/Firefox-Chrome-Compared1.png" width="345" height="173"></p>
                  
               </div>
               <div class="slide">
                  
                  <p><iframe width="525" height="250" src="http://www.youtube.com/embed/-MbnimSr43o" frameborder="0" allowfullscreen></iframe></p>
                  
               </div>
               <div class="slide">
                  
                  <p><iframe width="525" height="250" src="http://www.youtube.com/embed/VjnddieqBJc" frameborder="0" allowfullscreen></iframe></p>
                  
               </div>
               <div class="slide">
                  <h1>Replying to posts..</h1>
                  <p>Answering questions/queries in post uses similar commands as in posting a question..<img style="display: block; float: none; margin-left: auto; margin-right: auto" src="https://nivo-slider-mine.googlecode.com/svn/nathanslider/answer.png" width="177" height="177"></p>
               </div>
               <div class="slide">
                  <h1>Inserting Math equations..</h1>
                  <p>This requires basic knowledge of <strong>LATEX</strong> language. Click on following Image to get more help..<a href="http://www.sciweavers.org/free-online-latex-equation-editor" target="_blank"><img style="display: block; float: none; margin-left: auto; margin-right: auto" src="https://nivo-slider-mine.googlecode.com/svn/nathanslider/latex.png" width="500" height="187"></a></p>
               </div>               
               
               
            </div>
            <a href="#" class="prev"><img src="http://nivo-slider-mine.googlecode.com/svn/nathanslider/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
            <a href="#" class="next"><img src="http://nivo-slider-mine.googlecode.com/svn/nathanslider/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
         </div>
         <img src="http://nivo-slider-mine.googlecode.com/svn/nathanslider/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
      </div>
      <div id="footer">
         <p>Visit our engineering forum <a href="http://engineering.forumotions.info/" target="_blank">http://engineering.forumotions.info</a>.</p>
         
         <p>© 2011 <a href="http://engineering.forumotions.info/" target="_blank">Engineer's Allure</a>. All rights reserved.</p>
      </div>
   </div>
</body>

<div class="flt-wdt">
<a href="http://www.google.com/chrome/" target="_blank" title="Download Chrome"><img alt="Download Chrome" src="https://nivo-slider-mine.googlecode.com/svn/nathanslider/Google_Chrome_Icon.png" /></a>
 
<a href="http://www.mozilla.com/" target="_blank" title="Download Firefox"><img alt="Download Firefox" src="https://nivo-slider-mine.googlecode.com/svn/nathanslider/Mozilla Firefox.png" /></a>
</div>

</html>

offline check its works PERFECt:
Cannot make this html page work 56910

But in forumotion; slides don't animate
Cannot make this html page work 57010

any help...


Last edited by ioncube on May 27th 2011, 12:37 pm; edited 1 time in total
ioncube
ioncube
Forumember

Male Posts : 279
Reputation : 41
Language : eng
Location : Pakistan

http://defencedog.blogspot.com/

Back to top Go down

Solved Re: Cannot make this html page work

Post by kirk May 27th 2011, 9:07 am

here you go.


Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Video Tutorials</title>

<link rel="stylesheet" href="http://nivo-slider-mine.googlecode.com/svn/nathanslider/global1.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://nivo-slider-mine.googlecode.com/svn/nathanslider/slides.min.jquery.js"></script>
<script>
$(function(){
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#','');
}
// Initialize Slides
$('#slides').slides({
preload: true,
preloadImage: 'http://nivo-slider-mine.googlecode.com/svn/nathanslider/loading.gif',
generatePagination: true,
play: 5000,
pause: 2500,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
});
</script>
</head>

<style>


.flt-wdt{
position:fixed;
margin-right:10px;
right:0;
top:40%;
}
.flt-wdt img{
float:right;
clear:right;
margin:5px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.flt-wdt img:hover{
-moz-transform: scale(1.2) rotate(6deg);
-webkit-transform: scale(1.2) rotate(6deg);
-o-transform: scale(1.2) rotate(6deg);
-ms-transform: scale(1.2) rotate(6deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1.2) rotate(6deg);
}

</style>

<body>
<div id="container">
<div id="example">
<div id="slides">
<div class="slides_container">
<div class="slide">
<h1>Compatibility</h1>
<p align="center">Works best on: <img style="display: block; float: none; margin-left: auto; margin-right: auto" src="https://nivo-slider-mine.googlecode.com/svn/nathanslider/Firefox-Chrome-Compared1.png" width="345" height="173"></p>

</div>
<div class="slide">

<p><iframe width="525" height="250" src="http://www.youtube.com/embed/-MbnimSr43o" frameborder="0" allowfullscreen></iframe></p>

</div>
<div class="slide">

<p><iframe width="525" height="250" src="http://www.youtube.com/embed/VjnddieqBJc" frameborder="0" allowfullscreen></iframe></p>

</div>
<div class="slide">
<h1>Replying to posts..</h1>
<p>Answering questions/queries in post uses similar commands as in posting a question..<img style="display: block; float: none; margin-left: auto; margin-right: auto" src="https://nivo-slider-mine.googlecode.com/svn/nathanslider/answer.png" width="177" height="177"></p>
</div>

<div class="slide">
<h1>Inserting Math equations..</h1>
<p>This requires basic knowledge of <strong>LATEX</strong> language. Click on following Image to get more help..<a href="http://www.sciweavers.org/free-online-latex-equation-editor" target="_blank"><img style="display: block; float: none; margin-left: auto; margin-right: auto" src="https://nivo-slider-mine.googlecode.com/svn/nathanslider/latex.png" width="500" height="187"></a></p>
</div>


</div>
<a href="#" class="prev"><img src="http://nivo-slider-mine.googlecode.com/svn/nathanslider/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
<a href="#" class="next"><img src="http://nivo-slider-mine.googlecode.com/svn/nathanslider/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
</div>
<img src="http://nivo-slider-mine.googlecode.com/svn/nathanslider/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
</div>

<div id="footer">
<p>Visit our engineering forum <a href="http://engineering.forumotions.info/" target="_blank">http://engineering.forumotions.info</a>.</p>

<p>© 2011 <a href="http://engineering.forumotions.info/" target="_blank">Engineer's Allure</a>. All rights reserved.</p>
</div>
</div>
</body>

<div class="flt-wdt">
<a href="http://www.google.com/chrome/" target="_blank" title="Download Chrome"><img alt="Download Chrome" src="https://nivo-slider-mine.googlecode.com/svn/nathanslider/Google_Chrome_Icon.png" /></a>

<a href="http://www.mozilla.com/" target="_blank" title="Download Firefox"><img alt="Download Firefox" src="https://nivo-slider-mine.googlecode.com/svn/nathanslider/Mozilla Firefox.png" /></a>
</div>

</html>

it works but the vids are getting cut off for me for some reason.
So i dont know what that is, or causing it? not sure if it's anything to do with the code or not?
kirk
kirk
Forumaster

Male Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Solved Re: Cannot make this html page work

Post by ioncube May 27th 2011, 12:36 pm

kirk; sir you are really a PRO; thnx
Videos work fine on my opera/chrome

Cannot make this html page work 56911
Cannot make this html page work 57010
ioncube
ioncube
Forumember

Male Posts : 279
Reputation : 41
Language : eng
Location : Pakistan

http://defencedog.blogspot.com/

Back to top Go down

Solved Re: Cannot make this html page work

Post by Sanket May 27th 2011, 12:38 pm

Since this thread is marked solved, I will lock this thread.
Cannot make this html page work 2j4t5a8

Sanket Smile
Sanket
Sanket
ForumGuru

Male Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai

Back to top Go down

Back to top

- Similar topics

The forum of the forums :: Miscellaneous :: Garbage

 
Permissions in this forum:
You cannot reply to topics in this forum