Customizing SMF > SMF Coding Discussion

SMF Code

(1/2) > >>

cations:
Hello SMF Expert.

I am new to web development so please forgive me if my questions are very simple.


--- Code: ---div id="top_section">
<h1 class="forumtitle">
<a href="http://www.axiumsys.ca/SMF/SMF/index.php">Ask Picard</a>
</h1>
<img id="upshrink" src="http://www.axiumsys.ca/SMF/SMF/Themes/default/images/upshrink.png" alt="*" title="Shrink or expand the header." style="display: none;" />
<img id="smflogo" src="http://www.axiumsys.ca/SMF/SMF/Themes/default/images/smflogo.png" alt="Simple Machines Forum" title="Simple Machines Forum" />
</div>
--- End code ---

1) When I click on the Upshrink image it performs an action (shrink or expand).  Where is the trigger / event  and the code to make this happen?  Is there a pseudo element in the CSS that acts as the trigger?  What is it?  Is the trigger event in javascript code somewhere?

2)
--- Code: ---<div id="wrapper" style="width: 90%">
--- End code ---

How come SMF is styling in the markup?  I thought this was very bad practice? I am learning about web development from phpAcademy and the teacher there says to avoid styling markup.

Thank you

Marcus Forsberg:
1) The JS that handles that should be further down the file. The actual function is in script.js I believe.

2) Yes, you should use external CSS files as much as possible. However, the width of the wrapper is added through a setting in the administration panel. This is of course loaded in from the database with PHP/MySQL, so you can't change that in the external CSS. In that case, an inline style is the only way and there's no harm in using it.

Suki:
The in-line style is because SMF has a setting to let admins determinate the width of the forum. We don't generate on-the-fly css files so this is the simpliest way to achieve it.

For the Upshrink image, its JavaScript, take a look at your theme's Index.template.php  below the comment:

// Define the upper_section toggle in JavaScript.

cations:
Thank you to both of you.

I have to learn more about javascript and how it listens for events.

This web development is not an easy task!

 

cations:
I had some more questions about the Javascript.  Please note that I am a newb. :)


1)
--- Code: ---<script type="text/javascript"><!-- // --><![CDATA[
--- End code ---

Is
--- Code: ---<!-- // -->
--- End code ---
the hack for Netscape 1.0 and very old browsers to ignore this script?


2)
--- Code: ---<script type="text/javascript"><!-- // --><![CDATA[
var oMainHeaderToggle = new smc_Toggle({
--- End code ---

Why is this not in the theme.js source file?  Why is it embeded in the Body?

Thank you.

Navigation

[0] Message Index

[#] Next page