vb.org Archive
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB5 General Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=262)
-   -   HTML Heads (https://vborg.vbsupport.ru/showthread.php?t=320844)

DemOnstar 11-21-2015 12:21 PM
HTML Heads
 
If you have time and/or patience, please drop the following code into an HTML module and compare browsers.

Code:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
  <title>Responsive Tiled Photo Gallery</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style type="text/css">
  <!-- Enable media queries for old IE -->
[if lt IE 9]>
  <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
[endif]
body {
  margin: 0;
  padding: 0;
  background: #EEE;
  font: 10px/13px 'Lucida Sans',sans-serif;
}
.wrap {
  overflow: hidden;
  margin: 10px;
}
.box {
  float: left;
  position: relative;
  width: 22%;
  padding-bottom: 20%;
}
.boxInner {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 10px;
  overflow: hidden;
}
.boxInner img {
  width: 100%;
}
<!--.boxInner .titleBox {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-bottom: -50px;
  background: #000;
  background: rgba(0, 0, 0, 0.5);
  color: #FFF;
  padding: 10px;
  text-align: center;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}-->

body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
  margin-bottom: 0;
}
@media only screen and (max-width : 480px) {
  /* Smartphone view: 1 tile */
  .box {
      width: 100%;
      padding-bottom: 100%;
  }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
  /* Tablet view: 2 tiles */
  .box {
      width: 50%;
      padding-bottom: 50%;
  }
}
@media only screen and (max-width : 800px) and (min-width : 400px) {
  /* Small desktop / ipad view: 3 tiles */
  .box {
      width: 33.3%;
      padding-bottom: 33.3%;
  }
}

  </style>
</head>
<body>
<div class="wrap">
   
  <!-- Define all of the tiles: -->
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg">
      <!--<div class="titleBox">Poster</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg" />
    <!--  <div class="titleBox">An old greenhouse</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/2.jpg" />
    <!--  <div class="titleBox">Purple wildflowers</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/3.jpg" />
    <!--  <div class="titleBox">A birdfeeder</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/10.jpg" />
    <!--  <div class="titleBox">Crocus close-up</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/4.jpg" />
    <!--  <div class="titleBox">The garden shop</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/5.jpg" />
    <!--  <div class="titleBox">Spring daffodils</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/6.jpg" />
    <!--  <div class="titleBox">Iris along the path</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/8.jpg" />
    <!--  <div class="titleBox">The garden blueprint</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/9.jpg" />
    <!--  <div class="titleBox">The patio</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/11.jpg" />
    <!--  <div class="titleBox">Bumble bee collecting nectar</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/12.jpg" />
    <!--  <div class="titleBox">Winding garden path</div>-->
    </div>
  </div>
 
</div>
<!-- /#wrap -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
  // See if this is a touch device
  if ('ontouchstart' in window)
  {
      // Set the correct [touchscreen] body class
      $('body').removeClass('no-touch').addClass('touch');
   
      // Add the touch toggle to show text when tapped
      $('div.boxInner img').click(function(){
        $(this).closest('.boxInner').toggleClass('touchFocus');
      });
  }
});
</script>
</body>
</html>
It looks okay in Firefox but IE, Chrome and Opera don't handle it very well. They are all up to date versions.
Even though it looks okay in Firefox, something is wrong; the size is lost somewhere.

Could somebody tell me what the issue is?

Thanks. . . .

Dragonsys 11-21-2015 12:55 PM
Well, your CSS If for IE is missing part, it should be this
Code:
<!--[if lt IE 9]>
  <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
It looks the same to me in Chrome, Firefox & Edge. I do notice that Chrome won't change the number of columns though, but that might be a Chrome issue.

DemOnstar 11-21-2015 01:33 PM
1 Attachment(s)
Both Chrome and IE display as in attached.... How odd that it looks okay for you.

Thanks for the response. . .

Dragonsys 11-21-2015 01:35 PM
1 Attachment(s)
Quote:
Originally Posted by DemOnstar (Post 2559072)
Both Chrome and IE display as in attached.... How odd that it looks okay for you.

Thanks for the response. . .
Strange, they look fine to me. Try it here on my test site - http://dragonsys.noip.me/test.html

Looks like the attached to me (this is from Chrome)

DemOnstar 11-21-2015 02:14 PM
Quote:
Originally Posted by Dragonsys (Post 2559073)
Strange, they look fine to me. Try it here on my test site - http://dragonsys.noip.me/test.html

Looks like the attached to me (this is from Chrome)
Yep, it does but is that held within the HTML module?

Dragonsys 11-21-2015 02:20 PM
1 Attachment(s)
Quote:
Originally Posted by DemOnstar (Post 2559079)
Yep, it does but is that held within the HTML module?
http://dragonsys.noip.me/vb4/

Attachment from Chrome, this is in a VB HTML Block. I'm not sure what Module you are meaning.

DemOnstar 11-21-2015 02:34 PM
Ooop. Sorry, not clear.

I am using a Static HTML module from the site builder in vB 5. Using on localhost.
It appears you are using 4...

Dragonsys 11-21-2015 02:40 PM
doh, I didn't notice this was vb5. Yeah, I'm still on vb4, sorry.
However, the html code looks good other than the CSS Comment Select I mentioned earlier. So it must be something specific to the vb5 module, and i can't help with that :(

DemOnstar 11-21-2015 02:44 PM
Quote:
Originally Posted by Dragonsys (Post 2559085)
So it must be something specific to the vb5 module, and i can't help with that :(
Cheers. That is what I was afraid of.
Maybe someone will report it now they have seen it.

Lynne 11-21-2015 05:11 PM
You cannot add any <head> or <body> or <html> or <doctype> tags to the module. You can only add the actual html stuff or you will break the page.


All times are GMT. The time now is 01:03 AM.
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01119 seconds
  • Memory Usage 1,760KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (2)bbcode_code_printable
  • (4)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (1)pagenav_pagelink
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (10)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete