tooltip popup not working in IE - javascript

What I am trying to do is that when the user points to one of the five button pictures on the website it should give them a tooltip with its definition.
It is working fine in Chrome Ver 46.0 but not in IE11.
When I ran the IE Developer tools. It gives error SCRIPT5009: 'tooltip' is undefined. Line: 26, Column: 26.
HTML :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<title>Build Menu with Tooltip</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="themes/3/tooltip.js" type="text/javascript"></script>
<link href="themes/3/tooltip.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {padding:0;margin:0; font:normal 12px Arial; background:none no-repeat center 93px;}
.main {margin: 0 auto; width: 4000px; color:#AAA;}
.main a {color:#000000;}
#vWrapper {margin-top:0px; padding:6px; width:200px; opacity:1.0; filter:alpha(opacity=50); background:#fff;}
#vWrapper a {color:#ABCDEF; text-decoration:none; display:block; padding:6px 20px; background:#ffffff;}
#vWrapper a:hover {color:#000; text-decoration:underline; background:#fff;}
.column { float:right; padding:0 20px;}
</style>
</head>
<body>
<div class="main">
<div id="vWrapper">
<img src="src/1.png" style="width:200px;height:100px;" alt="">
<img src="src/2.png" style="width:200px;height:100px;" alt="">
<img src="src/3.png" style="width:200px;height:100px;" alt="">
<img src="src/4.png" style="width:200px;height:100px;" alt="">
<img src="src/5.png" style="width:200px;height:100px;" alt="">
</div>
</div>
<!--Menu Data-->
<div style="display:none;">
<div id="sub1">
<div class="column">
<p align="justify">Conduct proactive, routine quality management functions to mitigate risk exposure and liability in the Services solution design, account operations & project delivery, through quality reviews, early warning triggers, metrics, account/project compliance & performance reporting.</p>
<p align="justify">Drive continuous improvement and corrective actions for systemic root causes.</p>
</div>
</div>
<div id="sub2">
<div class="column">
<p align="justify">Provide account operations, PMO and project delivery consulting services via senior-level leveraged subject matter experts, with extensive Services experience across multiple industries and lines of business (LOBs).
</p><br />
</div>
</div>
<div id="sub3">
<div class="column">
<p align="justify">Establish, (optimize/streamline/simplify) and drive delivery governance, proactive early warning intervention, and remediation on challenged accounts and PCC3 projects, promoting accountability and consistency across all Services delivery teams.
</p><br />
</div>
</div>
<div id="sub4">
<div class="column">
<p align="justify">Collaboratively develop, implement, drive compliance & adoption of the Dell Services Account Lifecycle Mgmt. (ALM) frameworks –Account Start-Up, Account Mgmt., Acct Shutdown (ASUM, AMM, ASDM) and Patented PM3 standard frameworks, best practices & supporting policies, including Contract Compliance Policy, throughout the account lifecycle.
</p><br />
</div>
</div>
<div id="sub5">
<div class="column">
<p align="justify">Establish Integrated Early Warning Reporting, enabling delivery governance for account operations and project delivery Performance & Compliance. Provide business “ownership” / requirements & collaborate on strategy for standardized, Services-wide systems/tools that enable account management, project delivery and governance functions. </p>
<p align="justify">Expand the engagement of the Services delivery community with passion & optimism through broad-based, global communications, CoPs and Knowledge Mgmt. solutions, which foster a sense of ownership, enthusiasm and a collaborative culture across Services.</p>
</div>
</div>
</div>
</body>
</html>
CSS:
/*For tooltip target element that has set class="tooltip" */
.tooltip {text-decoration: none; border-bottom:1px dotted #36c;color: #36c; outline: none; }
/*For tooltip box*/
div#mcTooltip
{
line-height:20px;
border-width: 2px;
color:#000000;
border-color:#000000;
padding:10px;
font-size: 14px;
font-family: Museo for Dell, Museo Sans for Dell ;
border-radius:9px;
background-color:#000000;
background-image:url(bg_ptn.png);
}
div#mcTooltip, div#mcttCo b {
box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
/* For hyperlink within tooltip */
div#mcTooltip a { color:#fff; }
/*Close button. Available when sticky or overlay has been set to true, or is on touch-enabled devices. */
div#mcttCloseButton
{
width:18px;
height:18px;
margin-right:4px;
margin-top:4px;
/*background:black;*/
}
/*Close button X symbol*/
div#mcttCloseButton:after {
font:normal 38px/18px Museo for Dell, Museo Sans for Dell;
color:#999;
top:0;left:-2px;
}
/*Give the close button a bigger size on smaller devices*/
#media only screen and (max-width: 736px) {
div#mcttCloseButton {
width:28px;
height:28px;
}
div#mcttCloseButton:after {
font-size:48px;
line-height:28px;
}
}
/* Useful when overlay has been set to true or 1 in JS */
div#mcOverlay
{
background-color: rgba(0,0,0,0.5);
display:none;top:0;left:0;width:100%;height: 100%;overflow:visible;z-index:4;
}
/*The settings below should remain unchanged*/
div#mcTooltipWrapper {position:absolute;visibility:hidden;overflow:visible;z-index:9999999999;top:-2000px;}
div#mcTooltip {float:left;border-style:solid;position:absolute;overflow:hidden;}
div.mcTooltipInner {float:left;position:relative;width:auto;height:auto;}
div#mcttCo, div#mcttCo b{position:absolute;overflow:hidden;}
/*compatible with bootstrap*/
div#mcTooltip, div#mcTooltip div {box-sizing:content-box;}

Related

Java Script: Using a Toggle to Show More or Less

I need some help. I have to write a javascript code that will toggle the a element for show more or less. If I click on show more, it should show the more with a link for show less.
Problem I am Having
1. If I click show more About the Author, instead of just showing more info about just that, it will also show more info about the book description, and who this book is for.. I don't want it to do that, I just want it to show me more info about just that specific one.
2. It's also not showing me or giving me the less link option.
Here is my HTML and JavaScript code.
$(document).ready(function() {
$("#jdom").click(function() {
$("a").toggle(function () {
$(this).text("").siblings("div").hide();
}, function() {
$(this).text("Less").siblings("div").show();
});
});
});
article, aside, figure, figcaption, footer, header, nav, section {
display: block;
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 650px;
margin: 0 auto;
border: 3px solid blue;
}
section {
padding: 15px 25px;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 120%;
padding: .25em 0 .25em 25px;
}
div.hide {
display: none;
}
ul {
padding-left: 45px;
}
li {
padding-bottom: .4em;
}
p, a {
padding-bottom: .4em;
padding-left: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Expand/Collapse</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="index.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="subset_expansion.js"></script>
</head>
<body>
<section id="jdom">
<h1>Murach's JavaScript and DOM Scripting</h1>
<h2>Book description</h2>
<div>
<p>You can read other JavaScript books from start to finish and still not
know how to develop dynamic websites like you want to.</p>
</div>
<div class="hide">
<p>But now, you can go from JavaScript beginner to DOM scripting expert in a
single book! Fast-paced, professional, and packed with expert practices, our
new JavaScript book.</p>
</div>
Show more
<h2>About the author</h2>
<div>
<p>Ray Harris is an expert JavaScript programmer. That will be obvious to you
as soon as you review the 20 complete applications that he presents in this
book.</p>
</div>
<div class="hide">
<p>Ray Harris is much more than a JavaScript programmer.</p>
<p>So when Ray said he wanted to write for us, it didn't take us long to hire
him.</p>
</div>
Show more
<h2>Who this book is for</h2>
<div>
<p>Due to our unique presentation methods and this book's modular organization,
this is the right book for any web developer who wants to use JavaScript effectively.</p>
</div>
<div class="hide">
<p>Here's just a partial list of who can use this book:</p>
<ul>
<li>Web developers who know HTML and CSS and are ready to master JavaScript.</li>
<li>Web developers who program in ASP.NET, JSP, or PHP on the server side and
now want to master client-side coding.</li>
<li>Web developers who have already read 3 or 4 JavaScript or DOM scripting books
but still don't know how to do the type of DOM scripting that's required in
real-world applications</li>
</ul>
</div>
Show more
</section>
</body>
</html>
I don't know what I am doing wrong.
Try This,
$(document).ready(function() {
$(document).on('click','a',function(e){
$(this).text( ($(this).text() == "Show more") ? "Less":"Show more" ) ;
$(document).find($(this).attr('data-target')).toggle();
/*OR WITH ANIMATION*/
/*
if($(this).text() == "Show more"){
$(this).text("Less");
$(document).find($(this).attr('data-target')).slideDown(300);
}else{
$(this).text("Show more");
$(document).find($(this).attr('data-target')).slideUp(300);
}*/
});
/*MORE ACTION*//*
$(document).on('click','#jdom',function(e){
$(document).find('a').each(function(){
$(this).trigger('click');
})
});
*/
});
HTML PART UPDATE AS BELOW
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Expand/Collapse</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="index.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="subset_expansion.js"></script>
</head>
<body>
<section id="jdom">
<h1>Murach's JavaScript and DOM Scripting</h1>
<h2>Book description</h2>
<div>
<p>You can read other JavaScript books from start to finish and still not
know how to develop dynamic websites like you want to.</p>
</div>
<div class="hide" id="bookDesc">
<p>But now, you can go from JavaScript beginner to DOM scripting expert in a
single book! Fast-paced, professional, and packed with expert practices, our
new JavaScript book.</p>
</div>
Show more
<h2>About the author</h2>
<div>
<p>Ray Harris is an expert JavaScript programmer. That will be obvious to you
as soon as you review the 20 complete applications that he presents in this
book.</p>
</div>
<div class="hide" id="author">
<p>Ray Harris is much more than a JavaScript programmer.</p>
<p>So when Ray said he wanted to write for us, it didn't take us long to hire
him.</p>
</div>
Show more
<h2>Who this book is for</h2>
<div>
<p>Due to our unique presentation methods and this book's modular organization,
this is the right book for any web developer who wants to use JavaScript effectively.</p>
</div>
<div class="hide" id="bookDet">
<p>Here's just a partial list of who can use this book:</p>
<ul>
<li>Web developers who know HTML and CSS and are ready to master JavaScript.</li>
<li>Web developers who program in ASP.NET, JSP, or PHP on the server side and
now want to master client-side coding.</li>
<li>Web developers who have already read 3 or 4 JavaScript or DOM scripting books
but still don't know how to do the type of DOM scripting that's required in
real-world applications</li>
</ul>
</div>
Show more
</section>
</body>
</html>
I have modified the HTML a bit, and JS as well. Try using like this, it might give you solution.
$(document).ready(function() {
$("a").click(function(e) {
e.preventDefault();
var moreSection = $(this).parents(".section").find(".more-section");
if($(this).text() == "Show more" && moreSection.hasClass("hide")){
$(this).text("Show less");
moreSection.removeClass("hide").addClass("show");
}else{
$(this).text("Show more")
moreSection.addClass("hide").removeClass("show");
}
});
});
article, aside, figure, figcaption, footer, header, nav, section {
display: block;
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 650px;
margin: 0 auto;
border: 3px solid blue;
}
section {
padding: 15px 25px;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 120%;
padding: .25em 0 .25em 25px;
}
div.hide {
display: none;
}
div.show {
display: block;
}
ul {
padding-left: 45px;
}
li {
padding-bottom: .4em;
}
p, a {
padding-bottom: .4em;
padding-left: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="jdom">
<h1>Murach's JavaScript and DOM Scripting</h1>
<h2>Book description</h2>
<div class="section">
<p>You can read other JavaScript books from start to finish and still not
know how to develop dynamic websites like you want to.</p>
<div class="hide more-section">
<p>But now, you can go from JavaScript beginner to DOM scripting expert in a
single book! Fast-paced, professional, and packed with expert practices, our
new JavaScript book.</p>
</div>
Show more
</div>
<h2>About the author</h2>
<div class="section">
<p>Ray Harris is an expert JavaScript programmer. That will be obvious to you
as soon as you review the 20 complete applications that he presents in this
book.</p>
<div class="hide more-section">
<p>Ray Harris is much more than a JavaScript programmer.</p>
<p>So when Ray said he wanted to write for us, it didn't take us long to hire him.</p>
</div>
Show more
</div>
<h2>Who this book is for</h2>
<div class="section">
<p>Due to our unique presentation methods and this book's modular organization,
this is the right book for any web developer who wants to use JavaScript effectively.</p>
<div class="hide more-section">
<p>Here's just a partial list of who can use this book:</p>
<ul>
<li>Web developers who know HTML and CSS and are ready to master JavaScript.</li>
<li>Web developers who program in ASP.NET, JSP, or PHP on the server side and
now want to master client-side coding.</li>
<li>Web developers who have already read 3 or 4 JavaScript or DOM scripting books
but still don't know how to do the type of DOM scripting that's required in
real-world applications</li>
</ul>
</div>
Show more
</div>
</section>

Why are the divs colliding?

I am having responsiveness issues. Whenever I narrow the page, the divs on the right collide into the ones on the left. One goes behind the picture, the others into the paragraphs. It seems to be overflowing, idk why.
.list-group {
margin: 0 auto;
}
.list-group div {
background-color: ;
height: 200px;
}
.list-group h3 {
color: #175C85;
}
.list-group .pic {
background-image: url(../images/AdobeStock_52854917_WM.jpeg);
background-size: cover;
background-repeat: no-repeat;
border-radius: 4px;
margin-right: 50px;
margin-left: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class=" list-group col-sm-12 col-md-10">
<div class="row">
<div class="col-sm-6">
<h3>One All-Inclusive Fee</h3>
<p>There are no hidden fees or additional charges when working with Nevada Corporate Headquarters, Inc. (NCH). There is one initial fee and it includes the entire process. NCH pays for all initial state filings, account set up fees and expedite
services for both. NCH gives you one all-inclusive fee—one time; an offer unmatched by our competitors.</p>
</div>
<div class="col-sm-6">
<h3>One-Stop Shop</h3>
<p>NCH will facilitate the entire process from start to finish—your one-stop solution. This includes, but is not limited to, creating the entity, entity documents, new retirement account(s), rollovers, transfer of the investment(s) into your entity—all
performed and produced by NCH.</p>
</div>
</div>
<div class="row">
<div class="col-sm-6 img-div">
<div class="pic">
</div>
</div>
<div class="col-sm-6">
<h3>Limit Your Ongoing Custodial Fees</h3>
<p>NCH’s fee schedule is simple. There are no transactional fees after the Self-Directed structure has been completed. After the first year, the ongoing maintenance fees are limited, regardless of the size of your account. Through NCH’s process
you will not be penalized as the value of your retirement account increases.</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h3>Experience and Thoroughness</h3>
<p>NCH has established thousands of self-directed retirement accounts, helping individuals take advantage of potentially more secure and more lucrative investments for their retirement. We facilitate the implementation of all documents, ensuring
that all requirements have been met and you maintain full signature authority on behalf of your self-directed retirement account. With over 25 years of experience, our systematic approach has proven to be effective and timely, putting you
in control as quick as possible.</p>
</div>
<div class="col-sm-6">
<h3>Ongoing Education and Coaching</h3>
<p>Once your new structure is in place, questions will most certainly arise. NCH provides ongoing coaching and education via email or our toll-free hotline, to help guide you through the first six months of implementation. Unlike most of our competition,
NCH employs and trains a knowledgeable self-directed staff. Regardless of the questions you have—they are simply an email or phone call away from being answered.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Remove the height
.list-group div {
background-color: ;
/* height: 200px; */
}
I put your code into a jsFiddle and removed some css and it seems to have fixed the issue.
.list-group div{
background-color:;
//height: 200px;
}
https://jsfiddle.net/DTcHh/19303/

Why on('click', function ()) isn't working in jQuery? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a very simple website with some menu tabs (i.e. Home, About Me etc.) and few paragraphs. I added click function inside my .JS file so that the clicking on tab can navigate to the desired paragraph (or page). But it's not working.
I should refernce to this post as I posted back.
[NOTE: I have apache running in my computer and xwamp is installed. I have jquery source added into my file and they are accurately saved in correct path or file. Besides I have Bootstrap installed, though I didn't necessarily need to set path for any file to it.]
My code:
main.php:
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<html charset="utf-8">
<title>Welcome to Fatah's world!</title>
<link rel="stylesheet" href="main_design.css"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main_interaction.js"></script>
<div class="row">
<div id="header" class="col-xs-12">
<h1>Welcome to my green world!</h1>
</div>
<div class="col-xs-4">
<ul>
<li id="home">HOME</li>
<li id="gallery">GALLERY</li>
<li id="about">ABOUT ME</li>
<li id="contact">CONTACT ME</li>
<li id="diary">MY DIARY</li>
<li id="blog">BLOG</li>
</ul>
</div>
<div class="col-xs-8 home">
<p>Thank you for spending your time to visit my website. My name is Jabir Al Fatah. I live in Sweden. I have a lot of interest in web developing and 3d graphics designing. I am a travel addicted guy. I love to travel and have experience about diversity among life and nature. I am passionate. I don't do everything just becuase I am obliged to do,rather I like to take risk to be done with something just because I like.I haven't have a wonderful childhood in my life. But I admit it that my parents were surprisingly aware of my future and even every singlestep in my life. Their love and affection fulfilled all of my demand.Well, I just admired them a little. There are tons of others stuff I can say. However, in my life, changes happen very fast.</p>
</div>
<div class="col-xs-8 gallery hidden">
<p>This is the gallery.</p>
</div>
<div class="col-xs-8 about hidden">
<p>This paragraph should appear while clicking on "About me". Beisides, it's not accurately placed in the window. I need to fix that .Another problem is that this paragraph moves under the menu area by pushing it up when I make the window size smaller.</p>
</div>
<div class="col-xs-8 contact hidden">
<p>Contact me here.</p>
</div>
<div class="col-xs-8 diary hidden">
<p>My diary will be here.</p>
</div>
<div class="col-xs-8 blog hidden">
<p>Blog posts appear here.</p>
</div>
<div id="footer" class="col-xs-12">Developed by Jabir Al Fatah</div>
</div>
</body>
</html>
.JS:
$("li").on('click', function () {
$(".col-xs-8").addClass("hidden");
$("." + $(this).attr("id")).removeClass("hidden");
});
.CSS:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.row {
margin: 0;
}
#header {
background-color: mediumturquoise;
text-align: center;
padding: 20px;
border: 4px solid crimson;
}
.col-xs-8 {
text-align: center;
font-family:'Verdana';
color: mediumblue;
font-size: 13pt;
}
.col-xs-4{
border: 4px solid crimson;
background-color: yellow;
line-height: 40pt;
font-family:'Tahoma';
font-size: 15pt;
font-weight: bold;
margin: 0;
padding: 0;
}
.col-xs-4 ul {
list-style-type: none;
}
#footer {
background-color: gray;
border: 2px solid green;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
}
li:hover {
cursor: pointer;
text-decoration: underline;
}
You're including (and thus executing) the JavaScript before the elements exist on the page. HTML/JavaScript is processed in the order in which is exists in the DOM. So when this runs:
$("li")
the parser is only at the top of the HTML body and hasn't loaded any li elements into the DOM yet. Thus, that selector doesn't find anything.
Either put the JavaScript at the end of the DOM or wrap it in a document ready handler:
$(function () {
$("li").on('click', function () {
// etc.
});
});
(or both)
on not support from jquery 1.9, try live
$("li").live("click",function(){});
I looked at your code and was wondering if replacing
$("li").on('click', function () {
with
$("li").click(function() {
would solve the issue. I've used jquery for a while but have never used ".on" but my onclicks work fine. Hope this helps!

How to implement Packery library with Tumblr

I followed the 'Getting started' tutorials on the Packery website, but I still can't get my tumblr photo posts to work at all with the library. I'm not sure what I need to change or add since the Packery tutorials are pretty vague.
<!DOCTYPE html>
<html>
<head>
<script src="http://packery.metafizzy.co/packery.pkgd.min.js"></script>
<script>
var postsContainer = document.querySelector('#posts');
var pckry = new Packery( postsContainer, {
//options
itemSelector: '.container',
gutter:5
});
pckry.bindResize(postsContainer);
</script>
<link href='http://fonts.googleapis.com/css?family=Monofett|Varela|Londrina+Shadow' rel='stylesheet' type='text/css'>
<!-- fonts
font-family: 'Monofett', cursive;
font-family: 'Varela', sans-serif;
font-family: 'Londrina Shadow', cursive;
-->
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<!-- DEFAULT COLORS -->
<meta name="color:Background" content="#eee"/>
<meta name="color:Content Background" content="#fff"/>
<meta name="color:Text" content="#000"/>
<style type="text/css">
*{margin:0px;
padding:0px;}
html{height:100%;}
body{
background-color:{color:Background};
margin:0px;
height:100%;
}
#sideBar{
background-color:{color:Content Background};
width:150px;
height:100%; ;
margin:auto 0;
margin-right:20px;
padding-left:10px;
float:left;
}
h1{font-family: 'Monofett', cursive;;
font-size:43px;
margin-bottom:25px;
color:black;}
h2{ font-family: 'Varela', sans-serif;
font-size:12px;
margin-bottom:10px;}
p{margin-bottom:10px;}
a:link, a:visited{font-family: 'Varela', sans-serif;
font-size:.95em;
text-decoration:none;
color:black;
-webkit-transition:margin-left 1s, margin-right 1s, color .5s;
-webkit-timing-function:ease;}
#arrow{color:black;
font-family: 'Varela', sans-serif;
fonr-size:.95em;
-webkit-transition:color.5s;
-wekit-timing-function:ease;}
a:hover{color:white;
margin-left:10px;
margin-right:40px;}
nav{margin-left:0px}
#posts{
float:left;
list-style:none;
}
.postPhoto{
float:left;
margin:5px;
}
#wrapper{
height:100%;
width:700px;
}
.pagination{display:none;}
</style>
</head>
<body>
<div id="wrapper">
<div id="sideBar">
<h1>{Title}</h1>
<nav>
<p> Music <span id="arrow"> >> </span> </p>
<p> Code <span id="arrow"> >> </span> </p>
<p> Shop <span id="arrow"> >> </span> </p>
<p> About <span id="arrow"> >> </span> </p>
</nav>
</div>
<div id="posts"> <!--content -->
{block:Posts}
<div class="container">
{block:Photo}
<div class="postPhoto">
<img src="{PhotoURL-500}" alt="{PhotoAlt}" width="200px"/>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Photo}
{block:Video}
<li class="post video">
{Video-250}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Video}
</div><!--end container -->
{/block:Posts}
</div>
</div>
</body>
</html>
A couple things.
1) Your #posts container is floated and therefore is only as wide as the content within it. Even if Packery was working it would just line them all up in a single column. You'll need to apply it a width. If you're not concerned with IE8, you can do something like this:
#posts {
width: -webkit-calc(100% - 180px);
width: -moz-calc(100% - 180px);
width: calc(100% - 180px);
}
2) The Packery error is odd, I'm not entirely sure what's causing it. But by butting this simple bit of JS through the Console, I was able to get it running:
var container = document.querySelector('#posts');
var pckry = new Packery( container, {
// options
itemSelector: '.container',
gutter: 10
});
Make sure this code comes at the end of your document, right before the closing </body>.
3) Since your posts are images, you'll need to make sure you're providing them a width and height so that Packery knows how big each post is. Unfortunately, since you're not using a standard Tumblr width, you'll need to include the imagesLoaded plugin and place your code inside its callback.
Easy way using jQuery:
var container = document.querySelector('#posts');
container.imagesLoaded( function() {
var pckry = new Packery( container, {
// options
itemSelector: '.container',
gutter: 10
});
});
If you were using a standard Tumblr size (like 250px) you'd be able to simply add a width and height attribute to each image and not need to worry about using imagesLoaded, like this:
<img alt="" src="{PhotoURL-250)" height="{PhotoHeight-250}" width="{PhotoWidth-250}" />

Font size unusually changes

I've a problem with my very simple website. It seems that the font size unusually changes in some cases. For instance, when I click on a link in the homepage, the new page opened has a different font size. And it seems that this behavior happens only on Chrome. Please, see the pictures below. For each picture, on the left you can see the font size in the homepage and on the right you can see the font size in the page opened clicking on a link.
Internet Explorer (font size ok)
Firefox (font size ok)
Chrome (font size is DIFFERENT)
This is my CSS code used by the two web pages (before this there's a reset standard file):
#charset "utf-8";
/* CSS Document */
body
{
background-color:#FFF;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
}
.centered
{
margin:0 auto;
}
.centered-content
{
text-align:center;
}
div.article-header
{
background-image:url(../img/articleheaderback.png);
background-position:bottom;
background-repeat:repeat-x;
width:100%;
margin-bottom:10px;
}
div.article-title
{
width:69%;
display:inline-block;
padding-left:1%;
padding-bottom:10px;
}
div.article-more
{
text-align:right;
font-style:italic;
display:inline-block;
color:#690000;
width:29%;
padding-right:1%;
}
div.article-content
{
width:94%;
padding-right:3%;
padding-left:3%;
}
div.article
{
padding-top:10px;
padding-bottom:10px;
padding-left:3%;
padding-right:3%;
width:94%;
}
div.section
{
padding-top:10px;
padding-bottom:10px;
width:100%;
text-align:center;
}
div.section-title
{
text-transform:uppercase;
width:100%;
}
div.container
{
width:100%;
margin:10px 0;
padding-top:20px;
padding-bottom:10px;
background-color:#cbcb63;
}
div.content
{
width:90%;
background-color:#fff59b;
margin:15px auto;
padding-top:10px;
padding-bottom:10px;
}
div#contacts
{
width:90%;
background-color:#fff59b;
margin:0 auto;
}
.dark-background
{
background-color:#1b5e5e;
}
div.header
{
text-align:center;
width:100%;
}
div.footer
{
text-align:center;
}
h1
{
font-size:1.5em;
font-weight:bold;
color:#690000;
}
img#logo
{
max-width:100%;
}
li.basic
{
padding-top:5px;
padding-bottom:5px;
line-height:1.5;
}
li.nav
{
color:#5c7304;
padding-top:25px;
text-align:center;
font-weight:bold;
text-transform:uppercase;
}
li.contacts
{
display:inline-block;
width:25%;
}
p
{
line-height:1.5;
}
ul.nav
{
margin-top:10px;
padding:0;
list-style:none;
width:100%;
}
ul.basic
{
list-style-type:disc;
list-style-position:inside;
}
ul.contacts
{
width:100%;
margin-top:30px;
margin-bottom:10px;
}
This is the html homepage:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Responsive Site</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/princstyle.css">
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<script src="js/jquery-1.9.1.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$("#section-list").hide();
$("#section-title").click(function(){
$("#section-list").toggle();
});
});
</script>
</head>
<body>
<!-- container contains HEADER + NAV + CONTENT-->
<div class="container">
<!-- header -->
<div class="header">
<img id="logo" alt="Logo: Matteo Puccinelli profile" src="img/logoridim.png">
</div>
<!-- sections -->
<div class="content">
<!-- Article: sections -->
<div class="section">
<div id="section-title" class="section-title">
<h1>
Sections
</h1>
</div>
<div id="section-list">
<ul class="nav">
<li class="nav">Home</li>
<li class="nav">Dati personali</li>
<li class="nav">Esperienze lavorative</li>
<li class="nav">Educazione</li>
<li class="nav">Passioni</li>
</ul>
</div>
</div>
</div>
<!-- content -->
<div class="content">
<!-- Article: personal data -->
<div id="personaldata" class="article">
<div class="article-header">
<div class="article-title">
<h1>
Dati personali
</h1>
</div>
</div>
<div class="article-content">
<ul class="basic">
<li class="basic">Data di nascita: 18-01-1987</li>
<li class="basic">Luogo di nascita: Lucca</li>
<li class="basic">Nazionalità: italiana</li>
<li class="basic">Residenza: [privata]</li>
</ul>
</div>
</div>
<!-- Article: work experiences -->
<div id="work" class="article">
<div class="article-header">
<div class="article-title">
<h1>
Esperienze lavorative
</h1>
</div><!--
--><div class="article-more">
+ more
</div>
</div>
<div class="article-content">
<ul class="basic">
<li class="basic">(dal 2011) Redattore per il portale Libro-Mania.</li>
<li class="basic">(dal 2007) Lavori occasionali.</li>
<li class="basic">(2011-2012) Tirocinio formativo presso l'azienda Intecs SpA.</li>
</ul>
</div>
</div>
<!-- Article: education -->
<div id="education" class="article">
<div class="article-header">
<div class="article-title">
<h1>
Educazione
</h1>
</div><!--
--><div class="article-more">
+ more
</div>
</div>
<div class="article-content">
<ul class="basic">
<li class="basic">(dal 2012) Laurea di secondo livello in Scienze Informatiche, facoltà di Scienze matematiche, fisiche e naturali di Pisa.</li>
<li class="basic">(2012) Laurea in Scienze Informatiche, facoltà di Scienze matematiche, fisiche e naturali di Pisa. Votazione 106/110.</li>
<li class="basic">(2007) Diploma di perito industriale capotecnico all'istituto industriale E. Fermi di Lucca con specializzazione Informatica. Votazione 100/100.</li>
</ul>
</div>
</div>
<!-- Article: passions -->
<div id="passions" class="article">
<div class="article-header">
<div class="article-title">
<h1>
Passioni e Hobby
</h1>
</div><!--
--><div class="article-more">
+ more
</div>
</div>
<div class="article-content">
<p>
prova
</p>
</div>
</div>
</div> <!--content end -->
</div> <!-- container end -->
<!-- footer -->
<div class="footer centered-content">
<ul class="contacts">
<li class="contacts"><img alt="facebook social icon" src="img/fbsmall.png"></li><!--
--><li class="contacts"><img alt="twitter social icon" src="img/twittersmall.png"></li><!--
--><li class="contacts"><img alt="feed RSS" src="img/rsssmall.png"></li><!--
--><li class="contacts"><img alt="feed RSS" src="img/mail.png"></li>
</ul>
<p title="copyright" style="margin-top:15px; margin-bottom:15px;">
Copyright 2013 Matteo Puccinelli
</p>
</div>
</body>
</html>
Thank you in advance!
Firstly, are you sure that the second page is at the same zoom level?
I would think that the problem is using % instead of em.
The first thing to do would be to determine if setting elements to em fixes the issue where the size changes on a new tab. After that, you can work out what em to set each element to.
*
{
font-size: 20em !important;
}
1- Font sizes in percentage are calculated based on a reference.
2- Font sizes are inherited.
In your case you have not defined a reference, so the browsers' default font sizes for the parent of those elements are the base for calculation.
Different browsers can have different default font sizes for the same element.
This is why you are seeing the difference.
You can set a font size on the body and then use percentages for anything else.
em and % are pretty much the same thing - 2em = 200%. Each browser has a default font-size for most things which are possible to overwrite. Using * with !important is a very crude way of doing things because you will have to use !important if you want to override anything subsequently.
What you ideally need to do is to use:
html, body, table {
font-size: 13px;
}
Additionally instead of using to blank out the space between you footer navigation you can do this:
.footer ul {
font-size: 1px;
}
.footer li {
font-size: 13px;
}
http://jsfiddle.net/hDLry/

Categories

Resources