Jquery conflicts
Hi can anyone help or give me some advice here? I have a jquery menu which works on its own and I have a jquery fancybox which again works on its own. When I tried them both on my webpage they seem to conflict. I have placed the scripts at the bottom of the body tag. Whichever script is first it doesn't work.
My site is temporarily hosted here: http://www.heggie5.webspace.virginmedia.com/#
As you can see the menu script is working but the fancybox isn't. Can anyone help as I've been trying to resolve this for a couple of days and can't find a solution!
Here is my HTML
<!-- end .container --></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="fancyapps-fancyBox-2bb0da9/source/jquery.fancybox.pack.js"></script>
<link type="text/css" rel="stylesheet" href="fancyapps-fancyBox-2bb0da9/source/jquery.fancybox.css" />
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
</script>
<script>
var $jq = jQuery.noConflict();
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="jQuery Sliding Flexible Menu v2/deploy/js/jquery.sliding-flexible-menu-v2.js"></script>
<link rel="stylesheet" type="text/css" href="jQuery Sliding Flexible Menu v2/deploy/css/sliding-flexible-menu-v2.css"/>
<script type="text/javascript">
$(document).ready(function() {
//Horizontal
$("div.menu-horizontal").slidingFlexibleMenuv2({
buttonSpacing: 1
</script>
</body>
</html>
Many thanks to David_Powers and Nancy O. I took your advice and altered my code to the following and it now works a treat. I doth my cyber cap to your genius...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="jQuery Sliding Flexible Menu v2/deploy/js/jquery.sliding-flexible-menu-v2.js"></script>
<link rel="stylesheet" type="text/css" href="jQuery Sliding Flexible Menu v2/deploy/css/sliding-flexible-menu-v2.css"/>
<script type="text/javascript">
$(document).ready(function() {
//Horizontal
$("div.menu-horizontal").slidingFlexibleMenuv2({
buttonSpacing: 1
$(".fancybox").fancybox();
</script>
<script type="text/javascript" src="fancyapps-fancyBox-2bb0da9/source/jquery.fancybox.pack.js"></script>
<link type="text/css" rel="stylesheet" href="fancyapps-fancyBox-2bb0da9/source/jquery.fancybox.css" />
Similar Messages
-
Adobe Spry jQuery conflict in Text Field validation.
I am using Adobe Spry for my form validation, and jQuery for hiding / showing elements on a page based on responses to questions. jQuery works fine for this for me. Where I am having a problem is using jQuery to take the value of one input and enter it into a second input text field with after adding a year to it.
Adobe Spry is always validating the fields an enforcing the date to be in the correct format mm/dd/yyyy.
jQuery will only work if I remove the script reference to SpryValidationTextField.js it is 1.6.1 v.37
Has anyone ever seen this and can help me. Everything works fine independently, but will not play together.
Here is a link to the page on the site.
http://www.stuckey.com/forms/insurance_info.php
Thanks in advance,
Joe
Joe Scarpetta
Apphia Solutions, LLC
FileMaker and Web Development
http://apphiasolutions.com
[email protected]Joe Scarpetta wrote:
Hi Arnout,
I removed the no conflict, because when the block of code below was loaded after it, it would not work.
What is supposed to happen is what ever date is entered into the Effective Date, the Expiration Date should populate with the same date + 1 year.
Thanks,
Joe
For some reason this script block is never executed:
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$('#EffectiveDate').change(function () {
var parts = $(this).val().split('/');
var date = new Date(parseInt(parts[2], 10), parseInt(parts[0], 10) - 1, parseInt(parts[1], 10));
date.setFullYear(date.getFullYear() + 1);
$('#ExpirationDate').val(isNaN(date.getFullYear()) ? '' : formatDate(date));
function formatDate(date) {
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
return (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day + '/' + year;
</script>
What I would suggest is fixing your page first, it does not really validate and give some "nasty" errors:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.stuckey.com%2Fforms%2Finsurance_info.ph p&charset=%28detect+automatically%29&doctype=Inline&group=0 -
JQuery Conflicts with Muse and Plugins
Hello Community,
Recently, we ran into problems with jquery libraries (and my programmers were unable to fix it...suggesting I just make a stand-alone page in Dreamweaver/Komodo) when trying to insert that awesome LayerSlider from CodeCanyon. The problem: Muse calls an older jquery library than the one the LayerSlider needs (and once we updated it to the newest jquery standard, Muse no longer worked!). Hmmm. I wonder if there can be any type of fix for this as well????
Has anyone got a work around to this (besides creating the page in its entirety with an IDE, then FTPing it after the Muse FTP in order to overwrite the index.html? (That's what we will have to do, since we definitely want that LayerSlider on the home page)).
Thanks,
Skyborn ManagerDesign work! Anything server-side unless I either revert to an older version of DW or cobble in the 3rd party fix to restore all the server-side functionality. I love Muse because I can make things look the way I want them too very easily. Here is a sample basic dialog. Clearly does not look like the "canned" jquery dialog with the canned ui-dialog-titlebar or ui-dialog-content. For this one I've used a blank compo, single t/t, set the container to transparent enabled a close button, layered in a rectangle for the tombstone and a seperate one for the actual content, stylized the close button to get my "look". Then tweaked the jquery to get rid of the padding, borders and corner radius, so I can set radius individually. Not very elegant but the only way I could get a "title bar" to look like I wanted and a "content" area slightly smaller so as to complement the slide action, giving the effect that the "content" is retracting up into the "title bar" on collapse, like you see with an accordian.
There are multiple dialogs on the page. Triggers appear to be "menu items". When a target is triggered the target needs to allow a user to min/max/dock/collapse the different dialogs.
I don't mind using Muse in conjunction with DW, not a problem. Just need to figure out how to get the look in Muse coupled with the functionality in DW. Now since I exported to html I do have the .png files so...... maybe a way to use the .png files in DW instead........... -
Hi,
I'm trying to use jquery with spry generated content. In the
code below, I attempt to add a click event listener to fire an
alert box. It seems as though the code does not work with the spry
generated regions. Any ideas?
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript"
src="includes/xpath.js"></script>
<script language="JavaScript" type="text/javascript"
src="includes/SpryData.js"></script>
<script language="javascript"
src="js/jquery.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
var xmlStr = "<?xml version=\"1.0\"
encoding=\"iso-8859-1\"?> \
<employees xmlns=\"
http://www.foo.com/employees\">
<employee> \
<id>55555</id> \
<lastname>Smith</lastname> \
<firstname>Edward</firstname> \
<phone>(415) 333-0235 </phone> \
<username>esmith</username> \
</employee> \
<employee> \
<id>44444</id> \
<lastname>Johnson</lastname> \
<firstname>Neil</firstname> \
<phone>(415) 333-9475 </phone> \
<username>njohnson</username> \
</employee> \
<employee> \
<id>33333</id> \
<lastname>Williams</lastname> \
<firstname>Steve</firstname> \
<phone>(415) 333-4573 </phone> \
<username>swilliams</username> \
</employee> \
<employee> \
<id>22222</id> \
<lastname>Jones</lastname> \
<firstname>John</firstname> \
<phone>(415) 333-9345 </phone> \
<username>jjones</username> \
</employee> \
<employee> \
<id>54125</id> \
<lastname>Brown</lastname> \
<firstname>Joe</firstname> \
<phone>(415) 333-5938 </phone> \
<username>jbrown</username> \
</employee> \
</employees>";
var dsEmployees = new Spry.Data.XMLDataSet(null,
"/employees/employee");
var xmlDOMDocument = Spry.Utils.stringToXMLDoc(xmlStr);
dsEmployees.setDataFromDoc(xmlDOMDocument);
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".elements").click(function() {
alert("hello");
//jQuery(this).addClass("selected");
</script>
<style type="text/css">
.selected {
border:1px solid;
</style>
</head>
<body>
<div class="elements">hello</div>
<div id="container" spry:region="dsEmployees">
<div class="elements"
spry:repeat="dsEmployees">{firstname}</div>
</div>
</body>
</html>Try puting the jquery in a seperated <script> tag.
jquery and spry doesnt play nice together when they are in
the same tag. (alteast thats how i fixed my jquery problem)
If this doesnt help, try using a older version of jquery (as
test ofcourse)
I remember i had some problems with jquery and Spry when i
updated jquery to its latest function. -
Hi,
We have implemented a nice tab look in HTML5, you can see the awesome functionality in this link:
http://technology-day.incompanywebs.com/costa-rica-noticias.html
The Problem
When we get the HTML code directly from the server where the link above is hosted, and we upload the file into adobe bc, just the page, with no template associated, the tabs won't work. You can see what happens here:
http://technologyday.businesscatalyst.com/elsalvador/noticias
For some weird reason the tabs won't work. We tried using the "<script>$j = jQuery.noConflict();</script>" but it won't work.
We also notice that there are some errors present in the console, but they are pretty much the same that show up in the working site. Any ideas on how to solve this would be greatly appreciated. Here is the code for the page also.
http://jsfiddle.net/b5YC3/
Message was edited by: Liam Dilley - moved code over to a jsfildde.If you use your browsers inspect tool, view the console or use say firebug you can easily see any errors you have.
I can see your using foundation for your framework and using the foundation tabs js.
http://technologyday.businesscatalyst.com/js/foundation/foundation-tab.js
Is the path you have but it is not there on the server. -
SharePoint 2010 jQuery compatibility errors – cmssitemanager.js
Soumya Das
Hi,
According to your post, my understanding is that you got jQuery compatibility errors in cmssitemanager.js.
The CMSSiteManager.js using the $ variable. The error will be thrown out when var $ for jQuery conflict with other JavaScript objects like CMSSiteManager.js.
To resolved this issue, you can disable $ for jQuery by running:
jQuery.noConflict();
More information:
SharePoint 2010: var $ conflict between CMSSiteManager.js and jQuery
$ in cmssitemanager.js conflicts with $ in jQuery
Best Regards,
Linda Li
Linda Li
TechNet Community Support -
Hide "more" button in a list view, only works for first item in the list
I have the following code in a list view that outputs several dozen items in a web app. The code only works for the first item, how can I make it loop through and execute the test for each item in the list view? The {tag_hide more button} is a checkmark field that yields a numeric 1" if checked otherwise yields a numeric "0".
<div id="more-option">
<p class="right"><a href="{tag_itemurl_nolink}" class="btn btn-small btn-very-subtle">More →</a></p>
</div>
<div class="more-selection" style="display: none;">{tag_hide more button}</div>
<script>
if ($(".more-selection").text() == "1") {
$("#more-option").hide();
</script>What's the URL for the site where you are using this? Offhand, it looks like it should work with your first example so you are either placing the script before those elements are loaded or you might try wrapping your current javascript inside the:
$(document).ready(function() {
--- your existing javascript here
This make sure the code runs once all the html is loaded on the page. Without seeing a URL and debugging with the js console in Chrome I can't give you a solid answer.
But, I do know that you can probably do this with a lot less markup. Once we figure out what the actual problem is I have a better solution mocked up for you on jsfiddle.
When looking at my HTML code on jsfiddle, please realize I setup some dummy HTML and removed your tags and added actual values which would be output by your tags. The main thing I did was remove the whole div.more-selection and instead, added a "data-is-selected" attribute on your div.more-option element. Then, in my javascript for each div.my-option element on the page, we loop through them, find the value of that data attribute and hide that div if it's less than 1 (or 0).
Here's the fiddle for you to look at: http://jsfiddle.net/thetrickster/Mfmdu/
You'll see in the end result that only two divs show up, both of those divs have data-is-selected="1".
You can try pasting the javascript code near the closing </body> tag on your page and make sure to wrap my js inside a <script> tag, obviously. My way is neater on the markup side. If you can't get it to work it's likely a jquery conflict issue. My version is using the $(document).ready() method to make sure all the code is loaded before it runs.
Best,
Chris -
Changing datasource of reports in a loop only works for first report.
Hi,
I have code that loops through a list of reports to change the datasource and save the change in the report. The idea is that this can be done at build time so time taken at runtime is only for opening the report and running it.
The problem is that the first iteration of the loop works, and any further ones don't. Apart from closing the client document is there anything else that should be explicitly closed? I don't retrieve any ReportSource from the Client Document so I shouldn't need to dispose of that...I don't think. In particular is there something that should be done to the databaseController retrieved from the clientDoc after each loop?
The code goes like the below:
for(File report : reports){
System.out.println("Preparing report: " + report.getAbsolutePath());
ReportClientDocument clientDoc = CRJavaHelper.getReportClientDocument(
report.getAbsolutePath());
CRJavaHelper.replaceDBConnection(clientDoc, props);
clientDoc.close();
System.out.println("Report " + report.getAbsolutePath() + " prepared.");
getReportClientDocument does this:
ReportClientDocument clientDoc = new ReportClientDocument();
clientDoc.setReportAppServer("inproc:jrc");
clientDoc.open(fullPath,
OpenReportOptions.openAsReadOnly.value());
return clientDoc;
replaceDBConnection does the following:
DatabaseController dc = clientDoc.getDatabaseController();
logonDataSource(dc, username, password);
prepareReport(dc, schema);
ConnectionInfos cis = dc.getConnectionInfos(null);
for (IConnectionInfo oldci : cis) {
IConnectionInfo newci = new ConnectionInfo();
newci.setKind(ConnectionInfoKind.SQL);
newci.setAttributes(propBag);
newci.setUserName(username);
newci.setPassword(password);
dc.replaceConnection(oldci, newci, null, DBOptions._useDefault
+ DBOptions._doNotVerifyDB);
SubreportController src = clientDoc.getSubreportController();
IStrings strs = src.getSubreportNames();
Iterator<?> it = strs.iterator();
while (it.hasNext()) {
String name = (String) it.next();
ISubreportClientDocument subreport = src.getSubreport(name);
DatabaseController sdc = subreport.getDatabaseController();
cis = sdc.getConnectionInfos(null);
for (IConnectionInfo oldci : cis) {
IConnectionInfo newci = new ConnectionInfo();
newci.setAttributes(new PropertyBag(propBag));
newci.setUserName(username);
newci.setPassword(password);
sdc.replaceConnection(oldci, newci, null, DBOptions._useDefault
+ DBOptions._doNotVerifyDB);
clientDoc.save();What's the URL for the site where you are using this? Offhand, it looks like it should work with your first example so you are either placing the script before those elements are loaded or you might try wrapping your current javascript inside the:
$(document).ready(function() {
--- your existing javascript here
This make sure the code runs once all the html is loaded on the page. Without seeing a URL and debugging with the js console in Chrome I can't give you a solid answer.
But, I do know that you can probably do this with a lot less markup. Once we figure out what the actual problem is I have a better solution mocked up for you on jsfiddle.
When looking at my HTML code on jsfiddle, please realize I setup some dummy HTML and removed your tags and added actual values which would be output by your tags. The main thing I did was remove the whole div.more-selection and instead, added a "data-is-selected" attribute on your div.more-option element. Then, in my javascript for each div.my-option element on the page, we loop through them, find the value of that data attribute and hide that div if it's less than 1 (or 0).
Here's the fiddle for you to look at: http://jsfiddle.net/thetrickster/Mfmdu/
You'll see in the end result that only two divs show up, both of those divs have data-is-selected="1".
You can try pasting the javascript code near the closing </body> tag on your page and make sure to wrap my js inside a <script> tag, obviously. My way is neater on the markup side. If you can't get it to work it's likely a jquery conflict issue. My version is using the $(document).ready() method to make sure all the code is loaded before it runs.
Best,
Chris -
Any simple way to do popup image view overlay in DW? Can't get pickachoose+fancybox+fluid working
Hey all,
Just wondering if anyone knows any simple ways to create a popup over lay window like what fancybox/lightbox/shadow box does and get it to work with a Dreamwever fluid grid site?
I've got pikachoose+fancy box to run together perfectly in a plain html page, but when I bring that code into a Dreamweaver fluid grid site, the code doesn't work (well images don't cycle, and popover doesnt load when you click on the image link).
I'm guessing it's a jquery conflict of some kind.
Any help would be great, I can post the full code if someone is able to take a look. When I inspect the code in Google Chrome web inspector I get in the console:
Uncaught TypeError: Cannot read property 'msie' of undefined jquery.fancybox-1.3.4.pack.js:18
Uncaught TypeError: Object [object Object] has no method 'fancybox'
Code below
<!doctype html>
<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>-</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/ce4.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="jquery.fancybox-1.3.4.css" media="screen" />
<link type="text/css" href="styles/bottom.css" rel="stylesheet" />
<script src="respond.min.js"></script>
<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="lib/jquery.pikachoose.js"></script>
<script type="text/javascript" src="jquery.fancybox-1.3.4.pack.js"></script>
<script language="javascript">
$(document).ready(function (){
var a = function(self){
self.anchor.fancybox();
$("#pikame").PikaChoose({hoverPause:true, showCaption:false, text: {previous: "", next: "" }, buildFinished:a});
</script>
</head>
<body>
<div class="pikachoose">
<ul id="pikame" >
<!-- <li><a href="1.jpg"><img src="1.jpg"></a>-->
<li>
<a href="images/1large.jpg">
<img src="images/1small.jpg"/>
</a>
<span></span></li>
etc... etc...
Any help would be greatI don't know what a pikachoose is, but Fancybox2 works in Fluid Layouts. Copy & paste the following code into a new, blank document.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5, with Fancybox2 Viewer</title>
<!--LATEST JQUERY CORE LIBRARY-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!--FANCYBOX plugins-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>
<style>
/**this styles image container**/
#thumbs p {
float:left;
width: 180px;
height: 12.5em;
margin: 10px 0 0 20px;
padding: 10px;
border: 1px solid silver;
/**rounded borders**/
-moz-border-radius: 20px;
-webkit-border-radius:20px;
border-radius: 20px;
/**this styles caption text**/
font: italic 14px/1.5 Geneva, Arial, Helvetica, sans-serif;
color: #666;
text-align:center;
/**recommend using same size images**/
#thumbs img {
width: 160px; /**adjust width to thumbnail**/
height: 120px; /**adjust height to thumbnail**/
margin-bottom: 1.5em;
opacity: 0.75;
#thumbs img:hover {opacity: 1.0}
/**float clearing**/
#thumbs:after {
content:".";
clear:left;
font-size:0px;
line-height:0;
display:block;
visibility:hidden;
</style>
</head>
<body>
<h1><a href="http://fancyapps.com/fancybox/">Fancybox2</a> Viewer with images</h1>
<!--insert thumbnails with links to full size images below-->
<div id="thumbs">
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 1" /></a> <br />
Caption 1
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 2" /></a> <br />
Caption 2
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 3" /></a> <br />
Caption 3
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 4" /></a> <br />
Caption 4
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120" alt="Thumbnail 5" /></a> <br />
Caption 5
</p>
<!--end thumbs--></div>
<!--FancyBox function code-->
<script>
$(document).ready(function() {
$('.fancybox).fancybox();
</script>
</body>
</html>
Nancy O. -
Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome
Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome. Works in IE. This is my first time trying to post a question - so please be kind. I am also not good with code and am finding css a real challenge after learning to design based on tables. I'm using CS5.
The "test" page with the slide show is: http://www.reardanwa.com/index-slides.html The same page without the slide show is http://www.reardanwa.com/
I realize the images are not ideally sized - I'll fix those once I get the pages to function. Maybe I need a different slide show? I would prefer a widget that I can modify to required size & postition. Again - I'm not good at building with code from scratch.
The problem is the naviagation links that are directly next to the slide show do not work in Firefox of Chrome. They do work in IE.
I've read about using jQuery.noConflict(); code but can't figure out the correct way to use it in my case or whether that's even part of the solution. I know my code is not well organized as I have cobbled together from various sources in an attempt to format the page the way the client wants it. Also, FYI, I will eventually try to make the page work in Surreal CMS.
I've spent sevaral days over the last several weeks trying to solve sth slide show/navigation conflict - so any specific light you can shed will be much appreciated.
Thanks in advance.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reardan Area Chamber of Commerce</title>
<meta name="description" content="home page for Reardan Area Chamber of Commerce" />
<meta name="keywords" content="Reardan WA, chamber of commerce" </>
<script src="scripts/jquery-1.6.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.js" type="text/javascript"> </script>
<script type="text/xml">
</script>
<style type="text/css">
#slideshow {
padding: 10px;
margin:0;
#slideshow-caption{
padding:0;
margin:0;
#slideshow img, #slideshow div {
padding: 10px;
background-color: #EEE;
margin: 0;
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #004B8D;
margin: 0;
padding: 0;
color: #000;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
/* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
.left
position:absolute;
left:0px;
.center
margin:auto;
width:95%;
.box
position:relative;
left:-90px;
width:950px;
height:350px;
border-radius: 13px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
z-index:1000;
.slide{
position:absolute;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
color: #6E6C64;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
/* ~~this fixed width container surrounds the other divs~~ */
.container {
width: 960px;
min-height:900px;
padding:5px 0px 0px 0px;
background: #E8F8FF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background: #E8F8FF;
padding:10px 5px 0px 5px;
.sidebar1 {
float: left;
width: 225px;
margin: 60px;
color: #FFFF0D;
background: #595FFF;
border-radius: 13px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
padding: 5px 5px 0px 5px;
border: 3px solid #F7F723;
z-index:-1;
.sidebar2 {
float: left;
width: 275px;
color: #FFFF0D;
text-align: left;
background: #595FFF;
padding-bottom: 10px;
border-radius: 13px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border: 3px solid #F7F723;
z-index:2;
.sidebar3 {
float: left;
width: 275px;
color: #FFFF0D;
text-align: left;
background: #595FFF;
padding-bottom: 10px;
border-radius: 13px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border: 3px solid #F7F723;
z-index:3;
.content {
padding: 0px 0px 0px 0px;
width: 780px;
float: left;
background: #E8F8FF;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0px 15px 5px 10px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
list-style: none; /* this removes the list marker */
border-top: 0px solid #FFFF66; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 50px; /* this creates the space between the navigation on the content below */
font: Arial Black, Verdana, , Helvetica, sans-serif;
font-size:1.3em;
font-weight:bold;
z-index:2;
ul.nav li {
border-bottom: 0px solid #FFFF66; /* this creates the button separation */
font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 3px 0px 5px 0px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
width: 185px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
color: #FFFF0D;
background: #595FFF;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
background: #595FFF;
font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
color: #FFFFFF;
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background: #595FFF;
color: #FFFF0D;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
-->
</style>
</head>
<body>
<div class="container">
<div class="header"><!-- end .header -->
<a href="#"><img src="images/Chamber-Logo-2.gif" alt="Reardan Chamber Logo" width="187" height="163" hspace="10" vspace="5" align="top" /></a><img src="images/Reardan-Chamber-Title.gif" width="476" height="204" alt="Reardan Area Chamber of Commerce, Dedicated to Preserving and Enhancing Area Businesses" /><p></p>
<p style="color: #F00">This Site is under construction! Please pardon our dust as we create!</p>
</div>
<div class="sidebar1">
<ul class="nav">
<li><a href="about.html">About Us</a></li>
<li><a href="history.html">Reardan History</a></li>
<li><a href="activities.html">Activities</a></li>
<li><a href="business.html">Business<br />
Directory</a></li>
<li><a href="about.html">Join the<br />
Chamber</a></li>
<li><a href="links.html">Links<br />
<span style="font-size: 85%">Tourism</span><br />
</a></li>
</ul>
<!-- end .sidebar1 --></div>
<br />
<br />
<br />
<br />
<div class="box" +"slide">
<script type="text/javascript">
// BeginOAWidget_Instance_2559022: #slideshow
slideshowAddCaption=true;
$(window).load(function() {
$('#slideshow').cycle({
after: slideshowOnCycleAfter, //the function that is triggered after each transition
autostop: false, // true to end slideshow after X transitions (where X == slide count)
fx: 'blindX',// name of transition effect
pause: false, // true to enable pause on hover
randomizeEffects: true, // valid when multiple effects are used; true to make the effect sequence random
speed: 100, // speed of the transition (any valid fx speed value)
sync: true, // true if in/out transitions should occur simultaneously
timeout: 5000, // milliseconds between slide transitions (0 to disable auto advance)
fit: true,
height: '300px',
width: '525px' // container width (if the 'fit' option is true, the slides will be set to this width as well)
function slideshowOnCycleAfter() {
if (slideshowAddCaption==true){
$('#slideshow-caption').html(this.title);
// EndOAWidget_Instance_2559022
</script>
<div id="slideshow">
<!--All elements inside this will become slides-->
<img src="images/100_1537.jpeg" width="600" height="450" title="caption for image1" /> <img src="images/Parade-2011-2.jpg" width="300" height="225" title="caption for image2" /> <img src="images/100_1495.jpeg" width="600" height="450" title="caption for image3" />
<div title="sample title"> Images for slide show will need to be re-sized to fit box to avoid distortion</div>
<img src="images/beach4.jpg" width="200" height="200" title="caption for image4" /> <img src="images/beach5.jpg" width="200" height="200" title="caption for image5" /> </div>
<!--It is safe to delete this if captions are disabled-->
<div id="slideshow-caption"></div></div>
<div class="sidebar2" "anotherClass editable"><p align="center"><strong>Chamber News</strong><br />
Local News item
<br />
Another New item</p>
<p align="center">lots of news this week<br />
<br />
<br />
<br />
</p>
</div>
<div class="sidebar3" "anotherClass editable"><p align="center"><strong>Upcoming Events</strong></p>
<div align="center"> <a href="activities.html" style="color: #FFFF0D">Community wide yard sales</a><br />
<br />
<br />
<br />
<br />
</div>
</div>
<div class="content"><br />
<br />
</div>
<div class="footer">
<p align="center"><span style="font-size: small">Reardan Area Chamber of Commerce</span><br />
<span style="font-size: x-small">[email protected] - 509.796.2102</span><br />
</p>
<!-- end .footer -->
</div></body>
</html>If you DO want the slideshow overlaping the navigation try the below css:
.sidebar1 {
float: left;
width: 225px;
margin: 60px 0px 60px 60px;
color: #FFFF0D;
background: #595FFF;
border-radius: 13px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
padding: 5px 5px 0px 5px;
border: 3px solid #F7F723;
.box {
float: left;
margin-left:-60px;
width:700px;
height:350px;
border-radius: 13px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px; -
Lightbox and jquery.js conflict
Hi I have a query.js and a lightbox.js javascripts running on the same page and they are conflicting. They both work great seperately but when combined the scripts stop working.
I found a forum that is closed that reference's this solution:
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
However, I am unsure of what to do with it. The forum referenced changing the name of the 'someid' but I don't know what to change it to.
Here is my conflicting codes:
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/lightbox.js"></script>
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Caption Sliding (Partially Hidden to Visible)
jQuery('.boxgrid.caption').hover(function(){
jQuery(".cover", this).stop().animate({top:'50px'},{queue:false,duration:160});
}, function() {
jQuery(".cover", this).stop().animate({top:'300px'},{queue:false,duration:160});
</script><!-- JavaScript -->
<!--<script type="text/javascript" src="scripts/prototype.js"></script>-->
<!--<script type="text/javascript" src="scripts/lightbox.js"></script>-->
<script type="text/javascript" src="scripts/mootools.js"></script>
<script type="text/javascript" src="scripts/swfobject.js"></script>
<script type="text/javascript" src="scripts/videobox.js"></script>
<!--<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="scripts/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="scripts/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.boxgrid.caption').each(function (){
jQuery(this).mouseenter (function(){
jQuery(this).find(".cover").animate({top:'50px'},{queue:false,duration:160});
jQuery(this).mouseleave (function(){
jQuery(this).find(".cover").animate({top:'150px'},{queue:false,duration:160});
jQuery("a.external").fancybox();
</script> -
Combobox plugin conflicts with jQuery menu
Hi,
First of all thanks for both authors of "Combobox" (http://oracleapexideas.blogspot.com.es/2012/06/combobox-plugin.html) and "jQuery menu" (http://blog.theapexfreelancer.com/2011/02/jquery-menu-apex-plugin) plugins! Both are great plugins!
I have a conflict when I insert both plugins at the same page. The problem is, jQuery menu cease to work.
I've recreated the situation under apex.oracle.com, the dropdown menu does not work anymore after inserting combobox plugin:
http://apex.oracle.com/pls/apex/f?p=52892:4
I can give further details if needed.
Thanks in advance!jcoves wrote:
I can give further details if needed.Can you share workspace details for below
http://apex.oracle.com/pls/apex/f?p=52892:4 -
Has anyone found that the BC javascript validation conflicts with jquery mobile?
I have added a form module to a page. Page has a desktop and mobile template - mobile template based on jquery.
Form validates nicely on desktop (if the fields are not complete - then a javascript alert pops up. Visitor can close the alert dialog box and can complete the form.)
However, on mobile, if the form is not filled out in manditory fields, the javascript alert pops up (as it should), but then the page goes to an error page - "Please fix this issue and re-insert your web form on your web page."
Has anyone else had this problem. And even better - does anyone know of a solution? Thanks!This doesn't have to do with BC's form validation. The problem with your mobile site right now is that you are using the "$" variable which is usually associated with jQuery before jQuery is loaded on your page. Once there's a javascript error on your page, the rest of the javascript will stop running so this error occurs very early on your page and some other javascript will stop working.
To fix this you need to move the bit of javascript on line 13 of your page templates further down after the jQuery library is referenced, so this:
<script>
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});</script>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
becomes this:
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script>
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});</script> -
Conflict between Client object model and Item Updated Event Receiver in sharepoint 2010
Hello All,
As per my requirement I have a two custom list.
Agent Details
Port Name
Agent Details contains Agent code, Port Name, email, address and phone of Agent. Its possible that one Agent Code is connected with multiple Port Name.
Basically what I am doing is I am getting port name connected with Agent code, using jquery and bind those values with check box(using javascript created dynamically) and bind all with Div tag.
Now when my custom edit form of Agent list open up it shows me different port name binding with checkbox group.
when user select the check box and click confirm button my clicent object model script will run and add this selected value into Port Name list.
After confirm one more button named Save will enable asking user to edit the email, phone or address value and when I click on save my Item updated event fires which update the values of the selected port name(These port name I am getting from port
name list) to Agent Details custom list.
Now when I am trying to update the values my event receiver fires or some times it got stuck(not firing). So could you please help me the possible alternative for this requirements.
Can we user the Ecma Script(Client object model to preserve the value of selectec port) and Item updated event receiver on the same time?
Is anything am doing wrong then please guide me.Hi,
As I understand, when you updated values in the agent details list the Item updated event receiver got stuck sometimes.
The item update event receiver will fire after the item has been saved, and the client object model script or the Ecma Script runs before the item is saved, so there is no conflict between the client object model script and item update event receiver.
You could find out the reason about the item update event receiver gets stuck by debugging the event receiver.
When you want to debug your event receivers, you have to attach to OWSTIMER.EXE and wait till they are executed. You can control this behavior using the Synchronization attribute. Also, if you’re looking for an easy way to debug an event receiver without
having to manually attach a debugger to your code, you can use the System.Diagnostics.Debugger.Launch() method.
The articles below are about how to debug in the event receiver in SharePoint 2010.
http://sharepoint-kings.blogspot.jp/2013/02/debugging-event-receivers-in-sharepoint.html
http://chakkaradeep.com/index.php/event-receivers-in-sharepoint-2010/
http://sharesaint.com/?p=77
Best regards,
Sara Fan
TechNet Community Support
Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact
[email protected] -
JQuery Colorbox Plugin Not Working Properly in IE - HELP!
This is a convoluted issue and I will do my best to explain. I am setting cookies in a page that will show a lightbox on the first visit. It works great in FF, Chrome, etc. but does not in IE.
What happens in IE is the script for calling my lightbox (colorbox) fires but all I see is the AJAX Loader spinning and the content never loads. I figured out that the script was firing too soon. I was using $j(document).ready(function() I switched to: $j(window).load(function() and all seemed to be fine and it worked properly until I start from another page and come to the page mentioned above.
If I start on any other page and click a link I have the same issue! The cookie works properly and does not fire the box a second time.
In other words if I clear cookies and start at the page with an issue then no issue. BUT if I start from any other page (with cookies cleared) and go to the above page the colorbox does not load properly.
From what I can tell the $j(window).load(function()is not working correctly.
I receive no errors from IE. I am using IE 8 for testing and cannot test 9 as I am using Windows XP. The script is in the <head> of my document. (If I move the script into the <body> it completely breaks the page in IE)
I have read of issues of DOCTYPE not being correct or shortend and colorbox issues in IE. My DOCTYPE is as follow which should be correct:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Any thoughts or ideas are greatly appreciated!
Here is my code I am using:
Javascript
var $j = jQuery.noConflict();
$j(window).load(function() {
//window.onload = function() does not function properly either...
if(!$j.cookie('gallerycookie')){
$j.colorbox({
inline:true,
href:"#gallery-nav-instruct"
$j.cookie("gallerycookie", 1, {
expires: 30,
path: '/'
HTML
<div style="display:none">
<div id="gallery-nav-instruct">
<h2>Gallery Navigation Instructions - Step 1</h2><h2 style="text-align:right">
<a style="text-align:right;" class="inline cw" href="
#gallery-enlarge-instruct">Step 2</a></h2>
<p> </p>
<p class="white"><img src="/Images/Pages/gallery-navigation.jpg" width="890" height="450" alt="Gallery Navigation Instructions" /></p>
</div>
</div>
<div style="display:none">
<div id="gallery-enlarge-instruct">
<h2>Gallery Navigation Instructions - Step 2</h2>
<p> </p>
<h2><a class="inline cw" href="#gallery-nav-instruct">Step 1</a> </h2>
<p class="white"><img src="/Images/Pages/gallery-enlarge.jpg" width="890" height="510" alt="Gallery -Enlarged View Instructions" /></p>
</div>
</div>
Also:
I attempted to use [code]window.onload = function()[/code]
and the same issue happened and
I attempted to use the event handler to trigger the script once the div was loaded, that did not even fire the script at all. here was that code:
var $j = jQuery.noConflict();
$j('#gallery-nav-instruct').load(function() {
if(!$j.cookie('gallerycookie')){
$j.colorbox({
inline:true,
href:"#gallery-nav-instruct"
$j.cookie("gallerycookie", 1, {
expires: 30,
path: '/'
If I move the script to call Colorbox outside of the Head section it completely breaks the gallery - any ideas as to why as that may help if I can place the code at the end vs the head.
I have posted this question over at Stack Overflow with no help at all and any assistance would be amazing!
One other note: I am using jAlbum on the page and I do not see any conflicts but could there be an issue? I cannot post that code here as it would exceed the post limit.
To trigger this error start at http://tinyurl.com/7lgqdve , a lightbox will appear. Click Message Examples (lower left hand corner of lightbox or first item in menu without lightbox).
Here is a direct link to the http://tinyurl.com/6ub72og if needed. (Going to the page directly will not trigger the error.)Hi,
I think you'll get better answers to this in the Dreamweaver forum.
http://forums.adobe.com/community/dreamweaver/dreamweaver_general?view=discussions
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
Maybe you are looking for
-
Quicktime Pro crashes when trying to save file
I just quicktime pro, and so far it keeps crashing on me when I try to save a video file. Here are the steps: 1. Open a video file (m4v) 2. Overlay text on the first few seconds of the video 3. Save video 4. CRASH! I'm not sure if this helps, but I g
-
How to find indirect evaluation wage types exist in the system
Hi Experts, How can we find indirect evaluation wage types exist in the system ( including customer wage type). Thanks in Advance. Regards, IFF
-
How to delete row in listbox with formatting
Hello, I have a listbox and I want to delete selected rows (by clicking button in the example). It deletes the rows just fine but the problem is that I also want to preserve formating of the items when they are moved. The only way is to copy the form
-
Hi, I am using AXIS adapter, Deployment is done correctly, even tested by the url..it was successful. I want to know what all modules are required to add in the soap receiver. mine is proxy soap synch scenario PI 7.1, Any help for solving this proble
-
It is always found my webpage have been redirected to other web pages at its browser background (until I need to check the cookies so that I can be able to know where it have been redirected to at its background (hidden) after browsing websites). For