DizzyDan
-
Posts
261 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Everything posted by DizzyDan
-
Just to update this: So it seems this was a more complicated problem so I had to work this out in smaller pieces. I was getting a CORS error because I was requesting the json from a different domain with jQuery, I learned that you can't do that... With a sprinkle of PHP I was able to get the json data and feed it to a file on my server, so I guess that's like using my server as a proxy. This seemed to work. I removed the click function and created a form where the user can enter their zipcode This is probably sloppy but it did work! index.php <!DOCTYPE html> <html lang="en-US"> <head> <title>Find Your Representative</title> </head> <body> <form action="/results.php" method="get"> <p>Enter Your Zipcode</p> <input name="zipcode" type="text" /> <input type="submit" /> </form> </body> </html> reps.php <?php // Get zipcode from url (for my usage it will be requested from results.php) $_GET['zipcode']; // Make zipcode intp a variable so we can insert it into our API request link $zipcode = $_GET['zipcode']; // Variable for our request to the API with zipcode variable inserted into the link $jsonURL = "https://whoismyrepresentative.com/getall_mems.php?zip={$zipcode}&output=json"; // This is the curl info needed to request the API data $curl_handle = curl_init( $jsonURL ); \curl_setopt($curl_handle, \CURLOPT_RETURNTRANSFER, true); // Variable for the received json data $jsonData = curl_exec($curl_handle); // print the data to the page echo $jsonData; ?> results.php <!DOCTYPE html> <html lang="en-US"> <head> <?php // Get zipcode from url sent by form on homepage $_GET['zipcode']; // Make zipcode intp a variable so we can insert it into our API request link $zipcode = $_GET['zipcode']; // I insert this directly into the url string in my js, not sure if that is the best approach but it did work! ?> </head> <body> <h1></h1> <div class="results"> <!-- Output area --> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> function setupPage() { loadJSONData(); } function loadJSONData() { var user_zipcode = "<?php echo $zipcode; ?>" var json_url = "/reps.php?zipcode=" + user_zipcode; $.getJSON(json_url, addJsonToPage); } function addJsonToPage(jsonResults) { var representativeList = extractRepresentativeFromJsonResults(jsonResults); $.each(representativeList, addRepresentativeToPage); } function extractRepresentativeFromJsonResults(jsonObject) { return jsonObject.results; } function addRepresentativeToPage(arrayIndex, aRepresentative) { var divElementCollection = $("div.results"); var repName = "<div class=\'name\'>" + aRepresentative.name + "</div>"; var repPhone = "<div class=\'phone\'>" + aRepresentative.phone + "</div>"; divElementCollection.append(repName); divElementCollection.append(repPhone); } $(document).ready(setupPage); </script> </body> </html>
-
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>
-
Originally I thought it might have been a jQuery issue but this might make more sense in the CSS thread.
-
Like to the body tag? body{ overflow-x: hidden; } This seems to do the trick. Edit: Just wanted to clarify I had to also change .push-open from position:fixed; to position: absolute; Edit II: I also have to add a to .menu incase the menu height was taller then the window: .menu{ position: fixed; height: 100%; overflow-y: scroll; }
-
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.
-
Looks normal to me, can you provide a screenshot of the issue?
-
OK figured it out! The starting navigation #sticky-header Is a block level element, which is all fine and dandy till you scroll past the menu and I add the class .stuck With the style of position: fixed; Now I want it to be fixed so the menu stays with the user as they scroll BUT fixed makes it lose the block level element causing the space change that made it not line up correctly. Sooooo, now for the solution! I added float: left; To my starting styles for #sticky-header AND added padding-top: 140px; To the next element to compensate for the height of the now fixed menu and viola! If you can think of a better alternative let me know!
-
Do you have a live example? You can use Chromes inspector tool (CTRL + SHIFT + I) to see which class is working and which is crossed out.
-
So I did try that but when I add: #why-amac{ margin-top: 100px; } And click that same "Why AMAC" link the header still covers that same area but if I scroll up the space will be there.
-
I am developing a single page website that scrolls to each section when selected, live example: http://sandbox.digitango.com/ The issue I am having is with the sticky header, when you click the first link "Why AMAC" it will send you to the first section BUT when the header changes to fixed position it covers the content. I searched google reading a ton of articles but nothing seemed to address this issue, maybe I am missing the correct term for what my issue is. Is there any solution you know of that can fill the gap for when the header changes to fixed? - Image one - what the problem looks like - Image two - how I would like it to look
-
Ahh that worked, forgot about that sneaky 's' # Force WWW RewriteCond %{HTTP_HOST} !^www\.creativejuicesmusic\.com [NC] RewriteRule (.*) https://www.creativejuicesmusic.com/$1 [R=301,L] Thanks for all the help!
-
OK so I placed this at the very top of the htaccess file # Force WWW RewriteCond %{HTTP_HOST} !^www\.creativejuicesmusic\.com [NC] RewriteRule (.*) http://www.creativejuicesmusic.com/$1 [R=301,L] # Force HTTPS RewriteEngine On RewriteCond %{HTTPS} off RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] But now in google page speed insights it throws this at me: I thought doing this via htaccess was the correct kind of fix for this.
-
This code works for the www but for some reason when this code is applied and you enter creativejuicesmusic.com int the web browser it takes you to: http://www.creativejuicesmusic.com/wp-content/cache/page_enhanced/creativejuicesmusic.com/_index.html_gzip instead of http://www.creativejuicesmusic.com So something funky is going on. I moved the gzip code to go after the wordress code and everything seems to check out.
-
I am using WordPress and trying to redirect to www. I added the line below to my htaccess file and the redirect works but it send the URL here: http://www.creativejuicesmusic.com/wp-content/cache/page_enhanced/creativejuicesmusic.com/_index.html_gzip RewriteCond %{HTTP_HOST} ^creativejuicesmusic.com [nocase] RewriteRule ^(.*) http://www.creativejuicesmusic.com/$1 [last,redirect=301] This is my full htaccess file # BEGIN W3TC Browser Cache <IfModule mod_deflate.c> <IfModule mod_filter.c> AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/bmp application/java application/msword application/vnd.ms-fontobject application/x-msdownload image/x-icon image/webp application/json application/vnd.ms-access application/vnd.ms-project application/x-font-otf application/vnd.ms-opentype application/vnd.oasis.opendocument.database application/vnd.oasis.opendocument.chart application/vnd.oasis.opendocument.formula application/vnd.oasis.opendocument.graphics application/vnd.oasis.opendocument.presentation application/vnd.oasis.opendocument.spreadsheet application/vnd.oasis.opendocument.text audio/ogg application/pdf application/vnd.ms-powerpoint image/svg+xml application/x-shockwave-flash image/tiff application/x-font-ttf application/vnd.ms-opentype audio/wav application/vnd.ms-write application/font-woff application/font-woff2 application/vnd.ms-excel <IfModule mod_mime.c> # DEFLATE by extension AddOutputFilter DEFLATE js css htm html xml </IfModule> </IfModule> </IfModule> <FilesMatch "\.(html|htm|rtf|rtx|svg|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|SVG|TXT|XSD|XSL|XML)$"> <IfModule mod_headers.c> Header append Vary User-Agent env=!dont-vary </IfModule> </FilesMatch> <FilesMatch "\.(bmp|class|doc|docx|eot|exe|ico|webp|json|mdb|mpp|otf|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|pot|pps|ppt|pptx|svg|svgz|swf|tif|tiff|ttf|ttc|_ttf|wav|wri|woff|woff2|xla|xls|xlsx|xlt|xlw|BMP|CLASS|DOC|DOCX|EOT|EXE|ICO|WEBP|JSON|MDB|MPP|OTF|_OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|POT|PPS|PPT|PPTX|SVG|SVGZ|SWF|TIF|TIFF|TTF|TTC|_TTF|WAV|WRI|WOFF|WOFF2|XLA|XLS|XLSX|XLT|XLW)$"> <IfModule mod_headers.c> Header unset Last-Modified </IfModule> </FilesMatch> # END W3TC Browser Cache # BEGIN W3TC Page Cache core <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteCond %{HTTP:Accept-Encoding} gzip RewriteRule .* - [E=W3TC_ENC:_gzip] RewriteCond %{HTTP_COOKIE} w3tc_preview [NC] RewriteRule .* - [E=W3TC_PREVIEW:_preview] RewriteCond %{REQUEST_METHOD} !=POST RewriteCond %{QUERY_STRING} ="" RewriteCond %{REQUEST_URI} \/$ RewriteCond %{HTTP_COOKIE} !(comment_author|wp\-postpass|w3tc_logged_out|wordpress_logged_in|wptouch_switch_toggle) [NC] RewriteCond "%{DOCUMENT_ROOT}/wp-content/cache/page_enhanced/%{HTTP_HOST}/%{REQUEST_URI}/_index%{ENV:W3TC_PREVIEW}.html%{ENV:W3TC_ENC}" -f RewriteRule .* "/wp-content/cache/page_enhanced/%{HTTP_HOST}/%{REQUEST_URI}/_index%{ENV:W3TC_PREVIEW}.html%{ENV:W3TC_ENC}" [L] </IfModule> # END W3TC Page Cache core # EXPIRES CACHING # <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 1 week" </IfModule> # EXPIRES CACHING # # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteCond %{HTTP_HOST} ^creativejuicesmusic.com/ RewriteRule ^(.*)$ http://www.creativejuicesmusic.com/$1 [R=301,L] RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule> # END WordPress
-
So the script would be for creating the XML Sitemap for the 1 million records? Do you know of a good resource for a tutorial or examples of some XML sitemaps for a database?
-
So this would have to broken down into approx. 20 separate site map files? However my real question is how important would it be to build these sitemaps? If the Database alone not enough?
-
The idea is that most people looking of these parts will know the part number and just copy and paste that part number into a google search. Its low competition and his would most likely show up on the first page if not be the only result. Do you think a sitemap with a link to every part number would be necessary or worth the investment?
-
Thank you for your reply! They do already have a search feature they just want to update it with the new 1 million parts. Interestingly though, he brought up that his previous developer said he would need to build a script (for approx $1,500) that would handle indexing the new 1 million parts with google. I just don't understand what this script will actually do in order to index his database with google, any thoughts?
-
I have a family member that runs a wholesale electrical part company where they have a database with hundreds of thousands of parts. They asked me if I could create a website so people can search for their parts via web search. They also mentioned they spoke to someone years ago that indexing this was an issue which is why they haven't moved forward yet, saying that you can only submit so many pages to google. I was under the impression that google automatically indexes your site but I have never worked on something of that scale before. Is this true? Is there a way to confirm all the parts will get indexed? Is there a pay per 1000 to ensure indexing?
-
OK, thanks!
-
I have a php password reset form that when used many users do not receive the email: http://amac.us/member-login-help/ It works for most major email providers but AOL email and Apple email users don't receive them nor are the in their spam or junk folders. Any advice on how to fix this on going issue?
-
OK I think that did the trick! // toggle Discounts and Offers categoriesfunction slideonlyone(thechosenone) { $('.newboxes2').each(function(index) { if ($(this).attr("id") == thechosenone) { $(this).fadeIn(600); } else { $(this).fadeOut(0); } });}// start first caltegory with active class$(function(){$('li.regular').eq(0).addClass("active"); });// replace regular active class on categories$('li.regular').click(function(){ $('li.regular').removeClass("active"); $(this).addClass("active");});
-
I tried that but it doesn't remove it when you click the next category https://amacsmallbiz.com/benefits-test/
-
OK I got the addClass to work, how can I have the first <li> start with the active class? Script // toggle Discounts and Offersfunction slideonlyone(thechosenone) { $('.newboxes2').each(function(index) { if ($(this).attr("id") == thechosenone) { $(this).fadeIn(600); } else { $(this).fadeOut(0); } });}// active class on benefits menu$('li.regular').click(function(){ $('li.regular').removeClass("active"); $(this).addClass("active");}); HTML <ul class="benefit-cat-wrap col-md-3"> <li class="benefit-cat regular"> <a id="myHeader1" href="javascript:slideonlyone('newboxes1');" ><h3>Benefits & Savings</h3></a> </li> <li class="benefit-cat regular"> <a id="myHeader2" href="javascript:slideonlyone('newboxes2');" ><h3>Business Insurance Programs</h3></a> </li> <li class="benefit-cat regular"> <a id="myHeader3" href="javascript:slideonlyone('newboxes3');" ><h3>Employer Sponsored Health & Life Insurance</h3></a> </li> <li class="benefit-cat regular"> <a id="myHeader4" href="javascript:slideonlyone('newboxes4');" ><h3>Other</h3></a> </li> </ul>
-
I created a toggle with several categories which works perfectly but I want the active category to have it's own class. Can you help me out or point me in a direction of a tutorial that can bring clarity for me. Page URL: https://amacsmallbiz.com/benefits-test/ Script // toggle Discounts and Offersfunction slideonlyone(thechosenone) { $('.newboxes2').each(function(index) { if ($(this).attr("id") == thechosenone) { $(this).fadeIn(600); } else { $(this).fadeOut(0); } });} HTML <ul class="benefit-cat-wrap col-md-3"> <li class="benefit-cat"> <a id="myHeader1" href="javascript:slideonlyone('newboxes1');" ><h3>Benefits & Savings</h3></a> </li> <li class="benefit-cat"> <a id="myHeader2" href="javascript:slideonlyone('newboxes2');" ><h3>Business Insurance Programs</h3></a> </li> <li class="benefit-cat"> <a id="myHeader3" href="javascript:slideonlyone('newboxes3');" ><h3>Employer Sponsored Health & Life Insurance</h3></a> </li> <li class="benefit-cat"> <a id="myHeader4" href="javascript:slideonlyone('newboxes4');" ><h3>Other</h3></a> </li></ul><div class="benefit-sect-wrap cold-md-9"> <div class="benefit-sect newboxes2" id="newboxes1"> <p>First Category</p> </div> <div class="benefit-sect newboxes2" id="newboxes2"> <p>Second Category</p> </div> <div class="benefit-sect newboxes2" id="newboxes3"> <p>ThirdCategory</p> </div> <div class="benefit-sect newboxes2" id="newboxes4"> <p>Forth Category</p> </div> </div>
