Welcome to Geeklog, Anonymous Friday, November 22 2024 @ 01:15 pm EST
Geeklog Forums
Implementing jQuery
Status: offline
dwl
Forum User
Junior
Registered: 01/05/11
Posts: 25
Hi all,
I wish to implement jQuery features to a static page I've written. These features are unlike jQuery implementations I've found documented or otherwise mentioned here on the site. [I tried to include a link to the site that has an example I wish to emulate but the spam filtre here wouldn't let me post this message with that link.]
What is the best method for implementing the link to the jQuery library in the head and an associated js file for the code (if I choose not to embed it in the head)?
Have a Great day,
Daniel
I wish to implement jQuery features to a static page I've written. These features are unlike jQuery implementations I've found documented or otherwise mentioned here on the site. [I tried to include a link to the site that has an example I wish to emulate but the spam filtre here wouldn't let me post this message with that link.]
What is the best method for implementing the link to the jQuery library in the head and an associated js file for the code (if I choose not to embed it in the head)?
Have a Great day,
Daniel
9
8
Quote
Status: offline
Laugh
Site Admin
Admin
Registered: 09/27/05
Posts: 1470
Location:Canada
Take a look at the scripts class http://wiki.geeklog.net/index.php/Scripts_Class
To initiate jquery in Geeklog and to include your own js file in a staticpage you would do something like this:
global $_SCRIPTS;
$_SCRIPTS->setJavaScriptLibrary('jquery');
$_SCRIPTS->setJavaScriptFile('pluginname', '/javascript/yourfile.js');
?>
Your HTML here
Obviously since you are using PHP in a staticpage you would have to set the PHP attribute of the staticpage to "execute PHP".
Hope that helps.
Tom
One of the Geeklog Core Developers.
To initiate jquery in Geeklog and to include your own js file in a staticpage you would do something like this:
Text Formatted Code
global $_SCRIPTS;
$_SCRIPTS->setJavaScriptLibrary('jquery');
$_SCRIPTS->setJavaScriptFile('pluginname', '/javascript/yourfile.js');
?>
Your HTML here
Obviously since you are using PHP in a staticpage you would have to set the PHP attribute of the staticpage to "execute PHP".
Hope that helps.
Tom
One of the Geeklog Core Developers.
4
8
Quote
Status: offline
::Ben
Forum User
Full Member
Registered: 01/14/05
Posts: 1569
Location:la rochelle, France
...you would do something like this...
with Geeklog 1.8.0 and +
or try the jQuery plugin old way
Ben
I'm available to customise your themes or plugins for your Geeklog CMS
8
12
Quote
Status: offline
dwl
Forum User
Junior
Registered: 01/05/11
Posts: 25
Thanks for the feedback all.
I did what you suggested below, Ben, but I'm stumped a little. What I wish to do with JQuery is not listed in the configuration options. I wish to implement the third option found on this site: http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery (Can't make that text an active link due to spam detection).
Can I go in and arbitrarily modify functions.inc to insert the appropriate code for, as an example, previewUrl? I would do the code without an If as it is evaluated for each of the features of the plug-in. I would model the code based on datepicker or colorpicker. Or is there a better way?
I did what you suggested below, Ben, but I'm stumped a little. What I wish to do with JQuery is not listed in the configuration options. I wish to implement the third option found on this site: http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery (Can't make that text an active link due to spam detection).
Can I go in and arbitrarily modify functions.inc to insert the appropriate code for, as an example, previewUrl? I would do the code without an If as it is evaluated for each of the features of the plug-in. I would model the code based on datepicker or colorpicker. Or is there a better way?
Quote by: %3A%3ABen
with Geeklog 1.8.0 and +
or try the jQuery plugin old way
Ben
...you would do something like this...
with Geeklog 1.8.0 and +
or try the jQuery plugin old way
Ben
11
12
Quote
Status: offline
::Ben
Forum User
Full Member
Registered: 01/14/05
Posts: 1569
Location:la rochelle, France
The jQuery plugin bring the library to your CMS. Then you need to put some code in a story or a static page.
Like this one :
<script>
/*
* Url preview script
* powered by jQuery
*
* written by Alen Grakalic
*
*
*/
this.screenshotPreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
jQuery("a.screenshot").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
jQuery("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");
jQuery("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
jQuery("#screenshot").remove();
});
jQuery("a.screenshot").mousemove(function(e){
jQuery("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
jQuery(document).ready(function(){
screenshotPreview();
});
</script>
<style>
#screenshot{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
</style>
The <a href="http://www.geeklog.net/" class="screenshot" rel="http://www.geeklog.net/layout/professional/images/logo.png">Geeklog site</a> is online.</p>
You can also hack the plugin to add what you need to every page and you can create a [screenshot] autotag.
Ben
I'm available to customise your themes or plugins for your Geeklog CMS
Like this one :
Text Formatted Code
<script>
/*
* Url preview script
* powered by jQuery
*
* written by Alen Grakalic
*
*
*/
this.screenshotPreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
jQuery("a.screenshot").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
jQuery("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");
jQuery("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
jQuery("#screenshot").remove();
});
jQuery("a.screenshot").mousemove(function(e){
jQuery("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
jQuery(document).ready(function(){
screenshotPreview();
});
</script>
<style>
#screenshot{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
</style>
The <a href="http://www.geeklog.net/" class="screenshot" rel="http://www.geeklog.net/layout/professional/images/logo.png">Geeklog site</a> is online.</p>
You can also hack the plugin to add what you need to every page and you can create a [screenshot] autotag.
Ben
I'm available to customise your themes or plugins for your Geeklog CMS
8
7
Quote
All times are EST. The time is now 01:15 pm.
- Normal Topic
- Sticky Topic
- Locked Topic
- New Post
- Sticky Topic W/ New Post
- Locked Topic W/ New Post
- View Anonymous Posts
- Able to post
- Filtered HTML Allowed
- Censored Content