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
Related
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/
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;}
I create a webpage which is scroll horizontal from
http://www.pixxelfactory.net/jInvertScroll/
but now i am create a menu bar when i am click on menu bar the i will scroll left to div
my code is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>The Hot Air Balloon</title>
<!--<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,700" rel="stylesheet" type="text/css" /> -->
<link rel="stylesheet" href="css/jInvertScroll.css" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" >
function changeonhover(a)
{
for(var i =1 ;i<=4;i++)
{
if(i==a)
{
document.getElementById("link"+i).style.color = "blue";
}
else
{
document.getElementById("link"+i).style.color = "white";
}
}
}
</script>
<style type="text/css">
#header {
position: fixed;
top: 0;
z-index: 500;
height: 45px;
}
</style>
</head>
<body>
<div id="header">
<a href="#div1" id="link1" >Div1 </a>
<a href="#div2" id="link2" >Div2 </a>
<a href="#div3" id="link3" >Div3 </a>
<a href="#div4" id="link4" >Div4 </a>
</div>
<div class="container">
<!--<div class="horizon scroll">
<img src="images/background.png" alt="" />
</div>
<div class="middle scroll">
<img src="images/cloudsandballoons.png" alt="" />
</div>
<div class="panel1">
-->
<div class="front scroll">
<h1 class="intro">Scroll down</h1>
<div id="div1" onmouseover="changeonhover('1')" class="panel1 page">
<h2>The Hot Air Balloon</h2>
<p>
The hot air balloon is the oldest successful human-carrying flight technology. It is part of a class of aircraft known as balloon aircraft.
</p>
<p>
On November 21, 1783, in Paris, France, the first untethered manned flight was performed by Jean-François Pilâtre de Rozier and François Laurent d'Arlandes in a hot air balloon created on December 14, 1782 by the Montgolfier brothers. Hot air balloons that can be propelled through the air rather than just being pushed along by the wind are known as airships or, more specifically, thermal airships.
</p>
</div>
<div id="div2" onmouseover="changeonhover('2')" class="panel2 page">
<h2>How they work</h2>
<p>A hot air balloon consists of a bag called the envelope that is capable of containing heated air. Suspended beneath is a gondola or wicker basket (in some long-distance or high-altitude balloons, a capsule), which carries passengers and (usually) a source of heat, in most cases an open flame.
</p>
<p>
The heated air inside the envelope makes it buoyant since it has a lower density than the relatively cold air outside the envelope.
</p>
</div>
<div id="div3" onmouseover="changeonhover('3')" class="panel3 page">
<h2>Practicalities</h2>
<p>As with all aircraft, hot air balloons cannot fly beyond the atmosphere. Unlike gas balloons, the envelope does not have to be sealed at the bottom since the air near the bottom of the envelope is at the same pressure as the air surrounding.
</p>
<p>
For modern sport balloons the envelope is generally made from nylon fabric and the inlet of the balloon (closest to the burner flame) is made from fire resistant material such as Nomex. </p>
</div>
<div id="div4" onmouseover="changeonhover('4')" class="panel4 page">
<h2>Modern ballooning</h2>
<p>
Beginning during the mid-1970s, balloon envelopes have been made in all kinds of shapes, such as rocket ships and the shapes of various commercial products, though the traditional shape remains popular for most non-commercial, and many commercial, applications.
</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="http://www.pixxelfactory.net/jInvertScroll/js/jquery.jInvertScroll.js"></script>
<script type="text/javascript">
(function($) {
$.jInvertScroll(['.scroll']);
}(jQuery));
</script>
<script type="text/javascript">
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
</script>
</body>
</html>
but when i click on link i does not work. please help me
Link
You should change this
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
To this (you want the top value to change to the left position value. So scrollTop and position().left
$('html, body').stop().animate({
'scrollTop': $target.position().left
}, 900, 'swing', function () {
window.location.hash = target;
});
On your fiddle, the content div are all on the same "position" so when you click on the links it will not do anything because every div are already on sight.
Instead of trying to use the internal link which are normally used for vertically scrolling, would you mind trying to call your JinvertScroll function on Click on the div links with a parameter of the width from the internal div?
I implemented two different jquery scripts for a website. One is for "unslider" to view sliding photos in the banner div and the other is a hovering underline called magicline.js for the menu div. The problem is unslider stops working when I want to use magicline.js for the menu div. It looks like these two scripts are in conflict with each other. I can't figure out what is happening between these two scripts. Let me know if you have an idea
You can view the website that I am working on at bravodesignbc.com
Here is the html for the site:
<!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" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<title>Untitled Document</title>
<script src="scripts/jquery-1.10.2.min.js"></script>
<script src="scripts/unsliderNew.js"></script>
<script src="scripts/magicLine.js"></script>
<script>
$(function() {
$('.banner').unslider();
});
$('.banner').unslider({
speed: 400, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: false, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
</script>
</head>
<body>
<!---
--->
<div id="header">
<div id="headerWrap">
<div id="brand">
<img style="position: absolute; top: 18px; left: 0px;" src="images/bdLogo.png" />
<h1>Bravo Design</h1>
<h3>Renovation & Construction</h3>
</div>
<p id=rightHead> contact us <br /> 604.723.6059</p>
</div>
</div>
<div class="menuWrap">
<ul class="group" id="menu">
<li class="current_page_item">Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
<div id="feature">
<div class="banner">
<div class="buttonPrev">
<img src="images/prev.png" />
</div>
<div class="buttonNext">
<img src="images/next.png" />
</div>
<div class="bottomBanner">
<h2>Serving the lower mainland<br />
for over twenty years
</h2>
</div>
<script>
var unslider = $('.banner').unslider();
$('.unslider-arrow').click(function(event) {
event.preventDefault();
if ($(this).hasClass('next')) {
unslider.data('unslider')['next']();
} else {
unslider.data('unslider')['prev']();
};
});
</script>
<ul>
<li><img src="images/knappen.jpg" /></li>
<li><img src="images/closeupChandelier.jpg" /></li>
<li class="listBg"><h3>Slide 3</h3></li>
</ul>
</div>
</div>
<div id="content">
<div id="contentWrap">
<div id="desc"><p>Bravo Design was created by its founder Waldemar Slonina. Waldemar is pronounced “Valdemar” in Polish. Waldemar started Bravo Design unofficially in 1992 when he arrived in Vancouver from Europe. He originally worked for another larger company, at first, but did side jobs, where he first got a taste of owning a business. Then, he began with a small framing business, which quickly led to more work in renovations and construction around Vancouver. Soon, he started to gain business all around the Lower Mainland. Since, he has worked locally in the Tri-cities and Vancouver.<br /><br />
His former clients would classify him as reliable, on-budget, hard working, on-schedule, and diligent. These qualities have helped him sustain a successful small business for over two decades. He approaches each new project with enthusiasm!<p>
</div>
<div id="column">
<h3 style="padding-left: 10px; padding-top: 10px;">Testimonials</h3>
<p style="padding: 10px; padding-top: 0px;">"The job you did with our kitchen is amazing yayayayyayayda" <br />
<i>-Art Vandelay,</i> Maple Ridge</p>
</div>
</div>
</div>
<div id="footer">
<div id="footerWrap">
<div id="leftFoot"><img style="position: absolute; top: 10px; left: 0px;" src="images/logoMini.png" />
<p style="position: absolute; top: 10px; left: 40px;" > Bravo Design</p>
<p style="position: absolute; top: 28px; left: 40px; font-size: 11px; border-top:solid 1px #FFF;" > Renovation & Construction</p>
</div>
<div id="rightFoot"><p style="font-size: 12px;">Copyright 2013. Bravo Design. All rights reserved.<br />
Website design by think Chameleon</p></div>
</div>
</div>
</body>
</html>
I have a web page that has JQuery tabs with iFrames loaded in the 2nd through 4th tab. My problem is in a button I've added to the first tab. I want that button, when pressed, to change to the next tab.
EDIT 1: Here is a fiddler that shows my problem. http://jsfiddle.net/lochalan/AXa9J/
Webpage:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Student Application</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="/user/tabs.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html {
font-size:10px;
}
.iframetab {
width:100%;
height:auto;
border:0px;
margin:0px;
position:relative;
top:-13px;
}
.ui-tabs-panel {
padding:5px !important;
}
.openout {
float:right;
position:relative;
top:-28px;
left:-5px;
}
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td>
<img src="img/logo960x100moodle.png" width="960" height="92" alt=""><br>
</td></tr>
</table>
<div id="tabs">
<ul>
<li>Instructions</li>
<li><a class="tabref" href="#tabs-2" rel="/user/application-tab.php">Student Information</a></li>
<li><a class="tabref" href="#tabs-3" rel="/user/emergency-tab.php">Emergency Contact</a></li>
<li><a class="tabref" href="#tabs-4" rel="/user/healthform-tab.php">Health Form</a></li>
</ul>
<div id="tabs-1" class="tabMain">
<h2>Welcome to QSI Shekou!</h2>
<p>This application is designed to give the school all the information needed to make an informed decision as to whether QSI is the best school for your child. We believe all children can be successful and we are proud that you have choosen QSI Shekou as that place. In the next few minutes, you will be presented with 3 seperate application forms. The first application gathers the needed biographical information about your child. The second form provides the school with emergency contact information and instructions in the event the school needs to contact someone on your child's behalf. The third form is our health form. This provides the school with information about your child's health in order to help us make QSI Shekou a fun and safe place to learn and grow.</p>
<p><strong>Remember to give the following documents to the admissions department:</strong></p>
<ul>
<li>Immunization records (copy)</li>
<li>Health / Emergency Form (Found on our Website)</li>
<li>Previous School Records (copy)</li>
<li>Student's Passport (copy)</li>
<li>Student's Visa (copy)</li>
<li>Mother's Passport (copy)</li>
<li>Mother's Visa (copy)</li>
<li>Father's Passport (copy)</li>
<li>Father's Visa (copy)</li>
<li>3 Student Passport Photos</li>
</ul>
<button class="nexttab" href="#"><strong>Let's get started!</strong></button>
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
<div id="tabs-4">
</div>
</div>
</body>
</html>
Javascript / JQueryUI:
$(document).ready(function() {
var $tabs = $('#tabs').tabs();
$(".nexttab").click(function() {
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("option", "selected", selected + 1);
});
//get selected tab
function getSelectedTabIndex() {
return $tabs.tabs('option', 'selected');
}
//get tab contents
beginTab = $("#tabs ul li:eq(" + getSelectedTabIndex() + ")").find("a");
loadTabFrame($(beginTab).attr("href"),$(beginTab).attr("rel"));
$("a.tabref").click(function() {
loadTabFrame($(this).attr("href"),$(this).attr("rel"));
});
//tab switching function
function loadTabFrame(tab, url) {
if ($(tab).find("iframe").length == 0) {
var html = [];
html.push('<div class="tabIframeWrapper">');
html.push('<div class="openout"><img src="data/world.png" border="0" alt="Open" title="Remove iFrame" /></div><iframe class="iframetab" src="' + url + '">Load Failed?</iframe>');
html.push('</div>');
$(tab).append(html.join(""));
$(tab).find("iframe").height($(window).height()-80);
}
return false;
}
});
Why won't my button change the tab?
Use active option to select current or change tab
var selected = $("#tabs").tabs("option", "active");
$("#tabs").tabs("option", "active", selected + 1);
There's a few things wrong here, more than I'm willing to cover on a forum unfortunately.
If you're going to use jQueryUI then I suggest you go use ThemeRoller. Do a UI theme and use the CSS it generates for you. The classes are named very intuitively and it will help you identify what your functions are working on. Use Firefox with Firebug plugin so you can debug. You're on the right track but you're still cloudy on some core concepts.
jQuery Tabs API
jQueryUI ThemeRoller