Posts by gentlemedia

You can use 'timeline' in Chrome DevTools tools to record a page load and meaure & analyze stuff like paint, FPS and CPU. Compare between the new and the old slider.

https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool?hl=en

okay, I've dumped the code above in a pen (which you could also do by the way instead of letting people guess from an image) and gave the iframe a yellow background color so we can see where it is (not sure wht you had it only 100px by 100px, but aynway)
http://codepen.io/gentlemedia/pen/qamWBz

The reason why google.com doesn't get displayed into the iframe is because it's a HTTPS url. Replace it with an HTTP url and you will see it gets displayed. I did a Google search and found out that because of security reasons browsers block by default iframes with HTTP urls in HTTPS sites and the otherway around (your situation) seems by now also blocked by default.

I'm also not sure what you're after. You're talking about an iFrame, but have inserted a webview element into your HTML with an iFrame attribute. As far as I see (I'm not an Android developer) WebView is to load in an URL, but this goes via an XML layout file and Java. Did you do some resarch about this? Also your CSS does not make much sense to me.

Sorry, no can do. My JS skills are very limited so I would use CSS keyframes or if it has to be JS based animations to cover older browsers as well (or if I need more animation power), then I resort to GSAP.

I do see a slight hick-up in the animation too. It is slight, because there's nothing else that could influence the animation (like a design as a background).
Why not animating with CSS transform2D (transform: translateX()) instead of the left property? CSS transforms use their own rendering layer and therefore smaller paint times which results in better FPS.

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/

I'm not into this, but you might want to have a look into Webgl.
https://docs.webplatform.org/wiki/webgl
https://www.chromeexperiments.com/webgl

@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/

The css in your MQ should look something like this

@media (min-width: 400px) and (max-width: 800px){
    #small_box_r {
        float: none;
        width: auto;
    }
}

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
}

I thought I eplied on this yesterday, but I don't see it.

Anyways... try adding overflow: hidden to #searchbox in your CSS. I see in inspector a weird overlap, so it might cover those links. It's a wild guess and I didn't check it in IE8 myself.

On a side note, if you want to add a z-index, then the element itself needs to be an absolute, relative or fixed positened element. Default position value is static like in your case.

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

Changing, or serving, different content for different screen/device resolutions has never been a good content strategy. Users expect the same content on all their devices. Just prioritize it good! The only things that should differ is the user experience and usability. For example if you get really long pages on small devices, consider to convert some content for these small screens into accordions or tabs and make sure users can swipe between this content as well on touch screen devices.

For more advice on this matter head over to Jakob Nielsen's website:
https://www.nngroup.com/topic/mobile-and-tablet-design/

This thread smells like spam to me. It's pretty obvious that one would go to the play framework website itself to learn how to build their apps.

That LA times site is indeed horrendous. It's a good example of a bad implementation of Responsive Web Design. Not to talk about a Google PageSpeed test.
But... it's a massive site of course with lots of dynamic content and is not an easy task to give it a smooth RWD experience, but it's doable if you look at the Boston Globe site.

What you want with loading different PHP or HTML snippets with AJAX on certain breakpoints, can be done with the matchMedia API. No need anymore for calculating window.innerWidth/Height or for a library such as jQuery. If you need to support older browsers, then you can polyfill it for those.

But I think you go overboard with your approach as well... try to use CSS mq's first over JS mq's. If done right, you don't have this wonky RWD experience as the LA times site. Especially if your pages are not that huge as those of the LA times site.

For (multiple) media queries in javascript look into window.matchMedia()
http://www.javascriptkit.com/javatutors/matchmediamultiple.shtml

No, you can't. Only if you inline your SVG you have quite some possibilities to style or animate its properties either through CSS or JS.

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

https://www.htmlcommentbox.com/

An img tag doesn't have a closing tag, so you should have this:

<img src="/name/img/logo.png" alt="logo">

And to center that logo image, all you need is this:

#logo { text-align: center }

http://codepen.io/gentlemedia/pen/qZwvpJ

That's what I said. if it's just a static website you can use dropbox as a server, but if you use a serverside language such as PHP, you can't.

Post at least then also the HTML for that logo here in the thread!

you would make it a lot easier for us to put the page live somewhere. Web hosting doesn't cost much nowadays. And if it is just static pages, you can even use dropbox as a webserver to show your issue. That costs nothing!

http://creativepro.com/how-to-use-dropbox-a-web-server-3-easy-steps/

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.

ok, I had to see it for myself so I've made a pen and tested it in IE11 on Windows7 and it just centers.
http://codepen.io/gentlemedia/pen/bpJzgO

According to your pastebin snippet you don't use a doctype. Is this also the case in your page?

Add it to the $post request. Something like this

$.post('ajax/count-pictures-views.php', {picture_id: id}, function(data)).done(function() {
    Waypoint.refreshAll();
})

Add this to your stylesheet.

html, body { width: 100% }

Try reinitialise waypoint with the .done() callback.
https://api.jquery.com/jquery.post/

Sure it does! An img tag is an inline element by default and an inline element within a block-level element, such as a div tag, will center horizontally just fine with only text-align: center. This is how it shoud behave according the spec and every browser handles it this way. The rest of your CSS properties are redundant and have actually no effect on centering an element.

http://codepen.io/gentlemedia/pen/LNaJMx

But I think I know where you coming from... :)
If we wanted to center (in the old days) an element (usually a layout wrapper div) with margin: 0 auto this didn't work in IE6 and below (was not supported), so we needed a text-align: center on the parent (usually the body tag) to get it horizontally centered in IE6.

Why do you want to do this with JS/jQuery? This could, and perhaps should, be done with CSS. Look into a tutorial 'buttons with CSS sprites'.
What you have now (only images and not real text for your links) is also not really SEO and screen reader friendly.

@MidiMagic - with the HTML you have here, the text-align: centeron that div would be enough. The rest of the styles is not necessary to center that image.

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

The HTML of that slicknav_menu section gets added dynamically by jquery.slicknav.min.js (I think) and it's not in use by your theme, so you can just delete (or comment out first) the slicknav related js and css files from your HTML.

https://www.browserstack.com/

You will have to define the animation name in the @keyframe:

@keyframe er {
    /* do animations */
}

And to erase your object, you will need another method then an inline SVG. Probably canvas, but I'm not sure so you will have to dive into that yourself.

Well... it's not fully replaced by CSS. But common design elements like rounded corners, gradients and shadows can now be done with CSS. It's the slicing part of PSD to HTML that is pretty much a thing of the past.

Do you mean option "Copy CSS" from Photoshop? Actually I'm not have deep knowledge in web development can you explain it?

No I mean hand code everything, but you do need indeed some basic understanding of HTML & CSS in order to do so. The link I've posted is a good place to start with. PSD to HTML is pretty much dead!

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/

Would the text then be unreadable without the text shadow?

But I don't need to detect if it is supported or not, I KNOW that it's not supported

That's not what it's for. You can create more easily and more efficient a fallback solution with Modernizr for all the old browsers that don't support it.

Who cares that IE9 doesn't get a text-shadow? Look into feature detection with Modernizr or the likes, create a decent fallback solution and move on!

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

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.

Can't you put the page online somewhere?

No, he just said with only the CSS there's not much to help, but also linked to a good resource how to center elements within different scenarios.

Well if it is input.wpi-button then just set the margin you want on it in your child theme style.css. And as far as I know is the default margin of input elements already '0', so I'm not sure what you want to do with it.

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