The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Cannot make this html page work

View previous topic View next topic Go down

Solved Cannot make this html page work

Post by ioncube on 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:


But in forumotion; slides don't animate


any help...


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

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 on 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
Forumaster

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

Back to top Go down

Solved Re: Cannot make this html page work

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

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



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 on May 27th 2011, 12:38 pm

Since this thread is marked solved, I will lock this thread.


Sanket Smile


Sanket
ForumGuru

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

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


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