Posts by gentlemedia

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.

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

Yes, .htaccess is for Apache servers, but there will definately be a web.config equivalent for IIS. The pages are indeed in PHP, but converting these little snippets to ASP won't be such a hassle I guess.

The directory/file structure you have shoul do the job, but there comes nothing in front of .htaccess. You just save the file in your editor like this and place it indeed in the root directory. As for your onepage website, you will have only an index.php file in your language direcories which then gets something like this:

<?php
$thisLanguage = 'en';
$en = '/en/';
$it = '/it/';
?>

I do have to agree with Diafol. This method is still maintanable if you have 2 languages and not so many pages. If there are more and lots of pages, then I also go now for another solution.

On a side note... if a client wants his/her website in lots of languages, then I ask them if they're able to reply to emails he gets in all these languages. This makes them think and most of the time we end up eventually in only 2 or 3 languages :)

Yeah, Flexbox is a powerful layout module. Combine it in the future with the new Grid layout module and we can finally create any complex layout with minimal code, with a semantic and SEO friendly source order and without hacking our way around stuff.

If you have to support older browsers, there is also a JS polyfill for Flexbox.

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.

In my Chrome console you have this error:
Uncaught TypeError: $(...).ready is not a function

As you have both MooTools (prototype.js) and jQuery on your Joomla site which are using both the dollar sign, you can indeed use the noConflict() method, but than you should use everything else except for the dollar sign. You should do something like this:

jQuery.noConflict();

jQuery(document).ready(function($) {
    // Now you can use the locally-scoped $ in here as an alias to jQuery.
    $('#example').removeClass();
});

Also you load multiple times the jQuery library and migrate files and you do a redirect. The site loaded pretty slow for me, so you might want to check/fix the performance as well.

Tables are monsters in getting a great responsive user experience. For the rest I see lots of tags that are unknown to me, so I can't help you further with that. All I can say is that tables are inflexible as hell. Your menu should be build with an unordered list.

You can leave out the top margins, because a div tag is a block level element and will by default go on one line. The next div will drop below the other. The heights you set will also automatically push down the next div, so no need for the top margins.

For smooth scrolling. you will need some JavaScript. Not necessary 'need', because it can also be done with pure CSS, but works only in modern browsers.

Here's a jQuery snippet, but you will need to include the jQuery library (is a JavaScript library) as well. Just check out the demo source code what you need.

https://css-tricks.com/snippets/jquery/smooth-scrolling/

They can't sit net next to each other, because there is simply no room for it. In your CSS, you have set the ul to a width of 100%, which means it will fill the width of the browser window fully. So it drops to tne next line. If you give the logo div for example a width of 20% and the ul a width of 80%, then they will align next to each other.

Using .change() is more appropriate for changing values such as radio buttons.

$('input[name="optradio"]').change(function() {
  if ($(this).val() == '2') { 
    // disable
  } else {
    // enable
  }
});

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

Just copy the code from that pen and use that or add custom data-attributes to your links and use those values to store in a variable for localStorage.

<a href="#" data-theme="red">red</a>

But easier to copy that pen!

http://codepen.io/concretekiwi/pen/sqtFe

Then you have to store your color setting in a cookie or perhaps to use a more modern way that is HTML5 local storage.

[title=colors] I asume he had to change 'colors' to 'red', 'brown', 'green', etc.

But as mentioned by others it's quicker to load the styles if all the color styles are written in one stylesheet and just to add/remove classes with jQuery on the body tag.

Simple demo: http://codepen.io/gentlemedia/pen/wKdWwG

HTML:

    <button id="red">red</buttton>
    <button id="blue">blue</button>

    <h1>Switching colors</h1>

CSS:

h1 { color: black } /* default color */
body.red h1 { color: red }
body.blue h1 { color: blue }

jQuery:

    $('#red').click(function(){
        $('body').removeClass().addClass('red')
    });

    $('#blue').click(function(){
        $('body').removeClass().addClass('blue')
    });

Of course it works! And looking at the source code of that slider page of yours, I see you didn't added the option in the function.
You have this:

<script>
$(document).ready(function(){
    $('.bxslider').bxSlider();
});
</script>

Which should be this:

<script>
$(document).ready(function(){
    $('.bxslider').bxSlider({
        pager: false
    });
});
</script>

Oh... and usung a doctype is also recommended!

Or set 'pager' to 'false'.

$('.bxslider').bxSlider({
  pager: false
});

http://bxslider.com/options#pager

All you have to do is place your img tag in the HTML without the width and height attributes

<img src="image.jpg" alt="" />

Your CSS will just be like this:

img {
    max-width: 100%;
    height: auto;
}

But resizing your images in the browser smaller for smaller screens like this will keep the filesize of the image the same, so you're serving too large images for smaller devices which takes way much longer too load then if it was sized properly and it cost your, or your clients', customers more data usage and therefore more money to view the webpage on a smartphone. And there are a lot more downsides by just using this simple method.

The way forward is using the picture element and/or scrset and sizes attributes.
https://responsiveimages.org/

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

Why are you adding your own div tags with fixed widths. That's going to lead into layout issues as you've noticed. You built wilt Bootstrap so stick to its grid system. I told you before already, but as usual you don't listen. Same as you didn't listen NOT to use the depricated <center> tag to center content. And using all these <br> tags to space out things is also not the way to go, but has been told to you numerous times as well.

http://www.sitepoint.com/understanding-bootstrap-grid-system/

Here are some solutions that deal with tables on small screens, but each with its own pros and cons. Pick 'n choose!

https://bradfrost.github.io/this-is-responsive/patterns.html#tables

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

You can position elements with CSS wherever you want. The (html) source order of your elements does not has to be the same order visually. In your case the CSS float, left and margin properties positioned the main content and sidebars where you see them on the screen.

It's usually a good thing to have the main content div at the top in the source, because you want to make sure that search engine bots will scan it properly.

so what you suggesting is that I slice my background image to pieces

No, that is not necessary, because you can create that design/layout fully with CSS. No need for sliced images.

See here: http://codepen.io/gentlemedia/full/OVpQNQ/

The HTML & CSS can be seen here: http://codepen.io/gentlemedia/pen/OVpQNQ?editors=110

As you'll see, I let the content dictate the height of the containers with some help of padding to space out things. This way you're much more flexible.

And just read a lot about HTML & CSS. It's really not that hard.
http://www.impressivewebs.com/css-basics

Here's the full code of that demo. Apologies for the unreadability. I did indent the code, but for some reason it doesn't show up fully indented.

<!doctype html>
<html>

<head>

<style>

    .gallery {
      position: relative;
      margin: 200px;
    }

    .gallery img {
      position: absolute;
      z-index: 0;
    }

    .gallery img:nth-child(1) {
      left: -25px;
      transform: rotate(-7deg)
    }

    .gallery img:nth-child(3) {
      left: 25px;
      transform: rotate(7deg)  
    }

    .gallery img.active {
      z-index: 10;
    }

</style>

</head>

<body>

    <div class="gallery">
        <img src="http://placehold.it/200x250/3ebecc/000000&text=image+1">
        <img src="http://placehold.it/200x250/4eb7a3/000000&text=image+2">
        <img src="http://placehold.it/200x250/c6b654/000000&text=image+3">

    </div>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(function() {
            $('img').mouseenter(function() {
                $(this).addClass('active').siblings().removeClass('active')
            });
        });
    </script>

</body>

</html>

With jQuery you can do something like this:

$(function() {
  $('img').mouseenter(function() {
    $(this).addClass('active').siblings().removeClass('active')
  });
});

The .active class has the higher z-index in your CSS.

Little demo: http://cssdeck.com/labs/full/jwprgxso

U wrote too much. btw i ddint find anything about traffic

You could also respect his time and say: "Thank you!"

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.

header.php should only contain the code/mark-up that is for your menu, Thus no doctype, no head, no html and no body tags, just only the relvant code/mark-up for you menu. Do you have it like that?

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.

What's with all the duplicate threads???

Looki into CSS media queries.

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/

Glad you've sorted it out! You can also get rid of this CSS kung-fu :) because without it, it looks the same. Just delete the whole CSS block and you will see!

#logo {
  height: 0px;
  width: 860px;
  padding: 0em 0em 27.5em 0em;
}

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.

Why would you want to edit your HTML in a photo editor? It's not possible by the way, but how did you edit your HTML before then? Web designers do design website comps/mock-ups or assets in Photoshop and you could in the old days export your design to (bloated) HTML with it, but what you want is not done before :)

Or do you mean with 'editing' the content (text, images, etc.) of that HTML file?

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

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 }

Ohkay... I see :) You mean an input field.

Using classes or the element/tag name itself (in some cases) to hook your external styles on instead of inline styles, is indeed the the way to go, because you're repeating now styles, which makes maintaining the site more work and the HTML looks messy (according to code artists :) ).

I would do your example like this:

HTML

/* label for accessibility */
<label for="username">Username:</label>
<input type="text" name="username" />

CSS:

input[type=text],
label { display: block }

input[type=text] {
    width:196px;
    margin-bottom: 10px;
    background-color: #414141;
    color: #FFF
}

In case you need or want to support IE8 and below, you could use this CSS for the img instead.

.square img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto
}

Demo: http://cssdeck.com/labs/full/sosfzstu