unslider not working when using another jquery script - javascript

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>

Related

jQuery plugin slick is not working

I downloaded the jQuery files to create image sliders for my Website, but it's not working at all. Can somebody teach me which codes I have problems? thank you..
<body>
<ul class="slider" "position: relative; top: 0px; left: 0px; width: 600px;
height: 300px;">
<li><div class="slick"><img src="./images/sample-01.png"></div></li>
<li><div class=""><img src="./images/sample-02.png" /></div></li>
<li><div class="slick"><img src="./images/sample-03.png" /></div></li>
<li> <div class="slick"><img src="./images/sample-01.png" /></div>
<li> <div class="slick"><img src="./images/sample-02.png" /></div></li>
<li><div class="slick"><img src="./images/sample-03.png" /></div></li>
</ul>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script src="jquery-migrate-1.2.1.min.js"></script>
<script src="slick.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($){
var_slideshowTransitions = [
{$Duration:1200,$Opacity:2}
];
var options={
$SlideDuration:500,
$AutoPlay:true,
$DragOrientation:3,
$Idle:1500,
$slideshowOptions: {
$Class:$JssorslideshowRunner$,
$Transitions:_slideshowTransitions,
$TransitionsOrder:1,
$ShowLink: true
}
};
var slider= new $Slider$("slider", options);
});
</script>
First off, your HTML is poorly structured and invalid. You didn't close your 4th <li> element, also, in the <ul> element, you have to use the style attribute to apply styles inline. In your case, like this: <ul class="slider" style="position: relative; top: 0px; left: 0px; width: 600px;height: 300px;">.
I have no idea where you got that Javascript code from but the slickJS documentation is pretty simple to follow.
My code below implements a slideshow which you can copy, paste and modify, if you like. Look into the docs. You can set or change a ton of options to help get your slider to do what you want. Also, make sure you are importing everything in the correct order. jQuery -> slickjs -> custom Javascript. Make sure the slick CSS is linked in the head.
$(document).ready(function (){
$('.slider').slick({
dots:true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1
});
});
/*
modify the slider container with your own custom CSS
to have it fit or placed in your page how you want.
*/
.slider {
width:70%;
margin:0 auto;
}
/*
I put divs inside that can have their padding modified
so the images aren't directly up against each other.
Feel free to play with this CSS to desired affect.
*/
.slide-image-container {
padding:2%;
}
/*
This CSS forces the inner images to size to the parent (slide) container
*/
.slide-image-container img {
width:100%;
}
<link href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" rel="stylesheet"/>
<link href="http://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<div>
<div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
</div>
<div>
<div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
</div>
<div>
<div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
</div>
<div>
<div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
</div>
<div>
<div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
</div>
<div>
<div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
</div>
</div>
<script src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>

I am trying to animate the navigation bar on a website

I have this code which is meant to use jQuery so that when the 'Show navigation' button is clicked, that button will disappear, a 'Hide Navigation' button will appear, as will the Navigation options. The hope would be then that the 'Hide' button would do the opposite. I can get the show hide buttons to disappear and reappear accordingly, but the navigation options just stay in place.
Here is the code:
var nav = function(){
$('.navtoggle').click(function(){
$('#navbar').animate({
top:'10px'
}, 200);
$('.navtoggle').animate({
top:'-40px'
}, 200);
$('.navexit').animate({
top:'0px'
}, 200);
});
$('.navexit').click(function(){
$('#navbar').animate({
top:'-40px'
}, 200);
$('.navtoggle').animate({
top:'0px'
}, 200);
$('.navexit').animate({
top:'-40px'
}, 200);
});
};
$(document).ready(nav);
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home Page</title>
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script src="navanimate.js"></script>
<div id="top_container">
<div id ="navbar">
<a class="navigation" href="index.html"><p>Home</p></a>
<a class="navigation" href="CV.html"><p>CV</p></a>
<a class="navigation" href="Video.html"><p>Video</p></a>
<a class="navigation" href="Hobbies.html"><p>My Hobbies</p></a>
<a class="navigation" href="Coursework.html"><p>Coursework</p></a>
<a class="navigation" href="Animation.html"><p>Animation</p></a>
</div>
<div class ="navtoggle">Show Navigation</div>
<div class ="navexit">Hide Navigation</div>
<h1>Home Page</h1>
</div>
<div id="main_content">
<p id="site_intro">Over the 6 pages of this website, I shall detail and exemplify everything I have learnt in the labs for the Introduction to Multimedia module. Browse and discover the many things I too have learnt over the last semester. <br><br>Throughout this site you will find many things, including my experience in the past, a short video of me, my favourite things to do, my work this term and the animation developed for the site. Enjoy!</p>
<ul><h3>About Me</h3>
<li>Candidate Number: 106244</li>
<li>Course: Games and Multimedia Environments</li>
<li>Year of Study: First year</li>
</ul>
<img src="images/IMG_0334.JPG" width="932" height="1142" alt="Good ol' picture of myself"/>
</div>
<div id="social_links">
<ul>Find Me Here
<li><img src="images/icons/Free-Shaded-Social-Icons/48/facebook-Icon.png" width="30" height="30" alt="My Facebook"/>Facebook</li>
<li><img src="images/icons/Free-Shaded-Social-Icons/48/Tumblr-Icon.png" width="30" height="30" alt="My tumblr Blog"/>Tumblr</li>
<li><img src="images/icons/Free-Shaded-Social-Icons/48/Deviantart-Icon.png" width="30" height="30" alt=""/>DeviantArt</li>
</ul>
</div>
<div id="footer"></div>
</body>
</html>

how to redirect page

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/

Pop up window with hidden URL address

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

Quick button pressing for iOS web app

I couldn't find anything on how fast a button was pressed, so I hope this is OK. This is for a web-application.
For those of you who have an iPhone (or most modern smartphones now), if you have the pin styled unlock screen when you unlock your phone, the smartphone recognizes every touch you do, as quick as you do it.
The same is with a website, if you click on buttons quickly, it registers every click you do as soon as you do it.
However, I am having a problem crossing the two over.
I have a 'pin' styled login where the pin is just 1234 for test purposes. I want it so that someone can use it as a web-app and they have their unique pin to sign in quickly. However, if I try to put in 1234 quickly, it only registers 1 and 4 or sometimes 1 and 3 depending on how slow I do it. If I take my time and do it, then I can get all 4, but doing it quick is where my problem lies.
Overall question:
Is there any way for a web-app to register quick finger presses on smartphones (but primarily iOS?)
Code
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Pin</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src='http://code.jquery.com/jquery.min.js'></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class='container'>
<div class='row text-center'>
<div class='col-xs-12'>
<div class='small-circle a1'></div>
<div class='small-circle a2'></div>
<div class='small-circle a3'></div>
<div class='small-circle a4'></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="1"></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="2"></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="3"></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="4"></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="5"></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="6"></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="7"></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="8"></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="9"></div>
</div>
<div class='clearfix'></div>
<div class='col-xs-12'>
<div class='bottom_main num hover' data-number="0"></div>
</div>
</div>
</div>
</div>
<script src='script.js'></script>
</body>
</html>
CSS
body{
counter-reset: amount;
}
.num{
width:75px;
height:75px;
border:1px solid #000;
border-radius:100%;
line-height:75px;
margin:auto;
margin-top:30px;
counter-increment:amount;
}
.main:before{
content:counter(amount);
}
.bottom_main:before{
content:'0';
}
.active{
background:blue !important;
}
.small-circle{
display:inline-block;
width:20px;
height:20px;
border:1px solid #000;
border-radius:100%;
margin-top:20px;
}
jQuery
$(document).ready(function() {
var array = [];
var pin = "1234";
var a = 0;
$('.num').click(function(){
a++;
if (array.length <= 3)
{
array.push($(this).attr('data-number'));
}
});
setInterval(function() {
$('.a'+a).addClass('active');
if (array.length >= 4)
{
if (array.join("") === pin)
{
$('.small-circle').css('background','green');
$('.small-circle').removeClass('active');
}
else
{
array = [];
a = 0;
$('.small-circle').css('background','red');
$('.small-circle').removeClass('active');
}
}
}, 100);
});
And a jsFiddle for quick checking, although I'm not sure that it will work on an iPhone.
A click performed by the user takes 300ms to dispatch an event. This is just to detect possible doubleclicks.
You can prevent this by listening to touchstart-touchend and trigger them as a click without delay.
But instead of building your own start-end detections, this is already done well by Financial Times in their web app. See: https://github.com/ftlabs/fastclick for details.

Categories

Resources