[SOLVED] Basic jQuery question!

NicoCollu · Post by **NicoCollu** » Thu Oct 04, 2012 12:57 pm

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!

Dr.CSS · Post by **Dr.CSS** » Thu Oct 04, 2012 4:19 pm

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>

NicoCollu · Post by **NicoCollu** » Thu Oct 04, 2012 11:34 pm

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!

NicoCollu · Post by **NicoCollu** » Thu Oct 04, 2012 11:44 pm

[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?

mcDavid · Post by **mcDavid** » Fri Oct 05, 2012 12:17 am

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/

Dr.CSS · Post by **Dr.CSS** » Fri Oct 05, 2012 1:37 am

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

NicoCollu · Post by **NicoCollu** » Sun Oct 07, 2012 11:20 pm

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?

NicoCollu · Post by **NicoCollu** » Sun Oct 07, 2012 11:24 pm

Hey guys!

The problem is solved!

I attached the core jquery into my code by inserting the smarty code

Code: Select all

[cms_jquery}

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.

CMS Made Simple Forums

[SOLVED] Basic jQuery question!

[SOLVED] Basic jQuery question!

Re: [HELP NEEDED] Basic jQuery question!

Re: [HELP NEEDED] Basic jQuery question!

Re: [HELP NEEDED] Basic jQuery question!

Re: Basic jQuery question!

Re: Basic jQuery question!

Re: Basic jQuery question!

Re: Basic jQuery question!