Hi! I’m Starx

Question 1

Zach Godin’s Question:

Basically I want to limit four of the same dates to the Date row of my table, and return an error if someone tries to pick a date that already has four instances. How would you check for this before querying the form results to a table?

Answer

Starx

Since you are allowing duplicated 4 times, you cannot define a unique index. You have to query to get the number of rows. Like

SELECT COUNT(*) FROM yourtable WHERE dDate = 'xxxx-xx-xx'

After you query with similar you can check the number of rows it returns and then only send the query again.

Simple example of this code

// Create a connection like this
$db = new mysql("localhost", "yourusernaem", "yourpassword", "yourdatabasename");

// Prepare your query like this
$stmt= $db -> prepare("SELECT COUNT(*) FROM yourtable WHERE dDate = 'xxxx-xx-xx'");
                                                                  // ^ I am omiting 
                                                                       the bind param 
                                                                       here

//Execute the query
$stmt -> execute();

$result = $stmt -> bindResult($totalDate);
while($stml -> fetch()) {
    if($totalDate == 4) {
        //Do not entere
    } else {
        // Insert Statement and query it
    }
}

Question 2

John’s Question:

John

I have the following two MySQL tables for emails…

mail_emails

Columns: id, folder, user

mail_folders

Columns: id, name, user

I want to use only a single MySQL query to fetch the folder names and the number of emails per folder. Presuming the user id is 1, what would be the most efficient approach to this goal?

Answer

Starx

I am not exactly sure of your database structure. But this should give you an idea.

SELECT *, count(e.folder) totalMail FROM mail_folders f INNER JOIN mail_emails e on e.folder = f.name  WHERE f.user = '1' GROUP BY e.folder

I am assuming that the name field in the mail_folders table is the same value that will be stored in folder field of mail_emails table.

Question 3

Sourabh’s Question:

Sourabh

I was working on a django project and soon the template became a mess and ended up with nearly all elements having an ID (just to clarify, all IDs are unique). I can reduce the number of IDs by giving their parents an ID but that would increase my jQuery code. So what I am asking is

Is it better to have many IDs in HTML or slightly less IDs and a bit longer JS/jQuery code?

Here’s a sample code:

<ol>
    <li>
        <p>
            <a href="/vote/" class="vote" id="story-vote-26"><img src="/static/images/arrow.gif"></a>
            <a href="http://www.lettersofnote.com/2012/10/people-simply-empty-out.html" class="title" id="story-title-26">“People simply empty out”</a> <span class="domain">(www.lettersofnote.com)</span>
        </p>
        <p class="story-info">
            <span id="story-points-26">660</span> points by tantaman ǀ 31 minutess ago
        </p>
    </li>
    ...

there are at least 100 of these li and each with 4 IDs (I haven’t added 4th one yet). So total of 400 IDs, or 100 IDs if I add ID to lis instead

Answer

dystroy

There’s no problem in having many id. Hash algorithms used to look for elements scale very well.

So, as long as you don’t have performance problems that you could solve using id, the main rules to choose if you should add some id should be :

does it make the code more readable (a more concise code is often more readable) ?
does it make the code easier to evolve ?

Don’t make your code more complex just to add some id but there’s no hidden cost in having them.

Answer

Starx

The main purpose of IDs is to identify an element uniquely in DOM. It is mostly useful to pinpoint elements for using in JavaScript and CSS.

As long as, your application of these IDs are based on this rule, Its GOOD.

Question 4

Dan Benjamin’s Question:

Dan Benjamin

I am wondering how can you build a “snake like” effect around the rim of an object using javascript/css.

This effect will create an ever going animation around an object that looks like a tiny white slug moving on the rim of the object (looking like a glow)

(Will Edit this Question once I learn the correct phrasing)

Answer

Starx

I have a small CSS3 version of this:

A small container and an our snake:

<div id="cont"></div>
<div class="snake"></div>

And here is the CSS Magic:

#cont {
    width: 150px;
    height: 150px;
    background: #000;
    margin: 10px;
}
.snake {
    width: 5px;
    height: 5px;        
    background: #f00;
    position: absolute;
    top: 5px;
    left: 15px;
    animation: around 5s infinite;
}
@keyframes around
{
    0% { left: 15px; top: 5px; }
    25% { left: 165px; top: 5px;  }
    50% { top:  160px; left: 165px; }
    75% { left: 15px; top: 160px; }
    100% { top: 5px; left: 15px; }
}

[Demo]

Question 5

Ceelos’s Question:

Ceelos

Trying out PHP for the first time and I’m really stumped on this. It might be something obvious, but why isn’t my php inside the function checkinfo() working? The alert works fine. Here’s the code

<head>
    <script type="text/javascript">

            function checkinfo() {
                alert("hi");
                <?php
                echo 'hi';
                ?>
            };

        </script>

    </head>
    <body>
        <form id = "form" align = "center">

            <div id = "index">

                <div id = "unandpw">
                    Username:
                    <input type="text">
                    <br>
                    Password:
                    <input type ="password" >
                </div>
                <!-- end unandpw -->

                <div id = "buttons">
                    <button type = "button" onclick = "checkinfo()">
                        Login
                    </button>
                    <button type = "button" onclick = "register();">
                        Register
                    </button>
                </div>
                <!-- end buttons -->

            </div>
            <!--index end -->

        </form>
    </body>
</html>

Answer

Starx

It gives error, because when the rendered your script becomes this:

function checkinfo() {
   alert("hi");
   hi
};

Which is an incorrect code. You may be trying to do:

alert("<?php echo 'hi'; ?>");

Question 6

John Smith’s Question:

John Smith

My demo code: http://jsfiddle.net/4w3Hy/3/

My first code adds html to an div with the id:Content:

$(".text").click(function() {
 $("#Content").html($(this).next(".text1").html());
});

On the id:Content, with the new html, i try to run another jquery function:

$(".click").click(function() {
 $('.click').css('color','');
 $(this).css( "color", "red" );
});

But somehow this wont work!! What did i made wrong? to see html http://jsfiddle.net/4w3Hy/3/

Answer

Kevin Bowersox

Use on to attach events to elements dynamically appended to the DOM. In the original code the .click element is not present on the DOM at the time the click event handler is attached to all elements with the class .click, therefore the event is never bound to the new element.

Using on() allows us to attach the event handler to a parent such as the document already available on the DOM. .click elements are then appended to the document and when clicked fire a click event that propagates to the document. Once the document receives the click event it will determine if the event was fired by an element with class .click, if so it will execute our attached event. If you are familiar with the deprecated live() method, you pretty much understand the concept.

Normally, it would be best to attach to a static parent closer to the .click element, however since I did not have your entire HTML markup, I used document.

$(".text").click(function() {
    $("#Content").html($(this).next(".text1").html()); });

$(document).on("click", ".click", function() {
    $('.click').css('color','');
    $(this).css( "color", "red" ); });

JS Fiddle: http://jsfiddle.net/4w3Hy/5/

Answer

Starx

It is because since the element is added dynamically it cannot be found by the running script. You have to use event delegation.

Try this

$(".click").on('click', function() {
 $('.click').css('color','');
 $(this).css( "color", "red" );
});

Question 7

Phil Kurtis’s Question:

Phil Kurtis

I’m having a problem on a website I’m building for myself.

http://quick.as/lnlhra

I want the icons to be responsive to the browser size. For now, I have the CSS set so for each icon, the left is set at a certain percent e.g.
For one icon, the html is:

<a id="mail" class="social" href="mailto:nishadt15@gmail.com"></a>

The CSS for #mail and .social is:

.social {

position: absolute;
top: 95%;
height: 40px;
width: 45px;
text-decoration: none;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 2px solid #3db48b;
cursor: pointer;

-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;  
}

#mail {
left: 39%;
background: url(../img/mail.png) no-repeat center center; 
background-size: 40px 40px;

}

Obviously setting left to a percent is a bad idea because the icons will start to overlap while trying to maintain the percent. Is there a way to remedy this with a different method?

Answer

Starx

You can make the icons responsive using CSS media queries: You can even assign different images not only change the position:

Example:

@media (max-width: 600px) {
  /* Styles for devices with maximum of 600px width */
  #mail {
     left: 39%;
     background: url(../img/mail.png) no-repeat center center; 
     background-size: 40px 40px;
  }
}

@media (min-width: 600px) and (max-width: 1200px) {
  /* Styles for devices with minimum of 600px width and up to 1200px in width */
  #mail {
     left: 20%;
     background: url(../img/mail2.png) no-repeat center center; 
     background-size: 80px 80px;
  }
}

Question 8

User2656427’s Question:

user2656427

I have a question about checkboxes when paired with radio buttons. I have some maps and whenever I choose a radio button, a certain image appears and I can hover my mouse to choose a polygon I have mapped. The thing is, I want, along with the radio buttons, a checkbox with the label “Show all”. Whenever I check the box I want the image with all the polygons to appear. I hope I’m clear enough. Here is the code.

function showDiv (divId)
{
  var div = document.getElementById (divId);
  var divs = document.getElementsByTagName('div');
  for (var i in divs) 
  {
    divs [i].className = "hidden";
  }
  div.className = "shown";
}

$(document).ready(function() {
  $('.mapF').maphilight({
  });
});
function fnchecked(blnchecked)
{
  if(blnchecked) {
    document.getElementById("divcheck").style.display = "";
  } else {
    document.getElementById("divcheck").style.display = "none";
  }             
}

.hidden
{
  display:none;
}
.shown
{
  display:block;
}
#img {
  z-index:1000;
}
ul { list-style-type: none }

<ul>
  <li><input type="radio" onclick="showDiv ('1')" name="selectme">#sports</input></li>
  <li><input type="radio" onclick="showDiv ('2')" name="selectme">#nature</input>       </li>
  <li><input type="radio" onclick="showDiv ('3')" name="selectme">#culture</input> </li>
  <li><input type="radio" onclick="showDiv ('4')" name="selectme">#cuisine</input> </li>
  <li><input type="radio" onclick="showDiv ('5')" name="selectme">#nightlife</input> </li>
</ul>
<div id="1" class="visible" style="border:0px solid #ddd; width:800px; height:800px; overflow:visible;">
  <input type="checkbox" name="fldcheckbox" id="fldcheckbox"  onclick="fnchecked(this.checked);">Show all</input>
  <div id="divcheck" style="display:none; ">
    <img id="sports"  src="images/greece_sports.jpg" z-index:100/>
    </div>
    <img class="mapF" src = "images/greece_map.png" alt="" width="800" height="800"   border="0" usemap="#greece" />
    <!-- ------------------------ MAP ---------------------- -->
    <map class="mapH" name="greece">
      <area shape=poly coords=450,418,502,418,589,503,589,669,576,657,406,657,406,462,405,459,405,456,407,455,407,451,404,449,404,443,401,443,401,429,402,428,400,426,400,421,398,420,398,418, href="#" alt="" title="Cyclades" data-maphilight='{"stroke":false, "strokeColor":"1a6cb5", "strokeOpacity":1, "strokeWidth":2, "fade":true, "fill":true, "fillColor":"0256a4", "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside", "shadowRadius":4}' />
      <area shape=poly coords=406,462,406,530,312,530,310,524,306,524,305,523,305,512,303,510,302,509,302,507,300,505,299,501,295,494,293,494,293,491,294,489,293,488,291,484,291,481,292,479,291,477,290,474,294,471,298,471,299,473,300,475,302,479,305,477,310,477,312,479,315,480,315,483,316,483,316,484,317,484,317,483,320,483,320,486,327,486,328,491,325,492,325,494,322,494,322,497,326,497,326,500,329,500,329,502,328,502,328,503,331,503,331,502,330,502,330,499,331,498,334,498,334,493,336,493,337,491,342,491,344,490,355,490,356,489,358,489,358,487,356,486,353,483,348,482,348,478,346,478,344,479,341,479,338,478,336,475,332,473,328,470,328,465,327,462,329,461,325,457,324,453,329,452,329,449,326,446,316,446,315,444,314,442,314,440,316,439,316,436,326,436,329,434,331,432,335,430,337,430,350,428,354,425,357,425,359,423,365,423,367,425,367,429,365,429,363,431,363,432,368,432,368,434,375,434,375,436,378,437,378,441,382,447,382,449,383,449,383,447,386,447,389,448,394,452,394,458,397,458,397,463,398,464,402,464, href="#" target="_self" alt="Saronic Islands" title="Saronic Islands" data-maphilight='{"stroke":false, "strokeColor":"cc0000", "strokeOpacity":1, "strokeWidth":1, "fade":true, "fill":true, "fillColor":"cedeed", "fillOpacity":0.8, "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside", "shadowRadius":4}' />
      <area shape=poly coords=406,462,406,530,312,530,310,524,306,524,305,523,305,512,303,510,302,509,302,507,300,505,299,501,295,494,293,494,293,491,294,489,293,488,291,484,291,481,292,479,291,477,290,474,294,471,298,471,299,473,300,475,302,479,305,477,310,477,312,479,315,480,315,483,316,483,316,484,317,484,317,483,320,483,320,486,327,486,328,491,325,492,325,494,322,494,322,497,326,497,326,500,329,500,329,502,328,502,328,503,331,503,331,502,330,502,330,499,331,498,334,498,334,493,336,493,337,491,342,491,344,490,355,490,356,489,358,489,358,487,356,486,353,483,348,482,348,478,346,478,344,479,341,479,338,478,336,475,332,473,328,470,328,465,327,462,329,461,325,457,324,453,329,452,329,449,326,446,316,446,315,444,314,442,314,440,316,439,316,436,326,436,329,434,331,432,335,430,337,430,350,428,354,425,357,425,359,423,365,423,367,425,367,429,365,429,363,431,363,432,368,432,368,434,375,434,375,436,378,437,378,441,382,447,382,449,383,449,383,447,386,447,389,448,394,452,394,458,397,458,397,463,398,464,402,464, href="#" target="_self" alt="Saronic Islands" title="Saronic Islands" data-maphilight='{"stroke":false, "strokeColor":"cc0000", "strokeOpacity":1, "strokeWidth":1, "fade":true, "fill":true, "fillColor":"cedeed", "fillOpacity":0.8, "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside", "shadowRadius":4}' />
      <area shape=poly coords=306,241,434,264,502,333,502,418,398,418,399,416,400,414,403,413,405,412,405,408,396,399,391,398,389,396,385,396,381,394,377,393,372,393,368,388,368,385,366,384,366,382,364,381,364,378,362,375,361,378,358,378,355,376,350,376,348,375,346,376,343,376,343,374,345,373,342,369,340,369,340,366,344,364,344,362,341,360,336,360,333,358,333,360,329,360,326,362,321,356,321,351,319,349,312,349,309,346,308,346,307,348,304,348,302,345,299,345,298,346,296,345,294,343,291,339,285,340,282,340,279,339,278,336,279,333,282,330,284,329,287,330,289,332,292,333,295,334,302,332,304,328,309,329,313,325,317,323,317,320,313,321,313,317,315,316,315,313,313,310,310,310,309,308,309,304,307,305,305,305,301,299,301,290,305,289,310,289,311,286,311,284,321,282,317,283,320,287,327,287,333,294,333,297,336,301,336,305,332,306,332,308,327,310,326,310,326,306,324,306,322,310,323,311,327,311,334,309,334,307,337,307,340,305,343,305,345,302,344,298,342,295,339,291,339,288,337,286,334,282,331,278,326,272,325,268,322,266,318,265,317,263,312,260,308,253,307,248, href="#" target="_self" alt="Sporades" title="Sporades" data-maphilight='{"stroke":false, "strokeColor":"002078", "strokeOpacity":0.2, "strokeWidth":1, "fade":true, "fill":true, "fillColor":"3576b6", "fillOpacity":0.8, "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside", "shadowRadius":4}' />
      <area shape=poly coords=692,456,785,586,715,782,589,669,589,502, href="#"     target="_self" alt="Dodekanisa" title="Dodecanese" data-maphilight='{"stroke":false,     "strokeColor":"", "strokeOpacity":0.5, "strokeWidth":2, "fade":true, "fill":true, "fillColor":"3576b6", "fillOpacity":0.8, "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside",     "shadowRadius":4}' />
      <area shape=poly     coords=73,573,193,522,193,526,196,528,196,530,199,532,200,535,200,537,203,538,205,539,205,540,202,546,202,549,203,550,203,552,205,552,205,554,210,554,211,553,214,553,214,556,218,562,222,559,223,556,221,550,221,543,222,542,222,535,226,533,230,530,237,530,242,531,243,532,243,536,242,537,242,541,241,543,243,545,245,544,247,544,249,545,251,550,254,553,257,561,259,566,262,566,262,569,260,569,260,571,261,573,261,577,262,577,262,585,260,585,259,586,259,588,260,590,264,590,268,594,269,595,270,594,270,589,268,586,268,576,272,575,270,573,272,569,272,565,277,563,276,561,276,558,281,555,296,555,298,563,299,563,300,567,305,572,305,576,310,579,310,582,312,587,314,585,318,585,321,588,321,593,324,596,326,594,329,595,331,595,330,593,327,593,327,592,325,589,325,583,322,584,318,578,316,575,316,571,317,569,316,567,316,564,318,562,321,562,322,559,321,558,321,555,318,553,318,549,315,543,314,539,313,538,313,536,314,535,314,532,312,530,406,530,406,657,369,657,215,725, href="#" target="_self" alt="Myrtoo" title="Myrtoan Sea" data-maphilight='{"stroke":false, "strokeColor":"002078", "strokeOpacity":0.2, "strokeWidth":1, "fade":true, "fill":true, "fillColor":"cedeed", "fillOpacity":0.8, "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside", "shadowRadius":4}' />
      <area shape=poly coords=617,135,692,456,589,502,502,418,502,333,434,264,306,242,305,236,302,234,299,231,295,228,294,224,293,223,294,221,293,219,290,217,286,215,283,210,282,209,282,203,280,199,280,197,282,194,284,191,285,185,287,180,290,176,286,172,286,168,284,165,284,163,285,162,290,162,290,158,293,156,296,159,297,158,297,153,304,152,306,151,306,145,308,144,312,144,315,146,316,147,316,150,315,152,318,155,318,156,317,158,312,161,305,161,305,162,308,164,308,167,311,170,311,172,315,172,316,174,319,175,321,177,321,179,327,181,331,184,338,186,344,189,345,194,346,197,345,198,346,200,344,203,344,205,347,208,350,212,350,216,349,217,350,219,352,218,354,217,359,217,365,221,370,223,376,223,374,220,373,217,369,217,362,214,359,212,355,208,354,205,352,202,350,200,348,199,347,197,346,194,346,190,347,188,351,184,355,184,362,188,366,189,372,189,375,193,378,195,380,199,383,202,383,204,384,205,384,208,386,209,386,211,389,212,392,215,394,216,394,218,396,220,398,218,400,215,402,213,402,212,399,211,400,208,399,206,399,202,395,200,391,197,385,195,382,194,381,191,376,186,375,184,375,180,378,178,379,176,382,177,384,177,388,175,391,175,396,176,398,177,403,182,408,183,414,183,416,187,420,191,420,193,425,197,426,201,433,199,432,196,430,194,424,189,422,184,420,182,419,181,416,181,416,178,409,176,406,175,403,172,402,167,401,167,401,170,402,173,401,174,395,174,392,173,388,168,386,166,385,163,386,160,387,158,393,158,391,156,387,155,385,153,382,151,382,149,379,144,375,143,375,140,378,135,379,132,382,132,386,130,388,129,391,130,398,134,403,137,405,137,406,136,408,136,412,134,421,128,425,126,425,123,427,123,426,121,428,117,430,117,432,113,440,111,445,111,447,112,448,115,452,121,454,120,458,120,458,122,461,122,462,121,463,121,465,122,470,118,474,114,478,113,481,112,482,109,484,108,488,105,492,105,493,106,496,106,496,107,493,110,496,112,503,112,503,113,507,111,512,112,513,115,517,116,524,119,526,120,529,120,530,119,533,119,538,121,560,121,564,124,565,126,567,128,567,134,573,132,574,131,575,130, href="#" target="_self" alt="NorthEast Aegean" title="North East Aegean" data-maphilight='{"stroke":false, "strokeColor":"002078", "strokeOpacity":0.2, "strokeWidth":1, "fade":true, "fill":true, "fillColor":"cedeee", "fillOpacity":0.8, "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside", "shadowRadius":4}' />
      <area shape=poly coords=369,657,576,657,715,782,395,782,215,725, href="#" target="_self" alt="Crete" title="Crete" data-maphilight='{"stroke":false, "strokeColor":"002078", "strokeOpacity":0.2, "strokeWidth":1, "fade":true, "fill":true, "fillColor":"86acd1", "fillOpacity":0.8, "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside", "shadowRadius":4}' />
      <area shape=poly coords=161,393,165,391,171,387,172,385,176,382,176,377,173,375,173,372,174,371,175,371,178,376,179,377,179,381,180,383,183,384,184,385,184,386,187,386,189,388,189,392,191,393,194,391,197,389,201,387,204,388,209,388,210,390,212,390,212,387,217,384,219,384,221,386,223,386,226,382,232,384,237,384,240,387,243,387,247,391,252,388,256,390,257,389,262,389,263,390,265,388,263,386,263,384,266,383,265,381,266,379,268,379,268,381,271,381,276,388,276,389,278,390,278,395,279,397,280,397,281,390,283,389,286,386,289,386,291,388,291,390,290,391,290,393,300,398,300,399,298,401,299,403,306,403,313,405,318,405,321,409,322,409,324,406,326,406,329,410,335,410,335,413,333,414,335,416,335,418,327,423,317,423,314,421,312,420,305,424,306,425,309,425,313,429,314,430,315,431,312,435,310,435,309,436,304,436,298,432,296,429,292,425,287,422,282,419,277,417,275,415,273,414,266,414,259,410,251,409,248,406,246,406,242,401,242,400,237,400,233,397,233,394,230,394,227,392,221,392,220,391,218,393,216,393,214,394,211,398,209,402,208,404,205,407,203,409,199,411,198,412,194,410,190,409,186,406,184,405,183,406,180,404,179,405,178,407 href="#" target="_self" alt="Corinthian Gulf" title="Corinthian Gulf" data-maphilight='{"stroke":false, "strokeColor":"002078", "strokeOpacity":0.2, "strokeWidth":1, "fade":true, "fill":true, "fillColor":"cedeed", "fillOpacity":0.8, "shadow":false, "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4", "shadowPosition":"outside", "shadowRadius":4}' />
      <area shape=poly coords=10,199,95,240,92,244,91,244,89,243,89,247,86,248,83,257,87,259,92,259,91,264,90,265,92,267,92,269,88,268,89,272,92,273,92,279,94,282,97,284,100,285,108,285,108,292,110,294,113,295,114,299,117,303,121,306,123,307,127,311,127,321,129,321,129,319,134,320,132,318,128,317,128,314,132,311,132,306,134,305,136,305,137,307,137,310,140,310,140,308,141,308,145,310,146,313,148,313,150,316,153,316,154,313,156,312,159,312,164,320,162,322,162,326,164,327,165,333,163,334,162,333,162,331,159,328,158,329,156,334,155,332,151,328,152,326,148,326,148,324,146,324,142,326,144,325,140,326,138,325,137,326,131,326,129,326,133,329,133,332,128,333,128,336,127,338,130,339,130,342,136,338,139,338,140,340,142,351,145,352,149,352,149,356,151,359,151,370,154,367,157,367,157,370,156,373,160,380,160,385,158,385,157,388,160,388,160,392,161,394,179,408,179,412,178,414,174,422,171,426,168,429,164,433,161,434,158,433,156,437,156,441,159,442,164,444,168,446,171,449,173,445,173,459,172,461,178,461,182,464,185,468,189,470,193,473,197,479,200,484,203,491,204,495,205,499,204,503,202,505,198,510,195,512,193,515,193,522,73,573, href="#" target="_self" alt="" title="Ionian Islands" data-    maphilight='{"stroke":false, "strokeColor":"cc0000", "strokeOpacity":0.5, "strokeWidth":1,     "fade":true, "fill":true, "fillColor":"3576b6", "fillOpacity":0.8, "shadow":false,     "shadowColor":"000000", "shadowOpacity":0.6, "shadowX":4, "shadowY":"4",     "shadowPosition":"outside", "shadowRadius":4}' />
    </div>
  </map>
</div>

The problem I have now, is that when I check the box nothing appears. However the image appears when no radio button is selected, but the first image also shows. I would like only the image of the checkbox to be shown.

CodePen

Answer

Starx

First of all do not use numeric ids like 1, 2 etc. User something like “container-1”, it can used in the script in the same way.

Also, you dont have to go through every elements to hide and show a particular div.

function showDiv (divId) {
   var div = document.getElementById ("container-"+divId);

   //Get previously shown div like this
   var preDiv = document.getElementsByClassName("shown")[0];
   preDiv.className = "hidden";

   // Now add shown to the current div           
   div.className = "shown";
 }

Also move your code into the $(document).ready(); function.

or, Since you are using jQuery already, use this instead

$(function() {
    function showDiv (divId) {
       $(".shown").attr('class', 'hidden');
       $("#container-"+divId).addClass('shown');
     }
});

Question 9

CAO’s Question:

CAO

I am trying to create a upload form through which the user can enter certain details(including a file upload) and then it will be inserted into a database, the row is entered successfully but I get this error. i.e
Warning: move_uploaded_file(upload/computer/SIGN 001.jpg): failed to open stream: No such file or directory in C:wampwwwstockm.php on line 28
&
Warning: move_uploaded_file(): Unable to move ‘C:wamptmpphp2CEE.tmp’ to ‘upload/computer/SIGN 001.jpg’ in C:wampwwwstockm.php on line 28

this is the code which has the entire scripting for the upload file portion.

$name= $_FILES['file']['name'];
  $tmp_name = $_FILES['file']['tmp_name']; 
  $type = $_FILES['file']['type']; 
  $size = $_FILES['file']['size'];
  $pathAndName = "upload/computer/".$name;
  $moveResult = move_uploaded_file($tmp_name, $pathAndName);

I have created a folder in C:/wamp/upload named computer where I want the image to be sent, in the database I get this location but in upload/computer there is no file, the folder is empty.

Answer

Starx

Your path $pathAndName = "upload/computer/".$name; is a relative path, thus it will search from the current directory of the executing script.

For example, if you are running from wampwwwtestupload.php it will search for wampwwwtestuploadcomputer path.

You can assign the path from the root directory as "/upload/computer/".$name;, this will search for wampwwwuploadcomputer path.

Further more, you have to check if the folder exist in the path and it has permission to access it or read it.

Question 10

Baljeet Singh’s Question:

Baljeet Singh

I have the working code which displays all the results from the json, I tweaked the code to display only the results based on the search, But i don’t know what is the problem is, it still shows all the results,

The code is following:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery PHP Json Response</title>
<style type="text/css">
div
{
text-align:center;
padding:10px;
}

#msg {
width: 500px;
margin: 0px auto;
}
.members {
width: 500px ;
background-color: beige;
}
</style>
</head>
<body>
<input type="text" id="search-json-input" />
<input type="button" id="search-json-submit" value="search" />
<br/>
<br/>
<input type="button" name="next" id="next" value="NEXT" />
<br/>
<input type="button" name="previous" id="previous" value="PREV" />
<br/>
<div id="msg">
    <table id="userdata" border="1">
        <thead>
            <th>Email</th>
            <th>Sex</th>
            <th>Location</th>
            <th>Picture</th>
            <th>audio</th>
            <th>video</th>
        </thead>
        <tbody></tbody>
    </table>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript">

var users = [];
var idx = 0; 

var url = "json.php";
    var search_query = jQuery('#search-json-input').val();
    var search_query_regex = new RegExp(".*"+search_query+".*", "g");
$.getJSON(url, function (data) {

    users = data.members;

    renderRow(idx);
    $('#next').click(function() {
        idx++;
        renderRow(idx);
    });
    $('#previous').click(function() {
        idx--;
        renderRow(idx);
    });
});

$("#search-json-submit").click(function(){


    for(var y=0;y<users.length;y++){ 
    if((users[y].email).match(search_query_regex) ||
           (users[y].sex).match(search_query_regex) ||
   (users[y].location).match(search_query_regex)) {

        renderRow(y)

        }
     }
});

var renderRow = function (idx) {
    //alert(idx);
    if (idx < 0) idx = 0;
    if (idx > (users.length - 1)) idx = (users.length - 1);
    var user = users[idx];

    var tblRow = "<tr>" + "<td>" + user.email + "</td>" + "<td>" + user.sex + "</td>" + "<td>" + user.location + "</td>" + "<td>" + "<img src=" + user.image + ">" + "</td>" + "<td>" + "<audio src=" + user.video + " controls>" + "</td>" + "<td>" + "<video src=" + user.video + " controls>" + "</td>" + "</tr>";
    $('#userdata tbody').html(tblRow);


};

</script>
</body>
</html>

The result of json.php can be seen here: http://sco7.com/components/phonegap/json.php

Answer

Starx

Move your code to fetch JSON into your event handler. Your code execute directly upon occurence, so it does not find any value on the input box.

$("#search-json-submit").click(function(){
    var url = "json.php";

    var search_query = jQuery('#search-json-input').val();
    var search_query_regex = new RegExp(".*"+search_query+".*", "g");
    $.getJSON(url, function (data) {

        users = data.members;

        renderRow(idx);
        $('#next').click(function() {
            idx++;
            renderRow(idx);
        });
        $('#previous').click(function() {
            idx--;
            renderRow(idx);
        });
    });

   //... Rest of the handler
});

Hi! I’m Starx

experienced Software Developer. And this is my blog

Blog Page

How would you check if a row has x of the same value before adding to a table?

Zach Godin’s Question:

Single MySQL query to fetch folder names, email count per folder

John’s Question:

giving id to many objects – is it a bad idea?

Sourabh’s Question:

Snake-Like Moving Glow around an element

Dan Benjamin’s Question:

PHP not working in javascript function

Ceelos’s Question:

Cannot change color of a-tag

John Smith’s Question:

Make ids responsive

Phil Kurtis’s Question:

I want to show an image when a checkbox is checked

User2656427’s Question:

CodePen

Getting error in uploading file in php

CAO’s Question:

jquery not fetching results from json based on search input?

Baljeet Singh’s Question:

Please fill the form - I will response as fast as I can!