Inline .Js Question.

I am converting a template to a c5 theme. In the original html it is using a js script for a dropdown menu but then later down where the menu div is it also calls it like this:

<script type="text/javascript">
   $('#menu').dropotron(); </script>

I have added the call to the js in my header.php however I can't figure out how to translate this part into php. So if anyone can chime in that would be spectacular.

View Replies: View Best Answer
cannonf700 replied on at Permalink Reply
I'm not an expert on this but everything I've seen has a call for a function after the script type.
For example:
<script type="text/javascript">function initMenu() { $('#am_menu ul').show(); </script>

This is from the accordain menu.
<script type="text/javascript">  
   animation   :   'slide',   
   hover_x      :   '300px'      

that was from the dojo page filter pro.
This might point you in the right direction...
whitenoise replied on at Permalink Reply
The <script> tag that you are mentioning in your post is actually part of the HTML pages, and is not PHP code. It basically tells the browser, via an external library called jQuery, to execute javascript code when the entire browser document in loaded and ready. That javascript code will in turn enable the dropdown menu.

In short, all this happens in the web browser, not on the server (which is where PHP scripting resides).

Why do you want to convert that code to PHP?
fslayer replied on at Permalink Reply
I don't know why I want to convert it to php. I'm still pretty green when it comes to converting themes and I've never had one that had js already scripted in it. I just assumed i would need to translate it to php. I still can't get it work right even after trying to just create a drop down package to use as a template.
whitenoise replied on at Permalink Reply
Okay -- you will find in your web ventures that often javascript code not only doesn't need to be converted to PHP, it usually cannot be.

PHP and javascript serve very different purposes and are used at very different times in a web page's life cycle.

PHP is used to control server-based operations, often when preparing the web page that will be sent to the browser. Javascript kicks into action once the web page has been delivered to the browser.

Since the dropdown javascript code lives entirely in the web browser, in this case PHP code would most likely be used to prepare the HTML document (inserting the required data to fill up the dropdown).

Keep in mind that the paths used to refer to external assets (such as scripts) may need to be modified in your template HTML to fit concrete5's theming system (see the use of getThemePath() in the default/ theme that ships with Concrete5 for an example).

jbx replied on at Permalink Reply
Hey fslayer,

You should be able to copy and paste that script tag exactly as it is into the footer of your template you are building. Just before the </body> tag would be an ideal place. Try that and shout back if it still doesn't work...

fslayer replied on at Permalink Reply
Still can't seem to get this working. I don't believe that it can be this difficult to simply get jquery working but apparently it's more difficult that I assumed. Here is my scenario and maybe this will shed some light on what I am trying to accomplish.
I downloaded a theme that had a dropdown jquery menu built into it. I tried to convert the theme over to concrete5 while retaining the jquery menu. Failure.

I think that sums it up right? So here is what I have done to try and get this working. I have tried adding a call to the "dropotron.js" in my header.php file and place the .js file in my /js folder in my theme. Then call the script as mentioned below by putting it in my footer. That didn't work.

I have attempted to create a custom autonav template by trying to follow all the outdated material using sooperfish or accordian I could find which sorta helped but not really as the syntax has seemed to change in the view.php file in the core so that didn't work very well HOWEVER I did get all my styles and everything to work, just no dropdown effect. I choose display all subpages and all levels I just get links to the pages with styles and no dropdown effect.

The original template came with 2 jquery files jquery-1.7.1.min.js and jquery.dropotron-1.0.js. If I use the jquery.min file, my concrete5 just sits and spins so my assumption is that the core jquery and this one are fighting. So i quit using it and am only using the actual dropotron.js. Which still leads me back to where I am is with a non-functioning dropdown and a feeling of webdesign defeat.
whitenoise replied on at Permalink Reply
Hey there;

Yes, including your own copy of jquery will result in a jquery conflict and re-definitions. If you look at the page source of the resulting Concrete5 site, there is a script directive that brings in the jquery library bundled with C5.

I think you need to break things down and isolate potential issues.

(a) are you sure that the dropotron.js script is properly found and loaded in the browser? Does it show as loaded in your browser's inspector?

(b) do you get any javascript error messages in the console? Is the dropotron.js script syntax-correct and is the javascript call to hook the actual drop-down menu successful?

As the code for the dropdown executes in the browser via javascript, it is where our attention must be focused. So, if you've never used either firebug or chrome's web inspector, now's the time to meet them. :)

Let me know what those tools find for you.
fslayer replied on at Permalink Reply
So firebug shows that the dropotron.js is loading the <head> of the page, where I think I'm having the most trouble at is the view.php and/or the view.js files. I removed the view.js from the /autonav/template/dropotron/ directory just to see if that would make a difference. It doesn't. The view.php file is only left and it's contents are as follows
$bvt = new BlockViewTemplate($b); 
function callback($buffer) 
  return (str_replace('id=".dropotron"', 'class=".dropotron" id="nav"', $buffer));

view.js contents
$(document).ready(function() {

Now granted this is from the sooperfish and I just replaced what I thought was the correct classes. My css file isn't the same stucture as the sooperfish either and I don't know if that has anything to do with it. My css file uses #menu li not ul#nav li as the sooperfish does so my problem maybe a combination of several different things. if you want to see for yourself.
whitenoise replied on at Permalink Reply
First thing I notice is that your class name is '.dropotron' and so is the id string. The periods should be dropped -- ID and CLASS html attributes must begin with an alphanumeric character so these attribute declarations are illegal. ("." is used as a class selector in CSS though).

So your declaration should read id="nav" class="dropotron" so you can hook your dropotron menu either with $('.dropotron') or $('#nav').

This might help.
fslayer replied on at Permalink Reply
BTW I must say thanks for your willingness to keep putting up with my n00bness. 2nd of all here is my css structure so maybe you can tell me where it is I may be going wrong.
#menu {
   padding: 0px 20px;
   list-style: none;
   line-height: 60px;
   letter-spacing: -1px;
   text-decoration: none;
   text-transform: lowercase;
   text-shadow: 1px 1px 1px #ffffff;
   font-family: 'Arvo', sans-serif;
   font-size: 22px;
   font-weight: normal;
   color: #000000;
#menu li {

now this stucture is from the original template so nothing has changed so I'm sure there are probably things I don't need but for the sake of k.i.s.s. I used all of it just for troubleshooting.
whitenoise replied on at Permalink Reply
My pleasure. Your CSS has no syntax issues with it (which doesn't really say much). Would you consider packaging the theme together so I can run through it and see if I can find where the issue is?
whitenoise replied on at Permalink Reply
I found the original theme that you are trying to convert. Your modified menu structure seems similar to the original theme's structure, so that shouldn't be the issue. On your live site, though, the dropotron jQuery plugin is disabled, so it's hard to diagnose any further.

What happens if you enable the <script></script> tag just below the menu's <ul> structures? (as it was in the original template)
fslayer replied on at Permalink Reply
I'm not sure what you mean by disabled... I mean I know what disabled means but I don't see where its disabled at using firebug. It shows up in the <head> tag of the site. Also the <script> tags are where they were originally I just had them commented out so that has been changed. I have tried to create a custom autonav using the dropotron and I have tried to use it hardcoded in the header.php as well. The closest I have got it to work is to use the autonav block but the entire menu is invisible, until you hover your mouse over it and then it drops down. Formatting is all jacked. However in the version on the live site, the formatting is correct and I'm using a custom template, the dropdown just doesn't work. I figured it would be a simnple task to import jquery since it's a core part of c5. I'm not sure where the issue is coming from...
whitenoise replied on at Permalink Reply
It's a little difficult for me to completely track down the problem without all your custom files on hand.

The difficulty does not stem from jQuery, I do believe. In fact, converting the original html file should not be very difficult - from what I saw from the original template, you could keep 90% of the HTML intact while adding three Areas (one for header, one for sidebar, one for content) and adding the autonav block with a custom template.

As a test, I suggest you go back to the original HTML file and attempt to only get the drop-down menu to work; save the HTML as PHP, add the C5 header and footer includes and then add a single Area replacing the drop-down's <ul> structure in the template. Don't change the CSS at this point (but do remove references to jQuery). In that header area, via Concrete5, add the autonav block. Create your custom template for the autonav block, and make sure that the view.php file generates exactly the same format as the original HTML was. Isolate the menu so it is the only thing you focus on, leaving everything else as static HTML for now.

That should give you a functional dropotron menu to start with. Once that works, you can look into burning the autonav block into the php template.

I believe that the series of modifications you have made to the original HTML to turn it into a template might be fuzzing the issue. "Converting" the theme to C5, here, means adding content areas and a very simple custom view to the autonav. If you focus solely on the autonav and use the simplest path possible to get a prototype to work, that should make it easier.

Let me know how you fare.
whitenoise replied on at Permalink Best Answer Reply 1 Attachment

I put my money where my mouth is and took a few minutes to do just what I suggested, which I believe accomplishes what you need.

You will find the results in the attached file, which will give you a functional template over autonav using dropotron (oh yes, I did go as far as hardcoding the autonav into the template).

I have done exactly what I suggested above; minimal modification to a custom template over autonav and added two content sections.

Extract the file as a theme, activate the theme on a fresh c5 install, switch your main page to the left_sidebar page type and you should be good to go.

If you have any questions about the code, please PM me.
fslayer replied on at Permalink Reply
You are amazing. I am just looking over your code and it's really different than mine. I know you hard coded the autonav into it and I'm still not sure how to accomplish that but it seems easier than creating a new area which btw was where it is jacking up on me. If used the original with minimal modification and just converted it to a c5 theme, the menu worked fine, but when I added it as a new area and tried to use the autonav block it went haywire on me. As a thanks, I will even include you in my footer.
whitenoise replied on at Permalink Reply
Good to know this solved your conundrum. Although I must say, there shouldn't be much difference between creating a new area and adding the autonav block via C5 and hardcoding it. You just end up short-circuiting some of the code but essentially it's the same.

Start with the code I sent and replace the menu stuff with a new area:

$a = new Area('drop-o-tron');

then simply add the autonav block and the rifle template should already be in the dropdown.

If you encounter anything else, let us know!