Jump to content

rootKID

Members
  • Posts

    467
  • Joined

  • Last visited

About rootKID

  • Birthday 11/08/1992

Previous Fields

  • Languages
    PHP, CSS, HTML, JavaScript, jQuery, MySQL, MySQLI

Profile Information

  • Gender
    Male
  • Location
    DK
  • Interests
    HTML, CSS, Photoshop, PHP, jQuery, JavaScript, Ajax, MySQL, MySQLI, Movies, Gaming, Music, American Football, Homework

Recent Profile Visitors

11,732 profile views

rootKID's Achievements

Member

Member (2/7)

18

Reputation

  1. Hello, been a while. I'm trying to throw myself into something that is quite new to me, which is dealing with JSON data x) I'm using bootstrap5 (latest version) on my project, and since im having a category with unknown numbers of sub categories, i found a good solutions for my database. However, making this work with JSON is a bit too much for me i think since i've been dealing with this problem for a few days now. The problem is that in browser js console, i see that i get the response i wanted from my script with data returned in a form of array - however, i can't seem to figure out how to actually show theese datas! Im of course talking about names, texts, parent_id, id, etc... Do you guys have any idea as to what im doing wrong? This is my current javascript code - i can show you my PHP code as well should you need it. Many thanks in advance! $(document).ready(function() { function getTree( data ) { // Samples to get started on some ideas... // html()... // text()... // -> this one needs a container and can take the text INSIDE of the container. Example below: // -> <div>.text() can read this <span>and including this</span> as well as this</div> // $("[class*='CLASS-']").click // -> looks for 'CLASS-' anywhere within the value of class attribute. // $(document).ready(function() {}); // $(this) // -> will target the element that triggered the event, then you transverse to current anchor element. Example below: // -> $(this).find('a.thumb').attr('title'); // -> -> You update the other modal details by referring with $(this) then the element you which to target each time. Example below: // -> -> $('.modal-footer').find(videoTitle).html(INSERTDATA_videoDirector); // -> -> -> and so on... // (this).find().val()... // var TARGET_div = $('div'); // var TARGET_id = $('#ID'); // var TARGET_class = $('.CLASS'); // var TARGET_class = $("[class*='CLASS-']"); // Samples to get started on some ideas... /* var dataArray = [ data ]; $.each(dataArray[0], function( i, val ) { $('#myTree').bstreeview({ data: { "id" : val.id, "parent_id" : val.parent_id, "name" : val.name, "text" : val.text } }); }); */ var dataArray = [ data ]; console.log( "JQUERY AJAX -> FUNCTION RETURNS THIS -> VAR: dataArray[0]:" ); console.log(dataArray[0]); return dataArray[0]; } $.ajax({ type: 'GET', url: 'inc/html/html-index.php/JQUERY_AJAX-categories_1/JQUERY_AJAX-categories_1.php?version=1_0_2', dataType: 'json', // needed only if you do not supply JSON headers on the PHP Script File side! success: function( data ) { dataArray = getTree( data ); console.log( "JQUERY AJAX SUCCESS -> SHOWING RETURNED DATA FROM FUNCTION VIA VARIABLE CREATED JUST ABOVE THIS LOG -> VAR: dataArray:" ); console.log( dataArray ); console.log( "================================" ); console.log( "Just beneath here, i will use via the jQuery library the '$.each' function, and make use of my VAR called dataArray - which is the data returned from the function where we generate all the data and order it!" ); console.log( "================================" ); $.each( dataArray, function( i, val ) { console.log( val.id ); console.log( val ); $('#myTree').bstreeview({ // data: { "id" : val.id, "parent_id" : val.parent_id, "name" : val.name, "text" : val.text } data: val }); }); }, error: function( errorThrown ) { alert( "JQUERY_AJAX Error: " + errorThrown.message ); } }); }); Link for github with the project im trying to make work: https://github.com/nhmvienna/bs5treeview
  2. Hello W3S! Been a while. So, lately started a new project. Busy with my studies on the side, but needed a short break. And i thought, what better way to take a break with coding, than having an actual project? My new project is basically a "Note Taking" website (private of course, but still, more or less a hobby than being an active project - for now at least!). Anywho, so, i have a database and i noticed this before but not sure what the code-lines mean exactly. To me it looks like comments (maybe cuz im used at using PHP mostly), but any suggestions would be greatly appreciated! (codes below found online, the ones in the second code window are mine... wanted to know what they do mostly and if i need them anyways?): /*!40101 SET @OLD_CHARACTER_SET_CLIENT=[spam-filter]CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=[spam-filter]CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=[spam-filter]COLLATION_CONNECTION */; /*!40101 SET NAMES utf8 */; /*!40103 SET @OLD_TIME_ZONE=[spam-filter]TIME_ZONE */; /*!40103 SET TIME_ZONE='+00:00' */; /*!40014 SET @OLD_UNIQUE_CHECKS=[spam-filter]UNIQUE_CHECKS, UNIQUE_CHECKS=0 */; /*!40014 SET @OLD_FOREIGN_KEY_CHECKS=[spam-filter]FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */; /*!40101 SET @OLD_SQL_MODE=[spam-filter]SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */; /*!40111 SET @OLD_SQL_NOTES=[spam-filter]SQL_NOTES, SQL_NOTES=0 */; (my codelines are below here - many thanks!): /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; Hoping someone will educate me a little further! Regards, rK.
  3. Hmm, it seems much easier, yes. But... i have to ask, in the peace of code you have here, what are you doing? I mean, when you minus 1 with weekday counter, that part i am a bit unsure what does to be honest...
  4. Hi. I just got home and thanks for the quick reply - i think i will have some considering to do but otherwise both options looks pretty good to me. Thanks for the support! For now i will do your first option but i will still consider your second optional code for future ^^ Many thanks ^^
  5. Thanks alot! However, is it not possible to do this dynamicly? Would i be able to create another loop maybe (instead of a static array you do here, just replacing this with a loop? - and should it be a for loop like the one under?) - will take a look at it either way when home - on the phone right now. Thanks for the answer so far tho!
  6. Hello W3S! Been a while as always. So my new project is a calendar. I got it working. I found some basic code online HOWEVER! I have a simple HTML-Table that generates the calendar dates (thats perfect), but the thing is, at the very TOP of that table, i wish to show the week-days for a single week (mon, tue, wed...) but only once and dynamicly if possible - just not sure on how to achieve this! Any ideas would be lovely! - PS: Sorry for my code... have not ordered anything just yet, trying to re-do a lot of code and re-write it so that i can understand it just a little better myself since its been a while ^^ Here is my current code - thanks n advance! :) <?php require_once("calendar_1-config.php"); require_once("calendar_1-functions.php"); ?> <!DOCTYPE html> <?= $CONFIG___html_lang; ?> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NORMAL KALENDER (+ EVENTS)</title> <!-- Favicons --> <link href="assets/img/favicon.png" rel="icon"> <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon"> <!-- Vendor CSS --> <link href="assets/vendor/aos/aos.css" rel="stylesheet"> <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet"> <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet"> <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet"> <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet"> <!-- Main CSS --> <link rel="stylesheet" href="assets/css/calendar_1-style.css"> </head> <body> <?php # LINE-BREAKS AND A LINE -> just info for each variable and what they show! echo '<br />'; echo '<hr />'; echo '...(1) - NEXT PART...'; echo '<br />'; echo '...VARIABLES AND WHAT THEY SHOW EACH...'; echo '<hr />'; echo '<br />'; # GET -> Year & Month if( isset($_GET['GET___year_AND_month']) ) { $GET___year_AND_month = $_GET['GET___year_AND_month']; // Format: 1992-11 # Year, Month } else { $GET___year_AND_month = date('Y-m'); // Format: 1992-11 # Year, Month } echo '<p>"$GET___year_AND_month" -> <b>'.$GET___year_AND_month.'</b></p>'; # Checking The Format $TIMESTAMP_UNIX___FROM___GET___year_AND_month = strtotime($GET___year_AND_month . '-01'); if( $TIMESTAMP_UNIX___FROM___GET___year_AND_month === false ) { $GET___year_AND_month = date('Y-m'); // Format: 1992-11 # Year, Month $TIMESTAMP_UNIX___FROM___GET___year_AND_month = strtotime($GET___year_AND_month . '-01'); } echo '<p>"$GET___year_AND_month" -> <b>'.$GET___year_AND_month.'</b></p>'; echo '<p>"$TIMESTAMP_UNIX___FROM___GET___year_AND_month" from "$GET___year_AND_month" -> <b>'.$TIMESTAMP_UNIX___FROM___GET___year_AND_month.'</b></p>'; # Today (Format: yyyy-mm-dd) $today = date('Y-m-j'); // Format: 1992-11-08 # Year, Month, Day echo '<p>"$today" -> <b>'.$today.'</b></p>'; # Title_1 (Format: MONTH_NAME, yyyy) -> (Example Format: November, 1992) $TITLE_1___CURRENT_month_AND_year = date('F, Y', $TIMESTAMP_UNIX___FROM___GET___year_AND_month); echo '<p>"$TITLE_1___CURRENT_month_AND_year" from "$TIMESTAMP_UNIX___FROM___GET___year_AND_month" -> <b>'.$TITLE_1___CURRENT_month_AND_year.'</b></p>'; # Title_2 (Format: yyyy, MONTH_NAME, DATE (...1'st...)) -> (Example Format: 1992, November, 8'th) $TITLE_2 = date('Y, F, d\'S', $TIMESTAMP_UNIX___FROM___GET___year_AND_month); echo '<p>"$TITLE_2" from "$TIMESTAMP_UNIX___FROM___GET___year_AND_month" -> <b>'.$TITLE_2.'</b></p>'; # CREATE LINKS FOR - Previous & Next - Month's $prev = date('Y-m', strtotime('-1 month', $TIMESTAMP_UNIX___FROM___GET___year_AND_month)); // Previous Month $next = date('Y-m', strtotime('+1 month', $TIMESTAMP_UNIX___FROM___GET___year_AND_month)); // Next Month echo '<p>"$prev" from "$TIMESTAMP_UNIX___FROM___GET___year_AND_month" -> <b>'.$prev.'</b></p>'; echo '<p>"$next" from "$TIMESTAMP_UNIX___FROM___GET___year_AND_month" -> <b>'.$next.'</b></p>'; # Total Numbers Of Days In The Month $month_days_count = date('t', $TIMESTAMP_UNIX___FROM___GET___year_AND_month); echo '<p>"$month_days_count" from "$TIMESTAMP_UNIX___FROM___GET___year_AND_month" -> <b>'.$month_days_count.'</b></p>'; # 1:Monday, # 2:Tuesday, # 3:Wednesday, # 4:Thursday, # 5:Friday, # 6:Saturday, # 7 "0?":Sonday, # ...Day of the week... $STR___integer_string___of_the_day_of_the_week_we_are_in = date('N', $TIMESTAMP_UNIX___FROM___GET___year_AND_month); // ISO-8601 numeric representation of the day of the week (added in PHP 5.1.0) $STRING_1 = $STR___integer_string___of_the_day_of_the_week_we_are_in; echo '<p>"$STR___integer_string___of_the_day_of_the_week_we_are_in" from "$TIMESTAMP_UNIX___FROM___GET___year_AND_month" -> <b>We\'re currently in day nr.<u>'.$STR___integer_string___of_the_day_of_the_week_we_are_in.'</u> of the week!</b></p>'; # ...Day of the year... $STR___integer_string___day_of_the_year = date('z', $TIMESTAMP_UNIX___FROM___GET___year_AND_month); // $STRING_2 = $STR___integer_string___day_of_the_year; echo '<p>"$STR___integer_string___day_of_the_year" from "$TIMESTAMP_UNIX___FROM___GET___year_AND_month" -> <b>We\'re currently in day nr.<u>'.$STR___integer_string___day_of_the_year.'</u> of the year!</b></p>'; # ...Week number of the year... $STR___integer_string___week_of_the_year = date('W', $TIMESTAMP_UNIX___FROM___GET___year_AND_month); // $STRING_3 = $STR___integer_string___week_of_the_year; echo '<p>"$STR___integer_string___week_of_the_year" from "$TIMESTAMP_UNIX___FROM___GET___year_AND_month" -> <b>We\'re currently in week nr.<u>'.$STR___integer_string___week_of_the_year.'</u> of the year!</b></p>'; # LINE-BREAKS AND A LINE echo '<br />'; echo '<hr />'; echo '...(2) - NEXT PART...'; echo '<hr />'; echo '<br />'; # Array For Calendar // $weeks = []; // $week = ''; $HTMLOUT_weeks = []; // Creating an array. $HTMLOUT_week = ''; # Adding Empty Cell's $HTMLOUT_week .= str_repeat('<td></td>', $STRING_1 - 1); // str_repeat == "Repeat a string" # LINE-BREAKS AND A LINE echo '<br />'; echo '<hr />'; echo '...(3) - NEXT PART...'; echo '<hr />'; echo '<br />'; # Programming The Calendar Output $TIMESTAMP_UNIX = $TIMESTAMP_UNIX___FROM___GET___year_AND_month; for( $day = 1; $day <= $month_days_count; $day++, $STRING_1++ ) { $CALCULATE_dates = date('Y-m-'.$day, $TIMESTAMP_UNIX); $FIND_dates_names_FULL_DETAILS = date("D M j G:i:s T Y", strtotime($CALCULATE_dates)); // echo $FIND_dates_names_FULL_DETAILS . '<br />'; if( $today == $CALCULATE_dates ) { // $HTMLOUT_week .= '<td class="today" title="(FIND_CURRENT_dates_names_FULL_DETAILS) - mangler at lave følgende!">'; $HTMLOUT_week .= '<td style="background-color: rgba( 0, 0, 0, 0.5 );">'; } else { // $HTMLOUT_week .= '<td title="(FIND_CURRENT_dates_names_FULL_DETAILS) - mangler at lave følgende!">'; $HTMLOUT_week .= '<td>'; } $HTMLOUT_week .= $day . '</td>'; # Sunday OR Last Day Of The Month if( $STRING_1 % 7 == 0 || $day == $month_days_count ) { # Last Day(s) Of The Month if( $day == $month_days_count && $STRING_1 % 7 != 0 ) { # Add Empty Cell's $HTMLOUT_week .= str_repeat('<td></td>', 7 - $STRING_1 % 7); } // $HTMLOUT_weeks[] = '<tr>'; // $HTMLOUT_weeks[] = '<td align="middle">'; // // $HTMLOUT_weeks[] = '<b>MAN</b>'; // $HTMLOUT_weeks[] = '<b>Man</b>'; // $HTMLOUT_weeks[] = '</td>'; // $HTMLOUT_weeks[] = '<td align="middle">'; // // $HTMLOUT_weeks[] = '<b>TIR</b>'; // $HTMLOUT_weeks[] = '<b>Tir</b>'; // $HTMLOUT_weeks[] = '</td>'; // $HTMLOUT_weeks[] = '<td align="middle">'; // // $HTMLOUT_weeks[] = '<b>ONS</b>'; // $HTMLOUT_weeks[] = '<b>Ons</b>'; // $HTMLOUT_weeks[] = '</td>'; // $HTMLOUT_weeks[] = '<td align="middle">'; // // $HTMLOUT_weeks[] = '<b>TOR</b>'; // $HTMLOUT_weeks[] = '<b>Tor</b>'; // $HTMLOUT_weeks[] = '</td>'; // $HTMLOUT_weeks[] = '<td align="middle">'; // // $HTMLOUT_weeks[] = '<b>FRE</b>'; // $HTMLOUT_weeks[] = '<b>Fre</b>'; // $HTMLOUT_weeks[] = '</td>'; // $HTMLOUT_weeks[] = '<td align="middle">'; // // $HTMLOUT_weeks[] = '<b>LØR</b>'; // $HTMLOUT_weeks[] = '<b>Lør</b>'; // $HTMLOUT_weeks[] = '</td>'; // $HTMLOUT_weeks[] = '<td align="middle">'; // // $HTMLOUT_weeks[] = '<b>SØN</b>'; // $HTMLOUT_weeks[] = '<b>Søn</b>'; // $HTMLOUT_weeks[] = '</td>'; // $HTMLOUT_weeks[] = '</tr>'; $HTMLOUT_weeks[] = '<tr>' . $HTMLOUT_week . '</tr>'; $HTMLOUT_week = ''; } } echo '<div class="container-fluid">'; echo '<div class="row">'; echo '<div class="col-lg-12">'; echo '<div class="table-responsive">'; echo '<table class="table table-bordered">'; echo '<tr>'; echo '<td colspan="0">'; echo '&nbsp;'; echo '</td>'; echo '<td align="right">'; echo '<a href="#">'; echo '&lt; PREV'; echo '</a>'; echo '</td>'; echo '<td colspan="0">'; echo '&nbsp;'; echo '</td>'; echo '<td align="middle">'; echo '<a href="#">'; echo 'PRESENT'; echo '</a>'; echo '</td>'; echo '<td colspan="0">'; echo '&nbsp;'; echo '</td>'; echo '<td align="left">'; echo '<a href="#">'; echo 'NEXT &gt;'; echo '</a>'; echo '</td>'; echo '<td colspan="0">'; echo '&nbsp;'; echo '</td>'; echo '</tr>'; foreach( $HTMLOUT_weeks as $week ) { echo $week; } echo '</table>'; echo '</div>'; echo '</div>'; echo '</div>'; echo '</div>'; /* // echo '<table border="1" cellpadding="0" cellspacing="0">'; echo '<table class="table table-bordered">'; echo '<tr>'; echo '<td colspan="0">'; echo '&nbsp;'; echo '</td>'; echo '<td align="right">'; echo '<a href="#">'; echo '&lt; PREV'; echo '</a>'; echo '</td>'; echo '<td colspan="0">'; echo '&nbsp;'; echo '</td>'; echo '<td align="middle">'; echo '<a href="#">'; echo 'PRESENT'; echo '</a>'; echo '</td>'; echo '<td colspan="0">'; echo '&nbsp;'; echo '</td>'; echo '<td align="left">'; echo '<a href="#">'; echo 'NEXT &gt;'; echo '</a>'; echo '</td>'; echo '<td colspan="0">'; echo '&nbsp;'; echo '</td>'; echo '</tr>'; echo '</table>'; */ ?> <!-- Vendor JS --> <script src="assets/vendor/aos/aos.js"></script> <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="assets/vendor/glightbox/js/glightbox.min.js"></script> <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script> <script src="assets/vendor/purecounter/purecounter.js"></script> <script src="assets/vendor/swiper/swiper-bundle.min.js"></script> <script src="assets/vendor/typed.js/typed.min.js"></script> <script src="assets/vendor/waypoints/noframework.waypoints.js"></script> <!-- Main JS --> <script src="assets/js/main.js"></script> </body> </html>
  7. Hi W3S! Been a while (as always). So i am in need of support yet again. I have this fun project of mine, where i have 2 background images i really wonna show, but at random on each page load... so as the title says, is there a way to do this with simple javascript? As said i have 2 background images i wanna show and since im not the best with javascript, i kinda hoped i could get you guys to show me an example or at least guide me to where i could look? I have looked at W3Schools main website but not sure if i'm looking in the right spot. Many thanks in advance! :D PS: The idea behind the background images is that they should be attached to the "<body>" tag for kinda "overlayers". If that makes sence? I already have a "black" background, and these images are supposed to look like "x"s... but in different colors... hense the random images... Anyways as always, thanks in advance and i hope you guys can help me... again... as always... Happy new year so far, and hope all are with good health! And watch out! <3 Regards, rootKID :D
  8. but i tried this and it dosent react for some reason 😕 I tried creating a whole new project with css and everything. When i get home i can try and give you the code here, where you can see what i am doing currently - maybe you can see if i'm doing it correctly or not. Right now im just using the CSS based from OpenCart admin panel and it seems to work as said before, but still, could be doing it wrong. Will share the coe when i get home later
  9. Hmm ok i think i understand now. But just to give you an ideas as to what im looking into currently - is the demo page of "OpenCart" admin panel. OpenCart is an open-source website for webshops - and i kinda like their setup - which i am currently trying to copy. I have tried to copy some of their CSS code just to see how theirs work and it looks pretty good - just not sure if its the right way but it works on my end. Basically i still hit the "body" element, and tells it with normal css (no flex just yet), that it should be 100% height and then i have a simple wrapper div box right after as a child where i tell it to be absolute position and 100% height and from there, i can start playing around with divs inside, which is working great so far - i haven't had any spoilers/errors just yet
  10. hmm - if i start messing around with html/body tags, does that not interfere with the BootStrap CSS Oo? I mean, even tho i set it to be 100% in both height and width, still...
  11. hmmm... so something similar to this you mean: <div class="container-fluid"> put my wrapper around here? or how do you mean? <div class="row"> <div class="col-sm-4"> .COL-SM-4 </div> <div class="col-sm-8"> .COL-SM-8 </div> </div> </div> this is why im kinda confused. if i could only use bootstrap, my life would be saved but i have primarily 2 problems when it comes to BS. first is that i cannot get the things to be 100% height AND even then, if i do get them to be 100% height, i have trouble with overflow's with texts and such AND! Then the next problem is the columns (i think at least...). Whenever i try to make the height 100%, i have problems with the breakpoints in bootstrap 4.5.2 - of which i simply don't know how to get around (the fixes). This is why i would have to make a work-around with the custom stuff but still a bit un-clear to me as to how i should take the aproach 😕
  12. ok so short answer is yet i can assume? And no, my classes won't in any way conflict with theirs. I also use something like ".CUSTOM_CSS-classe_name_goes_here_etc"... but why im confused is that they have specific breakpoints with rems and pixels... if i make a class called ".CUSTOM_CSS-wrapper_1" and place that as being my website holder etc - will i still be able for instance to place container,row and col-sm-12 classes inside there? If i have f.ex. a specific width inside that wrapper? Or for the sake of responsiveness an "auto" width? If that makes sense?
  13. Hello W3S. So this is not a problem as much as a question. I have found this awesome tutorial where i can use CUSTOM FLEXBOX CSS CODING to make a sidepanel/menu to my website (not online just yet). My question is. If i start doing this, can i use stuff like grid boxes from bootstrap 4? The reason i ask of this, is because im afraid of the grid "break-points". For example if i make use of a navbar on a content (the right side of the page etc...) and set the expand to "xl" - will the "width/px" breakpoint get in trouble with breaking and stuff like this, in regards to the custom setup i have? I'm asking mostly because im a big fan of bootstrap - however lately they have not been able to deliver the things i need and i would have to think differently and try to compromise with my designs and things like this. I hope my questions makes sense? Mostly because i know (again, for example), bootstrap 4 have breakpoints like "if less than 1000xxxx pixels, break" and so on. But in my situation, i wish to make a website that are kinda "divided" into left/right and with different pixels in widths and such - so if i start to insert "containers, rows, columns, etc"... this is what im afraid of? Hope you all understand my concern and could answer this - if more details/samples neede, dont hesitate to ask Many thanks in advance!
  14. Hi, been a while. Started a new project today. A WEBSITE Crawler made with pure PHP (if possible of course). I know there are other websites out there like this - but never the less i always wanted to create my very own. The idea about the project is to create a website that will gather information from various different website links i have pasted into the code/database etc, and it would then take the prices from those websites and place them in a sort of "history" of prices in the database. You probably know what im talking about - but just making this for the sake of seeing how its actually done. However, i am a little bit clueless as to where to start? I mean... would i create some sort of CRON job to run a file that would then execute the code for me each hour or something? And if so, how would a basic code like this look like? Any ideas what to look into would be really appreciated! Many thanks in advance!
  15. Hello W3S! So, im a bit confused kinda. Currently, im trying to "re-create" this canvas kind of "matrix effect". Found it from the URL below here: HTML5 CANVAS MATRIX EFFECT Now, what i am trying to achieve here, would be the exact same effect - but on a DIV instead? Because from what im aware of the canvas it is not possible to place things like DIV's and FORM's on those? (correct me if im wrong here....) So at the moment im kinda trying to re-engineer the effect, but still a little lost i guess. This is my current Javascript Code: /* ##################################################################################### # FILE: ( ROOT/file.login.3.html ) # ID & CLASS PREFIX: ( #fl3, .fl3_ ) # SAMPLE 1: ( body#fl3 ) # SAMPLE 2: ( #fl3 ) # SAMPLE 3: ( div.fl3_CLASS_ETC_ ) # SAMPLE 4: ( .fl3_CLASS_ETC_ ) # SAMPLE 5: ( .fl3_ ) ##################################################################################### */ // "#fl3_matrix_1" // "fl3_matrix_1_" // "fl3_matrix_1___" var fl3_matrix_1_id = document.getElementById("fl3_matrix_1"), // full screen dimensions fl3_matrix_1_screen_width = window.innerWidth, // or "cw = column width" fl3_matrix_1_screen_height = window.innerHeight, // or "ch = column height" fl3_matrix_1_character_array = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'], fl3_matrix_1_max_character_count = 100, fl3_matrix_1_falling_character_array = [], fl3_matrix_1_fontSize = 10, fl3_matrix_1_maxColums = fl3_matrix_1_screen_width/(fl3_matrix_1_fontSize) ; fl3_matrix_1_id.width = fl3_matrix_1_screen_width; // Width Being Set fl3_matrix_1_id.height = fl3_matrix_1_screen_height; // Height Being Set // Generates a random integer function fl3_matrix_1___randomInt( min, max ) { return Math.floor(Math.random() * ( max - min ) + min); } // Generates a random float function randomFloat( min, max ) { return Math.random() * ( max - min ) + min; } // Generates a "Point" function Point( x, y ) { this.x = x; this.y = y; } /* var canvas = document.getElementById( 'canvas' ), ctx = canvas.getContext( '2d' ), canvas2 = document.getElementById( 'canvas2' ), ctx2 = canvas2.getContext( '2d' ), // full screen dimensions cw = window.innerWidth, ch = window.innerHeight, charArr = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'], maxCharCount = 100, fallingCharArr = [], fontSize = 10, maxColums = cw/(fontSize); canvas.width = canvas2.width = cw; canvas.height = canvas2.height = ch; function randomInt( min, max ) { return Math.floor(Math.random() * ( max - min ) + min); } function randomFloat( min, max ) { return Math.random() * ( max - min ) + min; } function Point(x,y) { this.x = x; this.y = y; } Point.prototype.draw = function(ctx){ this.value = charArr[randomInt(0,charArr.length-1)].toUpperCase(); this.speed = randomFloat(1,5); ctx2.fillStyle = "rgba(255,255,255,0.8)"; ctx2.font = fontSize+"px san-serif"; ctx2.fillText(this.value,this.x,this.y); ctx.fillStyle = "#0F0"; ctx.font = fontSize+"px san-serif"; ctx.fillText(this.value,this.x,this.y); this.y += this.speed; if(this.y > ch) { this.y = randomFloat(-100,0); this.speed = randomFloat(2,5); } } for(var i = 0; i < maxColums ; i++) { fallingCharArr.push(new Point(i*fontSize,randomFloat(-500,0))); } var update = function() { ctx.fillStyle = "rgba(0,0,0,0.05)"; ctx.fillRect(0,0,cw,ch); ctx2.clearRect(0,0,cw,ch); var i = fallingCharArr.length; while (i--) { fallingCharArr[i].draw(ctx); var v = fallingCharArr[i]; } requestAnimationFrame(update); } update(); */ Now, what i am trying to do here, are to grab the ID, which is placed on the "<body>" tag! And from there, i wish to kinda place the text in the background? Not sure if this is possible with JavaScript, but again, the reason i want it as a kinda background is because text can still fill so if i just place them like that with the JavaScript, im pretty sure it would push to all the other elements somehow? If anybody got any clues or ideas as to how i could potentially manage to get this one running, i would love the help :D And if you are lost like me, dont hesitate to write and ask for more details. But just imagine this. Essentially i wish to create the effect in the background like this on the "body" html element, because i can then place stuff like DIVs etc inside there and create my login formular ^^' Thanks in advance if anybody got a clue to help me going! And dont hesitate to ask for further details if it can help somehow :P thanks :)
×
×
  • Create New...