jquery with modx

110 Posts

tintincute Reply #41, 15 years, 5 months ago

Luca, thanks I will try this tonight.
I think I need to reinstall the sql database again. I might messed up something.

Will let you know.

Thanks again

110 Posts

tintincute Reply #42, 15 years, 5 months ago

hi luca
just an additional question, I found out that under template there are 4 list of templates

But under Chunks I have this one called "head"

And this is the code: Do you think this is where I should put the jQuery code?
Thanks

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    
    <base href="[(site_url)]"></base>

    <!-- Grey Box integration -->
    <script type="text/javascript"> 
        var GB_ROOT_DIR = "[(base_url)]assets/js/greybox/";
    </script>      
    <script type="text/javascript" src="[(base_url)]assets/js/greybox/AJS.js"></script>     
    <script type="text/javascript" src="[(base_url)]assets/js/greybox/AJS_fx.js"></script> 
    <script type="text/javascript" src="[(base_url)]assets/js/greybox/gb_scripts.js"></script> 
    <script type="text/javascript" src="[(base_url)]assets/js/greybox/greyboxCustom.js"></script> 
    
    <link href="[(base_url)]assets/js/greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />
    {{mesaforte-tour-set}}  

    <!-- YAML integration -->    
    <link href="/assets/templates/wikima4/css/central.css" rel="stylesheet" type="text/css"/>
    <!--[if lte IE 7]>
    <link href="/assets/templates/wikima4/css/patches/patch_central.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    
    <!--lightbox-->
    
    
    

</head>

863 Posts

Lucas Reply #43, 15 years, 5 months ago

Yes, add the <script> and <style> parts in the ’head’ chunk between the <head></head> tags.

The divs you want to test your script on could go in the template or even the content field of your test page.

110 Posts

tintincute Reply #44, 15 years, 5 months ago

ok I hope you’ve seen this. This is the jQuery code:
Which one shall I copy to the <head> </head> under "chunks"

Is this the one?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<title>tintin</title>
<meta http-equiv="Content-Type" content="text/html; class=MsoNormal; charset=iso-8859-1"/> <style type="text/css"> 
<style type="text/css">

 
#tintin{
position: relative;

}
div
{
position: absolute;
display: none;
text-decoration: none; 
font-size:18pt;
font-weight:bold;
font-family: Calibri;
color:#fff;
}


a:link {
COLOR: #fff;
text-decoration: none; 
}


.image{
height:350px;
width: 855px;}


</style>

This is the jQuery code:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<title>tintin</title>
<meta http-equiv="Content-Type" content="text/html; class=MsoNormal; charset=iso-8859-1"/> <style type="text/css"> 
<style type="text/css">

 
#tintin{
position: relative;

}
div
{
position: absolute;
display: none;
text-decoration: none; 
font-size:18pt;
font-weight:bold;
font-family: Calibri;
color:#fff;
}


a:link {
COLOR: #fff;
text-decoration: none; 
}


.image{
height:350px;
width: 855px;}


</style>
<script type="text/javascript"> 

$(document).ready(function () {
    var count = 0;
    animate();
    function animate() {
        $("div").eq(count).fadeIn(1000); //increase the 400 to make it slower
       count++;
        if(count < $("div").length) {
            setTimeout(animate, 1000);
        }
    };
});
</script>
</head>


<body>
<div id="tintin"> </div>

<div class="image" style="background-image:url('pic007s.jpg');">


<div style="left:25px; top:180px"><a href="http://www.web.com/en/solutions">Text 1</a> </div>
<div style="left:30px; top:80px"><a href="http://www.web.com/en/solutions">Text 2</div>
<div style="left:60px; top:30px"><a href="http://www.web.com/en/solutions">Text 3</div>

<div style="right:60px; top:30px"><a href="http://www.web.com/en/solutions">Text 4</div>
<div style="right:40px; top:80px"><a href="http://www.web.com/en/solutions">Text 5</div>
<div style="right:20px; top:180px"><a href="http://www.web.com/en/solutions">Text 6</div>

<div style="right:40px; top:250px"><a href="http://www.web.com/en/solutions">Text 7</div>
<div style="right:75px; top:300px"><a href="http://www.web.com/en/solutions">Text 8</div>

<div style="left:80px; top:300px"><a href="http://www.web.com/en/solutions">Audits & Security Assessment</div>
<div style="left:50px; top:250px"><a href="http://www.web.com/en/solutions">Single Sign-On</div>

  
</div>
</body>
</html>

312 Posts

allanb Reply #45, 15 years, 5 months ago

Not exactly sure if this is what you want

This would be the more normal layout of jscript

<html>
<head>

<title>tintin</title>
<meta http-equiv="Content-Type" content="text/html; class=MsoNormal; charset=iso-8859-1"/> <style type="text/css"> 
<style type="text/css">

 
#tintin{
position: relative;

}
div
{
position: absolute;
display: none;
text-decoration: none; 
font-size:18pt;
font-weight:bold;
font-family: Calibri;
color:#fff;
}


a:link {
COLOR: #fff;
text-decoration: none; 
}


.image{
height:350px;
width: 855px;}


</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>

</head>


<body>
<div id="tintin"> </div>

<div class="image" style="background-image:url('pic007s.jpg');">


<div style="left:25px; top:180px"><a href="http://www.web.com/en/solutions">Text 1</a> </div>
<div style="left:30px; top:80px"><a href="http://www.web.com/en/solutions">Text 2</div>
<div style="left:60px; top:30px"><a href="http://www.web.com/en/solutions">Text 3</div>

<div style="right:60px; top:30px"><a href="http://www.web.com/en/solutions">Text 4</div>
<div style="right:40px; top:80px"><a href="http://www.web.com/en/solutions">Text 5</div>
<div style="right:20px; top:180px"><a href="http://www.web.com/en/solutions">Text 6</div>

<div style="right:40px; top:250px"><a href="http://www.web.com/en/solutions">Text 7</div>
<div style="right:75px; top:300px"><a href="http://www.web.com/en/solutions">Text 8</div>

<div style="left:80px; top:300px"><a href="http://www.web.com/en/solutions">Audits & Security Assessment</div>
<div style="left:50px; top:250px"><a href="http://www.web.com/en/solutions">Single Sign-On</div>

  
</div>
<script type="text/javascript"> 

$(document).ready(function () {
    var count = 0;
    animate();
    function animate() {
        $("div").eq(count).fadeIn(1000); //increase the 400 to make it slower
       count++;
        if(count < $("div").length) {
            setTimeout(animate, 1000);
        }
    };
});
</script>
</body>
</html>

I hope this helps

DEVELOPMENT ENV:- Ubuntu 12.04 | MODx Revolution 2.2.8 | LAMP 2i Apache 2.2.22 | Php 5.3.10 | Mysql 5.5.31 MySQL client version: 5.5.31

110 Posts

tintincute Reply #46, 15 years, 5 months ago

@allanb: does this mean that I have to paste the whole jQuery code to the <head> </head> under chunk?

110 Posts

tintincute Reply #47, 15 years, 5 months ago

another problem I encounter is,
I copied the DB locally and it was successful.
Now the front site is working localhost/mysite.

When I clicked on any links it will go to localhost/xampp

I don’t know why. Do I need to change something?

110 Posts

tintincute Reply #48, 15 years, 5 months ago

@luca:
Here is now the whole code I have in the head section. Now it didn’t work :-(

<head>
    <meta http-equiv="Content-type" content="text/html; class=MsoNormal; charset=utf-8" />
  
    
    <base href="[(site_url)]"></base>

    <!-- Grey Box integration -->
    <script type="text/javascript"> 
        var GB_ROOT_DIR = "[(base_url)]/test/assets/js/greybox/";
    </script>      
    <script type="text/javascript" src="[(base_url)]test/assets/js/greybox/AJS.js"></script>     
    <script type="text/javascript" src="[(base_url)]test/assets/js/greybox/AJS_fx.js"></script> 
    <script type="text/javascript" src="[(base_url)]test/assets/js/greybox/gb_scripts.js"></script> 
    <script type="text/javascript" src="[(base_url)]test/assets/js/greybox/greyboxCustom.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> 
    
    <link href="[(base_url)]test/assets/js/greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />
    {{mesaforte-tour-set}}  

    <!-- YAML integration -->    
    <link href="test/assets/templates/wikima4/css/central.css" rel="stylesheet" type="text/css"/>
    <!--[if lte IE 7]>
    <link href="/assets/templates/wikima4/css/patches/patch_central.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    
    <!--lightbox-->
    
    
    


<style type="text/css">

 
#tintin{
position: relative;

}
div
{
position: absolute;
display: none;
text-decoration: none; 
font-size:18pt;
font-weight:bold;
font-family: Calibri;
color:#fff;
}


a:link {
COLOR: #fff;
text-decoration: none; 
}


.image{
height:350px;
width: 855px;}


</style>
<script type="text/javascript"> 

$(document).ready(function () {
    var count = 0;
    animate();
    function animate() {
        $("div").eq(count).fadeIn(1000); //increase the 400 to make it slower
       count++;
        if(count < $("div").length) {
            setTimeout(animate, 1000);
        }
    };
});
</script>
</head>

863 Posts

Lucas Reply #49, 15 years, 5 months ago

I’m still not sure what you are trying to do

But I can tell you why you don’t see anything on your page.

In your <style> section you have all divs set to ’display: none;’. Seeing that everything in your page is contained within a div, you will not be able to see anything. If you remove that line, you’ll see your content.

Also, as it stands your jQuery code doesn’t seem to be linked to any kind of event/trigger to execute it. I’m also not sure what you intend to do with it.

Sorry to ask this, but do you have any experience with html, css or jQuery? It might be easier to just say what you want to do and I can guide you in the right direction.

110 Posts

tintincute Reply #50, 15 years, 5 months ago

Sorry for the confusion.
I did send you a message, if you have the time, please check
Thanks