?
Solved

Div jquery light box JS  returning an invalid char error

Posted on 2011-04-21
3
Medium Priority
?
268 Views
Last Modified: 2012-05-11
Hi all, I am trying to add a lighbox to my site that targets div's:

I followed a tutorial, but the javascript in between the head tags is returinng an error,
the referenced js file is OK.

I've attached my files.

the js file appears to be Ok, but as I say the javascript in-between the head tags is returning an invalid char error.
index.html
jquery.js
vm.css
0
Comment
Question by:DJSharepoint
  • 2
3 Comments
 
LVL 19

Expert Comment

by:Greg Alexander
ID: 35440022
Not sure if EE's editor will show them, but you literally have some weird stuff in the js

Your Code:
<script type="text/javascript">
$(document).ready(function(){
$(¿a#show-panel¿).click(function(){
$(¿#lightbox, #lightbox-panel¿).fadeIn(300);
$(window).animate({
opacity:0,350:function(){
});
})
$(¿a#close-panel¿).click(function(){
$("#lightbox, #lightbox-panel").fadeOut(300);
});
})
</script>

Open in new window



Correct Code
<script type="text/javascript">
$(document).ready(function(){
$("#show-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeIn(300);
$(window).animate({
opacity:0,350:function(){
});
})
$("#close-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeOut(300);
});
})
</script>

Open in new window

0
 

Author Comment

by:DJSharepoint
ID: 35440494
Hi galexander07,that's great works a treat, although I'm designing on a laptop at the mo and see that when I scroll down it doesn't cover the whole screen. Checked css and min-height and min-width is 100%, strange. Also, tried to change the opacity as is totaly black and want to be able to see some of the content behind, ie 70% obacity. Tried to change the css to: but didn't work. Do you know what I'm doing wrong here? Something to do with the opacity in the xhtml?

#lightbox {
display:none;
background:#000000;
opacity:8.0;
filter:alpha(opacity=80);

position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
0
 
LVL 19

Accepted Solution

by:
Greg Alexander earned 2000 total points
ID: 35445530
Hmm. There was another error I didn't notice.. it happens to be in the opacity of the window.. Try this:
<script type="text/javascript">
$(document).ready(function(){
	$("#show-panel").click(function(){
		$("#lightbox, #lightbox-panel").fadeIn(300);
		$(window).animate({opacity:0,350:function(){}});
	});

	$("#close-panel").click(function(){
		$("#lightbox, #lightbox-panel").fadeOut(300);
	});
});
</script>

Open in new window

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The goal of the tutorial is to teach the user how to use the auto adjust feature and what the different options do. When your video is not working right you can choose the auto adjust feature to help choose your settings.
Suggested Courses

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question