Posts by gentlemedia

Okay, but then at least you still have to draw the little dots. Like I said what you have now are only pen movements.
Anyway.... this post explains the path syntax, so perhaps you can get out of it what you want.
https://css-tricks.com/svg-path-syntax-illustrated-guide/

Yes, I see now in your example that you only give the command (M73.3,73.1) to move (M and m stands for move) the pen to x=73.3 and y=73.1 coordinates, so you don't draw anything yet and therefore there's nothing to fill or to stroke. If you want a line between those coordinates then you will have to draw withL, l, H, h,V, or v a line. Which one to use depends on what you want to draw. :)

You can change/set the fill color of a path with CSS.

.st0 {
    fill: blue;
}

You can also set the stroke color & width with CSS.

.st0 {
    fill: blue;
    stroke: yellow;
    stroke-width: 2;
}

Ok... hold on! I'm on it!

Just use .box::before for the base styles for the background image and then give all the boxes a unique class such as .box-1, .box-2, .box-3, etc. which you then can use for the seperate background images on .box-1::before, .box-2::before, .box-3::before, etc.

<div class="box box-1>box 1</div>
<div class="box box-2>box 2</div>
<div class="box box-3>box 3</div>
<div class="box box-4>box 4</div>
<div class="box box-5>box 5</div>
<!-- etcetera -->

Also you actually don't need in this situation the background-origin: padding-box for the 30px padding, you can create that with the top, right, bottom and left properties as well.

/* these .box styles/positioning are from my demo,
  * but you shoud just use your own styles and
  * positioning of course
  */

.box {
  position: relative;
  width: calc((100% - 20px * 5) / 5);
  height: 200px;
  margin: 10px 10px 20px;
  border: 1px solid #999;
  font-size: 150%;
  text-align: center;
  text-transform: uppercase;
  line-height: 200px;
}

.box::before {
  content: ' ';
  position: absolute;
  z-index: -1;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: .5;
}

.box-1::before {
  background-image: url(box-1.jpg);
}

.box-2::before {
  background-image: url(box-2.jpg);
}

.box-3::before {
  background-image: url(box-3.jpg);
}

.box-4::before {
  background-image: url(box-4.jpg);
}

.box-5::before {
  background-image: url(box-5.jpg);
}

Little demo: http://codepen.io/gentlemedia/pen/pNXrmQ

If you set an opacity to an element then that element and its child elements will get that opacity.
So either set an opacity on that image in Photoshop or whatever photo editor you use or you can use a pseudo element (::before or ::after) for that background-image and set an opacity on that pseudo element.
You will get then something like this:

.box {
    margin:auto;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:20%;
    height:200px;
    border:1px solid silver;
    padding:30px;
    position:absolute;
    box-shadow: 0px 0px 10px 10px #72B3D3;
}

.box::before {
    content: ' ';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url(accountsBG.jpg) no-repeat center / contain;
    opacity: .5;
}

And as far I can see of that image of yours the 30px padding is just there. The h1 is 30px of the edges. If you want the background image 30px of the edges, then you will have to set a background-origin: padding-box on that .box::before first in order to set a padding: 30px.

.box::before {
    content: ' ';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url(accountsBG.jpg) no-repeat center / contain;
    opacity: .5;
    background-origin: padding-box;
    pading: 30px;
}

I use the @media print styles from HTML5 Boilerplate in my default CSS file. Perhaps it can come in handy for you too.

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

Give container a top margin of 60 px (the height of the header) and I'd recommend to take out the min-height: 100% and height: auto, because they don't make much sense in the way you have your mark-up.

Try to give it a z-index, because it might behind the #container div which has a min-height of 100% and a white background color. This might be covering the header.

#header1 { 
    width: 100%; 
    font-size: 28px; 
    font-weight: bold; 
    font-style: oblique; 
    position: fixed;
    z-index: 100;
} 

Just to be sure I set a z-index of 100, but 1 or 2 should be enough as well.

I agree with diafol! Hiding content is hiding the problem, not a solution to it.

I find the demand for responsive sites a waste of time - phones now have bigger screens, and if you turn them from portrait view to landscape, most non-responsive sites work okay!

Not necessarily true! Have a look at any websites' Google Analytics and you will be surprised how many small resolutions there are still in use. Here's also a list from Device Atlas with most used screen resolutions in 2016.
https://deviceatlas.com/blog/most-used-smartphone-screen-resolutions-in-2016

Responsive web design is not just a matter of squeezing and stretching. It’s about delivering one website countless ways depending on the width of the screen and the capabilities of the device. For example instead of stacking everyting ontop of eachother for small screens, you can divide certain content into tabs or accordions to overcome really long pages. And integrate swipe gestures wherever this may be suitable for touch screens.

Not sure if I'd want a site that looked like that!

Indeed! That sites loads, performs and displays horrendous. Such a big architect agency with such a lousy site :) The one responsible for slapping that piece on the Internet had clearly no clue what he was doing.

On topic:
Looking at the path to the CSS file that site is based on the free Twenty Twelve wp theme.
http://www.shoparc.com/wp-content/themes/twentytwelve/style.css?ver=4.6.1

https://twentytwelvedemo.wordpress.com/

Ok, I've googled with some other keywords and i found out that there is also a SHIFT-CMD-R to reload the page and this will (still) clear the cache. Not sure why CMD-R isn't enough anymore, but who cares :)
Jim was close with his Windows version (Ctrl-SHIFT-DEL) of it I guess.

I've Googled high and low, but couldn't find an answer yet. What you've found was already the case for OS X, but now CMD (⌘) + R doesn't change the CSS or new images.

A hard-refresh in incognito window doesn't update my CSS too. And I didn't spread it to other computers :) Others (2 clients and a friend) on a Mac have it too with Chrome, so I'm sure it's not somethig with my system, but with Chrome on the Mac somehow. Anyways... I will report an issue at Chrome I guess.

I have it with all the sites I work on at the moment which are 5 in total. Changes to my CSS won't appear anymore with a hard-refresh unless I clear the cache manually or when I have developer tools open which has cache disabled by default.
A friend of mine (also on a Mac) updates her portdolio site through a CMS and has now the same issue too in Chrome.

Well... you could do that of course, but then I'd suggest you do the following, because seriously you don't want !important to fix issues like this.

in your HTML of that img-portfolio image grid you have the container.:

<!-- Page Content -->
    <div class="container">

Just add a class name to that div something like portfolio:

<!-- Page Content -->
    <div class="container portfolio">

And then you can do in your CSS this:

.portfolio .img-portfolio {
    margin-bottom: 30px;
}

If this doesn't solve it then you have already specificity creep somwhere down the road.

I usually do a clear with CTRL-SHIFT-DEL. What happens when you try that?

I'm on a Mac, so I can't try that out now. I'm not even sure if Chrome on Windows has this issue too.

Actually this solves the problem but i have a question why is not recomended to use !important ?

I've posted a link to an article that explains it well.

What you have is a specificity issue (a rule set before your rule-set that also sets a bottom margin on .img-portfolio or probably on .img-responsive, but that has a higher specificity then yours) or further down the cascade you have another rule-set that overwrites your css rule-set. This is what you have to figure out! Thus remove that !important and then inspect with developer tools the css rules that are applied to .img-portfolio. That's an easy & quick way to find out.

Wether or not an incongnito window will clear the cache with cmd-R (mac) or Ctrl-f5 (windows) it used to work within a 'normal' window before too. I'm just baffled why it doesn't anymore.

Here is the full css code

Those CSS blocks have nothing to do with the HTML of that image grid, so the error is not in there.

You have a rule-set somewhere that might overriding that margin-bottom, because it should just work.
See here; http://codepen.io/gentlemedia/pen/XNegPp
With the browser developer tools you can spot pretty quick if this is the case or not.

Or you could add an !important to the property value to find out if this is the case. And I say 'to find out', because if the !important 'solves' the problem, you'll have to still figure out which rule is overriding it and solve it properly (usually a CSS specificity issue) so you can remove the !important. https://css-tricks.com/when-using-important-is-the-right-choice/ Ok, school is closed now! :)

Try the following and see if your 30px bottom margin showes up:

.img-portfolio {
    margin-bottom: 30px !important;
}

I've noticed the last couple of weeks that a hard-refresh won't clear the cache anymore in Chrome... well to me and two clients of mine (we're all on a Mac by the way). Not sure either if there was an update to Chrome recently which might cause this now.

Did anyone else noticed this as well? I work with my developer tools always open, so my cache is disabled by default, but asking my clients to open developer tools before refreshig the page, I'd rather avoid :)

I have 3 dots :)
http://codepen.io/gentlemedia/pen/MbEeOa

Well "float: left" is pseudo-default. But "float: right" suddenly solves marginal errors, why?

Sorry, but I don't know whatt you mean with 'pseudo-default' and 'float right solves marginal errors'

I have no idea why default float: left; would create a problem and float: right; wouldn't. Could you explain?

What kind of problem do you mean?

But only inline elements don't react with set height and width.

Indeed! Inline elements ignore the width and height properties unless you change them to inline-block or you float them.

https://www.impressivewebs.com/difference-block-inline-css/

How about another way, is it possible to bring two items on the left, and then have span.middle "fill" the remaining space on right?

No, with old fashioned CSS 2.1 it is not possible. That's why we have now flexbox and in the future grid at our disposal. Do you really have/want to support IE9 and below? Or serve modern browsers that supports flexbox your fancy layout and those who don't floats by using feature detection such as Modernizr.

That is not possible without using flexbox, grid or javascript. If you use floats or inline-block, you'll need to set dimensions.
You can get half of what you want by using calc() :)

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

And mixing floats and inline-block on the same element is redundant, because inline elements, such as a span, become automatically block-level elements (display: block) once you float them.

In this case just float them, because you set fixed dimensions of 80px on them anyways so there's no need for using inline-block.

You can't have anchor tags within an anchor tag and think about it for a second... does it make sense?
In order to show/hide the div while hovering the anchor, that div needs to be a sibiling of the anchor and not a child.

Something like this:
https://jsfiddle.net/gentlemedia/vc639va4/3/

You're getting way too specific with long selector chains like that which makes it imo harder to read and it will give you in the end specificity issues - https://css-tricks.com/specifics-on-css-specificity/
Also using ID's in your CSS is not recommended for specificity reasons too and the CSS applied to it is not reusable.

Look into BEM or SMACS methodologies for reusable components and proper naming conventions.
http://getbem.com/
https://smacss.com

I'd recommend to set the fridge image as a background-image to an HTML element such as a div that will have the same dimensions as the image.
Then you can nest other div tags within that div for your shapes and position them with floats and margins or with flexbox if you don't care about IE9 and below :) where you want them.

For starter I'd recommend to take out the onclick attribute from the HTML. Keep structure and behavior seperate.

<input id="aaa" formaction="register.php" type="submit" value="Register" />

And then within <script> tags

document.getElementById('aaa').addEventListener('click', function (e) {
    e.preventDefault();
    // scrollTo here
});

or with jQuery

$('#aaa').on('click', function (e) {
    e.preventDefault()
    // scrollTo here
})

And on a side note and off topic. The datetime attribute is specifically for the time element.

<time class="metro_tmtime" datetime="2013-04-10 18:30">
    <span class="date">1/4/13</span>
    <span class="time">17:20</span> 
</time>

https://schema.org/docs/gs.html#advanced_dates

why does the click function on the arrow doesn't work on mine?

Which arrow? Where's yours? Sorry, but my christal ball is at the dry cleaner.

Obviously I was not clear enough, but let me try again :)

Unslider has by default no left and right arrows, but 'next and 'prev' text links. Just like you have it in your image.
If you want to replace those text links with arrows then you have two options, but I will show you the easiest which is overwriting the object like this:

$(function() {
    $('.my-slider').unslider({
        arrows: {
            prev: '<a class="unslider-arrow prev">&#10094;</a>',
            next: '<a class="unslider-arrow next">&#10095;</a>'
        }
    });
});

For the sake of being lazy, I've used HTML symbols for the arrows. ❮ is a left arrow (bracket) and ❯ is a right arrow (bracket), but like I said you can also use an icon font or an SVG sprites image. Styling and positioning of the arrows you do with CSS.

.unslider-arrow {
    position:absolute;
    top: 45%;
    z-index:2;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 24px;
    color: #f9f9f9;
    text-align: center;
    border-radius: 50%;
    background-color: #333;
    cursor:pointer;
}

.unslider-arrow.prev { left:20px }
.unslider-arrow.next { right:20px }

I was not really that lazy, because I even created a demo for you :)
http://projects.gentle.media/unslider/

Wow... that is some ancient Dreamweaver way to mark-up a page.
Not sure what you're after either, but if you want to override the default look of radio buttons (checked and unchecked) then you can do this with CSS, but looking at that mark-up it seems you've never heard of CSS :)
Here's a pure CSS way: http://www.456bereastreet.com/archive/201211/accessible_custom_checkboxes_and_radio_buttons/

Here are two CSS with jQuery ways:
http://labelauty.js.org/
http://icheck.fronteed.com/

Shutterstock, Dreamtime, 123f and the likes do have them, but also http://www.freepik.com/free-photos-vectors/backdrop and perhaps at http://allthefreestock.com/

By default the arrows option is set to true, which means its shows the 'next' and 'prev' text links and not left & right arrows. Do you want left & right arrows instead of the text links, then you will have to put them in yourself either through CSS or as an object override via the arrows option. For the arrows you can use an icon font, an image or even just HTML symbols https://www.piliapp.com/symbol/).

Apple blocks autoplay of media (video or audio) in Safari on iOS by default and if you're going to use the video tag, then I'd recommend to convert your .mov file to .mp4 instead, so that the video also plays in other browsers/devices.

Like I said since that mobile off-canvas nav gets altered with JavaScript by adding all this mm- classes to certain elements and the mobile nav gets even moved with JS from its orginal spot to another spot in the DOM. This could have been done better by the developer of that theme if he had used the clone configureation that would just clone the original nav, that you have for wider screens, for that mobile nav.

So I looked what you have when JS is disabled in the browser and then you see indeed the mobile nav at the top of the page. This is what you see in a flickr with JS enabled, but is gone once it's taken out and moved with JS to the other spot in the DOM.

So I figured out an easy solution for you and that is by adding the following CSS block to your CSS file and I see you have also a custom.css file, so it can just go in there.

#header + div {
    display: none;
}

In that div tag sits the mobile nav & cart which gets taken out by JS and moved to the other spot, so with JS enabled that div tag will be empty anyway. By hiding it with CSS this will not show the mobile nav in a flickr.... well. that's the theory :) Just try it and let's see if I'm right this time.

I tried it before with daniweb url (also https) and it didn't load either, so I tried now with css-tricks.com (also https) which to my surprise does load, so that source I linked to is not totally right.

So lookng at the console this is what it says about google.com (and also daniweb.com):
Refused to display 'https://www.google.com' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

So indeed a site can set via a http header wether it can be displayed in a frame on another domain or not and has nothing to do with http or https itself.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

Although if browsers notice a http site loads in a frame a https web page with mixed active content, then that web page gets blocked by default.
https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content#Mixed_active_content

Downvote? Yes from me. If you ask for help on a forum and you can't bring up some patience and start yelling, what would you've expected?

You yell that you've tried http and https, but in your iframe src I see google.com as http which doesn't exist, so it will redirect automatically to google.com as https and like I said browsers will block by default iframes that want to load URLs with https.
So I was asking you to try it with another URL that is not https such as http://pxtoem.com/, because that should just work fine.

If that is not working either for you then show us something real online with Codepen, Jsfidlle or even Dropbox (http://mark-anthony.ca/hosting-a-website-with-dropbox/), so that we can replicate your issue instead of yelling that you've tried.

I never did something with Shopify, so I'm not sure what's possible to do.
How much are you in control of adding or editing the core files or is there a way to override them the way like WordPress does with child themes?
Becausre I think you can solve it by wrapping the mmenu snippet (located at the top in app.js) in a document ready.

You see now this in app.js:

    $('#nav').mmenu({
        searchfield : {
            add: true,
            search: true,
            noResults: '<a href="/search?q=" class="search_link">' + "Advanced Search \u0026#8594;" + '</a>'
        },
        classes: "mm-white"
    });

Change that to:

$(function() {

    $('#nav').mmenu({
        searchfield : {
            add: true,
            search: true,
            noResults: '<a href="/search?q=" class="search_link">' + "Advanced Search \u0026#8594;" + '</a>'
        },
        classes: "mm-white"
    });

});

Because also all the js (functions and plugins) are in the same file (app.js) and the snippet above that initilizes the mmenu is before the mmmenu plugin code.

Anyway if you can try with wrapping it in document ready first and then we'll see further!

After looking more deeper in Chrome DevTools I see that the mobile nav (off-canvas nav) is controled by the mmenu jQuery plugin which adds loads of mm- sufix classes dynamically to the HTML of the page. This takes probably longer than the rendering of the HTML of the mobile nav which causes the flickr of an unstyled mobile nav.

I think it has to do with the mobile navigation. If I resize the browser window to narrow to the point where your mobile navigation (hamburger icon) reveals, then a refresh doesn't shows the unstyled navigation flickr.

Does the mobile navigation gets populated with JS somewhere?

EDIT: I see there gets a class mobile_hiddenadded to the containing div nav, so if this is done by JS at a later point, then that's probably the cause of the flickr.

Thanks, Diafol! I know I go wrong with using name, because the radio buttons do have of course the same name, but I couldn't figure out what to use instead for the them. Your solution works well for me too, because I've tried long enough :)

I have the following which works fine for text inputs, textareas and selects with the class 'stored'.

$(function() {

    $.each($('.stored'), function() {
        if(localStorage[$(this).attr('name')]) {
            $(this).val(localStorage[$(this).attr('name')]);
        }
    });

    $('.stored').on('change', function() {
        localStorage[$(this).attr('name')] = $(this).val(), $(this).find('option:selected').val();
    });

});

To store radio buttons or checkboxes with the class 'stored' in localStorage I've tried to extend that on change function with several ways such as:

localStorage[$(this).attr('name')] = $(this).val(), $(this).find('option:selected').val(), this.checked.val();

But no can do!

Then I tried to seperate it with the following, but also nothing

if ($('.stored').is(':checked')) {
    localStorage[$(this).attr('name')] = $(this).val();
};

So how to do this exactly? I've created a pen with this all.
http://codepen.io/gentlemedia/pen/ORgQyr/

Thanks!

google.com is not http as you have now, but https. Try just with another URL that is not https!

What and where did you change something? If I change that Google (https) url with the url (just http) of my own webpage, then it will get displayed. See that pen of mine!

And just sharing an image and no new or updated code, I can not see what you mean and tell what's wrong.

You will need to wrap your submenu items in an ul tag as well. The way you have it now is not valid HTML either. Then you could combine visibillity: hidden and opacity: 0 to hide and visibility: visible and opacity: 1 to show on :hover.

Sometime ago another member had also issues with a pure CSS dropdown/submenu which I created a demo for with the following mark-up and CSS to reveal the submenu items.

HTML:

<nav role="navigation">
    <ul>
        <li><a href="page1.html">page one</a></li>
        <li><a href="#" class="submenu">submenu</a>
            <ul>
                <li><a href="page2.html">page two</a></li>
                <li><a href="page3.html">page three</a></li>
            </ul>
        </li>
        <li><a href="page4.html">page four</a></li>
    </ul>
</nav>

CSS:

[role=navigation] ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

[role=navigation] > ul > li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 0 1rem;
}

[role=navigation] .submenu + ul {
  position: absolute;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s;
}

[role=navigation] .submenu:hover + ul,
[role=navigation] .submenu + ul:hover {
  visibility: visible;
  opacity: 1;
}

Here's the demo link: http://codepen.io/gentlemedia/pen/WwMQJz

Hope this get's you in the right direction.