jwbjnwolf

I never actually even heard about W3, even though it is obvious what it means when it comes to the web, literally 3 w's so world wide web. Never knew that about W3schools just cashing in on that to give lacking/poor/outdated information etc, just was another informational site to me but yea MDN, definitely will divert to there and avoid W3schools in future as not that everything is bad, but just not the most up to date way of stuff that they still treat as if was up to date and well the more time goes by, and the internet evolves, not the greatest.

Thanks to Sitepoint I found one that absolutely is very very simple on reusing for different things on a page. I'm sure it could be improved on but it definitely gets the job done so much better than the previous script I was trying to use from W3. Here I have three things I'm using this for. Changing the background, changing the text, and changing the logo as basically the game server it's for is kind of a shared community so adds a nice touch having the logos changing every 30 seconds. Whereas the W3 script was alternating between display none and block on the elements themselves, this script just changes which element has the showing class on. And the showing class simply deals with setting whatever element has it to display block. A lot nicer, so less repeated HTML. See how things are here: let bg_slides = document.getElementsByClassName('bg-slide'); let text_slides = document.getElementsByClassName('text-slide'); let logo_slides = document.getElementsByClassName('logo'); let bg_currentSlide = 0; let text_currentSlide = 0; let logo_currentSlide = 0; let bg_slideInterval = setInterval(bg_nextSlide,6800); let text_slideInterval = setInterval(text_nextSlide,4000); let logo_slideInterval = setInterval(logo_nextSlide,30000); function bg_nextSlide(){ bg_slides[bg_currentSlide].className = 'bg-slide'; bg_currentSlide = (bg_currentSlide+1)%bg_slides.length; bg_slides[bg_currentSlide].className = 'bg-slide showing'; } function text_nextSlide(){ text_slides[text_currentSlide].className = 'text-slide'; text_currentSlide = (text_currentSlide+1)%text_slides.length; text_slides[text_currentSlide].className = 'text-slide showing'; } function logo_nextSlide(){ logo_slides[logo_currentSlide].className = 'logo'; logo_currentSlide = (logo_currentSlide+1)%logo_slides.length; logo_slides[logo_currentSlide].className = 'logo showing'; } I did spend far too much time also playing about coming up with a script that instead of it alternating between a set of divs with the same class, it just changes the background image / element text on the one div. But for background images that really didn't have the desired behaviour as instead of all images loading as you're going through the slideshow, only the one image loads and then if your internet is too slow it stops loading and the next starts loading when it's shown. Whereas this way of doing things changing which div has the showing class, even on a 1mbit connection by time you've gotten to the third picture everything is completely loaded. Not that anyone is going to be using a 1mbit connection to come onto the game server when there's far bigger things that need to be downloaded, but the less bandwidth the loadscreen needs to load, the less it impacts people with say maybe about 10mbit connecting to the server. As well that the less that needs to be loaded by people like you who aren't seeing the work because you're interested in the game server but from a web design stand point, same with many friends why they'd be seeing it, the better lol

Yea looking at that makes a lot of sense, removing the slideIndex from the text one which comes after is the correct way I can see then so there's just the one. And that solves the conflict completely so even though var was working with the change of the carousel names, let wouldn't because of that slideIndex being doubled over.

Ok so from what I discovered, you can name it anything it doesn't have to be specifically carousel(), it can be say bgcarousel, textcarousel. Didn't think that was valid for JS but well that works! But it doesn't work with let, only with var, so kind of still a conflict kind of? Well either way it works with var so if it works it works.

So ok I originally used var which I've kept it as for you to see on the site what's happening, but I just learnt about let and I learnt what one of the differences is, because this is a conflict, only the top one loads at all so the top one doesn't get messed up too. So I'd say that's a good thing rather than maybe missing a conflict.

Hi, I'm creating a loading screen for a roleplay gaming server which can be seen here (Hit the space bar to mute/unmute the background music). As you can see from there I have two carousel elements. The cover background image slideshow, and the different texts below the emblem. They're conflicting with each other though causing the backgrounds to not all show and the text keep changing at different intervals rather than the set 3.5 seconds. It's the same code for both besides the background div class is .bg-slides and the text div class is .text-slides and the different timeouts. There is a number of different things online regarding carousel's and this issue, but I'm pretty lost understanding how I can change this to not conflict. Well I can see how it must be but how I can change it and keep it valid JS, I'm not aware of that lol. Open to suggestions if people have a better way of doing what I'm using this to try to achieve. <script> let slideIndex = 0; carousel(); function carousel() { let i; let x = document.getElementsByClassName("bg-slides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } slideIndex++; if (slideIndex > x.length) {slideIndex = 1} x[slideIndex-1].style.display = "block"; setTimeout(carousel, 6500); } </script> <script> let slideIndex = 0; carousel(); function carousel() { let i; let x = document.getElementsByClassName("text-slides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } slideIndex++; if (slideIndex > x.length) {slideIndex = 1} x[slideIndex-1].style.display = "block"; setTimeout(carousel, 3500); } </script> The code is from W3 Schools just remembered. They speak about doing a multiple slideshow but auto slideshow not sure about.

My actual urls for my blog posts are more like "website.tld/blog/section/posts/example" with the posts being pretty long themselves at times (My latest two are each 5 words long). So whilst many social sites etc do typically shorten urls, others don't. Also as I always put my posts also on Instagram where there is a limit for the caption, my longer posts, I direct people to my blog to stay reading. Having a short url for that, then you don't need to type so much. Same with Instagram/Facebook/messenger stories which don't allow linking.. at least not unless you have a big following that then would allow you to add swipe up to go to a post/link. And then just typically having a shorter link to post in a message on a chat app etc, it keeps things a bit less intrusive than a longer link, and YouTube descriptions is another one where I hate having long links. I'll have a look at that with bit.ly, didn't realise you could use a service like that with a custom domain. Though if I can use PHP to do this to direct requests to ?=example to the blog post with example as the value in the json, that'll be amazing, keep it integrated more. Though that's not me saying that I won't look at bit.ly at all From what I can see though, if I want to continue having my 100+ customised shortlinks rather than random strings, this is a paid feature of bitly beyond 50. Though I notice that's per month, so not like it's a limit for in total forever.

Hi, the last time I posted here back in around July/Aug, I was working on my flat file, CMS free blog system which I am still very pleased with, especially now that I have taken my same PHP code for my all posts menu and used it to auto generate my RSS/Atom feeds. I now have a 5 character short domain (that's including the extension) to use instead of goo.gl which is no more. For this, I'm simply doing rewrites in htaccess for each short link I want. However this would be insanity for my blog posts. So what I am wondering, if for each blog post, in the post-info.json I have for each I have a string for what I want as a short link for that post like: "shortlink": ["example"] If I glob all my post folders and the json in each in say a post.php in my shorturl folder, can I send a request to "/post?=example" to that post in question that has "example" as the short link in the json? Then I can use htaccess there to redirect requests like /post/example to post?=example to trigger the PHP. Would this be possible? I'm sure I read somewhere that you could do something like this using PHP by having requests be put as page variables like ?=example is. --- Now things like this adding things to each post's json is where I do see that my setup does take time, but for the little amount I do that and the amount I post, at least I can just batch search all my jsons over FTP and actually be done before I would be going through all my posts on Wordpress lol. So I do acknowledge of course where my setup obviously lacks in a regard such as that. But then it doesn't totally for myself because I love doing things over FTP with text files in Linux using an editor 😛

When I first started out with my site, the amount that said I was stupid for not simply using bootstrap etc for my site rather than doing things myself. This is the very thing I did such that, do it all myself to build my knowledge of the coding rather than relying on what id and classes achieve what, which may probably not do so without or with a different framework etc. If I didn't do my site just mainly for my personal self, I would definitely look into frameworks and possibly CMS software too. But for myself personally with my site, I still am not fond of using frameworks and staying away from CMS is something I much prefer. If I was busy adding to my site day in, day out, probably I would, but the aspect of learning how to do things without any frameworks/CMS, to get to know the languages more, that's the main reason I enjoy web design/coding. I'm not familiar with PHP frameworks, so I wasn't aware of such what you've said about rallport. When it comes to PHP, I'm mainly just familiar with creating scripts which mostly are indiviual that I then use and integrate using includes etc. Still though, when it comes to frameworks, I'd prefer to have gone the hard way, and be able to work out easier how I could possibly fix an error, rather than there turns out to be some error in a framework that I can't myself fix, so am stuck until the devs fix that. Maybe it's not something that likely to happen with a "stable" released framework, but at least until I have a bigger understanding and if I start doing web coding for anything other than personal use, I've got basically everything I want code wise on my site. As long as things continue to function well, I'm not fussed in getting my head around getting to know frameworks which from what I've seen do things in a lot of different ways to how I've done stuff for how I want them.

Yes I'm wanting to get the current page folder being viewed to be marked as current or something in the array, and then have links at the bottom of my posts that go to the previous/next folders in the array, just as you a lot of times have with blogs. As got almost all my posts moved over and realised now that I definitely want the next/previous post links lol.

Hi, I've got a PHP array menu of all folders of a directory which is ordered using the "Arraysortdate" value in each page folder's Json file instead of the folder names. I've basically got everything sorted now, just this one last thing that I realise I like to have. A previous/next page button on each page that takes the current page, matches it with the value in the all folders array, and links to the next/previous page in that array which is sorted like previously mentioned using the "Arraysortdate". My json files are structuted as follows: { "Arraysortdate": "2018-07-16-1", "Month": ["July 2018"], "Category": [ "testcat1", "testcat2" ] } Here is the PHP I'm using for grabbing all folders and ordering them using the Arraysortdate value for each: <?php // initial array containing the dirs $dirs = glob('*/posts/*', GLOB_ONLYDIR); // new array with date as key $dirinfo_arr = []; foreach ($dirs as $cdir) { // get post info from file $dirinfo_str = file_get_contents("$cdir/includes/post-info.json"); $dirinfo = json_decode($dirinfo_str, TRUE); // add current directory to the info array $dirinfo['dir'] = $cdir; // add current dir to new array where date is the key $dirinfo_arr[$dirinfo['Arraysortdate']] = $dirinfo; } // sort new array krsort($dirinfo_arr); ?> Using print_r to dump the array contents, this will return for an item with say the json data as above: Array ( [0] => 2018-07-16-1 [1] => Array ( [0] => July 2018 ) [2] => Array ( [0] => testcat1 [1] => testcat ) [3] => blog/posts/test-blog-post ) I use this after sorting the array to output as just the folder path for using in html: <?php // get current dir from new array foreach($dirinfo_arr as $key=>$dir) { $dirpath = $dir['dir']; ?> <!--HTML such as--> <a href="<?=$dirpath?>">text</a> <?php } ?>

Ok thanks! Worked it out that needs to be just before the foreach array slice line. Got the pagination and pager scripts in their own files including in the array script, so keeps the array script files very neat as well as obviously don't need to duplicate the pagingation/pager scripts for other array scripts for other parts of my site etc. Thanks for all the help

Brilliant thanks! Something I worked out yesterday whilst I was waiting for you to get back on that, how to print the categories from the json into the html as links to the categories of the same names. As well as also finding how to use htaccess for changing uppercase to lowercase. Very impressed with all this now. Lastly, how do I can I add this pager in another place as well such as above the folder array at the top of the page so that people can use it without scrolling down?

Brilliant. Played about with css as well as changing the active page from <span> to <a class="active">, and have it looking quite nicely! Though, one thing I notice is previous keeps going back to page 1 regardless of current page. That's the only thing that's now been done incorrectly. Is that because I've changed <span> to <a class="active">? Edit: Just changed the last text to last page number and removed the first, as really knowing the total pages is all that's needed really, and allows me to have two number buttons each side of the active page without it going off onto a second row on mobile, whilst keeping it at a reasonable size.

I think it may be that the script doesn't like "?=" being right after "/" in thr url or something as I also tried with having "{$_SERVER['REQUEST_URI']}" in but that did the same thing. So I've just simply put "index" and now that works as it should. Now to play about with styling the pager for my liking. Though any possibility of adding first/last buttons which show accordingly like the prev/next buttons do?