|
JavaScript - Using 2 Jquery Plugins In One Html Document // Accordion And Pirobox=lightbox
Hi 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 Similar TutorialsHi 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? 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! Hello, i would like to advise me on sthg. I have built a website using a)MySQL b)HTML c)PHP and d)Javascript. My website consists of basic html pages/templates which have links to the left and point to another templates/pages. For example, i have 4 templates in my site 1st template is for: News 2nd : Library 3nd : Articles 4th : E-shop Each template consists of 1. a small menu with links,every link points to another page 2.space for the content/text of the html page 3. a form for searching in the website using php and a mysql database. Well, i'm thinking of adding some animation in my website using the jquery library.Let's say we have an accordion which has 4 choices and when the user clicks on the first choice the 1st template(NEWS) appears inside the slide of accordion,loads in the same slide, not in a new page!!!This is what i would like to do, place in each slide of the accordion one of my templates. CAn this be done??? Which are the disadvantages of adding in each slide of the accordion a different template for my site and remain in the same slide when the user clicks in one of the links of the template??? Consider that i'm using dynamic content and not static, i have a MySQL database behind. Also,as i have seen in most examples the options of accordion usually contain an image, a content, a text or links which open in a new window or tab not inside the slide!!!These links do not load in the same slide!!i would like to have a template which loads in the slide each time the user clicks on a link of it. CAn this be done?? I would be glad if sm could advise me! Thanks, in advance!!! I have a request for a lightbox that has the image which expands to fit the height or width, and also displays the thumbnails of the previous and next image. They want it to behave similar to this: http://www.karamann.com/#/interiors/...lakeshore/zoom Can someone point me to either a tutorial or an existing script? I've found dozens of lightboxes, but none with the thumbnails. I do have a lightbox that has static prev/next buttons. Is there any way I can have the script replace those buttons with thumbnails? Would this be the way to go? Hi all I have a page on a website I am creating that has both a lightbox rel link and a quick calculator to work out a size of a product. Here are the links to the java files I am using: <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> <link rel="stylesheet" href="css/jquery.lightbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="scripts/jquery.js"></script> <script type="text/javascript" src="scripts/jquery.lightbox.js"></script> <script type="text/javascript" src="scripts/swfobject.js"></script> <script type="text/javascript" src="scripts/sandstone.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="scripts/prototype.js" type="text/javascript"></script> <script src="scripts/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="scripts/lightbox.js" type="text/javascript"></script> Here is the actual lightbox link: <a href="testimage.jpg" rel="lightbox" ><img src="testimage.jpg" > And finally the calculator: <form method="post" action=""> <table width="220" border="0" cellpadding="2" cellspacing="0"> <tr align="left"><td width="87" height="30" class="meter-calc-text">Width (m)</td> <td width="117" height="30" align="left"> <input name="width" type="text" id="calc-width" size="6" /></td> </tr> <tr align="left"><td height="30" class="meter-calc-text">Length (m)</td> <td height="30" align="left"><input name="length" type="text" id="calc-length" size="6" /></td> </tr> <tr align="left"><td height="40" colspan="2"> <select name="packcontents" class="meter-calc-dropdown" id="calc-packcontents" onchange="updateProduct(this.options[this.selectedIndex].id)" style="width:140px;"> <option value="0" selected class="meter-calc-text">Product Select</option> <option value="1" selected class="meter-calc-text">1</option> <option value="2" selected class="meter-calc-text">2</option> </select> <input type="button" name="go" value="Go" id="calc-trigger" class="calc-go" /> </td> </tr> <tr> </tr> </table> <table width="220" border="0" cellpadding="2" cellspacing="0"> <tr> <td width="83" height="30" class="meter-calc-text">You Requi </td> <td width="121" height="30" align="left" class="product-cell-info-table-text"> <input name="meters" type="text" class="small" id="calc-meters" value="" size="5" /> <span class="meter-calc-text">m2</span> </td> </tr> <tr> <td height="30" class="meter-calc-text"> </td> <td height="30" align="left" class="product-cell-info-table-text"> <input name="packs" type="text" class="small" id="calc-packs" value="" size="5" /> <span class="meter-calc-text">Packs</span> </td> </tr> </table> <input type="hidden" name="productid" id="productid" value=""> <div id="addit" style="display:none"> <a name="addit" class="meter-calc-text" onclick="location.href='basket.php?action=add&id='+$('#productid').val()+'&quantity='+$('#calc-packs').val()+'&return=http://www.cq-designs.co.uk/clientarea/sandstonecentre/clientarea/sandstonecentre/product.php?category=2&type=&colour=1'">Add To Cart</a> </div> </form> The problem I am having is that they both don't work together. If I comment out the lightbox javascript the calcukator works but not the lightbox and Vice Versa! Please help Thanks Pete Hello again, just noticed that the Jquery slider I installed appears to be stopping my lightbox from working. Here's my head code: Code: <head>
<title>Design Prohibited - James Clarke</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="shortcut icon" href="favicon.ico">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
</head>
Is there any way I can use them both together? Please see URL: http://www.freedommd.com/Freedom10/index.shtml 1. On the navbar, click on "Demos > EMR Features" (using jQuery for the navbar) 2. On the "FreeDOM EMR" page, in addition to the jQuery navbar, I am using Lightbox to display images (click on the "dashboard" thumbnail). There is a conflict of some sort here between scripts. Code: <!--jquery menu code directly below--> <script type="text/javascript" language="javascript" src="js/jquery.js"></script> <script type="text/javascript" language="javascript" src="js/navmenus.js"></script> <!--end jquery nav--> <!--Lightbox code directly below--> <script type="text/javascript" src="js-lightbox/prototype.js"></script> <script type="text/javascript" src="js-lightbox/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js-lightbox/lightbox.js"></script> <!--end Lightbox --> As is, on this page, my Lightbox code works fine, but my navbar will not expand the sub menus. If I remove the Lightbox code, then the navbar works fine. I'd really like for them both to work. : ) I tried putting the .js in different directories, separating the Lightbox code from the jQuery code but that didn't help. All .js files are attached. Much appreciated if someone can tell me what I need to do. Thanks, John I'm using this Lightbox plugin with jQuery and wanted to know if there's a way to place a link inside the lightbox caption or anywhere inside. Or is there another lightbox plugin that can do this?
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. 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! Hi, I was wondering if it's possible to capture a piece of HTML using XPath where the source is a sting rather than a document. I know how to use xPath and document.evaluate() as I've used it before on actual web pages - I just dont understand how to run it on a string of HTML. E.g. if I have this string: var stg = "<div>The best-laid schemes o' <span>mice</span> an' men</div>"; I'd like to convert this string into something that I can run the document.evaluate() on so that I can find the contents of the SPAN element (without loading the string into a real browser page). 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>"); Hello guys, I was wondering if someone could help me out. I am trying to create an image gallery in javascript without the use of jquery, mootools or any other library. The tutorials out there and even the javascript books I own all use jquery or other library. I currently have some thumbnails and when clicked, they should display a bigger image in a selected space. The image gallery is to be looped and to start automatically while being controlled by buttons or thumbnails. What is the best way to go about this, please bear in mind that I am quite new javascript itself. Thanks Vou Dear All: My apologies - this is probably something that comes up time and time again. However, I was wondering - I realize there does not seem to be a "standard" way to do this (without additional libraries), but is there any "hacky" method that can be used to get XPath support in IE? What I mean is for parsing the loaded HTML document. Thank you Misha Hi! how do I include .html files inside a document.write()? Like document.write('include top.html' "hello!" 'include bottom.html') or something. I searched for it, and found this: <!--#include file="top.html" --> But it doesn't work for me. What is wrong? I would be very happy if someone could help me |
|||||||