[Senthrax]

I'm having trouble implementing some jQuery functionality in my IPB site.

Here is the thing, I want to add jQuery tabs into my skin file.
I have inserted everything necessary to make it working (included the necessary scripts and the necessary html)
The scripts are in my skin edits. I want to put the html in my skin edits aswell so the tabs will display at the top between the userbar and the forum.

standalone it works, when I post my html code in a post (where inserting html is allowed in a forum where html is allowed) it also works. when I put my html in the board header and footer wrapper template it does not work. The board header and footer wrappers contains other javascript code aswell like google analytics etc and that works so I guess its not possible that IPB is blockin the script from executing....

I do not get any javascript errors. the jQuery javascript is just not executing it seems. the script first adds a style attribute to one of my divs, this works, then it is executing the tabs script but nothing happens. So it looks as if the regular jQuery script is working but the jQuery UI tab functions are not working, though no errors.

Does anyone here have experience with this or know where the problem might lie?

If you need more details about the code let me know

This post has been edited by Senthrax: 30 January 2009 - 07:12 PM

[Senthrax]

No-one with an idea?

[compguy11]

Can you post the snippet of code you are having trouble with? The board header and footer can be a real hit or miss place to insert code, especially Javascript based stuff.

[Senthrax]

compguy11, on Feb 4 2009, 03:02 AM, said:

Can you post the snippet of code you are having trouble with? The board header and footer can be a real hit or miss place to insert code, especially Javascript based stuff.

Here is the code that is in the skin now for the needed scripts and css:

<script src="http://www.delta-visions.net/forums/custom/js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="http://www.delta-visions.net/forums/custom/js/ui.core.js" type="text/javascript"></script>
<script src="http://www.delta-visions.net/forums/custom/js/ui.tabs.min.js" type="text/javascript"></script>
<link id="dvGlobalMessageCss" rel="stylesheet" type="text/css" href="http://www.delta-visions.net/forums/custom/css/dvGlobalMessage.css" />

the script that will find my menu divs and create an accordion menu:

<script src="http://www.delta-visions.net/forums/custom/js/menufinal.js" type="text/javascript"></script>

The script that will create my rotating jquery tabs:

<script language="javascript" type="text/javascript">
				jQuery(document).ready(function(){
					jQuery('#pnlTabs').attr('style', 'display:block;width:100%;');
					jQuery('#pnlTabs > ul').tabs({ fx: {opacity: 'toggle', fxSpeed: 'slow'}});
					jQuery('#pnlTabs > ul').tabs('rotate', 6000, true);
				});
</script>

Here is the html for the tabs and menu:

<div id="customglobalmessagewrapper">
	<div id="customglobalmessage">
	
		<div id="dvTabRotator">
			<div id="pnlTabs">
				<ul id='tabControls'>
					<li><a href='#tabItem1'><span>Sig of the Week</span></a></li>
					<li><a href='#tabItem2'><span>Artist of the Month</span></a></li>
					<li><a href='#tabItem3'><span>"Number One" Team</span></a></li>
					<li><a href='#tabItem4'><span>Team Battle League</span></a></li>
				</ul>
	
				<div id='tabItem1' class="tabitem" style="width:100%;text-align:center;">
					<div>
						<div class="tabcontent" style="width:100%;text-align:center;">
							<span style="color:#f89e10;font-weight:bold;">The winner of SOTW 93 is ookami!!</span>
							<br /> 
							<img src="http://i303.photobucket.com/albums/nn138/ookami-w/HL2009OF.png" />
							<p>Voting has started for SOTY 2008. Check it out and vote for 2008's competitors. 
							<br />
							SOTW 94 is now open for entry's. </p>
						</div>
					</div>
				</div>
				
				<div id='tabItem2' class="tabitem" style="width:100%;text-align:center;">
					<div>
						<div class="tabcontent" style="width:100%;text-align:center;">
							<a href="http://www.delta-visions.net/forums/index.php?showtopic=13884" target="_self" alt="Artist of the Month">
								<img src="http://www.delta-visions.net/Content/ImageRotator/ad_aotm.jpg" border="0" />
							</a><br />
							<span style="color:#f89e10;font-weight:bold;">Voting for AOTM [Nov-Dec] is in progress!</span>
							<br />
							<a href="http://www.delta-visions.net/forums/index.php?showtopic=13884" target="_self" alt="Artist of the Month" style="color:#0CF;text-decoration:none;">&raquo; VOTE HERE &laquo;</a>
							<br />
						</div>
					</div>
				</div>
				
				<div id='tabItem3' class="tabitem" style="width:100%;text-align:center;">
					<div>
						<div class="tabcontent" style="width:100%;text-align:center;">
							<br />
							Currenty No Team holds the Number One Position
							<br />
							&raquo;&nbsp;<a href="http://www.delta-visions.net/forums/index.php?showtopic=14218">TEAMS AND BATTLE LEAGUE</a>&nbsp;&laquo;
							<br />
							&raquo;&nbsp;<a href="http://www.delta-visions.net/forums/index.php?showforum=26">Battle Request</a>&nbsp;&laquo;
							<br />
							&raquo;&nbsp;<a href="http://www.delta-visions.net/forums/index.php?showforum=35">Teams Forums</a>&nbsp;&laquo;
							<br /><br />
						</div>
					</div>
				</div>
				
				<div id='tabItem4' class="tabitem" style="width:100%;text-align:center;">
					<div>
						<div class="tabcontent" style="width:100%;text-align:center;">
							There are currently no Team Battle Stats Available
							<br />
							&raquo;&nbsp;<a href="http://www.delta-visions.net/forums/index.php?showtopic=14218">TEAMS AND BATTLE LEAGUE</a>&nbsp;&laquo;
							<br />
							&raquo;&nbsp;<a href="http://www.delta-visions.net/forums/index.php?showforum=26">Battle Request</a>&nbsp;&laquo;
							<br />
							&raquo;&nbsp;<a href="http://www.delta-visions.net/forums/index.php?showforum=35">Teams Forums</a>&nbsp;&laquo;
							<br /><br />
						</div>
					</div>
				</div>
				<div class="clearfloat"></div>				 
			</div>
		</div>
		
		<div id="dvQuickLinks">
			<ul id="menu1" class="menu noaccordion collapsible">
				<li><a href="#">&raquo; General</a>
					<ul class="expand">
						<li><a href="http://www.delta-visions.net/forums/index.php?showforum=6">News, Info and Rules</a></li>
						<li><a href="http://www.delta-visions.net/forums/index.php?showforum=144">Introductions</a></li>
						<li><a href="http://www.delta-visions.net/forums/index.php?showforum=75">FAQ</a></li>
					</ul>
				</li>
				<li><a href="#">&raquo; The Colloseum</a>
					<ul class="expand">
						<li><a href="http://www.delta-visions.net/forums/index.php?showforum=25">SOTW</a></li>
						<li><a href="http://www.delta-visions.net/forums/index.php?showforum=143">AOTM</a></li>
						<li><a href="http://www.delta-visions.net/forums/index.php?showforum=26">Battle Requests</a></li>
						<li><a href="http://www.delta-visions.net/forums/index.php?showforum=65">Battle Voting</a></li>
					</ul>
				</li>
			</ul>
		</div>
		<div class="clearfloat"></div>
		<div id="dvMessages">
			<p><i>
				NOTE: All members with 0 postcount will be removed regularly. 
				So if you want to keep your account or you just joined contribute to the forum. 
				Don't hesitate to start an introduction thread or give us some feedback. 
				Remember NOT to post links in your first post or you could be autoremoved as a potential spammer. Thanks
			</i></p>
		</div>
	</div>
</div>

So standalone it works. If I insert all the scripts in the board header and footer wrapper and post the html in a new post it works.
If I put the html also in the board header and footer wrapper the script does not do its job. I have no clue why, hope you are able to help me out.

PS. you can still check it out, you still have root admin rights.
You can see it working here: http://www.delta-visions.net/forums/index....showtopic=14300

This post has been edited by Senthrax: 05 February 2009 - 07:27 PM

[compguy11]

To be totally honest, I am not extremely knowledgeable on Javascript matters, so nothing pops out at me right away as a problem.

So instead of spending time trying to make it work in the board header, let me ask you this question: why do you need it in the board header? What if you created a separate skin bit in skin_global, added what you needed, and then added a replacement in ipsclass.php (in a similar manner to the way IPB already replaces certain lines in its board header with much larger pieces of code)

Try that, or let me know if there is something stopping you from doing that. I'm sorry that I'm not much help in the Javascript area. I just recently started getting into that, and don't have enough knowledge to tell you why it wouldn't work.

[Senthrax]

Hi compguy11,

Thanks for your answer and sorry for the late late reply. I have been so busy I didn't have time to look into this any further.
I have created a template bit now with my code in. How should I go from here? how can I insert this template bit on only my main board index page if the template bit is called for example custom_site_box?

it looks like it is not as easy as putting <% custom_site_box %> in the html header and footer wrapper unfortunately...
Any help appreciated m8.

[compguy11]

It isn't that easy.. you need one quick file edit. Open /sources/ipsclass.php. Find the "display" class. You are looking for a function that looks like it does the final output for IPB. Right now, I cannot recall the name of that function (I think it might be just output() or do_output() ). Anyway, somewhere in there is a nice long list of str_replace functions (not sure how much you know about PHP, but these functions search for string A and replace it with string B.) Follow the pattern for these lines by adding a new one with your search before the first comma, your replace before the second comma, and leave the last thing alone.

Sorry I don't have time to give a whole PHP tutorial on how to do this. I'm hoping you will learn from example to get this to work. Good luck.

[Senthrax]

Thanks for the info m8.

I found the display class in the nowadays "class_display.php" file with the do_output method and the only replacing happening here are the <% BLABLABLA %> tags in the board header and footer wrapper. So I guess if I want my code to display on each page I can add my own custom <% myTag %> tag and replace it with my skin bit. However if I want to only display it on the main board index I'm not sure where to do that. Do you have any pointers on this?

I am not sure though how I have to replace the <% myTag %> with the custom template bit I have made. What variable should I use to replace it with?
is there a built in function in the IPB API that will return the value of a created template bit? I've tried a couple of things but they ain't workin and I can only guess here as I don't find any valuable info on google.

Btw I am not familiar with php syntax but I am an asp.net 2.0 developer so I can find my way around and I can learn quickly.

Is there any influence if I create my skin template bit under "board index" category in the ACP or if I put it in an other category? or is this merely for organizational purpose?
I also noticed they are replacing a <% JAVASCRIPT %> tag but I don't know in which file the contents are. perhaps it will be better to place my javascript part in there aswell. Do you know where that is located? only pointer I got right now is $output_array['JS'] but I don't know where the value they have put in this array comes from and I don't have any neat feature to right click and go to definition etc or something cuz I am only inspecting this single file in dreamweaver right now and I don't have the full project in a development UI so searching for which functions refers to where etc is very difficult.

PS. I also pm'ed you but you probably read that one first..