Posts by gentlemedia

<button onclick="toggleHidden('navbar-subnav-menu')">button</button>

<script>
    function toggleHidden(id) {
      var attr = document.getElementById(id).attributes;

      if (attr['aria-hidden'].value == "true") {
        document.getElementById(id).setAttribute("aria-hidden", "false");
      } else {
        document.getElementById(id).setAttribute("aria-hidden", "true");
      }
    }
</script>

That function is trying to connect to Google Plus API to get the plus count of your pages, but Google Plus is dead (https://plus.google.com/about), and therefor 404 http error (page not found, so nothing to count)
Perhaps you can fix it with a plugin update if the author of the plugin made one recently, but if he abondend the plugin, then indeed better to install a more recent Social Media plugin.

I was still DJ-ing with vinyl for a long time, but since 2 years I use the DJ software Traktor Pro on my MacBook. I make mixtapes with it too which I feature on my pet project site, Lively Audio. On my site I use the SoundCloud API to pull in my mixes from SoundCloud in a custom SoundCloud player. So, I'm also a lot on SoundCloud to check out new underground/indie music... phew... that's a lot of SoundCloud name dropping :)

You say "in a specified height of div", but you havent specified a height on that div, so what's the problem?

Also what you have here on HTML & CSS, it doesn't crop the image.
https://codepen.io/gentlemedia/pen/xxxZzrq

Rprofitt is right. Web 2.0 has nothing to do with SEO. Read the Wikipedia article!

Web 2.0 (also known as Participative (or Participatory)[1] and Social Web[2]) refers to websites that emphasize user-generated content, ease of use, participatory culture and interoperability (i.e., compatible with other products, systems, and devices) for end users.

If you put a click handler on the body, than everything inside the body, like your content div, will also trigger that click and that's not what you want. I know you said you don't want a modal, but you can use the same technique most modals use for this to close the modal and that is by adding an overlay div dynamically with JS, or jQuery in your case, which you positions behind your content div and then put the click handler on the overlay.

HTML:

<div class="content">
  content
</div>

CSS:

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.content {
  position: relative;
  z-index: 1;
}

jQuery:

var overlay = $('<div>', {'class':'overlay'}).appendTo('body');

$('.overlay').on('click', function () {
  window.location.href = "https://www.google.com";
});

Here's the above in a Codepen (with some extra CSS just for demo purposes), but I used an alert, because redirecting to Google or any other website is not possible in a Codepen.
https://codepen.io/gentlemedia/full/pmYXde

Your content is wrapped in a div with the class container and the logo and navigation is within a div with the class nav-bar.

The widest media query for the container is:

@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

To get the nav-bar aligned with the container is to add to the CSS block of nav-bar the following 2 declarations.

.nav-bar {
    max-width: 1170px;
    margin: 0 auto;
}

Not so long ago there were in the web dev forum two smilar threads asking about buying a mobirise theme (a church theme) and posting the link to it, but couldn't because of the same BS reason as Mara_2. Those two threads were deleted by a mod. It was obviously spam, because the two threads were started pretty much simultaniously by two different 'members'.

Mobirise {or their cheap SEO hire) is just all for spamming here on Daniweb.

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 …

PHP is not my thing. but if you want help from someone else with this then be clear. Your error is on line 277, but your code dump here goes only till line 270, so on which line is your error here?

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 …

@PranayPravin - Start a new thread with your issue (include code and error messages) instead of bumping up an 8 year old thread

I had to make custom social share buttons for a client as well and opened the shared dialogs in a new window, but small in size like a modal and centered on the screen.

HTML:

<ul class="share">
    <li>
        <a href="//www.facebook.com/sharer/sharer.php?u=<?php echo curPageURL();?>">Facebook</a>
    </li>
    <li>
        <a href="//plus.google.com/share?url=<?php echo curPageURL();?>">Google</a>
    </li>
    <li>
        <a href="//twitter.com/intent/tweet?url=<?php echo curPageURL();?>">Twitter</a>
    </li>
</ul>

PHP function to get the current page URL:

function curPageURL() {
    $pageURL = 'http';
    if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
    $pageURL .= "://";
    if ($_SERVER["SERVER_PORT"] != "80") {
        $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
    } else {
        $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
    }
    return $pageURL;
}

JS/jQuery:

$('.share').on('click', 'a', function (e) {

    e.preventDefault();

    var url = this.href,
        title = document.title,
        userAgent = navigator.userAgent,
        mobile = function() {
            return /\b(iPhone|iP[ao]d)/.test(userAgent) ||
            /\b(iP[ao]d)/.test(userAgent) ||
            /Android/i.test(userAgent) ||
            /Mobile/i.test(userAgent);
        },
        screenX = typeof window.screenX != 'undefined' ? window.screenX : window.screenLeft,
        screenY = typeof window.screenY != 'undefined' ? window.screenY : window.screenTop,
        outerWidth = typeof window.outerWidth != 'undefined' ? window.outerWidth : document.documentElement.clientWidth,
        outerHeight = typeof window.outerHeight != 'undefined' ? window.outerHeight : document.documentElement.clientHeight - 22,
        w = 480,
        h = 400,
        targetWidth = mobile() ? null : w,
        targetHeight = mobile() ? null : h,
        V = screenX < 0 ? window.screen.width + screenX : screenX,
        left = parseInt(V + (outerWidth - targetWidth) / 2, 10),
        right = parseInt(screenY + (outerHeight - targetHeight) / 2.5, 10),
        attributes = [];
    if (targetWidth !== null) {
        attributes.push('width=' + targetWidth);
    }
    if (targetHeight !== null) {
        attributes.push('height=' + targetHeight);
    }
    attributes.push(
        'width=' + w,
        'height=' + h,
        'left=' …

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?

Better to ask Mobirise related questions on their own forum http://forums.mobirise.com/. You'lll get probably more and/or better repleis then here.

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/

No, there's no such thing and think about it... a WordPress theme is for the WordPress CMS.
There is a Mobirise to WordPress plugin tho'
https://www.youtube.com/watch?v=8I6_8eRTiYI

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.

Off topic, but why not reply first on the previous threads of yours where you got several answers, before you start a new thread?

There's no need to use absolute positioning for this. In fact it's better to never use absolute positioning to layout webpages. You will run in all sorts of problems.

Having said that. We have now in 2018 much better mechanisms to layout webpages such as CSS Flexbox and CSS Grid, but since you haven't worked with CSS for a long time, I've used in my example a float as well. Also I don't know what kind of content is going inside that inner div, but anyways here's one way to do this.

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

There's also a W3C standard <detrails> element for this, but no IE and even Edge support yet.... dealbreaker!
https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/

Just a litle update. The CSS for .col:last-child in the media query could be simplified to this:

.col:last-child {
    align-self: flex-end;
}

Like I said it's not recommended to use position: absolute and its top and left properties set to percentages to layout elements such as your divs with the input elements. You get into trouble as you've noticed with the overlapping. Anyway don't use position absolute at all for these kind of things

As of in my example wher I've used flexbox to layout the divs, I would stack the divs on smaller screens on top of eachother by setting a flex-direction: column on the form element. And when the screen get's wide enough to layout the divs next to eachother I use a media query (on 500px in this case) to change and set a flex-direction: row on the form element.

So full CSS code would be then:

form {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

label, input {
    display: block;
}

.col:not(:last-child) {
    margin-bottom: 10px;
}

@media screen and (min-width: 500px) {

    form {
        flex-direction: row;
    }

    .col:last-child {
        display: flex;
        align-items: flex-end;
    }

    .col:not(:last-child) {
        margin: 0 5px 0;
    }

}

I've updated the pen, so just resize the browser window to small to see the result.
https://codepen.io/gentlemedia/full/oQJbyd/

Don't use position: absolute to layout your grid or items. The reason they overlap is because absolute postioned elemets are taken out of the normal document flow, which means they don't effect eachother anymore (CSS box model).
There are better methods to layout those divs next to eachoter either with floats, flexbox or grid. It all depends how far back you want/need to support older browsers and/or devices.

For this example I've used flexbox:
https://codepen.io/gentlemedia/pen/oQJbyd

Thus... don't use inline styles... it's messy, you keep repeating yourself and it's hard to maintain. Use an external stylsheet and you have inputs, so use proper label elements and it all should be inside a form element otherwise nothing can be send.

I've since decided to learn html first just to try and get a good basis of getting my head around coding.

If you want to develop for the web, then starting with learning HTML and CSS are indeed the first steps IMO.

Ok, but that's not a problem that Blockchain should solve, that's a (huge) UX problem from that eSlate. :)

EDIT: also I think that paper (physical) ballets and polling stations that are collecting and counting is not the way forward. Eventually (probably not in the near future) there willl be a solid voting system that has been build upon Blockchain technology.

I really think he means with "When I open the index page in a website editing program, I don't see the page as it's shown on the browser though" that he expect to see the exact same as what he sees in the browser instead of all the code he sees now. You know like a WYSIWYG editor such as Dreamweaver (you can edit a page in what's called Design View) and even FrontPage was like this in the old days.. But I can be wrong :)

EDIT: Oh and his site is made with the eCommerce CMS, OpenCart.

@rproffitt - That tutorial is ancient with old tricks or deprecated HTML that has no place anymore in the modern web :)

@OP - he should use that image as a CSS background image on that section/

https://css-tricks.com/almanac/properties/b/background-image/

What's a good program to use to edit it though?

Look... you should've asked the person who made the website for you, before he started the job, hoiw you can easily edit the website. But you didn't and now you're stuck with a static website that can only be edited by someone that knows how to do that through a code/text editor like your Firstpage editor.

I've necer heard of Firstpage, but perhaps you meant FrontPage (ancient WYSISWYG editor... not even know it still excist)? Anyway usually there should be a CMS (Content Management System) behind it for easy editing, but if that's not the case then a code editor is your only option.

Search for browser and device detection plugin if you really have to.

Add the current date (today) dynamically.

with PHP:

<input id="datePicker" type="date" value="<?php echo date('Y-m-d'); ?>" />

or with JS:

let today = new Date().toISOString().substr(0, 10);
document.querySelector("#datePicker").value = today;

EDIT: off-topic, but where is your doctype declaration? And those meta tags on the first 2 lines should be between the <head> tag.

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

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

Blog commenting with irrelevant spammy backlinks will hurt your SEO, so if you still want to get something out of this old school backlink strategy, you better want to do this right. So you have to put really some effort into this which means placing comments that add value to the article or blog post which should be related to the core bsusiness of the website you (back)link to.

https://blog.monitorbacklinks.com/seo/blog-commenting-seo/

EDIT: Oh and dofollow or nofollow... it doesn;t matter. Google doesn;t do anything with links in blog comments other then penalizing if it's a backlionk to an irrelebvant resource/website.

You have to be way more clear what you want and your thread title is poor too. Read this - https://www.daniweb.com/programming/threads/435023/read-this-before-posting-a-question - and then try again!

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.

According to your prifile you work for a digital marketing agency, so why not ask your boss?

Article submission sites for SEO are a thing of the past allready for a long time. Google’s Panda algorithm update killed article submission sites from 2011 onwards, so your article link is buried deep in the SERP's for no one to find and your backlinks have zero effect. Nobody visits these sites these days anyway, so no boost in traffic also.

https://searchengineland.com/google-panda-two-years-later-real-impact-149519

Thus.... stop waisting your time on this!

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

I really hope that you do also something against these sig posters, because they're posting meaningless questions/answers and dragging up old threads from the death, just to have some backlinks in their sig.

Great! I'm glad it's sorted! And please mark this thread as solved!

I've just included the formatter in my codepen and it works fine.

There are a couple of things wrong with your implementation.

$(window).on('resize scroll', function() {

    $('.timer').countTo('start') ({

        formatter: function (value, options) {
            return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
        },
        onUpdate: function (value) {
            console.debug(this);
        },
        onComplete: function (value) {
            console.debug(this);
        }

    });

});

You run the timer as soon as you scroll and not when the circles div is in the viewport, because your forgot to wrap it inside if ($('.circles').isInViewport()) { ... )

The second things is that you wrote the .countTo(start) ({..}) wrong. That should have been .countTo({...}).

I was playing myself a bit with it too and I've noticed that the numbers were indeed acting a bit weird even when I had fixed your errors and yes, it was also resetting to 0 when I scrolled a bit more up and/or down while the counter was not finished yet.
I've fixed this by using the onUpdate: callback function to turn the window scroll and resizze events off once the counters had started

Like so:

$(window).on('scroll.count resize.count', function() {

    if ($('.circles').isInViewport()) {

        $('.timer').countTo({
            onUpdate: function () {
                $(window).off('scroll.count resize.count');
            }
        });

    }

});

I gave the window scroll and resize events a name of count, so that I can/should only turn these off and not possible other scroll or resize events that you (might) use for the other animations on the page.

I've also added a -500px offset in the viewport function, see below, so that the counters start a bit earlier while the circles div is noi fully yet at …

There are indeed many plugins for this, but if it's just for this one animation then you can/should do it without a plugin. I see you use a jquery plugin for the counters and trigger them on page load, but you have to trigger them when the circles div is in the viewport.

So with the code from that 'do it without a plugin' article, you could do something like this:

<script>

    $.fn.isInViewport = function() {
        var elementTop = $(this).offset().top;
        var elementBottom = elementTop + $(this).outerHeight();

        var viewportTop = $(window).scrollTop();
        var viewportBottom = viewportTop + $(window).height();

        return elementBottom > viewportTop && elementTop < viewportBottom;
    };

    $(window).on('resize scroll', function() {

        if ($('.circles).isInViewport()) {

            $('.timer').countTo({
                from: 0,
                to: 5,
                speed: 1000,
                refreshInterval: 20000,
                onComplete: function(value) {
                    console.debug(this);
                }
            });

            $('.timertwo').countTo({
                from: 0,
                to: 11,
                speed: 1000,
                refreshInterval: 20000,
                onComplete: function(value) {
                    console.debug(this);
                }
            });

            $('.timerthree').countTo({
                from: 0,
                to: 7064,
                speed: 1000,
                refreshInterval: 20000,
                onComplete: function(value) {
                    console.debug(this);
                }
            });

        }

    });

</script>

I have another suggestion and that is using the HTML5 History API (pushState and AJAX) for this. This will also work with the browser back button and you don't get all this content in one document unlike your tab implementation.

Here's a little tut and example demo:
https://css-tricks.com/using-the-html5-history-api/