Posts by gentlemedia

Why are you using now both methods (Cereal's and mine) in your jQuery function.
Delete all the

$('link[rel=stylesheet][title=colors]').attr('href', 'bootstrap-3.3.5/css/custom.css');

Also to be sure... do you call for the jQuery library like below?

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

@cereal - Oh well... now he can choose. But it seemed Davy got totally lost with it (again) :)

Oh... you can indeed select on attributes, but it's slower and you can also give the <link> tag an id and then target that id.

[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!

Cereal is right... your paths to the CSS files are wrong. Should be this:
href="/Oke/css/default.css"
or this (no absolute, but a relative path):
href="css/default.css"

And the same goes for the paths to your colour stylesheets.

No, Pritaeas meant there is an error in your function. Compare yours with my example and spot the difference!

And your slider is the BXslider by the way hence the name of the function.

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/

Hard to tell without seeing any code. Do you initialize the function also on .resize()?

I've re-read this thread numerous times and still trying to get my head around the thing that you want to do with this.

Pseudo elements are indeed not injected into the DOM, but you can access or reach them via JavaScript/jQuery but not for the reason you want (I assume).

Here's one option that can solve some problems:
http://davidwalsh.name/pseudo-element

And you can pass on custom data-attribute values to the content property which you then also can alter via JavaScript (.dataset)
http://tiffanybbrown.com/2014/11/using-attr-with-pseudo-elements-and-javascript/

Unfortunately I can't write a pseudo-element as a HTML tag

No, but then why not writing a HTML element instead of using a pseudo element?

Here's a nice 'pure CSS Style Switcher' tutorial using radio buttons (:checked)
http://www.sitepoint.com/building-style-switcher-with-pure-css-using-checked/

Ok, I got it fixed!
I've used a config.php which sits in the 'projects' directory and has <?php define('PUBLIC_URI', '/projects/ecwc/concept/' ); ?> in it.
I then include it on every page with relative paths like so <?php include '../../config.php'; ?> (example from index.php).
The links in the navigation are like this: <a href="<?php echo PUBLIC_URI.'about/organisation'; ?>">Organisation</a>

@diafol - The error before was because I needed to write 'PUBLIC_WORD' (I've chosen URI for that word) . It needs to be for whatever reason a word-underscore-word if I'm right.

Hi Diafol, I don't have a config file setup... should I?
I've tried your method by including it at the top of every page like:
<?php define('PUBLIC', '/projects/ecwc/concept/' ); ?>
But now it stops rendering the HTML where the navigation shoud appear, so is there an error in <?php echo PUBLIC .'about/organisation.php'; ?> somehow?

I'm trying to get the right path and so far I have this which kind of works, but not if the file is in a sub directory.
These links I have in my navigation:

<ul>
    <li><a href="<?php echo $_SERVER['DOCUMENT_URI'].'about/organisation.php'; ?>">Organisation</a></li>
    <li><a href="<?php echo $_SERVER['DOCUMENT_URI'].'about/team.php'; ?>">Team</a></li>
</ul>

This works from my index.php , but not from organisation.php and team.php in the 'about' directory. If I want to open 'team.php from within organisation.php, I get an URL in the address bar like this:

http://localhost:8888/projects/ecwc/concept/about/about/team.php

As you can see I get 'about' twice, so what is the right way to tackle this issue?

EDIT:
Worth to mention that I use a PHP include to add the navigation on every page, so I can't change the links, becaue I could solve it by excluding about/ if I didn't use a PHP include for the navigation.
<a href="<?php echo $_SERVER['DOCUMENT_URI'].'team.php'; ?>">Team</a>

I will close this thread by marking it as solved, because the real issue has nothing to do with .htaccess. Would be handy to have an option to close a thread instead tho.

Thanks Cereal, but I was totally wrong witn my previous thinking. I just need to look for the solution in PHP and have now something like this with my paths:

<a href="<?php echo $_SERVER['REQUEST_URI'].'about/organisation.php'; ?>">Organisation</a>

But this doesn't work with files from within a sub directory.

Hi guys & dolls,

I'm working on a website locally with MAMP and the directory tree is the same then that of the dev directory on my web server.
projects --> ecwc --> concept

But I've set the 'projects' directory on my webserver as a subdomain and this screws up my links.
Locally I have to create links like this: /projects/ecwc/concept/about/organisation.php
and for on my webserver they have to be like this: /ecwc/concept/about/organisation.php

Is it possible to set the 'concept' directory as a root directory with htaccess (htaccess file is in 'concept' directory) so that I can just create links like: /about/organisation.php? Like this will also be eventually the links for on the live server (in public_html), so I don't have to change anything.

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/

Put the jQuery function before the closing body tag or wrap it in a document ready.

I don't know why you've pasted the snippet 3 times in here, but it's a jQuery function so dou you load the jQuery library on the page as well?

https://www.google.com/#q=show/hide+faq+with+jquery

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

Is <center> element obsolete?

This has been told to you numerous times here on Daniweb, but you don't listen!

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.

Here's another one which polyfills all the way down to IE6 (as hashbang URLs) if you want.

https://github.com/devote/HTML5-History-API

Demo:
http://docs.spb-piksel.ru/demos/history/

div #icons can never reach the full width of the browser window, because it's placed in a div that has a width of 1000px, so div #icons will also get a maximun width of 1000px.

You use bootstrap, so stick with the way bootstrap advices you how to handle the grid. Don't just do whatever comes up in your mind if you don't know what you're doing.

There's a module to block bad bots. You might want to try something like this:

Options All -Indexes
RewriteEngine on

<IfModule mod_setenvif.c>
SetEnvIfNoCase User-Agent "^bot.*" bad_bot
<Limit GET POST PUT>
    Order Allow,Deny
    Allow from all
    Deny from env=bad_bot
</Limit>
</IfModule>

Here's some info and a huge list of bad bots:
http://www.allthingsdemocrat.com/htaccess-security-and-the-largest-block-bots-list-on-the-web/

Diafol gave you already the advise to start learnng HTML & CSS, because you reaaly have to. There are too many things wrong in that HTML of yours. Learn to walk first, before you start running. If you don't understand the basics, you'll keep hitting wall after wall after wall!

http://learn.shayhowe.com/html-css/

It's a tutorial with step by step explanation how to create that and you can download the demo files. What don't you get?

I took the function out of the document ready function and now it toggles the class properly.

Kudos to myself... do I also get rewarded by solving my own questions? :)

I replicated the situaion in a pen and there it toggles the class on the parent, so there's a conflict with something else on my page.

I'm trying by clicking on a button to toggle a class on a parent element which is 5 levels higher, so I though that this would do the trick:

$('.btn-list').click(function() {
    $(this).parents('.mix-serie').toggleClass('animate')
});

But unfortunately it didn't, but if I just add a class,

$('.btn-list').click(function() {
    $(this).parents('.mix-serie').addClass('animate')
});

it does!

Then I thought doing it with .toggle() instead of .click()like this:

$('.btn-list').toggle(function() {
    $(this).parents('.mix-serie').addClass('animate')
}, function() {
    $(this).parents('.mix-serie').removeClass('animate')
});

But again no luck! So what's going on?

I'm on Google on the Mac and I have no errors in the console re this (there's 1, but is related to something else and is IE specific).

You're using bootstrap responsive, but you drop in divisions (divs) with fixed (pixel based) widths and heights (with inline styles, which is also a terrible thing to do).

One of the fundamental principals of Responsive Web Design is fluid (percentage based) widths.

That HTML became quite a mess. There's a lot going wrong in there.

• There's no <head> tag
• If you use a method like this to preload your images, there's no need for other attributes. Only src with the path to the image, but better to look into lazyloading.
• link tags to a stylesheet and your favicon are in your header. Should be inside the <head>
• Don't use HTML attributes like align & font. Use CSS (margin, padding, float or position) to position your elements/content and set your font color and size through CSS too. These HTML attributes are deprecated, because we have CSS to handle this.
• The same goes for   and <br> tag. CSS!!!!
• Don't inline your CSS (style=""). Use your external stylesheet for your styles.

Re your question. There are several ways to do that and it also depends on the type of content which HTML elements or tags to use.

But you will need to read up on CSS floats and again on block-level and inline elements. If you know the difference netween te last two, then you know what to do. If an element is by default an inline alement (such as the img tag (see for reference) ) and you want it to be a block-level element then you can change it through CSS to block (display: block).

Don't use &nbsp or <br> to space out your elements. Use the CSS properties margin and/or padding for this. Everything presentational should be handled through CSS.
I don't know exactly what you want to achieve and how your HTML is for that image and text. Can you post your code

just keen to use youtube because it normally solves so many of those pesky video problems

I know what you're saying and 3 years ago that was a fact, but today the video tag is a pretty solid solution with greater control and your users don't have to wait untill finally that YouTube vid is loaded into that iFrame :)

And also remember that autostart is not supported on iDevices.

If you use the HTML5 video tag instead of loading a youtube vid into an iframe you can have your own control buttons placed ontop of the video, especially the volume control in your case :).

This might get you started:
http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video

Other options (js/html5 video based):
http://dfcb.github.io/BigVideo.js/ or http://syddev.com/jquery.videoBG/

Just use your image as a background image via CSS, maybe directly on the wrapper of that slider or create a new wrap element (div tag / division) for it if necessary.

What about vertical spacing between paragraphy. Wouldn't it be funny if I have use css?

Pargraph tags and all the other HTML tags and elements as well has by default already some CSS applied (source: http://www.w3.org/TR/CSS2/sample.html). The paragraph tag has by default a top & bottom margins, but if yoou use quite an aggressive CSS reset like the one from Eric Meyer, and you do as I've seen in another thread of yours, then those margins are set to '0' in the CSS reset.

So if you want spacing between all your paragraphs, you will have to set some margins again in your own styles on the p tag.

But.. it's better to look into normalize.css instead of Eric Meyer's CSS reset. Some CSS defaults are usefull and some are just a pain in the arse or are inconsistent between the different browsers. Normalize.css takes care of only the latter.
http://necolas.github.io/normalize.css/

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

You will have to define first the building blocks (HTML elements and/or tags), so something like this:

wrapper for layout to center it on the page --> <body> tag (it's perfectly fine IMO to use the body tag as a wrapper... why throw in an extra element, while it's not necessary) or <div> tag

purple top section --> <header> element

white stroke with menu inside --> <nav role=navigation"> nav element

menu --> <ul> element

main content section --> <section role="main"> section element

purple bottom section --> <footer> element

Those main elements (containers) that you'll place inside the wrapper are all block-level elements, so you don't need much CSS positioning for them. You can just use the document flow in order to get the layout of that Coral Draw image.

The markup (HTML) for the layout would be then this:

<body>

    <header>

        <!-- logo and social media icons go in here -->

    </header>

    <nav role="navigation">

        <ul>

            <li><a href="#">home</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">products</a></li>
            <li><a href="#">order</a></li>
            <li><a href="#">contact</a></li>

        </ul>

    </nav>

    <section role="main">

        <!-- main content area -->

    </section>

    <footer>

        <!-- copyright stuff -->

    </footer>

</body>

Stay tuned for Part 2 - CSS :)

Jokings aside... just paste this in an empty web page first, play around with it, and I will get back at you with some simple CSS.

The problem lies in the fact that you dropped in what is supposed to be your layout created with HTML tags & styled with CSS as a backgroud image.

You will have to convert that first to HTML & CSS before you want to add your content (navigation, logo, etc.) and to be honest it's a fairly simple layout to create only with HTML & CSS (no need for images), so it's a good way to start learning the trade.

So if I'm right then in the HTML output/source order the label element is before the input tag?
Like that you can't select the label with CSS. Either place the label after the input or use JS/jQuery to select the label.

jQuery:

$(function() {
    $('input:radio[name="sex"]').change(function() {
        if (this.checked) {
          $(this).prev('label').addClass('active').siblings('label').removeClass('active')
        }
    });
});

CSS:

label.active { background-color: #FFFF00 }

https://jsfiddle.net/gentlemedia/g1b57rew/

What are your skills?

The HTML alone doesn't tell anything. We need to see at least the CSS with it, but I (can't speak for others) prefer to see the whole page pnline somewhere. It saves a lot of time with debugging. Do you have a link to the webpage?

It's pretty much copy/paste what you have to do and fill it with your content/items and try to understand what you copy/paste, so you learn from it.

It might be also a good idea to start with integrating simple jQuery plugins first before you dive into plugins such as Isotope. I get the idea it's way over your head all this. A good understanding of the basic principles of HTML & CSS is a must too.

Can you post your page online somewhere?

And it's more likely you want to filter the portfolio items with Isotope instead of to sort them.