trying to make light box, getting Jquery Syntax error

Question

I am trying to get a light box to display when you click a tag on the page. Basically it the js is trying to take the href and use it to get the width. (not the best at js and jquery) so any help is gonna be very much appreciated.

error im getting:

Error: Syntax error, unrecognized expression: #?w=500, a[name=?w=500] @ http://code.jquery.com/jquery-latest.js:4680

html

<a href="#?w=500" rel="diff" class="poplight">
      <h1 class="blue">diff</h1>
</a>
<div id="diff" class="popup_block">
   <p>text in light box</p>
</div>

Jquery:

<script type="text/javascript">
        $(document).ready(function() {
        //When you click on a link with class of poplight and the href starts with a # 
        $('a.poplight[href^=#]').click(function() {
            var popID = $(this).attr('rel'); //Get Popup Name
            var popURL = $(this).attr('href'); //Get Popup href to define size
            window.alert('2 test in the popup function ');
            //Pull Query & Variables from href URL
            var query= popURL.split('?');
            var dim= query[1].split('&');
            var popWidth = dim[0].split('=')[1]; //Gets the first query string value

            //Fade in the Popup and add close button
            $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close" style="float:right;">Close</a>');

            //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css
            var popMargTop = ($('#' + popID).height() - 80) / 2;
            var popMargLeft = ($('#' + popID).width()) / 2;

            //Apply Margin to Popup
            $('#' + popID).css({
                'margin-top' : -popMargTop,
                'margin-left' : -popMargLeft
            });
            //Fade in Background
            $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
            $('#fade').css({'filter' : 'alpha(opacity=90)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=90)'}) is used to fix the IE Bug on fading transparencies 

            return false;
        });

        //Close Popups and Fade Layer
        $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
            $('#fade , .popup_block').fadeOut(function() {
                $('#fade, a.close').remove();  //fade them both out
            });
            return false;
        });
        });
    </script>

I found a work around, just to hard code the width and just make it ``. If i do this i can at least work with it. — DROP TABLE users, Dec 21 '12 at 14:57

JDB · Answer 1 · 2012-12-21T15:14:16.063

This isn't a direct answer, but did you do know that you can create your own attributes?

<a popupwidth="500" rel="diff" class="poplight">
    <h1 class="blue">diff</h1>
</a>

would work fine:

$('a.poplight[popupwidth]').click(function() {
    //...
    var popWidth = $(this).attr('popupwidth');
    //...
}

Your HTML editor might complain, but this is perfectly legal HTML and will function fine. In case you want to be XML-compliant, you can create your own XML Schema and reference it via a namespace.

Schema

<?xml version="1.0" encoding="utf-8"?>
<xs:schema id="XhtmlAddons"
    targetNamespace="http://somekindofid/XhtmlAddons.xsd"
    elementFormDefault="qualified"
    xmlns="http://somekindofid/XhtmlAddons.xsd"
    xmlns:mstns="http://somekindofid/XhtmlAddons.xsd"
    xmlns:xs="http://www.w3.org/2001/XMLSchema">

    <xs:attribute name="popupwidth" type="xs:int" />

</xs:schema>

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:addon="http://somekindofid/XhtmlAddons.xsd">
    <!-- ... -->
    <a addon:popupwidth="500" rel="diff" class="poplight">
        <h1 class="blue">diff</h1>
    </a>
    <!-- ... -->
</html>

jQuery*

$('a.poplight[addon\\:popupwidth]').click(function() {
    //...
    var popWidth = $(this).attr('addon\\:popupwidth');
    //...
}

Please note, however, that jQuery does not natively support XML namespaces so you may run into trouble if you do anything advanced. The first example above (without the namespaces) is preferred unless your really, really need XML compatibility for other reasons.

UPDATE

If you are validating against HTML 5, you should NOT use the schema. Just prepend your custom attribute with "data-":

HTML

<a data-popupwidth="500" rel="diff" class="poplight">
    <h1 class="blue">diff</h1>
</a>

jQuery

$('a.poplight[data-popupwidth]').click(function() {
    //...
    var popWidth = $(this).attr('data-popupwidth');
    //...
}

See HTML 5 data- Attributes by Jon Resig

@DanielFigueroa: Depends what you are trying to validate against. It would not validate against XHTML 1.0 (according to this http://stackoverflow.com/questions/581279/xhtml-validation-custom-namespaces-and-attributes) but it would be valid XML in case you need to parse the results. This is NOT necessary in HTML 5 and is NOT preferred (as already noted). — JDB, Dec 21 '12 at 15:12

trying to make light box, getting Jquery Syntax error

1 Answers1