bxslider javascript install - javascript

Hi I cannot get bxslider to work in my HTML file, i have downloaded all the files and put them into the relevant directories etc but my images are just displayed one after another in block format when i run the page in firefox.
The code i am using is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>AC</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="AC" />
<meta name="description" content="AC" />
<meta name="keywords" content="AC" />
<link href="./index.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" />
</head>
<body>
<ul class="bxslider">
<li><img src="images/pic1.jpg" title="An Energy Conservation Company"></li>
<li><img src="images/pic2.jpg" title="Designers and Manufactors of Quality Lighting Controls"></li>
<li><img src="images/pic3.jpg" title="Caption to go here"></li>
</ul>
<script type="text/javascript">$(document).ready(function(){
$('.bxslider').bxSlider();
});
mode: fade,
captions: true,
auto: true,
autoControls: false
});
});
</script>
<div id="header">
<div id="headerleft"><a href="./index.html"><img src="./images/mainlogo.jpg" alt="AC"/></div>
<div id="headerright">
<div id="userbar">userbar</div>
<div id="socialbar">socialbar</div>
<div id="basket">basket</div>
</div>
</div>
<div id="navmenu">
<ul>
<li>Home</li>
<li>Girls</li>
<li>Boys</li>
<li>Unisex</li>
<li>Accessories</li>
</ul>
</div>
<div id="content">
<div id="gallery">
</div>
<div id="offers">offers</div>
</div>
<div id="footer">
<div id="cards">MAESTRO VISA</div>
</div>
</body>
</html>

There's an error in your script. Try:
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: fade,
captions: true,
auto: true,
autoControls: false
});
})

Related

Can not enter into dashboard page using Angular.js UI-router

I can not enter the dashboard page after login while using Angular.js. I am providing my code below.
index.html:
<!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" ng-app="ABSadmin">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ABSClasses | Admin Panel</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,700,800' rel='stylesheet' type='text/css'>
<script src="js/angularjs.js"></script>
<script src="js/angularuirouter.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/route.js"></script>
</head>
<body style="background:url(images/533240312.jpg)" ng-controller="loginController">
<div>
<div class="logbg">
<span ng-show="validateMessage" style="color:#C0F">{{message}}</span>
<h3>Login to Admin Panel</h3>
<form name="frmlogin" id="frmlogin" class="login-form">
<div class="input-box input-left">
<label for="username">User Name:</label><br>
<input type="text" id="username" name="username" class="required-entry input-text" ng-model="u_name" ng-keypress="clearField();">
</div>
<div class="input-box input-right">
<label for="login">Password:</label><br>
<input type="password" id="pwd" name="pwd" class="required-entry input-text" ng-model="u_password" ng-keypress="clearField();">
</div>
<input type="button" value="Login" name="login" id="login" class="log" ng-click="adminLogin();" />
</form>
</div>
</div>
<script src="controller/loginController.js"></script>
</body>
</html>
The above page is my login page.When user will type localhost/admin/ this page is coming. the controller file is given below.
var login=angular.module('ABSadmin',[]);
login.controller('loginController',function($scope,$http,$location){
//console.log('hii');
$scope.adminLogin=function(){
if($scope.u_name==null || $scope.u_name==''){
$scope.validateMessage=true;
$scope.message="Please add user name";
}else if($scope.u_password==null || $scope.u_password==''){
$scope.validateMessage=true;
$scope.message="Please add Password";
}else{
$location.path('dashboard');
}
}
$scope.clearField=function(){
$scope.validateMessage=false;
$scope.message="";
}
})
After successfully login the user should get into the dashboard page which contains some menu. So here I am using ui.router to render the partial view.
route.js:
var Dahboard=angular.module('dasboard',['ui.router']);
Dahboard.run(function($rootScope, $state) {
$rootScope.$state = $state;
});
Dahboard.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
$urlRouterProvider.otherwise('dashboard');
$stateProvider
.state('dashboard', {
url: '/dash',
templateUrl: 'dashboardview/dashboard.html',
controller: 'dashboardController'
})
})
My dashboard page is given below.
<!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" ng-app="dasboard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ABSClasses | Admin Panel</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<script src="/js/angularjs.js"></script>
<script src="/js/angularuirouter.js"></script>
<script src="/js/route.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</head>
<body>
<div class="header">
<img src="../images/absclasses-logo-black.png" alt="" />
<div style="color:#FFF; font-size:20px; vertical-align:middle; float:left; margin-top:21px;font-weight:bold; ">Admin Panel</div>
<div class="header-right-pan" >
<ul>
<li>
Logged in as Admin |
</li>
<li>
<span class="logout" style="color:#fcce77;text-decoration: underline;" >Log Out</span>
</li>
</ul>
</div>
</div>
<nav>
<ul style="width:100%;">
<li>
<ul>
<li>
<ul class="submenu">
<li> Page</li>
<li> Syllabus</li>
<li>Exam Info</li>
</ul>
</li>
<li></li>
</ul>
</li>
</ul>
</nav>
<div ui-view>
<div class="dashbord-body">
<div>
<h5> </h5>
</div>
<div style="height: 300px; margin: 100px auto; text-align: center;color: #0071b1; font-size: 36px;">Welcome To Admin Panel </div>
</div>
</div>
<div class="dashbord-body-footer">
<p class="" style="margin-top: 10px; text-align:center;">
<img src="images/varien_logo.png" width="19" height="18" alt="" />
Copyright © 2015 OdiTek Solutions. <a target="_blank" href="http://www.oditeksolutions.com" > www.oditeksolutions.com</a>
</p>
</div>
<script src="js/default.js"></script>
<script src="controller/dashboardController.js"></script>
</body>
</html>
Here after successfully login the url is coming like this localhost/admin/#/dashboard but the dashboard page is not coming still the index page is showing. Here I need after successfull login the dashboard page should come and there I will render partial html file inside ui-view.
while you are using angular-ui-router then you have to use
$state.go('your_state_name');
instead of $location.path('dashboard');
here is your snippet
var login=angular.module('ABSadmin',[]);
login.controller('loginController',function($scope,$http,$location, $state){
$scope.adminLogin=function(){
if($scope.u_name==null || $scope.u_name==''){
$scope.validateMessage=true;
$scope.message="Please add user name";
}else if($scope.u_password==null || $scope.u_password==''){
$scope.validateMessage=true;
$scope.message="Please add Password";
}else{
$state.go('dashboard');
}
}
$scope.clearField=function(){
$scope.validateMessage=false;
$scope.message="";
}
})
The url for your state in stateProvider is /dash not dashboard. dashboard in this case is your state name. You'll want to tell the $location service to take you to
$location.path('dash')
You'll also want to change $urlRouterProvider.otherwise to point to /dash as well since the urlRouterProvider.otherwise method takes a url as a parameter
$urlRouterProvider.otherwise('/dash');

How to add tax and grand total to my simplecart JS

Hello all I'm trying to use simplecart.js to create a custom checkout page for my website I want to add a simplecart_grandtotal but it doesn't seem to display. How can I go about doing that? My simple code is which i have taken from the demo http://wojodesign.com/simpleCart/myCart.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8">
<script src="js/jquery-1.7.min.js"></script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<title>simpleCart (js) Demo</title>
<link rel="stylesheet" href="example.css" type="text/css" media="screen" charset="utf-8" />
<!--[if lte IE 6]><link rel="stylesheet" href="ie6.css" type="text/css" media="screen" charset="utf-8" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" media="screen" charset="utf-8" /><![endif]-->
<script src="simpleCart2.js" type="text/javascript" charset="utf-8"></script>
<!--Make a new cart instance with your paypal login email-->
<script type="text/javascript">
simpleCart.email = "yasdasb#gmail.com";
simpleCart.cartHeaders = ['Image','Name','Price','Quantity_input','Total'];
simpleCart.checkoutTo = PayPal;
</script>
<!--Include the SimpleCart(js) script
<script src="javascripts/simpleCart.js" type="text/javascript" charset="utf-8"></script>
Make a new cart instance with your paypal login email
<script type="text/javascript">
simpleCart = new cart("brett#wojodesign.com");
</script>-->
</head>
<body>
<div class="main">
<div id="content">
<div id="sidebar" style="margin-top:20px">
<h2>You Might Also Like</h2>
<div class="alsoContainer">
<div class="alsoImage">
<img src="images/thumbs/blackGold.jpg" alt="" />
</div>
<div class="alsoInfo">
Black Gold<br/>
add to cart
</div>
<div class="alsoPrice">$58</div>
</div>
<div class="alsoContainer">
<div class="alsoImage">
<img src="images/thumbs/goldShoe.jpg" alt="" />
</div>
<div class="alsoInfo">
Gold Shoe<br/>
add to cart
</div>
<div class="alsoPrice">$58</div>
</div>
<div class="alsoContainer">
<div class="alsoImage">
<img src="images/thumbs/greenStripe.jpg" alt="" />
</div>
<div class="alsoInfo">
Green Stripe<br/>
add to cart
</div>
<div class="alsoPrice">$58</div>
</div>
<!--End #sidebar-->
</div>
<div id="left">
<!--Add a Div with the class "simpleCart_items" to show your shopping cart area.-->
<div class="simpleCart_items" >
</div>
<div class="checkoutEmptyLinks">
<!--Here's the Links to Checkout and Empty Cart-->
empty cart
Checkout
</div>
</div>
<!--End #content-->
</div>
</div>
</body>
</html>
this demo not have all the code go to https://github.com/wojodesign/simplecart-js/blob/master/simpleCart.js and take from there.
and then you can add :
<div class="simpleCart_tax"></div>
<div class="simpleCart_taxRate"></div>
<div class="simpleCart_grandTotal"></div>
http://simplecartjs.org/documentation/displaying_cart_data

jQuery Mobile Tabs not showing all content

The third tab is not showing any content but the first two work fine. Not sure what is wrong as I am following this example from the jQuery website. http://demos.jquerymobile.com/1.4.1/tabs/
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<title>Social</title>
</head>
<script>
$(function() {
$( "#tabs" ).tabs({
collapsible: true, active: false
});
});
</script>
<body>
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div id="one" style="display:none;">
<p> content one </p>
</div>
<div id="two" style="display:none;">
<p> content two </p>
</div>
<div id="three" style="display:none;">
<p> content three </p>
</div>
</div>
</body>
</html>

using jquery to do an overlay with iframe. Won't retain css after first link

so I got jwplayer working with iframe. I also have multiple links on the same page to open different videos via iframe. When I choose the first video at the top of the page, it works really well, when I choose any other video it won't maintain any of the css. I'm using prettyphoto for the overlay, however, I did try other versions and had the same issue.
Thanks!
<!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"
xmlns:fb="http://www.facebook.com/2008/fbml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<META HTTP-EQUIV=Refresh CONTENT='7800; URL=index.php'>
<META HTTP-EQUIV="EXPIRES" CONTENT="0" />
<!-- include the JQuery Tools -->
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<!--[if lt IE 7]>
<script type="text/javascript" src="http://singingfromthecenter.com/js/jquery/jquery.js"></script>
<script type="text/javascript" src="http://singingfromthecenter.com/js/jquery/jquery.dropdown.js"></script>
<![endif]-->
<!-- / END -->
<link rel="stylesheet" href="http://singingfromthecenter.com/css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="http://singingfromthecenter.com/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul class="gallery clearfix">
<li>link 1
</li>
</ul>
<br /><br /><br />
<ul class="gallery clearfix">
<li>link 2
</li>
</ul>
<br /><br /><br />
<ul class="gallery clearfix">
<li>link 3
</li>
</ul>
<br /><br /><br />
</div>
</div>
<div id="close">
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("area[rel^='prettyPhoto']").prettyPhoto();
$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'light_square',slideshow:3000, autoplay_slideshow: false});
$(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true});
$("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
changepicturecallback: function(){ initialize(); }
});
$("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
changepicturecallback: function(){ _bsap.exec(); }
});
});
</script>
</body>
</html>

Styling a jQuery UI Accordion

can anyone tell me how to get css like this: http://jqueryui.com/demos/accordion/#mouseover for the below code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="all" />
<title>jQuery Vertical Accordion Menu Plugin v 2.6</title>
<link href="css/dcaccordion.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.cookie.js'></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/jquery.dcjqaccordion.2.7.min.js'></script>
<script type="text/javascript">
$(document).ready(function($){
$('.accordion-6').dcAccordion({
eventType: 'hover',
autoClose: true,
saveState: true,
disableLink: true,
menuClose: false,
speed: 'medium',
showCount: true,
autoExpand: true,
cookie : 'dcjq-accordion-1',
classExpand : 'dcjq-current-parent',
menuClose: false
});
});
</script>
<link href="css/skins/blue.css" rel="stylesheet" type="text/css" />
<link href="css/skins/graphite.css" rel="stylesheet" type="text/css" />
<link href="css/skins/grey.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrap">
<div class="graphite demo-container">
<ul class="accordion accordion-6">
<li>Home</li>
<li>Products
<ul class="accordion" id="accordion-6">
<li>Mobile Phones & Accessories </li>
<li>Desktop </li>
</ul>
</li>
<li>About Us
<ul class="accordion" id="accordion-6">
<li>About Page 1</li>
<li>About Page 2</li>
</ul>
</li>
<li>Services</li>
<li>Contact us</li>
</ul>
</div>
</div>
</body>
</html>
Iam new to this CSS, so please can anyone tell me how to achive that..?
Iam thinking to have my CSS like this site:
http://bag-saver.com/uk/shop/black-handbags/
Can anyone pls..?
Why not use a complete ready to go package...http://dhtmlx.com/docs/products/dhtmlxAccordion/index.shtml...just download...follow the steps and you are good to go.
This is a simple inline css to start with...Its uses google accordian API...
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#accordion").accordion({ active: false,
collapsible: true
});
});
</script>
</head>
<body>
<div id="accordion">
<h3>
<a href="#" style="background-color: Blue; height: 25px; color: White; text-decoration: none;">
Start Service</a></h3>
<div style="height: 40px;">
<span>Start or Stop Servcice </span>
<asp:Panel ID="Panel1" runat="server" BorderStyle="Solid" BorderWidth="1px">
<p>
some text
</p>
</asp:Panel>
</div>
<h3>
<a href="#" style="background-color: Blue; height: 25px; color: White; text-decoration: none;">
Customer Service</a></h3>
<div>
<b>Contact Us</b>
<asp:Panel ID="pnlSrvc" runat="server" BorderStyle="Solid" BorderWidth="1px">
<p>some text<p>
</asp:Panel>
</div>
<h3>
<a href="#" style="background-color: Blue; height: 25px; color: White; text-decoration: none;">
some text</a></h3>
<div style="height: 40px;">
<span>some text </span>
<asp:Panel ID="Panel2" runat="server" BorderStyle="Solid" BorderWidth="1px">
<p>
some text
</p>
</asp:Panel>
</div>
<h3>
some text
</h3>
</body>
</html>

Categories