vb.org Archive - Javascript problem

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB3 Programming Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=15)

- - Javascript problem (https://vborg.vbsupport.ru/showthread.php?t=176418)

ishare

04-17-2008 11:47 AM

Javascript problem

Hi,
I need help with javascript. And its really quite important for me to solve this problem.
I would like to use a tab panel in my current showthread.php
I did add the .css styles and also the javascript (.js) code to the root directory. Everything is fine.
But due to a reason i do not know, vbulletin convert the links.

The tab example :
http://www.divx-world.com/tab.html

So the link of tab1 and others should be like "javascript:;" but vbulletin convert this link to "javascript%3Cb%3E%3C/b%3E:;"

Please help me about this problem so i can solve it.

Thanks in advance...

Lynne

04-17-2008 02:43 PM

Have you tried turning off your modifications and seeing if the issue is fixed? I have never heard of vbulletin doing that to links.

Opserty

04-17-2008 02:44 PM

It seems to work fine for me in firefox.

ishare

04-17-2008 03:00 PM

Thanks for your answers and helps, but :

Lynne : I try to use this java script tab panel on a clean vbulletin. So there is no any modification.

Opserty : The link i gave above is an example of what i want to do on my vbulletin. Thats working fine. But when i use same thing inside vbulletin, it changes the links to as mentioned above.

Opserty

04-17-2008 03:27 PM

Oh ok, well thats fairly useless :p

It would be helpful to see an example in vBulletin that has the issue. ;)

ishare

04-17-2008 03:37 PM

I am really sorry that i did not give that address much more before.

Here is an example in vBulletin :
http://www.divx-world.com/showthread.php?p=42114

It may seems that its working. Luckly its working in this thread. But actually when i add some other info into tab panel content, tabs doesnt work.

And as you can see, when you come on a tab, the link appear as : http://www.domain-name.com/javascript%3Cb%3E%3C/b%3E:;

But originally it should be as "javascript:;"

Lynne

04-17-2008 03:48 PM

Looking at the source code for your tabs on that page, I see this:

<a class="down" href="javascript<b></b>:;">Film Bilgileri</a>

What does it say in your template because you shouldn't have that html in there (although the tabs work for me, as you noted).

ishare

04-17-2008 04:20 PM

Below, is the code of this tab panel i used in showthread template. Ofcourse the codes after the body tag. So as you can see through the original code on showthread.php template, the links should be as "javascript:;"

As you also mentioned, its working at first post. But when i add some info to the panel content (example given below) the tabs doesnt work anymore.

Example of the modified content :
http://www.divx-world.com/showthread.php?p=42238

Code:

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<style type="text/css" media="screen">

<!--

@import url("p7tp/p7tp_01.css");

-->

</style>

<script type="text/javascript" src="p7tp/p7tpscripts.js"></script>

</head>



<body onload="P7_initTP(1,0)">

<div id="p7TP1" class="p7TPpanel">

  <div class="p7TPheader">

    <h3><strong>Filmin Adı Buraya Yazılacak!</strong></h3>

  </div>

  <div class="p7TPwrapper">

    <div class="p7TP_tabs">

      <div id="p7tpb1_1" class="down"><a class="down" href="javascript:;">Film Bilgileri</a></div>

      <div id="p7tpb1_2"><a href="javascript:;">Dublaj Bilgileri</a></div>

      <div id="p7tpb1_3"><a href="javascript:;">Altyazı Bilgileri</a></div>

      <div id="p7tpb1_4"><a href="javascript:;">Kodek Bilgileri</a></div>

      <div id="p7tpb1_5"><a href="javascript:;">Ek Bilgiler</a></div>

      <br class="p7TPclear" />

    </div>

    <div class="p7TPcontent">

      <div id="p7tpc1_1">

        <h4>Panel Content...</h4>

        <p>Bu b?l?m i?erisinde filmin dvd kapağı veya afişi ile birlikte, ekran g?r?nt?leri yer alabilir.</p>

      </div>

      <div id="p7tpc1_2">

        <h4>Panel Content...</h4>

        <p>Bu b?l?mde ise paylaşılan filmdeki dublaj se?enekleri g?rsel a?ıdan  daha g?zel olacak (?lke bayrakları ile birlikte) şekilde detaylı olarak  sunulabilir.</p>

      </div>

      <div id="p7tpc1_3">

        <h4>Panel Content...</h4>

        <p>Bu b?l?mde ise, dublaj se?eneklerinde olduğu gibi yine g?rsel ve  anlaşılabilirlilik a?ısından daha g?zel olacak bir i?erikle sunulabilir.</p>

      </div>

      <div id="p7tpc1_4">

        <h4>Panel Content...</h4>

        <p>?zellikle DVDRip veya HDRip paylaşımlarda ?ok ?nemli olduğundan dolayı,  bu b?l?mde paylaşılan filme ait ?eşitli kodek bilgileri sunulabilir.</p>

      </div>

      <div id="p7tpc1_5">

        <h4>Panel Content...</h4>

        <p>Son olarak bu b?l?mde ise, eğer gerekli ise ek a?ıklamalarda  bulunulabilir. Filmde yaşanan herhangi bir sorun veya d?zeltme ile  ilgili olarak ?nceden bilgi vermek adına bu b?l?m faydalı olacaktır</p>

      </div>

    </div>

  </div>

  <!--[if lte IE 6]>

<style type="text/css">.p7TPpanel div,.p7TPpanel a{height:1%;}.p7TP_tabs a{white-space:nowrap;}</style>

<![endif]-->

</div>

</body>

</html>

Lynne

04-17-2008 05:28 PM

A couple of things... I'm not javascript expert, but those links just don't seem right. Usually I see a call as

Code:

<a href="javascript:function()">blahblah</a>

The second thing I notice is that you are using an id in your div tags <div id="p7tpb1_1" class="down"> that is not unique. You should be grabbing the postid and using that in the id to create a unique id - <div id="p7tpb1_$postid_1" class="down">. You cannot have two things with the same id or it doesn't work (as you can see in your second post).

ishare

04-17-2008 05:57 PM

The line which calls the javascript (located in showthread.php) :
<script type="text/javascript" src="p7tp/p7tpscripts.js"></script>

The line which calls the .css file (located in showthread between <head> tags :

</style>

So i beleive there is nothing wrong with those id's.

But please let me say it again that, i do appreciate a lot all your kind responses Lynne. Thank you very much. I hope some other friends will also help or advise me about how to solve this problem.

Due my website is movie review site, each thread has very long and different comments. So with this tab panel, i would like to have cleaner and better looking forum.

Lynne

04-17-2008 06:05 PM

The ids I am talking about are in your postbits. If you look at the link you posted here: http://www.divx-world.com/showthread.php?p=42238 you have two posts on that page. Take a look at your source code and look for the tabs "Film Bilgileri". In each postbit, that call looks like:

Code:

<div id="p7tpb1_1" class="down"><a class="down" href="javascript<b></b>:;">Film Bilgileri</a></div>

That same code is in two different places on that page. See how it says id="p7tpb1_1" ? You cannot do that. An id has to be unique. That is what I am saying about your ids.

MoT3rror

04-17-2008 07:25 PM

This is just a idea but if you are just using the link "javascript:;", not making it link to anything. Why not just use

Code:

<a class="down" href="#" onclick="return false;">

if the link is going no where.

If you need the link doing something by javascript use code like this.

Code:

<a class="down" href="#" onclick="function(); return false;">

The return will make the javascript code run but the user will not be taken to another page.

Here is a little info about onclick if you need it.

Sorry I am just against seeing a link being javascript when there is much better ways of doing it.

Also a bold bbcode could be causing the <b></b>.

ishare

04-18-2008 08:29 AM

I don't think that there is something wrong with the javascript code.

Here is the javascript code :
http://www.divx-world.com/p7tpscripts.js

Here is the .css file :
http://www.divx-world.com/p7tp_01.css

I do not use any bold bbcode in the post.

Here is the code i paste to newpost/newreply templates :

Code:

<div id="p7TP1" class="p7TPpanel">

  <div class="p7TPheader">

    <h3><strong>Filmin Adı Buraya Yazılacak!</strong></h3>

  </div>

  <div class="p7TPwrapper">

    <div class="p7TP_tabs">

      <div id="p7tpb1_1" class="down"><a class="down" href="javascript:;">Film Bilgileri</a></div>

      <div id="p7tpb1_2"><a href="javascript:;">Dublaj Bilgileri</a></div>

      <div id="p7tpb1_3"><a href="javascript:;">Altyazı Bilgileri</a></div>

      <div id="p7tpb1_4"><a href="javascript:;">Kodek Bilgileri</a></div>

      <div id="p7tpb1_5"><a href="javascript:;">Ek Bilgiler</a></div>

      <br class="p7TPclear" />

    </div>

    <div class="p7TPcontent">

      <div id="p7tpc1_1">

        <h4>Panel Content...</h4>

        <p>Bu b?l?m i?erisinde filmin dvd kapağı veya afişi ile birlikte, ekran g?r?nt?leri yer alabilir.</p>

      </div>

      <div id="p7tpc1_2">

        <h4>Panel Content...</h4>

        <p>Bu b?l?mde ise paylaşılan filmdeki dublaj se?enekleri g?rsel a?ıdan  daha g?zel olacak (?lke bayrakları ile birlikte) şekilde detaylı olarak  sunulabilir.</p>

      </div>

      <div id="p7tpc1_3">

        <h4>Panel Content...</h4>

        <p>Bu b?l?mde ise, dublaj se?eneklerinde olduğu gibi yine g?rsel ve  anlaşılabilirlilik a?ısından daha g?zel olacak bir i?erikle sunulabilir.</p>

      </div>

      <div id="p7tpc1_4">

        <h4>Panel Content...</h4>

        <p>?zellikle DVDRip veya HDRip paylaşımlarda ?ok ?nemli olduğundan dolayı,  bu b?l?mde paylaşılan filme ait ?eşitli kodek bilgileri sunulabilir.</p>

      </div>

      <div id="p7tpc1_5">

        <h4>Panel Content...</h4>

        <p>Son olarak bu b?l?mde ise, eğer gerekli ise ek a?ıklamalarda  bulunulabilir. Filmde yaşanan herhangi bir sorun veya d?zeltme ile  ilgili olarak ?nceden bilgi vermek adına bu b?l?m faydalı olacaktır</p>

      </div>

    </div>

  </div>

  <!--[if lte IE 6]>

<style type="text/css">.p7TPpanel div,.p7TPpanel a{height:1%;}.p7TP_tabs a{white-space:nowrap;}</style>

<![endif]-->

</div>

I dont know why, but when i paste above code to the post template, the result is just same as mentioned above.
vBulletin convert the link i paste ("javascript:;") to something diferent ("javascript%3Cb%3E%3C/b%3E:;").

When i check the results source code, i also see the bold bbcode. So what i beleive is, vbulletin convert this kind of links. And i do not know how to turn it off.

I do thank you all for your kind relation and answers. This situation is really very important for me, due it is a must do. And i really do not have any idea about solving this problem.

And everything works fine in a non-vB page.

Here is the example of the tab panel :
http://www.divx-world.com/tab.html

Here is the example of the tab panel with modified content :
http://www.divx-world.com/tab2.html

Lynne

04-18-2008 03:00 PM

Have you tried using "javascript:{}" instead of just "javascript:;"?

Also, you said you had no hacks on here, but I see quite a few. Have you tried turning them all off while trouble shooting this problem? And, do you realize you are calling this script twice - p7tp/p7tpscripts.js? Once from your site, once from the other? Have you modified it at all? I would stay to calling them from your site so I would copy the other to your site also - http://www.dwshare.com/p7tp_01.css . Also, they are both (the scripts not on your server) being called after the body tag. That isn't good.

ishare

04-18-2008 03:08 PM

After your advice, i did it but the output is still same :(
http://www.divx-world.com/showpost.p...68&postcount=5

And now it converts "javascript:{}" to "javascript%3Cb%3E%3C/b%3E:%7B%7D"

Lynne

04-18-2008 03:16 PM

I modified my post. You need to look at your script calls. You have one called twice and then both external imports are listed after the body tag.

ishare

04-18-2008 04:47 PM

I understand what you mean. But www.dwshare.com and www.divx-world.com point same account. One of them is just the domain forward.

Below you can find a part of showthread.php template i use on my bulletin board :

Code:

$stylevar[htmldoctype]

<html xmlns="http://www.w3.org/1999/xhtml" dir="$stylevar[textdirection]" lang="$stylevar[languagecode]">

<head>

        $headinclude

        <title>$thread[prefix_plain_html] $thread[title]<if condition="$pagenumber>1"> - <phrase 1="$pagenumber">$vbphrase[page_x]</phrase></if> - $vboptions[bbtitle]</title>

        <script type="text/javascript" src="clientscript/vbulletin_post_loader.js?v=$vboptions[simpleversion]"></script>

        <style type="text/css" id="vbulletin_showthread_css">

        <!--

        <if condition="$show['tag_box']">

        #tag_edit_list { list-style:none; margin:0px; padding:0px; }

        #tag_edit_list li { float:$stylevar[left]; display:block; width:200px; }

        #tag_edit_list li.mine { font-weight:bold; }

        </if>

        #links div { white-space: nowrap; }

        #links img { vertical-align: middle; }

        -->

        </style>

<style type="text/css" media="screen">

<!--

@import url("http://www.dwshare.com/p7tp_01.css");

-->

</style>

<script type="text/javascript" src="http://www.dwshare.com/p7tpscripts.js"></script>

</head>

<body onload="P7_initTP(1,0)">

$header

$navbar



$poll

<if condition="$show['tag_box']">

As you can see through above codes, i've put the "calling" line between <head> tags. If there was something wrong with javascript code or even the showthread template, then the script should not work. But what i see is, the only problem is the difference between the link i enter and i get.

You are right about the hacks. Even i turned off all of them, nothing changed. Beside, i also installed a clean vbulletin on my own computer and i did all the tests through localhost. But the result was still same.

And please let me mentione again that i do appreciate a lot all of your kind replies. So thank you very much again for all of your answers.

Lynne

04-18-2008 08:04 PM

Well, I'm at a loss as to what is going on. I just went and added this line to a couple of different templates on my test site and nothing got changed:
Test: <a class="down" href="javascript:;">Film Bilgileri</a>

It printed out just fine with no additional characters added or anything.

Try adding that line in some other template in your site and see if it gets changed. Also, try commenting out all added javascript lines in your header and see if the text still gets changed. Something is changing it but I don't think it is vbulletin.

ishare

04-19-2008 06:20 AM

I did in different ways. I tried to use this code on a custom vbulletin page as described below.

How to create your own vBulletin-powered page!
Author : Gary King
Thread : https://vborg.vbsupport.ru/showthread.php?t=62164

Result : http://www.divx-world.com/test.php
The code is working without any problem.

I've created a bbcode as [testt] which includes all the tab panel content. But the result is still same on showthread.php template. Doesnt work.

I've also tested on a clean vB on localhost. I've put the below codes between <head> tags.

Code:

<style type="text/css" media="screen">

<!--

@import url("p7tp_01.css");

-->

</style>

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

But the the result is still same. Doesnt work.

So my opinion is, there should be some code inside the original vbulletin showthread.php template which cause this problem.

Please let me confirm it again if i do it right or not. Because i try to use it on showthread template. Is it right ? Or do i have to use the javascript calling line in a different template ?

Please let me try to explain the reason of why i do want to use this javascript on my vbulletin powered webpage. I own a movie review website. So most of the threads have very long comments and informations.
Lets say we are talking about the X-Files tv serie. It has 9 complete season. In current system, i do have 9 different categories. Each season has its own category which gives information about the movie.
But if i success with this script, then i will be able to show all information in one thread. I will be able to use 9 different tab. (For example Season1, Season2....) And when you click the 1st tab (Season1) you will see all the information about season1. And same for others..

Thats why its really very important for me to solve this problem :(

Lynne

04-19-2008 02:04 PM

OK, on to some more testing to figure this out. I compared your working test page with your non-working showthread page. Here are a couple of lines (some javascript codes) that get called on the non-working page. Try inserting them one by one into the working test page and see if they 'break' it:

Code:

<script type="text/javascript" src="clientscript/post_thanks.js"></script>

Code:

<script type="text/javascript" src="clientscript/vbulletin_post_loader.js?v=370rc3"></script>

Code:

<style type="text/css" id="vbulletin_showthread_css">

    <!--

    

    #links div { white-space: nowrap; }

    #links img { vertical-align: middle; }

    -->

    </style>

ishare

04-19-2008 05:17 PM

I did all of them. But nothing changed. :(

I even changed the <a href="javascript:;"> as <a href="#" onclick="aFunction();return false;"> but its still same. vBulletin convert that link. In status bar, the link should appear as javascript but it appears as http://www.dwshare.com/javascript<b></b>:;

There is something inside the showthread.php which cause this problem. But what ?

I will lost my mind due to this problem...

Lynne

04-19-2008 06:14 PM

Did you ever make the change regarding the id tag? That will screw things up. I'm not sure if it will change the link like that, but it will screw up your javascript call. You might as well get that problem out of the way so that the main problem is more isolated.

Oh, something else..... on your test.php page (or whatever you called it), add all the same "require_once" files (add them one-by-one) at the top as in the showthread.php page. See if that changes things. Go through the rest of the showthread page and see if other files get called into the page also and try adding those.

ishare

04-20-2008 11:55 AM

I did everything. I did remove and re-enter all the script lines in showthread template.
But nothing changed.
The link should appear as "javascript:;" on status bar, but it appears as "http://www.divx-world.com/javascript<b></b>;"

I even tried to changed the current link ("javascript:;") as "#". Then the link appears as "http://www.dwshare.com/showthread.php?p=42632#". And when you click this link, it goes top of the page and tabs doesnt working.

Lynne

04-20-2008 02:24 PM

Not the showthread template, the showthread.php page. That is when your tabs are broken. So, go through showthread and add the files one by one and see if you can get your test page to 'break'. Like:
require_once(DIR . '/includes/functions_bigthree.php');
require_once(DIR . '/includes/class_postbit.php');

Add those at the top under
require_once('./global.php');

See if you then get the funny url. You need to find out what is making the url go weird and the only way to do it is to add this stuff one by one. Add in all the hook lines so that it includes your hacks and see if that breaks it. Just keep adding stuff from the showthread.php page into your test.php page until it breaks.

ishare

04-20-2008 02:45 PM

Before i start try to solve this problem, i had totally 125 hair on my head. And now finally i have about 10. :(

I did try all the scripts given in below website.
http://webtecker.com/2008/03/31/list...ab-navigation/

But none of them worked. Ok some of them worked but with many style problems.
The best script is Yahoo YUI. But i did not understand how to put the code into showthread. Its too complicated. At least for a dummy as i am.

The tab panel in current vBulletin profile page is also very nice. But i dont know how to use them. Do you have any idea about where these files located ? Or do you know how can we use it as a html post in showthread ?

If not, then i'm done! I will just continue with old way. And i will never use tab panel scripts again...

Regards

Lynne

04-20-2008 02:52 PM

Ah, don't give up! But, perhaps if you are frustrated, put it off until you are ready to tackle it again. I think it's a cool idea, although very specific to only a few forums who would need something like that.

As for the tabs on the profile page, there is this: [How-to] Add more tabs to the vB 3.7 profile pages That may help a little bit. I have successfully added tabs to the profile page on my test site, so I do know that works.

All times are GMT. The time now is 08:22 AM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01872 seconds Memory Usage 1,836KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (11)bbcode_code_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (26)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: