JavaScript - Getting Blank Page When Using Php And Jquery Together.
Hello all, I would like someone to help me with this. I'm building my portfolio website. I'm an illustrator and graphic designer (for printing). My website uses html and css. I introduce a jquery plugin to create a slide show with my work. Until then, everything was working well. The problem appears when I introduce php to my code in order not to repeat the navigation bar all the time. With php and the jquery together I get a blank page in my browser.
This link shows the blank page I'm getting using php and jquery together. http://www.raulmv.com/calendar.php This is an example of the site without the jquery. http://www.raulmv.com/graphics.php Could someone please help me with this thanks. 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="#" /> <meta name="keywords" content="#" /> <title>#</title> <meta name="google-site-verification" content="1ksaaEb5-Ur8h5ivruWp4iRcUB-tDLyM43L6yCl1OuQ" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <!-- include jQuery library --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <!-- include Cycle plugin --> <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/js/jquery.cycle.all.js"></script> <script type="text/javascript" src="/js/common.js"></script> <!--Google Analytics--> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-12002561-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> </head> <body class="#" id="portfolio"> <div id="container"> <!--Top Navigation--> <div id="navcontainer"> <?php {include("navbartop.html");} ?> </div> <!--Left Navigation--> <div id="navBar"> <?php include("navbarleft.html"); ?> </div> <!--Info--> <div id="info"> <span class="Title">ANYTIME CALENDAR | 2009</span> <span class="style">Calendar designed to be used any year, any occasion, anytime.</span> </div> <!--Imagenes--> <div id="showreel-nav-wrap"> <span> </span> </div> <ul id="buy-links" class="slideshow"> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ul> <div id="showreel"> <ul class="slideshow pics"> <?xml version="1.0" encoding="utf-8"?> <li><img src="images/Calendar.png" height="522px"/> </li> <li><img src="images/IMG_1162.png" height="522px" /> </li> <li><img src="images/IMG_1307.png" /> </li> <li><a href="images/Calendar/Instructions.gif"><img src="images/Instructions_small.gif" /></a> </li> </ul> </div><!--/showreel--> <script type="text/javascript"> $(function() { var totalImg = $("#showreel li").size() - 1; $("#buy-links li:gt(" + totalImg + ")").remove(); $("#showreel-nav-wrap span").after('<div id="showreel-nav" class="showreel-nav">') $('.slideshow').each(function(index) { $(this).cycle({ fx: 'fade', speed: 'slow', timeout: 0, sync: false, pager: '#showreel-nav', pagerAnchorBuilder: function(i) { if (index == 0) // for first slideshow, return a new anchor return '<a href="#">'+(i+1)+'</a>'; // for 2nd slideshow, select the anchor created previously return '#showreel-nav a:eq('+i+')'; } }); }); //Image to trigger showreel links activeLink = $('#showreel-nav').find('.activeSlide'); nextLink = activeLink.next(); $('.slideshow img').bind('click',function(){ activeLink = $('#showreel-nav').find('.activeSlide'); nextLink = activeLink.next(); nextLink.trigger('click'); }); //Get h1 text length var h1length = $('h1').text().length; if(h1length > 27) { $('.oj-title').css('margin-top','-21px'); } }); </script> <!-- end #mainContent --></div> </body> </html> Those <li> tags Im using is to numbered the images. It might not be a good practice but it works. Thanks for reading this post, I hope someone could help me. It's frustrating I have been for the last two days going around trying to change things and nothing seems to work. Similar Tutorialshi Pals, I have a problem regarding the "target" attribute of "a" tag. in my code I use biggerlink jQuery script to give link to p element without come HTML validation problem. I pass the "target" value from PHP to smarty template , but it's not working , When I remove "biggerlink " it works but the link in <p> tag not working . My Tpl file is : Code: {if not empty($campaign)} <div class="securti-adv biggerlink"> {if not empty ($campaign.media)} <a href="{$campaign.url}" {if n($campaign.linkTarget)}target="{$campaign.linkTarget}"{/if} class="thumb"> <img src="{$campaign.image}" title="{$campaign.title1 + $campaign.title2}" alt="{$campaign.title1 + $campaign.title2}" /> </a> {/if} <div class="details"> {if not empty ($campaign.title1) || not empty ($campaign.sub_title)} <a href="{$campaign.url}" {if not empty($campaign.linkTarget)}target="{$campaign.linkTarget}"{/if} title="{$campaign.title1 + $campaign.title2}"> {text2image styleSlug=$campaign.titleStyle1 text=$campaign.title1} {text2image styleSlug=$campaign.titleStyle2 text=$campaign.title2} <span><img src="{$imagesDir}/btn-campaign-meet-security-advisor.png" alt="" title="" /></span> </a> <p> {text2image styleSlug=$campaign.subtitleStyle text=$campaign.subTitle}</p> {/if} </div> </div> <script type="text/javascript" language="javascript"> {literal} $(document).ready(function(){ $('.biggerlink').biggerlink(); }); {/literal} </script> {/if} My plugin code is : Code: (function($) { $.fn.biggerlink = function(options) { // Default settings var settings = { hoverclass:'hover', // class added to parent element on hover clickableclass:'hot', // class added to parent element with behaviour follow: true // follow link? Set to false for js popups }; if(options) { $.extend(settings, options); } $(this).filter(function(){ return $('a',this).length > 0; }).addClass(settings.clickableclass).each(function(i){ // Add title of first link with title to parent $(this).attr('title', $('a[title]:first',this).attr('title')); // hover and trigger contained anchor event on click $(this) .mouseover(function(){ window.status = $('a:first',this).attr('href'); $(this).addClass(settings.hoverclass); }) .mouseout(function(){ window.status = ''; $(this).removeClass(settings.hoverclass); }) .bind('click',function(){ $(this).find('a:first').trigger('click'); }) // triggerable events on anchor itself .find('a').bind('focus',function(){ $(this).parents('.'+ settings.clickableclass).addClass(settings.hoverclass); }).bind('blur',function(){ $(this).parents('.'+ settings.clickableclass).removeClass(settings.hoverclass); }).end() .find('a:first').bind('click',function(e){ if(settings.follow == true) { window.location = this.href; } e.stopPropagation(); // stop event bubbling to parent }).end() .find('a',this).not(':first').bind('click',function(){ $(this).parents('.'+ settings.clickableclass).find('a:first').trigger('click'); return false; }); }); return this; }; })(jQuery); the value of "target" , "_blank" is not work .... I highlight the code part regarding this, please check and give me a solution ASAP. You can mail me at : anes.pa@gmail.com Thanks, Anes This used to work and suddenly it does not work in IE. Here's the function Code: function pdfWindow(loc) { if(loc == "#RefQuide") { location.href = loc; } else { // The window attributes var window_attribs = "height=650,width=850,resizable=yes,scrollbars=yes"; window.open(loc,"PDF",window_attribs); } } Here's part of the HTML Code: <form name="myForm"> <select name="hypercomList"> <option value="/CWRWeb/pdf/HypercomT4000.pdf">Hypercom T4000 </option> <option value="/CWRWeb/pdf/HypercomT4100.pdf">Hypercom T4100 </option> </select> <input type="button" value="Go!" onclick="pdfWindow(myForm.hypercomList.options[myForm.hypercomList.selectedIndex].value)"> </form> Any ideas why it would open a blank page instead of the PDF? Works ok in FF. hi, When I navigate to a page with Ajax on my iphone or ipad, it doesn't show up, page is just blank, I have checked for errors and there is no errors?! here is my Ajax code Code: function datecheckFunction(){ var datecheckRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari datecheckRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ datecheckRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ datecheckRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Your browser broke!"); return false; } } } // Create a function that will receive data sent from the server datecheckRequest.onreadystatechange = function(){ if(datecheckRequest.readyState == 4){ var ajaxDisplay = document.getElementById('ajaxDiv'); ajaxDisplay.innerHTML = datecheckRequest.responseText; } } var datepicker = document.getElementById('datepicker').value; var queryString = "?datepicker=" + datepicker; //Add the following line datecheckRequest.open("GET", "http://www.affordableappliancerepairs.co.uk/admin/checkdate.php" + queryString, true); datecheckRequest.send(null); } Hi everyone, I searched and found some answers to this question, however, after trying the solutions, none worked for me. I am hoping someone can help me figure out where i'm going wrong with this. I am trying to use the jQuery Nivo Slider and the jQuery Ad Gallery on the same page. When both scripts are active, only one works. When i comment out one of them, the other works. This happens either way i do it. I tried using the jQuery.noConflict(); but it did not work...unless i did something wrong. Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="/includes/jquery.nivo.slider.pack.js"></script> <script type="text/javascript" src="/includes/jquery.ad-gallery.js"></script> <script type="text/javascript"> $(function() { $('img.image1').data('ad-desc', 'Whoa! This description is set through elm.data("ad-desc") instead of using the longdesc attribute.<br>And it contains <strong>H</strong>ow <strong>T</strong>o <strong>M</strong>eet <strong>L</strong>adies... <em>What?</em> That aint what HTML stands for? Man...'); $('img.image1').data('ad-title', 'Title through $.data'); $('img.image4').data('ad-desc', 'This image is wider than the wrapper, so it has been scaled down'); $('img.image5').data('ad-desc', 'This image is higher than the wrapper, so it has been scaled down'); var galleries = $('.ad-gallery').adGallery(); $('#switch-effect').change( function() { galleries[0].settings.effect = $(this).val(); return false; } ); $('#toggle-slideshow').click( function() { galleries[0].slideshow.toggle(); return false; } ); $('#toggle-description').click( function() { if(!galleries[0].settings.description_wrapper) { galleries[0].settings.description_wrapper = $('#descriptions'); } else { galleries[0].settings.description_wrapper = false; } return false; } ); }); jQuery.noConflict(); jQuery(window).load(function() { jQuery('#slider').nivoSlider({ effect:'fade', // Specify sets like: 'fold,fade,sliceDown' animSpeed:5, // Slide transition speed pauseTime:7000, // How long each slide will show startSlide:0, // Set starting Slide (0 index) directionNav:false, // Next & Prev navigation directionNavHide:true, // Only show on hover controlNav:true, // 1,2,3... navigation controlNavThumbs:false, // Use thumbnails for Control Nav controlNavThumbsFromRel:false, // Use image rel for thumbs controlNavThumbsSearch: '.png', // Replace this with... controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src keyboardNav:true, // Use left & right arrows pauseOnHover:true, // Stop animation while hovering manualAdvance:false, // Force manual transitions captionOpacity:0.8, // Universal caption opacity prevText: 'Prev', // Prev directionNav text nextText: 'Next', // Next directionNav text beforeChange: function(){}, // Triggers before a slide transition afterChange: function(){}, // Triggers after a slide transition slideshowEnd: function(){}, // Triggers after all slides have been shown lastSlide: function(){}, // Triggers when last slide is shown afterLoad: function(){} // Triggers when slider has loaded }); }); </script> Does anyone have any ideas? I appreciate the help in advance! Tsiqueira Hi, I wish to get some content from another page. Here is my code. Code: <script type="text/javascript"> jQuery.ajax({url: 'http://www.livecounter.dk/viewstats/30050',type: 'get',success: function(ajax) { var x = jQuery('#box4 .first:last', ajax).innerHTML; document.write(x); } } }); </script> <script src="http://code.jquery.com/jquery-1.6.1.min.js"> </script> But it isn't working. I can't get the at this page : http://www.livecounter.dk/viewstats/30050 under "Altid" (to the right), next to "Sidevisninger". Image of it here : http://i51.tinypic.com/2e0sb9s.png Thanks Hi guys, I want to make a website and instead of having individual pages for each page, I would like it all to be on one page. I want to use jQuery to switch between the different tabs but I also need it to be able to stay on that certain tab when the page is reloaded. I also need to be able to link to the certain tabs which I think would be accomplished by using ID tags. If anyone can help, that would be great.
Hello! I am developing my personal website! And I am trying to implement it with JS completely. which means I need the page to be one front end page. But the back-end pages would be the ones which do the work and calculations! In other words and more explaination: I would like to have one "index.php" page that contains only a nav bar which handles the mission. Once the page load it loads with the content of "home.php" (the landing page) if the "contact" tab is clicked then I would like to load the "ContactMe.php" page content. I have done this already! but the problem is: "home.php" uses alot of javascript functions and jquery plug-ins. when I load it, it looks messy that you think the JS is disabled in your machine :-\ Note: the loading has been done with those methods: .load(), $.ajax! -> same results! The conclusion: * "home.php" * "ContactMe.php" * "About.php" Is it possible to load those pages in the "index.php" and still have their JS functions function correctly and display as if they were accessed individually? The goal that I am trying to achieve is that I make my whole website for the visitor as "One Page Site"! I am challenging myself with it though! Thank you in advance for your informative posts! Please Note that I have only put the <html><head><body> tags in the index.php and removed them from the back-end pages such as home.php, contactme.php and about.php! for that sake that it works correctly! but with no hope! Hi I'm trying to load a part of a page (that has script in it) into another page using jquery. However, though the html loads in correctly, none of the script is working. I'm using code from http://css-tricks.com/video-screenca...namic-content/ ie. the pages all work without java (static pages) and when java is enabled, instead of going to bio.html you get taken to ..#bio.html. However if I've got any script I would like to be loaded .. ie. lightbox gallery or even a simple jav split and put back together email address hider. Any help greatly appreciated. I'm not very clued up about jquery at the moment unfortunately and though I've been trying to read and learn, alot is going over my head.. Not sure how best it is to show you the page as it's not live yet. Maybe if it helps I can upload a zip of the site. It's a simple 6 page musician site. Though my code is exactly like the css-tricks page, just that I have a lightbox on one page (which loads fine if there's no hash in the address - but when hash is there, it shows thumbnails, and when you click one, it just takes you to the larger .jpg destination page (no lightboxness etc).) Thanks I've got a client using JQuery pageslide function on a wordpress site - http://srobbin.com/blog/jquery-pageslide/ There is a sidebar menu on the left and about 5 pages in the right hand side. So you click one of the links on the sidebar menu and it slides to one of the 5 corresponding pages. I guess the 5 pages are all really one page though within the slider app? I'm wondering if it's possible to link directly to a page within the slider... because right now it always goes to the first page of the 5. And is there a way to program it so the back button in the browser makes the page slide go back to the previous page, rather than going to the last actual page in the browser? I have a problem where the page doesn't expand when more results get loaded via jquery on a facebook style wall. Once more results get loaded the footer stays static instead of moving down. What's the best way to do this? I've got a page (hrnewseastanglia.com) where I have to use a jquery function to stretch the body to the user's window height if it isn't already. In the same code I also use a condition that if the body is bigger than the user's window, the content has a padding to stop it going over the grass. The reason I need to do the resize is because I have a background image that needs to sit at the very bottom of the page (with no bar or gap below it). The reason the padding can only exist when the body is bigger than the window is because it will put a scrollbar on pages that shouldn't have them. It works great, but the only trouble is that if somebody decides to resize their window on a page that fits in it - it breaks. This is my script: Code: <script type="text/javascript"> $(document).ready( function() { stretch_portal_content(); $(window).resize( stretch_portal_content ); }); function stretch_portal_content() { // if the body isn't at least as big as the user's window - force it to be if( $(window).height() > $('body').height() ) { $( '#wrapper' ).height( $(window).height() - ( $('body').height() - $('#wrapper').height() ) ); } // if the content goes beyond the window make sure it doesn't go beyond the grass at the bottom if( $(window).height() < $('#wrapper').height() ) { $( '#wrapper' ).css("padding-bottom", '130px'); } } </script> I've been scratching my head over this for hours but haven't come up with a solution. If anyone can help I'd really appreciate it! I have a php file lets say file1.php, that printing a variable, its dynamic numbers output that already always increasing, like private message numbers that coming or others : PHP Code: <?php echo $variable ?> i want to put that variable output, in another files page title, lets say file2.php or file3.html, in the front of the another files page titles, and auto refresh every x seconds, maybe like this : Quote: (1) - another text in the page title after x seconds, get a private message Quote: (2) - another text in the page title after another x seconds, get another private message Quote: (3) - another text in the page title or its ok if just like this, only the variable, without the another text in the page title Quote: (1) please share your knowledge to make it, maybe using javascript, jquery or others 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; }); }); 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..... 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 When my page loads, it automatically jumps down as if it were jumping to a named anchor. It's more apparent on longer pages (doesn't replicate if page fills screen). Happening in Win FF/IE/Chrome Disabling stylish-select.js (from http://www.prismstudio.co.uk/2009/05...x-replacement/ where he used to allow comments but not anymore) fixes it, but I don't know enough Javascript to debug, would really appreciate if somebody could have a look. Good example at http://studiohodson.com/projects/Bea...restaurant.php Script is at http://studiohodson.com/projects/Bea...lish-select.js Thank you thank you! var s="attr" var i=$(s) // jQuery(elem).attr(attr,eval("elm"+attr)); jQuery(elem).$(s)(attr,eval("elm"+attr));//i tried this. how to assign a variable name in the above code(in place of s) so that i need to add an attribute to the element "elem". Hi, in my code I am checking a form field against a database Code: <script type="text/javascript"> $(document).ready(function() { $("#DiscountCode").blur(function() { //remove all the class add the messagebox classes and start fading $("#msgbox").removeClass().addClass('messagebox').text('Checking code...').fadeIn("slow"); //check the username exists or not from ajax $.post("check-code.php",{ DiscountCode:$(this).val() } ,function(data) { if(data=='no') //if username not avaiable { $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox { //add message and change the class of the box and start fading $(this).html('<img src="resources/images/tick.png" /> Code matched!').addClass('messageboxok').fadeTo(900,1); }); } else { $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox { //add message and change the class of the box and start fading $(this).html('<img src="resources/images/cross.png" /> Sorry, code incorrect!').addClass('messageboxerror').fadeTo(900,1); }); } }); }); }); </script> <p> <label>Discount code</label> <input class="text-input small-input" type="text" id="DiscountCode" name="DiscountCode" /> <span id="msgbox" style="display:none"></span> </p> I would only like this code to run if the form field is not blank please help?! thanks |