The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> having hard time adding third .js to page, having hard time adding third .js to page
princeton
post Mar 24 2015, 01:13 AM
Post #1





Group: Members
Posts: 3
Joined: 23-March 15
Member No.: 22,418



i building a page that will have 3 .js plugins but i am having a hard time with the last responding like i want it too. need help badly. i'm super new at this. blink.gif
The name of the site is SBHorizons.com

I may be doing this wrong but here is the HTML, CSS, & .js. I cannot constrain the 4th .js to its div to preform properly. the last .js is a script named flipster. I have included the code in this post. I am so new at this that I'm loosing it. I got 2 of them to work compatibly but not the last. please help....

[code]<html lang="en">
<head>
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->

<meta name="robots" content="noindex">
<meta charset="utf-8">
<title>SBHorizons | A Clear Choice</title>
<meta name="description" content="A lightweight CSS3 image gallery that is pretty to look and and easy to use">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="photobox/photobox.css">
<link rel="stylesheet" href="main.css">
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]><link rel="stylesheet" href="photobox/photobox.ie.css"><![endif]-->
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<meta name="description" content="">
<meta name="viewport" content="width=365, initial-scale=1">

<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="../src/css/jquery.flipster.css">
<link rel="stylesheet" href="css/flipsternavtabs.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src='photobox/photobox.js'></script>
<style type="text/css">
<!--
.sbhorizons_4columns {
padding-left: 10px;
color: #FC9;
width: 100%;
}

body {
width:99%;
margin:0;
border:0;
overflow:hidden;
padding-top: 0;
padding-right: 3;
padding-bottom: 0;
padding-left: 0;
}

.four> div {
display:block;
width:24%;
height:50%;
float:left;
}

.col1 {
background-image: url(Untitled-1.png);
font-size: 22px;
background-repeat: no-repeat;
padding-right: 10px;
}

.col2 {
background-image: url(sbhorizons_caregiver.gif);
font-size: 16.5px;
padding-bottom: 4px;
padding-right: 16px;
background-repeat: no-repeat;
color: #000;
background-position: center;
padding-left: 8px;
}

.col3 {
font-size: 22px;
background-image: url(Untitled-1.png);
background-position: center;
background-repeat: no-repeat;
}
.col4 {
font-size: 22px;
background-image: url(Untitled-1.png);
}
.sbhorizons_more {
font-size: 12px;
padding-bottom: 4px;
padding-top: 5px;
float: right;
}
.sbhorizons_publicservicesnsantabarbara {
font-size: 12px;
padding-right: 20px;
}
-->
</style>


<link rel="stylesheet" type="text/css" href="engine1//style.css" media="screen" />
<script type="text/javascript" src="engine1//jquery.js"></script>

</head>
<body>
<div id='wrap'>
<div class='main'>
<h1>SBHorizons</h1>
<h2>For A Clear Choice</h2>
<p>As the population age 55 to 80 continues to grow SBHorizons has recognized the need for an uncomplicated website presenting a clear set of choices to help in deciding the best options for families seeking senior services in the city of Santa Barbara. SBHorizons.com is a free public service to the city of Santa Barbara that distinguishes the categories and levels of care pertaining to all aspects of senior living. In short SBHorizons.com offers a simple, more structured way to get comprehensive tools that really aid in a clearer selection process.</p>
</div>
<ul id='gallery'></ul>
</div>
<script src='main.js'></script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-26520680-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<ul id="demo" class="image_fader">
<li><img src="http://sbhorizons.com/img/sbhorizons_adultdaycenters" alt="" title=""/></li>
<li><img src="http://sbhorizons.com/img/sbhorizons_alzhiemers_dementia" alt="" title=""/></li>
<li><img src="http://sbhorizons.com/img/sbhorizons_assistedliving" alt="" title=""/></li>
<li><img src="http://sbhorizons.com/img/sbhorizons_healthandwellness" alt="" title=""/></li>
<li><img src="http://sbhorizons.com/img/sbhorizons_hospice" alt="" title=""/></li>
<li><img src="http://sbhorizons.com/img/sbhorizons_independentliving" alt="" title=""/></li>
<li><img src="http://sbhorizons.com/img/sbhorizons_inhomecare" alt="" title=""/></li>
<li><img src="http://sbhorizons.com/img/sbhorizons_retirementhomecommunity" alt="" title=""/></li>
<li><img src="http://sbhorizons.com/img/sbhorizons_skillednursing" alt="" title=""/></li>
</ul>
<p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="main.js"></script>
</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div class="sbhorizons_4columns">
<p> </p><section class="four">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div class="col1">
<p> </p>
<p align="left"><strong>Santa </strong>Barbara has a remarkable range of facilities and services to accommodate every aspect of senior living. Click here to view the list of ammenities and resources devoted totally to seniors in the city of Santa Barbara. </p>
<p align="right" class="sbhorizons_more"> </p>
</div>
<div class="col2">
<p> </p>
<p align="center">Care Givers Support United</p>
<p> </p>
<p>This regularly updated segment touches on such topics as
care giver legislation, how to best handle the physical and emotional effects of the caregiver, instruction on how to best move a loved one from one position to the next. SBHorizons support groups provide that much needed encouragement, commradery and strength for this labor of love. Care Givers Unite. ....Click here </p>
</div>
<div class="col3">
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/check_ups.jpg" alt="Check Ups" title="Check Ups" id="wows1_0"/></li>
<li><img src="data1/images/diabetic_supplies.jpg" alt="Diabetic Supplies" title="Diabetic Supplies" id="wows1_1"/></li>
<li><img src="data1/images/exercise.jpg" alt="Exercise" title="Exercise" id="wows1_2"/></li>
<li><img src="data1/images/first_aid.jpg" alt="First Aid" title="First Aid" id="wows1_3"/></li>
<li><img src="data1/images/fitness.jpg" alt="Fitness" title="Fitness" id="wows1_4"/></li>
<li><img src="data1/images/home_care_services.jpg" alt="Home Care Services" title="Home Care Services" id="wows1_5"/></li>
<li><img src="data1/images/housing.jpg" alt="Housing" title="Housing" id="wows1_6"/></li>
<li><img src="data1/images/incontinence.jpg" alt="Incontinence" title="Incontinence" id="wows1_7"/></li>
<li><img src="data1/images/medical_transport.jpg" alt="Medical Transport" title="Medical Transport" id="wows1_8"/></li>
<li><img src="data1/images/pharmacy_medications.jpg" alt="Pharmacy Medications" title="Pharmacy Medications" id="wows1_9"/></li>
<li><img src="data1/images/pressure_cuffs.jpg" alt="Pressure Cuffs" title="Pressure Cuffs" id="wows1_10"/></li>
<li><img src="data1/images/recreation.jpg" alt="Recreation" title="Recreation" id="wows1_11"/></li>
<li><img src="data1/images/rehab_therapy.jpg" alt="Rehab Therapy" title="Rehab Therapy" id="wows1_12"/></li>
<li><img src="data1/images/relocation_services.jpg" alt="Relocation Services" title="Relocation Services" id="wows1_13"/></li>
<li><img src="data1/images/shower_chairs.jpg" alt="Shower Chairs" title="Shower Chairs" id="wows1_14"/></li>
<li><img src="data1/images/specialists.jpg" alt="Specialists" title="Specialists" id="wows1_15"/></li>
<li><a href="http://wowslider.com"><img src="data1/images/travel.jpg" alt="slider" title="Travel" id="wows1_16"/></a></li>
<li><img src="data1/images/wheelchairs.jpg" alt="Wheelchairs" title="Wheelchairs" id="wows1_17"/></li>
</ul></div>
<span class="wsl"><a href="http://wowslider.com/vu">jquery carousel</a> by WOWSlider.com v6.4</span>
<a href="#" class="ws_frame"></a>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1//wowslider.js"></script>
<script type="text/javascript" src="engine1//script.js"></script>
</div>
<div class="col4">
<div align="center">
<p> </p>
<p>Changing Stats Re: Seniors</p>
<div class="flipster">
<ul>
<li>
<a href="demo.html" class="Button Block">
<h1>The U.S. Census Bureau projects that the population age 85 and over could grow to 19 million by 2050</h1>
<p> </p>
</a>
</li>
<li>
<a href="demo2.html" class="Button Block">
<h1>“Baby Boomers” are those born between 1946 and 1964</h1>
<p> </p>
</a>
</li>
<li>
<a href="demo3.html" class="Button Block">
<h1>Baby Boomers started turning 65 in 2011</h1>
<p> </p>
</a>
</li>
<li>
<a href="demo4.html" class="Button Block">
<h1>By 2030 over one-fifth of the total population will be ages 65 and older. Thats one in five</h1>
<p> </p>
</a>
</li>
<li>
<a href="demo5.html" class="Button Block">
<h1>Approximately 5.1 million American elders over 65 have some kind of dementia</h1>
<p> </p>
</a>
</li>
</ul>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</section>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>Our sincere hope is to provide solid material to make your selection for a Santa Barbara senior service - tailored to your needs - just that much simpler. We look forward to seeing you here again. Thank You.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div class="sbhorizons_publicservicesnsantabarbara">
<h4 align="right">A Public Service To The City Of Santa Barbara </h4>
</div>
<p> </p>
</div>
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 24 2015, 06:10 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Which is the 4th script? And I don't see a flipster.js in the source of the page. There should be a flipsternavtabs.css, but that's missing (404 not found). And there are two references for jquery.js.

Please tell us what is supposed to happen that doesn't.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
princeton
post Mar 24 2015, 03:44 PM
Post #3





Group: Members
Posts: 3
Joined: 23-March 15
Member No.: 22,418



QUOTE(Frederiek @ Mar 24 2015, 06:10 AM) *

Which is the 4th script? And I don't see a flipster.js in the source of the page. There should be a flipsternavtabs.css, but that's missing (404 not found). And there are two references for jquery.js.

Please tell us what is supposed to happen that doesn't.



Thank you so much for your assistance. What i am trying to accomplish is for flipster.js to work in the last box that reads, "Changing Stats Re: Seniors". But I am having such a hard time constraining flipster in that div. It runs down the page like a ordered list. I also failed to update the page so you're able to see the results. Yet the result that I'm looking for is for the carousel to run in that last box/div.

I am including the script in a .rar
Open the .rar flipster file, then the demo file, then click the index. This is my desired effect for that last div.




CSS for flipster.js:

[code]/* @group Base Flipster Styles */
.flipster {
display: block;
margin: 0 auto;
width: 100%;
position: relative;
overflow-x: hidden;
overflow-y: visible;
}
.flip-items,
.flip-item {
display: block;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.flip-items {
width: 100%;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.flip-item {
position: absolute;
opacity: 0.99;
/* Fix for strange clipping behavior on rotated elements in Chrome. */

}
.flip-past,
.flip-future,
.flip-next,
.flip-prev {
cursor: pointer;
}
.flip-item img {
display: block;
width: 100%;
}
/* @end */
/* @group Coverflow Style */
.flipster-coverflow .flip-items {
-webkit-transition: all 350ms ease-in-out;
-moz-transition: all 350ms ease-in-out;
-o-transition: all 350ms ease-in-out;
-ms-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
position: relative;
padding-top: 2%;
padding-bottom: 5%;
}
.flipster-coverflow .flip-item {
display: block;
-webkit-transition: all 175ms ease-in-out;
-moz-transition: all 175ms ease-in-out;
-o-transition: all 175ms ease-in-out;
-ms-transition: all 175ms ease-in-out;
transition: all 175ms ease-in-out;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-perspective: 800px;
-moz-perspective: 800px;
perspective: 800px;
position: absolute;
width: 30%;
}
.flipster-coverflow .flip-content {
-webkit-transition: all 350ms ease-in-out;
-moz-transition: all 350ms ease-in-out;
-o-transition: all 350ms ease-in-out;
-ms-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
-webkit-box-reflect: below 0 -webkit-gradient(linear, left bottom, left top, color-stop(0.05, rgba(255, 255, 255, 0.12)), color-stop(0.2, transparent));
}
.flipster-coverflow .flip-past .flip-content {
-webkit-transform: rotateY(55deg) scale(0.75);
-moz-transform: rotateY(55deg) scale(0.75);
-o-transform: rotateY(55deg) scale(0.75);
-ms-transform: rotateY(55deg) scale(0.75);
transform: rotateY(55deg) scale(0.75);
}
.flipster-coverflow .flip-future .flip-content {
-webkit-transform: rotateY(-55deg) scale(0.75);
-moz-transform: rotateY(-55deg) scale(0.75);
-o-transform: rotateY(-55deg) scale(0.75);
-ms-transform: rotateY(-55deg) scale(0.75);
transform: rotateY(-55deg) scale(0.75);
}

.flipster-coverflow.no-rotate .flip-past .flip-content {
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
-o-transform:scale(0.75);
-ms-transform:scale(0.75);
transform: scale(0.75);
}
.flipster-coverflow.no-rotate .flip-future .flip-content {
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
-o-transform: scale(0.75);
-ms-transform: scale(0.75);
transform: scale(0.75);
}


.flipster-coverflow .flip-current .flip-content {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.flipster-coverflow .flip-hidden {
visibility: hidden;
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
}
/* @end */
/* @group Flip Items */
.flipster-carousel .flip-items {
-webkit-perspective: 2000px;
-moz-perspective: 2000px;
perspective: 2000px;
}
.flipster-carousel .flip-item {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: all 350ms ease-out;
-moz-transition: all 350ms ease-out;
-o-transition: all 350ms ease-out;
-ms-transition: all 350ms ease-out;
transition: all 350ms ease-out;
}
.no-csstransforms .flipster-carousel .flip-item {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;
}
.flipster-carousel .flip-items img {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.flipster-carousel .flip-past {
-webkit-transform: translateX(-80%) translateZ(0) rotateY(80deg) scale(0.65);
-moz-transform: translateX(-80%) translateZ(0) rotateY(80deg) scale(0.65);
-o-transform: translateX(-80%) translateZ(0) rotateY(80deg) scale(0.65);
-ms-transform: translateX(-80%) translateZ(0) rotateY(80deg) scale(0.65);
transform: translateX(-80%) translateZ(0) rotateY(80deg) scale(0.65);
}
.flipster-carousel.no-rotate .flip-past {
-webkit-transform: translateX(-80%) translateZ(0) scale(0.65);
-moz-transform: translateX(-80%) translateZ(0) scale(0.65);
-o-transform: translateX(-80%) translateZ(0) scale(0.65);
-ms-transform: translateX(-80%) translateZ(0) scale(0.65);
transform: translateX(-80%) translateZ(0) scale(0.65);
}
.no-csstransforms3d .flipster-carousel .flip-past {
-webkit-transform: translateX(-56%) scale(0.5);
-moz-transform: translateX(-56%) scale(0.5);
-o-transform: translateX(-56%) scale(0.5);
-ms-transform: translateX(-56%) scale(0.5);
transform: translateX(-56%) scale(0.5);
}
.no-csstransforms .flipster-carousel .flip-past {
left: -20%;
top: 40%;
width: 50%;
height: 50%;
}
.flipster-carousel .flip-future {
-webkit-transform: translateX(80%) translateZ(0) rotateY(-80deg) scale(0.65);
-moz-transform: translateX(80%) translateZ(0) rotateY(-80deg) scale(0.65);
-o-transform: translateX(80%) translateZ(0) rotateY(-80deg) scale(0.65);
-ms-transform: translateX(80%) translateZ(0) rotateY(-80deg) scale(0.65);
transform: translateX(80%) translateZ(0) rotateY(-80deg) scale(0.65);
}

.flipster-carousel.no-rotate .flip-future {
-webkit-transform: translateX(80%) translateZ(0) scale(0.65);
-moz-transform: translateX(80%) translateZ(0) scale(0.65);
-o-transform: translateX(80%) translateZ(0) scale(0.65);
-ms-transform: translateX(80%) translateZ(0) scale(0.65);
transform: translateX(80%) translateZ(0) scale(0.65);
}

.no-csstransforms3d .flipster-carousel .flip-future {
-webkit-transform: translateX(56%) scale(0.5);
-moz-transform: translateX(56%) scale(0.5);
-o-transform: translateX(56%) scale(0.5);
-ms-transform: translateX(56%) scale(0.5);
transform: translateX(56%) scale(0.5);
}
.no-csstransforms .flipster-carousel .flip-future {
left: 88%;
top: 40%;
width: 50%;
height: 50%;
}
.flipster-carousel .flip-prev {
-webkit-transform: translateX(-60%) translateZ(0) rotateY(80deg) scale(0.8);
-moz-transform: translateX(-60%) translateZ(0) rotateY(80deg) scale(0.8);
-o-transform: translateX(-60%) translateZ(0) rotateY(80deg) scale(0.8);
-ms-transform: translateX(-60%) translateZ(0) rotateY(80deg) scale(0.8);
transform: translateX(-60%) translateZ(0) rotateY(80deg) scale(0.8);
}
.flipster-carousel.no-rotate .flip-prev {
-webkit-transform: translateX(-60%) translateZ(0) scale(0.8);
-moz-transform: translateX(-60%) translateZ(0) scale(0.8);
-o-transform: translateX(-60%) translateZ(0) scale(0.8);
-ms-transform: translateX(-60%) translateZ(0) scale(0.8);
transform: translateX(-60%) translateZ(0) scale(0.8);
}
.no-csstransforms3d .flipster-carousel .flip-prev {
-webkit-transform: translateX(-24%) scale(0.75);
-moz-transform: translateX(-24%) scale(0.75);
-o-transform: translateX(-24%) scale(0.75);
-ms-transform: translateX(-24%) scale(0.75);
transform: translateX(-24%) scale(0.75);
}
.no-csstransforms .flipster-carousel .flip-prev {
left: -9%;
top: 20%;
width: 75%;
height: 75%;
}
.flipster-carousel .flip-next {
-webkit-transform: translateX(60%) translateZ(0) rotateY(-80deg) scale(0.8);
-moz-transform: translateX(60%) translateZ(0) rotateY(-80deg) scale(0.8);
-o-transform: translateX(60%) translateZ(0) rotateY(-80deg) scale(0.8);
-ms-transform: translateX(60%) translateZ(0) rotateY(-80deg) scale(0.8);
transform: translateX(60%) translateZ(0) rotateY(-80deg) scale(0.8);
}
.flipster-carousel.no-rotate .flip-next {
-webkit-transform: translateX(60%) translateZ(0) scale(0.8);
-moz-transform: translateX(60%) translateZ(0) scale(0.8);
-o-transform: translateX(60%) translateZ(0) scale(0.8);
-ms-transform: translateX(60%) translateZ(0) scale(0.8);
transform: translateX(60%) translateZ(0) scale(0.8);
}

.no-csstransforms3d .flipster-carousel .flip-next {
-webkit-transform: translateX(24%) scale(0.75);
-moz-transform: translateX(24%) scale(0.75);
-o-transform: translateX(24%) scale(0.75);
-ms-transform: translateX(24%) scale(0.75);
transform: translateX(24%) scale(0.75);
}
.no-csstransforms .flipster-carousel .flip-next {
left: 39%;
top: 20%;
width: 75%;
height: 75%;
}
.flipster-carousel .flip-past,
.flipster-carousel .flip-future {
-webkit-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
z-index: 1;
-webkit-transition-delay: 87.5ms;
-moz-transition-delay: 87.5ms;
-o-transition-delay: 87.5ms;
transition-delay: 87.5ms;
}
.flipster-carousel .flip-prev,
.flipster-carousel .flip-next {
-webkit-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
z-index: 2;
-webkit-transition-delay: 58.333333333333336ms;
-moz-transition-delay: 58.333333333333336ms;
-o-transition-delay: 58.333333333333336ms;
transition-delay: 58.333333333333336ms;
}
.flipster-carousel .flip-current {
z-index: 999;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transition-delay: 58.333333333333336ms;
-moz-transition-delay: 58.333333333333336ms;
-o-transition-delay: 58.333333333333336ms;
transition-delay: 58.333333333333336ms;
}
.flipster-carousel .flip-hidden {
visibility: hidden;
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
-webkit-transform: rotateY(0deg) translateX(0) scale(0.5);
-moz-transform: rotateY(0deg) translateX(0) scale(0.5);
-o-transform: rotateY(0deg) translateX(0) scale(0.5);
-ms-transform: rotateY(0deg) translateX(0) scale(0.5);
transform: rotateY(0deg) translateX(0) scale(0.5);
-webkit-transition-delay: 116.66666666666667ms;
-moz-transition-delay: 116.66666666666667ms;
-o-transition-delay: 116.66666666666667ms;
transition-delay: 116.66666666666667ms;
}
/* @end */
.no-transition {
-webkit-transition-duration: 0ms !important;
-moz-transition-duration: 0ms !important;
-o-transition-duration: 0ms !important;
transition-duration: 0ms !important;
}
/* @end */




flipsternavtabs.css:

.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
line-height: 0;
}
.clearfix:after {
clear: both;
}
.hide-text {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.input-block-level {
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* @group flipster Navigation */
.flipster .flipster-nav {
display: block;
background: #da0d25;
height: 25px;
font-size: 0.0px;
margin: 0;
padding: 5px 5px 0;
text-align: justify;
margin-bottom: 52px;
position: relative;
border-bottom: solid 2px #da0d25;
list-style-type: none;
}
.flipster .flipster-nav:after {
content: '';
display: inline-block;
width: 100%;
}
.flipster .flipster-nav li {
display: inline-block;
font-size: 15px;
text-align: center;
margin: 0;
padding: 0;
list-style-type: none;
}
.flipster .flipster-nav .flip-nav-category,
.flipster .flipster-nav .no-category {
width: 25%;
}
.flipster .flipster-nav .flip-nav-category-link,
.flipster .flipster-nav .flip-nav-item-link {
display: block;
-ms-transition: all 100ms ease;
-webkit-transition: all 100ms ease;
-moz-transition: all 100ms ease;
-o-transition: all 100ms ease;
transition: all 100ms ease;
}
.flipster .flipster-nav .flip-nav-category-link,
.flipster .flipster-nav .no-category .flip-nav-item-link {
border: solid 2px transparent;
height: 23px;
line-height: 25px;
color: #ffffff;
padding: 1px 7px;
font-size: 0.8em;
}
.flipster .flipster-nav .flip-nav-current .flip-nav-category-link,
.flipster .flipster-nav .no-category .flip-nav-current.flip-nav-item-link {
border-color: #da0d25;
border-bottom: none;
background: #ffffff;
color: #000000;
}
.flipster .flipster-nav .flip-nav-category .flip-nav-items {
display: none;
position: absolute;
top: 27px;
left: 0;
right: 0;
text-align: center;
padding: 10px 0;
height: 32px;
}
.flipster .flipster-nav .flip-nav-category .flip-nav-items:after {
content: '';
display: inline-block;
width: 100%;
}
.flipster .flipster-nav .flip-nav-category .flip-nav-items .flip-nav-item-link {
padding: 5px 15px;
color: #da0d25;
font-family: Helvetica;
text-transform: uppercase;
font-size: 16px;
}
.flipster .flipster-nav .flip-nav-category .flip-nav-items .flip-nav-item-link.flip-nav-current {
background: #da0d25;
color: #FFF;
}
.flipster .flipster-nav .flip-nav-category.flip-nav-current .flip-nav-items {
display: block;
}
/* @end */
/* @group Previous & Next Buttons */
.flipster .flipto-prev,
.flipster .flipto-next {
position: absolute;
top: 50%;
z-index: 999;
display: block;
padding: 10px;
margin-top: 25px;
background-color: #da0d25;
color: #FFF;
border: solid 2px #da0d25;
-ms-transition: background-color 300ms ease;
-webkit-transition: background-color 300ms ease;
-moz-transition: background-color 300ms ease;
-o-transition: background-color 300ms ease;
transition: background-color 300ms ease;
}
.flipster .flipto-prev:hover,
.flipster .flipto-next:hover {
background-color: #FFF;
color: #da0d25;
}
.flipster .flipto-prev {
left: 0;
}
.flipster .flipto-next {
right: 0;
}
/* @end */



I do hope I haven't left anything out. Thank you so much for your time and patience. I hope I'm making sense. wacko.gif Attached File  jquery_flipster_master.rar ( 221.58k ) Number of downloads: 849
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 25 2015, 05:04 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Actually, the README.md file explains the basic set up:
- include the CSS (inside HEAD)
- set up the HTML
- include the Javascript after jQuery

You haven't included the jquery.flipster.js script, nor the initialisation of the script, just before the closing body tag.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
princeton
post Mar 25 2015, 01:25 PM
Post #5





Group: Members
Posts: 3
Joined: 23-March 15
Member No.: 22,418



Thank you....I will begin reading it now.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 26 2015, 05:04 AM
Post #6


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



That's what you should have done in the first place. cool.gif

The online version is at https://github.com/drien/jquery-flipster .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 04:29 AM