Multiple uses but with single call to JS file - how?

This section can be used to submit suggestions for Extension Builder.
Note that this section is not monitored for support.
Forum rules
This forum section can be used to submit suggestions for Extension Builder.
Note that this section is not monitored for support.
Post Reply
User avatar
Adendum
 
 
Posts: 933
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Multiple uses but with single call to JS file - how?

Post by Adendum » Mon Jan 06, 2014 5:44 pm

Hi builders,

Has anyone got a EB code snippet (or a how to) to allow me to provide users the ability to place several instances of the same extension on a page but only call in the jQuery file once?

:)

Paul
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!

User avatar
BaconFries
 
 
Posts: 4420
Joined: Thu Aug 16, 2007 7:32 pm

Re: Multiple uses but with single call to JS file - how?

Post by BaconFries » Mon Jan 06, 2014 6:01 pm

Hi Paul I use this for the Youtube fancybox extension, note the two ID's (in red) one ID for a Div to surround the main Div of the Youtube/image the other ID for the image used. This allows the user to set the ID for each extension usewd with this extension and only uses one set of scripts

<div id="wb_video1" style="overflow:hidden;position:absolute;top:$TOP$px">
<div>
<a title="Click to View." href="http://www.youtube.com/v/ZeStnz5c2GI&re ... =1&start=0" class="video">
<img src="images/mypic.jpg" id="video1" alt="Click to View." style="width:120px;height:90px;z-index:0"/></a>
</div>
</div>

Oh and a Happy Birtday to you.....
cake.png
Last edited by BaconFries on Mon Jan 06, 2014 6:08 pm, edited 1 time in total.

User avatar
Adendum
 
 
Posts: 933
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: Multiple uses but with single call to JS file - how?

Post by Adendum » Mon Jan 06, 2014 6:07 pm

Bacon,

Not sure how that helps old chap?

This is what I currently have the the EB <head> section:-

Code: Select all

<script src="LiquidZoom/js/liquid-zoom.js"></script>
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-$uiid$.css" type="text/css">
And if the extension is used 2 or more times the resulting HTML generates 2 or more lines of <script src="LiquidZoom/js/liquid-zoom.js">.

What I am trying to implement is a method to write <script src="LiquidZoom/js/liquid-zoom.js"> just the once, no matter how many times the extension is used on a page.
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!

User avatar
BaconFries
 
 
Posts: 4420
Joined: Thu Aug 16, 2007 7:32 pm

Re: Multiple uses but with single call to JS file - how?

Post by BaconFries » Mon Jan 06, 2014 6:13 pm

Hmmm well with the Youtube fancy box extension I know I can add more than one simply changing the ID for each one used and I only ever get one instance of the css/js file used. If you were to install my Extension of Youtube Fancybox you will see that this is the case :)

User avatar
Adendum
 
 
Posts: 933
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: Multiple uses but with single call to JS file - how?

Post by Adendum » Mon Jan 06, 2014 6:21 pm

Sorry Bacon, still confused by this...oh and thanks for the birthday cake ;)

Each use of the extension (Liquid Zoom) will run through the file and dump the contents of the <head> into the generated html, so I'll see the following:-

Code: Select all

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script src="LiquidZoom/js/liquid-zoom.js"></script>
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-1.css" type="text/css">
<script src="LiquidZoom/js/liquid-zoom.js"></script>
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-2.css" type="text/css">
<script src="LiquidZoom/js/liquid-zoom.js"></script>
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-3.css" type="text/css">
<script src="LiquidZoom/js/liquid-zoom.js"></script>
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-4.css" type="text/css">
<script src="LiquidZoom/js/liquid-zoom.js"></script>
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-5.css" type="text/css">
<script src="LiquidZoom/js/liquid-zoom.js"></script>
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-6.css" type="text/css">
<script src="LiquidZoom/js/liquid-zoom.js"></script>
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-7.css" type="text/css">
<script src="LiquidZoom/js/liquid-zoom.js"></script>
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-8.css" type="text/css">
</head>
but what I want to see is :-

Code: Select all

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script src="LiquidZoom/js/liquid-zoom.js"></script>
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-1.css" type="text/css">
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-2.css" type="text/css">
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-3.css" type="text/css">
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-4.css" type="text/css">
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-5.css" type="text/css">
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-6.css" type="text/css">
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-7.css" type="text/css">
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-8.css" type="text/css">
</head>
So I need a method to allow the CSS calls to be repeated but not the jQuery. Am I not understanding you or are you not understanding me?
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!

User avatar
Pablo
 
Posts: 19287
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Multiple uses but with single call to JS file - how?

Post by Pablo » Mon Jan 06, 2014 6:24 pm

@Adendum
Happy birthday!

The trick is to make sure the header code is the same for all instances of the extension , so there should not be any variables in it.

In your case, put
<script src="LiquidZoom/js/liquid-zoom.js"></script>
between the head tags and move
<link rel="stylesheet" href="LiquidZoom/css/liquid-zoom-$uiid$.css" type="text/css">
to the body

User avatar
Adendum
 
 
Posts: 933
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: Multiple uses but with single call to JS file - how?

Post by Adendum » Mon Jan 06, 2014 6:33 pm

lol, Pablo!!!!!!! Way too easy!

Many MANY thanks!

:D :shock: 8)
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest