Posts by gentlemedia

How about another way, is it possible to bring two items on the left, and then have span.middle "fill" the remaining space on right?

No, with old fashioned CSS 2.1 it is not possible. That's why we have now flexbox and in the future grid at our disposal. Do you really have/want to support IE9 and below? Or serve modern browsers that supports flexbox your fancy layout and those who don't floats by using feature detection such as Modernizr.

In this case just float them, because you set fixed dimensions of 80px on them anyways so there's no need for using inline-block.

You can't have anchor tags within an anchor tag and think about it for a second... does it make sense?
In order to show/hide the div while hovering the anchor, that div needs to be a sibiling of the anchor and not a child.

Something like this:
https://jsfiddle.net/gentlemedia/vc639va4/3/

You're getting way too specific with long selector chains like that which makes it imo harder to read and it will give you in the end specificity issues - https://css-tricks.com/specifics-on-css-specificity/
Also using ID's in your CSS is not recommended for specificity reasons too and the CSS applied to it is not reusable.

Look into BEM or SMACS methodologies for reusable components and proper naming conventions.
http://getbem.com/
https://smacss.com

For starter I'd recommend to take out the onclick attribute from the HTML. Keep structure and behavior seperate.

<input id="aaa" formaction="register.php" type="submit" value="Register" />

And then within <script> tags

document.getElementById('aaa').addEventListener('click', function (e) {
    e.preventDefault();
    // scrollTo here
});

or with jQuery

$('#aaa').on('click', function (e) {
    e.preventDefault()
    // scrollTo here
})

And on a side note and off topic. The datetime attribute is specifically for the time element.

<time class="metro_tmtime" datetime="2013-04-10 18:30">
    <span class="date">1/4/13</span>
    <span class="time">17:20</span> 
</time>

https://schema.org/docs/gs.html#advanced_dates

why does the click function on the arrow doesn't work on mine?

Which arrow? Where's yours? Sorry, but my christal ball is at the dry cleaner.

Wow... that is some ancient Dreamweaver way to mark-up a page.
Not sure what you're after either, but if you want to override the default look of radio buttons (checked and unchecked) then you can do this with CSS, but looking at that mark-up it seems you've never heard of CSS :)
Here's a pure CSS way: http://www.456bereastreet.com/archive/201211/accessible_custom_checkboxes_and_radio_buttons/

Here are two CSS with jQuery ways:
http://labelauty.js.org/
http://icheck.fronteed.com/

Like I said since that mobile off-canvas nav gets altered with JavaScript by adding all this mm- classes to certain elements and the mobile nav gets even moved with JS from its orginal spot to another spot in the DOM. This could have been done better by the developer of that theme if he had used the clone configureation that would just clone the original nav, that you have for wider screens, for that mobile nav.

So I looked what you have when JS is disabled in the browser and then you see indeed the mobile nav at the top of the page. This is what you see in a flickr with JS enabled, but is gone once it's taken out and moved with JS to the other spot in the DOM.

So I figured out an easy solution for you and that is by adding the following CSS block to your CSS file and I see you have also a custom.css file, so it can just go in there.

#header + div {
    display: none;
}

In that div tag sits the mobile nav & cart which gets taken out by JS and moved to the other spot, so with JS enabled that div tag will be empty anyway. By hiding it with CSS this will not show the mobile nav in a flickr.... well. that's the theory :) Just try it and let's see if I'm right this time.

Downvote? Yes from me. If you ask for help on a forum and you can't bring up some patience and start yelling, what would you've expected?

You yell that you've tried http and https, but in your iframe src I see google.com as http which doesn't exist, so it will redirect automatically to google.com as https and like I said browsers will block by default iframes that want to load URLs with https.
So I was asking you to try it with another URL that is not https such as http://pxtoem.com/, because that should just work fine.

If that is not working either for you then show us something real online with Codepen, Jsfidlle or even Dropbox (http://mark-anthony.ca/hosting-a-website-with-dropbox/), so that we can replicate your issue instead of yelling that you've tried.

I never did something with Shopify, so I'm not sure what's possible to do.
How much are you in control of adding or editing the core files or is there a way to override them the way like WordPress does with child themes?
Becausre I think you can solve it by wrapping the mmenu snippet (located at the top in app.js) in a document ready.

You see now this in app.js:

    $('#nav').mmenu({
        searchfield : {
            add: true,
            search: true,
            noResults: '<a href="/search?q=" class="search_link">' + "Advanced Search \u0026#8594;" + '</a>'
        },
        classes: "mm-white"
    });

Change that to:

$(function() {

    $('#nav').mmenu({
        searchfield : {
            add: true,
            search: true,
            noResults: '<a href="/search?q=" class="search_link">' + "Advanced Search \u0026#8594;" + '</a>'
        },
        classes: "mm-white"
    });

});

Because also all the js (functions and plugins) are in the same file (app.js) and the snippet above that initilizes the mmenu is before the mmmenu plugin code.

Anyway if you can try with wrapping it in document ready first and then we'll see further!

After looking more deeper in Chrome DevTools I see that the mobile nav (off-canvas nav) is controled by the mmenu jQuery plugin which adds loads of mm- sufix classes dynamically to the HTML of the page. This takes probably longer than the rendering of the HTML of the mobile nav which causes the flickr of an unstyled mobile nav.

You will need to wrap your submenu items in an ul tag as well. The way you have it now is not valid HTML either. Then you could combine visibillity: hidden and opacity: 0 to hide and visibility: visible and opacity: 1 to show on :hover.

Sometime ago another member had also issues with a pure CSS dropdown/submenu which I created a demo for with the following mark-up and CSS to reveal the submenu items.

HTML:

<nav role="navigation">
    <ul>
        <li><a href="page1.html">page one</a></li>
        <li><a href="#" class="submenu">submenu</a>
            <ul>
                <li><a href="page2.html">page two</a></li>
                <li><a href="page3.html">page three</a></li>
            </ul>
        </li>
        <li><a href="page4.html">page four</a></li>
    </ul>
</nav>

CSS:

[role=navigation] ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

[role=navigation] > ul > li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 0 1rem;
}

[role=navigation] .submenu + ul {
  position: absolute;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s;
}

[role=navigation] .submenu:hover + ul,
[role=navigation] .submenu + ul:hover {
  visibility: visible;
  opacity: 1;
}

Here's the demo link: http://codepen.io/gentlemedia/pen/WwMQJz

Hope this get's you in the right direction.

BrowserStack is great! It comes with a price, but it's worth it!
https://www.browserstack.com/

Wow! DW and its extensions still spits out some messy HTML & CSS :)
I see a fixed width and height in px as inline CSS, so like this it will never get responsive.

Although I read on their site that the rotator can be responsive, but throught the GUI of the extension. Did you checkout their support page?

http://www.dwuser.com/support/easyrotator/kb/responsive-dimensions/

@rynatroop is right when setting a height of 100% on the container, then you should set a 100% height on the html and body tag too. Otherwise it takes 100% of 0 which is 0.
To overcome this you can set the container height to 100vh which means it takes 100% of the viewport height.
http://caniuse.com/#feat=viewport-units

But if you don't need to support really old browsers and want a sticky footer at the bottom then you can get even more fancy with your CSS by using calc().
http://caniuse.com/#feat=calc

HTML:

<div class="container">
  container
</div>
<div class="footer">
  footer
</div>

CSS:

.container {
  height: calc(100vh - 90px); /* minus the height of the footer */
  background-color: #ccc;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;  /* for smooth momentum scrolling on iOS */
}

.footer {
  height: 90px;
  background-color: #666;
}

Little demo: http://codepen.io/gentlemedia/full/EgxaOB/

You can draw lines with ::before and ::after pseudo elements.
Here's a little demo. It's not exactly your layout and I've used a fixed layout, but if yours is fluid (percentage based) then it's also doable. It's only a bit more tricky to do the math and some widths of the pseudo elements needs to be in percentage as well.

http://codepen.io/gentlemedia/full/qNLmga/

HTML

<div class="container">
  <button>button</button>
  <div class="boxes">
    <div class="box box-1">
      box 1
    </div>
    <div class="box box-2">
      box 2
    </div>
    <div class="box box-3">
      box 3
    </div>
    <div class="box box-4">
      box 4
    </div>
  </div>
</div>

CSS

.container {
  text-align: center;
  padding: 20px;
}

.container > button:first-child {
  color: #fff;
  margin-bottom: 60px;
  padding: .25em 2em;
  background-color: #333;
}

.box {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  line-height: 200px;
  margin-right: 10px;
  background-color: #ccc
}

.box-4 {
    margin-right: 0;
}

.box::before,
.box::after {
  content: " ";
  position: absolute;
  top: -30px;
  left: 50%;
  background-color: #333
}

.box::before,
.box-4::after {
  width: 1px;
  height: 30px;
}

.box:not(.box-4)::after {
  width: 214px;
  height: 1px;
}

.box-4::after {
  top: -60px;
  left: -222px
}

That means there's nothing (except for a cgi-bin folder) in your public directory. You have to install WP on your server.

Indeed! Bootstrap is an overkill for small or single page websites. There are some that even create simple coming soon pages with it... sigh!

see here why and read note 2
http://caniuse.com/#feat=html5semantic

okay, i've found the issue. In head.php you have a CSS reset and the css rule that sets the new HTML5 elements to display: block misses the main tag, so add the main tag there and it will center in IE. Below I've added the main tag so you can see what I'm talking about :)

article,aside,details,figcaption,figure,footer,header,hgroup,menu,main,nav,section{display:block}

Instead you can also add display: block in your own stylesheet of the main CSS rule.

If you use floats on the boxes you take them out of the normal document flow so they won't dictate the height of the parent anymore.
The overflow trick is indeed a method to solve this, but use overflow: hidden instead to clear the floats and to avoid the scrollbar issue your facing. But with this you cant have box-shadows on the parent or the boxes if you want to.

The best way to clear the floats is to use the clearfix hack
http://nicolasgallagher.com/micro-clearfix-hack/

I have this box, I need this box to be 230px, and I have second box, that needs to take entire space remaining

Re this, this is ony posiible with flexbox. In your fiddle you just gave the second box also a fixed width to fill the remaining space.

How else could I align two DIVs next to one another without flexbox and float?

There's inline-block, but this has also its own issues

Don't save it in Photoshop as HTML. You'll get rubbish as you can see. Just recreate the the design with CSS and proper mark up. A lot of things you can do nowadays pure with CSS unless you need to support IE8 and below.

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

Try using the Google web font loader.
http://publishing-project.rivendellweb.net/loading-fonts/

When using web fonts it's recommended to use a web font loading strategy such as Google Web Font loader or Font Face Observer which also can be applied to Google Web Fonts.
https://www.bramstein.com/writing/web-font-loading-patterns.html

Well, if it's only a few pixels then perhaps your logo image is not prepared properly? Also what's with the odd max-width: 330.5%?

The thing about this mark-up is that after testing it a bit it seems to perform as described, that is, is deals excellent with the mobile devices.

Not sure about that :) There is a horizontal scrollbar on smaller screens.
This type of fluid layouts was used before there were media queries, so if you want to optimize your site also for smaller screens then look into responsive web design.

As for your question... the height of the header gets dictated by the content inside the header (in this case the image). This is the way to go, because setting specific heights and even widths (magic numbers) is not really flexible especially within fluid layouts/responsive web design or if content gets added dynamically via a CMS.
A good read for this is: https://css-tricks.com/magic-numbers-in-css/

There's not a really a header tag used, but there's a div tag #header in the CSS & HTML.

Don't double post with the same question! You've got already a good reply in your previous thread how to center elements.

You have to show the preloader with CSS and hide it with $(window).load(), when everything has been loaded.

$(window).load(function(){
    $("#Preloader").fadeOut(1000);
});

Great! I've noticed I closed in that example markup an ul tag not properly, but I've got the basics in a pen for you so you can see how and what.
http://codepen.io/gentlemedia/pen/WwMQJz

[role=navigation] ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

[role=navigation] > ul > li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 0 1rem;
}

[role=navigation] .submenu + ul {
  position: absolute;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s;
}

[role=navigation] .submenu:hover + ul,
[role=navigation] .submenu + ul:hover {
  visibility: visible;
  opacity: 1;
}

My bad... I've pasted the wrong link at EDIT2
https://jsfiddle.net/gentlemedia/c16vnhLb/4/

And indeed visibility doesn't take space.

Any suggestion on what I could start building to get links into such thing

Usually this is how we would mark up a menu with a 1 level submenu

<nav role="navigation">
    <ul>
        <li><a href="page1.html">page one</a></li>
        <li><a href="#" class="submenu">submenu</a>
            <ul>
                <li><a href="page2.html">page two</a></li>
                <li><a href="page3.html">page three</a></li>
            <ul>
        </li>
        <li><a href="page4.html">page four</a></li>
    </ul>
</nav>

And then you would hide the ul tag that holds the submenu items and show it when you hover the a tag with the class submenu.
So something like this, but of course you will need to do a lot more within the CSS to get the main menu items aligned and the submenu where you want it.

.submenu + ul {
    visibility: hidden;
    opacity: 0;
    /* actually you don't need to transition
      * the visibility property.
      * Only the opacity is enough */ 
    transition: opacity .5s;
 }

.submenu:hover + ul {
    visibility: visible;
    opacity: 1;
}

Yes, I know, that's why I animate opacity.

No, you transition 'all' which includes also the display: none that you change on hover to display: inline-block

Doesn't work: https://jsfiddle.net/fzbx09qL/4/

Again, because of the display property

I need it to appear from nothing, not slide from bottom of the website to it's original position.

I know, just don't transition the top property, but only the opacity.

Thus, don't hide that div with display: none, but just with opacity: 0 and visibilty: hidden.

So you get something like this:

nav div {
  position: absolute;
  top: 100%;
  width: 200px;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s, visibility .5s;
}

nav a:hover div {
  visibility: visible;
  opacity: 1;
}

https://jsfiddle.net/gentlemedia/c16vnhLb/1/

EDIT:

Second, there is some code that I commented out in HTML box. When I add it, the entire "dropdown" breaks. This might be because of links, but in future I'd really need it. Is there a work-around?

If you want links inside that div then, you shoud use another element instead of the anchor tag for the hover.

EDIT2:

Third, it seems this box is a little bit off to the side, is there a way to place it in center relatively to it's parent? Obviously it's there by default, as it leans on left side of it's parent.

https://jsfiddle.net/gentlemedia/c16vnhLb/2/

Why do you still use device-width media queries? Just forget them. You don't need them, unless you're developing something for specific devices and their screen resolutions.
Styles in device-width media queries don't get triggered by resizing the browser window/viewport either, so that's why you don't see anything happening. These styles only get triggered if the width of the screen resolution of a device is exactly 800px.

So only use (viewport) width media queries and if you want to create mobile first RWD sites then you use min-width an if you want/need to create desktop first RWD websites, you use max-width media queries. The latter was used in the begiining of RWD more often , because of old IE that didn't support media queries. Nowadays the mobile first route is considered the way to go.

Here's some good info that explains the difference between width and device-width media queries:
http://www.sitepoint.com/media-queries-width-vs-device-width/

And here's one when to chooe between min-width and max-width:
http://petegale.com/blog/css-media-queries-min-width-vs-max-width/

By downloading and implementing Bootstrap you will not learn how to create responsive websites. It's a shortcut and you can create them, but without knowing the core concept of RWD (media queries, fluid grids and flexible media) you will allways be dependend on a framework like Bootstrap and its features, snippets and templates. If you want to create custom & lightweight responsive websites optimized for whatever screen or device it will be viewed on, you will have to get your hands dirty.

https://responsivedesign.is/

You will need to add the 'label' element to your inputs aswell.

<form>

    <div>

        <label for="name">Name</label>
        <input type="text" name="name" placeholder="Your Name" required>

    </div>

    <div>

        <label for="email">Email</label>
        <input type="email" name="email" placeholder="enter valid email address" required>

    </div>

</form>

And set your label and input to display: block in your CSS, so that they will stack ontop of each other.

You're making it for yourself already complicated with a HTML structure like this for your navigation bar.

<div id="coffee"><img src="images/coffee.jpg" width="130" height="120"></div>


<!-- navigation -->
<div id="logo"><img src="images/logo.png" alt="logo" width="200"></div>

<div id="navigation"></div> 

<div id="navcontainerbar">
<ul>

<li><a href="index.php">HOME</a></li>
    <li>

    <ul id="nav">
        <li><a class="fly" href="#">PORTFOLIO</a>
            <ul class="dd">
                <li><a href="portfolio.php">Web Porfolio</a></li>
                <li><a href="marketing-portfolio.php">Marketing Portfolio</a></li>             
            </ul>
        </li>     
    </ul>

    </li>    
<li class="service"><a href="services.php">SERVICES</a></li>
<li><a href="blog.php">BLOG</a></li>
<li><a href="contact.php">CONTACT</a></li>

</ul>
</div>

Visually, thus on the screen, it looks like these div tags are nested in a wrapper div, but they're not. All you did was position them ontop of each other with CSS fixed positioning and odd margins. And still all this hard coded <br> tags used for spacing.

Davy, before you want to sell services such as web design/development to clients, you really need to take a huge amount of steps back and start with the basics and that is learning HTML & CSS the proper way.
So before this thread ends up again in a thread with 40+ posts, I strongly advice you to start at the begining. Learn to walk before you can run!

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

They are accustomed to change classes and ids . if they see there is an event in html they understand something is going on that item

It's best practice to separating out any JavaScript behavior code from your markup and presentation. It's called unobstrusive JavaScript. If you work with web designers then you could decouple your JavaScript classes from the CSS ones by using a prefix.

<button class="btn js-popup">click here</button>

Like this, web designers know that the btn class is for styling and (other) JavaScript developers know the js-popup class is for behavior.

Instead to hard code an empty div tag at the bottom for the fade effect, you could also use a pseudo element (:before or :after) for your CSS gradient.

.scroll-div {
    position: relative;
    height: 500px;
    overflow: auto;
}

.scroll-div::after {
    content: " ";
    position: absolute;
    z-index: 1000;
    width: 100%;
    height: 80px;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%)
}

Is there any reason why you want to do this with JS, because you can do it purely with a few lines of CSS. There are several ways, but here's one way you could do it. (And yes, you can't have more then one image in the src attribute)

HTML:

<figure>

  <img src="http://images.freeimages.com/images/previews/824/sunbathing-1-1376871.jpg" alt="" />

  <img src="http://images.freeimages.com/images/previews/9ba/sunbathing-3-1376859.jpg" alt="" />

</figure>

CSS:

figure {
  position: relative;
}

img {
  position: absolute;
  transition: opacity 1s;
}

figure > img + img { opacity: 0 }

figure:hover > img:first-child { opacity: 0 }
figure:hover > img + img { opacity: 1 }

Little demo:
http://codepen.io/gentlemedia/full/VaeerO/

With jQuery it should be this:

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

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

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

OMG... can someone please kill this thread??? :)

What do you have so far?

A little update on my previous post. It seems that we get in CSS4 a standard approach for this - :placeholder-shown - so we can ditch the vendor prefixes by then. But for now to cover as many browsers with the prefix ones, we need 5 versions:

::-webkit-input-placeholder { /* Safari, Chrome and Opera */
    color: red;
}

:-moz-placeholder { /* Firefox 18- */
    color: red;
}

::-moz-placeholder { /* Firefox 19+ */
    color: red;
}

:-ms-input-placeholder { /* IE 10+ */
    color: red
}

::-ms-input-placeholder { /* Edge */
    color: red
}

:placeholder-shown { /* W3C Standard in CSS4 */
    color: red
}

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/

Well. let me be a bit helpfull, but thanks to http://www.freeformatter.com/html-formatter.html :)

<form action="usersave.php">
    <!-- class="form-horizontal form-label-left"--> 
    <div class="form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-3">First Name</label> 
        <div class="col-md-9 col-sm-9 col-xs-9"> <input type="text" class="form-control"> </div>
    </div>
    <br><br><br> 
    <div class="form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-3">Last Name</label> 
        <div class="col-md-9 col-sm-9 col-xs-9"> <input type="text" class="form-control"> </div>
    </div>
    <br><br> 
    <div class="form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-3">Email Address</label> 
        <div class="col-md-9 col-sm-9 col-xs-9"> <input type="text" class="form-control"> </div>
    </div>
    <br><br> 
    <div class="form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-3">Password</label> 
        <div class="col-md-9 col-sm-9 col-xs-9"> <input type="password" class="form-control"> </div>
    </div>
    <br><br> 
    <div class="form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-3">Confirm Password</label> 
        <div class="col-md-9 col-sm-9 col-xs-9"> <input type="password" class="form-control" required> </div>
    </div>
    <br><br> 
    <div class="form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-3">Role</label> 
        <div class="col-md-9 col-sm-9 col-xs-9"> <input type="text" class="form-control"> </div>
    </div>
    <br><br> 
    <div class="form-group"> </div>
    <br><br> </div> </div> <!-- /form input mask --> <!-- form color picker --> 
    <div class="col-md-6 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>Contact information</h2>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <br /> <!--<form class="form-horizontal form-label-left">--> 
                <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Email</label> 
                    <div class="col-md-9 col-sm-9 col-xs-12"> <input type="email" class="form-control"/> </div>
                </div>
                <br><br><br> 
                <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Cell Phone</label> 
                    <div class="col-md-9 col-sm-9 col-xs-12"> <input type="text" class="form-control" /> </div>
                </div>
                <br><br> 
                <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Home Phone</label> 
                    <div class="col-md-9 col-sm-9 col-xs-12"> <input type="text" class="form-control"> </div>
                </div>
                <br><br> 
                <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Street 1</label> 
                    <div class="col-md-9 col-sm-9 col-xs-12"> <input type="text" class="form-control"> </div>
                </div>
                <br><br> 
                <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Street 2</label> 
                    <div class="col-md-9 col-sm-9 col-xs-12"> <input type="text" class="form-control" id="demo_forceformat3"> …

There is a need for JS-Library solution !

Do you mean a library such as jQuery? If so, then you don't need one for this.
Window.matchMedia() - part of the Web API - is especially made for using media queries in JS.

if (window.matchMedia("(min-width: 1024px)").matches) {
    // code for when viewport is at least 1024px wide
} else if (window.matchMedia("(min-width: 768px)").matches) {
    // code for when viewport is at least 768px wide
} else {
    // code for when viewport is less then 768px wide
}

But for swapping img's better to use scrset and sizes, because that's where it's for.

This is for images, not for responsive pages ;)

But, there is now the srcset and the sizes attributes for this? But you knew that already, so there's no need for a JS solution. Only as a fallback solution for older browsers.

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.