Re: Implementing jQuery

Welcome to Geeklog Tuesday, June 18 2013 @ 07:39 PM EDT

	Forum Index > Extensions > Plugins	New Topic	Post Reply
Implementing jQuery

dwl

05/30/11 12:17PM (Read 1294 times)

Junior

Status: offline

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

Profile

Quote

Laugh

05/30/11 01:50PM

Admin

Status: offline

Registered: 09/27/05
Posts: 891

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:

PHP 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

Profile

Website

Quote

::Ben

05/30/11 03:22PM

Full Member

Status: offline

Registered: 01/14/05
Posts: 1369

...you would do something like this...

with Geeklog 1.8.0 and +

or try the jQuery plugin old way

Ben

We speak french on http://geeklog.fr

Profile

Website

Quote

Laugh

05/30/11 05:05PM

Admin

Status: offline

Registered: 09/27/05
Posts: 891

Oops, I meant to mention that.

Profile

Website

Quote

dwl

05/31/11 11:52AM

Junior

Status: offline

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?

Quote by: %3A%3ABen

...you would do something like this...

with Geeklog 1.8.0 and +

or try the jQuery plugin old way

Ben

Profile

Quote

::Ben

05/31/11 01:32PM

Full Member

Status: offline

Registered: 01/14/05
Posts: 1369

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 :

PHP 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>