jbs

27 minutes ago, dsonesuk said:

Instead of input for Total, why not use a element such as div, then use content: to add $ symbol

            #PicExtPrice {min-width: 200px; display: inline-block; border: 1px ridge #ccc;}
            #PicExtPrice:before {content: "$"; }

<div id="PicExtPrice">0</div>

change js to

document.getElementById("PicExtPrice").innerHTML=total;

 

That works great, guess I was way off trying to make changes within js itself to force the "$" to display. I swear I'm almost done bugging you guys with these silly simple questions.

Hello, I'm currently trying to put together a simple javascript calculator. The example I've found works great but I seem to be unable to get two pretty important changes to take place.
The first thing I'm trying to do is get a $ symbol inside the total box, aligned left before the total (and also have the default value before changing anything to display "$0").
The other thing would be getting the "input-text qty text" class to have an effect on the total price. I appreciate any help in advance.

<FORM Name="myform">
    <SELECT NAME="memoryItem" onChange="calculatePrice()" id="memoryItem">
       <OPTION value="0">Select One Choice from List-Memory Upgrade</OPTION>
       <OPTION value="49">8 GB add $49</OPTION>
       <OPTION value="98">12 GB add $98</OPTION>
       <OPTION value="159">16 GB add $159</OPTION>
    </SELECT>

    <SELECT NAME="hddItem" onChange="calculatePrice()" id="hddItem">
       <OPTION value="0">Select One Choice from List-HDD Upgrade</OPTION>
       <OPTION value="109">1 TB HD add $109</OPTION>
       <OPTION value="150">1.5 TB HD add $150</OPTION>
       <OPTION value="199">2 TB HD add $199</OPTION>
       <OPTION value="299">250 GB SSD add $299</OPTION>
    </SELECT>

    <SELECT NAME="networkItem" onChange="calculatePrice()" id="networkItem">
       <OPTION value="0">Select One Choice from List- Network Upgrade</OPTION>
       <OPTION value="109">56K V90 or X2 Modem add $109</OPTION>
       <OPTION value="79">10/100 NIC add $79</OPTION>
       <OPTION value="279">Combo Modem and NIC add $279</OPTION>
    </SELECT>
</FORM>

<input type="number" class="input-text qty text" step="1" min="1" max="" name="quantity" style="width: 62px; color: #000" value="1" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" />
<INPUT type="text" id="PicExtPrice" Size=8>

<script>

 function calculatePrice(){

      //Get selected data  
      var elt = document.getElementById("memoryItem");
      var memory = elt.options[elt.selectedIndex].value;

      elt = document.getElementById("hddItem");
      var hdd = elt.options[elt.selectedIndex].value;

      elt = document.getElementById("networkItem");
      var network = elt.options[elt.selectedIndex].value;

      //convert data to integers
      memory = parseInt(memory);
      hdd = parseInt(hdd);
      network = parseInt(network);

      //calculate total value  
      var total = memory+hdd+network; 

      //print value to  PicExtPrice 
      document.getElementById("PicExtPrice").value=total;

 }

</script>

5 hours ago, dsonesuk said:

Replace

  <div class="w3-row-padding w3-section">
    <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src="img_nature_wide.jpg" style="width:100%" onclick="currentDiv(1)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src="img_fjords_wide.jpg" style="width:100%" onclick="currentDiv(2)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src="img_mountains_wide.jpg" style="width:100%" onclick="currentDiv(3)">
    </div>
  </div>

With

and Add css

.w3-bar-item.w3-col.s4.w3-show-inline-block { margin: 0 -0.4ex; }

That's works perfectly, thanks so much. Don't think I ever would of figured this one out.

1 hour ago, Ingolme said:

This works for me:

Just change the s4 classes to s6.

Yea that definitely works. It does resize the onClick images to where they're much larger than when it's a row of 3. If that's the only way to do it no worries, just figured I'd ask if you could keep the original size but still have it centered. And thanks for the quick reply, I'll definitely use this if it's the only option.

Hello, I'm currently trying to utilize the W3 slideshow example shown at https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_imgdots

The script works great, as long as I use all 3 image slots. As soon as I delete one and try to make it a slide show between 2 images, with two onClick images underneath, the two onClick images do not center themselves under the main image like when there's 3, and instead they float left. I've tried tweaking every possible variable in https://www.w3schools.com/w3css/4/w3.css without any success. 

The main parameters that seem to have an effect on the onClick images are the lines:

.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}

.w3-section,.w3-code{margin-top:16px!important;margin-bottom:16px!important;}

.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}

However no tweaks I've done seem to have the desired effect of centering the two onClick examples. If anyone could nudge me in the right direction that'd be greatly appreciated. Thanks for any help in advance.

3 hours ago, dsonesuk said:

The the array values are the same why use three when one will do?

var videos = ["https://www.youtube.com/embed/9bZkp7q19f0", "https://www.youtube.com/embed/dQw4w9WgXcQ"];

           var randomVideoUrl = videos[Math.floor(Math.random() * videos.length)];
            var randomVideoUrl2 = videos[Math.floor(Math.random() * videos.length)];
            var randomVideoUrl3 = videos[Math.floor(Math.random() * videos.length)];

Yes! there is a easier way, instead of using singular unique id, use class names and loop them instead

 

Well I figured I needed that to allow for a three different sets of random videos for three different divisions. But yea not know anything about this stuff and just fumbling my way through it I knew what I had done there just didn't pass the eye test.

Thanks for the reply. I'm too much of a moron to figure out how to make implement addEventListener but I was able to make it work like this. I'm sure there's a more efficient way to make it work but my mental capacity (or lack thereof) only allowed for this.

      <script>
        var videos = ["https://www.youtube.com/embed/9bZkp7q19f0", "https://www.youtube.com/embed/dQw4w9WgXcQ"];
        var videos2 = ["https://www.youtube.com/embed/9bZkp7q19f0", "https://www.youtube.com/embed/dQw4w9WgXcQ"];
        var videos3 = ["https://www.youtube.com/embed/9bZkp7q19f0", "https://www.youtube.com/embed/dQw4w9WgXcQ"];
        window.onload = function () {
            var playerDiv = document.getElementById("random_player");
            var playerDiv2 = document.getElementById("random_player2");
            var playerDiv3 = document.getElementById("random_player3");
            var player = document.createElement("IFRAME");
            var player2 = document.createElement("IFRAME");
            var player3 = document.createElement("IFRAME");
            var randomVideoUrl = videos[Math.floor(Math.random() * videos.length)];
            var randomVideoUrl2 = videos2[Math.floor(Math.random() * videos2.length)];
            var randomVideoUrl3 = videos3[Math.floor(Math.random() * videos3.length)];
            player.setAttribute('width', '350');
            player.setAttribute('height', '197');
            player.setAttribute('src', randomVideoUrl);
            player2.setAttribute('width', '350');
            player2.setAttribute('height', '197');
            player2.setAttribute('src', randomVideoUrl2);
            player3.setAttribute('width', '350');
            player3.setAttribute('height', '197');
            player3.setAttribute('src', randomVideoUrl3);
            playerDiv.appendChild(player);
            playerDiv2.appendChild(player2);
            playerDiv3.appendChild(player3);
        };
    </script>

Hello, new to the forum here. I'm currently trying to get multiple random youtube videos embedded into a site and seem to be having some trouble. No matter what I do, only one of the videos will load. The goal was to have multiple videos, with different sets of random videos set to load on each. I have both sets of script's and divisions loaded into the body (I have no idea what I'm doing unfortunately). Both work just fine, just not at the same time. I was hoping someone could point me in the right direction in what to change to get this to work. Thanks for any help in advance, it's much appreciated.

    <script>
        var videos = ["https://www.youtube.com/embed/9bZkp7q19f0", "https://www.youtube.com/embed/dQw4w9WgXcQ"];
        window.onload = function () {
            var playerDiv = document.getElementById("random_player");
            var player = document.createElement("IFRAME");
            var randomVideoUrl = videos[Math.floor(Math.random() * videos.length)];
            player.setAttribute('width', '640');
            player.setAttribute('height', '390');
            player.setAttribute('src', randomVideoUrl);
            playerDiv.appendChild(player);
        };
    </script>

<div id="random_player" /></div>

and the 2nd

        <script>
        var videos = ["https://www.youtube.com/embed/9bZkp7q19f0", "https://www.youtube.com/embed/dQw4w9WgXcQ"];
        window.onload = function () {
            var playerDiv2 = document.getElementById("random_player2");
            var player = document.createElement("IFRAME");
            var randomVideoUrl2 = videos[Math.floor(Math.random() * videos.length)];
            player.setAttribute('width', '640');
            player.setAttribute('height', '390');
            player.setAttribute('src', randomVideoUrl2);
            playerDiv2.appendChild(player);
        };
    </script>

<div id="random_player2" /></div>