Go Back   Serif Software Forums > Design and Publishing > WebPlus

Notices

WebPlus Questions about using WebPlus for website design

 
 
Thread Tools Display Modes
Old 12th April 2012, 07:59 PM   #1
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default X6, X5, X4, X2 Tutorial and notes for using jQuery noConflict

A number of threads over the past few months have been about jQuery sliders, galleries, lightboxes etc not functioning when placed on the same page, or even web site. In other words, the scripts are in conflict with each other. In a number of instances the use of jQuery noConflict has resolved the issue.

There are a number of options when applying jQuery noConflict to scripts, and I have listed four of the most common examples along with explanatory notes.
These can be seen here

As an aide memoire there is also an attached pdf file which is a copy of the web demo.

Joe
Attached Files
File Type: pdf JQuery_no_conflict_pdf.pdf (14.3 KB, 864 views)

Last edited by Clitheroe Kid; 18th August 2012 at 02:37 PM. Reason: Added X6 to main heading
Clitheroe Kid is offline  
Old 12th April 2012, 08:11 PM   #2
TheOldFart
Advanced Member
 
Join Date: May 2010
Location: Michigan
Posts: 636
TheOldFart is well on the road to greatness
Default Re: X4, X2 Tutorial and notes for using jQuery noConflict

Excellent!! Thankss
TheOldFart is offline  
Old 13th April 2012, 08:24 AM   #3
Ali
Guru
 
Ali's Avatar
 
Join Date: Feb 2009
Location: Rushmere St Andrew, Ipswich, Suffolk, UK
Posts: 23,983
Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)
Default Re: X4, X2 Tutorial and notes for using jQuery noConflict

Added to my OneNote Notebook on WP hints and tips - thanks!
__________________
Ali
Win 10 64-bit | Toshiba Laptop with Intel Core i7-4710HQ CPU @ 2.50GHz & 16GB RAM
Win 10 Pro 64-bit | Samsung Laptop with Intel Core i5-2450M CPU @ 2.50GHz & 8GB RAM

Ali is offline  
Old 13th April 2012, 09:03 AM   #4
Mick
Expert
 
Mick's Avatar
 
Join Date: Feb 2009
Location: United Kingdom, Staffordshire
Posts: 7,279
Mick has much to be proud ofMick has much to be proud ofMick has much to be proud of
Default Re: X4, X2 Tutorial and notes for using jQuery noConflict

Thanks Joe, definitely come in handy
__________________
Hope This Information Helped Have Fun
New Webplus Support Forum

Intel Core i7 980X 3.60GHz - 8Gig DDR3 PC3 - Windows 8.1 - WPX8 16.0.4.32 - DPX8 14.0.1.21 - PPX9 19.0.0.14
Mick is offline  
Old 13th April 2012, 10:41 AM   #5
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: X4, X2 Tutorial and notes for using jQuery noConflict

Quote:
Originally Posted by TheOldFart View Post
Excellent!! Thankss


Joe
Clitheroe Kid is offline  
Old 13th April 2012, 10:46 AM   #6
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: X4, X2 Tutorial and notes for using jQuery noConflict

Quote:
Originally Posted by Ali View Post
Added to my OneNote Notebook on WP hints and tips - thanks!
Hi Ali,

Hope you get some use out of it.

OneNote notebook? Get yourself a piano, they have loads of notes

Joe
Clitheroe Kid is offline  
Old 13th April 2012, 10:46 AM   #7
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: X4, X2 Tutorial and notes for using jQuery noConflict

Quote:
Originally Posted by Mick View Post
Thanks Joe, definitely come in handy
Thanks Mick

Joe
Clitheroe Kid is offline  
Old 13th April 2012, 10:52 AM   #8
Ali
Guru
 
Ali's Avatar
 
Join Date: Feb 2009
Location: Rushmere St Andrew, Ipswich, Suffolk, UK
Posts: 23,983
Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)
Default Re: X4, X2 Tutorial and notes for using jQuery noConflict

Quote:
Originally Posted by Clitheroe Kid View Post
Hi Ali,

Hope you get some use out of it.

OneNote notebook? Get yourself a piano, they have loads of notes

Joe
No, they don't have notes, Joe, they have keys, black and white ones.
__________________
Ali
Win 10 64-bit | Toshiba Laptop with Intel Core i7-4710HQ CPU @ 2.50GHz & 16GB RAM
Win 10 Pro 64-bit | Samsung Laptop with Intel Core i5-2450M CPU @ 2.50GHz & 8GB RAM

Ali is offline  
Old 13th April 2012, 01:30 PM   #9
AlfredP
Guru
 
AlfredP's Avatar
 
Join Date: Feb 2009
Location: Scotland, UK
Posts: 26,444
AlfredP has nothing more to prove (nirvana)AlfredP has nothing more to prove (nirvana)AlfredP has nothing more to prove (nirvana)AlfredP has nothing more to prove (nirvana)AlfredP has nothing more to prove (nirvana)AlfredP has nothing more to prove (nirvana)
Default Re: X4, X2 Tutorial and notes for using jQuery noConflict

Well done, Joe. Another one for the 'stickies' collection, methinks!

Alfred
__________________
Windows 10® Home 64-bit; Intel® Core™ i3-4010U CPU; 4GB DDR3L RAM; Intel® HD Graphics 4400
La perfection est atteinte non quand il ne reste rien à ajouter, mais quand il ne reste rien à enlever.
(Perfection is achieved, not when there is nothing left to add, but when there is nothing left to take away.)
- Antoine de Saint-Exupéry (1900-1944)
AlfredP is offline  
Old 13th April 2012, 01:54 PM   #10
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: X4, X2 Tutorial and notes for using jQuery noConflict

Quote:
Originally Posted by AlfredP View Post
Well done, Joe. Another one for the 'stickies' collection, methinks!

Alfred
Hi Alfred,

What would be a good move is that Serif add the noConflict tags into their own jQuery scripts. At least those that remain constant. I think that would be a big help.

Joe
Clitheroe Kid is offline  
Old 13th April 2012, 03:19 PM   #11
mjh
The one and only mjh
 
mjh's Avatar
 
Join Date: Feb 2009
Location: Michigan USA
Posts: 74,639
mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)
Default Re: X4, X2 Tutorial and notes for using jQuery noConflict

Hey Joe

Thanks for the effort

Much appreciated.
__________________
---------------
T9900, 8 GB RAM, 512 vidram, WIN 7 Ult 64-bit - Chrome
mjh is offline  
Old 13th April 2012, 08:14 PM   #12
BrianE
Master
 
Join Date: Apr 2009
Location: California, USA
Posts: 11,128
BrianE is a jewel in the roughBrianE is a jewel in the rough
Default Re: X4, X2 Tutorial and notes for using jQuery noConflict

Nicely done, Joe. I heard it from a little bird this tutorial would be on the Serif Wiki as well.
__________________
Brian
Intel Core i7 @ 4.8 GHz. 16 GB DDR3 RAM. 120 GB SSD. NVIDIA GTX 670, GTX 260. Windows 8.1 x64.
[Fix] Drop-Down Navigation on iOS Devices | [How To] Resize a Slider | [Demo] Animated Slider Gallery
BrianE is offline  
Old 13th April 2012, 08:23 PM   #13
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: X4, X2 Tutorial and notes for using jQuery noConflict

Quote:
Originally Posted by BrianE View Post
Nicely done, Joe. I heard it from a little bird this tutorial would be on the Serif Wiki as well.
Thanks Brian,

It certainly will be on the Serif Wiki.

Joe
Clitheroe Kid is offline  
Old 1st May 2012, 12:06 PM   #14
Mort11
Message imported from old Serif Forum
 
Posts: n/a
Default Re: X4, X2 Tutorial and notes for using jQuery noConflict

Woop!


Thanks!
 
Old 18th August 2012, 08:59 AM   #15
Jasper
Regular Member
 
Jasper's Avatar
 
Join Date: Aug 2010
Location: West Sussex, England
Posts: 467
Jasper is on a distinguished road
Default Re: X4, X2 Tutorial and notes for using jQuery noConflict

How do you ad no conflict tags?
I cant make head or tail of this despite the great article?
__________________
The information website for UK new home buyers Brand New Homes
Impulse Web Design - The website designer in Sussex
Jasper is offline  
Old 18th August 2012, 01:17 PM   #16
AlfredP
Guru
 
AlfredP's Avatar
 
Join Date: Feb 2009
Location: Scotland, UK
Posts: 26,444
AlfredP has nothing more to prove (nirvana)AlfredP has nothing more to prove (nirvana)AlfredP has nothing more to prove (nirvana)AlfredP has nothing more to prove (nirvana)AlfredP has nothing more to prove (nirvana)AlfredP has nothing more to prove (nirvana)
Default Re: X4, X2 Tutorial and notes for using jQuery noConflict

Quote:
Originally Posted by Jasper View Post
How do you ad no conflict tags?
I cant make head or tail of this despite the great article?
The method shown in Example 4 is probably the easiest to implement, because you only have to add code at the beginning and end of the script, not in the middle. Go to the HTML fragment where you've pasted your script as 'Body' code, and make the following two substitutions:

1. Replace
Code:
<script type='text/javascript'>
with
Code:
<script type='text/javascript'>
  jQuery.noConflict();
</script>

<script type='text/javascript'>
(function($) {
or more simply (because you don't need to close one <script> tag element and then immediately open a new one) replace
Code:
<script type='text/javascript'>
with
Code:
<script type='text/javascript'>
jQuery.noConflict();
(function($) {
2. Replace
Code:
</script>
with
Code:
})(jQuery); 
</script>
Alfred
__________________
Windows 10® Home 64-bit; Intel® Core™ i3-4010U CPU; 4GB DDR3L RAM; Intel® HD Graphics 4400
La perfection est atteinte non quand il ne reste rien à ajouter, mais quand il ne reste rien à enlever.
(Perfection is achieved, not when there is nothing left to add, but when there is nothing left to take away.)
- Antoine de Saint-Exupéry (1900-1944)
AlfredP is offline  
Old 19th August 2012, 01:48 AM   #17
robozo
Regular Member
 
Join Date: Aug 2012
Posts: 169
robozo is on a distinguished road
Default Re: X4, X2 Tutorial and notes for using jQuery noConflict

starter edition

hello everyone

after this happened on my computer, i went to a friends house, downloaded and installed webplus on his computer, and then it happened again:

i have three galleries on three pages, but when viewing the site online, its always the same gallerie showing up, why is that?

here is how i build the page:

do 4 pages, click masterpage, add some grafic and navi, then go to single page modus, add gallerys to single pages...

its the free flash gallery, the other java free gallery seems to work. is this a software issue?

now it looks like im in the right place here, can somebody tell me where i find those scripts, and how to fix it?

greetings and thanks

robozo
robozo is offline  
Old 19th August 2012, 06:02 AM   #18
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: X4, X2 Tutorial and notes for using jQuery noConflict

Quote:
Originally Posted by robozo View Post
starter edition

i have three galleries on three pages, but when viewing the site online, its always the same gallerie showing up, why is that?

its the free flash gallery, the other java free gallery seems to work. is this a software issue?

greetings and thanks

robozo
The noconflict tags are for use with jQuery scripts. Do your galleries use jQuery?

If you have the same gallery appearing then I don't think there is a conflict. It sounds like a div id issue.

You need to post a link to your page or upload a wpp file here.


Joe
Clitheroe Kid is offline  
Old 19th August 2012, 11:41 AM   #19
robozo
Regular Member
 
Join Date: Aug 2012
Posts: 169
robozo is on a distinguished road
Default Re: X4, X2 Tutorial and notes for using jQuery noConflict

Quote:
Originally Posted by Clitheroe Kid View Post
The noconflict tags are for use with jQuery scripts. Do your galleries use jQuery?

If you have the same gallery appearing then I don't think there is a conflict. It sounds like a div id issue.

You need to post a link to your page or upload a wpp file here.


Joe
thanks joe

my site is now done with the java gallerys, it was the starter edition flash gallerys that didnt work. i dont know what a JQuery is, do you? however, we willl see what serif says...
robozo is offline  
Old 20th August 2012, 09:37 AM   #20
Jasper
Regular Member
 
Jasper's Avatar
 
Join Date: Aug 2010
Location: West Sussex, England
Posts: 467
Jasper is on a distinguished road
Default Re: X4, X2 Tutorial and notes for using jQuery noConflict

Quote:
Originally Posted by AlfredP View Post
The method shown in Example 4 is probably the easiest to implement, because you only have to add code at the beginning and end of the script, not in the middle. Go to the HTML fragment where you've pasted your script as 'Body' code, and make the following two substitutions:

1. Replace
Code:
<script type='text/javascript'>
with
Code:
<script type='text/javascript'>
  jQuery.noConflict();
</script>

<script type='text/javascript'>
(function($) {
or more simply (because you don't need to close one <script> tag element and then immediately open a new one) replace
Code:
<script type='text/javascript'>
with
Code:
<script type='text/javascript'>
jQuery.noConflict();
(function($) {
2. Replace
Code:
</script>
with
Code:
})(jQuery); 
</script>
Alfred
Thanks Alfred.
I tried this on the cookie widget script and it doesnt seem to be working.
I think I put the code you suggested in the right place.

OR did you mean to add it to the lighbox code which for me, will be a lot harder.
__________________
The information website for UK new home buyers Brand New Homes
Impulse Web Design - The website designer in Sussex

Last edited by Jasper; 3rd September 2012 at 10:27 AM.
Jasper is offline  
 

Bookmarks

Tags
jquery, no conflict, noconflict

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
WebPlus X5: WebPlus tutorial: jquery tab slideout contact form antoniotrotta WebPlus 12 13th September 2011 09:26 AM
WebPlus X2: Tutorial: jQuery Content Slider Giganic WebPlus 24 29th November 2010 09:44 PM
Musical notes ... Jennifer WebPlus 1 26th August 2008 05:08 PM
pop up notes steve WebPlus 2 9th July 2003 06:01 PM
Training Notes for PagePlus 7 Richard Hunt PagePlus 0 12th May 2001 08:00 AM


All times are GMT +1. The time now is 08:20 AM.