Jump to content

Search the Community

Showing results for tags 'jquery'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 262 results

  1. DILEMMA: Visitors to the mainpage of my website can fill the middle section of the page from the page's navigation bar in either of two ways. Both ways employ Javascript: one, copy a div already on the page into another div on the same page; and two, copy the contents of a div on a another page into same. What I would like to do now is to copy the contents of a div already on the page with a call from the contents of a div that was previously on another page. QUESTION: How does one get a div to replace its own content when the div whose contents needs to be replaced has been filled with content from another page? Roddy
  2. Gilbert

    passing variables in jQuery

    trying to learn .post method in jQuery - is there a way to pass a variable to the code to use in the 'data' argument of the function. The 'try it yourself' example from w3schools has the data hard-coded in, but I would like to use a variable that I got from a form, or something to do the post. I tried a few things but to no avail. Here is the code from the example: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $.post("demo_test_post.asp", { name: "Donald Duck", city: "Duckburg" }, function(data,status){ alert("Data: " + data + "\nStatus: " + status); }); }); }); </script> </head> <body> <button>Send an HTTP POST request to a page and get the result back</button> </body> </html> I tried this but it didn't work. I tried with and without the braces. How can you pass a variable to a jQuery method? should I use a global variable. please be explicit. Thanx <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ var myName = "Donald Duck"; var myCity = "Duckburg"; var myData = "{name:" + myName + ", city:" + myCity + "}"; $.post("demo_test_post.asp", myData, function(data,status){ alert("Data: " + data + "\nStatus: " + status); }); }); }); </script> </head> <body> <button>Send an HTTP POST request to a page and get the result back</button> </body> </html>
  3. I have searched in vain for an answer to this problem, but I am getting no where. Here is the issue: I have a search form that works fine as a desktop application. On mobile devices there is a problem. If a user starts typing in the search input, and then taps one of the words that pops up in predictive text (such as on an iphone), this word then fills the input. The search form returns no matches because, as I have discovered, the only thing being submitted is what the user actually typed before tapping the predictive hint. For example, if they start typing Pennsylvania but only type "Pennsy" and then tap the suggestion, the only value in the input is "Pennsy," not the whole word. I have seen some suggestions: for example, setting the input type to 'password' prevents predictive suggestions (and thus requiring the user to type out the entire term), but this also triggers hiding the text submitted (as if it were a password). I have also seen some suggest that you could use setTimeout() before ajax submits the form to the server, but this did not work either and I am not quite sure of the logic behind this solution anyway. Is there a way for javascript / jquery to "read" the value of an input that the user filled by means of tapping predictive text? Thanks in advance' reveret
  4. The following script was found on StackOverflow. It is suppose to simulate a button click with the up-tick of an Enter key. $("#id_of_textbox").keyup(function(event) { if (event.keyCode === 13) { $("#id_of_button").click(); } }); Now, I am not using it for a textbox, but for a search box. In order to get it to work I have tried the following: Used the <form> element as the selector for the keyup() function. Used the <input> element of the search box as the selector for the keyup() function Entered the code in various places within my script including the html and the called javascript documents that make the search engine work. To no avail. Now, it is true that I have not been entirely methodological in my selection of HTML elements and code placement. Still, ss many times as I have tried, however, you would think that Lady Luck would be on my side. Any hints? Please advise. Roddy
  5. hey w3s... so i have this code: <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <h2 class="font-weight-bold text-center">WORK</h2> <div class="border"></div> <br /> </div> </div> </div> <div class="container main_wrapper"> <section> <div class="container"> <div class="row" id="work-grid"> <?php $query_1 = "SELECT * FROM admvideo ORDER BY video_id DESC"; $result_1 = mysqli_query($dblink, $query_1) or die(mysqli_error($dblink)); if( mysqli_num_rows($result_1) > 0 ) { while( $row_1 = mysqli_fetch_array($result_1) ) { $video_id = $row_1['video_id']; $video_title = $row_1['video_title']; $video_link = $row_1['video_link']; $video_director = $row_1['video_director']; $video_text = $row_1['video_text']; ?> <div class="col-sm-4 col-xs-12 work_panels"> <div class="panel panel-default Panel_ModalVideoID-<?php echo $video_id; ?>"> <div class="panel-thumbnail"> <a href="#" title="Video" class="thumb"> <img src="https://img.youtube.com/vi/<?php echo $video_link; ?>/0.jpg" class="img-responsive img-rounded" data-toggle="modal" data-target=".modalVideo"> </a> </div> <div class="panel-body"> <p class="work-name"><?php echo $video_director; ?></p> <p class="work-video-text"><?php echo $video_text; ?></p> </div> </div> </div> <?php } } else { // hvis der ikke er EN række i udtrækket, vises en fejlbesked echo 'Ingen videoer at vise i nu.'; } ?> </div> </div> </section> <div class="modal fade customModal_1 modalVideo" tabindex="-1" role="dialog" aria-labelledby="modalVideo_LabelledBy" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title customModal_2">Video Title 1</h3> <button class="close" type="button" data-dismiss="modal">×</button> </div> <div class="modal-body"></div> <div class="modal-footer"> <h4 class="customModal_3">Video Title 2</h4> <p class="customModal_4"> Video in here. </p> <!--<iframe width="100%" height="350" src="" frameborder="0" allowfullscreen></iframe>--> </div> </div> </div> </div><!-- //.modal-Youtube_1 --> </div> <script> $('[class^=Panel_ModalVideoID-]').click(function(event) { event.preventDefault(); // Step 1 - The Variables //----------------------------------------------- var e = $(this); // e = event of the function happening via class/id "class^=Panel_ModalVideoID-*" (working?) var modal = $('.customModal_1'); var modalTitle = $('.customModal_2'); var videoTitle = $('.customModal_3'); var videoEmbed = $('.customModal_4'); var modal_body = $('.modal-body'); var INSERTDATA_modalTitle; $('a.thumb').click(function() { INSERTDATA_modalTitle = $(this).Attr( 'title' ); }); //var INSERTDATA_modalTitle = e.$('a.thumb').Attr("title"); // working? // Step 2 - Clear different areas //----------------------------------------------- modal_body.empty(); // empty area // Step 3 - insert data into different areas //----------------------------------------------- $(modalTitle).html(INSERTDATA_modalTitle); // Step 4 - show the modal //----------------------------------------------- $(".customModal_1").modal({ show: true; }); }); </script> Currently i'm using bootstrap 4 and trying to make a modal appear. So far it is working BUT i am trying to edit the following inside of the modal: Modal title, and the 2 <p> items inside modal-footer for youtube embed and youtube title etc. All of the replacements at different areas should come from the "while loop" at the upper of the page coding with php. Can you help me somehow? Not sure what to do with js/jquery really, a little bit of a newbie... even after years, i still dont get much of it :/ Hoping you guys can help me out a bit. If more information is needed, please ask. Using jQuery 3.2.1, included ALL of the bootstrap 4 bundle etc, so i know that is not the problem here. Maybe it is the way i am using my JS/jQuery code. Thanks a lot. And ohh... the title should be from the "a.thumb -> title attribute", saying video... will edit it later with php so that it will be dynamic. Hope you can help. Thanks!
  6. rootKID

    show and hide next element

    FIXED IT! I placed my script a little lower on the document! Worked... no clue why tho :/
  7. iwato

    Failure to Transfer Focus

    The PROBLEM: The problem can be observed on the internet at overview.html. After the page opens: Find the words Weekly Podcasts in the page's navigation bar and click on them. After the page opens find the Seven Gates subscription form. Find the select control called Select a Language and click on it. Scroll to the bottom of the list until you arrive at the Not found? option and click where it says Click and enter! If the focus transfers to the newly opened window, then you can see something that I cannot. This failure to transfer focus is the problem. QUESTION: Why does the following code fail to realize the aforesaid mentioned transfer of the focus from the window containing the phrase Click and enter! to the newly opened, blank window? In effect, users cannot enter a missing language without first placing the cursor into the newly opened window. They cannot simply being typing after they click on the words Click and enter!. Alas. HTML <div id='pc_language_options' style='clear:both;'> <label for='pc_tongue'>Native Tongue:<span class="formlabel">*</span></label> <span class="rightfloat"> <select id="pc_tongue" name="language" style="width:auto;"> <option selected value="0">Select Language</option> ... <optgroup label='oceania'> <option value=mi>Maori</option> <option value=haw>Hawaiian</option> <option value=sm>Samoan</option> </optgroup> <optgroup label='Not found?'> <option id="not_found" value='other_tongue'>Click and enter!</option> </optgroup> </select> </span> </div><!-- end div#pc_language_options --> <div id='pc_other' style='margin-top:0.8em;'> <span class="rightfloat"><input id='pc_other_input' type='text' name='other' value=''></span> </div><!-- end div#pc_other --> <label id="pc_tongue_error" class="error" for="pc_tongue">This field is required.</label> JAVASCRIPT $('#pc_other').hide(); $('#pc_tongue').change(function() { if ($('#pc_tongue').val() == 'other_tongue') { $('#pc_other').show().focus(); } else { $('#pc_other').hide().focusout(function(){ $("label#pc_tongue_error").hide(); }); } }); By the way, this is hardly where my experimentation stopped. I have tried many ways using different combinations of the show(), hide(), focus(), focusin(), blur(), and focusout() functions -- and these, both with and without callback functions. Unfortunately, to no avail. I have learned, in effect, many different ways to mess up what already works, but I simply cannot get it to work with the desire enhancement -- a transfer of focus. Roddy
  8. iwato

    Is It a Case of Bubbling?

    UNDERSTANDING THE PROBLEM: Probably the best way to understand the problem that the following piece of code produces is to observe the problem in action. Please do the following: Open to the Grammar Captive podcast_hostpage.php. Look for the following path in the navigation bar on your left: Podcast Archives/Concept/Podcast Index ... Click on the words Podcast Index ... Run your mouse over the list stopping at various places within the list until the following effect is produced. An unending back and forth opening and closing of the <li> elements of a particular <ul> element. Caution: only the first three <li> elements are active. The RELEVANT CODE $("#main").html(concept_var); $("#main").find('.cat_list').children().hide(); $("#main").find('.cat_list').each(function(){ $(this).hover(function(){ $(this).children().show(400); $(this).find('li').mouseenter(function(){ $(this).css('cursor','pointer'); }).click(function(){ ... }); }); }, function(){ $(this).children().hide(400); } ); }); QUESTION: How does one insure that one list is closed before another is open, and that no two lists or sublists is open at the same time" Roddy
  9. QUESTION: What is the best way to trigger a script stored in a fetched file. BACKGROUND: I send a query string via an HTTPRequest to a file that upon confirmation loads a script containing AJAX calls. I want to know the best way to get the AJAX calls to run when the file in which they are contained is loaded into the file that contains the HTTPRequest. PROPOSAL: Someone on the internet suggested that the code be placed in an anonymous function that is triggered with the ( ) operator. //data.js function() { code to trigger } $.getScript('data.js', function(data) { (); } Does this make sense? What would you recommend? Roddy
  10. im editting a javascript of an audio player for HTML5, and it doesnt have any shuffle option, i wanted to add it manually and be activated by default. In the code i show, i show the functions that plays o passes to the next song, so you can see the function names im using. im actually studying web design (basic level) and i havent seen javascript yet, so i understand so basic how it works, so i can edit a few things from a copied source. I obviously googled what im asking here, but i couldnt find any answer that i can understand, or make it work, just found some stuff that make things harder, using strings in the names or things like that to shuffle the songs, adding a lot of (i think) unnecesary code. I need a function that skips a song a random number of times, or such. but i dont know how to do it Code: function playAudio() { song.play(); tracker.slider("option", "max", song.duration); $('.play').addClass('hidden'); $('.pause').addClass('visible'); } function stopAudio() { song.pause(); $('.play').removeClass('hidden'); $('.pause').removeClass('visible'); } // play click $('.play').click(function (e) { e.preventDefault(); playAudio(); }); // forward click $('.fwd').click(function (e) { e.preventDefault(); stopAudio(); var next = $('.playlist li.active').next(); if (next.length == 0) { next = $('.playlist li:first-child'); } initAudio(next); }); //autoplay window.onload = function(e) { playAudio(); };
  11. Please consider the following code and see if you can find anything wrong. The appended <link> does not appear to register the information contained in the stylesheet. You can observe the failure by clicking on the menu item Weekly Podcasts under Products in the page's navigation bar (left column) and then passing your cursor across the blank area between the subtitle "Weekly Podcast Host Page" at https://www.grammarcaptive.com/overview.html $("#podcasts").mouseover(function() { $(this).css({"cursor": "pointer", "font-weight":"800"}); }) .click(function() { $("#main").load("podcast_filler.html #podcasts_div"); $("<link/>", { rel: "stylesheet", type: "text/css", href: "_utilities/css/podcast_filler.css" }).appendTo("head"); $.ajax({ url: './_utilities/php/most_recent_podcast.php', // context: '#main', dataType: 'JSON', success: function(jsonData) { $.each(jsonData, function(key, object) { var podcast_number = jsonData.podcast_no_item; var podcast_title = jsonData.item_title; var podcast_desc = jsonData.item_description; var podcast_guid = jsonData.item_guid; var podcast_pubdate = jsonData.item_pubdate; $('#main span#pc_title').html(podcast_title); $('#main span#pc_desc').html(podcast_desc); $('#main span#pc_num').html(podcast_number); $('#main span#pc_pubdate').html(podcast_pubdate); var click_listen = 'podcast_hostpage.php?hash=' + podcast_guid + '&podcast_no=' + podcast_number; $('#pc_click_listen').attr('href', click_listen); }); } }); }) .mouseup(function() { $(this).css({"color": "#fadb9d","font-weight": "normal"}); $('body, html').animate({scrollTop: $('#main').offset().top},800); }); Roddy
  12. I have a process that runs every 30 seconds and i want my script to check if it is finished. this way my user doesn't have to wait an arbitrary 30 seconds if the request is submitted closer to the 30 second mark (5 seconds to process instead of the max 30). I tried a while loop and sending $.post within it but from my console logging it doesn't appear to process the while loop as intended var iii = 1; while(iii < 30){ console.log("Checking rcon queue for " + characterID + " (" + iii + ")"); //Code to wait 1 second before continuing. var start = new Date().getTime(); var end = start; while(end < start + 1000) { end = new Date().getTime(); } //Code to $.post to check the the queue is cleared $.post('scripts/rcon_queue.php', {cID: characterID}, function(response){ if(response == "1"){ console.log("Queue is not cleared."); } else { console.log("Queue is clear."); iii = 30; } }); iii++; } console.log("Loading info for character: " + characterID); Now i would expect this to end the while loop response is anything but "1". Which happened after 7 attempts in my most recent test. But this is not happening:
  13. I am trying to build a basic tool to display someones congress representative via zipcode. The API that I am trying to use is offered for free via: https://whoismyrepresentative.com The link to get the data via zipcode is: https://whoismyrepresentative.com/getall_mems.php?zip=31023 It can also be formatted for json like this: https://whoismyrepresentative.com/getall_mems.php?zip=31023&output=json I have read a ton of articles on how to display this data but the trouble I am having is getting the data to show up at all. My first attempt was based off w3schools example. When the button is clicked it should display the result in the empty div but when I replace the URL, it does not display. When you visit the URL directly the data is there. My JavaScript knowledge is fairly low so I will go line by line and maybe I am just misunderstanding something. $(document).ready(function(){ Gets the document ready for some jquery $("button").click(function(){ Sets up click function on `<button>` $.getJSON("https://whoismyrepresentative.com/getall_mems.php?zip=31023&output=json", function(results){ I hope this is what gets the data from the API URL $.each(results, function(i, field){ I'm not sure what this does but I am thinking this displays the field for 'results' $("div").append(field + " "); This will display the data in the empty `<div>` Full index.php code <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Find Your Representative</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $.getJSON("https://whoismyrepresentative.com/getall_mems.php?zip=31023&output=json", function(results){ $.each(results, function(i, field){ $("div").append(field + " "); }); }); }); }); </script> </head> <body> <button>Get JSON data</button> <div></div> </body> </html>
  14. absolutebeginner

    Accordion Javascript to change button text

    I have some W3.CSS accordions on a webpage based on this tutorial. They work fine, but I'd like to change the button text too (not just show/hide the div) When shown, I'd like the button to show "Click for details". When hidden, I'd like the button to show "Hide details". Thanks in advance for any assistance/advice you can give me.
  15. 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
  16. BACKGROUND: I have successfully integrated both pagination and the simplePagination paginator into my website. Now I must fine tune the integration so as to overcome several associated non-optimal conditions. In order to achieve it appears that I need to understand better the use of the variables and functions utilized with the AJAX request. Please consider the following pieces of code and answer the questions below. The JAVASCRIPT: .click(function() { $.ajax({ url: '_utilities/php/ajax_data_dscr.php', dataType: 'JSON', data: { 'podType': podType }, statusCode: { 404: function() { alert( "Page not found" ); }}, success: function (jsonData){ console.log(jsonData) $('#main').html(''); $.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>"); }); var collection = $(".paginate"); var collNum = collection.length; var perPage = 10; collection.slice(perPage).hide(); $("#pagn").pagination({ items: collNum, itemsOnPage: perPage, cssStyle: "light-theme", onPageClick: function(pageNum) { var start = perPage * (pageNum - 1); var end = start + perPage; // console.log(event); // console.log(pageNum); collection.hide().slice(start, end).show(); } }); } The HTML: <div id='main'>...</div><!-- end div#main --> <div id='pagn'>&nbsp;</div><!-- end div#pagn --> BACKGROUND: From the above code you can probably notice that the #main DIV is emptied before it is dynamically filled via jQuery's .append() method. The heading of the newly filled #main DIV should vary with the kind of information that is entered. To this end I created the following switch. Unfortunately, however, I cannot get it to work. Either the value of the podType variable is not being read, or the code itself has not been properly set into the AJAX routine. The following is an example of one of my attempts. beforeSend: function(podType) { $('#main').html(''); switch (podType) { case clausal: $('#main').html('<h1>Clausal Analysis</h1>'); break; case linear: $('#main').html('<h1>Linear Analysis</h1>'); break; case inversion: $('#main').html('<h1>Socratic Inversion</h1>'); break; case chrono: $('#main').html('<h1>All Categories</h1>'); break; } } QUESTION ONE: How do I access the key-value pair entered as the value of the data property? QUESTION TWO: How would you go about insuring that a new list heading is entered with each different value of podType. NOTE: You can visit the page by clicking on the words PROXY LINK at the bottom of http://www.grammarcaptive.com/sender_proxy.php In the navigation bar on the page that opens find the word Chronology, click on it, and then click on the phrase Podcast index ... This will show you a successful implementation of simplePagination and provide you with a visual understanding of what I am able and not able to achieve. Roddy
  17. IamMarvin1a

    Help me with Using JQuery AJAX code

    Hello. I made a WordPress plugin with a JQuery-AJAX/JSON code in a php file like this: $(document).ready(function(){ $.post(“/wp-content/plugins/SLMS/UserRecord.php”, { saveUserBtn: “Save”, FName: fname, LName: lname, UNumber: unumber, address: address, contact: contact, email: email }, function(data, status){ document.getElementById(‘userr-page-notice’).innerHTML = data; if(data.includes(“New record saved.”)) { document.getElementById(“userRecord”).reset(); } }); }); /** end of code */ I also notice that any user can view my javascript code with their own browser. I also noticed that any user/unauthorized user can copy these JQuery-AJAX/JSON code and pass/save/modify data to MySQL database using the link to my php file. I will also write the code for my php file: if(isset($_POST[‘saveUserBtn’]) and $_SERVER[‘REQUEST_METHOD’] == “POST”) { insertRecord(); } elseif(isset($_POST[‘searchUNBtn’]) and $_SERVER[‘REQUEST_METHOD’] == “POST”) { searchUNRecord(); } elseif(isset($_POST[‘updateUserBtn’]) and $_SERVER[‘REQUEST_METHOD’] == “POST”) { updateRecord(); } /** codes to access MYSQL Database */ /** end of code */ I notice that many developers also used these kind of JQuery-AJAX/JSON codes. I want to know what is the code to block unauthorized users to access/pass data to my php file when unauthorized users use JQuery/JSON code. I will also mention “web host cpanel File Permission” to see if this web server configuration can help.
  18. Philades

    Multiple Slideshows on one page

    Hi everyone. I need help. I am using this slideshow https://www.w3schools.com/howto/howto_js_slideshow.asp for a new site I'm building. I want to to put multiple slideshows on the same page. I can't seem to find out how to target each java script to each slideshow. What happens is that each "dot" will change the pictures on the same slideshow. Let me know if you need any other details. Thanks so much in advance!
  19. iwato

    Correct Grammar, Bad Message

    Please consider the two following sets of code and explain why the Javascript not work and suggest an alternative where possible. There are zero complaints from the Javascript console. None. And, the var podType is properly identified. I have checked with console.(log) The procedure does not even turnover for the final element. I am baffled. <script> $(document).ready(function() { $('li.podDex').each(function(){ var podType = $(this).attr('id'); $('#podType').mouseover(function() { $(this).css({"cursor": "pointer", "font-weight":"800"}); }) .mouseout(function() { $(this).css("font-weight", "normal"); }); $('#podType').mouseover(function() { $(this).css({"cursor": "pointer", "font-weight":"800"}); }) .click(function() { var chrono_var = $("#chronology_div").html(); $("#main").html(chrono_var); }) .mouseup(function() { $(this).css({"color": "#fadb9d","font-weight": "normal"}); $('body, html').animate({scrollTop: $('#main').offset().top},800); }); }); }); </script> <ul> <li id='linear' class='podDex'>Linear Analysis</li> <li id='clausal' class='podDex'>Clausal Analysis</li> <li id='inversion' class='podDex'>Socratic Inversion</li> <li id='chronology' class='podDex'>Chronology</li> </ul> Mind you, in isolation, when podType refers directly to the appropriate id attribute, what is included in the .each() function works fine! Roddy
  20. Hi there, I was following this a tutorial about adding a page fade-in once the page has loaded. It is set up so it works even if javascript is disabled, which is ideal. https://www.abeautifulsite.net/a-clean-fade-in-effect-for-webpages However i am trying to add another class the snippet to the script tag that appears immediately after the opening <body> tag: <script>document.body.className += ' fade-out'; $(".wrap").addClass(" fade-out");</script> However I am getting the following error: "Uncaught ReferenceError: $ is not defined". I am assuming this is because I am not calling in jquery in the header? But why then does it work fine without my additional snippet? Maybe I am taking the wrong approach here, let me know if this could work. Thanks
  21. DizzyDan

    Basic Push Menu with jQuery

    Project Code: https://codepen.io/Digitango/pen/VzyZyO Project Description: I created a pretty basic push menu using jQuery. What I want to achieve is to click the menu bars, push the main-content over and display the menu. Then close the menu when you either click the menu bars again, click the close icon or click anywhere off the menu. So far I handled all of this successfully, however, one thing I don't like is if you scroll down on the main-content, then click the menu bars the main-content goes back to the top. It does this because I use toggleClass to change to 'position: fixed;' for main-content when the menu is open. I use position: fixed because if I use 'position: absolute;' for main-content instead I get horizontal scroll bars. I can't seem to find a simple solution to not have horizontal scroll bars AND not bring the main-content back to the top when the menu is open. It's not terrible with position: fixed; but I would like to gain an understanding or maybe achieve this a better way rather then settling. Note: Mind you my JavaScript & jQuery knowledge is pretty limited so there is probably a better way to handle this but here is where I am at and I'm open to any suggestions.
  22. iwato

    Executing PHP after window.open

    RECENT DISCOVERY: I recently discovered a handy PHP function called show_source( ) and would now like to apply it in a particular sort of way. GOAL: I would like to open a new tab in my current window that shows the source code of a page that I have opened in the window. DILEMMA: Since PHP operates before a page is opened I am a lot confused about how to make this happen. This is what I have accomplished so far. $( document ).ready(function() { console.log( "ready!" ); $('.show_src a').on('click', function(event) { event.preventDefault(); var address = $(this).attr('href'); window.open(address); ... }); }); <li class='show_src'>The <a href='./composer/php_rss_generator/RSSGenerator/ItemInterface.php' title='' target='_blank'>Interface</a></li> <li class='show_src'>The <a href='./composer/php_rss_generator/RSSGenerator/Item.php' title='' target='_blank'>Class</a></li> I have tried a variety of ways to replace the three dots above including .ajax( ) and window.write( ) but nothing seems to work. Any ideas? Roddy
  23. I have created some js file to change the height of my header when a user scrolls through it. The goal is that the header starts at 90% of the window height (90vh in css) when the page is loaded and it shrinks down to 80px when a user starts scrolling down (if the user goes back to the top of the page it will again grow to 90%). Also I want a gif playing in the back behind the header. The code works, but when you scroll down/up it seems to be lagging, but I would like it to fluently do these actions. Can anyone can give me some hints on how to improve the speed? Here is my code for these actions: HTML <html> <body> <div id="header-back" class="col12"></div> <div id="header" class="col12"></div> <div id="main" class="col12"></div> </body> </html> CSS /****** GRID VIEW ******/ [class*="col"] { width: 100%; } @media only screen and (min-width: 850px) { .col1 {width: 8.33%;} .col2 {width: 16.67%;} .col3 {width: 25.00%;} .col4 {width: 33.33%;} .col5 {width: 41.67%;} .col6 {width: 50.00%;} .col7 {width: 58.33%;} .col8 {width: 66.67%;} .col9 {width: 75.00%;} .col10 {width: 83.33%;} .col11 {width: 91.67%;} .col12 {width: 100.00%;} .col {width: auto;} } * { font-family: Trebuchet MS; border: 0px solid black; box-sizing: border-box; } body { width: 100vw; min-height: 100vh; margin: 0; } /* HEADER */ #header { height: 90vh; min-height: 80px; max-height: 90vh; background-color: rgba(30,30,30,0.8); position: fixed; top: 0; left: 0; box-shadow: 0 0 15px rgb(0,0,0); z-index: 2; } #header-back { height: 90vh; min-height: 80px; max-height: 90vh; position: fixed; top: 0; left: 0; z-index: 1; background-image: url("https://media.giphy.com/media/wyBcwFyH2FpO8/giphy.gif"); background-position: bottom left; background-size: cover; } /* MAIN */ #main { min-height: 100vh; padding-top: 90vh; background-color: rgb(230,230,230); } Javascript // change header size on scroll $(document).ready(function(){ // variables var vh90 = $(window).height()*(9/10); var height, color, opacity; // control height of header on scroll $(window).scroll(function(){ height = vh90 - $(window).scrollTop(); opacity = 1 - ( (height-80) / vh90 ) * 0.2; color = "rgba(30,30,30," + opacity + ")"; $("#header").css({"height": height, "background-color": color}); $("#header-back").css({"height": height}); }); }); I have created a jsfiddle to show my idea, but in the fiddle it seems to be working fluently (I used another gif, but I don't think this is the problem because this gif gets loaded at the start and doesn't really go away?)
  24. Crack69

    JQuery Mobile With WEB API

    Would like to know if i can use JQuery Mobile Forms as front end for my web api service. If so examples would be helpful. Thanks in advance
  25. I recently used PHP's json_encode( ) function to covert an array created with PHP into a JSON encoded object, as the conversion appeared normal, I then assigned the value to a Javascript variable using PHP's echo construct and reproduced it with a JS alert. This too, appeared normal. My difficulty arose when I tried using the jQuery .map( ) method to convert my nested Javascript object into a nested Javascript array. I received the following error message in my Console: TypeError: e is not an Object. (evaluating 't-1 in e') Am I being foolish to believe that I need a nested array when I already have a nested object? If not, is there not a routine to perform this very conversion?
×