JavaScript - Jquery, How Do Or Can You Combine Plugins
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! 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 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 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 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 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 how do i make a wordpress website with tabs to different sub-sections without changing pages, its almost seems like an iframe... example: http://www.alexa.com/siteinfo/google.com [look at the tabbing, and how it doesn't change URL] how can i make it like this using wordpress? is there a plugin? also, i need something that will make an iframe for me [of another website] but make it impossible to click or right-click, BUT can scroll. is there some type of plugin for wordpress that can help me do that? [so i can customize the template of the iframe and the page the holds the iframe] thanks!! (: So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes: Id be very gratefull if someone would help me out with this one. All related code can be found bellow (the ones that should be needed anyways): This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked Code: $(document).ready(function(){ //References var change = $("#menu li a"); var loading = $("#loading"); var content = $("#content"); //Manage click events change.click(function(){ //show the loading bar showLoading(); //load selected section if(this.id == "home") { change.load(this.className='current-page'); content.slideUp(); content.load("pages/index.php", hideLoading); content.slideDown(); } else if(this.id == "secondpage") { change.load(this.className='current-page'); content.slideUp(); content.load("pages/secondpage.php", hideLoading); content.slideDown(); } else { //hide loading bar if there is no selected section hideLoading(); } }); //show loading bar function showLoading(){ loading .css({visibility:"visible"}) .css({opacity:"1"}) .css({display:"block"}) ; } //hide loading bar function hideLoading(){ loading.fadeTo(1000, 0); }; }); Heres the structure of the menu/content Code: <ul id="menu"> <li><a id="home" class="normal" href="#Home"></a></li> <li><a id="secondpage" class="normal" href="#Secondpage"></a></li> </ul> <div id="content"> <ul id="sec-menu"> <li><a id="link1" class="normal" href="#">Link1</a></li> <li><a id="link2" class="normal" href="#">Link2</a></li> </ul> </div> Heres the code that jquery history plugin uses in demo for ajax Code: jQuery(document).ready(function($) { function load(num) { $('#content').load(num +".html"); } $.history.init(function(url) { load(url == "" ? "1" : url); }); $('#ajax-links a').live('click', function(e) { var url = $(this).attr('href'); url = url.replace(/^.*#/, ''); $.history.load(url); return false; }); }); Is there a way to check for A , else check for B? The code in Red is what I need to put together. [This is an event calendar. problem is it double prints the event dates.Original problem is here. http://www.codingforums.com/showthread.php?t=186671] Thanks for looking! Code: /* Function List: yearly(calendarDay) Creates the yearly calendar, highlighting the date specified in the calendarDay parameter. writeMonthCell(calendarDay, currentTime) Writes the yearly table cell containing a monthly calendar. writeMonth(calendarDay, currentTime) Creates the calendar table for the month specified in the calendarDay parameter. The currentTime parameter stores the time value of the current date. writeMonthTitle(calendarDay) Writes the month name in the monthly table writeDayNames() Writes the weekday title rows in the calendar table daysInMonth(calendarDay) Returns the number of days in the month from calendarDay writeMonthDays(calendarDay, currentTime) Writes the daily rows in the monthly table, highlighting the date specified in the currentTime parameter. writeDay(weekDay, dayCount, calendarDay, currentTime) Write the opening and close table row tags and the table cell tag for an individual day in the calendar. */ function yearly(calDate) { if (calDate == null) calendarDay=new Date(); else calendarDay = new Date(calDate); var currentTime = calendarDay.getTime(); var thisYear = calendarDay.getFullYear(); document.write("<table id='yearly_table'>"); document.write("<tr><th id='yearly_title' colspan='4'>"+thisYear+"</th></tr>"); var semMonth=calendarDay.getMonth(); var monthNum; if (semMonth <6) { monthNum = -1 } else { monthNum = 5; } for (var i=1; i<=2; i++) { document.write("<tr>"); for (var j=1; j<=3; j++) { monthNum++; calendarDay.setDate(1); calendarDay.setMonth(monthNum); writeMonthCell(calendarDay, currentTime); } document.write("</tr>"); } document.write("</table>"); } function writeMonthCell(calendarDay, currentTime) { document.write("<td class='yearly_months'>"); writeMonth(calendarDay, currentTime); document.write("</td>"); } function writeMonth(calendarDay, currentTime) { document.write("<table class='monthly_table'>"); writeMonthTitle(calendarDay); writeDayNames() writeMonthDays(calendarDay, currentTime); document.write("</table>"); } function writeMonthTitle(calendarDay) { var monthName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"); var thisMonth=calendarDay.getMonth(); document.write("<tr>"); document.write("<th class='monthly_title' colspan='7'>"); document.write(monthName[thisMonth]); document.write("</th>"); document.write("</tr>"); } function writeDayNames() { var dayName = new Array("S", "M", "T", "W", "R", "F", "S"); document.write("<tr>"); for (var i=0;i<dayName.length;i++) { document.write("<th class='monthly_weekdays'>"+dayName[i]+"</th>"); } document.write("</tr>"); } function daysInMonth(calendarDay) { var thisYear = calendarDay.getFullYear(); var thisMonth = calendarDay.getMonth(); var dayCount = new Array(31,28,31,30,31,30,31,31,30,31,30,31); if ((thisYear % 4 == 0)&&((thisYear % 100 !=0) || (thisYear % 400 == 0))) { dayCount[1] = 29; } return dayCount[thisMonth]; } function writeMonthDays(calendarDay, currentTime) { var weekDay = calendarDay.getDay(); document.write("<tr>"); for (var i=0; i < weekDay; i++) { document.write("<td></td>"); } var totalDays = daysInMonth(calendarDay); for (var dayCount=1; dayCount<=totalDays; dayCount++) { calendarDay.setDate(dayCount); weekDay = calendarDay.getDay(); writeDay(weekDay, dayCount, calendarDay, currentTime); } document.write("</tr>"); } function writeDay(weekDay, dayCount, calendarDay, currentTime) { //my var lines .ID and events. var ID = ( calendarDay.getFullYear() * 10000 + calendarDay.getMonth() * 100 + 100 + calendarDay.getDate() ); // This is where you put in the appointments. follow pattern [YYYYMMDD,"start time - End time : message"], var events = [ [20100130,"4pm - 10 pm : Beer fest"], [20100320,"10am - 6 pm : the next fest"], [20100425,"8am - 2 pm : the other fest"], ]; //end of events // end of my var declaration if (weekDay == 0) document.write("<tr>"); // this code is to write my buggy events. IDs are fine.events are the bug //my for line for(var sep = 0; sep < events.length; sep++) { //end of my for line // writes the events to the date if (events[sep][0] == ID) { document.write("<td id="+ID+" class='monthly_dates'><div class='eventday' title='" + events[sep][1] + "'>"+dayCount+"</div></td>"); } } // my } for, for var sep //end of my buggy lines //normal day writing if (calendarDay.getTime() == currentTime) { document.write("<td class='monthly_dates' id='today'>"+dayCount+"</td>"); } else { document.write("<td id="+ID+" class='monthly_dates'>"+dayCount+"</td>"); } if (weekDay == 6) document.write("</tr>"); } I have this java function that will show the div based on whatever u select. Each div is a different set of form fields. My problem is if you change 1/2 and go to the other selection, it'll submit BOTH. not just the one you currently switched to. So if i can modify this fucntion to add the ability to either clear the divs not being used (will a clear'd div still submit data?), or reset.fields (would that do it?). I am new to javascript, thanks in advance guys Here is my code for the change div's: Quote: <script type="text/javascript"> $(document).ready(function(){ $('#3_form').hide(); $('#4_form').hide(); $('#axd_form').hide(); $('#ht_form').hide(); $("#thechoices").change(function(){ if(this.value == 'all') {$("#boxes").children().show();} else {$("#" + this.value).show().siblings().hide();} }); $("#thechoices").change(); }); </script> And here is the code to clear the div: Quote: <script type="text/javascript"> function clearDiv() { document.getElementById("4_form").innerHTML=""; } </script> So if #3_form --> clear all other div's. (4_form, axd_form, and ht_form) I just need to clear the div that isnt currently selected - idk what the best practice is for that. It must not allow other fields in other div's to be submitted in the form. So basically just clear the fields. would clearing a div do that? thanks! hi, i have a jquery problem... this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above: (it is not working the tab actions, the slideout works...) http://www.benjaminsterling.com/wp-c...es/sidetab.htm the javascript code is the above: PHP Code: var jqsideTabs; var tabs, h = 50, r = 0,ra = 0; $(document) .ready(function(){ jqsideTabs = $('#sideTabs').addClass('closed'); tabs = jqsideTabs .find('.tab h3') .clone() .appendTo(jqsideTabs) .each(function(i){ var that = $(this), cls = '',ow,newThis, newEl; if( i == 0 ) cls = ' active'; newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>'); that.replaceWith(newEl); ow = newEl.outerWidth(); if( i == 0 ) ra = ow; else r = ow; h = newEl.css({'top':h , 'right': -ow }).height() + h; newThis = newEl.get(0); newThis.jq = newEl; newThis.i = i; newEl.click(function(){ var el = this.jq; if( jqsideTabs.hasClass( 'closed' ) ){ jqsideTabs.removeClass('closed'); } else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){ jqsideTabs.addClass('closed'); } el .siblings() .removeClass('active') .css({'right': -r }) .end() .addClass('active') .css({'right': -ra }); tabs.eq( this.i ).show().siblings('.tab').hide(); return false; }); }) .end() .parent() .eq(0) .addClass('active') .end() .filter(':not(:eq(0))') .hide() .end(); jqsideTabs.bind("mouseleave",function(){ jqsideTabs .animate({left:-310}, 'fast', function(){ jqsideTabs.addClass('closed').removeAttr('style'); }); }); }); and the html file is: [HTML] <div id="sideTabs"> <div class="tab"> <h3>Tab 1</h3> <div class="gut"> <p>Some text</p> </div> </div> <div class="tab"> <h3>Tab 2</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> <div class="tab"> <h3>Tab 3</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> </div> [/HTML] the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content).... can anyone help...please..... Hi, well i have heard alot about combining script but never did that as i always had doubts about the proper method of doing it, as these days following standards matters alot for SEO. I want to combine scripts together into one file, lets take an example i will provide 3 scripts 1- Code: <script type='text/javascript'> $(document).ready(function () { // find the elements to be eased and hook the hover event $('div.jimgMenu ul li a').hover(function() { // if the element is currently being animated if ($(this).is(':animated')) { $(this).addClass("active").stop().animate({width: "310px"}, {duration: 450, easing: "easeOutQuad", complete: "callback"}); } else { // ease in quickly $(this).addClass("active").stop().animate({width: "310px"}, {duration: 400, easing: "easeOutQuad", complete: "callback"}); } }, function () { // on hovering out, ease the element out if ($(this).is(':animated')) { $(this).removeClass("active").stop().animate({width: "83.7px"}, {duration: 400, easing: "easeInOutQuad", complete: "callback"}) } else { // ease out slowly $(this).removeClass("active").stop(':animated').animate({width: "83.7px"}, {duration: 450, easing: "easeInOutQuad", complete: "callback"}); } }); }); </script> 2- Code: <script type="text/javascript"> (function($) { $.fn.sorted = function(customOptions) { var options = { reversed: false, by: function(a) { return a.text(); } }; $.extend(options, customOptions); $data = $(this); arr = $data.get(); arr.sort(function(a, b) { var valA = options.by($(a)); var valB = options.by($(b)); if (options.reversed) { return (valA < valB) ? 1 : (valA > valB) ? -1 : 0; } else { return (valA < valB) ? -1 : (valA > valB) ? 1 : 0; } }); return $(arr); }; })(jQuery); $(function() { var read_button = function(class_names) { var r = { selected: false, type: 0 }; for (var i=0; i < class_names.length; i++) { if (class_names[i].indexOf('selected-') == 0) { r.selected = true; } if (class_names[i].indexOf('segment-') == 0) { r.segment = class_names[i].split('-')[1]; } }; return r; }; var determine_sort = function($buttons) { var $selected = $buttons.parent().filter('[class*="selected-"]'); return $selected.find('a').attr('data-value'); }; var determine_kind = function($buttons) { var $selected = $buttons.parent().filter('[class*="selected-"]'); return $selected.find('a').attr('data-value'); }; var $preferences = { duration: 800, easing: 'easeInOutQuad', adjustHeight: 'dynamic' }; var $list = $('#data'); var $data = $list.clone(); var $controls = $('ul#gamecategories ul'); $controls.each(function(i) { var $control = $(this); var $buttons = $control.find('a'); $buttons.bind('click', function(e) { var $button = $(this); var $button_container = $button.parent(); var button_properties = read_button($button_container.attr('class').split(' ')); var selected = button_properties.selected; var button_segment = button_properties.segment; if (!selected) { $buttons.parent().removeClass('selected-0').removeClass('selected-1').removeClass('selected-2'); $button_container.addClass('selected-' + button_segment); var sorting_type = determine_sort($controls.eq(1).find('a')); var sorting_kind = determine_kind($controls.eq(0).find('a')); if (sorting_kind == 'all') { var $filtered_data = $data.find('li'); } else { var $filtered_data = $data.find('li.' + sorting_kind); } if (sorting_type == 'size') { var $sorted_data = $filtered_data.sorted({ by: function(v) { return parseFloat($(v).find('span').text()); } }); } else { var $sorted_data = $filtered_data.sorted({ by: function(v) { return $(v).find('strong').text().toLowerCase(); } }); } $list.quicksand($sorted_data, $preferences, function () { $(this).tooltip (); } ); } e.preventDefault(); }); }); var high_performance = true; var $performance_container = $('#performance-toggle'); var $original_html = $performance_container.html(); $performance_container.find('a').live('click', function(e) { if (high_performance) { $preferences.useScaling = false; $performance_container.html('CSS3 scaling turned off. Try the demo again. <a href="#toggle">Reverse</a>.'); high_performance = false; } else { $preferences.useScaling = true; $performance_container.html($original_html); high_performance = true; } e.preventDefault(); }); }); </script> 3- Code: <script type='text/javascript'> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-15016456-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> I want to add them to one file and then yes i am going to make it external. Here i have a few questions: 1- Can any type of scripts be added together? 2- Is there a general rule of doing this combination of scripts (e-g remove the <script> tags from start and end of all then give spaces between each and you are done). 3- Should one use JS compressors? if yes, what are advantages and disadvantages of doing so? I asked a few question together as i don't want to spam this forum ^_^ anyway these all question are related to my topic i keep getting the error GET http://code.jquery.com/jquery.min.map net::ERR_TOO_MANY_REDIRECTS & Failed to load resource: net::ERR_TOO_MANY_REDIRECTS when i load my page...and the havascript doesn't work properly on ym page...how do i resolve this. thanx in advance Note: major noobage here I'm sure... but can't seem to figure this out... How do I make these three functions into one script? Much love if you can help! Code: <script type="text/javascript"> setTimeout('yourFunction();', 2500); function yourFunction(){ document.getElementById('hide').style.display='block'; } </script> <script type="text/javascript"> setTimeout('yourFunction2();', 8000); function yourFunction2(){ document.getElementById('hide').style.position='fixed'; } </script> <script type="text/javascript"> setTimeout('yourFunction3();', 8500); function yourFunction3(){ document.getElementById('hide').style.margin='0 -310px'; } </script> <script type="text/javascript"> setTimeout('yourFunction4();', 15500); function yourFunction4(){ document.getElementById('hide').style.margin='0 610px'; } </script> Hi! I'm trying to cmbine 4 .js file into one unique file. I'm getting some troubles because jquery.singlePageNav.js seems not to work. Can someone help me to combine these 4 files? Thank you js.rar I am new to using Javascript. Can someone help me combine these two codes? I can't get it to work. [code] body {background-color: #FFFFee;} .c { position: absolute; font-size: 1px; background:red; height: 2px; width: 2px; } .d { position: absolute; font-size: 1px; background:blue; height: 2px; width: 2px; } </style> </head> <body> <script language="javascript"> var i,y,x,y1; for (i=1; i<600; i++) { y=150-100*Math.sin(i/50); y1=150-100*Math.cos(i/50); x=i+50; document.write("<span class='c' style='left:"+x+";top:"+y+";'></span>"); document.write("<span class='d' style='left:"+x+";top:"+y1+";'></span>"); } [code] with this one. [code] .moveimage { position:absolute; left:20; top:50; z-index:2; } </style> <script language="JavaScript"> var fishLeft = 20; var imgWidth = 106; function moveFish() { var elem = document.getElementById("myDiv"); fishLeft+=4; if(fishLeft > document.body.clientWidth + (imgWidth / 2)) fishLeft = imgWidth / 2; elem.style.left = fishLeft; window.status= fishLeft ; setTimeout("moveFish()", 100); } </script> <title></title> </head> <body> <br> <div id="myDiv" class="moveImage"><img src="fish1.gif"></div> <br><br><br><br><br><br><br><br><br> <input type="button" value="Move Fish" onClick="moveFish()" ID="Button1" NAME="Button1"> [code] Hi, I have a form where dob is generated using 3 select boxes, 1 for day, month and year. My output needs to be in the form dob=dd-mm-yyyy rather than day=dd, month=mm and year=yyyy. It has been suggested that i do the following: "On submit button click, use JS to create a hidden input (Q5) in the form and assign its value, then disable the day, month, and year fields so they are not submitted." Does anyone know how to do this? My site loads too many javascript files and it takes much time to load page. I would like to reduce the number of http requests and combine all javascript files into one file. What is the best way for it? Will it work if I just copy whole code from all files and paste into one or anything else is needed? Thanks I have these two codes which both involve sockets. I can't figure out how to combine the smtp code into my first code. If you look at the first code where it prints out "you are at picture A" it is here were i want to be able to send an email. I am quite puzzled as how to combine the two codes to make it work. Any help would be greatly appreciated. First Code: Code: import java.io.*; import java.net.*; import java.util.Scanner; import java.io.File; public class Combo2 { public static void main(String[] args) throws IOException { Socket kkSocket = null; PrintWriter out = null; BufferedReader in = null; File yourFile = new File("outs.txt"); yourFile.delete(); try { kkSocket = new Socket("192.168.33.39", 12000); out = new PrintWriter(kkSocket.getOutputStream(), true); in = new BufferedReader(new InputStreamReader(kkSocket.getInputStream())); } catch (UnknownHostException e) { System.err.println("Don't know about host: Adam."); System.exit(1); } catch (IOException e) { System.err.println("Couldn't get I/O for the connection to: Adam."); System.exit(1); } BufferedReader stdIn = new BufferedReader(new InputStreamReader(System.in)); String fromServer; String fromUser; while ((fromServer = in.readLine()) != null) { if (fromServer.equals("Bye.")) break; try{ // Create file FileWriter fstream = new FileWriter("outs.txt", true); BufferedWriter outs = new BufferedWriter(fstream); outs.write( fromServer); outs.newLine(); //Close the output stream outs.close(); } catch (Exception e){//Catch exception if any System.err.println("Error: " + e.getMessage()); } FileReader fin = new FileReader("outs.txt"); Scanner src = new Scanner(fin); while (src.hasNext()) { Double Tag = (src.nextDouble()); Double x = (src.nextDouble()); Double z = (src.nextDouble()); Double y = (src.nextDouble()); if ((x<=19.92) && (y<=6.1543) && (y>=4.22)) { System.out.println("You are at Picture A"); } else if ((x<=19.92) && (y<=3) && (y>=1)) { System.out.println("You are at Picture B"); } else { System.out.println("Nope"); } } } out.close(); in.close(); stdIn.close(); kkSocket.close(); } } SMTP code: Code: import java.io.*; import java.net.Socket; public class Emailer { public static void main(String[] args) throws Exception { String results = send("mailhost.computing.dcu.ie", 25, "adam.keaney2@mail.dcu.ie", "adam.keaney2@mail.dcu.ie", "Test Email", "<b>You got mail!</b>"); System.out.println(results); } /* Sends an email. * @return The full SMTP conversation as a string. */ public static String send( String host, int port, String to, String from, String subject, String message) throws Exception { // Save the SMTP conversation into this buffer (for debugging) StringBuffer buffer = new StringBuffer(); try { // Connect to the SMTP server running on the local machine. Socket smtpSocket = new Socket(host, port); // send commands TO the server with this DataOutputStream output = new DataOutputStream(smtpSocket.getOutputStream()); // recieve responses FROM the server with this BufferedReader input = new BufferedReader( new InputStreamReader( new DataInputStream(smtpSocket.getInputStream()))); try { // Read the server's hello message read(input, buffer); // Say hello to the server send(output, "HELO localhost.localdomain\r\n", buffer); read(input, buffer); // Who is sending the email send(output, "MAIL FROM: " + from + "\r\n", buffer); read(input, buffer); // Where the mail is going send(output, "RCPT to: " + to + "\r\n", buffer); read(input, buffer); // Start the message send(output, "DATA\r\n", buffer); read(input, buffer); // Set the subject send(output, "Subject: " + subject + "\r\n", buffer); // If we detect HTML in the message, set the content type so it displays // properly in the recipient's email client. if (message.indexOf("<") == -1) { send(output, "Content-type: text/plain; charset=\"us-ascii\"\r\n", buffer); } else { send(output, "Content-type: text/html; charset=\"us-ascii\"\r\n", buffer); } // Send the message send(output, message, buffer); // Finish the message send(output, "\r\n.\r\n", buffer); read(input, buffer); // Close the socket smtpSocket.close(); } catch (IOException e) { System.out.println("Cannot send email as an error occurred."); } } catch (Exception e) { System.out.println("Host unknown"); } return buffer.toString(); } /** * Sends a message to the server using the DataOutputStream's writeBytes() method. * Saves what was sent to the buffer so we can record the conversation. */ private static void send(DataOutputStream output, String data, StringBuffer buffer) throws IOException { output.writeBytes(data); buffer.append(data); } /** * Reads a line from the server and adds it onto the conversation buffer. */ private static void read(BufferedReader br, StringBuffer buffer) throws IOException { int c; while ((c = br.read()) != -1) { buffer.append((char) c); if (c == '\n') { break; } } } } Can anyone tell me how I can combine multiple sheets into one?
|