World Dezign

Well, when I am testing some codes using java and jquery, they seem to work very well on a HTML page (ACP>Modules>HTML Pages).But when I copy the code to a template such as "overall header", the code is ignored !!!

What should I do ?

Thank's

How does the code look like?

Did you include the jQuery library in your template?

what java?Its javascript!!!!!!!

Yeah I did !

Have a look !

Spoiler:

with a quick look the whole code is messed up and you didnt include the library itself

He did.. http://code.jquery.com/jquery-latest.pack.js

Well, from what I see, you just copied the whole code plainly into your template. That's not something very rational for template editing.

So what should I do ??? Can I do something ? The code works very very well on an HTML page (ACP>>Modules>>HTML pages management>>New HTML page) !

How can I add it on the template ??

thank's

You can go write it custom..

?????? Can you explain me more ?

Thank you...!

Remove the <title>.
And I think I forgot to ask, what do you mean by ignored?

Japorized wrote:Remove the <title>.
And I think I forgot to ask, what do you mean by ignored?

Code:


<left><table id="login-box"><tr><td>

<center><font size="3" color="lightgreen"><a href="#dialog2" name="modal">Παρακαλώ δες αυτήν την ανακοίνωση !!!</a></font><br><font size="2" color="red">Δεν είναι διαφημιστικό</font></center>

 </td></tr></table></left>

<style>

#login-box {
-moz-box-shadow:0 0 20px #FF8C00;
-webkit-box-shadow:0 0 20px #FF8C00;
box-shadow:0 0 20px #FF8C00;


    background-color: #1f1f1f;
    position:fixed;
    top: 50%;
left:0;
 
    padding-left: 5px;
    border-left: 3px outset #FF6F00;
    border-right: 3px outset #FF6F00;
    border-bottom: 3px outset #FF6F00;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    z-index: 999;
    opacity: 0.8;
}


</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.js"></script>
<script type="text/javascript">
 
$(document).ready(function() { 
 
  //select all the a tag with name equal to modal
  $('a[name=modal]').click(function(e) {
      //Cancel the link behavior
      e.preventDefault();
     
      //Get the A tag
      var id = $(this).attr('href');
 
      //Get the screen height and width
      var maskHeight = $(document).height();
      var maskWidth = $(window).width();
 
      //Set heigth and width to mask to fill up the whole screen
      $('#mask').css({'width':maskWidth,'height':maskHeight});
     
      //transition effect     
      $('#mask').fadeIn(1000); 
      $('#mask').fadeTo("slow",0.8); 
 
      //Get the window height and width
      var winH = $(window).height();
      var winW = $(window).width();
           
      //Set the popup window to center
      $(id).css('top',  winH/2-$(id).height()/2);
      $(id).css('left', winW/2-$(id).width()/2);
 
      //transition effect
      $(id).fadeIn(2000);
 
  });
 
  //if close button is clicked
  $('.window .close').click(function (e) {
      //Cancel the link behavior
      e.preventDefault();
     
      $('#mask').hide();
      $('.window').hide();
  });     
 
  //if mask is clicked
  $('#mask').click(function () {
      $(this).hide();
      $('.window').hide();
  });       
 
});
 
</script>
<style>

 
#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
 
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}
 
#boxes #dialog {
  width:375px;
  height:203px;
  padding:10px;
  background-color:#ffffff;
}
 
#boxes #dialog1 {
  width:375px;
  height:203px;
}
 
#dialog1 .d-header {
  background:url(images/login-header.png) no-repeat 0 0 transparent;
  width:375px;
  height:150px;
}
 
#dialog1 .d-header input {
  position:relative;
  top:60px;
  left:100px;
  border:3px solid #cccccc;
  height:22px;
  width:200px;
  font-size:15px;
  padding:5px;
  margin-top:4px;
}
 
#dialog1 .d-blank {
  float:left;
  background:url(images/login-blank.png) no-repeat 0 0 transparent;
  width:267px;
  height:53px;
}
 
#dialog1 .d-login {
  float:left;
  width:108px;
  height:53px;
}
 
#boxes #dialog2 {
  background:url(images/notice.png) no-repeat 0 0 transparent;
  width:326px;
  height:229px;
  padding:50px 0 20px 25px;
}
</style>

 
<div id="boxes">
 
<div id="dialog" class="window">
Simple Modal Window |
<a href="#"class="close"/>Close it</a>
</div>
 
<!-- Start of Login Dialog -->
<div id="dialog1" class="window">
  <div class="d-header">
    <input type="text" value="username" onclick="this.value=''"/><br/>
    <input type="password" value="Password" onclick="this.value=''"/> 
  </div>
  <div class="d-blank"></div>
  <div class="d-login"><input type="image" alt="Login" title="Login" src="images/login-button.png"/></div>
</div>
<!-- End of Login Dialog -->
 
 
 
<!-- Start of Sticky Note -->
<div id="dialog2" class="window">
  So, with this <b>Simple Jquery Modal Window</b>, it can be in any shapes you want! Simple and Easy to modify : ) <br/><br/>
<input type="button" value="Close it" class="close"/>
</div>
<!-- End of Sticky Note -->
 
 
 
<!-- Mask to cover the whole screen -->
  <div id="mask"></div>
</div>

It did not work.... :(


Well, I do not know what happens... But it works great on a HTML page...! Why it can't be applied to overall header ?

EDIT ! Look it on my HTML page !!!

http://greek-cosmos.forumotion.com/h27-page

Anything new ?

Your modified template please.

Japorized wrote:Your modified template please.

guess its solved
[solved]