Posts by gentlemedia

@Matrixdevuk - I see now you also changed the HTML by wrapping 'Log In' into span tags, but the OP said he did not wanted to alter the HTML.

Your #content div. Why did you made it so high (1560px)?
I understand what you were after, but then you could better use the default scrollbar (on the body) and give your header a fixed position, so that the navigation stays on top while scrolling the page.

In which browser (version) you have this issue? I checked in Chrome on the Mac and I can scroll down on the work page.

Edit: I do see that the scroll area is taller then the page so I don't get all the work items in view, so that's a bit weird.

@JorgeM - Good point about 'arrive at the solution on your own' and I was not sure if you tipped the !important as the solution or just as a quick check, so therefore my post.

@berserk - Just read more about specificity, because that is next to the CSS box-modal a basic, but fundamental part of CSS. In short; don't get too specific with your selectors and try even to avoid using id's as CSS selectors if you can.

I know it's marked as solved, but I think adding !important is a bit too easy to solve this. I mean with easy... adding !important should be your last resort and only if you really have to.

I know now what you were suffering from and that is specificity, because you defined on two spots in your stylesheet, styles to the sub menu. At the top you have a CSS block which includes #cssmenu ul which is also your submenu. To this rule there is a position: relative declared and because #cssmenu ul has a higher specificity then .sub-menu (id + element is stronger then a class) you could not override it with position: absolute unless you throw an !important into the mix :)

So, now you know what the root of the problem was. Or you fix your specificity issue or you leave the important rule :)

In the CSS snippet here on line 19 there's a z-index set to '1'.
Change this to a higher value... for example 1000 to see if will stay on top of your other content.

Well, I don't see a class 'navbar-default' assigned to the mark-up of that nav, so it's obvious it's not dong anything.

Use the browser developer tools to investigate (in the CSS panel) on which element the grey background-colour is set. Otherwise upload everything to a web server and give us a link, so we can investigate for you.

Not sure why the link to the unminify tool gets a strikethrough and a message that it is a broken link.
It's a working link, so just follow it if you want to unminify!

You can't change it through your markup. You need a hacked solution. There are quites some workarounds either through CSS or JS, but each with their own pros and cons... Google it and you shall find.

How to unminify the stylesheet?

http://unminify.com/ Paste the minified CSS and click button 'unminify'.

You can try these links:
https://medium.com/@dustin/stock-photos-that-dont-suck-62ae4bcbe01b

http://bootstrapbay.com/blog/free-stock-photos/

http://mediamilitia.com/250-free-stock-photography-sites/

And of course flickr creative commons section.

The grey background color is set in the bootstrap stylesheets linked at the top and is probably set to another element then div 'container'.

My advise is not to set CSS styles in the HTML tags (inline CSS), but use an external stylesheet.
The bootstrap.min.css is minified, so if the background color is set in this stylesheet, you will have to unminify the stylesheet first in order to edit it.

You can also override it in custom.css, but then you have to first look with the browsers' inbuild developer tools (right mouse click --> inspect element) on which element the grey background color is set.

@JorgeM - actually your snippet is the one that works beautifully... not mine :( going to look into this.

EDIT: Your solution is the way to go to handle its children!

There's no script that brings HTMl5 & CSS3 support to IE6, 7 & 8.
Like I said there are polyfills for certain HTML5 & CSS3 features/properties (lots of them), but it would be crazy if you polyfill every feature/property you use. This would be too much for old IE and would make your site load/running super slow in these browsers or make them even crash :).

Anyways... the trick with Modernizr is that you can load a polyfill only for browsers that need them.
But ask your self is it worth. For example I don't polyfill rounded corners or box-shadows.
With Modernizr you can also create easily fallback solutions in your CSS, because it adds also classes to your HTML tag.
In browsers that don't support rgba() for example, it will add a class no-rgba.
In your CSS you can do then something like this:

.element { background: rgba(0,0,0,.5) }
.no-rgba .element { background: url('img/black-opacity50.png') }

With this you serve a transparent png to browsers that don't support rgba().

Indeed! This would change also the text from its children. You don't want that of course :)

Then you could look for an exact match of the word 'Log In' with something like this:

$(function() {
    $(".wbp_wrapper").text(function(i, oldText) {
        return oldText === "Log In" ? "New Text" : oldText;
    });
});

Modernizr is only for feature detection and does not add for example rounded corners to your element in browsers that doesn't support this CSS3 property.
If you want rounded corners in those browsers, you will have to use a (javascript) polyfill, such as CSS3pie.

What you do with Modernizr is asking the browser:
Hey, do you support border-radius?
Browser A: yes
Modernizr: Cool, here's some fancy rounded CSS3 corners for you.
Browser B (old IE): No!
Modernizr: Don't worry... I've got you covered! Here, you load PIE.js and run this function.

In scripting this would be something like this:

Modernizr.load({

    test: Modernizr.cssborderradius,
    nope: '/js/PIE.js',

    complete : function () {
        if (window.PIE) {
            $('.rounded').each(function() {
                PIE.attach(this);
            });
        }
    }

});

If you use jQuery you can use the .text() method to change 'log In' to whatever you want. The following will change 'Log In' to 'New text'.

$(function() {
    $(".wpb_wrapper").text("New text");
});

With vanilla JavaScript you could do something like this:

var text = document.getElementsByClassName("wpb_wrapper");
text.innerHTML = "New text";

Better to use the Google Maps JavaScript API to include your maps on the page?
https://developers.google.com/maps/documentation/javascript/
Your maps gets then drawn with canvas instead of images.
Makes zooming in/out much faster and you can do then all kinds of nice things with your maps, such as changing the colours; https://snazzymaps.com/

@diafol - using a CSS preprocessor will save you time for sure on large scale projects, but after compiling your mixins, extends and nesting, it can do more harm then good to your CSS architecture (code duplication, tight coupling and specificity).

@diafol - I thought so, but was not sure. :)

Okay, to be more precise then :)

'embedded' CSS is CSS between style tags in the <head>

<head>
<title>Document Title</title>
<style type="text/css">

div { background-color: blue }

</style>
</head>

'inline' CSS is CSS within style tags straight into the HTML tag

<div style="background-color: blue">

    <!--- content here -->

</div>

How nested CSS, which doesn't exist as a standard, but can be used if you write your CSS with a preprocessor such as SASS or LESS, (might) look like, is shown in the link I posted.

To add styling to XML tags, you would use an external CSS file which you call at the top of your XML document like so:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="list.css"?>

But... as far as I know you can't style those attributes seperatly as in your example.

You can style the <list> and <ControlSegment /> as a whole, but if you want to style those attributes seperatly, they have to be in there own XML tags.

http://www.xmlplease.com/xmlcss

Hope this helps a bit!

@michael.james.90475 - No, that's called inline CSS.

Nested CSS is at the moment only possible with a CSS preprocessor, but it might be in the future eventually possible within pure CSS.

http://tabatkins.github.io/specs/css-nesting/

Be aware that by adding or changing code in core files there is the risk that you'll lose it when there is a Joomla update. By a complete version upgrade you will definitely loose your changes.

If you need to make changes to modules and layout files, you will need to make a copy from the file and add those changes in there and place it in a 'html' directory in your template directory, so that you override the original core file.

https://docs.joomla.org/Understanding_Output_Overrides

Thanks, that made things much more clear to me.
Errr... that markup is a bit messy :)
div .list-footer or div .limit doesn't get closed properly.
There's only an opening ulbut for the rest there are no list items (li), but on your image I see them, so this is a mystery to me too and lastly at the end there's only an opening tbody.

No wonder you have display issues. Somewhere in a PHP function that builds up the HTML for that pagination it goes wrong. But also the table used for the layout has missing closing elements.

There are tools to share an URL from your local server.
https://ngrok.com/

Anyways... It's hard to debug with the information you posted. You have to look which class gets added to the unordered list and use that as CSS hook to align the items (either by using float, display: inline or display: inline-block).

The table cell which is holding the navigation spans 8 columns so it shoud be wide enough, but by using tables for layout might give you more layout issues along the way.

It's hard to say from an image why it doesn't line up next to each other, but as far as I can see what happens is that the page nav is marked-up with an unordered list, but is unstyled (or has still the default styling... hence the vertical alignment and the bullets).

Also the PHP echo says 'get pagenav out of function getListFooter()', but you post the PHP here of function getJobList().

Can you share a link with us to that page, because it's a CSS issue anyway and we need to see what eventually the HTML output is in order to track the problem and solve it.

Aha... that was indeed needed... "undefined" is gone now.
Thanks for this and although the snippet looks more terrifying now then what I had, I assume it's better like this :)
for loop, counter, num, method... they're all new to me.

Cheers!

Thanks for the explanation and for a second alternative for the last bit. I will try that too.

I implemented the first code snippet of yours by the way and it does append and prepend the li's, but it adds also dynamically twice, before the first of the five li's, a text node "undefined"

"undefined"
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

So I'm not sure why that happens.

Yeah 'elegant' was a bad way to describe what I was looking for I guess :)

Nonetheless, I was looking for something more programmatical (another weird way to describe it), kind of like you wrote here now... haha
This is where I fall short... I know how to traverse the DOM with jQuery to select the elements I want to select and do simple functions, but when it comes to real programming I'm a total noob :)

Thanks for this snippet and I will try to understand what is going on in there!

Hi,

This will do the job, but it's ugly, so how to do this more elegant?

$('ul').prepend('<li></li><li></li><li></li><li></li><li></li>');
$('ul').append('<li></li><li></li><li></li><li></li><li></li>');

Thanks in advance!

Awesome! Glad it's sorted.

Are these sections in the element with the class 'wrapper'? Do you load all the files that are needed?
https://github.com/alvarotrigo/fullPage.js#including-files

Can't tell much with only those pieces of HTML and jQuery you've posted here. Can you put the page online somewhere?

In responsive websites normally we would use % for layout dimensions and em (or even rem units depending on your targeted browsers) for the fontsizes. em or rem is handy bacause it's easy to scale down or bump up fontsizes in elements relative to their parent(s). It's also recommended to set your media querries in em's instead of px.
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

One of the best things to use in responsive web design is putting the following in your CSS reset.

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

This will override the default CSS box-modal (box-sizing: content-box) in the browsers, so that borders and paddings are calculated inside all elements instead of outside. This was for me really a life saver in RWD.

If you had 3 elements in a row equally set to 33.3333333333% width and you wanted a 1px border around them, then this would force the 3rd element to drop to the next line, but with box-sizing: border-box; you don't have this problem and will save you a lot of math and trouble.

There's a download button at the top, which reveals a sub menu with the CSS files (a bootstrap.css for development and bootstrap.min.css for production). If you're familliar with CSS preprocessors then you can choose the others in the submenu, but I assume you don't use a preprocessor, so you need the first two.

Then replace the default css files that comes with the bootstrap download (http://getbootstrap.com/) with these ones.

If you want to nest CSS blocks, you will need to write your CSS with a CSS preprocessor like SASS or LESS.

Not sure what you want to make orange, but you have on line 18 a CSS block in another CSS block. That is not going to work.
Take it out of that CSS block.

.nstyle {
    backgroud-color: black;
    color: orange;
    margin:20px;
    padding:20px;
}

.nstyle nav a:link { color: orange; }

You will need AJAX/jQuery for this. I did a quick google and found a tut for you that query a database to display text in a tooltip. Not exactly what you want, but at least you have a starting point.

http://www.jacobtomlinson.co.uk/2012/09/11/ajax-database-tooltip/

Well, let me answer my own question, because I figured it out :)
This will do the trick:

var $dt = $('.index').find('time').attr('datetime');

$('.weeks').find('time').filter(function(){ 
    return $(this).attr('datetime').match($dt) 
});

I have several pages that has the following mark-up in it, but the value of the datetime attribute is on each page different.

<a class="index" href="#">

    <time datetime="2015-W01">

        <strong>week</strong>
        <strong>01</strong>
        <strong>2015</strong>

    </time>

</a>

On each page I include with PHP at the bottom a page with the following mark-up:

<ul class="weeks">

    <li>

        <a class="ajax" href="<?php echo _LINK_PATH;?>tracks-sets-03-2015">

            <time datetime="2015-W03">

                <strong>week</strong>
                <strong>03</strong>
                <strong>2015</strong>

            </time>

            <ol>

                <li>artist 01</li>
                <li>artist 02</li>
                <li>artist 03</li>
                <li>artist 04</li>
                <li>artist 05</li>

            </ol>

        </a>

    </li>
    <li>

        <a class="ajax" href="<?php echo _LINK_PATH;?>tracks-sets-02-2015">

            <time datetime="2015-W02">

                <strong>week</strong>
                <strong>02</strong>
                <strong>2015</strong>

            </time>

            <ol>

                <li>Hill Classics</li>
                <li>Colman Brothers</li>
                <li>Vicktor Taiwò</li>
                <li>Leftside Wobble</li>
                <li>Mo Kolours</li>

            </ol>

        </a>

    </li>
    <li>

        <a class="ajax" href="<?php echo _LINK_PATH;?>tracks-sets-01-2015">

            <time datetime="2015-W01">

                <strong>week</strong>
                <strong>01</strong>
                <strong>2015</strong>

            </time>

            <ol>

                <li>artist 01</li>
                <li>artist 02</li>
                <li>artist 03</li>
                <li>artist 04</li>
                <li>artist 05</li>

            </ol>

        </a>

    </li>

</ul>

As the titel stated I want to look for the time element with a matching date-time attribute value in ul.weeks and then do something. That 'something' I know how to do (I guess :) ), but searching for the matching attribute value, I don't know yet.
Can I even store the date-time attribute value of the time element (in a.index) in a variable, so that I can use that to look for a match in ul.weeks? Or do I have to use data attributes instead.

Do you work in-house, for an agency or do you freelance? Either way, if you would tell the company or your boss, that it would cost you way more time to maintain an Amazon Webstore, then with Shopify or Bigcommerce and therefore cost the company more money, you'll see how they will listen to you. On top of that, they will have a better store for themselves and for their customers. It's also part of your job as a web designer/developer to reseach and choose the best & the right tools for the project. What do they know?

I don't know of any other idea. To me Amazon Webstore is standing still, because today there are much better e-commerce solutions.

Then follow the rediculous long selector pattern and fight the specificity war. If you have to do a lot of tweaks to that website, this will become a real pain.

A click handler would highlight them once and forever and that's what you mean with point 2, right?. These are radio buttons which gets a checked state if checked, so you should use that to select your elements. With this if you check another radio button, the one that's checked gets unchecked, because you can only select one radio button at the time.
I would also add a class 'selected' and use that as a hook for your CSS in the stylesheet instead of adding it inline dynamically.

if($('#btnHSB').is(':checked')) {
    $('.group2').addClass('selected');
});

CSS:

td.selected {
    background-color: yellow;
    color: black;
    font-weight: bold;
}

Wiil look into the other points of you when I have time.

Don't understand what you mean with comments. You mean code comments? Anyway, maincontentpic div is just an empty div tag with no dimensions (width & height) set, so that's why the background image is not shown.

Hard to say without a link to the page, but for starter add the background image only to the body tag instead of to both the html and body tag.

Out of curiosoty, why does your html and body needs to be 120% high?

You know... that CSS that comes with an Amazon Store is a mess, so if you want to get the navigation centred, then you should follow their (high specificity) pattern. So try it like this and see if it has a higher specificity than the one that is overriding it now.

body #wrapper #innerWrapper div.com-amazon-webstore-GlobalSiteNav-2 ul#globalNav { text-align: center }
body #wrapper #innerWrapper div.com-amazon-webstore-GlobalSiteNav-2 ul#globalNav li.navigationGroup { display: inline }
body #wrapper #innerWrapper div.com-amazon-webstore-GlobalSiteNav-2 ul#globalNav li.navigationGroup a { display: inline-block }

Or even better look into other webstore/webshop options :)

You could also use the object element to include HTML content.

<object data="incl/foo.html">Warning: foo.html could not be included!</object>

W3C even recommends this over an iframe:
http://www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4

Sorry to say, but that stylesheet is very inefficient. Read about CSS specificity, because that's the root of your issue. If we could see the webpage live somewhere, we could spot the overriding style in no-time with the browsers' developer tools, but like this it would be crazy to even start looking.

So use the 'inspect element' in your browser to see all the CSS applied to your navigation to figure out what overwrites what.

It's because you're logo has a fixed positioning, so it's taking out of the normal document flow and has therefore no effect to other elements of that page.

Did my reply made you speechless?