|
JavaScript - Using 2 Jquery Plugins In One Html Document // Works Fine Individual But Not Together
Hi everybody I have a problem
I want a header that is a slideshow and use lightbox for other images. No I have this all working but not at the same time. If I use this code in this order only the first script that is the lightbox script works. PHP Code: <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/pirobox.js"></script> <script type="text/javascript"> $(document).ready(function(){ $().piroBox({ my_speed: 300, //animation speed bg_alpha: 0.5, //background opacity slideShow : 'true', // true == slideshow on, false == slideshow off slideSpeed : 3, //slideshow close_all : '.piro_close' // add class .piro_overlay(with comma)if you want overlay click close piroBox }); }); </script> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/jquery.cycle.all.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.slideshow').cycle({ fx: 'scrollLeft', speed: 1000, timeout: 7000 }); }); </script> If I use this code so I switched the order only the slideshow works: PHP Code: <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/jquery.cycle.all.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.slideshow').cycle({ fx: 'scrollLeft', speed: 1000, timeout: 7000 }); }); </script> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/pirobox.js"></script> <script type="text/javascript"> $(document).ready(function(){ $().piroBox({ my_speed: 300, //animation speed bg_alpha: 0.5, //background opacity slideShow : 'true', // true == slideshow on, false == slideshow off slideSpeed : 3, //slideshow close_all : '.piro_close' // add class .piro_overlay(with comma)if you want overlay click close piroBox }); }); </script> I also tried this: but then they both did not work PHP Code: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.min.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/pirobox.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.slideshow').cycle({ fx: 'scrollLeft', speed: 1000, timeout: 7000 }); $().piroBox({ my_speed: 300, //animation speed bg_alpha: 0.5, //background opacity slideShow : 'true', // true == slideshow on, false == slideshow off slideSpeed : 3, //slideshow close_all : '.piro_close' // add class .piro_overlay(with comma)if you want overlay click close piroBox }); }); </script> Can you help me solve this problem so they both work? Similar TutorialsHi everybody I have a problem I want a beautiful accordion header on my website and use pirobox that is a lightbox version. I had this problem before but then u used a slideshow instead of this accordion header. If I use this code: only the accordion works Code: <script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/pirobox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$().piroBox({
my_speed: 300, //animation speed
bg_alpha: 0.5, //background opacity
slideShow : 'true', // true == slideshow on, false == slideshow off
slideSpeed : 3, //slideshow
close_all : '.piro_close' // add class .piro_overlay(with comma)if you want overlay click close piroBox
});
});
</script>
<script language="javascript" type="text/javascript" src="js/mootools.js"></script>
<script language="javascript" type="text/javascript" src="js/script.js"></script>
but if I change the order like this: only the pirobox works Code: <script language="javascript" type="text/javascript" src="js/mootools.js"></script>
<script language="javascript" type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/pirobox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$().piroBox({
my_speed: 300, //animation speed
bg_alpha: 0.5, //background opacity
slideShow : 'true', // true == slideshow on, false == slideshow off
slideSpeed : 3, //slideshow
close_all : '.piro_close' // add class .piro_overlay(with comma)if you want overlay click close piroBox
});
});
</script>
Then in the demo version there is this code: Code: <script type="text/javascript">
new LofmCordion( {wapperSelector: $E('#lof-cordion-1 .lof-cordion-wapper') } );
</script>
I don't know where to use it. In the demo version it's in the end, but I tried that and it still didn't work. I also used it immidiately after: Code: <script language="javascript" type="text/javascript" src="js/mootools.js"></script> <script language="javascript" type="text/javascript" src="js/script.js"></script> But it still doesn't work.. Please help me I'm kinda new to javascript and I really want to know how to solve this! thanks Hi! What I really mean is how can you combine the effects from two plugins. Subject line only gives you so much to work with. I'm trying to use the query.corner.js plugin and the gradient (jquery.gradient.js & jquery.dimensions.js) plugins to get a rounded container that has a gradient applied to it. I've tried a few different things like putting a container withing a container and applying one plugin to one and the other to the remainder. No luck! |= Here's the code I'm playing with: Code: <!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
JQuery combo plugins
</title>
<style type="text/css">
div.main { background:#0000FF;height:400px;width:400px;margin:auto;font-size:2em;text-align:center;}
.main p {padding:20px;}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript" src="/js/jquery.gradient.js"></script>
<script type="text/javascript" src="/js/jquery.dimensions.js"></script>
<script type="text/javascript">
$(function(){
$('div.main').corner("20px");
});
</script>
<script type="text/javascript">
$(function() {
$('.gmain').gradient({
from: '0000FF',
to: 'FFFFFF',
direction: 'horizontal',
position: 'verticle',
});
});
</script>
</head>
<body>
<div class="main">
<div class="gmain">
<p>Hi There!</p>
</div>
</div>
</body>
</html>
I attached the js plugins and just changed the extension from js to txt so I could attach them. I did NOT attach the jquery script since I figure that is pretty common. Corner -> jquery.corner.txt Dimension -> jquery.dimensions .txt Gradient -> jquery.gradient.txt Thanks for your help! I could use some help getting the following code to work... As is, it works fine in google chrome, but not at all in Internet Explorer 9. If I paste my code into w3schools "tryit" window, it will work great if it has less than 6 rows, any more and I get a generic "ERROR" on the screen. javascript code Code: <script type="text/javascript">
Number.prototype.formatMoney = function(c, d, t){
var n = this, c = isNaN(c = Math.abs(c)) ? 2 : c, d = d == undefined ? "," : d, t = t == undefined ? "." : t, s = n < 0 ? "-" : "", i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0;
return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};
function getRowCount()
{
return document.getElementById('myTable').rows.length;
}
function changeContent()
{
var lastRow = getRowCount();
var colSum=0;
for(var e=1;e<=lastRow;e++){
var x=document.getElementById('myTable').rows[e].cells;
p1=document.getElementById('p'+e).value;
q1=document.getElementById('q'+e).value;
outint = p1*q1;
var out='<input type="text" value="'+Number(outint).formatMoney(2, '.', ',')+'" disabled="disabled">';
x[3].innerHTML=out;
}
}
</script>
html code Code: <table width="600" border="1"> <tr> <td>Item Name</td> <td>Price per unit</td> <td>Number of Units</td> <td>Total Price</td> </tr> <tr> <td>Item 1</td> <td><input type="text" id="p1" value="8.3930" disabled="disabled"></td> <td><input type="text" id="q1" value="0" onchange="changeContent()"></td> <td><input type="text" id="t1" value="0" disabled="disabled"></td> </tr> <tr> <td>Item 2</td> <td><input type="text" id="p2" value="8.3380" disabled="disabled"></td> <td><input type="text" id="q2" value="0" onchange="changeContent()"></td> <td><input type="text" id="t2" value="0" disabled="disabled"></td> </tr> <tr> <td>Item 3</td> <td><input type="text" id="p3" value="62.3260" disabled="disabled"></td> <td><input type="text" id="q3" value="0" onchange="changeContent()"></td> <td><input type="text" id="t3" value="0" disabled="disabled"></td></tr> <tr> <td>Item 4</td> <td><input type="text" id="p4" value="124.6630" disabled="disabled"></td> <td><input type="text" id="q4" value="0" onchange="changeContent()"></td> <td><input type="text" id="t4" value="0" disabled="disabled"></td></tr> <tr> <td>Item 5</td> <td><input type="text" id="p5" value="1554.4320" disabled="disabled"></td> <td><input type="text" id="q5" value="0" onchange="changeContent()"></td> <td><input type="text" id="t5" value="0" disabled="disabled"></td> </tr> <tr> <td>Item 6</td> <td><input type="text" id="p6" value="2622.6750" disabled="disabled"></td> <td><input type="text" id="q6" value="0" onchange="changeContent()"></td> <td><input type="text" id="t6" value="0" disabled="disabled"></td></tr> <tr> <td>Item 7</td> <td><input type="text" id="p7" value="4748.8650" disabled="disabled"></td> <td><input type="text" id="q7" value="0" onchange="changeContent()"></td> <td><input type="text" id="t7" value="0" disabled="disabled"></td> </tr> <tr> <td>Item 8</td> <td><input type="text" id="p8" value="23087.9330" disabled="disabled"></td> <td><input type="text" id="q8" value="0" onchange="changeContent()"></td> <td><input type="text" id="t8" value="0" disabled="disabled"></td> </tr> </table> *note* the html table is actually made from a php loop pulling items from a database, but for the sake of simpler troubleshooting I made it a static table for posting here. Please help if you can. Thanks Solved
[CODE]<script type="text/javascript" language="Javascript"> <!-- Hide script from older browsers function toggleMenu(currMenu) { if (document.getElementById) { thisMenu = document.getElementById(currMenu).style if (thisMenu.display == "block") { thisMenu.display = "none" } else { thisMenu.display = "block" } return false } else { return true } } // End hiding script --> </script> [CODE] [CODE]<a href="javascript:void(0);" onclick="return toggleMenu('menu3')">Title</a>[CODE] It freezes in Internet Explorer; but works fine in Chrome. Hi all I'm having trouble with my XML news feed being displayed in IE. The JS calls the XML, and displays the relevent data on the homepage. This works beautifully in firefox, but fails completely in IE, what am I doing wrong? The Code for the script follows, and is contained within the <head> of the the HTML; Code:
<script type="text/javascript">
var xmlDoc;
<!--
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else // Internet Explorer 5/6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET","SDS.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;
var x=xmlDoc.getElementsByTagName("NEWS");
i=0;
function display()
{
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue.fontsize("5").fontcolor("white").bold());
date=(x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue.fontsize("2").fontcolor("white").bold());
stitle=(x[i].getElementsByTagName("STITLE")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white").italics());
story=(x[i].getElementsByTagName("STORY")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white"));
pic=(x[i].getElementsByTagName("PIC")[0].childNodes[0].nodeValue);
document.getElementById("picture2").innerHTML="<img src=" + pic + " />";
txt= title + "<br />" + date + "<br />" + stitle + "<br />" + story;
document.getElementById("show").innerHTML=txt;
}
//-->
</script>
In FF, the XML is read, and the corresponding data is entered automatically into the HTML document. Everything works perfectly. In IE, nothing seems to happen, no text is displayed and the image is just the broken link icon. I assume I need to modify my ELSE statement somehow, but have no idea what to do! Unfortunately I cannot provide a link to the webpage, it has not been uploaded as it doesn't work yet. Would really appreciate being told where I've gone wrong so I can correct the code myself. Thanks, Dan I am pretty new to Javascript having a bit of a problem with a website with Google Maps integrated. URL is http://beta.5vanmap.com. JS is in /js/map.js. I have two checkboxes (ccCheck and caccCheck). The basis is when the box is ticked, it overlays a KML onto the map. This is working fine in Chrome, but in FF and IE it doesn't work, IE returns 'ccCheck is Undefined'. The code I am using is in the JS file, the bit it gets stuck at is as follows: Code: document.getElementById('ccCheck').onclick = function() {
if (ccCheck == 1)
{
ccCheck = 0;
ccOverlay.setMap(null);
}
else
{
ccCheck = 1;
ccOverlay.setMap(map);
}
}
If I stick a ccCheck = document.getElementById('ccCheck') within the onclick function (before the if statement), it places the overlay onto the map, but then when I untick the box it just stays there. It's such a simple thing (I think), and must be down to IE being pedantic about declaring the variable properly, the question is how should I be doing this? Thanks and regards Noel Hey guys, so I'm trying to make a single function that will check to make sure the e-mails in both fields match AND to make sure the e-mail is in proper format. Strangely, with both if statements included the form will return no messages at all. If I comment out the if statement checking for proper format, the if statement to check for matching e-mail works just fine. I want this all to be in one function because I'm wanting it to be executed onSubmit with the form. Let me know what you guys think, any help is greatly appreciated: Code: <html>
<head>
<script type="text/javascript">
function verifyEmail()
{
var x = document.forms["emailForm"]["enterEmail"].value;
var y = document.forms["emailForm"]["confirmation"].value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if (x != y) {
var msg = "The email addresses entered do not match, please enter matching email addresses";
document.getElementById("error").innerHTML = msg;
return false;
}
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 > = x.length) {
var msg = "Improper e-mail format";
document.getElementById("error").innerHTML = msg;
return false;
}
else {
return;
}
}
</script>
</head>
<body>
<form name="emailForm" onsubmit="return verifyEmail();" method="post">
E-Mail Address: <input type="text" name="enterEmail">
Confirm E-Mail Address: <input type="text" name="confirmation">
<input type="submit" value="Submit"> <span id="error"></span>
</form>
</body>
</html>
All, I currently have this code to make a post to my database: Code: var $dataString = 'name='+ $name + '&black_white=' + $black_white + '&color=' + $color + '&color=' + $other + '&other_text=' + $text;
$.post("save_edits.php", {image_save_string: $dataString}, function(result) {
$("#multiple_images").hide();
$("#result_success").html("<font color='red'>We've successfully saved your photo edits!</font><br><br>");
$("#image_divs").html(result);
});
Within the result I'm actually recreating the form for them to use if they want. I have a decent amount of jQuery that got initialized when the original page was loaded. Once I get my new form it doesn't work because it wasn't originally included in the page initialization. Is there a way just to call the document.ready function again to have it reinitialize my form elements again? Thanks in advance. I am completely lost here. My page is http://myresearchfinder.com/dev/newchecktest.html The first checkbox should spawn a menu and then the "breast" option could spawn another. It works flawless in IE9. But in FF 3.6 the first checkbox simply does nothing. In Chrome, it spawns the menu, but strangely the checkboxes in the next menu are not clickable. soooo weird. any ideas? this should be standard css/jquery. Overview Well it's been a while since I've been here! Another set of eyes on this would really help me out. I have a simple slider plugin that I wrote in jQuery. One of the parameters that I've written is which element you want to be the container for each slide. In the example I'm going to post, I'm using a list item (li). The Problem Due to lazy coding or whatever, I really made a blunder of things inside my plugin. Throughout the plugin, I'm calling that parameter directly. Because of this, the script context is being applied to EVERY element on the page. So...when I pass in the tag jQuery selector: $('li') as the element selector, it works...but it applies the slider effects to every <li> on the page, not just the container I assign to the plugin. Every time I change $('li') to anything more specific at all (a class, an id, better selector) or I rewrite the plugin to use something more specific (hard-coded), the browser usually crashes due to an unresponsive script. I'm seeing this in Chrome & Firefox. I'm guessing this some kind of weird closure-memory leakage issue that I'm just not ready to handle, or something about the way jQuery and event delegation/binding works. The frustrating thing is that if I do a console.log of the element parameter, and I use something more specific....it returns just fine! The script blows up the page though.... The Code Code: <html>
<head>
<script>
(function($) {
$.fn.extend({
luSlider: function(options) {
var o = $(this);
var defaults = {
element : $(this),
direction: 'left',
next: null,
prev: null,
distance: null,
speed: 'slow',
prevAtEnd : null,
nextAtEnd : null,
prevNextEvent: null,
pagination: false,
elementClick : false,
pager : $(this),
callback: null
};
var options = $.extend(defaults, options);
o.data('curPosition','');
// set cursor for next & previous buttons
if (options.prev != null) options.prev.css('cursor','pointer');
if (options.next != null) options.next.css('cursor','pointer');
// Wrap all of our items in a super large div with hidden overflow
o.find('ul').first().wrap("<div style='width:999999px;' id='luSliderWrapper'></div>");
o.css('overflow','hidden');
// If no distance specified, do it based on the width of a single element
var totalWidth = 0;
var el = options.element;
// Get the total width of all our items
el.parent('ul').css({'padding':'0px','margin':'0px'});
el.each(function() {
totalWidth += $(this).outerWidth(true);
//float our items to the left
el.css({'display':'block','position':'relative','float':'left'});
});
// Get individual item width
var itemWidth = totalWidth / el.size();
//var itemWidth = el.outerWidth(true);
// Get the number of visible items based on our container size
var spaceUsed = $(this).innerWidth() / itemWidth;
var numVisibleItems = Math.floor( spaceUsed );
/*
if (spaceUsed % 1 > 0 ) {
$(this).css({'padding-left':itemWidth/2,'padding-right':itemWidth/2});
}*/
// a variable to store the number of items
var numItems = el.size();
if (options.distance == null) options.distance = itemWidth;
/* Initialize the location */
if ( $(this).data('curPosition') == undefined ) {
$(this).data('curPosition',0);
}
// get the total number of pages
var numPages = Math.ceil(numItems / numVisibleItems);
togglePrevNext();
buildPager();
return this.each(function() {
if (options.elementClick) {
//el.click(function() {
// document.location = $(this).find('a').attr('href');
// });
}
// var cb = options.prevNextEvent;
// Animate Next
options.next.click(function() {
togglePrevNext();
var theEnd = endOfShow();
var howFar = options.distance;
if (!(theEnd)) {
o.data('curPosition', Math.round( (o.data('curPosition')) + 1) );
if (options.pagination) {
howFar *= numVisibleItems;
}
distance = "-=" + howFar;
el.stop(true,true).animate({
"left" : distance
},options.speed);
} else {
// end of show
}
togglePrevNext();
movePager();
handleCallBack();
});
// Animate Previous
options.prev.click(function() {
togglePrevNext();
//var theEnd = endOfShow('prev');
var theEnd = startOfShow();
var howFar = options.distance;
if (!(theEnd)) {
o.data('curPosition', (o.data('curPosition') - 1) );
if (options.pagination) {
howFar *= numVisibleItems;
}
distance = "+=" + howFar;
el.stop(true,true).animate({
"left" : distance
},options.speed);
} else {
// end of show
}
togglePrevNext();
movePager();
handleCallBack();
}); // end prev.click
$('#luSliderPager li').click(function() {
var curPage = $('li.activePage').index();
var newPage = $(this).index();
var direction = (curPage > newPage) ? "+=" : "-=";
var distance = Math.abs(curPage - newPage) * options.distance;
if (options.pagination) {
distance *= numVisibleItems;
}
var newLeft = direction + distance;
// set position
o.data('curPosition', newPage);
movePager();
// animate
el.stop(true,true).animate({
"left" : newLeft
},options.speed);
});
}); // end return
function togglePrevNext() {
(startOfShow() ) ? options.prev.addClass(options.prevAtEnd) : options.prev.removeClass(options.prevAtEnd);
(endOfShow() ) ? options.next.addClass(options.nextAtEnd) : options.next.removeClass(options.nextAtEnd);
}
function handleCallBack() {
if (typeof options.callback == "function") options.callback(o,options);
}
// Determine our boundaries...and if we've reached them
function startOfShow() {
return(o.data('curPosition') <=0 ) ? true : false;
}
function endOfShow() {
if (options.pagination) {
return (o.data('curPosition') >= numPages-1) ? true : false;
} else {
return (o.data('curPosition') >= (numItems - numVisibleItems) ) ? true : false;
}
}
function movePager() {
$('.activePage').removeClass('activePage');
$('.pager').eq(o.data('curPosition')).addClass('activePage');
}
function buildPager() {
/* Custom CSS rule for pager default */
var style = "<style type='text/css'> #luSliderPager li { float: left; display:block; width:13px; height:16px; padding: 0 5px; }";
style += ".pager { background:url('luSlider/images/pager_button-sprite.png') left top no-repeat; cursor:pointer; }.activePage { background-position:left -15px; }</style>";
$(style).appendTo("head");
var numItemsPerPage = o.width() / itemWidth;
var pager = "<ul id='luSliderPager'>";
for (var x = 0; x < numPages; x++ ) {
if (o.data('curPosition') == x) {
pager += "<li class='pager activePage'></li>";
}else {
pager += "<li class='pager'></li>";}
}
pager += "</ul>";
$(pager).appendTo(options.pager);
}
function showPager() {
}
}
});
})(jQuery);
</script>
<script>
$(function() {
/* * * * * * * * Slider Code * * * * * * * */
var myCB = function(o, options) {
// my callback function executed after every transition
//console.log(o.numVisibleItems);
}
$('#sliderContainer').luSlider({
element : $('li'),
next : $('#slide_terms_right'),
prev : $('#slide_terms_left'),
speed : 1000,
prevAtEnd : "slide_terms_prev_disabled",
nextAtEnd : "slide_terms_next_disabled",
elementClick : true,
pagination : true,
pager : "#pager",
callback : myCB
});
)};
</script>
</head>
<body>
<div id="sliderContainer">
<ul id="mySlides">
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>
</div>
</body>
</html>
notes the line var el = options.element; is where I start to have issues. The example I mentioned of hard-coding & console.log that works is this: Code: ...
var el = options.element;
console.log(el); //displays what I'd expect, a jQuery object
el = o.find('li'); // only find li's that are children of the div attached to the plugin
console.log(el); //displays exactly what I'd expect, a jQuery object of JUST the right li's
// if I change el to be this new selector tho...the browser page will crash. 'Unresponsive Script' etc.
...
Please ignore anything hard-coded into the plugin, I tossed several things in for brevity. Also if you have any other code cleanup tips, I'm more than receptive. Also for this example I removed all of the crazy ajax and php and other template-y type stuff. I noticed the problem when I embedded the slider on my page and my top navigation menu (which uses a <ul>) started scrolling off the screen when I clicked on my slider arrows :P THANK YOU SO MUCH, -Celt Hi, I know this works in principle as I have used it successfully on other pages I am using so I must have a typo or some other small mistake, I have gone over and over it, taken things out, put them back in and I can't for the life of me work out where my mistake is. Another pair of eyes would certainly be appreciated. My code is: Code: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#submitnewfestival').click(function(){
var data = $('#publicnewevent').serialize();
$.post ('insertPublicEvent.php',data, function(){
alert("Thank you for adding an event to our calendar.");
$('#publicnewevent').each (function(){
this.reset();
});
});
return false;
});
});
</script>
<form action="" name="publicnewevent" id="publicnewevent" method="post" autocomplete="off" >
<label class="two">Dress Code:</label>
<input type="text" class="input" name="dresscode" id="dresscode" value="Enter Dress Code" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Enter Dress Code':this.value;" size="100" />
<br />
<br />
<input type="button" name="submitnewfestival" id="submitnewfestival" value="Submit" />
</form>
The insertPublicEventForm.php works as I have tested it without JQuery as a direct post. This is a heavily reduced version of the form, but even like this I can not get it to work. Hi, Following this jQuery slideshow tutorial (Usecase 3 sample, about 2/3 down the page, this is the one without thumbnails): http://www.gcmingati.net/wordpress/w...vwt/index.html I constructed the slideshow: http://backstageweb.net/Salon/slideshowcode.htm ...which works perfectly in browser view locally (FF and IE). When uploaded to the server, however, I've got a static list of photos as you can see. Can someone shed some light on what the problem is? All relevant files are attached (I changed the images to simple colors to get the file size within the attachment limit). Thanks. John Hi, I have a form that I am submitting using JQuery, if I copy and paste the form into my main page, everything works fine. If I try to call the form in a separate page to onload none of the buttons work. Is there away around this? Not sure if providing my script helps or not, but just in case here it: Code: <!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">
<title>Messages</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#submitNewSend, #submitNewSend2, #submitNewSave, #submitNewSave2').click(function(){
var btn = $(this).attr('id');
if(btn == 'submitNewSend'){
file = 'insertMessage.php';
Msg = 'Your message has been sent';
} else if(btn == 'submitNewSend2'){
file = 'insertMessage.php';
Msg = 'Your message has been sent';
} else if (btn == 'submitNewSave'){
file = 'insertSaveMessage.php';
Msg = 'Your message has been saved';
} else if (btn == 'submitNewSave2'){
file = 'insertSaveMessage.php';
Msg = 'Your message has been saved';
}
var data = $('#MessageNew').serialize();
$.post (file,data, function(){
alert(Msg);
$('#MessageNew').each (function(){
this.reset();
});
});
return false;
});
});
</script>
<script type="text/javascript">
function loadXMLDoc(File,ID){
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST",File,true);
xmlhttp.send();
}
</script>
<head>
<body onload="loadXMLDoc('getloadCompose.php','txtHintCompose')">
<br />
<br />
<div id="txtHintCompose"></div>
</form>
</body>
</html>
And the getloadCompose.php is: Code:
<form action="" method="post" name="MessageNew" id="MessageNew" autocomplete="OFF">
<table id="new" width="60%">
<tr>
<th>Compose Message</th>
</tr>
<tr>
<td class="first">
<input type="button" class="button3" name="submitNewSend2" id="submitNewSend2" value="Send">
<input type="button" class="button3" name="submitNewSave2" id="submitNewSave2" value="Save">
<input type="button" class="button3" name="submitNewCancel" value="Cancel" onclick="loadXMLDocRefresh('getloadInbox.php','txtHintMessage')" />
</td>
</tr>
<tr>
<td>
<br />
<label class="two"><b>To:</b></label><input type="text" class="input" name="to" id="to" value=""><input type="text" class="input" name="recipient" id="recipient" value="" onkeyup="showHint(this.value, 'getEmailName.php','txtHintEmailTo')" size="70" /><br /><br />
<div id="txtHintEmailTo"></div>
</td>
</tr>
<tr>
<td>
<label class="two"><b>Subject:</b></label><input type="text" class="input" name="subject" id="subject" value="enter subject" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'enter subject':this.value;" size="70" /><br /><br />
</td>
</tr>
<tr>
<td>
<label class="two"><b>Message: </b></label><div class="scroll"><textarea rows="10" cols="75" class="input" name="messsage" id="message">Enter Message</textarea></div><br /><br /><br />
</td>
</tr>
<tr>
<td class="first">
<input type="button" class="button3" name="submitNewSend" id="submitNewSend" value="Send">
<input type="button" class="button3" name="submitNewSave" id="submitNewSave" value="Save">
<input type="button" class="button3" name="submitNewCancel" value="Cancel" onclick="loadXMLDocRefresh('getloadInbox.php','txtHintMessage')" />
</td>
</tr>
</table>
</form>
I know I have buttons doing the same function,there is an ease of use reason for it. I can put everything on my main page if necessary, but it wouldn't really be doing exactly what I want it to do. Hey all, 1) When clicking on a list in an accordion, it should change the quicktime movie playing in a main window area. It works in firefox but not in safari. The variable imgTitle holds the expected output (e.g. '../images/Intro-1.mov'). It changes the src attribute of the embed tag. This change works in Firefox where the new movie plays on click. However, when clicking the list item in safari, nothing happens. 2) There is a problem in firefox as well in that the movie overlays everything else on page, even though it should be behind the text. Positioning would be tedious given that there's many nested elements and I would have to set relative positioning to the entire page. Any reason for this behavior of embed tags? Code: $(".image_thumb ul li ul li").click(function(){
var imgTitle = $(this).find('a').attr("href");
var imgDesc = $(this).find('.block').html();
var imgDescHeight = $(".main_image").find('.block').height();
if ($(this).is(".active")) {
return false;
} else {
console.log(imgTitle);
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
$(".main_image embed").attr({ src: imgTitle});
});
}
$(".image_thumb ul li ul li").removeClass('active');
$(this).addClass('active');
return false;
}) .hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
Thanks for response. Hi very good site I do a query is as follows I have this theme using jQuery and I've included a Featured Content Gallery plugin called the problem is that I have a conflict with the plugin and does not show the slider post Then I discovered that removing this line of code <? php include (TEMPLATEPATH. '/ includes / scripts.php');?> the footer if it shows the slider post but let me operate the menus, using it as the call of scritp any solution? this is the theme http://su-paginaweb.com/website/Polished2.zip thanks in advance Hi All, I am a novice in javascript. I am trying to use two plugins in a same page. I have seen many articles, and tutorial for debugging the problems related to this. I have also seen the messages on this board which discuss the same issue. However, my knowledge in javascript is very much limited and I could not resolve my problem. I am using two jquery plugins - a) galleria, and b) stepcarousel. I have got them to work separately, tweaked the CSS, and other things to fit them on the webpage, added automatic slideshow in galleria. Now, I am trying to run them simulataneously on the same page. But, it is not working. I have tried to use the jQuery.noConflict (); tag but after using that, the stepcarousel is working but the galleria is not working. Here is the part of the javascript included in the header of my website. Code: <script type="text/javascript" src="../javascripts/jquery.min.js"></script>
<script type="text/javascript" src="../javascripts/jquery.timers-1.2.js"></script>
<script type="text/javascript" src="../javascripts/jquery.galleria.js"></script>
<script type="text/javascript">
jQuery.noConflict ();
var t;
var timer_is_on=0;
var timer=2000;
function startSliding()
{
$.galleria.next();
t=window.setTimeout("startSliding()",timer);
}
function showSlide()
{
if (!timer_is_on)
{
timer_is_on=1;
startSliding();
}
}
function stopSlide()
{
window.clearTimeout(t);
timer_is_on=0;
}
$(document).ready(function(){
$('.gallery_spandan').addClass('gallery'); // adds new class name to maintain degradability
$('ul.gallery').galleria({
history : false, // activates the history object for bookmarking, back-button etc.
clickNext : true, // helper for making the image clickable
insert : '#main_image', // the containing selector for our main image
onImage : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
// fade in the image + caption
image.css('display','none').fadeIn(400);
caption.css('display','none').fadeIn(400);
// fetch the thumbnail container
var _li = thumb.parents('li');
// fade out inactive thumbnail
_li.siblings().children('img.selected').fadeTo(400,0.3);
// fade in active thumbnail
thumb.fadeTo('fast',1).addClass('selected');
// add a title for the clickable image
image.attr('title','Next image >>');
},
onThumb : function(thumb) { // thumbnail effects goes here
// fetch the thumbnail container
var _li = thumb.parents('li');
// if thumbnail is active, fade all the way.
var _fadeTo = _li.is('.active') ? '1' : '0.3';
// fade in the thumbnail when finnished loading
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
// hover effects
thumb.hover(
function() { thumb.fadeTo('fast',1); },
function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
);
}
});
});
</script>
<script type="text/javascript" src="stepcarousel.js"></script>
<script type="text/javascript">
stepcarousel.setup({
galleryid: 'albumcovers_gallery', //id of carousel DIV
beltclass: 'albumcovers_belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'albumcovers_panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['images/prev_left.gif', -20, 20], rightnav: ['images/next_right.gif', 20, 20]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
});
</script>
The step carousel code also uses the jQuery.noConflict ---> Code: jQuery.noConflict();
var stepcarousel={
ajaxloadingmsg: '<div style="margin: 1em; font-weight: bold"><img src="ajaxloadr.gif" style="vertical-align: middle" /> Fetching Content. Please wait...</div>', //customize HTML to show while fetching Ajax content
defaultbuttonsfade: 0.4, //Fade degree for disabled nav buttons (0=completely transparent, 1=completely opaque)
configholder: {},
getCSSValue:function(val){ //Returns either 0 (if val contains 'auto') or val as an integer
return (val=="auto")? 0 : parseInt(val)
},
...
Please help me to debug this problem. I am really stuck. Edit: If you would like to view the webpage where I am trying to do this, please visit he Step Carousel working, Galleria not working. And here, Galleria working separately Thanks in advance, banskt. hi guys, im really new to javascript. Can someone tell me how to open a html file using javascript. THanks I need to save an HTML page to Word using JavaScript. Any ideas on that? I have found some script on-line but all of them use the "Save As" procedure which only allows to save in txt and html format. I need it to be in Word. Thanks! I posted before but have read that this may be more accurate and help my answers. I would like dome help in explaining how I might be able to manipulate this javascript section to lay it out in html and or using css. Can this be done via this part of the script or is there something I can wrap around it? Thanks document.write("<SCRIPT type='text/JavaScript' SRC='http://images.compucars.co.uk/scripts/stockv2.asp?notMakeID="+QueryString('notMakeID')+"&makeID="+QueryString('makeID')+"&searchURL="+sear chURL+"&rspage="+QueryString('rspage')+"&ID="+QueryString('ID')+"&intMax="+QueryString('intMax')+"&i ntMin="+QueryString('intMin')+"&bodyType="+QueryString('bodyType')+"&fuelType="+QueryString('fuelTyp e')+"&maxPerPage="+maxPerPage+"&memberID="+memberID+"&align="+strAlign+"&URL="+escape(window.locatio n.protocol + '//' + window.location.host + window.location.pathname)+"'></SCR"+"IPT>"); |
|||||||