Recent Posts

1

JavaScript / Re: Parking Elements

« Last post by Jason Knight on Today at 06:21:14 am »

length is actually a "slow" operation, it may be faster to simply check if there is a firstElementChild.

Code: [Select]

if (garage.firstElementChild) { /* if there's a first child, it must have children! */
Though I'm wondering what/why you seem to think you need to check that and set a class.

2

JavaScript / Re: Parking Elements

« Last post by durango_d on Today at 04:18:04 am »

You know this is the first time i have realized that with toggles in console you can watch the html change when  you toggle... i have never noticed that before...   so with that i see that its not triggering my code on the last item...

And then the duh moment... im checking for empty but its not empty, it will never be empty, it has a span inside it regardless.....  no wonder it did not work...

Now i have to figure out how to check it in a different way that is reliable...




UPDATE:  got it.... ill  check the length of the garage.childNodes

Code: [Select]

                  if( garage.childNodes.length == 1 )
  {
     
     if(t.className == "parking_notempty")
     {
       t.className="parking_empty";
      }
 
   }//close if garage.childNodes
 


3

JavaScript / Re: Parking Elements

« Last post by durango_d on Today at 03:44:30 am »

Hi,
when you have some time can you log in and have a look at the site so you can see whats happening..

what i did was i added that text that shows that the parking is empty.  I have all the logic done but i am missing the tail end of the cycle some how and i have tried several times and im not seeing it.

When the page first loads its fine, the parking is empty and it shows the text "Parking Is Empty"

when i move something from the lot to the garage, the text goes away, perfect!!! 

the problem is when i leave the garage each time with togglePark i check to see if the value is "lot" and if it is "lot" then i check to see if the garage is empty, and if so then turn the "Parking is Empty" text back on.  This is the part that is not working.   And i cant seem to see where im missing the boat here.

here is the css

Code: [Select]

.parking_notempty {
    display: none;
}

.parking_empty {
    color: #ffffff;
    display: block;
}

.parking_empty:hover {
    text-shadow:0 0 0.1em #0ad63a;
}


and the js

Code: [Select]

(function(d) {

var
lot = d.getElementById("lot"),
garage = d.getElementById("parked_items");

var t = garage.appendChild(d.createElement("span"));
    t.className="parking_empty";
    t.textContent = "Parking Is Empty";


for (var section of d.querySelectorAll("#lot > section, #garage > section")) {
var button = section.appendChild(d.createElement("button"));
button.type = "button"; /* remember default is submit */
button.className = "fas fa-parking";
button.id = "togglePark";
button.title = "Park Me";  //<?= htmlspecialchars(getLangValue('FEED_PARK_WORD_TEXT')); ?>";
button.onclick = togglePark;

}//close the for

function togglePark(event) {
var section = event.currentTarget.parentNode;
(section.parentNode.id == "lot" ? garage : lot).appendChild(section);


/* when we append to parked_items */

if(section.parentNode.id == "parked_items")
{
  section.childNodes[5].id="togglePark_red";
  section.childNodes[5].title="UnPark Me";
 
  /* turn off the parking empty text */
  /* no longer empty */
   t.className="parking_notempty";
 
  //console.log(t);
 
}//close if parked_items




/* when we append back to the lot */

if(section.parentNode.id == "lot")
{
  section.childNodes[5].id="togglePark";
  section.childNodes[5].title="Park Me";
 
  if( $('#parked_items:empty').length )
  {
 
     if(t.className == "parking_notempty")
     {
       t.className="parking_empty";
      }
 
   }//close if parked_items empty
 
     }//close if lot
     
     

  //TODO LIST
  //add dragable code
  //set draggable to false on park and true on unpark
  //and remove drag icon on park and show it on unpark

} // close togglePark

})(document);
 
 
i  thought i was trapping event correct when the last item left, but i guess not...

4

JavaScript / Do i have to use ajax for this

« Last post by durango_d on Today at 02:02:41 am »

I know how to do ajax and i dont mind using it if i really need a value while in js such a user info and whatever from the database...   But to code ajax just for this language value seems like overkill...

Is there any other way to do this other than using ajax..

Code: [Select]

section.childNodes[5].title="<?= htmlspecialchars(getLangValue('FEED_UNPARK_WORD_TEXT'), ENT_QUOTES, 'UTF-8'); ?>";


For sure by now someone has developed some kind of quick little snippet to get a language value from a php array, i mean im not even getting in the db, i just need the value from a php file.   And that is what the php getLangValue function does.   

I dont suppose i can include a php function file at the head of the js file ?

5

PHP / Re: How to avoid switch in index

« Last post by benanamen on Today at 01:24:59 am »

The switch has to go. It is not scalable. There are a couple ways to go.

One option is to dynamically map the request to a file. This option is okay for a small site but has the drawback being that your folder structure is locked and cant be changed without changing URL's.

The more scalable option is to use a Router. Either one you write yourself or one of the many that are available. This will allow you to change your folder structure at will without affecting your URL's and SEO. This leans more towards a framework type of architecture and is best suited for OOP. To be clear, I am not say A framework, just that type of architecture composed of components.

6

JavaScript / Re: appending a classname

« Last post by durango_d on Today at 01:23:42 am »

Ok i think i understand, its trying to tell me that the var parkred is not defined, not the css value.. so all i have to do is let it know that the var parkred = the text "parkred" lol   

Code: [Select]

parkred = "parkred";

this would be better with no new var

Code: [Select]

section.childNodes[5].className="fas fa-parking" + " "+"parkred"; 


7

JavaScript / appending a classname

« Last post by durango_d on Today at 01:14:51 am »

Hi, i want to add a css color class to an already existing classname value, how do i do that..

here is what i have

the childNodes look like this
NodeList(6) [text, h3, text, div, text, button#togglePark.fas.fa-parking]

so i know the child i want is #5

Code: [Select]

console.log(section.childNodes[5]);

// <button type="button" class="fas fa-parking" id="togglePark"></button>

in my css

Code: [Select]

.parkred {
   color: #ff949b;  /* lt red */
}


and here is my code but it tells me that parkred does not exist

Code: [Select]

section.childNodes[5].className += " " + parkred; 

is the syntax wrong?

thanks

8

JavaScript / Re: Parking Elements

« Last post by durango_d on Today at 12:28:25 am »

Thats a pretty neat little css trick.... very cool....

I did add this to the togglePark, ill use your var name for the example, which just show the text of Empty if its empty... ill come up with a nicer text or maybe an icon of some kind for asthetics...

Code: [Select]

if( $('#garage:empty').length )
{
    var t = garage.appendChild(d.createElement("span"));
    t.className = "lite";
    t.textContent = "Empty";
}


and then to turn it red when parked, inside the togglePark function

Code: [Select]

if(section.parentNode.id == "garage")
{
  section.childNodes[5].id="togglePark_red";
}

and then just copied the togglePark css and changed the color to red.

I know im far from quite there, but i feel i learned alot with your help.... thanks

9

PHP / How to avoid switch in index

« Last post by xmohamadx on Today at 12:11:48 am »

I use this function from Jason Knight to get REQUEST_URI:

Code: [Select]

<?php

(function() {
  $path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
  if (strpos($path, '..')) die('Hacking Attempt Detected, Aborting');
  $path = str_replace(['\\', '%5C'], '/', substr(
    $path,
    strlen(pathinfo($_SERVER['SCRIPT_NAME'], PATHINFO_DIRNAME)) 
  ));

  if (empty($path)) 
    define('REQUEST', [ 'index' ]); 
else {
    $path = explode('/', $path);
    foreach ($path as &$p) $p = urldecode($p);
    define('REQUEST', $path);
  }
})();

And inside my index.php, I need to output templates based on REQUEST[0], so this is what I do right now:

Code: [Select]

<?php

(function() {

  // startup includes like common.template.php and common.lib.php which holds the above function

  $pdo = new Database(
    ':host=localhost;dbname=mohamad;charset=utf8',
    'username',
    'password');

  switch (REQUEST[0]) {
    case 'home':

      template_header('title');
      template_foo();
      break;

    case 'blog':

      $blog = new Blog($pdo);
      $stmt = $blog -> read();
      $blogData = $stmt->fetchAll();

      template_header('title');
      template_blogSummary($blogData);
      break;

      // and so on
  }

  template_footer();

})();

So it seems a bad practice to do it with switch.
One way is to use actions, writing codes of each case inside a single action.php, and only include it in the index. The problem is that I cannot use safeInclude, because I need to send data from the database as an argument.
Another way is to use the switch with functions that hold codes of each case, a little clarity, but still, need to use the switch.

10

JavaScript / Re: Parking Elements

« Last post by Jason Knight on 30 Oct 2020, 10:52:25 am »

It's in the CSS:

Code: [Select]

#garage section > div {
position:absolute;
top:-999em;
left:-999em;
}

When our sections are in #garage, take any DIV that are direct children of it, and hide them off screen. I hide them off screen with absolute positioning so that screen readers and search engines that obey screen media (when they shouldn't) don't ignore the content. When possible, avoid display:none on anything that's actually content. It can be ignored, or worse get you penalized for "content cloaking".

Probably doesn't matter for your activity panel, but it's a good practice to just get into.