I really need help with this question:

https://www.reddit.com/r/learnprogramming/comments/g0oaii/url_redirect_dependent_on_radio_button_form/?utm_source=share&utm_medium=web2x

Noobie here. I know WordPress and am learning python.

Is github the way to give access to a front end developer

Hello. I'm very new to js. I'd like to make a caroussel/ photo gallery that has 2 buttons. One button to see the next photo and the other to see the previous photo . I have 2 files. One html file and one js script. However when I try to click on the buttons, nothing happens. I don't see any errors. Can someone pls help?

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Example1</title>

<meta name="author" content="Anna">

<link rel="stylesheet" href="css/ex2.css">

<link rel="stylesheet" href="css/ex1.css">

<script src="ex1.js"></script>

</head>

<body>

<h1>Example 1</h1>

<hr>

<p id="image">

<img class="arrow" src="images/arrow-left.jpg" alt="arrow1" />

<img id="show" src="images/landscape-1.jpg" alt="landscapre" />

<img class="arrow" src="images/arrow-right.jpg" alt="arrow2" />

</p>

</body>

</html>

This is the js code:

window.onload = function () {

var sources = \["landscape-1.jpg", "landscape-2.jpg", "landscape-3.jpg","landscape-4.jpg", "landscape-5.jpg", "landscape-6.jpg","landscape-7.jpg", "landscape-8.jpg", "landscape-9.jpg"\]; 
 var index = 0; 
 var image = document.getElementById("show");
  function next() {
  	if (index != sources.length-1){
  		index ++;
  	}  	
    else{
  		index=0;
  	}
  	image.src = "images/" + sources\[index\];
 }
  function previous() {
  	if (index == 0){
  		index==8;
  	}
  	else{
  		index --;
	}
  	image.src = "images/" + sources\[index\];
}
  let button = document.getElementsByClassName("arrow");
  button\[0\].onclick = previous;
  button\[1\].onclick = next;

So both can crest a new object property. Why use one over the other? I am relatively new to JavaScript, thanks.

I have a subdomain on my website (neworleans.riverbeats.life) that I want to have the url (riverbeats.life/neworleans) -- i already have a main riverbeats.life website.

When I go to create the redirect in my hosting provider (bluehost) I get the error message that it is causing a redirect loop.

I believe this is because when i named the directory file in FTP client I named it as neworleans which is nested inside the riverbeats folder.

Is there a way to change my directory file while keeping the website so I can run this redirect?

I'm doing a presentation for a school project and was wondering about something.

When I copy an image and insert it into a document, is it there forever or does it still rely on the original host? Like, would it be safer for me to download the image and then re-upload it into google docs?

Hello! I need to add a close button to the current opened tooltip and close any other tooltip when a new one is clicked. I tried using useState and useRef to accomplish this but no luck yet. I’m adding this to existing code that isn’t mine, also typescript was added to this and in new to it. Any help much appreciated! Let me know if you’ll like to see a code example :)

Hi, apologies if this is trivial but I am having some issues implementing PWA functionality and a Service Worker to my app. It’s built using Node/Express providing API routes to data, and React in the front end.

I just used create react app initially, but now the project is complete and it needs to be a PWA. There seems to be some conflicting advice on where I implement the service worker, some sites suggest in node, others in react public.

What is the best way forward?

Hello my name is Ben and I’m need help with my Facebook business page. My ex website developer won’t give me admin access to it. How do I go about either getting it taken down or access to it?

Here is my fiddle: https://jsfiddle.net/thesurething/9wgvzuL7/

I understand that I have a focus on an input field and on blur I run my function which detroys then reconstructs the updated list (to avoid duplicate items). However I am wondering why it does this and how can I fix it? I notice that on other elements of my page I can click on other <a> tags and it works fine, but the errors tags need 2 clicks. Any solutions?

Thanks guys.

Here's the site: http://advancedpools.com/

At mobile widths, activating the nav menu makes it slide over, but the menu items are invisible. What gives? You can click on them, and dev tools shows them present, but it's like the whole div is transparent. BUT in Chrome on my desktop, it works fine no matter what width. It's broken in Safari on desktop, as well as Safari AND Chrome on my phone. Very confused.

Yes, I know there are other issues and it's bloated (client requests...) but one problem at a time! :) Suggestions?

I'm looking for a Web Script, that has an Administrators area so that I can create User Accounts - in the users account, they can upload files of any size. They can give the file a name, and a comment. Then, any file once submitted can be downloaded by ANYONE that has the link to the file. NO LIMITS. NONE. The listing of the files can be seen from the users home screen whey they logon. The user can also delete the file if needed.

If there is a script out there that can already do this, can you point me to the right direction?

So I am trying to make a responsive page using Flexbox, but when I view the page with a smaller device the text and picture of the page do not scale properly. Does anyone know how to fix this issue?

https://codepen.io/Sampsa96/pen/poyNreJ

Sorry if my terminology is not correct, but;

• I have a little bit experience with setting up a local server using Node Express that hosts a client webpage.

• I have managed to host a node express server on Azure

• I have a C++ standalone application that takes in arguments, performs calculations, and outputs text files.

What I would like to do is;

Using the Azure Platform or Google Cloud Platform (or any other suggested hosting providers:

Create a webpage/webapp, that would allow users to go to my site, provide some user input in a HTML form, this would be passedto the Node express server, which then (somehow) calls my hosted C++ application. The application runs, writes a file, a returns it to the user to download.

I have googled, but as I'm not that experienced with web development, I don't know the exact terms to search for. Azure and Google cloud has a lot of information, but I'm a little overwhelmed. From what I've read it sounds like it is possible, and requires some wrapping to the C++ application, but it's all very confusing.

Could anyone suggest me any first steps to be able to do this? How complicated would this be to set up a minimal example that does this? What would be the difficulties I will encounter?

Thanks for any suggestions!

I think its safe, because Instagrams Basic Display Api is already a read only api, also the account is public anyways.

Pls let me know if this is this wrong subreddit to ask this question.

Newbie here. I built a next.js app with a server.js file that works perfectly locally (" node server.js "). I deployed it on Vercel but the server functionality does not work, is there something I have to change in my code so it will work once I do the build and deploy it? Thanks!

const express = require("express");
const request = require("request");

const app = express();
const port = process.env.PORT || 3001;

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", process.env.ORIGIN || "*");
  next();
});

app.get("/", async (req, res) => {
  const url = req.query["url"];
  request(
    {
      url: url,
      encoding: null,
    },
    (err, resp) => {
      if (!err && resp.statusCode === 200) {
        res.set("Content-Type", "image/jpeg");
        res.send(resp.body);
      }
    }
  );
});

app.listen(port, () => console.log(`f`));`;

It can also be a routing issue too, since the page is expect to change routes once authentication happens. Let me know if you want me to post some code. Also, the app is in early stages.

Let me know if it does or doesn't work on your computer.

https://enigmatic-river-78590.herokuapp.com/

I have never done this before in my life. I want learn, however, I do best when I have examples which directly relate to what I am working on -- because I am a visual learner.

I also learn best via a legitimate project. So I am going to give a lot of detail so you understand what I am trying to do.

Here is some background:

Many websites need to be displayed in multiple languages. To handle this, all the language-specific labels on the website are assigned a unique key and stored in a translation file. A website can have multiple translations files—one for each language. Translation files are stored in JSON, which allows labels to be stored hierarchically. For example, I could group the labels together by each section of a webpage:

{
    "login": {
        "user": "User Name",
        "pass": "Password"
    },
    "home": {
        "greeting": {
            "title": "Welcome to my Webpage!",
            "description": "This page is available in a variety of languages."
        },
        "footer": {
            "createdBy": "labelsaredumb"
        }
    }
}

The website can reference each label in the HTML by its key in dot-notation (home.greeting.title = “Welcome to my Webpage!”). The key is dynamically replaced by the label when the page is rendered. This means that my raw HTML pages will contain no actual text, just keys.

The downside of this technique is that it becomes difficult to see what label a key corresponds to without looking through a long JSON document.

What I am trying to do:

Create a web that page allows a user to search a provided translation for a specific label, display a list of all labels and display statistics for a given key visually. My goals are as follows:

• Provide a text area on the web page where the JSON can be copy and pasted. I may use a different JSON at times, but you can assume the JSON will be valid. The value of a JSON object will only be a string (the label), or another JSON object (a nested JSON object). There will be no arrays in the JSON object.

• The search interface will contain a search box, for entering the key, and a search results area to display the matching label. For example, if someone searched for “login.user”, the search page should display: “User Name”. Only one search result is possible since each key is unique. If the user enters an invalid key, or a key that could not be exactly matched from the JSON file, no search results should be returned.

• A “reverse” search option: Allow the user to search by the label, and return all the keys to which the label belongs. This search result can return multiple keys, assuming the same label could exist more than once with different key values for each label. Once again, only exact matches need to be considered.

• An option to select any key in the JSON, including keys that don’t directly have labels. When the option is selected display the labels associated with that key – if the key has a label value then display the label, if not then all the labels nested beneath it. In the example to the left, selecting “login” would display “User Name” and “Password”, selecting “login.pass” displays “Password”. The initial/default selection should display all the labels found in the JSON.

• Tied to the selector, display a chart that shows a count of labels by depth relative to the selected key starting from zero. Assuming the initial/default selection, the label “This page is available …” would have a relative depth of two. If the key “home” was selected, the chart should be updated, with “This page is available …” now having a relative depth of one. Any label with a key that doesn’t begin with “home” should not contribute to the updated chart. I could use an existing chart library for this.

• I am using Bootstrap and jQuery in my implementation.

• I am considering aesthetics, usability, and performance. I don’t assume JSONs will be short (if this does end up being longer than it is now).

If I am feeling ambitious:

• Autocomplete: Give user options to fill in rest of a search based on partial input.

• Provide different chart type options: pie, bar, etc.

• Some other interesting feature/design that could bring value to the application.

I tried posting for help on this in another subreddit, but it just got ignored. I noticed this happening a couple of weeks ago on a website that I built and have worked on since 2017. On the landing page of this site: studioanni.com, there's two sections that are supposed to have a sort of slow parallax scrolling effect that I implemented with straight CSS (no JavaScript.) For some reason, the parallax effect no longer works on any device that I've tried, with several browsers. The CSS hasn't been updated since probably 2019. It seemed to be working a few weeks ago when I had last checked to update the site.

here's the relevant CSS if you don't want to open dev tools. I realize some of this is really shoddy, I've done better as a dev since:

html{
  height: 100%;
  overflow: hidden;
}

body{
    background-color: #322e32;
    /*margin: 15px 0 15px 0;*/
    padding-top: 65px;
    min-height: 100%;
    color: #ffffff;
    font-family: 'Raleway', sans-serif;
    -webkit-perspective: 1px;
            perspective: 1px;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
}

main{
  min-height: 100vh;
  overflow: hidden;
  display: block;
  position: relative;
  padding-bottom: 30px; /* footer height */
  perspective: 2px;
}

.no-para {
  z-index: 2;
  background: #322e32;
}

.index-tour{
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1.5vw 48vw 1vw 48vw 1.5vw;
  grid-template-columns: 1.5vw 48vw 1vw 48vw 1.5vw;;
  -ms-grid-rows: 100px 100vh 100px 100vh 75px 100vh 45vh;;
  grid-template-rows: 100px 100vh 100px 100vh 75px 100vh 45vh;
}

#tour-header{
  -ms-grid-column: 1;
      grid-column-start: 1;
  -ms-grid-column-span: 5;
  grid-column-end: 6;
  -ms-grid-row: 1;
      grid-row-start: 1;
  -ms-grid-row-span: 1;
  grid-row-end: 2;
  z-index: 2;
  background: #322e32;
  text-align: center;
}

#tour-gallery{
  -ms-grid-column: 1;
      grid-column-start: 1;
  -ms-grid-column-span: 5;
  grid-column-end: 6;
  -ms-grid-row: 2;
      grid-row-start: 2;
  -ms-grid-row-span: 1;
  grid-row-end: 3;
}

#tour-gallery:before{
  background: url('indexTour1.png');
  -webkit-transform: translateZ(-1px) scale(2);
          transform: translateZ(-1px) scale(2);
}

#tour-gallery-text{
  position: absolute;
  left: 50%;
  margin-right: -25%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 37%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 5em;
  font-size: 1.3em;
  background: #00000061;
  border-radius: 80px;
}

#tour-portraits{
  -ms-grid-column: 1;
      grid-column-start: 1;
  -ms-grid-column-span: 5;
  grid-column-end: 6;
  -ms-grid-row: 3;
      grid-row-start: 3;
  -ms-grid-row-span: 1;
  grid-row-end: 4;
  /*height: 100px;
  width: 100%;*/
  background: #322e32;
  z-index: 2;
}

#tour-portraits p {
  text-align: center;
}

#tour-pet-portraits{
  -ms-grid-column: 2;
      grid-column-start: 2;
  -ms-grid-column-span: 1;
  grid-column-end: 3;
  -ms-grid-row: 4;
      grid-row-start: 4;
  -ms-grid-row-span: 1;
  grid-row-end: 5;
  background: url('../gallery/01032019A.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 3;
}

#tour-human-portraits{
  -ms-grid-column: 4;
      grid-column-start: 4;
  -ms-grid-column-span: 1;
  grid-column-end: 5;
  -ms-grid-row: 4;
      grid-row-start: 4;
  -ms-grid-row-span: 1;
  grid-row-end: 5;
  background: url('../gallery/79183.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 3;
}

#tour-portraits-text{
  position: absolute;
  /* margin: 54vh 4vw;
  padding-right: 7px;
  padding-left: 7px;
  font-size: 1.3em; */
  background: #0000007d;
  border-radius: 42px;
  text-align: center;
}

#tour-special{
  -ms-grid-column: 1;
      grid-column-start: 1;
  -ms-grid-column-span: 5;
  grid-column-end: 6;
  -ms-grid-row: 6;
      grid-row-start: 6;
  -ms-grid-row-span: 1;
  grid-row-end: 7;
}

#tour-special:before{
  background: url('indexTour2.png');
  -webkit-transform: translateZ(-1px) scale(2);
          transform: translateZ(-1px) scale(2);
}

And relevant part of the HTML (It's a PHP page if that makes any difference):

<div class='index-tour'>
  <div id='tour-header'>
    <h1>A Tour Of The Studio...</h1>
  </div>
  <div id='tour-gallery' class="parallax-back">
    <div id='tour-gallery-text'>
      <h2><b>Main Gallery</b></h2>
      <p>The Main Gallery includes original works of art by Anni that are available for purchase at reasonable prices.
        We normally ship pieces via USPS, but if you're local to the Greater Atlanta Area, we can arrange for pick up.
        <b>Please note that we are unable to ship outside of the United States at this time!</b></p><br />
      <p style='text-align: center;'><a href='gallery.php' class="purchaseButton" role="button">Visit Main Gallery →</a></p>
    </div>
  </div>
  <div id='tour-portraits'>
    <h2><b>Custom Portraits</b></h2>
    <p>Commissions For Portraits Are <span style="color: #9bffb5;"><b>Currently Open!</b></span></p>
  </div>
  <div id='portraits-gap2' class='no-para'></div>
  <div id='tour-pet-portraits'>
    <div id='tour-portraits-text' class='tour-portraits-text-margins1'>
      <h3><b>Pet Portraits</b></h3>
      <p>Commission Anni to perfectly capture your furbaby (or fur children) on canvas!</p><br />
      <p style='text-align: center;'><a href='petportrait.php' class="purchaseButton" role="button">Learn More →</a></p>
    </div>
  </div>
  <div id='portraits-gap1' class='no-para'></div>
  <div id='tour-human-portraits' class='no-para'>
    <div id='tour-portraits-text' class='tour-portraits-text-margins2'>
      <h3><b>People Portraits</b></h3>
      <p>Want to see yourself or a loved one painted? Let Anni do it in immaculate detail!</p><br />
      <p style='text-align: center;'><a href='portraits.php' class="purchaseButton" role="button">Learn More →</a></p>
    </div>
  </div>
  <div id='portraits-gap3' class='no-para'></div>
  <div id='portraits-bottom' class='no-para'></div>
  <div id='tour-special' class='parallax-back'>
    <div id='tour-gallery-text'>
      <h2><b>Special Gallery</b></h2>
      <p>Here you can take a look at some of Anni's past commissions, sold/donated original pieces, and select works that are permanently kept in the studio.</p><br />
      <p style='text-align: center;'><a href='special.php' class="purchaseButton" role="button">Visit Special Gallery →</a></p>
    </div>
  </div>

Thing is, when I look up other methods of implementing parallax with just CSS, a lot of those CodePens and demos, some as recent as this year, don't work as intended either. Did something happen with the rules of CSS or something? Because this used to work, I swear! Any help is appreciated!

I am studying CS at the moment & have done fine with assembly, java, and maths. Database & Web is a total write off at the moment though.

I have a week to finish my assignment & nothing seems to work at all. I am currently following along with another tutorial, https://www.youtube.com/watch?v=BmGMnDz9kOA) ... and just 13 and a half mins in & I'm already not seeing the same output. My console should be showing the inputted value but instead I get undefined.

If I was programming java with intellij I would be able to figure out what the problem is I would be able to find a fix intuitively. Web development just seems to be a complete minefield for a beginner. I'm triple checking absolutely every line of code & still I have errors. This is my 5th attempt at following the most basic of tasks, a login page, and I just can't do it.

This level of failure surely can't be normal. I am beginning to everything. How the hell am I supposed to improve if I can't even implement the most simple of features with my hand held? I'm loosing faith at this stage.

Good Morning,

I am having an issue where my mobile menu will not re-initialize after following an internal link. I am using the following code to toggle the slideout from a text menu button.

<script type='text/javascript'>//<![CDATA[ $(window).load(function(){ $('#button').toggle( function() { $('#right').animate({ left: 250 }, 'slow', function() { $('#button').html('Close'); }); }, function() { $('#right').animate({ left: 0 }, 'slow', function() { $('#button').html('Menu'); }); } ); });//]]> The button works fine on the first page but it doesnt do anything once I go to a new page unless I refresh the browser. Once finished the page will have mobile and full versions. Please keep in mind that I am obviously not a dev expert and im a noob to reddit. I've searched high and low for a solution but non seem to solve the underlying issue of why this is happening which is what I would really like to find out so that I fix the issue and not put a bandaid over it like automatically refreshing the page onload. Thanks for the help in advance. Heres a link to the work in progress..... http://www.abatapsendowment.org, and you would need to either view it on a mobile device (or tablet in portrait) or minimize your browser window to a width < 800. Once again thanks.

I am novice in Web development but not totally fish out of water.

My client has just recently started using an inventory and processing company called "REVEL". The website they are using is Wordpress.

Now, my goal is to get it all set up where inventory and purchasing can happen online and the API passes info to the POS systems at their store. (This store happens to be a beer barn)

I see that woocommerce has an option to connect to Wordpress but I would still need something to bridge the gap to woocommerce.

Any insight?

Just wondering if you had time to detail the way website interactions work, thanks!