PDA

View Full Version : fade effect for images



auriaks
05-08-2010, 08:12 PM
Hi,
I have problem with javascript for image effects...

Here is the LINK (http://www.laisvasprotas.xz.lt/index.php)...

login with theese nick and pass:
nick: google
pass: googleads

the problem:

When you log into, on the top of the page are 4 images with fade effect...
But effect is wrong. When I came first I see those images in full collors. How to change my script to show them in grey when I first came?

Thanks in advance...

jscheuer1
05-09-2010, 04:45 AM
Since you already have jQuery on the page, it would probably be easiest to use that. BTW, you have it twice:


<script type="text/javascript" src="../scripts/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">

You only need it once. The first instance is being overwritten by the second. The first is locally hosted and version 1.4.1 uncompressed, the second is the google api remote hosted version 1.3.2 compressed. You probably should be using version 1.4.2 compressed - either locally hosted or remote. To use the remote version, replace both of the above tags with:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">

Or follow the address in that tag and save your own copy for local hosting.

OK, with or without that change, add the highlighted script code as indicated below:


<div class="images">
<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/reklama.php');">
<div class="fade" >
<img border="0" title="Sukurkite reklama" width="80" height="48" alt="Sukurkite reklama" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/reklama_real.png" />
<img border="0" title="Sukurkite reklama" width="80" height="48" alt="Sukurkite reklama" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/reklama.png" />
</div>
</a>
<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/sveikinimas.php');">
<div class="fade" >

<img border="0" title="Sukurkite sveikinima" width="80" height="48" alt="Sukurkite sveikinima" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/sveikinimas_real.png" />
<img border="0" title="Sukurkite sveikinima" width="80" height="48" alt="Sukurkite sveikinima" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/sveikinimas.png" />
</div>
</a>
<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/youtube.php');">
<div class="fade" >
<img border="0" title="Parodyti YouTube vaizdeli" width="80" height="48" alt="Parodyti YouTube vaizdeli" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/youtube_real.png" />
<img border="0" title="Parodyti YouTube vaizdeli" width="80" height="48" alt="Parodyti YouTube vaizdeli" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/youtube.png" />
</div>

</a>
<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/komentaras.php');">
<div class="fade" >
<img border="0" title="Brukštelkit kaika =]" width="80" height="48" alt="Brukštelkit kaika =]" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/komentaras_real.png" />
<img border="0" title="Brukštelkit kaika =]" width="80" height="48" alt="Brukštelkit kaika =]" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/komentaras.png" />
</div>
</a>
<script type="text/javascript">
jQuery('.fade img').each(function(i){if(i % 2 === 0){$(this).css('opacity', 0);}});
</script>
</div>

auriaks
05-11-2010, 12:38 PM
fade effect is not working...

jscheuer1
05-11-2010, 02:53 PM
That's because you removed your script for that. I never said to do that, simply to add the jQuery one liner. Also, now I see three versions of jQuery on the page. It would be best to clean that up.

auriaks
05-11-2010, 03:40 PM
this is all my script... will you help me? :D

because i don't know where I do something wrong.

<div class="sidebox">
<div class="boxhead"></div>
<div class="boxbody">
<center>
<small>Dar nesinaudojot naujomis funkcijomis? - Brūkštelkit mums...</small><br/>
<div class="images">
<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/reklama.php');">
<div class="fade" >
<img border="0" title="Sukurkite reklamą" width="80" height="48" alt="Sukurkite reklamą" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/reklama_real.png" />
<img border="0" title="Sukurkite reklamą" width="80" height="48" alt="Sukurkite reklamą" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/reklama.png" />
</div>
</a>
<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/sveikinimas.php');">
<div class="fade" >
<img border="0" title="Sukurkite sveikinimą" width="80" height="48" alt="Sukurkite sveikinimą" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/sveikinimas_real.png" />
<img border="0" title="Sukurkite sveikinimą" width="80" height="48" alt="Sukurkite sveikinimą" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/sveikinimas.png" />
</div>
</a>
<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/youtube.php');">
<div class="fade" >
<img border="0" title="Parodyti YouTube vaizdelį" width="80" height="48" alt="Parodyti YouTube vaizdelį" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/youtube_real.png" />
<img border="0" title="Parodyti YouTube vaizdelį" width="80" height="48" alt="Parodyti YouTube vaizdelį" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/youtube.png" />
</div>
</a>
<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/komentaras.php');">
<div class="fade" >
<img border="0" title="Brūkštelkit kaiką =]" width="80" height="48" alt="Brūkštelkit kaiką =]" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/komentaras_real.png" />
<img border="0" title="Brūkštelkit kaiką =]" width="80" height="48" alt="Brūkštelkit kaiką =]" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/komentaras.png" />
</div>
</a>
</div>
<br/><br/><small>Kaip įdėti?
<a target="_blank" href="images/wall_tutor/reklama_tutor.png" > Reklamą </a>|
<a target="_blank" href="images/wall_tutor/sveikinimas_tutor.png" > Sveikinimą </a>|
<a target="_blank" href="images/wall_tutor/youtube_tutor.png" > Youtube įrašą </a>|
<a target="_blank" href="images/wall_tutor/komentaras_tutor.png" > Komentarą </a>
</small><br/>
<div id="example-placeholder"><a><small></small></a></div>
<script type="text/javascript" src="../scripts/fade_effect.js"></script>
</center>
</div>
<div class="boxfooter"></div>
</div>
<div style="clear: both"><hr/></div>
<div class="post">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
var page = 1;
function kitas()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
page = page+1;
xmlhttp.open("GET","content/tables/tb_index_msg.php?page="+page,false);
xmlhttp.send(null);
document.getElementById('outputas').innerHTML=xmlhttp.responseText;
}

function buves()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
page = page-1;
xmlhttp.open("GET","content/tables/tb_index_msg.php?page="+page,false);
xmlhttp.send(null);
document.getElementById('outputas').innerHTML=xmlhttp.responseText;
}

function pirmas()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","content/tables/tb_index_msg.php?page=1",false);
xmlhttp.send(null);
document.getElementById('outputas').innerHTML=xmlhttp.responseText;
}

function paskutinis()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","content/tables/tb_index_msg.php?page=<?php echo $psl?>",false);
xmlhttp.send(null);
document.getElementById('outputas').innerHTML=xmlhttp.responseText;
}

var all = "<?php echo $psl; ?>";
setTimeout('pirmas()', 600)

if (page==1) {
document.write("<br/><center><input type='button' value='Pirmas' onmouseover='this.style.color='blue';' onmouseout =\"this.style.color='blue';\" onclick='pirmas();' />")
document.write("<input type='button' value='Kitas' onmouseover='this.style.color='blue';' onmouseout =\"this.style.color='blue';\" onclick='kitas();' />")
document.write("<input type='button' value='Paskutinis' onmouseover='this.style.color='blue';' onmouseout =\"this.style.color='blue';\" onclick='paskutinis();' /></center><br/>")
} else {
document.write("<br/><center><input type='button' value='Atgal' onmouseover='this.style.color='blue';' onmouseout =\"this.style.color='blue';\" onclick='buves();' />")
document.write("<input type='button' value='Pirmas' onmouseover='this.style.color='blue';' onmouseout =\"this.style.color='blue';\" onclick='pirmas();' />")
document.write("<input type='button' value='Kitas' onmouseover='this.style.color='blue';' onmouseout =\"this.style.color='blue';\" onclick='kitas();' /></center><br/>")
}

</script>
<div id="outputas"></div>
<center><p class="links"><a href='../redirect_upload/search.php' class='more'>Paieška</a></p></center>
</div>

vwphillips
05-11-2010, 04:03 PM
the real image needs to be hidden until fading in then hidden when faded out

without JQUERY

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.fade {
position:relative;width:80px;height:48px;float:left;
}

.fade IMG {
position:absolute;left:0px;top:0px;
}

.fade .real {
visibility:hidden;
}

/*]]>*/
</style>
<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 1 = the initial value. (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
// field 0 the minimum value. (digits)
// field 1 the maximum value. (digits)
// parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
//
// Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: The scale is of particular use when re-calling the effect
// in mid progression to retain an constant rate of progression.
// Note 4: The current effect value is recorded in A.data[0].
// Note 5: A function may be called on completion of the effect by assigning the function
// to the animator intance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.58K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[srt||0];
return this;
}

zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.neg=srt<0||fin<0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
}

zxcAnimate.prototype.cng=function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
this.apply();
if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
}

zxcAnimate.prototype.apply=function(){
if (isFinite(this.data[0])){
if (this.data[0]<0&&!this.neg) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}

function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


</script>

</head>

<body>
<div class="images">
<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/reklama.php');">
<div class="fade" >
<img class="real" border="0" title="Sukurkite reklama" width="80" height="48" alt="Sukurkite reklama" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/reklama_real.png" />
<img border="0" title="Sukurkite reklama" width="80" height="48" alt="Sukurkite reklama" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/reklama.png" />
</div>
</a>
<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/sveikinimas.php');">
<div class="fade" >
<img class="real" border="0" title="Sukurkite sveikinima" width="80" height="48" alt="Sukurkite sveikinima" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/sveikinimas_real.png" />
<img border="0" title="Sukurkite sveikinima" width="80" height="48" alt="Sukurkite sveikinima" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/sveikinimas.png" />
</div>
</a>
<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/youtube.php');">
<div class="fade" >
<img class="real" border="0" title="Parodyti YouTube vaizdeli" width="80" height="48" alt="Parodyti YouTube vaizdeli" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/youtube_real.png" />
<img border="0" title="Parodyti YouTube vaizdeli" width="80" height="48" alt="Parodyti YouTube vaizdeli" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/youtube.png" />
</div>

</a>
<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/komentaras.php');">
<div class="fade" >
<img class="real" border="0" title="Brukštelkit kaika =]" width="80" height="48" alt="Brukštelkit kaika =]" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/komentaras_real.png" />
<img border="0" title="Brukštelkit kaika =]" width="80" height="48" alt="Brukštelkit kaika =]" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/komentaras.png" />
</div>
</a>
</div>

<script type="text/javascript">
/*<![CDATA[*/


function Fade(o){
var divs=zxcByClassName(o.ClassName);
this.fades=[];
for (var oop,imgs,z0=0;z0<divs.length;z0++){
imgs=divs[z0].getElementsByTagName('IMG');
if (imgs.length==2){
this.addevt(imgs[1],'mouseover','Fade',this.fades.length);
this.addevt(imgs[1],'mouseout','Fade',this.fades.length);
oop=new zxcAnimate('opacity',imgs[0],0);
oop.Complete=function(){
if (this.data[0]==0){
this.obj.style.visibility='hidden';
}
}
this.fades.push(oop);
}
}
this.ms=o.Duration||1000
}

Fade.prototype.Fade=function(e,nu){
var oop=this.fades[nu];
oop.obj.style.visibility='visible';
oop.animate(oop.data[0],e.type=='mouseover'?100:0,1000,[0,100]);
}

Fade.prototype.addevt=function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
else o['on'+t]=o[f];
}
}


function zxcByClassName(nme,el,tag){
if (typeof(el)=='string') el=document.getElementById(el);
el=el||document;
for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
}

new Fade({
ClassName:'fade',
Duration:1000
});
/*]]>*/
</script></body>

</html>

auriaks
05-11-2010, 04:27 PM
but what I have to do to change in script given??

auriaks
05-11-2010, 05:33 PM
I want to edit excisting script by myself and delete all mistakes, but I think I will ruin all the script...

jscheuer1
05-12-2010, 12:25 AM
All I know is that at the time I first responded to your question you had a script that fadded the images in onmouseover, and faded them out onmouseout, revealing the grayed out images beneath. Everything was working fine, except that initially the images were faded in. I only added a jQuery oneliner that would make them faded out to begin with. I tested this locally, it worked cross browser. Unfortunately I later overwrote the test file and deleted it, so I cannot retrieve it. But I can assure you it worked.

All you need to do is to restore your page to how it was when you asked the question, add my jQuery oneliner where I recommended, and it will be fine.

But you could do the whole thing with jQuery:


<div class="images">
<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/reklama.php');">
<div class="fade" >
<img border="0" title="Sukurkite reklama" width="80" height="48" alt="Sukurkite reklama" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/reklama_real.png" />
<img border="0" title="Sukurkite reklama" width="80" height="48" alt="Sukurkite reklama" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/reklama.png" />
</div>
</a>
<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/sveikinimas.php');">
<div class="fade" >
<img border="0" title="Sukurkite sveikinima" width="80" height="48" alt="Sukurkite sveikinima" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/sveikinimas_real.png" />
<img border="0" title="Sukurkite sveikinima" width="80" height="48" alt="Sukurkite sveikinima" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/sveikinimas.png" />
</div>
</a>
<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/youtube.php');">
<div class="fade" >
<img border="0" title="Parodyti YouTube vaizdeli" width="80" height="48" alt="Parodyti YouTube vaizdeli" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/youtube_real.png" />
<img border="0" title="Parodyti YouTube vaizdeli" width="80" height="48" alt="Parodyti YouTube vaizdeli" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/youtube.png" />
</div>
</a>
<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/komentaras.php');">
<div class="fade" >
<img border="0" title="Brukštelkit kaika =]" width="80" height="48" alt="Brukštelkit kaika =]" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/komentaras_real.png" />
<img border="0" title="Brukštelkit kaika =]" width="80" height="48" alt="Brukštelkit kaika =]" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/komentaras.png" />
</div>
</a>
<script type="text/javascript">
(function($){
$('.fade img').each(function(i){if(i % 2 === 0){$(this).css('display', 'none');}});
$('.fade').hover(function(){$(this).find('img').eq(0).fadeIn();}, function(){$(this).find('img').eq(0).fadeOut();});
})(jQuery);
</script>
</div>

But you still should clean up the situation of now having 3 external tags to jQuery. I recommend moving up the third to replace the first two.

auriaks
05-12-2010, 11:59 AM
All I know is that at the time I first responded to your question you had a script that fadded the images in onmouseover, and faded them out onmouseout, revealing the grayed out images beneath. Everything was working fine, except that initially the images were faded in. I only added a jQuery oneliner that would make them faded out to begin with. I tested this locally, it worked cross browser. Unfortunately I later overwrote the test file and deleted it, so I cannot retrieve it. But I can assure you it worked.

All you need to do is to restore your page to how it was when you asked the question, add my jQuery oneliner where I recommended, and it will be fine.

But you could do the whole thing with jQuery:


<div class="images">
<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/reklama.php');">
<div class="fade" >
<img border="0" title="Sukurkite reklama" width="80" height="48" alt="Sukurkite reklama" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/reklama_real.png" />
<img border="0" title="Sukurkite reklama" width="80" height="48" alt="Sukurkite reklama" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/reklama.png" />
</div>
</a>
<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/sveikinimas.php');">
<div class="fade" >
<img border="0" title="Sukurkite sveikinima" width="80" height="48" alt="Sukurkite sveikinima" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/sveikinimas_real.png" />
<img border="0" title="Sukurkite sveikinima" width="80" height="48" alt="Sukurkite sveikinima" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/sveikinimas.png" />
</div>
</a>
<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/youtube.php');">
<div class="fade" >
<img border="0" title="Parodyti YouTube vaizdeli" width="80" height="48" alt="Parodyti YouTube vaizdeli" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/youtube_real.png" />
<img border="0" title="Parodyti YouTube vaizdeli" width="80" height="48" alt="Parodyti YouTube vaizdeli" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/youtube.png" />
</div>
</a>
<a style='text-decoration:none' href="javascript:void(0)" onclick="example_ajax_request('../ajx_script/komentaras.php');">
<div class="fade" >
<img border="0" title="Brukštelkit kaika =]" width="80" height="48" alt="Brukštelkit kaika =]" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/komentaras_real.png" />
<img border="0" title="Brukštelkit kaika =]" width="80" height="48" alt="Brukštelkit kaika =]" src="http://www.laisvasprotas.xz.lt/images/wall_tutor/wall_icons/komentaras.png" />
</div>
</a>
<script type="text/javascript">
(function($){
$('.fade img').each(function(i){if(i % 2 === 0){$(this).css('display', 'none');}});
$('.fade').hover(function(){$(this).find('img').eq(0).fadeIn();}, function(){$(this).find('img').eq(0).fadeOut();});
})(jQuery);
</script>
</div>

But you still should clean up the situation of now having 3 external tags to jQuery. I recommend moving up the third to replace the first two.

thanks I done it and it works well... :D

What you mean "3 external tags to jQuery"? I am newbie on jQuerry as you can see :D

Thanks for your time.

jscheuer1
05-12-2010, 03:34 PM
An external tag for a script is simply a script tag that has a src attribute instead of having the code on the page. One for jQuery is (for example):


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

or:


<script type="text/javascript" src="../scripts/jquery.js"></script>

You keep changing your page around in ways that I didn't suggest though. You still have three external jQuery tags. But the third one is no longer to the version I think you should be using. You've also added this external tag, which I don't think is necessary any longer:


<script type="text/javascript" src="../scripts/fade_effect.js"></script>

Here's what I would suggest, near the top of your page replace these two:


<script type="text/javascript" src="../scripts/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

with this single one:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Then further down the page where we see all this:


<script type="text/javascript">
(function($){
$('.fade img').each(function(i){if(i % 2 === 0){$(this).css('display', 'none');}});
$('.fade').hover(function(){$(this).find('img').eq(0).fadeIn();}, function(){$(this).find('img').eq(0).fadeOut();});
})(jQuery);
</script>
</div>
<br/><br/><small>Kaip ideti?
<a target="_blank" href="images/wall_tutor/reklama_tutor.png" > Reklama </a>|
<a target="_blank" href="images/wall_tutor/sveikinimas_tutor.png" > Sveikinima </a>|
<a target="_blank" href="images/wall_tutor/youtube_tutor.png" > Youtube iraša </a>|
<a target="_blank" href="images/wall_tutor/komentaras_tutor.png" > Komentara </a>
</small><br/>
<div id="example-placeholder"><a><small></small></a></div>
<script type="text/javascript" src="../scripts/fade_effect.js"></script>
</center>
</div>
<div class="boxfooter"></div>
</div>
<div style="clear: both"><hr/></div>
<div class="post">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
var page = 1;
function kitas()
{
if (window.XMLH . . .

Get rid of both of the highlighted tags.

One other thing I noticed is that since jQuery sets display: none; for the images we will fade in, to hold them in reserve so to speak, some browsers will take that to mean that they don't have to load them until jQuery starts to fade them in the first time. This makes the first fade in awkward looking for some users who haven't cached those images yet. We can fix that by adding to our code:


(function($){
$('.fade img').each(function(i){if(i % 2 === 0){var im = new Image(); im.src = $(this).css('display', 'none').attr('src');}});
$('.fade').hover(function(){$(this).find('img').eq(0).fadeIn();}, function(){$(this).find('img').eq(0).fadeOut();});
})(jQuery);

Make sure to scroll the code block to see both additions.

auriaks
05-12-2010, 09:48 PM
That was very useful post :) thanks...

Can you take a look, why my jQuerry for adding information in TV picture doesn't work in chrome and IE but works in Firefox? (Push on TV image and add information)

What is more, in IE, when I push on the images, they wont give me the output... just loading picture...

Thanks in advance :)

jscheuer1
05-13-2010, 02:54 PM
I'm not sure about the form that appears. I mean I can translate it roughly. But if I submit something it takes 24 hrs for me to see what as a result?

Anyways, this whole section is wrong:


if (page==1) {
document.write("<br/><center><input type='button' value='Pirmas' onmouseover='this.style.color='blue';' onmouseout =\"this.style.color='blue';\" onclick='pirmas();' />")
document.write("<input type='button' value='Kitas' onmouseover='this.style.color='blue';' onmouseout =\"this.style.color='blue';\" onclick='kitas();' />")
document.write("<input type='button' value='Paskutinis' onmouseover='this.style.color='blue';' onmouseout =\"this.style.color='blue';\" onclick='paskutinis();' /></center><br/>")
} else {
document.write("<br/><center><input type='button' value='Atgal' onmouseover='this.style.color='blue';' onmouseout =\"this.style.color='blue';\" onclick='buves();' />")
document.write("<input type='button' value='Pirmas' onmouseover='this.style.color='blue';' onmouseout =\"this.style.color='blue';\" onclick='pirmas();' />")
document.write("<input type='button' value='Kitas' onmouseover='this.style.color='blue';' onmouseout =\"this.style.color='blue';\" onclick='kitas();' /></center><br/>")
}

That's causing an error in IE, perhaps it is also throwing off Chrome. If you write this:


onmouseover='this.style.color='blue';'

Once written, it's equivalent to:


onmouseover="this.style.color=" blue";"

Which would result at best in no color assignment due to an invalid value and an error correction ignoring the trailing garbage blue";". And since the mouse over color is the same as the mouse out color, why bother? It could be fixed, but unless it isn't blue to begin with, it can be dropped, so you would have:


if (page==1) {
document.write("<br/><center><input type='button' value='Pirmas' onclick='pirmas();' />")
document.write("<input type='button' value='Kitas' onclick='kitas();' />")
document.write("<input type='button' value='Paskutinis' onclick='paskutinis();' /></center><br/>")
} else {
document.write("<br/><center><input type='button' value='Atgal' onclick='buves();' />")
document.write("<input type='button' value='Pirmas' onclick='pirmas();' />")
document.write("<input type='button' value='Kitas' onclick='kitas();' /></center><br/>")
}

Which will produce valid HTML code. Try that out.

There could also be other problems.

jscheuer1
05-13-2010, 03:29 PM
You should fix that problem noted in my previous post. But the issue seems to be that when you click the TV, this gets fired:


onclick="example_ajax_request('../ajx_script/reklama.php');"

I cannot see ../ajx_script/reklama.php because it's in a child folder of a parent folder not available to the public (below the root of the domain). It's code could be invalid and Firefox may be the only one capable of error correcting it. In IE, since the browser cannot navigate there anyway, there might be a problem with even finding it, or the errors could be so great that nothing can be displayed. There doesn't appear to be any error generated by the failed request, but that could just be jQuery handling that so as not to make an error on failure. AJAX request can happen like that. You could change:


function example_ajax_request_go(page){
$('#example-placeholder').load(page);
}

to force it to report problems:


function example_ajax_request_go(page){
$('#example-placeholder').load(page, function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
alert(msg + xhr.status + " " + xhr.statusText);
}
});
}

I would need to see ../ajx_script/reklama.php to get a better idea.

auriaks
05-13-2010, 06:47 PM
reklama.php


<?php include '../content/processes/IE.php'?>
<?php include '../content/tables/auth.php'?>
<?php include '../content/tables/tb_php_visuose.php'?>
<?php
$nick = $_SESSION['nick'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="lt">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="lt"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function example_ajax_request(page){
$('#example-placeholder').html('<br/><img src="http://www.electrictoolbox.com/images/ajax-loader.gif" width="220" height="19"/><br/>');
setTimeout(function(){example_ajax_request_go(page);}, 500);
}
function example_ajax_request_go(page){
$('#example-placeholder').load(page);
}
<!--
// Get the HTTP Object
function getHTTPObject(){
if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest) return new XMLHttpRequest();
else {
alert("Jūsų naršyklė nepalaiko AJAX scripto.");
return null;
}
}

// Change the value of the outputText field
function setOutput(){
if(httpObject.readyState == 4){
document.getElementById("reklama").innerHTML = httpObject.responseText;
}

}

// Implement business logic
function vykdyti(){
httpObject = getHTTPObject();
if (httpObject != null) {
httpObject.open("GET", "../ajx_script/talpinimas.php?id=reklama&paveikslelis="
+document.getElementById('paveikslelis').value+"&pavadinimas="
+document.getElementById('pavadinimas').value+"&url1="
+document.getElementById('url1').value+"&url1name="
+document.getElementById('url1name').value+"&komentaras="
+document.getElementById('komentaras').value+"&nick=<?php echo $nick?>"
, true);
httpObject.send(null);
httpObject.onreadystatechange = setOutput;
}
}
var httpObject = null;

</script>
</head>
<body>
<table width='450px'>
<tr align="center">
<td align="center">
<form name="Forma" enctype="multipart/form-data">
<table align="left" width='470px'>
<tr align='center'>
<center><small>Deja, reklama bus rodoma tik 24 valandas apkrovimo sumetimais. </small></center>
<small><div id="reklama" ></div></small>
<td>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Paveikslėlis <br/>| http://www.blog.pl/image.jpg |</b></font></td>
<td><input MAXLENGTH=1000 type="text" size='36' name="paveikslelis" id="paveikslelis" value="<?php echo $_POST['paveikslelis']; ?>"></td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Rekalmos pavadinimas&nbsp;&nbsp;</b></font></td>
<td><input MAXLENGTH=200 type="text" size='36' name="pavadinimas" id="pavadinimas" value="<?php echo $_POST['pavadinimas']; ?>"></td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Nuoroda &nbsp;&nbsp;</b></font></td>
<td><input MAXLENGTH=1000 type="text" size='36' name="url1" id="url1" value="<?php echo $_POST['url1']; ?>"></td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Nuorodos pavadinimas &nbsp;&nbsp;</b></font></td>
<td><input MAXLENGTH=1000 type="text" size='36' name="url1name" id="url1name" value="<?php echo $_POST['url1name']; ?>"></td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Papildomai apie reklamą&nbsp;&nbsp;</b></font></td>
<td><textarea MAXLENGTH=2000 type="text" name="komentaras" id="komentaras" cols='27' rows="5" value="<?php echo $_POST['komentaras']; ?>"></textarea></td>
</tr>
<tr>
<td align="right"></td>
<td><input type="button" value="Skelbti" onclick="vykdyti();" /></td>
</tr>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>



What about that 24 hours... This is the time which starts counting when you add a TV. This is time, how long it will be showing after the submitting.

More info: if you not fulfill all fields, there must be an error output. This time, there is no output.

I already tried all your suggestions - nothing worked. First comment is still on the script, other I made as it was before:

function example_ajax_request_go(page){
$('#example-placeholder').load(page);
}

jscheuer1
05-13-2010, 07:12 PM
Includes! I don't think I'll ever get to see what that page really looks like. Oh well.

I think you may have misunderstood about:


function example_ajax_request_go(page){
$('#example-placeholder').load(page, function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
alert(msg + xhr.status + " " + xhr.statusText);
}
});
}

That wasn't meant to fix anything. In fact, since all the browsers except IE appear to at least be fetching the page, it shouldn't do anything in them. In IE it should alert some reason why the load failed. Did you try it in IE with the added code above?

jscheuer1
05-13-2010, 08:14 PM
OK, I tried that in IE by pasting it into the address bar. No alert, and therefore no error with the load routine. In fact, using the IE 8 developer toolbar, I see that after hitting the TV image we get this content:


<div id="example-placeholder">
<!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" -->
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="lt"/>

The end tag for the div is assumed after that. So, I'm thinking that possibly one of your includes (probably the first one (../content/processes/IE.php):



<?php include '../content/processes/IE.php'?>
<?php include '../content/tables/auth.php'?>
<?php include '../content/tables/tb_php_visuose.php'?>

starts like that:


<!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" -->
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="lt"/>

and then has some PHP code that has as a possible branch to either:


die();

or:


exit();

Which are the same and if branched to would prevent the server from sending any more data.

But this is based on guesswork, educated guesswork, but guesswork none the same.

In any case, something is preventing IE from getting anything more than:


<!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" -->
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="lt"/>

from the request to reklama.php

Generally, when requesting content from the server, it is best to request content that is (X)HTML only with no script, style, html, head, title, meta, or body tags. Remember, once it is inserted into your page, it will use the scripts and styles on the page it is inserted into anyway, and should still form a valid page on the page it is inserted to.

auriaks
05-13-2010, 08:46 PM
Includes! I don't think I'll ever get to see what that page really looks like. Oh well.

I think you may have misunderstood about:


function example_ajax_request_go(page){
$('#example-placeholder').load(page, function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
alert(msg + xhr.status + " " + xhr.statusText);
}
});
}

That wasn't meant to fix anything. In fact, since all the browsers except IE appear to at least be fetching the page, it shouldn't do anything in them. In IE it should alert some reason why the load failed. Did you try it in IE with the added code above?

YES, and nothing came out... no alert, no nothing :D

auriaks
05-13-2010, 08:53 PM
the IE.php is empty file.
the tb_php_visuose.php

<?php
if(isset($_SESSION['authID'])) {
$nikkas = $_SESSION['nick'];
$date = date("Y-m-d");
$time = date("H:i:s");
include $_SERVER['DOCUMENT_ROOT'] . '/content/processes/db_conn.php'; //db
mysql_query("UPDATE `reg_users` SET date = '$date' WHERE nick='$nikkas'");
mysql_query("UPDATE `reg_users` SET time = '$time' WHERE nick='$nikkas'");
$nikkas = mysql_real_escape_string($nikkas);
$qet_style = mysql_query("SELECT * FROM reg_users WHERE nick = '$nikkas'");
$row_to_style = mysql_fetch_array($qet_style);
$css = $row_to_style['theme'];
} else {
header("Location: ../login.php"); // if user is not loggged in.
}
?>

and the auth.php has no script which would interupt anything.

What you suggest me to do? Btw, I didn't understood your post about: "Generally, when requesting content from the server, it is best to request content that is (X)HTML only with no script, style, html, head, title, meta, or body tags. Remember, once it is inserted into your page, it will use the scripts and styles on the page it is inserted into anyway, and should still form a valid page on the page it is inserted to."

jscheuer1
05-14-2010, 12:03 AM
Another include:



include $_SERVER['DOCUMENT_ROOT'] . '/content/processes/db_conn.php'; //db

I think this may be too complex for me to solve without being there.

But I can explain what I was talking about here:


Generally, when requesting content from the server, it is best to request content that is (X)HTML only with no script, style, html, head, title, meta, or body tags. Remember, once it is inserted into your page, it will use the scripts and styles on the page it is inserted into anyway, and should still form a valid page on the page it is inserted to.

It may help.

Let's see. In simplest terms you want to import content like this:


<div>
Some stuff I want my users to see.
</div>

Not:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="some_jquery_dependent.js"></script>
<link rel="stylesheet" href="some.css" type="text/css">
<style type="text/css">
body {
background-color: blue;
}
</style>
</head>
<body>
<div>
Some stuff I want my users to see.
</div>
</body>
</html>

At best, all that highlighted stuff will be ignored. If not, it can cause problems. You have to think like a browser and like a server. You want to deliver content like the first example. It's OK to have:


<div onclick="doSomething();">
Some stuff I want my users to see.
</div>

as long as doSomething() is defined on the page you are importing to. You can have a form, but any javascript that the form depends upon must be on the 'top' page, the page you are importing to. Obviously you have that part worked out. Otherwise it wouldn't work in Firefox. At the same time though, you obviously don't have the part about serving only HTML code that can be incorporated into the existing page. You are depending upon the browser to ignore stuff that doesn't belong. That stuff shouldn't be on the import or its includes to begin with.

That may or may not solve your problem, but it will simplify things for the browsers and for troubleshooting things.

As I said, you have to think like a browser and like a server to determine just what is being served and how it is being interpreted by the browser.

And, though it is possible, it is very unlikely that the jQuery .load() function is the problem. Much more likely that it is something about the content being served at the request that falls short of what you are expecting it to be.

Try cutting out steps, like launch reklama.php or an equivalent directly into IE. An error may become apparent that way. Try this with your includes too. If you don't see anything meaningful with a particular PHP page launched directly into the browser, often you can get a clue by using the browser's 'view source' to see what the server is sending at that level.

auriaks
05-14-2010, 07:11 AM
will my reklama.php script work properly if I delete the begining?


<!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" -->
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="lt"/>

jscheuer1
05-14-2010, 08:06 AM
Probably not, you should get rid of everything not used or required, so that you are left with:


<?php include '../content/tables/auth.php'?>
<?php include '../content/tables/tb_php_visuose.php'?>
<?php
$nick = $_SESSION['nick'];
?>
<table width='450px'>
<tr align="center">
<td align="center">
<form name="Forma" enctype="multipart/form-data">
<table align="left" width='470px'>
<tr align='center'>
<center><small>Deja, reklama bus rodoma tik 24 valandas apkrovimo sumetimais. </small></center>
<small><div id="reklama" ></div></small>
<td>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Paveikslelis <br/>| http://www.blog.pl/image.jpg |</b></font></td>
<td><input MAXLENGTH=1000 type="text" size='36' name="paveikslelis" id="paveikslelis" value="<?php echo $_POST['paveikslelis']; ?>"></td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Rekalmos pavadinimas&nbsp;&nbsp;</b></font></td>
<td><input MAXLENGTH=200 type="text" size='36' name="pavadinimas" id="pavadinimas" value="<?php echo $_POST['pavadinimas']; ?>"></td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Nuoroda &nbsp;&nbsp;</b></font></td>
<td><input MAXLENGTH=1000 type="text" size='36' name="url1" id="url1" value="<?php echo $_POST['url1']; ?>"></td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Nuorodos pavadinimas &nbsp;&nbsp;</b></font></td>
<td><input MAXLENGTH=1000 type="text" size='36' name="url1name" id="url1name" value="<?php echo $_POST['url1name']; ?>"></td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Papildomai apie reklama&nbsp;&nbsp;</b></font></td>
<td><textarea MAXLENGTH=2000 type="text" name="komentaras" id="komentaras" cols='27' rows="5" value="<?php echo $_POST['komentaras']; ?>"></textarea></td>
</tr>
<tr>
<td align="right"></td>
<td><input type="button" value="Skelbti" onclick="vykdyti();" /></td>
</tr>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>

Even then there might be a problem with one of the two remaining includes and/or something they might be bringing in. But it's worth trying.

You should also validate the remaining code.

auriaks
05-14-2010, 12:57 PM
what about ajax, which I use in it? Ajax will not work then...

jscheuer1
05-14-2010, 02:04 PM
It won't work anyway. Scripts imported with .load() are ignored. The only reason it might possibly be working now is because the script code for it is on the page you are importing to (index.php).

I checked the validation of the HTML code and there were many errors, here is a (mostly) valid version:


<?php include '../content/tables/auth.php'?>
<?php include '../content/tables/tb_php_visuose.php'?>
<?php
$nick = $_SESSION['nick'];
?>
<table width='450'>
<tr align="center">
<td align="center">
<form name="Forma" enctype="multipart/form-data" action="">
<table align="left" width='470'>
<tr>
<td style="font-size:13px;text-align:center">
Deja, reklama bus rodoma tik 24 valandas apkrovimo sumetimais
<div id="reklama" ></div>
</td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Paveikslelis <br />| http://www.blog.pl/image.jpg |</b></font></td>
<td><input maxlength=1000 type="text" size='36' name="paveikslelis" id="paveikslelis" value="<?php echo $_POST['paveikslelis']; ?>" /></td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Rekalmos pavadinimas&nbsp;&nbsp;</b></font></td>
<td><input maxlength=200 type="text" size='36' name="pavadinimas" id="pavadinimas" value="<?php echo $_POST['pavadinimas']; ?>" /></td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Nuoroda &nbsp;&nbsp;</b></font></td>
<td><input maxlength=1000 type="text" size='36' name="url1" id="url1" value="<?php echo $_POST['url1']; ?>" /></td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Nuorodos pavadinimas &nbsp;&nbsp;</b></font></td>
<td><input maxlength=1000 type="text" size='36' name="url1name" id="url1name" value="<?php echo $_POST['url1name']; ?>" /></td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Papildomai apie reklama&nbsp;&nbsp;</b></font></td>
<td><textarea name="komentaras" id="komentaras" cols='27' rows="5"><?php echo $_POST['komentaras']; ?></textarea></td>
</tr>
<tr>
<td align="right"></td>
<td><input type="button" value="Skelbti" onclick="vykdyti();"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>

Hopefully it will work. It's valid to HTML 4.01 transitional, with the proper self closing tags for XHTML added because you are importing it to an XHTML DOCTYPE. Those:


/>

May have to be replaced with:


>

But, if not, it would probably be better to keep them.

I'm a little concerned about the $_POST things in the form, they may be throwing things off when empty if the server gives a warning there. Are you even using the $nick? Also, the width of the containing table is less than the width of the table in the form, you may need to fix that.

But try it like this to see what happens.

auriaks
05-14-2010, 04:13 PM
added... and nothing...
Maybe I have to write script from the beginning? But I wont get much better script either because it was the best I could make with jQuerry.

If I load a script like reklama.php and I want to use jQuerry in it what I have to do? OR I can make same thing as it is now in other way?

Btw, the script below is always needed to send values from the form...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function example_ajax_request(page){
$('#example-placeholder').html('<br/><img src="http://www.electrictoolbox.com/images/ajax-loader.gif" width="220" height="19"/><br/>');
setTimeout(function(){example_ajax_request_go(page);}, 500);
}
function example_ajax_request_go(page){
$('#example-placeholder').load(page);
}
<!--
// Get the HTTP Object
function getHTTPObject(){
if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest) return new XMLHttpRequest();
else {
alert("Jūsų naršyklė nepalaiko AJAX scripto.");
return null;
}
}

// Change the value of the outputText field
function setOutput(){
if(httpObject.readyState == 4){
document.getElementById("reklama").innerHTML = httpObject.responseText;
}

}

// Implement business logic
function vykdyti(){
httpObject = getHTTPObject();
if (httpObject != null) {
httpObject.open("GET", "../ajx_script/talpinimas.php?id=reklama&paveikslelis="
+document.getElementById('paveikslelis').value+"&pavadinimas="
+document.getElementById('pavadinimas').value+"&url1="
+document.getElementById('url1').value+"&url1name="
+document.getElementById('url1name').value+"&komentaras="
+document.getElementById('komentaras').value+"&nick=<?php echo $nick?>"
, true);
httpObject.send(null);
httpObject.onreadystatechange = setOutput;
}
}
var httpObject = null;

</script>
...and you told me to delete it...

jscheuer1
05-14-2010, 04:59 PM
As far as I know, scripts on pages imported with .load() are not used as scripts. The tokens they contain could cause problems though. Here:



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function example_ajax_request(page){
$('#example-placeholder').html('<br/><img src="http://www.electrictoolbox.com/images/ajax-loader.gif" width="220" height="19"/><br/>');
setTimeout(function(){example_ajax_request_go(page);}, 500);
}
function example_ajax_request_go(page){
$('#example-placeholder').load(page);
}
<!--
// Get the HTTP Object
function getHTTPObject(){
if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XM . . .

See highlighted and red? That's an unclosed HTML begin comment token. At the very least get rid of it. Many browsers will ignore all (including your table and form) that follows.

As for the code in my last post not working, I would need to see it myself to believe it. There could be a problem, or the old code could be cached. Put it up exactly as I described in my last post and let me test it on this end. There could be a problem, but I may be able to figure it out if I could see it in action. I have no chance of doing so with the old code in place.

jscheuer1
05-14-2010, 05:16 PM
Well the form is at least showing up in IE, but the AJAX no longer works in Firefox. It seems that .load() did bring in the script code, at least for Firefox. But it might not do so in IE. You can try adding back in the script without that comment token I mention in my last post:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function example_ajax_request(page){
$('#example-placeholder').html('<br/><img src="http://www.electrictoolbox.com/images/ajax-loader.gif" width="220" height="19"/><br/>');
setTimeout(function(){example_ajax_request_go(page);}, 500);
}
function example_ajax_request_go(page){
$('#example-placeholder').load(page);
}
<!--
// Get the HTTP Object
function getHTTPObject(){
if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XM . . .

But, since this code can never be used on reklama.php by itself, why not just put the unique portions of it on index.php? That's what I would do. I think that's just this bit:


<script type="text/javascript">
// Get the HTTP Object
function getHTTPObject(){
if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest) return new XMLHttpRequest();
else {
alert("Jusu naršykle nepalaiko AJAX scripto.");
return null;
}
}

// Change the value of the outputText field
function setOutput(){
if(httpObject.readyState == 4){
document.getElementById("reklama").innerHTML = httpObject.responseText;
}

}

// Implement business logic
function vykdyti(){
httpObject = getHTTPObject();
if (httpObject != null) {
httpObject.open("GET", "../ajx_script/talpinimas.php?id=reklama&paveikslelis="
+document.getElementById('paveikslelis').value+"&pavadinimas="
+document.getElementById('pavadinimas').value+"&url1="
+document.getElementById('url1').value+"&url1name="
+document.getElementById('url1name').value+"&komentaras="
+document.getElementById('komentaras').value+"&nick=<?php echo $nick?>"
, true);
httpObject.send(null);
httpObject.onreadystatechange = setOutput;
}
}
var httpObject = null;
</script>

auriaks
05-14-2010, 05:22 PM
Now There is active script from your #24 post. I replaced the reklama.php script to your script.

Also: $nick is used. I send nick value to my mysql record file to get the session nick.

I have to put the second script from #27 into index.php?

jscheuer1
05-14-2010, 05:35 PM
I'm confused as to what reklama.php now actually looks like at this point. In IE (which is still at the moment at least importing the form) I'm still getting an error which seems to indicate that it is looking for this code:


<script type="text/javascript">
// Get the HTTP Object
function getHTTPObject(){
if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest) return new XMLHttpRequest();
else {
alert("Jusu naršykle nepalaiko AJAX scripto.");
return null;
}
}

// Change the value of the outputText field
function setOutput(){
if(httpObject.readyState == 4){
document.getElementById("reklama").innerHTML = httpObject.responseText;
}

}

// Implement business logic
function vykdyti(){
httpObject = getHTTPObject();
if (httpObject != null) {
httpObject.open("GET", "../ajx_script/talpinimas.php?id=reklama&paveikslelis="
+document.getElementById('paveikslelis').value+"&pavadinimas="
+document.getElementById('pavadinimas').value+"&url1="
+document.getElementById('url1').value+"&url1name="
+document.getElementById('url1name').value+"&komentaras="
+document.getElementById('komentaras').value+"&nick=<?php echo $nick?>"
, true);
httpObject.send(null);
httpObject.onreadystatechange = setOutput;
}
}
var httpObject = null;
</script>

You can try one of two things:

1) Add that code to the top of reklama.php (from my post #24) after the initial includes and $nick definition.

or:

2) Add the above code to index.php.

If the first works in all browsers, great. If not, try the second approach.

auriaks
05-14-2010, 05:39 PM
added 24 script to the top...
reklama.php looks like this:

<?php include '../content/tables/auth.php'?>
<?php include '../content/tables/tb_php_visuose.php'?>
<?php
$nick = $_SESSION['nick'];
?>
<table width='450'>
<tr align="center">
<td align="center">
<form name="Forma" enctype="multipart/form-data" action="">
<table align="left" width='470'>
<tr>
<td style="font-size:13px;text-align:center">
Deja, reklama bus rodoma tik 24 valandas apkrovimo sumetimais
<div id="reklama" ></div>
</td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Paveikslelis <br />| http://www.blog.pl/image.jpg |</b></font></td>
<td><input maxlength=1000 type="text" size='36' name="paveikslelis" id="paveikslelis" value="<?php echo $_POST['paveikslelis']; ?>" /></td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Rekalmos pavadinimas&nbsp;&nbsp;</b></font></td>
<td><input maxlength=200 type="text" size='36' name="pavadinimas" id="pavadinimas" value="<?php echo $_POST['pavadinimas']; ?>" /></td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Nuoroda &nbsp;&nbsp;</b></font></td>
<td><input maxlength=1000 type="text" size='36' name="url1" id="url1" value="<?php echo $_POST['url1']; ?>" /></td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Nuorodos pavadinimas &nbsp;&nbsp;</b></font></td>
<td><input maxlength=1000 type="text" size='36' name="url1name" id="url1name" value="<?php echo $_POST['url1name']; ?>" /></td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Papildomai apie reklama&nbsp;&nbsp;</b></font></td>
<td><textarea name="komentaras" id="komentaras" cols='27' rows="5"><?php echo $_POST['komentaras']; ?></textarea></td>
</tr>
<tr>
<td align="right"></td>
<td><input type="button" value="Skelbti" onclick="vykdyti();"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<?php include '../content/processes/IE.php'?>
<?php include '../content/tables/auth.php'?>
<?php include '../content/tables/tb_php_visuose.php'?>
<?php
$nick = $_SESSION['nick'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="lt">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="lt"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function example_ajax_request(page){
$('#example-placeholder').html('<br/><img src="http://www.electrictoolbox.com/images/ajax-loader.gif" width="220" height="19"/><br/>');
setTimeout(function(){example_ajax_request_go(page);}, 500);
}
function example_ajax_request_go(page){
$('#example-placeholder').load(page);
}
// Get the HTTP Object
function getHTTPObject(){
if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest) return new XMLHttpRequest();
else {
alert("Jūsų naršyklė nepalaiko AJAX scripto.");
return null;
}
}

// Change the value of the outputText field
function setOutput(){
if(httpObject.readyState == 4){
document.getElementById("reklama").innerHTML = httpObject.responseText;
}

}

// Implement business logic
function vykdyti(){
httpObject = getHTTPObject();
if (httpObject != null) {
httpObject.open("GET", "../ajx_script/talpinimas.php?id=reklama&paveikslelis="
+document.getElementById('paveikslelis').value+"&pavadinimas="
+document.getElementById('pavadinimas').value+"&url1="
+document.getElementById('url1').value+"&url1name="
+document.getElementById('url1name').value+"&komentaras="
+document.getElementById('komentaras').value+"&nick=<?php echo $nick?>"
, true);
httpObject.send(null);
httpObject.onreadystatechange = setOutput;
}
}
var httpObject = null;

</script>
</head>
<body>
<table width='450px'>
<tr align="center">
<td align="center">
<form name="Forma" enctype="multipart/form-data">
<table align="left" width='470px'>
<tr align='center'>
<center><small>Deja, reklama bus rodoma tik 24 valandas apkrovimo sumetimais. </small></center>
<small><div id="reklama" ></div></small>
<td>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Paveikslėlis <br/>| http://www.blog.pl/image.jpg |</b></font></td>
<td><input MAXLENGTH=1000 type="text" size='36' name="paveikslelis" id="paveikslelis" value="<?php echo $_POST['paveikslelis']; ?>"></td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Rekalmos pavadinimas&nbsp;&nbsp;</b></font></td>
<td><input MAXLENGTH=200 type="text" size='36' name="pavadinimas" id="pavadinimas" value="<?php echo $_POST['pavadinimas']; ?>"></td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Nuoroda &nbsp;&nbsp;</b></font></td>
<td><input MAXLENGTH=1000 type="text" size='36' name="url1" id="url1" value="<?php echo $_POST['url1']; ?>"></td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Nuorodos pavadinimas &nbsp;&nbsp;</b></font></td>
<td><input MAXLENGTH=1000 type="text" size='36' name="url1name" id="url1name" value="<?php echo $_POST['url1name']; ?>"></td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Papildomai apie reklamą&nbsp;&nbsp;</b></font></td>
<td><textarea MAXLENGTH=2000 type="text" name="komentaras" id="komentaras" cols='27' rows="5" value="<?php echo $_POST['komentaras']; ?>"></textarea></td>
</tr>
<tr>
<td align="right"></td>
<td><input type="button" value="Skelbti" onclick="vykdyti();" /></td>
</tr>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>

jscheuer1
05-14-2010, 05:52 PM
Why two of almost everything? It seems to work in IE now though.

auriaks
05-14-2010, 05:55 PM
I don't know... I just added #24 to beggining... I confused now what I have to do. Can you delete part of it and rewrite to forum THE RIGHT PART? :D :D

jscheuer1
05-14-2010, 06:00 PM
I'd try:


<?php include '../content/processes/IE.php'?>
<?php include '../content/tables/auth.php'?>
<?php include '../content/tables/tb_php_visuose.php'?>
<?php
$nick = $_SESSION['nick'];
?>
<script type="text/javascript">
// Get the HTTP Object
function getHTTPObject(){
if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest) return new XMLHttpRequest();
else {
alert("Jusu naršykle nepalaiko AJAX scripto.");
return null;
}
}

// Change the value of the outputText field
function setOutput(){
if(httpObject.readyState == 4){
document.getElementById("reklama").innerHTML = httpObject.responseText;
}

}

// Implement business logic
function vykdyti(){
httpObject = getHTTPObject();
if (httpObject != null) {
httpObject.open("GET", "../ajx_script/talpinimas.php?id=reklama&paveikslelis="
+document.getElementById('paveikslelis').value+"&pavadinimas="
+document.getElementById('pavadinimas').value+"&url1="
+document.getElementById('url1').value+"&url1name="
+document.getElementById('url1name').value+"&komentaras="
+document.getElementById('komentaras').value+"&nick=<?php echo $nick?>"
, true);
httpObject.send(null);
httpObject.onreadystatechange = setOutput;
}
}
var httpObject = null;
</script>
<table width='450'>
<tr align="center">
<td align="center">
<form name="Forma" enctype="multipart/form-data" action="">
<table align="left" width='470'>
<tr>
<td style="text-align:center">
<small>Deja, reklama bus rodoma tik 24 valandas apkrovimo sumetimais
<div id="reklama" ></div></small>
</td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Paveikslelis <br>| http://www.blog.pl/image.jpg |</b></font></td>
<td><input maxlength=1000 type="text" size='36' name="paveikslelis" id="paveikslelis" value=""></td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Rekalmos pavadinimas&nbsp;&nbsp;</b></font></td>
<td><input maxlength=200 type="text" size='36' name="pavadinimas" id="pavadinimas" value=""></td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Nuoroda &nbsp;&nbsp;</b></font></td>
<td><input maxlength=1000 type="text" size='36' name="url1" id="url1" value=""></td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Nuorodos pavadinimas &nbsp;&nbsp;</b></font></td>
<td><input maxlength=1000 type="text" size='36' name="url1name" id="url1name" value=""></td>
</tr>
<tr>
<td align="right"><font size="1" color='white' face="Verdana"><b>Papildomai apie reklama&nbsp;&nbsp;</b></font></td>
<td><textarea name="komentaras" id="komentaras" cols='27' rows="5"></textarea></td>
</tr>
<tr>
<td align="right"></td>
<td><input type="button" value="Skelbti" onclick="vykdyti();"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>

auriaks
05-14-2010, 06:03 PM
done :) OOOMG, works perfectly in chrome, IE, Opera, Firefox! :D :D You are the best :)

auriaks
05-14-2010, 06:15 PM
what was the main problem? I will change other scripts :D

jscheuer1
05-14-2010, 06:31 PM
Others?

I think the main problem in IE was that unclosed HTML opening comment delimiter:


<!--

Once we got rid of that, things started showing up.

After that, the trick was to get rid of everything that wasn't needed, and to validate the HTML code part that remained. These last two steps might not be necessary, but they reduce the load on the server and the browser, and might be required for Chrome.

I'm still not clear how .load() is importing the javascript, but it obviously is. Even after clicking on the TV image, I couldn't find the javascript from reklama.php anywhere in evidence using diagnostic tools in both IE and Firefox. But, as I say, it obviously is now available somehow.

auriaks
05-14-2010, 06:38 PM
I rejected your test comments :) sorry for that

jscheuer1
05-14-2010, 11:42 PM
I rejected your test comments :) sorry for that

I'm not sure what you are referring to, but that's OK - as long as we got to what works, I'm happy. My main complaint in this thread was that you often would change things differently than what I thought I had suggested. But that was mostly when we were still working on the fade in/fade out part. It's harder to hit a moving target. But we worked that out.

As for your other scripts, it should be simple enough to follow the template we've established, I think that's what you are doing. If you need help with the details of that, let me know.

auriaks
05-15-2010, 09:21 PM
Yes... I did that template to other scripts and they work perfectly for now :) Really thanks for your time spending on MY problem. Really apreciate this :)