In my Collapsible header I am trying to append an extra anchor tag which is pushed away from the header because this is not supported for JQuery mobile headers. Is there a way to add an extra link/action to the heading of a Collapsible in a neath way?
Thanks in advance
You can inject a button inside the collapsible from the $(document).on("collapsiblecreate") event, but I prefer to use pre-enhanced markup as described here (this should improve performance during page creation).
Here is an example (I believe everybody who is using JQM had such a problem at least one time...)
So, basically, instead of relying completely to the data-role enhancement, You need to write in Your html the expanded markup and the classes which JQM would add later during the widget initialization. To tell JQM that the markup is pre-enhanced add the data-enhanced="true" data-attribute to the widget.
This way, You are free to add whichever element You want inside any widget (search-inputs & so on). Just look inside the chrome developer tools: mostly, You will only need to copy-and-paste the markup enhanced by JQM using its own standard method and use that in Your html page.
$(document).on("collapsiblecreate", ".ui-collapsible", function(e) {
/* $(this) is the collapsible */
});
.collapsible-assist {
position: relative;
}
.collapsible-assist .ui-collapsible-heading {
margin-right: 2.5em;
}
.collapsible-assist.square .ui-collapsible-heading {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.collapsible-assist .assist-btn {
position: absolute;
right: 0;
}
.collapsible-assist.square .assist-btn {
margin: 0;
border-bottom-right-radius: inherit;
border-top-right-radius: inherit;
}
.collapsible-assist .ui-collapsible-content {
margin-top: -1px !important;
border-top-width: 1px !important;
border-top-right-radius: inherit;
}
/* JQM no frills */
.ui-btn,
.ui-btn:hover,
.ui-btn:focus,
.ui-btn:active,
.ui-btn:visited {
text-shadow: none !important;
}
.ui-btn:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
/* Speed-up some android & iOS devices */
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page">
<div role="main" class="ui-content">
<div data-role="collapsible" data-enhanced="true" class="collapsible-assist square ui-collapsible ui-collapsible-inset ui-collapsible-themed-content ui-corner-all ui-collapsible-collapsed">
Help
<h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed">Farm animals<div class="ui-collapsible-heading-status">click to expand contents</div></h4>
<div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
<ul data-role="listview" data-enhanced="false">
<li>Chicken</li>
<li>Cow</li>
<li>Duck</li>
</ul>
</div>
</div>
<br>
<div data-role="collapsible" data-enhanced="true" class="collapsible-assist round ui-collapsible ui-collapsible-inset ui-collapsible-themed-content ui-corner-all ui-collapsible-collapsed">
Help
<h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed">Legend<div class="ui-collapsible-heading-status">click to expand contents</div></h4>
<div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
<form>
<div data-role="controlgroup">
<input name="checkbox-1-a" id="checkbox-1-a" type="checkbox" checked>
<label for="checkbox-1-a">One</label>
<input name="checkbox-2-a" id="checkbox-2-a" type="checkbox">
<label for="checkbox-2-a">Two</label>
<input name="checkbox-3-a" id="checkbox-3-a" type="checkbox">
<label for="checkbox-3-a">Three</label>
</div>
</form>
</div>
</div>
</div>
<div data-role="popup" id="popup" class="ui-content" data-theme="a">
<p>I'm a help popup.</p>
</div>
</div>
</body>
</html>
Related
Concrete problem is that I want have a page on server with structure of elements with nice positioning, but I couldn´t get it into desired shape, but only with setting them absolute position counted by screen resolution on mobile phones with jquery. After page load bootstrap will move my elements with absolute path more up. All those elements are at the bottom of page. I know that it is bootstrap, because when I will not add bootstrap server links, everything is fine as far as position of my elements is concerned. But naturally I need bootstrap there.
I tried to figure it out in many ways, but I ended with tryings to wait with jquery till the page load and after that try to set position. But no, after all moving in function that is called after page load, bootstrap starts doing it´s job later as last and don´t know how and why, but it trim my elements and push all my circles all up with bad height positions.
$(document).ready(function () {
// script for setting bubble circles in right place on whatever screen
// this is updated question for correct answer below, id=allCircles is id of global div for circles
$width = $('#allCircles').width();
$circleWidth = parseInt($('.circle').css('width'),10);
$circlesDistance = 60;
$leftCircles = ($width)/2 -(($circlesDistance/2)+$circleWidth);
$rightCircles = ($width)/2 + ($circlesDistance/2);
$('.left-circle').css('left', $leftCircles+'px' );
$('.right-circle').css('left', $rightCircles +'px');
$actPosition = $("#leftDownCircle").position();
$heightMargin= $actPosition.top + $circleWidth/2;
$('#leftDownCircle').css('top', $heightMargin+'px' );
$('#rightDownCircle').css('top', $heightMargin+'px' );
$leftMargin = ($width)/2 - ($circleWidth/2);
$heightMargin = ($heightMargin) -($circleWidth/2)-($circleWidth/4);
$('#middleCircle').css('position','absolute');
$('#middleCircle').css('left', $leftMargin +'px' );
$('#middleCircle').css('top', $heightMargin +'px' );
});
* {margin:0;}
.circle {
width: 100px;
height: 100px;
background: lightgrey;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
line-height: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.left-circle {
position: absolute; left: 15%;
}
.right-circle {
position: absolute; left: 60%;
}
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="left-circle">
<div class="circle">
<h1>9</h1>
<p>Level</p>
</div>
</div>
<div class="right-circle">
<div class="circle">
<h1>9</h1>
<p>Level</p>
</div>
</div>
<div id="middleCircle">
<div class="circle">
<h1>9</h1>
<p>Level</p>
</div>
</div>
<div class="left-circle" id="leftDownCircle">
<div class="circle">
<h1>9</h1>
<p>Level</p>
</div>
</div>
<div class="right-circle" id="rightDownCircle">
<div class="circle" >
<h1>9</h1>
<p>Level</p>
</div>
</div>
</body>
</html>
When I will add in this code to html header this:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Then on phone it will result to this:
Could someone help me to answer how this can be done programmatically correctly? (maybe why this not work or what is better practice to make the desired result as in snippet, thanks in advance for any help and your time!)
Now concrete site whith its code in it. Web emulator looks:
http://mobiletest.me/htc_one_emulator/?u=https://stackoverflowtest.000webhostapp.com/
Concrete site to test with your mobile device:
https://stackoverflowtest.000webhostapp.com/
Notice left-down waiting for bootstrap and after reload:
The basic problem you are having is that by making the elements absolute, they are positioned in relation to the nearest non-static parent element. I don't see any non-static parent elements on your page, so in your case they will be positioned relative to the body. This causes a problem as you have lots of other elements that can be different sizes (e.g. because of text wrapping over multiple lines on mobile screen that would only take one line on desktop size) before you get to the circles so determining the right top value in relation to body is not possible.
Note, two of your circles don't have a top value set, so they are placed in their default static places, which is why you are getting the overlaps.
To fix it, you need to place a non-static element around your absolute elements (e.g. by giving it a position:relative style). Position top and left values the circles in relation to that element and give the element a height that will give the circles enough space.
e.g.
<div style="min-height: 550px;position:relative;">
<div class="left-circle" style="left: 30px;">
<div class="circle">
<h2>345</h2>
<p>Bodov</p>
</div>
</div>
<div class="right-circle" style="left: 190px;">
<div class="circle">
<h2>11</h2>
<p>Best of</p>
</div>
</div>
<div id="middleCircle" style="position: absolute;
left: 110px;
top: 100px;">
<div class="circle">
<h1>9</h1>
<p>Uroven</p>
</div>
</div>
<div class="left-circle" id="leftDownCircle" style="left: 30px;
top: 198px;">
<div class="circle">
<h2>1622</h2>
<p>Zaradenych knih</p>
</div>
</div>
<div class="right-circle" id="rightDownCircle" style="left: 190px;
top: 198px;">
<div class="circle">
<h2>124</h2>
<p>Citatelov</p>
</div>
</div>
</div>
The key things to note here are:
I have put all your circles inside a div with a position:relative and a height:550px;
I have changed the top values of the circles to position themselves in relation to this new parent div.
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!
i have 4 images and then i have applied automatic swiping,It's working nice,but now i have added text (skip) on Image when i click on Skip,text is Redirected to another page(text.html)
My Problem is When i Click Skip it's Redirected page(text.html) but page css not applied.
But with out click on skip with automatic sliding redirected page(text.html) is fine.
<div id="container">
<img src="../images/4 copy.jpg" alt=""/><br/>
<div class="caption"><font color="white" >fourth Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd<br/> asdasdasd asdadasd asdasdad</font> <font color="white"><span class="one">skip</span></font>
</div>
</div>
when click skip it's redirect to text.html but text.html css not applied total page will changed
when call direct text.html it's displayed nice css also applied
can you please tell me how to make css apply to text.html when i click skip.
Thanks in Advanced
Text.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/jquery.mobile-1.4.2.min.css">
<script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/jquery.mobile-1.4.2.min.js"></script>
<style>
.ui-page {
background-color: #666 !important;
}
.ui-content {
background: transparent url(http://brandthunder.com/wp/wp-content/uploads/2011/11/Mac_Desktop_Background.jpg);
background-size : 100% 100%;
color:#FFFFFF;
text-shadow:1px 1px 1px #000000;
}
.ui-btn-icon-right:after {
display:none;
}
#one
{
padding : 0;
margin : 0;
}
#two
{
padding : 0;
margin : 0;
}
#four
{
padding-top :1%;
margin : 0;
}
</style>
<script type='text/javascript'>//<![CDATA[
var screen = $.mobile.getScreenHeight();
var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
var content = screen - header - footer - contentCurrent;
$(".ui-content").height(content);
});//]]>
</script>
</head>
<body>
<div data-role="page" data-theme="a" id="p1">
<div data-role="header" data-theme="a" data-position="fixed" id="header" style="background:#808080;">
<h1>User guide</h1>
</div>
<div data-role="content" class="ui-body ui-body-a ui-corner-all" style="background: #666;color:white;font-family:sans-serif">
<p id="one">Step 1:</p>
<p id="two">Fill in your Details to Get Started </p>
</div>
<div data-role="content" class="ui-body ui-body-a ui-corner-all" style="background: #666;color:white;font-family:sans-serif">
<p id="one">Step 2:</p>
<p id="two">Browse the application</p>
<p id="four"><font color="green">Save with Lighting</font></p>
<p> in your Deatails to Get Started </br>
Fill in your Deatails to Get Started </p>
<h5><font color="green">Explore light options</font></h5>
<p>Fill in your Deatails to Get Started </br>
Fill in your Deatails to Get Started </p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" id="footer" style="background:#808080;">
<ul data-role="listview" >
<!-- <li style="text-align:center;">Save with lighting</li> -->
<li style="background:#808080;"></h3>good day</h3></li>
</ul>
</div>
</div>
</body>
</html>
This is a common jQuery Mobile misconception.
You need to learn how jQuery Mobile handles pages. Only initial HTML file is fully loaded into the DOM. Every other HTML page is only partially loaded, basically lets say we have 2 HTML files, one is called index.html and second one is called second.html.
When jQuery Mobile app is initialized, framework will load index.html into the DOM.
When you go to other page, in our case second.html, only data-role="page" container div is going to be loaded into the DOM, everything else is discarded.
This is because jQuery Mobile used AJAX for page handling. If first file is already inside the DOM, there's no reason in loading HEAD content of other HTML files.
Read more about it here.
In your case just move your <style></style> to a data-role="page" container div.
Basically do this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.2.min.css"/>
<script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/jquery.mobile-1.4.2.min.js"></script>
<script type='text/javascript'>//<![CDATA[
var screen = $.mobile.getScreenHeight();
var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
var content = screen - header - footer - contentCurrent;
$(".ui-content").height(content);
});//]]>
</script>
</head>
<body>
<div data-role="page" data-theme="a" id="p1">
<style>
.ui-page {
background-color: #666 !important;
}
.ui-content {
background: transparent url(http://brandthunder.com/wp/wp-content/uploads/2011/11/Mac_Desktop_Background.jpg);
background-size : 100% 100%;
color:#FFFFFF;
text-shadow:1px 1px 1px #000000;
}
.ui-btn-icon-right:after {
display:none;
}
#one
{
padding : 0;
margin : 0;
}
#two
{
padding : 0;
margin : 0;
}
#four
{
padding-top :1%;
margin : 0;
}
</style>
<div data-role="header" data-theme="a" data-position="fixed" id="header" style="background:#808080;">
<h1>User guide</h1>
</div>
<div data-role="content" class="ui-body ui-body-a ui-corner-all" style="background: #666;color:white;font-family:sans-serif">
<p id="one">Step 1:</p>
<p id="two">Fill in your Details to Get Started </p>
</div>
<div data-role="content" class="ui-body ui-body-a ui-corner-all" style="background: #666;color:white;font-family:sans-serif">
<p id="one">Step 2:</p>
<p id="two">Browse the application</p>
<p id="four"><font color="green">Save with Lighting</font></p>
<p> in your Deatails to Get Started <br/>
Fill in your Deatails to Get Started </p>
<h5><font color="green">Explore light options</font></h5>
<p>Fill in your Deatails to Get Started <br/>
Fill in your Deatails to Get Started </p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" id="footer" style="background:#808080;">
<ul data-role="listview" >
<!-- <li style="text-align:center;">Save with lighting</li> -->
<li style="background:#808080;"><h3>good day</h3></li>
</ul>
</div>
</div>
</body>
</html>
for js try
document.location = url
with jQuery you can define class on which you can perform an on-click event
like
$( ".skipclass" ).on( "click", function() {
// do something here like
// window.location.href='the_link_to_go_to.html';
// or ajax request
});
further info http://api.jquery.com/on/
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/
I was trying out jquery-overlay-example but with radio buttons. So after the page loads, I can make a selection but I cannot change my selection to other option. My code is here:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Tools standalone demo</title>
<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<style>
.modal {
background-color:#fff;
display:none;
width:350px;
padding:15px;
text-align:left;
border:2px solid #333;
opacity:0.8;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-moz-box-shadow: 0 0 50px #ccc;
-webkit-box-shadow: 0 0 50px #ccc;
}
.modal h2 {
margin:0px;
padding:10px 0 10px 45px;
border-bottom:1px solid #333;
font-size:20px;
}
</style>
</head>
<body><!-- the triggers -->
<p>
<input type="radio" name="group1" value="Milk" class="modalInput" rel="#yesno"> Milk<br>
<input type="radio" name="group1" value="Butter" class="modalInput" rel="#yesno"> Butter<br>
<input type="radio" name="group1" value="Cheese" class="modalInput" rel="#yesno"> Cheese
</p>
<!-- yes/no dialog -->
<div class="modal" id="yesno">
<h2>This is a modal dialog</h2>
<p>
You can only interact with elements that are inside this dialog.
To close it click a button or use the ESC key.
</p>
<!-- yes/no buttons -->
<p>
<button class="close"> Yes </button>
<button class="close"> No </button>
</p>
</div>
<!-- user input dialog -->
<div class="modal" id="prompt">
<h2>This is a modal dialog</h2>
<p>
You can only interact with elements that are inside this dialog.
To close it click a button or use the ESC key.
</p>
<!-- input form. you can press enter too -->
<form>
<input />
<button type="submit"> OK </button>
<button type="button" class="close"> Cancel </button>
</form>
<br />
</div>
<script>
$(document).ready(function() {
var triggers = $(".modalInput").overlay({
// some mask tweaks suitable for modal dialogs
mask: {
color: '#ebecff',
loadSpeed: 200,
opacity: 0.9
},
closeOnClick: false
});
});
</script>
</body>
</html>
Pardon me if this is a simple question, I am relatively new to JQuery.
Appreciate your help!
Try this - DEMO
$(document).ready(function() {
var triggers = $(".modalInput").overlay({
mask: {
color: '#ebecff',
loadSpeed: 200,
opacity: 0.9
},
closeOnClick: false,
onClose: function() {
this.getTrigger().prop('checked', true);
}
});
});