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.

HTML Pages and Java/JQuery

View previous topic View next topic Go down

Solved HTML Pages and Java/JQuery

Post by CatherinaAndrea on November 15th 2011, 1:54 pm

A quick question about HTLM pages. Does Java or JQuery not apply to the HTML pages? I can't get any of my codes to work, all the html and css works, but not the deciding java or jquery.

Any ideas?

CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: HTML Pages and Java/JQuery

Post by Guest on November 15th 2011, 2:27 pm

Add after <head> tag:
Code:
<script type="text/javascript">
YOUR SCRIPT HERE
</script>

Guest
Guest


Back to top Go down

Solved Re: HTML Pages and Java/JQuery

Post by CatherinaAndrea on November 15th 2011, 2:43 pm

hmm still not working .... this is my code in the html page .... i know it probably looks very unclean and all over the place, but i'm new to this Embarassed

Code:
<html>
<head>
<script type="text/javascript">
$("#pageflip").hover(function() { //On hover...
   $("#pageflip img , .msg_block").stop()
      .animate({ //Animate and expand the image and the msg_block (Width + height)
         width: '300px',
         height: '300px'
      }, 500);
   } , function() {
   $("#pageflip img").stop() //On hover out, go back to original size 50x50
      .animate({
         width: '50px',
         height: '50px'
      }, 220);
   $(".msg_block").stop() //On hover out, go back to original size 50x50
      .animate({
         width: '50px',
         height: '50px'
      }, 200); //Note this one retracts a bit faster (to prevent glitching in IE)
});
</script>
</head>
 <style>
body {
background-repeat: no-repeat;
background-position: top center;
background-color: #202020;
}

</style>
<body>
<body background ="http://i40.servimg.com/u/f40/14/90/77/10/naviga11.jpg" bgproperties="fixed">
<table>
<tr>
<div id="pageflip">
   <a href="#">
      <img src="http://i216.photobucket.com/albums/cc174/ToxiCure/Corner.png" alt="" />
      <span class="msg_block">Subscribe via RSS</span>
   </a>
</div>
<style>
#pageflip {
   position: relative;
}
#pageflip img {
   width: 50px; height: 50px;
   z-index: 99;
   position: absolute;
   right: 0; top: 0;
   -ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
   width: 50px; height: 50px;
   position: absolute;
   z-index: 50;
   right: 0; top: 0;
   background: url(http://i216.photobucket.com/albums/cc174/ToxiCure/InfoCorner.png) no-repeat right top;
   text-indent: -9999px;
}
</style>
</tr>
</table>
</body>
</html>

CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: HTML Pages and Java/JQuery

Post by Guest on November 15th 2011, 2:50 pm

Replace with:
Code:
<html>
<head>

<script type="text/javascript">
$("#pageflip").hover(function() { //On hover...
  $("#pageflip img , .msg_block").stop()
      .animate({ //Animate and expand the image and the msg_block (Width + height)
        width: '300px',
        height: '300px'
      }, 500);
  } , function() {
  $("#pageflip img").stop() //On hover out, go back to original size 50x50
      .animate({
        width: '50px',
        height: '50px'
      }, 220);
  $(".msg_block").stop() //On hover out, go back to original size 50x50
      .animate({
        width: '50px',
        height: '50px'
      }, 200); //Note this one retracts a bit faster (to prevent glitching in IE)
});
</script>

 <style>
body {
background-repeat: no-repeat;
background-position: top center;
background-color: #202020;
}
 

#pageflip {
  position: relative;
}
#pageflip img {
  width: 50px; height: 50px;
  z-index: 99;
  position: absolute;
  right: 0; top: 0;
  -ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
  width: 50px; height: 50px;
  position: absolute;
  z-index: 50;
  right: 0; top: 0;
  background: url(http://i216.photobucket.com/albums/cc174/ToxiCure/InfoCorner.png) no-repeat right top;
  text-indent: -9999px;
}
</style>

</head>

<body background="http://i40.servimg.com/u/f40/14/90/77/10/naviga11.jpg" bgproperties="fixed">
<table>
<tr>

<div id="pageflip">
  <a href="#">
      <img src="http://i216.photobucket.com/albums/cc174/ToxiCure/Corner.png" alt="" />
      <span class="msg_block">Subscribe via RSS</span>
  </a>
</div>

</tr>
</table>
</body>
</html>

Guest
Guest


Back to top Go down

Solved Re: HTML Pages and Java/JQuery

Post by CatherinaAndrea on November 15th 2011, 3:08 pm

still no movement on the right top corner

http://m3rcs.forummotion.com/h1-loading-page#

i should probably just stick to the basic forumotion stuff cause this is way over my head to make it working

CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: HTML Pages and Java/JQuery

Post by Guest on November 15th 2011, 3:11 pm

Where you gave the script? Smile

Guest
Guest


Back to top Go down

Solved Re: HTML Pages and Java/JQuery

Post by Saxaca on November 15th 2011, 3:38 pm

You're not including a copy of jQuery into your page. Use something like this:
Code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

Saxaca
Forumember

Male Posts : 539
Reputation : 26
Language : Markup.

Back to top Go down

Solved Re: HTML Pages and Java/JQuery

Post by CatherinaAndrea on November 15th 2011, 4:10 pm

Where should i put that code? into the html page code area?

CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: HTML Pages and Java/JQuery

Post by Guest on November 15th 2011, 4:22 pm

He mean:
Code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">YOUR JAVASCRIPT HERE</script>

Like:
Code:
<html>
<head>
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
$("#pageflip").hover(function() { //On hover...
  $("#pageflip img , .msg_block").stop()
      .animate({ //Animate and expand the image and the msg_block (Width + height)
        width: '300px',
        height: '300px'
      }, 500);
  } , function() {
  $("#pageflip img").stop() //On hover out, go back to original size 50x50
      .animate({
        width: '50px',
        height: '50px'
      }, 220);
  $(".msg_block").stop() //On hover out, go back to original size 50x50
      .animate({
        width: '50px',
        height: '50px'
      }, 200); //Note this one retracts a bit faster (to prevent glitching in IE)
});
</script>
 
 <style>
body {
background-repeat: no-repeat;
background-position: top center;
background-color: #202020;
}
 
 
#pageflip {
  position: relative;
}
#pageflip img {
  width: 50px; height: 50px;
  z-index: 99;
  position: absolute;
  right: 0; top: 0;
  -ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
  width: 50px; height: 50px;
  position: absolute;
  z-index: 50;
  right: 0; top: 0;
  background: url(http://i216.photobucket.com/albums/cc174/ToxiCure/InfoCorner.png) no-repeat right top;
  text-indent: -9999px;
}
</style>
 
</head>
 
<body background="http://i40.servimg.com/u/f40/14/90/77/10/naviga11.jpg" bgproperties="fixed">
<table>
<tr>
 
<div id="pageflip">
  <a href="#">
      <img src="http://i216.photobucket.com/albums/cc174/ToxiCure/Corner.png" alt="" />
      <span class="msg_block">Subscribe via RSS</span>
  </a>
</div>
 
</tr>
</table>
</body>
</html>

Guest
Guest


Back to top Go down

Solved Re: HTML Pages and Java/JQuery

Post by Nera. on November 15th 2011, 4:32 pm

Hi,

Is this what you are trying to get?

http://someonelikeyou.forumcroatian.com/h2-s

Code:
<html>
        <head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
        <script type="text/javascript">
$(document).ready(function(){
$("#pageflip").hover(function() { //On hover...
  $("#pageflip img , .msg_block").stop()
      .animate({ //Animate and expand the image and the msg_block (Width + height)
        width: '300px',
        height: '300px'
      }, 500);
  } , function() {
  $("#pageflip img").stop() //On hover out, go back to original size 50x50
      .animate({
        width: '50px',
        height: '50px'
      }, 220);
  $(".msg_block").stop() //On hover out, go back to original size 50x50
      .animate({
        width: '50px',
        height: '50px'
      }, 200); //Note this one retracts a bit faster (to prevent glitching in IE)
});
});
        </script>
        </head>
        <style>
        body {
        background-repeat: no-repeat;
        background-position: top center;
        background-color: #202020;
        }
       
        </style>
        <body>
        <body background ="http://i40.servimg.com/u/f40/14/90/77/10/naviga11.jpg" bgproperties="fixed">
        <table>
        <tr>
        <div id="pageflip">
          <a href="#">
              <img src="http://i216.photobucket.com/albums/cc174/ToxiCure/Corner.png" alt="" />
              <span class="msg_block">Subscribe via RSS</span>
          </a>
        </div>
        <style>
        #pageflip {
          position: relative;
        }
        #pageflip img {
          width: 50px; height: 50px;
          z-index: 99;
          position: absolute;
          right: 0; top: 0;
          -ms-interpolation-mode: bicubic;
        }
        #pageflip .msg_block {
          width: 50px; height: 50px;
          position: absolute;
          z-index: 50;
          right: 0; top: 0;
          background: url(http://i216.photobucket.com/albums/cc174/ToxiCure/InfoCorner.png) no-repeat right top;
          text-indent: -9999px;
        }
        </style>
        </tr>
        </table>
        </body>
        </html>

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: HTML Pages and Java/JQuery

Post by CatherinaAndrea on November 15th 2011, 7:30 pm

Wow you're my hero that's awesome! Very Happy That is exactly what i was trying to achieve.

Thank you so much, now i can learn what i did wrong and continue with the rest.

Topic Solved

CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: HTML Pages and Java/JQuery

Post by Nera. on November 15th 2011, 7:36 pm

You did not link the JS and you forgot the $(document).ready(function(){

Welcome.

Topic solved

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

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