Sandor
-
Posts
10 -
Joined
-
Last visited
Sandor's Achievements
Newbie (1/7)
0
Reputation
-
Thank you, I'll get that a try later. For some reason my mind wants to default to double quotes when ever a sub-element also requires quotation marks and then using single quotes... I think its something that was instilled in primary school grammar lo those many years ago.
-
First off thank you so much. I did not end up using your method... But while trying to figure out what you meant lead me down the path to where I rediscovered the php function stripslashes() and that worked as required allowing me to code the replacement in PHP where I have the best programming foundation. Now when I type <?php nameTag("john_doe123","John","C"); ?> it builds the html correctly. Here is the secret sauce.... <?php function nameTag($id_tag,$alias,$dept_tag) { switch ($dept_tag) { //This only sets the correct colors for the button. case "B": $color1 = " w3-indigo"; $color2 = " w3-hover-blue"; break; case "C": $color1 = " w3-dark-grey"; $color2 = " w3-hover-grey"; break; case "DA": $color1 = " w3-blue-grey"; $color2 = " w3-hover-teal"; break; case "DR": $color1 = " w3-deep-purple"; $color2 = " w3-hover-purple"; break; case "F": $color1 = " w3-deep-orange"; $color2 = " w3-hover-orange"; break; case "R": $color1 = " w3-green"; $color2 = " w3-hover-light-green"; break; case "W": $color1 = " w3-cyan"; $color2 = " ww3-hover-light-blue"; break; default: $color1 = " w3-black"; $color2 = " w3-white"; } $r1 = "<span class=\' w3-tag w3-round".$color1.$color2."\' onclick=\"document.getElementById(\'".$id_tag."\').style.display=\'block\'\">".$alias."</span>"; echo "\n".stripslashes($r1)."\n"; } ?>
-
Not sure I follow what you mean. The goal is to make a quick and easy function call to act as a macro to fill in the supplied data... If I'm going to use a multi-dimensional array I might as well start building the dataset in MySQL or even just XML and hoping those that come after won't muck it up.
-
The project has a number of huge word wall pages where its desirable to tag various persons with a popup with their extended info, several dozen per page. After I finish my work on the site, I expect less skilled operators to add content at a later time, so I want to automate as much of the process as I can to prevent typos breaking the pages. There ought to be a way... There really ought to be a way where I can put this.... <button class='w3-button w3-round [Lookup color from argument 3] [lookup hover-color from argument 3]' onclick="document.getElementById('[argument 1]').style.display='inline'">[argument 2]</span> into a shortcut function call like.... <script> nameTag(john_doe123, John, A); </script> Where the output sent to the browser engine is this: <button class='w3-button w3-round w3-red w3-hover-blue' onclick="document.getElementById('john_doe123').style.display='inline'">John</span> There really must be a viable way to not hand code every single instance of those button calls... How do I do it? Every method I've devised so far doesn't work. I feel like the solution is mockingly close too. <script> funtion nameTag(a, b, c) { //assume code here for taking 'C' above and calculating what colors to use// let color1 = "w3-red"; let color2 = "w3-hover-blue"; let result = "\"<span class='w3-tag w3-round\"" + color1 + color2 + "' onClick=\"document.getElementById('" + arg1 + "').style.display='inline'\">" + arg2 + "</span>"; } </script> Which isn't returning anything. I've thought myself into a corner and need help. -
Ok, that helped quite a bit. print "<body style=\"max-width:400px; min-height: 100vh; background-color: steelblue;\">\n"; This worked as expected. I suspect that I was not passing the multiple entries properly and the browser followed neither direction. But its uncovered another issue. If your using a graphic in a display container, and the graphic has transparency in it, it shows the background color above, not the background of the container its in. Since I'm using a different container background for each block in the stack, this is... undesired operation. Programming, right? Fix one issue and find two more. *grin*
-
One of the pages I've got for a mobile application is "shorter" than most phone screens. Since I've taken pains to use a color schema that does not use white backgrounds, is there any way to tell the browser what color to paint the otherwise undefined space? I'm using w3.css color tags in the body and want to match the background to the last container in the stack, so that any remaining whitespace is tinted. My first thought was to use the background-color property. I'm not sure if it plays well with w3.css tagging, and even if I color-code around that, it seems to conflict with the max-width property I'm using to force my browser to render a mobile-phone screen sized output. I realize that I can go forward on the production version without the max-width field set and that will likely be the end of the issue, but I'd like to 'see it' during testing. Any thoughts?
-
I've run into an annoying problem with spacing that I can't seem to code myself out of. I have a table with a 400x100 image at its background in a page that is set max-width=400px, intended to be full width on mobile devices. The containers honor this, but somehow the image is being resized. Note the right edge of the screen, the 400px image is not aligned with the 400px containers. So i borrowed iPhone5 and I found a different problem. the far right of the image is clipped, so I dropped the last label and radio button down to the next container for the first set. That is when I noticed the w3-radio button, while bigger that the standard radio, aligns differently on iPhones. When I load the page in FireFox it looks the way I intend. Link to page: http://scaikeqc.org/sandbox/t6a.php This is a semi-permalink, as I've set aside the current version of the module to show you. Clearly I need something more flexible, while at the same time doesn't break the careful balance between background image and text positioning and font size. I've fallen back on the old way of using HTML tables for layout because I wasn't getting the results desired with my basic understanding of CSS. Relevant code below with relevant functions below that. Reason for using a function to post the opening HTML headers is that I use a lot of self-referencing PHP which in turns uses the header('Location: '.$_SERVER['PHP_SELF']); method of processing data before kicking back or pressing forward based on validation tests or other calculations in PHP. OpenHTML($_SESSION['EName']); print "<body style=\"max-width:400px\">\n"; ShowCaution(); ShowError(); print "<form name=\"moarch\" action=\"{$_SERVER['PHP_SELF']}\" method=\"POST\">\n"; print "<div id=\"MoArch\" class=\"w3-container w3-indigo\">\n"; print "<table class=\"w3-table w3-centered\"> \n"; print "<TR><TD>Mounted Archery -- Single Shot</TD></TR>\n"; IF (is_null($_SESSION['RiderHonors'])) { printf("<TR><TD><H2>%s</H2></TD></TR>\n", $_SESSION['RiderName']); } ELSE { printf("<TR><TD><H2>%s %s</H2></TD></TR>\n", $_SESSION['RiderHonors'], $_SESSION['RiderName']); } print "</TABLE>\n"; print "</DIV>\n"; print "<div class=\"w3-display-container\">\n"; print "<img src=\"target_sm.png\" alt=\"Target\">\n"; print "<div class=\"w3-display-left w3-container\">\n"; print "<table class=\"w3-table w3-centered w3-xlarge w3-text-shadow\">\n"; print "<TR class=\"w3-left-align\">\n"; print "<TD class=\"w3-text-light-green\">$Gold<BR><input class=\"w3-radio\" type=\"radio\" name=\"Pass1\" value=\"G\"></TD><TD></TD><TD class=\"w3-text-black\">$Red<BR><input class=\"w3-radio\" type=\"radio\" name=\"Pass1\" value=\"R\"></TD><TD></TD><TD class=\"w3-text-white\">$Blue<BR><input class=\"w3-radio\" type=\"radio\" name=\"Pass1\" value=\"B\"></TD><TD></TD><TD class=\"w3-text-light-gray\">$Black<BR><input class=\"w3-radio\" type=\"radio\" name=\"Pass1\" value=\"K\"></TD><TD></TD><TD class=\"w3-text-dark-gray\">$White<BR><input class=\"w3-radio\" type=\"radio\" name=\"Pass1\" value=\"WK\"></TD><TD></TD>\n"; print "</TR>\n"; print "</TABLE>\n"; print "</div>\n"; print "</div>\n"; print "<div id=\"MoArch\" class=\"w3-container w3-indigo\">\n"; print "<table class=\"w3-table w3-centered\"> \n"; print "<TR><TD>First Pass</TD><TD>Miss<input class=\"w3-radio\" type=\"radio\" name=\"Pass1\" value=\"M\"></TD></TR>\n"; print "</TABLE>\n"; print "</DIV>\n"; function OpenHTML($c) { print "<!DOCTYPE html>\n"; print "<html>\n"; print "<title>$c</title>\n"; print "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n"; print "<link rel=\"stylesheet\" href=\"http://www.w3schools.com/lib/w3.css\">\n"; } function ShowCaution() { IF (isset($_SESSION['Caution']) AND !is_null($_SESSION['Caution'])) { print "<article class=\"w3-panel w3-yellow\">\n"; print "<P>Take Note:<BR>\n"; print "{$_SESSION['Caution']}</P></article>\n"; $_SESSION['Caution'] = NULL; } } function ShowError() { IF (isset($_SESSION['EntryError']) AND !is_null($_SESSION['EntryError'])) { print "<article class=\"w3-panel w3-red\">\n"; print "<P>You have an error in your input, please try again.<BR>\n"; print "{$_SESSION['EntryError']}</P></article>\n"; $_SESSION['EntryError'] = NULL; } }
-
Oh good, I'm not going crazy. What's the smart way of overriding default click behavior?
-
I'm trying to work my way around to a combination of PHP and JavaScript forms processing, and I'd like to change the label of an accordion tab after that portion of the form has been processed. Since some containers have more complex calculations to make than others, I thought it would look stylistically pleasing to see the results as the containter label, much in the same way an select input looks after choosing an entry in the drop down list. Is this possible?
-
After letting a project age well, I'm looking at modernizing my code. The project takes the data input all year long at several different events and builds a 'league scoreboard' of them. The code goes back as far as 2002 in the oldest parts and the last major update to the code was in '07 even if CSS was added by someone else in '14. I have not worked with CSS before, and had a helper apply it to the PHP pages I coded way back when, but they were using a HTML4 subset that I would consider 'less than easily human readable'. My helper dropped out and I found myself looking at W3.css to learn what about what had changed in the ten years or so since I worked actively on this codebase, in order to pick up what they had started and migrate to something that I could maintain alongside my code. It was also decided to try and code parts of the project specifically for mobile use first. (/backstory) After playing around with W3.css I came up with a HTML template of what I'd like to get working. http://scaikeqc.org/sandbox/tf-03.html. It needs polishing, and some refinements, but its close to what I want for the mobile experience. Please note, there are no FORM tags in that page so the selects and inputs are for show only. I tried making a proper form of it, http://scaikeqc.org/sandbox/tf-03.php and it was a right mess. Every time you click on the accordion labels to expand them, the form submits, the script reloads, hilarity ensues. This introduces trash into the resultset and before I remembered to use the action tag on the form element, I crashed the GET. Is it possible to have a whole-page form broken into accordion segments? Here is a snip of the-03.php <form class="w3-form" method="post" action="<?php echo $_SERVER[PHP_SELF]?>"> <div class="w3-accordion w3-light-grey"> <button onclick="feif('Rider')" class="w3-btn-block w3-centered"> Open Rider Selection </button> <div id="Rider" class="w3-accordion-content w3-container w3-red"> <H2>Select the Rider</H2> <SELECT class="w3-select" NAME="Pname"> <?PHP IF (isset($Pname)){ printf("<OPTION VALUE=\"%s\">RiderID: %s\n", $Pname, $Pname); } else { echo "<OPTION VALUE=\"XXX\">Select Rider<OPTION VALUE=\"XXX\">-----\n"; echo "<OPTION VALUE=\"NEW\">**NEW RIDER**\n"; } ?> <OPTION VALUE="XXX">----- <OPTION VALUE="306">Johanna <OPTION VALUE="83">Aaron MacGregor <!-- 465 additional select items omitted for brevity--> <OPTION VALUE="421">Zinaida Orshima <OPTION VALUE="114">Zuriel Nightshade <OPTION VALUE="XXX">-----<OPTION VALUE="NEW">**NEW RIDER** </SELECT> </div> <button onclick="feif('Horse')" class="w3-btn-block w3-centered"> Open Horse Selection </button> <div id="Horse" class="w3-accordion-content w3-container w3-red"> <H2>Select the Horse</H2> <SELECT class="w3-select" NAME="Hname"> <?PHP IF (isset($Hname)){ printf("<OPTION VALUE=\"%s\">HorseID:%s\n", $Hname, $Hname); } else { echo "<OPTION VALUE=\"XXX\">Select Horse<OPTION VALUE=\"XXX\">-----\n"; echo "<OPTION VALUE=\"NEW\">**NEW Horse**\n"; } ?> <OPTION VALUE="12">Unknown Mount <OPTION VALUE="XXX">----- <OPTION VALUE="103">Ace <!-- 380 additional select items omitted for brevity--> <OPTION VALUE="236">Zeus' Dream <OPTION VALUE="280">Zia <OPTION VALUE="XXX">-----<OPTION VALUE="NEW">**NEW HORSE** </SELECT> </div> The form continues through five more containers I've not copied here. <input type="submit"> </FORM> <script> function feif(id) { var x = document.getElementById(id); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> I have a proof-of-concept form that does work(no accordions or data validation, data entered is not retained). This one checks an events database to see which of the five games are being played and only displays the data entry containers for the games that are being run. This is why I wanted to containerize the different sections of data entry. You can poke at that form here http://scaikeqc.org/sandbox/tf-05.php. If you've gotten this far in my post, please accept my thanks for seeing it through, and my apologies for less than beautified code. I'm recycling a lot of the form code from the previous version and haven't had the time to polish non-working code.
