Node able to run this program .?

Question

2.50/5 (2 votes)

See more:

Hi i used this example (demo 6 but unable to find error please help)?

i want to use demo 6 but unable to do that..

http://www.aakashweb.com/resources/pages/demos/jquery-collapser/[^]ollapser/">http://www.aakashweb.com/resources/pages/demos/jquery-collapser/[^]ollapser/">http://www.aakashweb.com/resources/pages/demos/jquery-collapser/[^][^][^]

XML

<!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" >
 <script src="jquery.collapser.min.js" type="text/javascript"></script>
<script src="jquery.collapser.js" type="text/javascript"></script>
 <script src="jquery.collapser.min.js" type="text/javascript"></script>
    <script src="jquery.min.js" type="text/javascript"></script>
<head>
    <title>Expand table rows with jQuery - jExpand plugin - JankoAtWarpSpeed demos</title>
    <style type="text/css">
       .demo6{
    border: 1px solid #B9E3FF;
    background: #0099FF;
    padding-left: 5px;
    color: #FFFFFF;
}
    </style>

    <script type="text/javascript">

$('.panel').hide();

$('.demo6').collapser({
    target: 'next',
    effect: 'slide',
    changeText: 0,
    expandClass: 'expIco',
    collapseClass: 'collIco'
}, function(){
    $('.panel').slideUp();
});


    </script>
</head>
<body>
 <h4 class="demo6">Heading 1</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

<h4 class="demo6">Heading 2</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

<h4 class="demo6">Heading 3</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

<h4 class="demo6">Heading 4</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

</body>
</html>

Thanks

Posted 14-Sep-12 22:41pm

ravinsit89

Add a Solution

Comments

ravinsit89 15-Sep-12 4:48am

error is coming jquery is undefined

ravinsit89 15-Sep-12 5:29am

Hi
this time i get error

: The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol.

<html xmlns="http://www.w3.org/1999/xhtml" >
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.collapser.js" type="text/javascript"></script>

<head>
<title>Expand table rows with jQuery - jExpand plugin - JankoAtWarpSpeed demos</title>
<style type="text/css">
.demo6{
border: 1px solid #B9E3FF;
background: #0099FF;
padding-left: 5px;
color: #FFFFFF;
}
</style>

<script type="text/javascript">

$('.panel').hide();

$('.demo6').collapser({
target: 'next',
effect: 'slide',
changeText: 0,
expandClass: 'expIco',
collapseClass: 'collIco'
}, function(){
$('.panel').slideUp();
});

</script>
</head>
<body>

Heading 1

<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

Heading 2

<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

Heading 3

<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

Heading 4

<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

</body>
</html>

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Graham Breach · Answer 1 · 2012-09-14T23:21:00

Solution 1

You must include the "jquery.min.js" script file first, before "jquery.collapser.min.js" - the other jQuery file is a plugin and requires the main jQuery file to work.

Also, "jquery.collapser.min.js" should be the same as "jquery.collapser.js", but minified to take up less space. You only need to include one of them, and only once.

Posted 14-Sep-12 23:21pm

Graham Breach

Comments

AmitGajjar 15-Sep-12 5:27am

Not sure but javascript file order is not correct 5+,

ravinsit89 15-Sep-12 5:41am

Error is this Now

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol.

Graham Breach 15-Sep-12 5:47am

Then you should add the correct character encoding in the document or in the transfer protocol.

See http://www.w3.org/International/questions/qa-html-encoding-declarations for details

ravinsit89 15-Sep-12 5:57am

Every think is fine but it not look like as in demo 6 ..

http://www.aakashweb.com/resources/pages/demos/jquery-collapser/

i think script is not running...
<html>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<head>

<title>Expand table rows with jQuery - jExpand plugin - JankoAtWarpSpeed demos</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.collapser.js" type="text/javascript"></script>
<script src="jquery.collapser.min.js" type="text/javascript"></script>

<style type="text/css">
.demo6{
border: 1px solid #B9E3FF;
background: #0099FF;
padding-left: 5px;
color: #FFFFFF;
}
</style>

<script type="text/javascript">
alert("Hi");
$('.panel').hide();

$('.demo6').collapser({
target: 'next',
effect: 'slide',
changeText: 0,
expandClass: 'expIco',
collapseClass: 'collIco'
}, function(){
$('.panel').slideUp();
});

</script>
</head>
<body>

Heading 1

<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

Heading 2

<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

Heading 3

<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

Heading 4

<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

</body>
</html>

Graham Breach 15-Sep-12 6:06am

You've included the plugin twice again, so that could prevent the rest of the script from working. Apart from that, you're calling the jQuery functions directly in the header before the DOM has loaded, which is too early - you have to use the $(document).ready() callback or something similar.

I suggest you read through the jQuery tutorial before going any further: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

ravinsit89 15-Sep-12 11:48am

i want to make demo 6(http://www.aakashweb.com/resources/pages/demos/jquery-collapser/) but not able to do that..can you please help

ravinsit89 15-Sep-12 11:49am

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=no,target-densitydpi=device-dpi" />




<style type="text/css">
.demo6{
border: 1px solid #B9E3FF;
background: #0099FF;
padding-left: 5px;
color: #FFFFFF;
}
</style>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.collapser.js" type="text/javascript"></script>
<script type="text/javascript">
alert("Hi");
$(document).ready(function() {
// Handler for .ready() called.
$('.panel').hide();
});

$(".demo6").click(function() {
alert("test");
});

$('.demo6').collapser({
target: 'next',
effect: 'slide',
changeText: 0,
expandClass: 'expIco',
collapseClass: 'collIco'
}, function(){
$('.panel').slideUp();
});

</script>
</head>
<body>

Heading 1

<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

Heading 2

<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

Heading 3

<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

Heading 4

<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

</body>
</html>

Graham Breach 15-Sep-12 15:17pm

The $(document).ready(function(){ ... }); should go around ALL of the jQuery code. At the moment you have set it to hide the "panel" divs, but the click() and collapser() functions are still outside of the callback function.

ravinsit89 15-Sep-12 21:43pm

Hievery thing is fine only want some explanation from your side.

$(document).ready(function() {
// Handler for .ready() called.
$('.panel').hide();

$(".demo6").click(function() {
alert("test");
});

$('.demo6').collapser({
target: 'next',
effect: 'slide',
changeText: 0,
expandClass: 'expIco',
collapseClass: 'collIco'
}, function(){
$('.panel').slideUp();
});

});
1)why all function is inside $(document).ready(function(){}
2) Please why this $('.demo6').collapser({ call on click;

Graham Breach 16-Sep-12 3:42am

1) Everything has to go inside $(document).ready() because these functions add handlers to the document. If the document has not loaded, then the handlers can't be added.
2) I don't know - you'll have to read the collapser documentation.

ravinsit89 15-Sep-12 12:11pm

please help making this demo 6 possible

ravinsit89 15-Sep-12 21:57pm

3) why this function inside the function function(){
$('.panel').slideUp();
});

Graham Breach 16-Sep-12 3:43am

3) I don't know. Read the collapser documentation.

ravinsit89 16-Sep-12 3:59am

OK..