Page 1 of 1
[SOLVED] Basic jQuery question!
Posted: Thu Oct 04, 2012 12:57 pm
by NicoCollu
Hello!
I haven't been successful in implementing jQuery into my site.
I have installed the jQueryTools module and also the Calguys Module Extensions.
To my knowledge I need to link a HTML template to the jquery core library.
Here I am not sure on how to find the path to the library?
I'm using cPanel and I'm guessing it's in public_html -> modules -> jQueryTools -> lib -> jquery-1.7.2.min.js ?
Not sure how to link this! My "home" is:
http://www.nicocollu.com
Then comes the actual effect. Do I HAVE to insert it into the <head> of the HTML and it must be contained in {literal}'s, am I right?
Is it not possible to upload a .js file including the coding and then linking to it in the <head>?
Thank you!
Re: [HELP NEEDED] Basic jQuery question!
Posted: Thu Oct 04, 2012 4:19 pm
by Dr.CSS
I put the core jquery file in uploads/jq along with any others I need then just call them in the <head> and yes if you put code in the template you will need to use {literal}...
<__script__ type='text/javascript' src='uploads/jq/jquery.js'></__script>
<__script__ type="text/javascript">{literal}
$(document).ready(function() {
***Your Code***
});{/literal}
</__script>
Re: [HELP NEEDED] Basic jQuery question!
Posted: Thu Oct 04, 2012 11:34 pm
by NicoCollu
Hey!
Thanks a bunch but I keep running into awkward problems.
In my example, I'm trying to create tabbed content.
Here is the code in my template in <head>:
Code: Select all
<__script__ type='text/javascript' src='lib/js/jquery-1.7.2.min.js'></__script>
<__script__ type='text/javascript' src='lib/js/myapp.js'></__script>
It should be known that there is no other javascript code in the header.
As you can see, it's linking to a jquery file. I got it from here:
http://broadcast.oreilly.com/2008/10/ho ... ss-an.html
I know it doesn't matter but then I've added this CSS coding:
Code: Select all
a:active {
outline: none;
}
a:focus {
-moz-outline-style: none;
}
#tabs_container {
width: 400px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#tabs_container ul.tabs {
list-style: none;
border-bottom: 1px solid #ccc;
height: 21px;
margin: 0;
}
#tabs_container ul.tabs li {
float: left;
}
#tabs_container ul.tabs li a {
padding: 3px 10px;
display: block;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
margin-right: 2px;
text-decoration: none;
background-color: #efefef;
}
#tabs_container ul.tabs li.active a {
background-color: #fff;
padding-top: 4px;
}
div.tab_contents_container {
border: 1px solid #ccc;
border-top: none;
padding: 10px;
}
div.tab_contents {
display: none;
}
div.tab_contents_active {
display: block;
}
div.clear {
clear: both;
}
Dr.CSS, I want to tell you that your presence in the forums are life-saving!
Re: [HELP NEEDED] Basic jQuery question!
Posted: Thu Oct 04, 2012 11:44 pm
by NicoCollu
[quote="Dr.CSS"][/quote]
Oh and by the way, I forgot to mention that the tabs show, stylized and all but when I click a tab, it redirects incorrectly, defaulting to my front page with this link:
www.nicocollu.com/#
Seems like there isn't a proper connection between the HTML and jquery?
Re: Basic jQuery question!
Posted: Fri Oct 05, 2012 12:17 am
by mcDavid
CMSMS allready includes jQuery. You can call it with the {cms_jquery} tag.
But if you want to call your own copy, there's nothing wrong with that.
Also, jQueriUI tabs work really great, I advice using them:
http://jqueryui.com/demos/tabs/
Re: Basic jQuery question!
Posted: Fri Oct 05, 2012 1:37 am
by Dr.CSS
I don't see any tabs but I only looked in the top level pages, your JS is giving a 404 which is why it no work...
http://validator.w3.org/check?verbose=1 ... llu.com%2F
Re: Basic jQuery question!
Posted: Sun Oct 07, 2012 11:20 pm
by NicoCollu
mcDavid wrote:CMSMS allready includes jQuery. You can call it with the {cms_jquery} tag.
But if you want to call your own copy, there's nothing wrong with that.
Also, jQueriUI tabs work really great, I advice using them:
http://jqueryui.com/demos/tabs/
Thanks a bunch for that advice! Makes it very easy for me to link jquery!
I'm guessing you can only do this if you have the jQueryTools installed?
Re: Basic jQuery question!
Posted: Sun Oct 07, 2012 11:24 pm
by NicoCollu
Hey guys!
The problem is solved!
I attached the core jquery into my code by inserting the smarty code
in my <head> tag!
Additionally, I was able to install jquery tabs into my website as well with this:
Code: Select all
<__script__ type="text/javascript" src="http://www.nicocollu.com/uploads/js/jquery.idTabs.min.js"></__script>
My problem was proper link directories, as in, I didn't know the urls for the specific items. Also, the smarty call for jquery was very helpful!
Thank you for all your help.