Posts by gentlemedia

The reason for that error was my adBlocker was blocking that script, so I don't think that had something to do with your issue. Unless you use also an adBlocker.

Indeed it works! One thing is I see that you point to the index.php file in your language variables or not? I believe you have a structure like this $en = '/en/index.php'; but that can be just like this $en = '/en/'; The request will automaticaly open the index file.

Not sure what you mean with url change at some point! If you don't have multiple languages, than you don't need the language directories.

As you have a single page website, then rename home.php to index.php. Like this your URLs just become www.example.com/en/ and www.example.com/it/

index.php in 'en' folder will get this:

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

and index.php in your 'it' folder this:

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

That last script you're talking about is the language nav and just place it where you want it to appear on your page. I believe in your languageSelection div? Then style it with some CSS.

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 :)

Okay, here's what I had!

The language nav is like so:

<?php
    echo '<ul class="lang-nav">';
    if ($thisLanguage=='it') echo '<li class="current"><a href="#">IT</a></li><li><a href="' . $en. '">EN</a></li>';
    if ($thisLanguage=='en') echo '<li><a href="' . $it. '">IT</a></li><li class="current"><a href="#">EN</a></li>';
    echo '</ul>';
?>

.htaccess redirect to the subdirectories with 'en' as default:

#language redirects
RewriteEngine on
RewriteCond %{HTTP:Accept-Language} ^it [NC]
RewriteRule ^$ /it/ [L,R=301]
RewriteRule ^$ /en/ [L,R=301]

On the pages itself at the top before the doctype you will have the following PHP.
Let's say page.php in 'en' subdirectory will get this:

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

and the Italian version, pagina.php, in 'it' subdirectory gets this:

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

It's all very simple as you can see and to see it working in its full glory :) visit the following website:
http://armada-amsterdam.com/

I did something similar in the past for a client with PHP and .htaccess. There are ways to have all your languages in the page(s), but I had subdirectories like so www.example.com/en/, www.example.com/de/ etc. but this can also be subdomains of course. I will look for the necessary scripts and will post back.

IMO detecting the users' language set in his/her browser is a more user friendly way to redirect, then based on the location.

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.

I see this in the console:
Failed to load resource: net::ERR_BLOCKED_BY_CLIENT - https://www.google.com/ads/ga-audiences?v=1&aip=1&t=sr&_r=4&tid=UA-46599585-1&cid=641821180.1448372359&jid=129595669&_v=5.6.7&z=1853167200
But I'm not totally sure if this is the cause of your issue.

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.

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.

Thanks guys... a decent SSL certificate is indeed pretty cheap nowadays, so money is not the issue here. I'm also trying to figure out what other steps I have to do... did some research and found subjects about caching & performance. Initially I read it is slower then http, but I also read, if configured right, https can even be faster for visitors with a modern browser. Anyway... I think I might just go for it with this client.

I was wondering if it's really necessary to have an SSL certificate and therefore https for a webshop (WordPress & WooCommerce) where payments will only be handled via external payment gateways (their bank and paypal). But they do store personal information, account and login from their customers on their own web server. Is it for this reason alone wise or even recommended to have an SSL certificate to have their website over https?

The paths to your CSS file and to the image indicates that they're in the same directory. Do you have them in the same directoryt?

Aight.... that did work indeed. I had double percentage symbols, so I have now this line instead $percentage = round($discount) . '';

Yeah, sorry, I was confused :) ... those are of course jQuery methods. I will try your solution and see if it works!

I get also percentages like 33,3% and I would like to have it as 33%. I know the answer should be somewhere within the methods parseInt() or parseFloat(), but don't know how. I also tried to find a jQuery solution, but no luck so far.

Sorry for the vague title, but I'm using a PHP snippet on a WooCommerce shop which shows the difference between an old price and a new price (sale price) in a percentage bubble on the page. The thing is it shows also percentages with decimals behind a comma if it's not a round number. I would like to have it without the comma and decimals, so that it always shows a round number. How would I alter this in the below script? There are 2 variations in it by the way. One is for a single price and the other for a variable price (e.g. different sizes or colors of a product).

<?php if ($product->is_on_sale() && $product->product_type == 'variable') : ?> <div class="bubble"> <div class="inside"> <div class="inside-text"> <?php 
            $available_variations = $product->get_available_variations();                               
            $maximumper = 0;
            for ($i = 0; $i < count($available_variations); ++$i) {
                $variation_id=$available_variations[$i]['variation_id'];
                $variable_product1= new WC_Product_Variation( $variation_id );
                $regular_price = $variable_product1 ->regular_price;
                $sales_price = $variable_product1 ->sale_price;
                $percentage= round((( ( $regular_price - $sales_price ) / $regular_price ) * 100),1) ;
                    if ($percentage > $maximumper) {
                        $maximumper = $percentage;
                    }
                }
                echo $price . sprintf( __('%s', 'woocommerce' ), $maximumper . '%' ); ?></div> </div> </div><!-- end callout --> <?php elseif($product->is_on_sale() && $product->product_type == 'simple') : ?> <div class="bubble"> <div class="inside"> <div class="inside-text"> <?php 
                $percentage = round( ( ( $product->regular_price - $product->sale_price ) / $product->regular_price ) * 100 );
                echo $price . sprintf( __('%s', 'woocommerce' ), $percentage . '%' ); ?></div> </div> </div><!-- end bubble --> <?php endif; ?> 

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

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

So... what's the problem? I can see you're trying to align the text next to the image with some CSS kung-fu, but what other parts are you talking about?

Yeah, by not using framesets!
I don't know what you are loading in that frameset, but you can load/switch content in a div tag (for example) with AJAX (plus perhaps HTML5 History API for better UX).

The option tag doesn't have a href and a target attribute.

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?

I would say if you have already some device stats from visitors (e.g. via Google Analytics) then design/develop for those devices/operating systems that's used the most.
if you don't have access to a device/operating system that you need to support, you could try to find an OpenDeviceLab near you.
https://opendevicelab.com/
In your case: https://opendevicelab.com/#!odl=1283 :)

How does this work wonders for you? How do you know that their directories are listed in Google and if so do they have high pageranks, are they relevant to your niche, are they high quality directories, do they get regulary updated, do they get edited and reviewed by editors and reviewers and do they have preserved link juice?

Othewise it won't do much nowadays... it might even hurt your SEO!

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

There are 2 things that are important in order to make images fluid:
1. don't declare width and height attributes on the img tag in the HTML
2. put the following CSS block in your stylesheet

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

The first one you do follow, but the second I don't see in your CSS.

There is now actually more to it, becaue this CSS trick was the only trick we had before the official responsive images technique was developed. This because scaling large desktop images down for smaller screens is for several reasons not such a good thing to do.
https://responsiveimages.org/

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

Each option has its own pros and cons and which one to choose has to do with how you want to reach your objectives & goals (user and business wise).

You've got with that codepen example everything you need in order to get this working.

Of course you can use bootstrap and even inside the slides if you know what you're doing. But you just use the HTML structure that's provided in the getting started section of that Flickity website.

<div class="main-gallery">
  <div class="gallery-cell">...</div>
  <div class="gallery-cell">...</div>
  <div class="gallery-cell">...</div>
</div>

Where the dots are you place your images.

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!

Better to seal a good & solid deal with your clients which means contract with scope and agreeing to some down payment schedule before you start working on the phases of the project..

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

You miss in that CSS block the periods in front of the classnames fa-plus2 and fa-minus2.

You shouldn't use the Bootstrap grid and its classes inside the .gallery div. If you read the instructions then you will see how the HTML and the associated classes for the styles in flickity-docs.css should look like.

http://flickity.metafizzy.co/#getting-started

In which file to find the: @font-face ?

At the top of this stylesheet:
http://www.innovation.web.id/One/arrow.css

But... do you see on your local setup the icons? Because on that live page they're not in front of the question. You either forgot to upload the font files or the path in the stylesheet is wrong.

And indeed, sort out your server issues... there must be better hosting providers with faster servers in Indonesia, than this crappy one you have now.

After waiting 1 minute for that page to load, I see no font awesome icon in front of the fag questions. Check your path to the @font-face files (fonts).

If that is fixed, then you could change the color like so:

.fa-plus:before, .fa-minus:before {
    color: blue
}

You should not using fixed widths (in pixels) with responsive web design. Fixed heights was before responsive web design already not feasible and flexible to use, because you should let the content dicate the height of your boxes/containers.

The grid/layout should be flexible which means you use widths in percentages and you don't declare width and height attributes on your img tags. Your images should also be fluid so all you do (for now) in your CSS is this:

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

According to your layout you have two containers next to each other, but if the screen gets too narrow / too small for this, you will have to drop the containers underneath each other which you can do by setting breakpoints with CSS media queries.

Also you need to have a special meta tag in your head to avoid that your web page gets scaled down and your user have to pinch and zoom to view/read it properly.

<meta name="viewport" content="width=device-width, initial-scale=1">

These are just some of the basic principles of reponsive web design, but there are more and I'd recommend you to just learn them before you start developing anything.

https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/

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

Indeed! Those slider images are huge!!! Optimize them if you want people to stay on that 'website'.

Not sure why you have them, but somewhere in style.css you have this:

.yellow, .grey, .red, .classy {
    padding: 8px;
}

Which is the space you see by 'yellow' and 'red'.

Use 'inspect element' in the browser and you can figure these things out yourself.

That's because you remove all classes with .removeClass() so the class .navbar-inverse will also removed.

So better to add/remove the color classes on the body tag like in my example and then use those to change the nav colors.

body.brown .navbar-inverse {
    /* brown */   
    background-color:#c08663l
    border-color:#c08663;
}
body.red .navbar-inverse {
    /* red */  
    background-color:#ff005c;
    border-color:#ff005c;
}



$('#link1').click(function(e){
    e.preventDefault();
    $('body').removeClass().addClass('brown')
});

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

$('navbar-inverse') should be $('.navbar-inverse')