jquery+concrete5: I'm completely clueless.
Permalink
I apologize in advance to all involved for my utter cluelessness, and I thank you all for any patience and help you might dispense on my behalf.
I'm trying to design a website using concrete5, css, and jquery, despite never having used any of these. This is both the fault of my ambition and the company that I work for (and being the only designer employed here). So I'm scrambling to learn everything on the fly, and I'm having a lot of issues trying to figure out how to implement a lot of things.
My major concern, at the moment, is getting the following to work when built into the backbone of default.php:
http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jq...
I'm not exactly sure what I'm doing wrong. I put all the pieces where they're supposed to be, but nothing works (images don't even pull in, bizarrely). I've tried a similar (but different) set up and had similar problems. I figure it's just something fundamental that I don't understand in regards to how concrete5 handles its theme files, or possibly how concrete5 manages jquery. I've tried to hunt down solutions but I haven't been able to locate clear answers. Any and all help will be appreciated.
Thank you!
I'm trying to design a website using concrete5, css, and jquery, despite never having used any of these. This is both the fault of my ambition and the company that I work for (and being the only designer employed here). So I'm scrambling to learn everything on the fly, and I'm having a lot of issues trying to figure out how to implement a lot of things.
My major concern, at the moment, is getting the following to work when built into the backbone of default.php:
http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jq...
I'm not exactly sure what I'm doing wrong. I put all the pieces where they're supposed to be, but nothing works (images don't even pull in, bizarrely). I've tried a similar (but different) set up and had similar problems. I figure it's just something fundamental that I don't understand in regards to how concrete5 handles its theme files, or possibly how concrete5 manages jquery. I've tried to hunt down solutions but I haven't been able to locate clear answers. Any and all help will be appreciated.
Thank you!
But of course!
http://wireless101.org/concrete5/...
I've also attached the CSS for the theme.
I'll run the site through Firebug now.
http://wireless101.org/concrete5/...
I've also attached the CSS for the theme.
I'll run the site through Firebug now.
For one thing, C5 loads jQuery by default, so there's no need for it to be included at the top of your doc head as it is now. (And it seems it's not being referenced properly anyway. You should use C5's helper methods in your PHP code to include client-side scripts.)
So first, remove the reference to jquery-1.4.2.min.js at the top. Then make sure the inline JS loads after C5 loads jQuery, and then go from there.
EDIT: It appears there's also some malformed HTML.
-Steve
So first, remove the reference to jquery-1.4.2.min.js at the top. Then make sure the inline JS loads after C5 loads jQuery, and then go from there.
EDIT: It appears there's also some malformed HTML.
-Steve
Thank you very much for pointing this out! So how do you go about making the script load after jQuery, and what helper methods will make the script function? I actually tried to use a helper; it's at the bottom of main.css, but it remains nonfunctional after removing the reference to jquery-1.4.2.min.js.
Where is the malformed HTML, and how do I fix it?
Once again, thank you very much!
Where is the malformed HTML, and how do I fix it?
Once again, thank you very much!
You can load a javascript file via your theme's page template itself. This will automatically appear after jQuery is loaded, because Concrete5 loads all of its core javascript stuff before it gets to anything related to your theme. So, say you have default.php, your site's main page template. You can reference your jQuery script using a link in the head like this:
This is just like you would do for a static HTML site. The only difference is the php snippet in the middle: $this->getThemePath();
That literally gets your theme's path in the website (like it says), and spits it out. It's often used for relative links to things like stylesheets, images, and javascript.
When you use that PHP snippet, just make sure you put a slash right after it (like in the code above), because it doesn't build the slash right after the last directory. Your code would look like yoursite/themes/yourthemejs/your-jquery.js when it should be
yoursite/themes/yourtheme/js/your-jquery.js.
So just keep that in mind—it tripped me up early on.
<script type="text/javascript" src="<?=$this->getThemePath();?>/js/your-jquery.js"></script>
This is just like you would do for a static HTML site. The only difference is the php snippet in the middle: $this->getThemePath();
That literally gets your theme's path in the website (like it says), and spits it out. It's often used for relative links to things like stylesheets, images, and javascript.
When you use that PHP snippet, just make sure you put a slash right after it (like in the code above), because it doesn't build the slash right after the last directory. Your code would look like yoursite/themes/yourthemejs/your-jquery.js when it should be
yoursite/themes/yourtheme/js/your-jquery.js.
So just keep that in mind—it tripped me up early on.
Thank you for your help! Unfortunately, I'm still having issues. Things are -almost- displaying correctly, but clearly the script I'm trying to call to isn't cooperating for whatever reason.
I've attached the CSS, and you can view the page at www.www.wireless101.org/concrete5... and the JS file at www.www.wireless101.org/concrete5/js/sequence.html.glimmer.js...
Thanks again!
I've attached the CSS, and you can view the page at www.www.wireless101.org/concrete5... and the JS file at www.www.wireless101.org/concrete5/js/sequence.html.glimmer.js...
Thanks again!
For one thing, there are two <head> tags. That's part of the malformed HTML I referred to earlier. You're also still loading jQuery when you don't need to, as C5 loads it by default. (And the jQuery you are attempting to load from...
/concrete5/themes/101real/js/jquery-1.3.2.min.js
...can't be found. But as I say, you don't need to load it. It's difficult to assist further without the actual PHP theme files.
-Steve
/concrete5/themes/101real/js/jquery-1.3.2.min.js
...can't be found. But as I say, you don't need to load it. It's difficult to assist further without the actual PHP theme files.
-Steve
And suddenly everything works when I put back the reference to jquery-1.3.2.min.js after a few adjustments. Odd.
I suspect it's related to the malformed HTML. You really need to find there the extra <head> tag is coming from. It's probably responsible for the rendering issue as well - i.e. there's some text and a partial link in the upper left corner of the page.
A good way to test for malformed mark-up is to run it through a validator.
http://validator.w3.org/
-Steve
A good way to test for malformed mark-up is to run it through a validator.
http://validator.w3.org/
-Steve
you are still loading jquery twice
Welllllllllll, I'm a little extra confused now.
Shotster, you told me that I needed to fix the double <head> tag, but Proteus tells me to reference the jQuery file in the head. The double <head> comes from me putting a head in the php file to stick the jQuery reference into--and it takes both the reference to sequence.html.glimmer.js AND jquery-1.3.2.min.js to make the script work.
This would almost be semi-workable if doubling up on the script didn't cripple the Edit Mode. What are my options from here? I've tried calling directly to jquery.js, but that only works if I've put that file into the js folder in my theme's directory. So how do I link all these pieces together to work? o_o
Again, here are the files:
www.www.wireless101.org/concrete5...
http://www.wireless101.org/concrete5/themes/101real/js/sequence.htm...
Another pre-emptive thank you to all of you!
Shotster, you told me that I needed to fix the double <head> tag, but Proteus tells me to reference the jQuery file in the head. The double <head> comes from me putting a head in the php file to stick the jQuery reference into--and it takes both the reference to sequence.html.glimmer.js AND jquery-1.3.2.min.js to make the script work.
This would almost be semi-workable if doubling up on the script didn't cripple the Edit Mode. What are my options from here? I've tried calling directly to jquery.js, but that only works if I've put that file into the js folder in my theme's directory. So how do I link all these pieces together to work? o_o
Again, here are the files:
www.www.wireless101.org/concrete5...
http://www.wireless101.org/concrete5/themes/101real/js/sequence.htm...
Another pre-emptive thank you to all of you!
#1 you have the doctype twice, #2 REMOVE JQUERY
#3 use $this->addheaderitem('');
#3 use $this->addheaderitem('');
#1) Did it.
#2) Did it.
#3) Not sure if I implemented that right...have a look and let me know...either way, it's not working. =(
#2) Did it.
#3) Not sure if I implemented that right...have a look and let me know...either way, it's not working. =(
For one thing, there's a "<" (less than) sign preceding the path to the JS file. It doesn't belong there.
Also, it probably makes more sense to include the JS from your header.php file (assuming your theme has one and that you need the JS for most pages in the site).
Lastly, your site tracking (Google Analytics) code should also be in the document head, but worry about that last.
-Steve
Also, it probably makes more sense to include the JS from your header.php file (assuming your theme has one and that you need the JS for most pages in the site).
Lastly, your site tracking (Google Analytics) code should also be in the document head, but worry about that last.
-Steve
Well, now it works without calling to a jquery.js, but now edit mode no longer works. =\
Somewhere along the line, you must have inadvertently deleted the start <body> tag because it's not there.
Also, are you using the built-in Slideshow block?
-Steve
Also, are you using the built-in Slideshow block?
-Steve
Yeah, what Mnkras said. You've got double doctype declarations (and opening html tags).
Which file, exactly, are you editing to add the reference to your JS file?
-Steve
Which file, exactly, are you editing to add the reference to your JS file?
-Steve
EDIT: Pardon, here's a more useful link:
http://www.filedropper.com/default_16...
That's the one I'm editing the references to the .js.
http://www.filedropper.com/default_16...
That's the one I'm editing the references to the .js.
So...from what I could find, $this->addheaderitem(''); is a PHP function, so I've plugged it into a <?php tag a few ways, to absolutely no avail. Now it works under NO CIRCUMSTANCES, not even if I tack a redundant jQuery.js onto it. The reference is definitely showing up in the header of my main page, but it doesn't seem to be actually doing anything. =(
<?php
$this->addHeaderItem('<script type="text/javascript" src="<"<?=$this->getThemePath();?>/js/sequence.html.glimmer.js"></script>');
?>
On top of that, <?=$this->getThemePath();?> doesn't seem to work at ALL, nor does pointing it to the exact spot on the server.
<?php
$this->addHeaderItem('<script type="text/javascript" src="<"<?=$this->getThemePath();?>/js/sequence.html.glimmer.js"></script>');
?>
On top of that, <?=$this->getThemePath();?> doesn't seem to work at ALL, nor does pointing it to the exact spot on the server.
where exactly did you put the js file,
The file is in the js folder in the theme's individual directory.
I'm not using the Slideshow block, I'm using some jQuery I found on the internet to get the specific interface I needed.
I'm not using the Slideshow block, I'm using some jQuery I found on the internet to get the specific interface I needed.
-Steve