Posts by gentlemedia

To get a scrollbar you give that section (probably a div tag) in your CSS a fixed height and the property, overflow: auto;
But to get a scrollbar that fade-in on mouseover for example, you will need to resort to a custom scrollbar such as http://manos.malihu.gr/jquery-custom-content-scroller/

With jQuery it should be this:

$('#value').val("1")

http://api.jquery.com/val/

You would use them mostly if you want to serve high resolution (background) photos to devices with displays that can make use of them.

@media (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {

    /* retina 2x - thus serve images twice the size as the originals */

}

mq short for media query

I don't know what you've wished, but what you're doing wrong is that you define your media queries based on widths of certain devices and in particular the widths of some iDevices.

I'd recommend to be device-agnostic by using media queries based on the width of the browser window/viewport (ex. @media screen and (min-width: 50em)) instead of the widths of devices (ex. @media screen and (device-width: 768px).
With this approach it doesn't matter on which device your webapp gets viewed and if done right it will always looks good and optimized within every viewport width.

Just let your content decide when you need a media query. Resize your browser window and if a piece of content or element start to look akward, then you need a mq to make it look decent again. To me all this predefined mq's based on pixel widths of certain devices is less efficient. What about all those devices with widths that don't fall in between those standard 320px, 768px and 1024px, etc.?

I for example start of my projects with a stylesheet like this. This works for me, but doesn't have to work for someone else of course. What I don't need at the end I delete and if I need a mq in between, I add.

/* REGULAR (NON-RETINA DISPLAY) MEDIA QUERIES */
/**********************************************/

@media screen and (min-width: 25em) { /* = 400px */


} /* end 25em (400px) MQ */


@media screen and (min-width: 31.25em) { /* = 500px */


} /* end 31.25em (500px) MQ */


@media screen and (min-width: 37.5em) { /* = 600px */


} /* end 37.5em (600px) MQ */


@media screen and (min-width: 43.75em) { /* = 700px */


} /* end 43.75em (700px) MQ */


@media screen and (min-width: 50em) { /* = 800px */


} /* end 50em (800px) MQ */


@media screen and (min-width: 56.25em) { /* = 900px */


} /* end 56.25em (900px) MQ */


@media screen and (min-width: 62.5em) { /* = 1000px */


} /* end 62.5em (1000px) MQ */


@media screen and (min-width: 68.75em) …

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?

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/

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.

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

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.

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.

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.

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?

What happend with the styling of div#four. Anyways... If you want the last div fill the remaining width without setting a width for it, this is only doable with CSS3 Flexbox. Not with floats or inline-block! It can also be done with JS of course, but is a bad option imo.

Your sulution won't solve that problem. It will only makes the filesize too large and thus slow with loading. If your screenshot is fluid and therefore gets resized, so it fits in lets say 320px, then they still have to zoom & pan.

Those left and right classes were I asume helper classes to reuse them if you need to float HTML elements, so don't put any other css properties in it. Just only the float and margin properties.

Your issue is the right foated div is dropping to the next line, because there is below 1024px simply no room anymore to have it next to the left floated div. Why not just integrate in Ps that man.png into that slider background image?

Care to share a link to your website or some code? My crystal ball is at the mechanic!

I think you need to load respond.js after styles.css. It's good practice anyway to load first your styles and then your scripts.

Respond.js doesn't parse CSS referenced via @import, nor does it work with media queries within style elements, as those styles can't be re-requested for parsing.

This is why it's not working for you. You will need to put your CSS in an external stylesheet.

respond.js is a JavaScript polyfill for CSS3 media queries and as far as I can see you didn't declare any media queries in your styles, so there's nothing to respond to.

EDIT: Sorry my bad, I overlooked your media queries in your styles but the below still stands :)

But I'd recommend to use for IE8 (in conditional comments) CSS min-width and max-width properties on your container div wrap and call it a day. IMHO there's not really a need to make your website responsive in IE8, because IE8 is only on (old) desktops/laptops.

<!--[if IE 8]>
.wrap {
    min-width: 960px;
    max-width: 1100px;
}
<![endif]-->

or just something like this;

HTML:
<div>
    <img src="icon-1.gif" alt="Icon 1" />
    <h2>Fully Responsive</h2>
    <p>text the bla the bla</p>
</div>
<div>
    <img src="icon-2.gif" alt="Icon 2" />
    <h2>HTML5 &amp; CSS3</h2>
    <p>text the bla the bla</p>
</div>
<div>
    <img src="icon-3.gif" alt="Icon 3" />
    <h2>Ready for use</h2>
    <p>text the bla the bla</p>
</div>
<div>
    <img src="icon-4.gif" alt="Icon 4" />
    <h2>Shortcodes</h2>
    <p>text the bla the bla</p>
</div>

CSS:
 /* Nasty CSS reset for demo purpose, but better to use a CSS reset such as normalize.css */
* {
    marging: 0;
    padding: 0;
}

/* Apply a natural box layout model to all elements */
*,
*:before,
*:after {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

div {
    float: left;
    width: 25%;
    padding: 0 2rem;
    text-align: center;
}

Here's another method which works all the way down to IE8 (in case you need to for some obscure reason) :)

body, html {
  height: 100%;
}

body {
  position: relative;
  background: white
}

body:before,
body:after {
  content: " ";
  position: absolute;
  width: 33%;
  height: 100%;
}

body:before {
  background: green
}

body:after {
  right: 0;
  background: red
}

Demo: http://codepen.io/gentlemedia/pen/GpJGqY

Whatever te issue is, if you define 4 sources to your audio file, those files need to be converted to the proper format of the mime type, otherwise it's no point to use 4 source tags if you only load an mp3 version of your audio.

Sorry, I don't have a clue what could possibly be wrong. Perhaps you want to try with audio.js or mediaelelement.js. Both are build on top of the audio tag so you can find out if the problem is in your implementation of the audio tag or that is a local server config issue.

I saw indeed that Firefox supports mp3 natively since version 21, so that's for 2 years already :) An ogg version is only needed if you have to support Firefox versions before that.

Try to set the mime type to audio/mpeg instead of audio/mp3.

There are loads of audio converters. There are even online converters such as this one. I never used it myself and I don't know if you can do batch conversions with it.
http://online-audio-converter.com/

I use WavePad or Audacity, but these are full fledged audio editors.

All your audio files are mp3's, but Firefox needs ogg hence type="audio/ogg", so you have to convert your mp3 to ogg for Firefox. And for the others you have to load also your audio as a wav file and a mp4 file.

Yes, of course... toggle :)

You could toggle a class close with jQuery and use CSS transitions for the animation.

My fork:
http://codepen.io/gentlemedia/pen/gprmVY

You can't use .slideToggle() for CSS properties. You'll need .animate() to do so.
Something like this:

$('#windowhead').click(function(){
    $('#fullwindow').animate({
        height: "20px"
    }, 300 ); // duration
});

http://api.jquery.com/animate/

I see your #innerWrapper div start's in your #logo div, which breaks your layout and causes this unwanted scrollbar in #logo div and not in #outerWrapper div.

Tip: Issues like this you spot in seconds with the browser developer tools.

Use CSS or JS first (on page load) to hide it, but which method or properties depends on how you want to show it on click.

What do you have so far?

It is pretty active, but how on earth can people debug from an image. Can't you place your page and assets online somewhere?

I do notice that your href=# misses double quotes href="#" and you'll need to block the default behavior of the link with e.preventDefault()

Ohkay... so you did need the !important rule. Oh well, I'm glad we've sorted this one out!

Don't forget to mark this thread as solved!

Yes exactly.

Ok, I see! In navigation.css you have commented out position: relative on #main-nav .vnav__item, but since there is also a position: relative on .vnav__item in vnav.css (which you can't edit), you will need to do this instead in navigation.css.

#main-nav .vnav__item {
    position: static
}

This selector chain has a stronger specificity then the one in vnav.css (vnav.css gets injected later in the source, then navigation.css), so it should be enough to override it.

What I was thinking... if I put a javascript before the navigation... takes the behavior away

I don't know what you mean with this!

So you can't edit vnav.css, but you can edit navigation.css?

My PHP skills are very limited, so you'll have to wait for someone else to jump in :)

For this you'll have to delete the position: relative on .vnav__item in the vnav.css file, which I explained already in another post of mine.

By the way, There are styles applied to that nav which are coming from to 2 different stylesheets (vnav.css and navigation.css). Is this because you use one stylesheet to override styles in the other stylesheet, because you don't have access to that one?

Via a .htaccess file:
Redirect 301 /oldpage.html http://www.example.com/newpage.html

I've used 301 in this example. but this can also be 302. The difference is that a 301 redirect means that the page has moved to a new location, permanently. A 302 redirect means that the move is temporary.

You didn't change it to what I've posted. You have now this:

#main-nav .vnav--horizontal .vnav__subnav {
  left: -360px;
  top: 100%;
  width: 750px;
}

Which should be this:

#main-nav .vnav--horizontal .vnav__subnav {
  left: 50%;
  top: 100%;
  width: 750px;
  margin-left: -375px;
}

Probably because there's nothing to tell at the moment about the hack.summit() and they don't want you to know about previous ones, but who know? Freelancer.com might have the answer for you.

That space is caused by the default top/bottom margin of the p tag, so you might want to add something like this:

#pic p { margin: 0 }

What do you mean with 'textboxes'? For example a div tag, section or article?

If you give it a class center, then every element/tag inside will be centered and red (they inherit the styles if you don't override them).

If you want to keep the player playing while users navigating the site you'll need to resort to AJAX or even better to the HTML5 History API (with AJAX hashbanging as fallback).

Ok, then remove those margin-left's that you've added dynamically and use something like this

#main-nav .vnav--horizontal .vnav__subnav {
  left: 50%;
  top: 100%;
  width: 740px;
  margin-left: -370px;
}

If you can't edit some files then override the properties in a file which you can edit, but the properties that needed to change are in vnav.css and navigation.css.

I see now also that there gets a margin-left: -201px; added dynamically on vnav vnav__subnav vnav--level2. This is weird, because I didn't had this yesterday and I don't know why it's added, but it's pushing the submenu unnecessary to the left.
You might want to override that in your stylesheet with margin-left: auto !important;