iwato

<IfModule mime_module> <Files overview.html> AddType application/x-httpd-ea-php56 .php .html </Files> </IfModule> The above code was placed in a .htaccess file in the same directory that contains all of the aforesaid files.

Could you not look at the PHP correspondence that I have created and suggest why it does not work. All of the links provided above are valid. My THREE STEPS to Failed Nirvana. 1) Start a session with the reference page and pass a $_SESSION variable to the target page from the reference page. 2) In the target page create from the $_SESSION variable a Javascript variable and assign to it the value of the $_SESSION variable. 3) Load the page and upon completion execute a $(document).ready() function that checks the value of the variable and determines whether or not to allow $.colorbox to display. Roddy

Yes and No. Yes, I did miss it when I first posted it. No, I caught it and reloaded it with the semi-colon. I simply forgot to make the adjustment here. In the end, it makes no difference. The negative effects and the failed good effect remain unfortunately in tact. Woe is me. Roddy p.s. I will correct the error above.

At the suggestion of Ingolme I have introduced a $_SESSION variable. Unfortunately, the only affect that it appears to have is to prevent my Javascript from loading in Firefox and Chrome, this despite my continued ability to use Javascript with Safari. I simply do not understand. Perhaps I have become impatient. Perhaps my desire to move forward has overcome my ability to think clearly and achieve my task. Reference Page: http://www.grammarcaptive.com/single_payment_acknowledgment.php <?php session_start(); $_SESSION['navtype'] = 1; ?> Target Page: http://www.grammarcaptive.com/overview.html <?php session_start(); $navtype = filter_var($_SESSION['navtype'], FILTER_VALIDATE_INT); ?> <script> var navtype = <?php echo $navtype;?>; </script> Javascript Page for Target Page: http://www.grammarcaptive.com/_utilities/javascript/overview.js $( document ).ready(function() { console.log( "ready!" ); if (navtype == 1) { $.colorbox({open:false}); } else if (performance.navigation.type === 0) { $.colorbox({opacity: '0.70', transition: 'elastic', speed: 700, width: 700, height: 'auto', scrolling: false, html:"<div id='welcome_slide'> <table> <tr> <td width=250 height='auto'> <img src='_images/freed_captive.png' height=200 width=200 /> </td> <td width=450 height='auto'> <h1>Hi!</h1><h2>My name is Roddy.</h2> <p class='welcome'>This is your gateway out of the prison of bad grammar.</p><p>Let me show you to the final gate!</p></td> </tr> </table> </div>", onClosed: function() { $("iframe.splash").colorbox({iframe: true, fastiframe: false, fixed: false, opacity: "0.65", open: true, rel: 'sweet', width: 700, height: 450, closeButton: true, href: function(){ var href = $(this).attr('src'); return href; } }); }}); } }); Roddy

Yes, you are correct. Unfortunately, it does not solve the problem. The colorbox pop-up still appears. in answer to your question: one of the uses of performance.navigation.type is to control what happens when a user refreshes the page. For example, go to http://www.grammarcaptive.com/overview.html and observe the pop-ups. Then, refresh the window. The pop-up do not reappear. Then go to http://www.grammarcaptive.com/single_payment_acknowledgment.php and click on the image. The pop-up reappear whether the overview.html has been loaded already or not. I am trying to convince the browser to treat the call from single_payment_acknowledgment.php as a simple refresh. i hope that you passed an enjoyable Halloween! Roddy

It appears that I have asked a question about which the gurus of W3Schools are unwilling to respond. But why? One does not have to know the answer in order to discuss the issue. Indeed, might the discussion not shed enough light to spark a flame and the answer? Happy Halloween! Roddy

Please open to this page and click on the image. It will open to another page whereupon two pop-up light boxes will appear. The goal of the following code is to suppress the pop-ups when, and only when, the image is clicked. Obviously it fails. .htaccess File <IfModule mime_module> <Files overview.html> AddType application/x-httpd-ea-php56 .php .html </Files> </IfModule> this page - http://www.grammarcaptive.com/single_payment_acknowledgment.php <?php session_start(); $_SESSION['perform_nav'] = 1; ?> Target Page - http://www.grammarcaptive.com/overview.html <?php session_start(); ?> <script> var navtype = <?php echo $_SESSION['perform_nav']?>; if(typeof navtype != "undefined" && navtype !== null) { performance.navigation.type === 1; } </script> The Javascript - http://www.grammarcaptive.com/_utilities/javascript/overview.js if (performance.navigation.type === 0) { $.colorbox({opacity: '0.70', transition: 'elastic', speed: 700, width: 700, height: 'auto', scrolling: false, html:"<div id='welcome_slide'> <table> <tr> <td width=250 height='auto'> <img src='_images/freed_captive.png' height=200 width=200 /> </td> <td width=450 height='auto'> <h1>Hi!</h1><h2>My name is Roddy.</h2> <p class='welcome'>This is your gateway out of the prison of bad grammar.</p><p>Let me show you to the final gate!</p></td> </tr> </table> </div>", onClosed: function() { $("iframe.splash").colorbox({iframe: true, fastiframe: false, fixed: false, opacity: "0.65", open: true, rel: 'sweet', width: 700, height: 450, closeButton: true, href: function(){ var href = $(this).attr('src'); return href; } }); }}); } REQUEST: Can you suggest any adjustment that might produce the desired effect? Roddy

Ingolme: If I were to make my gradients more subtle, I would lose the underlying -- subconscious, if you will -- binary effect. dsonesuk: This is an idea that I have yet to try. It does seem reasonable though. Since I submitted this ticket, I have found code on the net that provides the effect for which I am looking. Unfortunately, it places a <span> element around each in every word. Surely, this very costly in download and display time. Maybe, if i could achieve a similar effect, but at much lower cost by styling individual <p>, rather than word elements. Roddy

BACKGROUND: I like gradients because they are both colorfully attractive and easy on the eyes. They are also suggestive of binary thought and all that lies between the two polar extremes of 1 and 0. For these reasons I often employ gradients as the background colors of my <div> elements. Background gradients suffer from an important weakness, however: monochromic text is easy to read at one end of the gradient, but difficult to read at the other. QUESTION: Does anyone know of a way to cause text to change color as it is displayed across the width and height of the element that contains it? Roddy

Dsonesuk! Clearly the first function resolves the issue. For now, I am able, not only to set the value for the <select> option of the second with the first, but I am also able to reselect from the full range of the second <select> options, if I wish two separate values. You did much better than I was able with far less code. Job well done! Many thanks. Although it took me some time to understand the second function, I will now archive it for future use. For, if the <select> options are properly ordered, it provides a neat mechanism for the process of elimination. Roddy

GOAL: Use one <select> element to determine the selected option of another <select> element without destroying the ability of the second <select> element to override the selection made by the first <select> element. BACKGROUND: My biggest difficulties in my attempt to achieve the above goal are: reading the value of the first <select> element's manually (not the automated) selected option. forcing the second <select> element to perform as if it were manually selected. Please consider the following two select statements and answer the following question with jQuery. <h4>The <em>from</em> Select Input Control</h4> <select id='item_podtype_exp' form='rss2_feed' name='item_podtype'> <option value='' selected='selected'>Select a type</option> --> <option value='1'>Concept</option> <option value='2'>Form and Use</option> <option value='3'>Clausal Analysis</option> <option value='4'>Linear Analysis</option> <option value='5'>Socratic Inversion</option> </select> <h4>The <em>to</em> Select Input Control</h4> <select id='itunes_podtype_exp' form='rss2_feed' name='itunes_podtype'> <option value='' selected='selected'>Select a type</option> <option value=1>Concept</option> <option value=2>Form and Use</option> <option value=3>Clausal Analysis</option> <option value=4>Linear Analysis</option> <option value=5>Socratic Inversion</option> </select> QUESTION: How does one go about achieving the above goal? Your response will hopefully answer many more questions than I have room for here. Roddy

Yes, I understand. I will write the <script> element directly into the page. It does make better sense for my ultimate formatting goal. In this way, the only job of AJAX is to send the data needed to obtain the data. in this way the actual use of the data is a separate matter. Yes, I now no how to implement the $_SESSION superglobal, but I will save its further use for other occasion. Soon I must start putting the pieces together and am reluctant to add any more large pieces for the moment. Roddy

Good morning, Ingolme! Thank you for responding to my statements. I believe that your responses will help me in avoiding certain kinds of pitfalls. This said, I would like to elaborate a little more on Item #4. What i have in mind is the following: 1) Use AJAX to retrieve data 2) Use the $.ajax() success function to assign the data to javascript variables included in a dynamically generated <script> tag. 3) Access those Javascript variables at will. Please consider the following sketch and comment on its feasibility. The HTML: (flexible manual placement of HTML independent of the configuration of the AJAX success function) <div id='js_script'></div> <div> <p id='pod_num1'>Podcast No.: </p> <p id='pod_num2'>Podcast No.: </p> </div> The jQUERY READY() FUNCTION: (flexible variable placement independent of the configuration of the AJAX success function) $(document).ready(function() { $('#pod_num1').append(var1); $('#pod_num2').append(var2); }); The AJAX: (automatically generated variables on call) $('#some_trigger').on('click', {podType:$(this).attr(id)}, function(event) { event.preventDefault(); podtype = event.data.podType; $.ajax({ url: 'some_php_file.php', method: 'GET', data: {'podType', podtype}, dataType: 'json', success: function(jsonData) { $.each(jsonData, function(key, object){ $('#js_script').append('<script>var var1 = object.varname1; var var2 = object.varname2;</script>'); }); } }); });

BACKGROUND: I now know how to produce dynamic HTML populated with the values of Javascript variables obtained from a database and processed with PHP. Unfortunately, this method of integrating Javascript and HTML is somewhat awkward. What I would much rather be able to do is to read the variables into a dynamically produce <script> tag and then manipulate them on the importing page. REQUEST: To this end, please comment on the veracity and accuracy of the following statements: When an AJAX call is made only the Javascript contained in the success and complete functions is executed. It makes no difference that the HTML with which the Javascript interacts is already on the page when the AJAX call is made. Unless the AJAX call is made while the page is loading, all Javascript already contained within the page will have been executed before that contained within the AJAX statement. Javascript variables imported via AJAX can be accessed by other Javascript on the same page after the variables have been imported. Please advise. Roddy

Thank you for the great introduction to error logging. I will set up in very short order. In the meantime, I have discovered something very important about $.ajax( ) data property. Although you can pass values to the property-value pairs of the data object via Javascript variables, you cannot do the same with the property names. Each property name must be entered manually as a string. Yes, it turns out that you were right both about the event.preventDefault method and the poorly specified data string. This latter problem has been fixed and this leg of the project nearly completed. You can see the result at podcast_dev_copy.php. Only the animation and formatting requires further adjustment. The actual act of podcasting will begin soon! Today Grammar Captive celebrates the end of its 1st year of development. Thank you all! Especially, Dsonek, JSG, and the furtive fox. Roddy

I am still very new to AJAX and would like to return to this statement. and provide this as my outcome: http://www.grammarcaptive.com/podcast_dev_copy.php. After you have opened to the page, please follow the following steps: Click on the word Chronology in the navigation bar of the opened page. Click on the phrase Podcast Index ... Click on any of phrase that reads Discover more ... Click on the phrase Click and Listen. What I have verified as properly functioning are the following: The creation of the data_json string containing the appropriate hash and podcast_no values. The creation of the template, if indeed, podcast.php receives the appropriate hash and podcast_no values contained in data_json. In fact, however, I do not know whether podcast.php is receiving the data contained in the AJAX data setting. $("#main").html(template); less template. The following code is what produces the failure. $('.podcast_link').find('a').on('click', function(event){ event.preventDefault(); // var attribute = $(this).attr('href'); var query_str = window.location.search.replace('?', ''); var pairs = query_str.split('&'); var data = []; $.each(pairs, function(i, v){ var pair = v.split('='); var key = pair[0]; var value = pair[1]; var data_arr = [key, value]; data.push(data_arr); }); var data_json = JSON.stringify(data); var nested_ajax = $.ajax({ url: '_utilities/php/podcast.php', method: 'GET', data: { data_json }, dataType: 'html', statusCode: { 404: function() { alert( "Page not found" ); }}, success: function(template) { $("#main").html(template); } }); }); I am concerned that the event.preventDefault statement is on steroids and is interfering with the AJAX. Please advise. Roddy p.s. My Javascript console offers no complaint.

Unorthodox programming and confused programming are not the same. Now, orthodox programming may be more efficient or easier to manipulate, but it, too, can be confusing to those who have not been reared in schooled orthodoxy. Does there exist in Javascript an equivalent to PHP's magic __FILE__ constant? Roddy

My very modest, current use and understanding of AJAX suggests that I would have to make the AJAX request to a page different from the page from which the AJAX request is made. Am I wrong in this regard? Roddy

NOTE: The rooster has come home to rest. BACKGROUND: My recent ventures in SESSION variables and AJAX calls has opened up whole new worlds in the life of this unaspiring, inspired web developer. So, far I have used each to satisfy different, but similar tasks -- namely, fill differently the same section of my podcast host page with data from the same data base using both external ($_GET and $_SESSION variables) and internal $.ajax( ) triggers. It is now time to combine the results of these two procedures in the achievement of a third task. At the top of my podcast host page is a PHP if-statement that checks for the receipt of two $_GET variables. It cares not about the source of these variables and performs the same way whether they are received from an external HTTP request using a fully specified URL or my newly acquired knowledge of the href='?..." query specification. Both cause the page load. Neither method cares whether the page has already been loaded or not. QUESTION: How do I suppress the reload function of a HTTP request without sacrificing the other features commonly associated with HTTP requests. BY WAY OF ILLUSTRATION: In the event that more clarity is required. 1) EXTERNAL REQUEST: Click on the following link: http://www.grammarcaptive.com/podcast_dev_copy.php?hash=30a6836a3f7c5fc57751a61098e5c221&podcast_no=21 View the center section of the page that opens. The contents of this section is inserted using a PHP script located at the top of the opened page. The difference between a normal loading and what you observe when you click the above link can be easily seen by by omitting the query string -- namely, http://www.grammarcaptive.com/podcast_dev_copy.php. 2) INTERNAL REQUEST: What I would like to do is open similarly generated content using different data, from the same page. To observe this please do the following: Click on the word Chronology in the navigation bar of the opened page. Click on the phrase Podcast Index ... Click on any of phrase that reads Discover more ... Click on the phrase Click and Listen. Look at the result and you will discover similarly formatted, but different content in the center section of the page. I would like to achieve the same without having to reload the page. Could this be achieved with an event object such as event.preventDefault() PLEASE ADVISE. Roddy

OK, W3Schools, what may seem logical and understandable to you, would make sense to me, if only it matched the reality that I perceive. Based on what you, JSG and Dsonesuk, have said, I grayed out the statement $(".hidden_info").css('visibility','hidden'); and replaced it with CSS styling in a file called podcasts.css that loads when the file loads via an HTML <link> element in the <head> element. The style setting is .hidden_info {display: none;}. In effect, the CSS style setting is now in place before the <div class='hidden_info" loads with the success function of the AJAX call. Still, the relevant <div> remains visible! Now, I have nothing against using jQuery's .on( ) method. In fact, the .click( function( ){ ... }); method that triggers the functioning style change and animation via the <div class='discover'> element in the code above is identical to the .on('click', function( ){ ... }); remain baffled. Roddy

REQUEST: Please consider the following piece of code and follow the clicking instructions. Then, explain why the <div class='hidden_info'>...</div> is not hidden when the page is filled and cannot be shown when the user clicks on the phrase Discover more ... I am completely baffled. Even the animation works. After clicking on the link please follow the following steps: Find Proxy_Link and click. Find Chronology in the navigation bar and click. Find Podcast Index ... and click. Pass your cursor over any phrase that reads Discover more ... and click. QUESTION: Why would part of this work code work and not the other? $(".hidden_info").css('visibility','hidden'); $("div.discover").mouseover(function() { $(this).css({"cursor": "pointer","font-weight":"800"}); $(this).click(function() { $(".hidden_info").show(true); $(this).mouseup(function() { $(this).css({"color": "#ccc", "font-weight": "normal"}); }); $('body, html').animate({scrollTop: $(this).offset().top},800); }); }); This is the code that generates the relevant DIV element. Both pieces of code are located in the $.ajax( ) success function. The following code precedes the above code in the function. $.each(jsonData, function(key, object){ $('#main').append("<div class='paginate'><div class='item_info podcast_item'><div class='pod_num'>" + object.podcast_no_item + "</div><div class='pod_title'>" + object.item_title + "<br />" + object.item_pubdate + "</div></div><div class='pod_describe'>" + object.item_description + "</div><div class='discover'>Discover more ...</div><div class'hidden_info'><div class='duration'>Duration (hh:mm:ss): " + object.itunes_duration + "</div><div class='summary'>Summary: "+ object.itunes_summary + " </div></div><!-- end div.hidden_info --></div><!-- end div.paginate -->"); }); Roddy

BACKGROUND: I am loading dynamic HTML and its content via the success function of a $.ajax( ) call. After it has been loaded I would like to give the user the opportunity to manipulate it using Javascript. In order to achieve my goal I foresee the use of both Javascript and CSS. QUESTION: Where and when in the document should the Javascript be entered? For example, in the $(document).ready() function? Please explain why.

I have noticed that using the @media screen tag behaves differently with the direction in which the window or viewport is resized. Intuitively, one would expect that widening the window or viewport would undo whatever occurred when the window was narrowed. This is not, how it works, however. Is there a general rule of thumb to implement directionally symmetric changes? Roddy

What happens when you increase the width of your window? Is your viewport large enough to see both tables side-by-side? I ask this, because this is how you have them positioned with your CSS. .scColl {position:absolute; top:0; left:0; width:1050px; height:2000px; border:2px solid red;} .scTot {position:absolute; top:0; right:0; width:250px; height:2000px; border:2px solid red;} Both DIV elements are position top:0. One is positioned left:0 and the other right:0. This should produce a row, not column effect. Yes, XMLHttpRequest is a reserved word, but the variable to which you assign the returned object is not. It will not disturb your code to name the returned object differently. In fact, it will increase your ability to manipulate what is returned. Find the icon in the bottom right corner of any entry and pass your cursor over it. it is there where you will find the trophy. Roddy

What would happen if you were to use different variable names for your XMLHttpRequest() -- say, xmlhttp_1 and xmlhttp_2? You appear to be cancelling the content of the first object when you replace it with the content of the second. Roddy p.s. If my suggestion works award me with a trophy.