Need a bit of help integrating some javascript.

Started by Black Tiger, December 06, 2016, 03:52:31 PM

Previous topic - Next topic

Black Tiger

I want to integrate some javascript into a friends forum. I'm using the Load.php for it which worked before with a special snow script (not the yandex mod).

So I understood i needed the context stuff, so this is already done:
// Project Light part 1
        $context['html_headers'] .= '<link rel="stylesheet" media="screen" href="christmaslights.css" />';
        $context['html_headers'] .= '<script type="text/javascript" src="soundmanager2-nodebug-jsmin.js"></script>';
        $context['html_headers'] .= '<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js"></script>';
        $context['html_headers'] .= '<script type="text/javascript" src="christmaslights.js"></script>';
        $context['html_headers'] .= '<script type="text/javascript">';
        var urlBase = './';
        soundManager.url = './';
        </script>


Now I'm having issues with the last two lines from this part, there should be a change there but I'm no coder, this is what the error log says:
QuotePHP Parse error:  syntax error, unexpected 'var' (T_VAR) in /home/duckfile/public_html/forum/Sources/Load.php on line 1630
Line 1630 is the var urlBase line. So I presume that one and the one below should change.
But what do I have to change them to?

My second question is the second part of this adjustment, which needs an entry within the <body> tag.
So I placed it above the original "mtitle" tag in the body tag of Load.php like this:
        <body>

                // Project lights part 2
                <div id="lights">
                <!-- lights go here -->
                </div>
                // end lights project

                <h3>', $mtitle, '</h3>
                ', $mmessage, '
        </body>

Is this correct or do I need to do this different?
Greetings, Black Tiger

Pipke

you forgot above var urlBase line <script> and var before soundManager.url


echo'<script>
        var urlBase = './';
        var soundManager.url = './';
        </script>';


the other code you posted seems to me right  ;)
"If something is wrong, fix it if you can. But train yourself not to worry: Worry never fixes anything."

Click here to view my mods for SMF

Hey 👋 Did i helped... you like what i do. You can now buy me a coffee! ☕

Colin

Quote from: Black Tiger on December 06, 2016, 03:52:31 PM
// Project Light part 1
        $context['html_headers'] .= '<link rel="stylesheet" media="screen" href="christmaslights.css" />';
        $context['html_headers'] .= '<script type="text/javascript" src="soundmanager2-nodebug-jsmin.js"></script>';
        $context['html_headers'] .= '<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js"></script>';
        $context['html_headers'] .= '<script type="text/javascript" src="christmaslights.js"></script>';
        $context['html_headers'] .= '<script type="text/javascript">';
        var urlBase = './';
        soundManager.url = './';
        </script>

You closed the string prematurely.

// Project Light part 1
        $context['html_headers'] .= '<link rel="stylesheet" media="screen" href="christmaslights.css" />';
        $context['html_headers'] .= '<script type="text/javascript" src="soundmanager2-nodebug-jsmin.js"></script>';
        $context['html_headers'] .= '<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js"></script>';
        $context['html_headers'] .= '<script type="text/javascript" src="christmaslights.js"></script>';
        $context['html_headers'] .= '<script type="text/javascript">
        var urlBase = "./";
        soundManager.url = "./";
        </script>';

"If everybody is thinking alike, then somebody is not thinking." - Gen. George S. Patton Jr.

Colin

Black Tiger

@Pipke: Thank you, however then I got this error:
PHP Parse error:  syntax error, unexpected '/' in /home/duckfile/public_html/forum/Sources/Load.php on line 1631
which is the var urlBase line again.

@Colin: Your solution worked.... or at least I don't get any errors anymore. However, the lights which should display on the forum do not show up.
Did I do something wrong?

I did not have any manual. Only an index.html from which I had to see what I had to do, maybe I forgot something.
This is the code in the index.html, but I only want the lights and sounds, not the choice to make smaller or bigger lights:

<html>
<head>
<title>Smashable Christmas Lights</title>
<link rel="stylesheet" media="screen" href="christmaslights.css" />
<script type="text/javascript" src="soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="christmaslights.js"></script>
<script type="text/javascript">
var urlBase = './';
soundManager.url = './';
</script>
</head>
<body>
<div>
<div id="loading">
  <h1>Christmas Light Smashfest 2008: Prototype</h1>
  <h2>Rendering...</h2>
</div>

<div id="lights">
  <!-- lights go here -->
</div>

<div style="position:absolute;bottom:3px;left:3px">
  <a href="?size=pico">pico</a> | <a href="?size=tiny">tiny</a> | <a href="?size=small">small</a> | <a href="?size=medium">medium</a> | <a href="?size=large">large</a>
</div>

</div>
</body>
</html>


On that index.html the lights show up in spite of the fact that nothing is filled in at the "lights go here" spot.
Greetings, Black Tiger

Colin

Can you give me a link to your forum with your current implementation of this?
"If everybody is thinking alike, then somebody is not thinking." - Gen. George S. Patton Jr.

Colin

Black Tiger

Greetings, Black Tiger

Pipke


<html>
<head>
<title>Smashable Christmas Lights</title>
<link rel="stylesheet" media="screen" href="http://www.schillmania.com/projects/snowstorm/lights/christmaslights.css" />
<script type="text/javascript" src="http://www.schillmania.com/projects/snowstorm/lights/soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://www.schillmania.com/projects/snowstorm/lights/christmaslights.js"></script>
<script type="text/javascript">
var urlBase = 'http://www.schillmania.com/projects/snowstorm/lights/';
soundManager.url = 'http://www.schillmania.com/projects/snowstorm/lights/';
</script>
</head>

<body>

<div>

<div id="loading">
  <h1>Christmas Light Smashfest 2008: Prototype</h1>
  <h2>Rendering...</h2>
</div>

<div id="lights">
  <!-- lights go here -->
</div>

<div style="position:absolute;bottom:3px;left:3px">
  <a href="?size=pico">pico</a> | <a href="?size=tiny">tiny</a> | <a href="?size=small">small</a> | <a href="?size=medium">medium</a> | <a href="?size=large">large</a>
</div>

</div>



</body>
</html>


all links work external
"If something is wrong, fix it if you can. But train yourself not to worry: Worry never fixes anything."

Click here to view my mods for SMF

Hey 👋 Did i helped... you like what i do. You can now buy me a coffee! ☕

Black Tiger

That's from the author's site. You won't see that on my friends forum's page source.
But maybe the problem lies in there. The index.html is called automatically on the author's site with the var urlBase. I put my code in the Load.php
Should I move it to the index.php? And if yes where do I have to put both codes?
Greetings, Black Tiger

Pipke

on index.template.php


echo $context['html_headers'];
echo'
<style type="text/css">
#lights {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
overflow:hidden;
}

.xlsf-light {
position:absolute;
}

body.fast .xlsf-light {
opacity:0.9;
}

.xlsf-fragment {
position:absolute;
background:transparent url(image/bulbs-50x50-fragments.png) no-repeat 0px 0px;
width:50px;
height:50px;
}

.xlsf-fragment-box {
position:absolute;
left:0px;
top:0px;
width:50px;
height:50px;
*width:100%;
*height:100%;
display:none;
}

.xlsf-cover {
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
background:#fff;
opacity:1;
z-index:999;
display:none;
}
</style>
<script type="text/javascript" src="http://www.schillmania.com/projects/snowstorm/lights/soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://www.schillmania.com/projects/snowstorm/lights/christmaslights.js"></script>
<script type="text/javascript">
var urlBase = "http://www.schillmania.com/projects/snowstorm/lights/";
soundManager.url = "http://www.schillmania.com/projects/snowstorm/lights/";
</script>';


see nrns-games.com
"If something is wrong, fix it if you can. But train yourself not to worry: Worry never fixes anything."

Click here to view my mods for SMF

Hey 👋 Did i helped... you like what i do. You can now buy me a coffee! ☕

Black Tiger

Thank you.
But it doesn't seem to work on nrns-games.com either. I only see the default text with "Rendering...." on the second line, but no lights appear.
Greetings, Black Tiger

Pipke

i removed it as it uses to much cpu, but it worked lol.

from auther site:
Quote
CPU Use

Snowstorm can eat up a lot of CPU, even on modern computers, because of the number of elements being moved around the screen at once. The basic example may have notably lower CPU use as it doesn't include the christmas lights, and the page layout is much simpler. Consider raising the animation interval, and lowering the amount of snowflakes (active and max) to help reduce CPU use.
Where supported, Snowstorm will attempt to use GPU-based hardware acceleration to draw and animate the snow. Having GPU acceleration can help in reducing CPU load.
"If something is wrong, fix it if you can. But train yourself not to worry: Worry never fixes anything."

Click here to view my mods for SMF

Hey 👋 Did i helped... you like what i do. You can now buy me a coffee! ☕

Pipke

"If something is wrong, fix it if you can. But train yourself not to worry: Worry never fixes anything."

Click here to view my mods for SMF

Hey 👋 Did i helped... you like what i do. You can now buy me a coffee! ☕

Black Tiger

Oh Lol I believed you when you say you removed it and it worked. :)

I copied the code in my index.template.php but it did not do anything.
Maybe I put it in the wrong place in the index.template.php? I copied the complete code from you and placed it below a <head>'; tag.
Is that the wrong place?
Greetings, Black Tiger

Black Tiger

Oh I see I miss some code.
<div id="lights">

</div>

Where and how do I put that in the index.template.php? Does that need some echo code too?

By the way, the cpu usages is about the snowstorm, I only use the lights. ;)
Greetings, Black Tiger

Pipke

on index.template.php around line 161

find

// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'];

echo '
</head>
<body>';


replace by

// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'];
echo'
<style type="text/css">
#lights {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
overflow:hidden;
}

.xlsf-light {
position:absolute;
}

body.fast .xlsf-light {
opacity:0.9;
}

.xlsf-fragment {
position:absolute;
background:transparent url(image/bulbs-50x50-fragments.png) no-repeat 0px 0px;
width:50px;
height:50px;
}

.xlsf-fragment-box {
position:absolute;
left:0px;
top:0px;
width:50px;
height:50px;
*width:100%;
*height:100%;
display:none;
}

.xlsf-cover {
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
background:#fff;
opacity:1;
z-index:999;
display:none;
}
</style>
<script type="text/javascript" src="http://www.schillmania.com/projects/snowstorm/lights/soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://www.schillmania.com/projects/snowstorm/lights/christmaslights.js"></script>
<script type="text/javascript">
var urlBase = "http://www.schillmania.com/projects/snowstorm/lights/";
soundManager.url = "http://www.schillmania.com/projects/snowstorm/lights/";
</script>';
echo '
</head>
<body>
<div>
<div id="loading">
  <h1>Christmas Light Smashfest 2008: Prototype</h1>
  <h2>Rendering...</h2>
</div>
<div id="lights">
  <!-- lights go here -->
</div>
</div>';
"If something is wrong, fix it if you can. But train yourself not to worry: Worry never fixes anything."

Click here to view my mods for SMF

Hey 👋 Did i helped... you like what i do. You can now buy me a coffee! ☕

Black Tiger

Almost...the text with "Rendering..." is appearing, but the lights are not visible yet.
Greetings, Black Tiger

Black Tiger

At first, thank you for your help so far.

But there's someting wrong with the code. When I implemented it on my theme (totalblue-k), I could not click topics and boards anymore and the lights did not appear.
So I just put back the original template file for now.
Greetings, Black Tiger

Pipke

ok ill had to look a bit better to the code, fixed that some links to topics and boards didnt work on the css, ok to get it done (working demo http://nrns-games.com)

- upload the folder 'lights' see the attachment zip from this post to your servers www root  <-- IMPORTANT!!!!

- on index.template.php around line 161 (from the theme your using)

find

// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'];

echo '
</head>
<body>';


replace by

// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'];
echo'<link rel="stylesheet" media="screen" href="/lights/christmaslights.css" />
<script type="text/javascript" src="/lights/soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript" src="/lights/animation-min.js"></script>
<script type="text/javascript" src="/lights/christmaslights.js"></script>';
echo '
</head>
<body>';
echo'<div>
<div id="loading">
  <h1>Christmas Light Smashfest...Rendering</h1>
</div>
<div id="lights">
  <!-- lights go here -->
</div>
</div>';



"If something is wrong, fix it if you can. But train yourself not to worry: Worry never fixes anything."

Click here to view my mods for SMF

Hey 👋 Did i helped... you like what i do. You can now buy me a coffee! ☕

Black Tiger

Well thank you for your help, but it's the same issue as last time.
I uploaded the lights folder (and subfolders) to the public_html.
Then I replaced the code you gave me, but only the two lines text with "rendering..." appeared, no lights and I could not select boards or topics anymore again. :(

Strange.

Edit: I used the original zip. Or do I need to use the attached zipfile?
There is a } after that code, so I have to put that code before the } correct?
Greetings, Black Tiger

Pipke

you need to use my lights folder from the zip i posted.
"If something is wrong, fix it if you can. But train yourself not to worry: Worry never fixes anything."

Click here to view my mods for SMF

Hey 👋 Did i helped... you like what i do. You can now buy me a coffee! ☕

Advertisement: