Posts by gentlemedia

This should do it https://gist.github.com/shlomohass/22249c0da0f53157dfe9

There are many ways to skin a cat and each and every way is up for a debate, also mine, but you're overcomplicationg things with your logic in the HTML, in the CSS and in your jQuery. Some don't make much or any sense either.

It's best practice to scroll to an ID, because this way users can also navigate to a section without JS through the normal hrefs (href="#1"). You can give the nav items a data attribute, but the sections need to have an ID which you target.

<nav>
    <ul>
        <li><a href="#1" data-index="1" class="bullet">section 1</a></li>
        <li><a href="#2" data-index="2" class="bullet">section 2</a></li>
        <li><a href="#3" data-index="3" class="bullet">section 3</a></li>
        <li><a href="#4" data-index="4" class="bullet">section 4</a></li>
    </ul>
</nav>

<section id="1" class="section section-1">
    <h1>section 1</h1>
</section>
<section id="2" class="section section-2">
    <h1>section 2</h1>
</section>
<section id="3" class="section section-3">
    <h1>section 3</h1>
</section>
<section id="4" class="section section-4">
    <h1>section 4</h1>
</section>

Not sure why you needed a wrapper div, .content, but I'll leave it out here. Why you choose for an ::after pseudo element to give it a background color is also a mysterie to me and do you know what an !important rule does? The properties that have them, have them for no reason.

I'm not going to investigate where your problem might be within your code, because the logic is not making much sense. Adding/removing classes to show/hide the sections through your nav by clicking on the bullets is not what I would do.
There's a window scroll event that you can use to do …

I had a play with this too and I came up with the following. It does what you want, but slightly different. This also keeps on working when JS fails to load or is turned off (due to scrolling to ID which becomes then just jump to anchors).

HTML:

<nav>
    <ul>
        <li><a href="#section-1" data-section="section-1" class="anchor">section 1</a></li>
        <li><a href="#section-2" data-section="section-2" class="anchor">section 2</a></li>
        <li><a href="#section-3" data-section="section-3" class="anchor">section 3</a></li>
        <li><a href="#section-4" data-section="section-4" class="anchor">section 4</a></li>
    </ul>
</nav>

<section id="section-1" class="section section-1">

    <h1>section 1</h1>

</section>
<section id="section-2" class="section section-2">

    <h1>section 2</h1>

</section>
<section id="section-3" class="section section-3">

    <h1>section 3</h1>

</section>
<section id="section-4" class="section section-4">

    <h1>section 4</h1>

</section>

CSS:

body {
    overflow: hidden;
}

nav {
    position: fixed;
    left: 0;
    right: 0;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
    margin: 0;
    padding: 0;
}

nav li {
    height: 100px;
    line-height: 100px;
}

.anchor {
    text-decoration: none;
    color: #111;
    padding: .5rem 1.5rem;
    border-radius: .5rem;
    border: 2px solid #111;
}

.section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.section-1 {
    background-color: #69D2E7;
}

.section-2 {
    background-color: #A7DBD8;
}

.section-3 {
    background-color: #E0E4CC;
}

.section-4 {
    background-color: #F38630;
}

h1 {
    margin: 0;
}

.section.in-view h1::after {
    content: " is now in view";
}

jQuery:

$(function() {

    var $window = $(window);

    $(document).on('click', '.anchor', function (e) {
        e.preventDefault();
        var anchor = $(this).attr('data-section');
        $('html, body').animate({
            scrollTop: $('#'+anchor).offset().top - 0
        }, 500);
    });

    $window.on('scroll load', function () {
        $('.section').each(function () {
            var section = $(this),
                top = section.offset().top;
            if ($window.scrollTop() == top) {
                section.addClass('in-view').siblings().removeClass('in-view');
            }
        });
    }); …

I've used cPanel the most, but this is because it comes with every new hosting package at Namecheap. I had to install it onl;y once myself as cPanel WHM on a VPS for a project.
I don't know Fastpanel, but I see it's free for 18 months and after that you will have to pay for it. It would be handy if they would say on their website how much this will be.

It's a hoax!

Ok, yeah should be document instead of 'body':

$(document).ajaxStop(function () {
    $(document).scrollTop(0);
});

I did a bit of research and saw that your site is based on a premium wordpress theme 'Sleek' from Themeforest
https://themeforest.net/item/sleek-responsive-creative-wordpress-blog-theme/9298728
I checked their demo and saw that it has also the scroll-position issue on small screensizes and the reasom for this is that on wider screensizes they used a custom scrollbar plugin (nanoScroller which is not maintained for years by the way) set on a div (main-content__inside) and on smaller screensizes they disable this plugin and use the native browser scrollbar just on the body.
Since the content gets loaded with AJAX it will not force the page to load at the top of the browser window, but on the scroll position from the previous AJAX content.

IIf you have a support license for that Wordpress theme, you should ask the authors of the theme to fix this issue. If you you don't have a support license, you should file this issue as a bug at them and wait for them to fix it and get the fix when they release a new version of the theme for download.

If you don't wanna wait for that and you have complete control of your wordpress site which means you can add scripts and/or functions to your (child)theme you can do a temporary fix such as:

$(document).ajaxStop(function () {
    $('body').scrollTop(0);
});

I saw your theme loads jQuery, so the above is the jQuery way of setting the scroll position at the top (0) of the …

Ah ok, good for you! If you wanna learn then look at the many cropper plugins out there via the browsers' DevTools to see how they did it. You can also use JS debugger in DevTools to see which functions or lines of JS gets triggered by all the events (click, mouseenter, etc.). In Chrome DevTools it's the 'Sources' tab.

If you look with the developer tools of your browser you can see in that jcrop example how it's made of. The dark area are a bunch of divs added dynamically with JS and it calculates the width and hight distances of the crop area. Anyway there's probably a lot going on behind the scenes to get the desired effect, so my question is why do you want to make this image cropper yourself?

There's no way to do this only with HTML & CSS. You'll need to throw some JS into the mix. There are loads of plugins (jQuery or pure JS) that you can find with a Google search.
Here's for example one made with pure JS. It's a modern one which is therefore also responsive and it has touch support.
https://jcrop.com/examples/

Is that the only thing they gave you? Some example webshops? Don't you know what kind of features and functionalities they want/need on their webshop? You have to ask many questions before you can decide what kind of technologies and/or which kind of platform/CMS you gonna use.

Are you sure that it has to do with jQuery Mobile? I mean it's a through tested framework and I can't imagine the touch event doesn't work on iOS. Also perhaps it's better to ask at the jQuery Mobile forum.
https://forum.jquery.com/jquery-mobile
And onClick not working on IOS is also hard to believe. I think something else is causing your issue.

Desktop Safati doesn't support the date input (yet).

I guess the OP means Google My Business.

I haven't used GSAP before too, because for complex anmiations I resort to http://animejs.com/

But... if I can do simple animations such as your border animation witrh CSS and a few lines of HTML & JS, then that's the first route I'd take. Especially with big projects, you want to keep things as lightweight as possible to have a speedy website.

If you have to create also compex animations with lot's of sequences, then do those with GSAP.

Anyway...

TweenLite.fromTo animates all borders at same time, but it only works for first animation i.e. .animate1

If I click on animate1 button in your jsfiddle, then all the borders don't animate at the same time. If the 1st border animation has finished it starts the 2nd border animation and after that the 3rd and so on.
As far as I can tell this is how it should be with TimelineLite()So I'm not sure why you say they all animate at the same time.

Although I do find it a lot of code for such a simple animation. Are you planning to use GSAP more in this project or is it only for this animation? None the less it's a lot of CSS and HTML (with loads of empty div tags to create faux borders).

I couldn't resist to play with animated borders as well :) but I've used ::before and ::after pseudo elements to create faux borders and CSS transitions for the animations. The only JS used is to trigger the border animation with the button. No libraries involved.

https://codepen.io/gentlemedia/pen/XPePbq

HTML:

<div class="box">
  <h1 class="title">border animation</h1>
</div>

<button>button</button>

CSS:

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 400px;
  height: 200px;
  margin: 100px auto 40px;
  border: 1px solid #eee;
}

.box::before,
.box::after,
.title::before,
.title::after {
  content: " ";
  position: absolute;
  background-color: #666;
  transition: .5s;
}

.box::before,
.box::after {
  width: 0;
  height: 1px;
}

.box.borders::before,
.box.borders::after {
  width: 100%;
}

.title::before,
.title::after {
  height: 0;
  width: 1px;
}

.box.borders .title::before,
.box.borders .title::after {
  height: 100%;
}

.box::before,
.title::before {
  top: 0;
  left: 0;
}

.box::after,
.title::after {
  bottom: 0;
  right: 0;
}

JS:

var box = document.querySelector('.box');
var button = document.querySelector('button');

button.onclick = function() {
  box.classList.toggle('borders');
}

Ah ok... apologies for assuming that!

The author of that jsfiddle (which is not you obviously) used GSAP and then in particular the TimeLineLite plugin, so if you want to make your own adjustments to the sequence of the border animation, you have to learn first how the TimeLineLite plugin works in regards to its sequence method.

https://greensock.com/docs/TimelineLite

Sorry to say this, but user agent sniffing was/is never a good strategy. Just make your site mobile friendly, so you don't have to alter/update multiple code bases and your URLs work everywhere!

Greensock si for animations and has nothing to do with audio. For the rest what rproffitt said.

In order to show/hide the content with a CSS transition you should use max-height instead of height and set overflow to hidden.

See n example here: https://codepen.io/gentlemedia/pen/QBYOWd

Do websites need to look exactly the same in every browser?

Having said that I advise you again to use normalize.css, because that's the way to go nowadays. If you write your own base styles in your CSS, you will overwrite lots of browser default CSS anyway.
And for the responsive fluid typugraphy I gave you already the trick to do so, but you will have to study a bit yourself about this technique and decide for yourself what suits best for the fonts and the type of layout you use in your project.

Don't just copy/patse stuff from several CSS resets into your own unless you know what these CSS decleration do. Like now you're also repeating a lot of porperties.

I'd recommend to just stick with normalize.css and for typography it doesn't make sense anymore to reset your headings since RWD became the norm. Better look into responsive fluid typography which give you something like so:

:root {
    font-size: calc(.75rem + 1vw);
}

There are several ways of doing this but via google you find lots of articles written about this technique.

Did you checkout this pushState and AJAX tutorial"
https://css-tricks.com/using-the-html5-history-api/

No, I was refering to just a PDF instead of a flipbook. Anyway... it looks nice a flipbook (if well designed) on a desk/laptop and tablet, but is useless on a phone and the majority of email opens these days are mobile.

either embed it in my website and/or send it via mail

If you have a webshop with your products then there's no need to put it on your website too.
A flipbook in an email is too advanced for the email applications and software. If you want to do email marketing then you have to code your HTML (email) like it's 1999 and if you don't have experience with that, then there are always services like https://mailchimp.com/ or https://www.campaignmonitor.com/ which have ready made templates for free.

Sending a PDF brochure as attachement is not recommended for email marketing. Filesize of the email gets way too big, your prospects has to save the PDF first before they can open and read it. And reading a PDF on a smartphone is a terrible user experience, because they have to pinch/zoom in order to do so.

You can also buy email templates/themes on Themeforest, or the likes, which have there own email bulders integrated.
https://themeforest.net/category/marketing/email-templates?tags=campaign%20monitor,mailchimp#content

Creating faux borders with empty div tags is rubbush, so don't do that :)
And the position: absolute on them take them out of the normal document flow, which means they don't have effect on other elements on the page and that's why if your paragraph grows, it goes over it and don't push the bottom border down.

The border property don't overlap each other in the corners as you've noticed, so that's also not going to work.

But... what you want can be done with the border-image and border-image-slice properties.

The image I've created and use is this: https://projects.gentle.media/_img/border-image.svg

The CSS is:

/* These first 2 block are not needed for this to work,
 * but it will make your dev-life so much easier when 
 * creating responsive layouts.
 * More info here: https://css-tricks.com/box-sizing/
 */

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

/* ---------------------------------------- */

html {
  height: 100%;
}

body {
  min-height: 100%;
  padding: 20px;
  border: 20px solid transparent;
  border-image: url('https://projects.gentle.media/_img/border-image.svg') round;
  border-image-slice: 33.33333333%;
}

See demo: https://codepen.io/gentlemedia/pen/XZGrPL

I only had a look and see in project1 that you load first your own stylesheet and then the bootstrap stylesheet. Switch them!

Hard to tell withou seeing any code, but here's some info:

A select element is an inline element which means it has by default the CSS decleration display: inline in the browsers' computed stylesheet.
Top/bottom margin and padding don't have effect on inline elements. Only left/right margin and padding. Do you want top/bottom margin and padding on the select element, then you will have to change the display to inline-block or block in your CSS (depending on your situation)

select { display: inline-block )

/* or */

select { display: block }

An input tag is also by default an inline element, but you say the top margin has effect on them, so you probably have somewhere in your (Bootstrap ???) CSS already input { display: block }

Furthermnore don't use position: absolute to lay out your form elements/tags or for any other layout. It''s doable, but it has many disadvantages. Use it only for small things if you have to.

align-text is not a CSS property unless you mean text-alignand the vertical-align property has only effect on the table tags thead, tbody, , th and td or elements with a CSS property of display: table-cell or display: inline-block.

Personally I use flexbox for layout, because I knid of have/want to support IE10+

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

Most of them are based on Isotope.
https://isotope.metafizzy.co/

Is the page online somewhere? A link or posting the HTML and related CSS would be more useful then a screenshot.

BTW i must ask, is it easier to do this without bootstrap

Well, for me it's easier to do without Bootstrap :) and CSS is really not that hard unless you have to support old IE.

Glad it's sorted now!

It's because of this rule:

@media (min-width: 768px) {

    .col-sm-8 {
        width: 66.66666667%;
    }

}

But you can override this with the following updated CSS:

.video {
    position: relative;
    padding: 0 10%;
}

.video .glyphicon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2em;
}

.video .glyphicon-menu-left { left: 20px }
.video .glyphicon-menu-right { right: 20px }

@media (min-width: 768px) {

    .video {
        width: 100%;
        padding: 0;
    }

    .video .glyphicon-menu-left { left: -36px }
    .video .glyphicon-menu-right { right: -36px }

}

@media (min-width: 992px) {

    .video { width: 66.66666667% }

}

Do you use also Bootstrap V4?

It's easier for me to debug if I see a demo in Jsfiddle or codepen, so I made one myself.

https://codepen.io/gentlemedia/full/ZyoXdN/

On small screens the arrows were behind the video again, so the left and right properties gets another value on smaller screens in this case I have them both at 20px

Here's the nw CSS:

.video {
    position: relative;
    padding: 0 10%;
}

.video .glyphicon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2em;
}

.video .glyphicon-menu-left { left: 20px }
.video .glyphicon-menu-right { right: 20px }

@media (min-width: 768px) {

    .video { padding: 0 }

    .video .glyphicon-menu-left { left: -36px }
    .video .glyphicon-menu-right { right: -36px }

}

Oh and by the way... don't wrap your span tags in h1 tags to make the arrows bigger in size. If you want them bigger just add a font-size in your CSS, like I did to .video .glyphicon
.

You should not remove thiose classes.
Anyway... let's try something else by not messing with the width of that .video div, but just add a padding.

.video {
    position: relative;
    padding: 0 10%;
}

@media (min-width: 768px) {
    .video {
        padding: 0;
    }
}

It's probably because the classes .col-sm-8 or .col-md-offset-2 have set a width in bootstrap.min.css which we override with the width: auto on .video.

You will have to figure out the value of that width in the 768px MQ in bootstrap.min.css. Use the dev tools (inspect element) in your browser to see what that width should be and use that same value in your 768px MQ for the width of .video aswell.

I assume that the MQ's are the default ones from Bootsrap - http://getbootstrap.com/css/#grid-media-queries - thus you could do something like this.

First add some styles to the .video CSS and we add a CSS block for this .video in a 768px MQ.

.video {
    position: relative;
    width: 90%;
    margin: 0 auto;
}

@media (min-width: 768px) {

    .video {
        width: auto;
        margin: auto;
    }

}

You might wanna adjust the 90%. Just see what fits best or you could also use calc()to get more precise

width: calc(100% - 80px)

Yeah, the minus values is also a commom thing to do with a UI like this, but I didn't know that that div tag where we added the video class to, was more or less a wrapper for the embed-responsive div tag and that it spanned the same width.

Are the arrows not visibile anymore at a certain MQ breakpoint?

This is a way you could do it.

Give the following tag a class for example video
<div class="col-lg-8 col-md-offset-2 text-center video">

Add this to your custom CSS, but adjust the left and right values untill your satisfied with the positioning and instead of px you're also probably better of using % if the layout is responsive.

.video { position: relative }

.video .glyphicon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.video .glyphicon-menu-left { left: 20px }
.video .glyphicon-menu-right { right: 20px }

So i am guessing i have to change the Delta to HTML to upload the formatted -by the user- text?

In early versions of Quilljs there used to be a getHtml() method, but they dropped that method in favor of delta objects to abstract away from providing HTML.

To get the HTML structure you could do something like this in vanilla JS.

Quill.prototype.getHtml = function() {
    return this.container.querySelector('.ql-editor').innerHTML;
};

But I took that snippet from this discussion :)
https://github.com/quilljs/quill/issues/903

More discussion about this matter here
https://github.com/quilljs/quill/issues/993

And there's a npm Quill Delta to HTML Converter
https://github.com/nozer/quill-delta-to-html

the quills script should had a function (php or other server side) to do the uploading?

Quiljs is just an edior. How you want to upload and save the data that's up to you.

I mean does -as it should , change the font or bold or color of text after uploading a text

To store also all the formatting you should use the getContents()API method.

getContents: Retrieves contents of the editor, with formatting data, represented by a Delta object.

https://quilljs.com/docs/api/#getcontents
https://quilljs.com/docs/delta/

And there's even an example with form submit to save the data. Notice the hidden input[name=about] where the data goes in.
http://quilljs.com/playground/#form-submit

Do you even read the quilljs guides & docs?

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

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/ ?

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");
}