Posts by gentlemedia

I thought you wanted to change the images like scrset does, but with JavaScript, because your lightbox script could not work with scrset.
I don't understand what you're trying to achieve now, so perhaps someone else does.

There's a lot wrong and messy in your implementation. I don't know why you have so many functions and some of them don't make sense. Also you have stuff from the tutorial still in it, which you don't need and which makes it even harder for you to debug.

You don't need much. Here's my take inspired by the tutorial.

Default image in the HTML (in this case the medium image):

<img id="1" src="http://placehold.it/400x300/000000/eeeeee?text=Medium" alt="">

And the JS to swap the image:

var mqls = [
    window.matchMedia("(min-width: 20em)"),
    window.matchMedia("(min-width: 50em)"),
    window.matchMedia("(min-width: 80em)")
]

function mediaqueryresponse(mql){
  if (mqls[0].matches){ 
    document.getElementById("1").src = "http://placehold.it/400x300/000000/eeeeee?text=Small";
  }
  if (mqls[1].matches){
    document.getElementById("1").src = "http://placehold.it/400x300/000000/eeeeee?text=Medium";
  }
  if (mqls[2].matches){
    document.getElementById("1").src = "http://placehold.it/400x300/000000/eeeeee?text=Large";  
  }
}

for (var i=0; i<mqls.length; i++){
    mediaqueryresponse(mqls[i])
    mqls[i].addListener(mediaqueryresponse)
}

Demo (works both on load & resize):
http://codepen.io/gentlemedia/full/pgWKxR/

But... but... you have a complete working example with HTML & CSS (and jQuery to trigger the open/close functionality), so how about looking at the code of that example to learn from it.

What you see so far in your implementation is exactly what you have in your CSS, so what's the problem?

As far as I can see they removed the ability to show the result as a full page. Codepen.io is in that respect my preferable option.

document.getElementById("tleone").src = mqls[0].matches

You're targeting with 'tleone' the wrapper div and not the img tag, so this won't work.

Ahh, I was expecting another link.

Yeah? Well... this was the link :)
All you need to do is replacing the image that you have as default in your HTML, right?

https://www.google.com/search?q=replace+img+with+javascript&ie=utf-8&oe=utf-8&gws_rd=cr,ssl&ei=eDSWVoWtIIfTU5uHtagH

match is if it meets the media query and unmatch if it doesn't. Pretty much the same as if/else

I've used in the past enquire.js which is basically a wrapper around window.matchMedia() but with some added features.
http://wicky.nillia.ms/enquire.js/

I thought you wanted to change the img src when a MQ is triggered. You'll have to place your default image in the HTML and replace it with another when a MQ is triggered.

<img src="img/default.jpg" id="img-01" alt="" />

<!-- this, but then in your window.matchMedia() MQ -->
<script>
    document.getElementById("img-01").src="img/medium.jpg";
</script>

<!-- or with jQuery -->
<script>
    $("#img-01").attr('src', 'img/medium.jpg');
</script>

By the way... responding to multiple media queries with window.matchMedia() goes a bit different then I thought as well.
Check out this tutorial:
http://www.javascriptkit.com/javatutors/matchmediamultiple.shtml

You'll need to add animation-fill-mode: forwards;
So the shorthand version would be this, but 5s speed and 5s delay might take way too long :)

.active .port_up_row {
    -webkit-animation: slideup 5s 5s forwards;
    animation: slideup 5s 5s forwards;
}

On a side not. Consider using prefixfree.js, so that alll you need to write is the W3C standard property and the vendor prefix properties gets added automatically.

A little update on my previous post. It seems that we get in CSS4 a standard approach for this - :placeholder-shown - so we can ditch the vendor prefixes by then. But for now to cover as many browsers with the prefix ones, we need 5 versions:

::-webkit-input-placeholder { /* Safari, Chrome and Opera */
    color: red;
}

:-moz-placeholder { /* Firefox 18- */
    color: red;
}

::-moz-placeholder { /* Firefox 19+ */
    color: red;
}

:-ms-input-placeholder { /* IE 10+ */
    color: red
}

::-ms-input-placeholder { /* Edge */
    color: red
}

:placeholder-shown { /* W3C Standard in CSS4 */
    color: red
}

input::-webkit-input-placeholder { color: red }
input::-moz-placeholder { color: red }
input::-ms-input-placeholder { color: red }

You can't combine them in a single CSS block... they have to be separate.
https://jsfiddle.net/gentlemedia/jz63Lkh3/7/

EDIT:
Now you can even play with :focus to fade the placeholder color to transparent for example

input::-webkit-input-placeholder {
    color: red;
    transition: .3s;
}

input::-moz-placeholder {
    color: red;
    transition: .3s;
}

input::-ms-input-placeholder {
    color: red;
    transition: .3s;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

input:focus::-ms-input-placeholder {
    color: transparent;
}

https://jsfiddle.net/gentlemedia/7g4h66pk/1/

Well. let me be a bit helpfull, but thanks to http://www.freeformatter.com/html-formatter.html :)

<form action="usersave.php">
    <!-- class="form-horizontal form-label-left"--> 
    <div class="form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-3">First Name</label> 
        <div class="col-md-9 col-sm-9 col-xs-9"> <input type="text" class="form-control"> </div>
    </div>
    <br><br><br> 
    <div class="form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-3">Last Name</label> 
        <div class="col-md-9 col-sm-9 col-xs-9"> <input type="text" class="form-control"> </div>
    </div>
    <br><br> 
    <div class="form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-3">Email Address</label> 
        <div class="col-md-9 col-sm-9 col-xs-9"> <input type="text" class="form-control"> </div>
    </div>
    <br><br> 
    <div class="form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-3">Password</label> 
        <div class="col-md-9 col-sm-9 col-xs-9"> <input type="password" class="form-control"> </div>
    </div>
    <br><br> 
    <div class="form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-3">Confirm Password</label> 
        <div class="col-md-9 col-sm-9 col-xs-9"> <input type="password" class="form-control" required> </div>
    </div>
    <br><br> 
    <div class="form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-3">Role</label> 
        <div class="col-md-9 col-sm-9 col-xs-9"> <input type="text" class="form-control"> </div>
    </div>
    <br><br> 
    <div class="form-group"> </div>
    <br><br> </div> </div> <!-- /form input mask --> <!-- form color picker --> 
    <div class="col-md-6 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>Contact information</h2>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <br /> <!--<form class="form-horizontal form-label-left">--> 
                <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Email</label> 
                    <div class="col-md-9 col-sm-9 col-xs-12"> <input type="email" class="form-control"/> </div>
                </div>
                <br><br><br> 
                <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Cell Phone</label> 
                    <div class="col-md-9 col-sm-9 col-xs-12"> <input type="text" class="form-control" /> </div>
                </div>
                <br><br> 
                <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Home Phone</label> 
                    <div class="col-md-9 col-sm-9 col-xs-12"> <input type="text" class="form-control"> </div>
                </div>
                <br><br> 
                <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Street 1</label> 
                    <div class="col-md-9 col-sm-9 col-xs-12"> <input type="text" class="form-control"> </div>
                </div>
                <br><br> 
                <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Street 2</label> 
                    <div class="col-md-9 col-sm-9 col-xs-12"> <input type="text" class="form-control" id="demo_forceformat3"> …

Okay... understood! Then the window.matchMedia() method might do the trick for you. Browser support is great; http://caniuse.com/#feat=matchmedia

What you all want, that is exactly what picturefill.js does. Picturefill.js makes srcset, sizes and the picture element already work in IE, so why do you want to create your own js solution? I don't get it!
And you will need Modernizr or the likes to detect the feature, so you can load picturefill.js only for browsers/devices that don't support scrset. A library as Modernizr is pretty much inevitable in a front-end developers toolkit. It makes serving fallback solutions or loading polyfills a lot easier.

Modernizer puts the <picture> element in the page for browsers that don't support <picture>, correct ?

No, Modernizr is purely for feature detection. You just write/use scrset and/or sizes attributes in your markup as recommended by W3C, you test with Modernizr and load picturefill.js for browsers/devices that don't support these attributes. That's pretty much it. You can indeed create the modernizr build with scrset attribute included and do your feature test with that to load picturefill.js

With modernizr you can load picturefill.js only for browsers that don't support the picture element (which includes scrset and sizes attributes). So there's no unnecessary overhead for browsers that do support the picture element.

With the new version of Modernizr the Modernizr.load() method is deprecated, so you will have to create now a conditional build for the features you want to detect and polyfill.

You would do now something like this (untested and there are other ways to conditionally load scripts):

var head = document.getElementsByTagName('head')[0];
var script = document.createElement("script");

script.type = "text/javascript";

if (Modernizr.picture) {
    // Picture element is supported!
} else {
    script.src = "js/picturefill.js";
}

if (Modernizr.someotherfeature) {
    // Some other feature is supported!
} else {
    script.src = "js/someotherfeature.js";
}

// etcetera

head.appendChild(script);

Yes, IE and some other don't support scrset yet, but for them you can load (via Modernizr) the picturefill.js polyfill. Or as rproffitt suggest, just let them deal with the regular/default img.

There is a need for JS-Library solution !

Do you mean a library such as jQuery? If so, then you don't need one for this.
Window.matchMedia() - part of the Web API - is especially made for using media queries in JS.

if (window.matchMedia("(min-width: 1024px)").matches) {
    // code for when viewport is at least 1024px wide
} else if (window.matchMedia("(min-width: 768px)").matches) {
    // code for when viewport is at least 768px wide
} else {
    // code for when viewport is less then 768px wide
}

But for swapping img's better to use scrset and sizes, because that's where it's for.

This is for images, not for responsive pages ;)

But, there is now the srcset and the sizes attributes for this? But you knew that already, so there's no need for a JS solution. Only as a fallback solution for older browsers.

Could you make a jsfiddle or pen what your dynamic table should output in HTML and with the previous styles you had? I would like to see what you're after and then I'll try to recreate it with the properties I mentioned.

There doesn't exist a float: top and float: center The float property can only have left, right, initial, inherit and none.

If you want to align content in table cells as the way tou want, you will need the properties text-align and vertical-align and there's no need for span tags with this.

https://css-tricks.com/almanac/properties/t/text-align/
https://css-tricks.com/almanac/properties/v/vertical-align/

That page wasn't loading correctly before that either. Check the browser console. You have a couple of errors, which breaks the lightbox.

except the lightbox is turned off, how do you turn it on ?

Check the window.matchMedia() method in the js of that pen. Either try to remove that whole functionality or easy way is to lower the 800px value.

I didn't disabled anything. The creator of that pen did.
That HTML page of yours doesn't do anything in Chrome on my Mac, so I don't know what you did there.

Like I said the Lightbox functionality is disabled. The photo, the title and paragraph text are just underneath each other on my phone, so there's no image tapping either.

I had no issues opening the fullpage on my iPhone5.

It wouldn't make sense if your thumbnail image would've the same dimensions as the image that opens in the lightbox on small screen, but since your thumbnail image is a (half) crop of the actual sized image, then you can enable the lightbox if you want.

Inspect the JS... the creator uses window.matchMedia() to add a class min at 800px.

Do you mean that codepen won't display correctly or the lightbox demo itself?
I've opened the demo in Safari on my iPhone and the creator of that lightbox demo has also disabled the lightbox for small screens, The thumbnail/small image is as width of the width of my screen and the title and description are just placed underneath the image.
.
I also find that this is the best way of doing it, becuase a lightbox doesn't make sense on small screens if the small image takes up already the full width of the screen realestate. The lightbox image version won't be any bigger then that, so it would be a useless feature. For tablets and up it would be a nice feature to have.

Would you happen to know how the close button can be removed on the CodePen lightbox

Take out the var closedialog

and replaced by simply clicking on the image to close the image

attach the closeDialog()function to a click event handler on the img.

by the way... with thumbnail images, I meant the mages where user clicks on to open the bigger version of it in the lightbox.

The link to that article explains it really well what I meant. Did you read it?

That pen is not mine, but you can change the view to full page, so you could test it on a small screen. http://codepen.io/dudleystorey/full/LEBjyL/

If your image is a diagram that gets unreadable on small screens and you want to disable zoom, then you should give the users a decent fallback. You could of course create different versions of the diagram that can be read/viewed if the screen is narrow and small, but diagrams should possibly be better created and embed these days with SVG, because support is pretty solid.
http://caniuse.com/#feat=svg

You could give the panels a class of the color you want.
HTML:

<div class="panel panel-default blue">
    ...
</div>

<div class="panel panel-default green">
    ...
</div>

CSS:

.panel.blue { background-color: blue }
.panel.green { background-color: green }

Or if you don't want to add extra classes to your HTML markup, you could use the :nth-child() selector.

/* first panel */
.container .row .col-sm-4:nth-child(1) .panel {
    background-color: blue
}

/* second panel */
.container .row .col-sm-4:nth-child(2) .panel {
    background-color: green
}

/* etcetera */

But the latter with all these bootstrap classes looks downright ugly :) You might want to add some classes that gives some meaning to your content.

If your thumbnail images are on small screen as width as the width of the screen/device then you could, or even should, disable the lightbox functionality on small screens.
http://bradfrost.com/blog/post/conditional-lightbox/

But if not, then you can implement a lightbox with scrset support such as in this pen:
http://codepen.io/dudleystorey/pen/LEBjyL/

You mean something like this?
https://jsfiddle.net/gentlemedia/txxs98ed/

I don't know what you want exactly, but if you can switch your WYSISWYG editor (in the admin where you can edit the description) to a text/html editor, then you can add/wrap any HTML such as paragraphs ot br tags to/arround your text.

If you would have typed the exact same question in Google, you would've had the answer already.

If you try and test with the jQuery option, then delete the CSS option. I mean don't use them together and see what it does on touch screen.

The HTML output is different between them. On the list page all the text is wrapped in 1 paragraph and on the producr page it's devided over 3 paragraphs.

If you can add, in the page editor in the admin, paragraps to the product description or even a breaking space could drop that sentence to the next line.

Mark this thread as solved! I will look for your other issue and will reply on the original thread.

You could try to put this in global.js at the bottom

$('.sf-with-ul').click(function(e) {
    e.preventDefault()
});

I see now that that anchor tag has it's own classname, so try this in your CSS:

.sf-with-ul { pointer-events: none }

If you have access to the global.css file, then drop the CSS option in there somewhere.

It's solved. Not sure what I was thinking by using || instead of just the, to combine them.

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

If you choose option 1 then this will go in a CSS file and if you choose the second option this into a JS file. I had a look and all your CSS and JS files are minified, so I don't know if you can add one of the options to a custom CSS or JS file which you can access easily.
I don't have eperience with Prestashop themes, so I'm not sure how custom CSS/JS works within this e-commerce solution.

I've kind of fixed it by not combining the input/textarea and select in one .change() function.

I keep them now seperate like this with the .stored class only on the input and textarea fields:

$('.stored').on('keyup focusout', function() {
    localStorage[$(this).attr('name')] = $(this).val();
});

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

I keep the thread open, because perhaps I have an error in my first approach that I don't see for some reason.

CSS option:

.sfHover > a:first-child { pointer-events: none }

jQuery option:

$('.sfHover a').first().click(function(e) {
    e.preventDefault()
});

The CSS option will only work in browsers that supports the pointer-events property, but with both options I'm not sure if you'll get into trouble on touch screen devices, because you might need that click to reveal the submenu on them.

I have a form where I save the data in a cookie with localStorage. This all works fine, but If clear (just deleting with backspace) the value of an input field or textarea so that the placeholder text shows up again and I refresh or come back at the page, the input field and textarea shows 'undefined' in the fields instead of the placeholder text. How do I get rid of 'undefined'?

I made a demo form in a pen, so you can see and experience what I'm talking about.
http://codepen.io/gentlemedia/full/VevPyP/

The HTML of the demo form :

<form>

    <div>
        <input type="email" name="email" class="stored" placeholder="email address" required aria-required="true" />
    </div>   
    <div>
        <select name="gender" class="stored" required aria-required="true">
            <option valsue="">gender</option>
            <option value="male">male</option>
            <option value="female">female</option>
        </select>
    </div>
    <div>
        <textarea name="bio" class="stored" placeholder="a little bit about yourself" required aria-required="true"></textarea>
    </div>

</form>

The jQuery/localStorage to save and return the data:

$(function() {

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

});

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

In style.min.css somewhere at line 326... well, that's what inspect element in Chrome tells me.

.widget {
    margin-bottom: 2rem;
    padding: .9rem;
    height: 660px;
    background: #FFF;
    box-shadow: 5px 0px 5px grey;
}

I see you're editing/adding styles to the WP theme CSS file directly while you actually should create a child-theme directory with your own style.css file. Or install the custom CSS plugin so you can add in there your own css. like now if you get an update notification for your theme and you install the update(s), you lose all the styles you've added to style.min.css.

With these two options you don't have that problem and you could then for example in your own css file, override the height: 660px of that widget with height: auto;.

If you give it a fixed height, in your case 660px, then indeed it stays 660px. There are a few tricks to create faux columnns, but then you will have to re-create the box-shadows as repeating images. Or re-create the layout with CSS3 flexbox and you can have real box-shadows :)

On line 21 HTMLcookieStringClone should be this $HTMLcookieStringClone right?

I think you're better off to post a job at https://www.upwork.com/ or the likes. I don't think anyone here will go through all that code and your custom CMS for free.