Posts by gentlemedia

Loads of web baed tools for that such as https://beautifier.io/

<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.

Why is his motivation worse than the motivation of anyone signing up and asking a question just for free help?

If someone replies 3 times to the same thread, I don't think he/she is here to 'help'. He/she is just here for their spammy links in their signature.
https://www.daniweb.com/digital-media/digital-marketing/threads/518313/what-is-the-use-of-seo-in-digital-marketing/2

But I'm done on DW anyway... way too many of these crappy posts here.

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.

I don't think JParker will ever come back to his thread, but here's my take on it.

For UI elements such as his sorting arrows and icons, it's common to use an (external) SVG sprites image and display them with <svg> <use> instead of a regular <img> tag.
The SVG sprites can be placed straight in the HTML, but if you want to keep your HTML 'clean' from all this messy SVG syntax, you can make an external SVG sprites image and use the SVG fragment identifier to grab the right SVG symbol out of it.

So let's say you have an up and down arrow and some social media icons, your SVG sprite will look like this:

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="arrow-up" viewBox="0 0 8 8">
        <path d="M17.231 16L24 9.231 22.769 8 16 14.769 9.231 8 8 9.231 14.769 16 8 22.769 9.231 24 16 17.231 22.769 24 24 22.769 17.231 16z"/>
    </symbol>
    <symbol id="arrow-down" viewBox="0 0 8 8">
        <path d="M17.231 16L24 9.231 22.769 8 16 14.769 9.231 8 8 9.231 14.769 16 8 22.769 9.231 24 16 17.231 22.769 24 24 22.769 17.231 16z"/>
    </symbol>
    <symbol id="icon-instagram" viewBox="0 0 32 32">
        <path d="M7.547 0C3.39 0 0 3.39 0 7.547v10.906C0 22.61 3.39 26 7.547 26h10.906C22.61 26 26 22.61 26 18.453V7.547C26 3.39 22.61 0 18.453 0zm0 2h10.906A5.53 5.53 0 0 1 24 7.547v10.906A5.53 5.53 0 0 1 18.453 24H7.547A5.53 5.53 0 0 1 2 18.453V7.547A5.53 5.53 0 0 1 7.547 2zM20.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 …

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

To be honest I hardly look at the releated topics, but they're not there for me I suppose :)
Looking at them now, I see thread titles that are not related at all to the topic of this very thread, but this is perhaps because there's no related topic and the algorithm just show some random threads.
I also see threads in there from many, many and many years ago... pretty much dead threads, so this could be the reason that peaople are still replying to them, while the OP has moved on already a looooooong time ago.

It's pretty simple I guess. What you post on FB is not interesting enough to engage clicks and if visitors bounce off your website pretty quick, then there's something seriously wrong with the landing page.

You post for quite some time about your meme site, but never include a link. Can you post a link, so I/we can see what might be causing a high bounce rate? Also what's your FB page?

EDIT:

because I am mainly focusing on desktop traffic

Why? Loads of users use the FB app on their phone, so what about them? Seriously, I'm really curious to your meme site :)

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 …

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

If you utilize a CDN for all your assets (images, css , js, etcetera) instead of serving them from your own web server then problem solved. As a bonus your website will load faster worldwide. There are some 'free' CDN's out there.

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.

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=' …

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?

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.

You might have deleted it accidently? Anyway... if you can't find it, how on earth are we supposed to find it for you?
Perhaps they, http://forums.mobirise.com/, can assist you.

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

Just read the other day that Microsoft is almost as much as worth as Apple, so they obviously are doing something somewhere good again. Not sure where, but somewhere :)

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.

Ok, so then leave it at the bottom of the HTML instead of between the head.

<!DOCTYPE html>
<html>

    <head>

        <!-- head stuff here -->

    </head>

    <body>

        <!-- HTML stuff here -->

        <!-- JS stuff at the bottom, before closing body tag -->
        <script src="../src/java/Controller/ALGAMEBean.js"></script>

    </body>

</html>

If you trigger the function in the <head> before the HTML is rendered, then it won't trigger because your button is not there yet. That's why it does work if you put the JS before the closing </body> tag at the end of your HTML, If you want to keep it in the head, then you can wrap your JS in between a document ready function.

Not sure if you're using plain JS or the jQuery library, so here's both:
Plain JS: https://www.competa.com/blog/cross-browser-document-ready-with-vanilla-javascript/
JQuery: http://learn.jquery.com/using-jquery-core/document-ready/

Although it might be better in lots of cases to put all your JS before the closing body tag, becaase JS in the head blocks rendering of the HTML which results in slower loading pages.

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.

I agree! Changing the filter could be stored in a cookie or an option to set it somewhere in the user control panel.

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.

What about blockchain technology? Could this possibly solve in the near future a lot of issues, fraud and security the voting systems are facing today?

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 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.

I'm not sure that it's the OP's fault that there was no provision for editing the website from the author.

Well there's obviously not talked about it in their first meetings :) The OP probably thought that a CMS or any kind of system to add/edit content easy on other pages then the webshop was included and the author probably thought that the OP was reaching out to him to do any changes or additions to the content, so he can charge some exrea fees.

From my understanding the OP wants to edit/add content indeed like in a Dreamweaver Design View functionality and he doesn't wanna juggle with programming languages, but even working with Dreamweavers Design View needs some learning curve especially when there are dynamic pages and databases involved.

Either way the OP needs to get his hands dirty or he just let the author do the content changes/additions for an extra fee. If it's only so now and than some changes/additions, then why be bothered by investing time into learning all these stuff. Adding an introduction to the homepage is 5 minutes work for the author.

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