Posts by gentlemedia

You shoudl read the documentation, because there are specific API methods to get the text or ful html from within the editor.
https://quilljs.com/docs/api/#gettext
https://quilljs.com/docs/api/#getcontents

How about text to speech. Any idea where to find it?

Did you even had a look at that voice-elements link? It does both speech to text and text to speech.

It's not .val(), but .text() if you want to store the text in variable.

You can grab the data with JS (or JQuery) and then you can do whatever you want with it.
https://www.google.com/search?q=get+content+of+contenteditable+for+PHP&gws_rd=cr&ei=GotKWcOpNIKZaevMqtAL

I think this is the best Rich Text Editor script https://codepen.io/mykh/pen/zqdPqr

That's also with Quill and it's the best you can get for free.
You can also just use the core JS & CSS files from Quill which is lighter due to no themes, formatting and non essential modules.

<link href="//cdn.quilljs.com/1.2.6/quill.core.css" rel="stylesheet">
<script src="//cdn.quilljs.com/1.2.6/quill.core.js"></script>

Did you check out https://quilljs.com/ / https://github.com/quilljs/quill/ ?

+1 for the mention of Web Speech API.
Native browser support is still quite wonky,
http://caniuse.com/#feat=speech-recognition

...but there's a Web Component wrapper using Polymer.
http://zenorocha.github.io/voice-elements/

I'm not really into Bootstrap, but looking at the docs and the demo there, the page should not refresh/reload when clicking on the button to launch the modal.
https://v4-alpha.getbootstrap.com/components/modal/#live-demo

Check this old, but stil relevant, article about file paths. That explains it.
https://css-tricks.com/quick-reminder-about-file-paths/

I asume your CSS is in that stylesheet.css, so then your path to that image should be like this.

body {
    background-image: url("../images/p3.jpg");
}

Knowing all the CSS there is, won't make your My Account section nice looking. You need at least an eye for good UI design to make it look nice. Do you have that?
If you dont, you can also search for a nice Bootstrap UI kit and try to implement that.

https://www.google.com/search?q=bootstrap+UI+kit&ie=utf-8&oe=utf-8&gws_rd=cr&ei=id0oWfYfwqxRscuq8AM

I think TPL stands for template file. I had to work in the past on an OpenCart webshop and that whole thing was build with.tpl files, but it was just PHP & HTML inside of these files.

Look! You don't have to edit a file, you'll have to edit via wp-admin. You do have access to wp-admin, right? Example: www.yourdomain.com/wp-admin/

You say it's a Wordpress site, so I asume you can edit that title and link via the WP-admin instead of your code editor. WordPress is after all a content management system.

but that is truly horrible :D

@Diafol - What?!? Don't you like the pick of my colour scheme??? Man, that's the latest trend what's called brutalist web design! :-)

I have no idea why you want this, but do you mean something like this (done with a CSS3 gradient)?
https://codepen.io/gentlemedia/pen/JNwYzr

@rprofitt - Each browser vendor has it's own platform status page, so if you can't find it via caniuse, you can check them out too.

Blink (Chrome & Opera) - https://www.chromestatus.com/features
Firefox - https://platform-status.mozilla.org/
Edge - https://developer.microsoft.com/en-us/microsoft-edge/platform/status/

You can use this tiny library to detect WebRTC features such as getUserMedia so you can serve your fallback solution for those browsers which don't support it.
https://github.com/muaz-khan/DetectRTC

MediaDevices.getUserMedia() which falls under the Media Capture and Streams specification is not supported (yet) in Safari (desktop and mobile), but is in development.
https://webkit.org/status/?#specification-media-capture-and-streams
So you will have to create indeed a fallback solution for Safari.

The article on the last comment is marked as Deprecated though.

Indeed! And that's why I posted that link to that article in that last comment to show that Navigator.getUserMedia() is deprecated and to use MediaDevices.getUserMedia() instead :)

Nobody has issues with posting code (as far as I know). So what are you using (browser/device, OS version, etcetera)? And how are you trying to post code?

This has already been asked by another member
https://www.daniweb.com/programming/web-development/threads/507272/open-mobile-camera-through-web-browser

In order to use oveflow: autoyou have to set an explicit heighton #content. It doesn't do anything if you use max-heightand/or min-height (I'm even not sure what you're trying to achieve with those).
Thus if you set height: calc(100% - 250px) on #content you will get the scrollbar.

I don't know if you're using a child theme, but if you do (and you should) then you should make a copy of header.php and place this copy in your child theme directory. In this header.php file you make your edits or additions such as your img src.
Also place your 'images' folder in your child theme directory too and then you can use the following line to retrieve the image.

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/AJTFixPreisBanner.jpg" />

I agree with Rproffitt and also think you already answerd you're own questions.

Having to do a lot of guess work which part of the code does what and that is not a proper way to learn.

The stuff you ask is quite complex, too detailed and cater a lot of different technologies. You will have to Google like crazy to find a tutorial that explaina exactly what you want and only to find out there's none. Just break down your queries in smaller bits and ask help in those instead of expacting that someone has an answer to the whole shabang.

Seriously, I don't think that you will find an up-to-date tutorial. This is one from 2011 http://tutorialzine.com/2011/05/tweet-to-download-jquery/ and still might work (only for Twitter). Other than that you'll have to get your hands dirty and just start coding the thing bit by bit with the OAuth from the SN's instead of using a ready made service such as the one I showed you.

I get this and it's a marketing technique and is used instead of giving an e-book or any other download totally for free, users/visitors have to share/tweet the free product before they can download it
There are several services which offer this already such as https://www.paywithapost.de/ which covers not only Twitter, but also the other well known social networks. It has an API and you can verify users https://www.paywithapost.de/learn_more.

Try it with another URL, because as far as I know you can't load google.com in an iframe due to a response header X-Frame-Options: SAMEORIGIN that Google sends to avoid clickjacking.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

Isn't this some kind of school assignment?
Anyway. Ofcourse it's hard to compare by looking at your HTML & CSS and the image attached, so I've pasted the HTML & CSS in a pen (which you also could have done) to see what it looked like. But... that's quite a mess :) Is this how it looks like on your end as well?
https://codepen.io/gentlemedia/pen/WjopvB

Other then that I don't see any proper form tag, fieldset and label elements. It's an overuse of divs and the only form element... the input tag.
As you see these high value paddings and margins is not gonna give you the layout you want.
To get that layout you have to create a grid by using floats (if you need to support older browsers such as < IE9 as well), or you can look into using flexbox for modern browsers.

https://css-tricks.com/all-about-floats/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Perhaps a free proxy website might be just enough to watch that video tut.
https://hide.me/id/proxy

Here's a jQuery version
http://codepen.io/gentlemedia/pen/bqQxJP

Here's a CSS with the checkbox hack version:
http://codepen.io/gentlemedia/pen/NpEOgx

How do you want to show that 'foreground' which I assume you mean an overlay. On page load, on click or any other event?

But the letter

I meant 'the latter' :)

Leading can be set with the line-height property and for kerning and tracking you have letter-spacing. But the letter you can't use on individual letters. For that you have to use some javascript such as lettering.js that wraps each letter (of your headings and sub headings of course) in a span tag. It can also be used in combination with kern.js

Ok... sorted. I just had a typo error :)

Thanks Diafol.

I tried that and it didn't do anything and I didn't got any errors in my console related to this.
Thus I thought I would make a little Codepen demo to show you this and to my surprise in the pen it does work, so I have a conflict with something else in my code.

http://codepen.io/gentlemedia/pen/dvYvpg

Is there a reason for prefixing $ signs on your js variables

Yeah not sure :) but a while ago I read somewhere that it is good practise to do it like that to distinguise jQuery objects from JS or something like that. And also that with prefixing a $ you can't pick (accidently) a reserved JS name... anyway not sure either if it is best practise or not :)

For now I have to find our where my conflict is.

I have an issue with what seemed a simple task, but I'm having a brain farth, so it's not :)

I count child elements with lengthand add +1 on top of that length. This works fine and I store that in a var $trackCount

$trackCount = $carousel.find('.owl-item').length +1;

Now I want to get that variable in a .css() method which I normally have no issues with if it only needs to be a property value, but now I need to extend a property value with my var.

So I have to get the following where the number (in this example, 8) needs to be my $trackCount var.

$carousel.find('.owl-wrapper').css('counter-reset','tracks 8' );

I tried several things with wrapping $trackCount in + signs and single ' and double " quotes or a combination of them, but with no luck so far.

@diafol - he will get then 2 scrollbars.

OP - I asume you want a header at the top and a footer at the bottom and the space inbetween is for the content which gets a scrollbar when it overflows.
The reason why your footer is invisble (off-screen) is because you set a heaight on the container of 100vh which pushes the footer down off-screen (or below the fold) and because you have overflow hidden on the html and body it's invisble.

An easy fix for this would be to set a height with calc on that container:
height: calc(100vh - 200px );
That 200px is the height of the header and the footer together.
Little demo 1: http://codepen.io/gentlemedia/pen/EWYvVz

There's also a way to do this without calc so that you have better browser support (old IE), but it uses fixed positioned header and footer which might give you issues on older touch screen devices. Fixed positioned elements gave disastrous scrolling behaviors on them :)
Little demo 2: http://codepen.io/gentlemedia/pen/evORoL

I meant jQueryUI and ok... dying is a big word, but since the rise of Bootstrap and the likes that also come with JavaScript widgets, I believe the popularity of it is quite low compared to how it was. And there're so many other alternatives as well.

I also thiink jQueryUI is dying slowly. If you want to rely on third party integrations then better go to a payed alternative such as KendoUI or even the free Dojo UI library. It looks like the latter has still an active userbase, update cycle and support.

It's because there's also an index.html in that 'bestshop' directory and that's the one that gets loaded when accessing www.advance-web-studio.com/bestshop/
http://www.advance-web-studio.com/bestshop/index.html
As far as I know loads Apache by default an index.html before an index.php unless you tell otherwise (a diffrent order) in a .htaccess file.

If you want to load the index.php you can also remove the index.html or rename it to something else if you want to keep it,

@rproffitt
No I don't use Spyhunter (I'm on a mac).
I use uBlock Origin. It's not really a WOT replacement and it's also not an ad blocker... well... one on steroids maybe :) but it does not support Adblock Plus' "Acceptable Ads Manifesto" which is a good thing.
It blocks also trackers and heaps of malware sites automatically, but you can also setup filters yourself manually.

@rproffitt
Be careful with the Web of Trust extension. I used it as well for a long time untill they've been caught selling their users' data to third parties.
https://www.onlinethreatalerts.com/article/2016/11/10/web-of-trust-wot-caught-selling-their-users-data-they-collected-via-their-web-browser-extension-to-third-parties/

http://www.ghacks.net/2016/11/05/mozilla-and-google-remove-wot-extension/

@jeff_8
Thanks! The var $workshops = get_field('workshops'); needed to go inside while loop.
That's why I also probably couldn't retieve the $image Object that I had as an issue in a previous thred of mine. I had that var outside the while loop too.

@diafo;
It's working so I assume it's valid :)

I'm trying to retrieve the values of checkboxes in a custom post type.
My complete function:

        function getTeam() {

            global $post;
            $team = new WP_Query();
            $team->query('post_type=coaches');
            $workshops = get_field('workshops');

            if ($team->found_posts > 0) {
                echo '<ul>';
                    while ($team->have_posts()) {
                        $team->the_post();
                        $listTeam = '<li>';
                        $listTeam .= '<a href="#" class="js-modal">';
                        $listTeam .= '<figure class="profile-img">';
                        $listTeam .= '<img src="' . get_field('profile-image') . '" alt="">';
                        $listTeam .= '<figcaption><span>Bekijk profiel</span></figcaption>';
                        $listTeam .= '</figure>';
                        $listTeam .= '</a>';
                        $listTeam .= '<article class="profile-bio">';
                        $listTeam .= '<div class="details">';
                        $listTeam .= '<h3>' . get_field('name') . '</h3>';
                        $listTeam .= '<h4>Workshop(s)</h4>';
                        $listTeam .= '<ul class="workshops">';
                        if ($workshops) {
                            foreach($workshops as $workshop) {
                                $listTeam .= '<li>' . $workshop . '</li>';
                            }
                        }
                        $listTeam .= '</ul>';
                        $listTeam .= '</div>';
                        $listTeam .= '<p>' . get_field('biography') . '</p>';
                        $listTeam .= '</article>';
                        $listTeam .= '</li>';
                        echo $listTeam;
                    }
                echo '</ul>';
                wp_reset_postdata();
            } else {
                echo '<p>No team members found</p>';
            }

            var_dump($workshops, $workshop);

        }

I created the foreach loop with the help of the ACF checkbox documentation and as far as I know there are no errors in that.
But I get for $workshops bool(false) and for $workshop NULL returned.
How can I troubleshoot this the best to see where this goes wrong?
I tried http://php.net/manual/en/language.types.boolean.php but that doesn't say anything (yet) to me :)

When returning as an image URL I had to use get_field()as well. Not sure why, but the_field()returned the path to the image just as text.

I know that I might need in the future more data such as that from the alt attribute or the sizes when I need those for cropping. I tried several ways (from the examples in the ACF documentation) to return as an image Object, but for some reason I coudn't get that right. For everything what I did var_dump returned bool(false)

Or embed as an object into your pages with an iframe and a download link as fallbacks.

<object data="/pdf/your-pdf.pdf" type="application/pdf" width="100%" height="100%">
<iframe src="/pdf/your-pdf.pdf" width="100%" height="100%" style="border: none;">
This browser does not support PDFs. Please download the PDF to view it: <a href="/pdf/your-pdf.pdf">Download PDF</a>
</iframe>
</object>

There is also JavaScript PDFObject library with loads of options.
https://pdfobject.com/

Thanks, it works out correctly now.

Good! And now mark as solved, please!

Ah... I had to change a setting in the ACF plugin,. Instead of returning the value as an Object (the default setting), I had to return it as an URL.

All good now :)

Thanks, Diafol!
But unfortunately that didn't work either. var_dump returned this bool(false)

I found a whole section in the documentation about retrieving an image with ACF and will see if I can find a solution in there.
https://www.advancedcustomfields.com/resources/image/

will keep you posted :)