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/
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.
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>
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;}
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 am having some difficulties when trying to hide the URL address for pop up window in javascript. Here is my html:
<div id="menu">
<ul>
<li><a onclick="PopupCenter('./about.html', 'About ePlanner',600,400);" href="javascript:void(0);">About ePlanner</a></li>
<li><a onclick="PopupCenter('./team.html', 'Project Members',600,400);" href="javascript:void(0);">Project Members</a></li>
<li><a onclick="PopupCenter('./faq.html', 'FAQ',600,400);" href="javascript:void(0);">FAQ</a></li>
</div>
And my javascript for pop up window:
<script>
function PopupCenter(pageURL, title,w,h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var targetWin = window.open (pageURL,title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
}
</script>
I was wondering is it possible to hide the URL address and as well as the window frame.
Thanks in advance.
To achieve Chrome popups without frames, try the code here (you may need to hardcode content from html pages or integrate with iFrames - let me know if you need help doing that portion):
http://www.sitepoint.com/forums/showthread.php?1175628-Remove-browser-box-border-from-pop-up-window
Here is the example from the resource above [it works great in my Chrome browser with frameless/borderless/address free popup]:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- only for this testpage! --><meta name="robots" content="noindex, nofollow" />
<!-- http://www.sitepoint.com/forums/showthread.php?1175628-Remove-browser-box-border-from-pop-up-window -->
<meta name="Description" content="Choose an Asheville painting company dedicated to providing the highest quality work while getting the job completed on budget and on time. SCI Painting in Burnsville near Asheville NC." />
<meta name="Keywords" content="painting company,exterior paint company,interior paint company" />
<meta name="author" content="SCI Painting" />
<meta name="copyright" content="2013 SCI Painting" />
<link rel="shortcut icon" href="http://scipainting.com/images/favicon.ico" />
<link href="http://scipainting.com/css/style.css" rel="stylesheet" type="text/css" />
<!--
http://www.sitepoint.com/forums/showthread.php?1175628-Remove-browser-box-border-from-pop-up-window
Thread: Remove browser box/border from pop up window
Oct 31, 2013, 11:11
Sculley
Code by Francky
-->
<title>test :: Choose a Quality Asheville Painting Company</title>
<style type="text/css">
html {
height:100%;
overflow-y:scroll;
}
#grayOverlay {
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background-color:#000;
opacity:.7;
z-index:1;
display:none;
}
#center {
position:relative;
}
#popupBox {
top:25px;
left:25px;
right:25px;
bottom:0;
overflow:auto;
background:#f5f5eb;
border:1px solid #e0e2cc;
padding:10px;
text-shadow:1px 1px white;
z-index:1;
}
h2 {
font-size:1.1em;
font-weight:normal;
}
#closePopupBox1,
#closePopupBox2 {
position:absolute;
right:0;
display:none;
}
#closePopupBox1 a,
#closePopupBox2 a {
margin:15px;
padding:0 4px;
border:1px solid #c0c0c0;
border-radius:6px;
background:red;
color:white;
font-size:.8em;
font-weight:bold;
}
</style>
</head>
<body>
<div id="grayOverlay"></div>
<div id="main">
<div id="top">
<div id="header">
<div class="header"><br />
MARC JACKSON<br />
mjackson#scipainting.com<br />
phone 828.442-4107<br />
fax 828.645.6284<br />
65 Monticello Rd./<br />
Weaverville NC 28787
</div><!--end div .header -->
</div><!--end div #header -->
</div><!--end div #top -->
<div id="top-navi">
</div><!--end div #top-navi -->
<div id="mid">
<div id="left-side">
<a href="#popupBox" onclick="openPop();return false">
<img width="125" height="60" alt="What others say" src="http://scipainting.com/images/quote-web.jpg" />
</a>
<img src="http://scipainting.com/images/image1-shadow.png" width="148" height="158" class="first" alt="Image 1" />
<img src="http://scipainting.com/images/image2-shadow.png" width="138" height="141" alt="Image2" />
<img src="http://scipainting.com/images/image3-shadow.png" width="138" height="141" alt="Image 3" />
</div><!--end div left-side -->
<div id="center">
<div align="center"><img src="http://scipainting.com/images/image-main.jpg" width="634" height="292"
alt="SCI Painting in Burnsville NC near Asheville, NC" />
</div>
<div class="txtbox">
<p>Residential and Commercial <br />
projects</p>
<p>Interior and exterior paint <br />
and stain services</p>
<p>Roof and floor coatings</p>
<p>Deck maintenance and cleaning</p>
<p>Pressure washing</p>
<p>Log home protection</p>
<p>Faux finishes</p>
</div><!--end div .txtbox -->
<p>SCI Painting was founded to meet the demand for high quality painting and excellent customer service.
The joining of two family businesses, Sineath Construction’s paint division and C. Manning Paint Service,
provides all of western North Carolina with unmatched services, excellence and value important to families
today. These two companies together bring over 40 years of experience, quality work, reliable service and
a long list of satisfied customers to SCI Painting. We are fully licensed and insured and look forward to
being your choice in paint companies.</p>
<p>Marc Jackson, manager, is focused on keeping pace with the growing needs of clients in western North
Carolina and the challenges that our harsh climate can create. He, along with our experienced employees,
understands the details of all jobs, residential and commercial. Marc is dedicated to providing the highest
quality work while getting the job completed on budget and on time. Marc is not satisfied until the customer
is satisfied. This is all possible because of clear communication that is maintained with the client before,
during, and after the project.</p>
<div id="popupBox">
<h2 id="popHeader">People say...</h2>
<div id="closePopupBox1">X</div>
<p>Meredith Ledford</p>
<p>August 21, 2013</p>
<p>Marc Jackson<br />
SCI Painting<br />
65 Monticello Rd.<br />
Weaverville, NC 28787</p>
<p>Dear Mr. Jackson,</p>
<p>I am writing to you to reiterate my deepest gratitude for the exceptional
work SCI Painting<br />
completed in our new home.</p>
<p>My husband and I were especially impressed given the large scope of the
job and the limited amount of time afforded to you for completion.</p>
<p>Your team of professional painters arrived on the first day eager to
begin and they remained productive and enthusiastic until the job was
completed. Because my husband was out of town, I interacted with your crew
the majority of the time. They were always very friendly and accommodating.<br />
I was especially touched when they
presented with great pride to me the freshly painted nursery – it was
beautiful! I also appreciated their patience as I decided which color to
paint the trim. I struggled with the decision, but I never felt rushed.</p>
<p>Because of SCI Painting’s excellent service, my husband and I were able
to complete our move into our new home before our son was born. Now we
admire your handiwork every day in our new home and marvel at the how
efficiently your crew completed the work. SCI Painting is a first rate
business that strikes the rare balance of value and professionalism. We are
so grateful that we were referred to you for the huge job our home presented
and would enthusiastically recommend your services to anyone.</p>
<p>Thanks again and we hope to see you at "The Rock" this fall for some ASU
football. Go APPS!</p>
<p>Sincerely,</p>
<div id="closePopupBox2">X</div>
<p>Meredith & Dwayne Ledford</p>
</div><!-- end div #popupBox -->
</div><!--end div #center -->
</div><!--end div #mid -->
</div><!--end div main -->
<div id="footer">
<div class="copyright">
<p>© Copyright 2013 scipainting.com | All Rights Reserved <br />
SCI Painting is a partnership with <a href="http://www.sineathconstruction.com/">Sineath Construction in
Weaverville, NC near Asheville, NC</a></p>
</div><!--end div .copyright -->
<div class="copyright">
<p>phone 828.645.6284 | fax 828.682.0676 | 65 Monticello Rd. | P.O. Box 1603 | Weaverville NC 28787</p>
</div><!--end div .copyright -->
</div><!--end div footer -->
<script type="text/javascript">
//<![CDATA[
document.getElementById('popupBox').style.position="absolute";
document.getElementById('popupBox').style.display="none";
document.getElementById('popHeader').style.display="none";
document.getElementById('closePopupBox1').style.display="block";
document.getElementById('closePopupBox2').style.display="block";
function openPop(){
document.getElementById('popupBox').style.display="block";
document.getElementById('grayOverlay').style.display="block";
}
function closePop(){
document.getElementById('popupBox').style.display="none";
document.getElementById('grayOverlay').style.display="none";
}
//]]>
</script>
</body>
</html>
It looks like you can find your answer here for no menu bars:
Opening javascript popup window without address bar and title with height and width set in percentage according to screen resolution
Try this code for no frames:
<script language="Javascript">
<!--
var Width=200 // window width
var Height=200 // window height
var Left = (screen.width/2)-(Width/2) // center
var Top = (screen.height/2)-(Height/2) // center
var Autoclose = true
function openFrameless(url){
FrameLess = window.open(url,"noframewin","fullscreen")
FrameLess.document.body.style.overflow="auto" // auto scrollbars
FrameLess.resizeTo(Width,Height) // resize
FrameLess.moveTo(Left,Top) // position
FrameLess.focus()
if (Autoclose){
window.onunload = function(){
FrameLess.close()
}
}
}
// -->
</script>
Open Frameless