Welcome to Geeklog, Anonymous Thursday, March 28 2024 @ 05:39 am EDT

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
 Quote

Status: offline

Laugh

Site Admin
Admin
Registered: 09/27/05
Posts: 1468
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:

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.
 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 + Smile

or try the jQuery plugin old way Wink

Ben
I'm available to customise your themes or plugins for your Geeklog CMS
 Quote

Status: offline

Laugh

Site Admin
Admin
Registered: 09/27/05
Posts: 1468
Location:Canada
Oops, I meant to mention that. Razz
One of the Geeklog Core Developers.
 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?

Quote by: %3A%3ABen

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


with Geeklog 1.8.0 and + Smile

or try the jQuery plugin old way Wink

Ben

 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 :

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
 Quote

Status: offline

dwl

Forum User
Junior
Registered: 01/05/11
Posts: 25
Ok Ben! That will work well. Thanks. Big Grin
 Quote

All times are EDT. The time is now 05:39 am.

  • 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