Parsing error

Report · Jan 10, 2011

Hi to all, i am a complete newbie to PHP and one of my lines returns a parse error:

$(".content-for-"+ $(this).attr("rel") +).show();

When i am commenting it, error goes out.

I am running PHP 5.2 if that helps.

- - -

Also, this code is part of a more complete code and was told to be placed into a .js file used along a generic jquery.js request.

Does that make sense?

Thanks for helping!

Report · Jan 10, 2011

When i am commenting it, error goes out.

Well comment it out then!

The syntax is not php. Looks like jQuery. What exactly are you trying to do? It helps if you provide more of your code.

this code is part of a more complete code and was told to be placed into a .js file

.js does not process .php

Report · Jan 10, 2011

Hi, first thanks for giving a hand. Yes this is jquery. Heres the story.

I am running a CMS application (Silverstripe not to name it - Business Catalyst wasnt an option for that project i.e. hosting requirements).

I have a SS menu that creates all divs i need from the sub-pages listing. Each of the <li> must show/hide the proprer div.

The code i was given asks for jquery. Those two lines load the .js files:

<% require javascript(cms/javascript/showpage.js) %>

<% require javascript(cms/javascript/jquery.js) %>

The showpage.js returns a parse error when check from Safari and Dreamweaver Code Inspector. That line is suspect and i cant comment it because the code wont run properly and it returns another error (cant find $ variable).

Here is the full code thats inside showpage.js

// on click of menu 2

$("#menu-2 li").click(function() {

// if this is already showing then do nothing

if($(this).hasClass('current')) return false;

// hide all content box

$(".content-box").hide();

// show the one we need

$(".content-for-"+ $(this).attr("rel") +).show();

// remove the current class from all menus

$("#menu-2 li.current").removeClass("current");

// add the current class to the link

$(this).addClass("current");

});

All i can ay as for now. Any clue whats the parse error?

Thanks!

Report · Jan 10, 2011

914_6 wrote:
$(".content-for-"+ $(this).attr("rel") +).show();

I'm not sure what this code is attempting to do, but the second plus symbol looks wrong.

I think the code is more likely to be this:

$(".content-for-"+ $(this).attr("rel")).show();

Report · Jan 10, 2011

Hi David, this code is try to show/hide some <divs> from a Silverstripe generated menu.

Tried that too. But it now gives me another error:

ReferenceError: Can't find variable: $

Here is the code again, with your correction:

// JavaScript Document

// on click of menu 2

$("#menu-2 li").click(function() {

// if this is already showing then do nothing

if($(this).hasClass('current')) return false;

// hide all content box (all divs)

$(".content-box").hide();

// show the one we need (only one div i need to show)

$(".content-for-"+ $(this).attr("rel")).show();

// remove the current class from all menus

$("#menu-2 li.current").removeClass("current");

// add the current class to the link

$(this).addClass("current");

});

Thanks!

Report · Jan 11, 2011

914_6 wrote:
But it now gives me another error:
ReferenceError: Can't find variable: $

$ is the shortcut for jQuery. Looking at your earlier post, you have this:

<% require javascript(cms/javascript/showpage.js) %>
<% require javascript(cms/javascript/jquery.js) %>

Using <% for PHP is highly unusual, but if that's the way your CMS works, I suppose that's what you need to use. However, the order of loading the files is wrong. You need to load jquery.js before attempting to run any jQuery code.

<% require javascript(cms/javascript/jquery.js) %>
<% require javascript(cms/javascript/showpage.js) %>

Also, make sure this comes before the script you're trying to run.

Report · Jan 11, 2011

Hi David and to all helping, changed my mind and decided to go another way. Instead of trying to use a Silverstripe generated <li> menu, ill use a plain vanilla one along jQuery.

Thanks to all!

Report · Jan 11, 2011

As i said, i am trying another route than Silverstripe to generate the <li>. So far i got it to work, the proper <divs> are showing/hiding correctly.

But leaving this unsolved.

With jQuery, is it possible to have <li> related to the the shown <div> use the a:hover class instead of the a:link ?

HERE IT THE JQUERY

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

$(document).ready(function(){

$('a').click(function () {

var divname= this.name;

$("#"+divname).show("").siblings().hide("");

});

</script>

HERE IS THE <LI>

<ul class="menu-2">

<li class="carrosserieDroits"><a href="#" name="droits">VOS DROITS</a></li>

<li class="menuGrisFloatLeft"></li>

<li class="carrosserieCollision"><a href="#" name="collision">EN CAS DE COLLISION</a></li>

<li class="menuGrisFloatLeft"></li>

<li class="carrosseriePieces"><a href="#" name="pieces">PIECES DE CARROSSERIE D'ORIGINE TOYOTA</a></li>

<li class="menuGrisFloatLeft"></li>

</ul>

HERE ARE THE DIVS

<div id="droits" name="droits">DROITS</div>

<div id="collision" name="collision">COLLISION</div>

<div id="droits" name="pieces">PIECES D'ORIGINE TOYOTA</div>

HERE IS THE CSS

.menu-2 li {

list-style-type:none;

float:left;

text-indent:-3000px;

}

.menu-2 li a {

display:block;

height:60px;

}

.menu-2 li.carrosserieDroits a {

background-image:url(images/MenuGrisCarrosserieDroitsOff.gif);

background-repeat:no-repeat;

background-color:#CC3;

width:60px;

}

/* EXAMPLE: i want to switch the active/clicked <li> to this class WHEN the the <div id=#droits"> is shown via jquery

and leave the other <li> untouched i.e. use the a state*/

.menu-2 li.carrosserieDroits a:hover {

background-image:url(images/MenuGrisCarrosserieDroitsOn.gif);

}

Thanks to all!

Report · Jan 11, 2011

I'm afraid that posting partial code like that makes it impossible to understand how the page is meant to work. I copied what you supplied into a web page, but the text in the unordered list is hidden, and when you click a link, the list disappears completely. You need to post a complete page, preferably on a website, and post the URL in the forum. That way, others can inspect the page and see how it should look.

Report · Jan 11, 2011

Sorry. Here is the full code and the link to a TEST PAGE, which is in no way close to the final appearance. I like to do working prototypes BEFORE designing.

http://www.cvm.qc.ca/farleyd/multi2/jQuerytest.html

$(function() {

$('#droits').show();

$('#collision').hide();

$('#pieces').hide();

$('#message').hide();

$('li a').click(function() { // When an item is clicked

var divname= this.name;

$("#"+divname).show("").siblings().hide(""); // this works fine

var showing = $(name).is(':visible'); // Remember if that content was already visible - Works fine too

if (!showing) { // If it wasn't visible

$('#message').show(); // this works so i know that the IF condition is valid (looks like AS3...)

$(this).addClass('active'); // Mark link as active

// this doenst not work OR i dont know how to implement it

// I want the active/clicked <li> to use the a:hover rule

}

});

/-->

</script>

<!--

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

#wrapper {

}

.clear {

clear:both;

}

#droits, #collision, #pieces {

padding:20px;

width:400px;

margin-left:210px;

}

.menu-2 {

margin:0;

padding:0 0 0 210px;

height:60px;

background-image:url(images/menuGrisFond.gif);

background-repeat:no-repeat;

}

.menu-2 ul {

margin:0;

padding:0;

}

.menu-2 li {

list-style-type:none;

float:left;

text-indent:-3000px;

}

.menu-2 li a {

display:block;

height:60px;

}

.menu-2 li.carrosserieDroits a {

background-image:url(images/MenuGrisCarrosserieDroitsOff.gif);

background-repeat:no-repeat;

background-color:#CC3;

width:60px;

}

.menu-2 li.carrosserieDroits a:hover {

background-image:url(images/MenuGrisCarrosserieDroitsOn.gif);

}

.menu-2 li.carroserieDroits a:active {

background-image:url(images/MenuGrisCarrosserieCollisionOn.gif);

}

.menu-2 li.carrosserieCollision a {

background-image:url(images/MenuGrisCarrosserieCollisionOff.gif);

background-repeat:no-repeat;

background-color:#CC3;

width:92px;

}

.menu-2 li.carrosserieCollision a:hover {

background-image:url(images/MenuGrisCarrosserieCollisionOn.gif);

}

.menu-2 li.carrosseriePieces a {

background-image:url(images/MenuGrisCarrosseriePiecesOff.gif);

background-repeat:no-repeat;

background-color:#CC3;

width:150px;

}

.menu-2 li.carrosseriePieces a:hover {

background-image:url(images/MenuGrisCarrosseriePiecesOn.gif);

}

.menuGrisFloatLeft {

float:left;

display:block;

height:60px;

width:3px;

background-image:url(images/menuGrisSpacer.gif);

}

#footer {

padding:10px;

background-color:#C93;

}

#message {

padding:10px;

width:300px;

background-color:#F93;

}

-->

</style>

</p>

</ul>

<div>

<p>DROITS</p>

<p>Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. v Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. v Lorem ipsum dolorem absurdum askest est.Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. v Lorem ipsum dolorem absurdum askest est.</p>

</div>

<p>COLLISION</p>

<p>Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. v Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. v Lorem ipsum dolorem absurdum askest est.</p>

</div>

<p>PIECES D'ORIGINES</p>

<p>Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. Lorem ipsum dolorem absurdum askest est. v Lorem ipsum dolorem absurdum askest est.</p>

</div>

<div id="message">MESSAGE TO BE SHOWNED ON CLICK</div>

</div>

Thanks to all!

Report · Jan 13, 2011

914_6 wrote:
Here is the full code and the link to a TEST PAGE, which is in no way close to the final appearance. I like to do working prototypes BEFORE designing.

Testing before plunging into the full design is a sensible approach. It also makes it easier for others to see what you're trying to do.

The difficulty is that you're trying to use a pseudo-class. The active and hover pseudo-classes are controlled by the browser, so you can't use addClass(). The simple way to do this is to create a rule that contains another class name, such as "selected":

.menu-2 li.carrosserieDroits a:hover,
.menu-2 li.carrosserieDroits .selected
 {
 background-image:url(images/MenuGrisCarrosserieDroitsOn.gif);
}
.menu-2 li.carrosserieCollision a:hover,
.menu-2 li.carrosserieCollision .selected
 {
 background-image:url(images/MenuGrisCarrosserieCollisionOn.gif);
}
.menu-2 li.carrosseriePieces a:hover,
.menu-2 li.carrosseriePieces .selected
 {
 background-image:url(images/MenuGrisCarrosseriePiecesOn.gif);
}

You can then use $(this).addClass('selected'). However, you also need to remove the "selected" class when a different link is clicked.

$('li a').click(function() { // When an item is clicked
            
      var divname= this.name;
      // get the other links and remove the 'selected' class
      var otherLinks = $(this).parent('li').siblings().children('a');
      otherLinks.removeClass('selected');
             
      $("#"+divname).fadeIn("normal").siblings().hide('');
             
      var showing = $(name).is(':visible');
            
      if (!showing) {   // If it wasn't visible
          $('#message').show();
          $(this).addClass('selected');
      }
});