Dynamic image slider solution - javascript

<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<!-- required css -->
<link rel="stylesheet" type="text/css" href="http://localhost/blog/public/css/jquery.bxslider.css">
<style type="text/css">
.sliderContainer {
width: 320px;
margin: 0 auto;
}
</style>
</head>
<body>
<div style="float:right;">
<table style="border:3px solid #00008B;background-color:#90EE90;">
<h2>1st Advertisement</h2>
<tr>
<td>
<a id="adv" href="http://www.w3.org"><img name="noslide" id="noslide" alt="my images" height="240"
width="320"
src="http://2.bp.blogspot.com/-M5lNkr0H3Bk/VJfppu-wPxI/AAAAAAAARhs/FSZY0iVdCF4/s1600/Hand%2BPainting%2Bhd%2Bimagess%2B(3).jpg"/></a>
</td>
</tr>
<tr>
<td align="center" style="font:small-caps bold 15px georgia; color:blue;">
<div id="fixeddiv">1st Advertisement</div>
</td>
</tr>
</table>
{{$count=count($slides)}}
<table style="border:3px solid #00008B;background-color:#90EE90;">
<h2>2nd Advertisement</h2>
<div class="sliderContainer">
<ul class="bxslider">
#foreach($slides as $key=>$val)
<li><a>{{$val->id}}</a><img src="http://localhost/blog/public/images/{{$val->image_name}}"/></li>
#endforeach
</ul>
</div>
</table>
</div>
<!-- required js -->
<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>
<script type="text/javascript">
$(document).ready(function () {
$('.bxslider').bxSlider({
// see documentation for more options
'auto': true
});
});
</script>
</body>
</html>
public function index()
{
$slides = DB::table('sliders')->get();
return view('home')->with('slides',$slides);
}
There are four images saved in my db. This is showing the images in a slider, but I want to make it dynamic. I will tell that image 1 will be shown 4 times and image 2 will be 2 times both randomly not serially. How can I do it?

Let's assume your HTML looks like this:
<ul id="container">
<li class="slide">Slide 1</li>
<li class="slide">Slide 2</li>
<li class="slide">Slide 3</li>
</ul>
Then you could try the following:
$('.bxslider').bxSlider({
'auto': true,
onSlideBefore: function($slideElement, oldIndex, newIndex) {
// updated newIndex here with your logic
}
});

Related

iFrame Issue with showing content in desired iFrame size

Within my webpage I am having issues with a iFrames. The iFrame is being used to cycle through different Webpages.
The issue I am experiencing is that it appears as only a thin bar (see picture)? Can someone help me on how I fit the cycling websites within a defined diameter? I have research around this topic as I am already working with some code found in iFrames.
iFrame_Issue
Thanks in advance! -Adam
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Tab Title In Window-->
<title>GKN BI/IT PVD Notice Board</title>
<!-- CSS Style-->
<style type="text/css">
body { margin:0;padding:0;font-family: Sans-Serif;line-height: 1.5em;}
header {background: #FFFFFF;height: 100px;}
header h1 {margin: 0;padding-top: 15px;}
main {padding-bottom: 10010px;margin-bottom: -10000px;float: left;width: 100%;}
nav {padding-bottom: 10010px; margin-bottom: -10000px;float: left;width: 230px; margin-left: -230px;background: #FFFFFF;}
footer{ clear: left;width: 100%;background: #FACC2E;text-align: center;padding: 0px 0;}
#wrapper {overflow: hidden;}
<!--Same as 'nav' width -->
#content {margin-right: 230px; }
<!-- Padding for content -->
.innertube {margin: 15px;margin-top: 0; height: 200%; width: 200%;}
p {color: #555;}
nav ul {list-style-type: none;margin: 0;padding: 0;}
nav ul a {color: #336699;text-decoration: none;}
</style>
</head>
<!--Web banner-->
<header>
<center-left>
<table width="875" align="left" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="Images/bi_it_banner.png">
</td>
</tr>
<!--Web banner 2-->
<tr>
<td>
<img src="Images/background.jpg">
</td>
</tr>
</table>
</header>
<body>
<div id="wrapper">
<main>
<!--Title and iFrame Cycle-->
<div id="content">
<div class="innertube">
<h1>Current Projects</h1>
<br>
<br>
<!--iFrame-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
var sites = [
"http://ourspace.gkn/drivelive/",
"http://ishare.driveline.gkn.com/SitePages/Home.aspx",
"https://idash.driveline.gkn.com/josso/signon/login.do?josso_back_to=http://idash.driveline.gkn.com/applicationOverview/josso_security_check&josso_partnerapp_id=applicationOverview"
];
var currentSite = sites.length;
$(document).ready(function () {
var $iframe = $("iframe").attr("src","http://www.google.com");
setInterval(function() {
(currentSite == 0) ? currentSite = sites.length - 1 : currentSite = currentSite -1;
$iframe.attr("src",sites[currentSite]);
}, 7000);
});
</script>
<style type="text/css" media="screen">
iframe {
height: 200%;
width: 100%;
border: none;
}
</style>
<br>
<iframe></iframe>
<br>
</div>
</div>
</main>
<!-- Code for Navigation Bar and Time&Date -->
<nav>
<div class="innertube">
<!--Time/Date Function-->
<center>
<table width="200" align="left" cellpadding="0" cellspacing="0">
<script type="text/javascript">
<!--Date-->
var tmonth=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
function GetClock(){
var d=new Date();
var nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear();
if(nyear<1000) nyear+=1900;
<!--Time-->
var nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds();
if(nmin<=9) nmin="0"+nmin
if(nsec<=9) nsec="0"+nsec;
document.getElementById('clockbox').innerHTML=""+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+"";
}
<!--Load into webpage and carry out function above-->
window.onload=function(){
GetClock();
setInterval(GetClock,1000);
}
</script>
<div id="clockbox"></div>
<h3>GKN Sites</h3>
<ul>
<li><a target="_blank" href="http://ourspace.gkn/drivelive/">Drivelive</a></li>
<li><a target="_blank" href="http://ishare.driveline.gkn.com/IT/SitePages/Home.aspx">BI/IT iShare</a></li>
<li><a target="_blank" href="">Others?</a></li>
</ul>
<h3>Suggested Reading</h3>
<ul>
<li><a target="_blank" href="#">Link 1</a></li>
<li><a target="_blank" href="#">Link 2</a></li>
<li><a target="_blank" href="#">Link 3</a></li>
<li><a target="_blank" href="#">Link 4</a></li>
<li><a target="_blank" href="#">Link 5</a></li>
</ul>
<h3>External News</h3>
<ul>
<li><a target="_blank" href="http://www.bbc.co.uk/news">BBC News</a></li>
<li><a target="_blank" href="http://www.bbc.co.uk/travel">BBC Travel</a></li>
<li><a target="_blank" href="http://www.bbc.co.uk/weather/">BBC Weather</a></li>
</ul>
</div>
</nav>
</div>
</table>
<!-- End of code for Navigation Bar -->
<footer>
<div class="innertube">
<marquee><img src="Images/GKN.svg.png" height="25" width="60"> Hopefully feed text from text file here</marquee>
</div>
</footer>
</body>
</html>

jquery. Multiple effects on single page

So far I have learned that all effects and animations are queued. But what about when you have multiple effects and some are queue and others are not.
I am trying to get the two #sample effects are simultaneous which all work.
But I want the ui-effects-transfer to work as well but only after the other animations ran. I have tried in the way shown in the code. I have tried without a queue and I have tried simply effect("shake", "slow").
The problem is: The shake effect does not actually work, however I code it. Never shows up. It only works when I queue:false
The ui-effects-transfer (shake) animation just never happens.
$("#sample").effect("highlight", {duration: 6000, queue: false});
$("#sample").effect("transfer", {to: $("#{{ $stimuli['sample'][0] }}")}, 7000, function () {
$('#{{ $stimuli['sample'][0] }}').append('<div class="ui-effects-transfer"></div>');
});
$(".ui-effects-transfer").effect("shake", {queue: true}, "slow");
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="content-outer">
<div class="row add-bottom">
<div class="twelve columns" style=" text-align:center;">
<table style="width: 100%;">
<tbody style="border: 10px solid; ">
<tr>
<td id="{{$stimuli['comparison'][0]}}"> <a href='response/{{ $stimuli['comparison'][0]}}'><img class='trial' src='{{ url('taskAssets/'.$stimuli['comparison'][0]) }}.jpg' /></a></td>
<td id="{{$stimuli['comparison'][1]}}"> <a href='response/{{ $stimuli['comparison'][1]}}'><img class='trial' src='{{ url('taskAssets/'.$stimuli['comparison'][1]) }}.jpg' /></a></td>
<td id="{{$stimuli['comparison'][2]}}"><a href='response/{{ $stimuli['comparison'][2]}}'> <img class='trial' src='{{ url('taskAssets/'.$stimuli['comparison'][2]) }}.jpg' /></a></td>
</tr>
<tr>
<td> </td>
<td id="sample" style="padding: 10px; border: 15px solid #000;">
<img class='trial' src='{{ url('taskAssets/'.$stimuli['sample'][0]) }}.jpg'/></td>
<td> </td>
</tr>
<tr>
<td id="{{$stimuli['comparison'][3]}}"><a href='response/{{ $stimuli['comparison'][3]}}'> <img class='trial' src='{{ url('taskAssets/'.$stimuli['comparison'][3]) }}.jpg' /></a></td>
<td id="{{$stimuli['comparison'][4]}}"> <a href='response/{{ $stimuli['comparison'][4]}}'><img class='trial' src='{{ url('taskAssets/'.$stimuli['comparison'][4]) }}.jpg' /></a></td>
<td id="{{$stimuli['comparison'][5]}}"> <a href='response/{{ $stimuli['comparison'][5]}}'><img class='trial' src='{{ url('taskAssets/'.$stimuli['comparison'][5]) }}.jpg' /></a></td>
</tr>
</tbody>
</table>
</div> <!-- Row End-->
</div>
</div>
<script>
CSS
trial
{
height: 175px;
width:200px;
object-fit: contain;
}
.ui-effects-transfer {
background:url("http://images.clipartpanda.com/finger-clipart-pointing-finger-md.png") no-repeat;
opacity: .8;
z-index: 10;
margin-top: 70px;
background-position: 50% 50%;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left:0;
background-size: 60px auto;
}
table td
{
position: relative;
}
Outputted HTML WHen the nonworking effect is excluded (so we see working append).
<!DOCTYPE html>
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<head>
<!--- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="http://localhost:8888/pp/public/assets/css/default.css">
<link rel="stylesheet" href="http://localhost:8888/pp/public/assets/css/layout.css">
<link rel="stylesheet" href="http://localhost:8888/pp/public/public/assets/css/media-queries.css">
<!-- Script
================================================== -->
<script src="js/modernizr.js"></script>
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="favicon.ico" >
</head>
<div class="content-outer">
<div class="row add-bottom">
<div class="twelve columns" style=" text-align:center;">
<table style="width: 100%;">
<tbody style="border: 10px solid; ">
<tr>
<td id="mouse"> <a href='response/mouse'><img class='trial' src='http://localhost:8888/pp/public/taskAssets/mouse.jpg' /></a></td>
<td id="cow"> <a href='response/cow'><img class='trial' src='http://localhost:8888/pp/public/taskAssets/cow.jpg' /></a></td>
<td id="dog"><a href='response/dog'> <img class='trial' src='http://localhost:8888/pp/public/taskAssets/dog.jpg' /></a></td>
</tr>
<tr>
<td> </td>
<td id="sample" style="padding: 10px; border: 15px solid #000;">
<img class='trial' src='http://localhost:8888/pp/public/taskAssets/mouse.jpg'/></td>
<td> </td>
</tr>
<tr>
<td id="car"><a href='response/car'> <img class='trial' src='http://localhost:8888/pp/public/taskAssets/car.jpg' /></a></td>
<td id="cat"> <a href='response/cat'><img class='trial' src='http://localhost:8888/pp/public/taskAssets/cat.jpg' /></a></td>
<td id="house"> <a href='response/house'><img class='trial' src='http://localhost:8888/pp/public/taskAssets/house.jpg' /></a></td>
</tr>
</tbody>
</table>
</div> <!-- Row End-->
</div>
</div>
<script>
$("#sample").effect("highlight", {duration: 6000, queue: false});
$("#sample").effect("transfer", {to: $("#mouse")}, 7000, function () {
$('#mouse').append('<div class="ui-effects-transfer"></div>');
});
$('#sample').effect("highlight",{ queue: true }, 6000});
</script>
<!--
<script>
var x = #mouse;
setInterval(function() {
$("#sample").effect("transfer", {to: $(x)}, 9000);
}, 1000);
</script>-->
<!-- footer
================================================== -->
<footer>
<div class="row">
<div class="twelve columns">
<ul class="footer-social">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
</ul>
<ul class="copyright">
<li>Copyright © 2015 JP Foster</li>
<li>Design by Sparrow.</li>
</ul>
</div>
<div id="go-top" style="display: block;"><a title="Back to Top" href="#">Go To Top</a></div>
</div>
</footer> <!-- Footer End-->
<!-- Java Script
================================================== -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/doubletaptogo.js"></script>
<script src="js/init.js"></script>
</body>
</html>

Tables-PopOvers Angularjs

This is my earlier question which is not answered..as I am still looking for help
https://stackoverflow.com/questions/27230092/how-to-implement-popover-for-table-rows
I am trying show details of the selected table row on Popup, with my approach i could see data on Popover only for the first row of table.
Below is my code snaps, please help me to sort this
HTML Code :
<!DOCTYPE html>
<html ng-app="AngFactory">
<head>
<meta charset="ISO-8859-1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com//twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="js/angular-resource.js"></script>
<script src="js/jQuery.js"></script>
<script src="modal/ConfigModal.js"></script>
<script src="main.js"></script>
<script src="services.js"></script>
<script src="mainController.js"></script>
<link href="css/myStyle.css" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body ng-controller="mainController">
<table class="hoverTable">
<thead >
<tr>
<th>PO Number</th>
<th>Document Type</th>aq
<th>Company Code</th>
</tr>
</thead>
<tr ng-repeat="X in resultSet " >
<td id="pop-over-link" ng-click="getPO_IT(X)">
<a ><test-directive></test-directive>{{X.PONumber}}</a>
</td>
<td >
{{X.DocType}}
</td>
<td >
{{X.CCode}}
</td>
</tr>
</table>
aq
<ul>
<li ng-repeat="Y in results">
<ul>
<li ng-repeat=" Z in Y.NavItem.results">
<b>PO Number </b>: {{Z.PoNumber}}
<b>PO Item </b>: {{Z.PoItem}}
<b>Material</b> : {{Z.Material}}
</li>
</ul>
</li>
</ul>
</body>
</html>
JS Code :
app.directive('testDirective', function($compile) {
return {
restrict: 'EAC',
templateUrl:'TemplateID.html',
link: function(scope, elements, attrs) {
$("#pop-over-link").popover({
'placement': 'right',
'trigger': 'click',
'html': true,
'container': 'body',
'content': function() {
return $compile($("#pop-over-content").html())(scope);
}
});
scope.testFunction = function() {
alert("it works");
console.log("maybe");
}
}
}
});
TemplateID.html
<body>
<div id='pop-over-content' style='display:none'>
<h3>Data goes here</h3>
{{X.PONumber}}
<ul>
<li ng-repeat="Y in results">
<ul>
<li ng-repeat=" Z in Y.NavItem.results">
<b>PO Number </b>: {{Z.PoNumber}}
<b>PO Item </b>: {{Z.PoItem}}
<b>Material</b> : {{Z.Material}}
</li>
</ul>
</li>
</ul>
<button class='btn btn-primary' ng-click='testFunction()'>Close</button>
</div>
</body>

Navigation Menu To Overlap Frames

I am going through the process of revamping a very old website that used frames. I have started with the navigation menu, adopting the functionality of a jQuery drop down.
Although the menu successfully drops down on the homepage, when i have i navigate to another, the drop down menu's fail to overlap into the new frame. I can see a part of the drop down, however it is going 'behind' the new frame.
FrameStructure.html:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="en-gb">
<title>Product Menu</title>
</head>
<frameset rows="170px,*" border="0">
<frame id="PageHeader" name="PageHeader" src="PageHeader.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" title="Page Header" noresize>
<frameset id="PageFrames" name="PageFrames" cols="250px,*">
<frame id="PageNavigation" name="PageNavigation" src="Nav.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" title="Page Navigation" noresize>
<frameset id="ContentFrames" name="ContentFrames" rows="*,0">
<frame id="PageContent" name="PageContent" src="Blank.html" marginwidth="0" marginheight="0" scrolling="auto" frameborder="0" title="Input Page" noresize>
<frame id="PageHelp" name="PageHelp" style="BORDER-TOP: white 2px solid;" src="Help.html" marginwidth="0" marginheight="0" scrolling="auto" frameborder="0" title="Help Page">
</frameset>
</frameset>
<noframes>Your browser does not support frames</noframes>
</frameset>
</html>
PageHeader.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<script src="javascript/modernizr-2.6.2.min.js"></script>
<title>Page Header</title>
<link type="text/css" href="css/redesign-main.css" rel="stylesheet">
<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.10.1.custom.min.js"></script>
<!-- JavaScript Functionality to create drop down menu -->
<script type="text/javascript">
$(document).ready(function() {
$('nav li ul').hide().removeClass('fallback');
$('nav li').hover(
function () {
$('ul', this).stop().slideDown(300);
},
function () {
$('ul', this).stop().slideUp(300);
}
);
});
</script>
<style>
/*nav {background:#FFF;float:left;}*/
nav ul {
text-align:left;
}
nav ul li {
float:left;
display:inline;
border-right: 1px solid #083D72;
}
nav ul li:hover {
background:#2D8FF0;
}
nav ul li a {
display:block;
color:#444;
}
nav ul li ul {
position:absolute;
width:180px;
background:#09427C;
font-size: 12px;
}
nav ul li ul li {
width:180px;
}
nav ul li ul li a {
display:block;
color:#444;
}
nav ul li ul li:hover a {}
nav ul li ul.fallback {
display:none;
}
nav ul li:hover ul.fallback {
display:block;
}
</style>
</head>
<body onload="docOnLoad()">
<form id="frmPageHead" name="frmPageHead" action="">
<!-- BANNER START -->
<table id="banner" width="100%" border="0" cellspacing="0" cellpadding="0" style="">
<tr class="">
<div class="wrap">
<hgroup>
<h1 class="logo"><img src="images/logo.png" width="163" height="59"></h1>
<h2 class="site-heading">Welcome</h2>
</hgroup>
</div>
</tr>
</table>
<!-- BANNER END -->
<!-- START nav.site-nav -->
<nav class="site-nav">
<ul class="menu-nav wrap menu menu--hor">
<li class="menu-nav--home"><span class="icon-home"></span></li>
<li class="data-sources">Date Sources <span class="icon-caret-down"></span>
<li>
Information
<ul class="fallback">
<li>New Customer</li>
<li>Existing Customer</li>
<li>Pricing</li>
<li>Testimonials</li>
<li>Our Services</li>
</ul>
</li>
<li>
Additional Info
<ul class="fallback">
<li>Terms & Conditions</li>
<li>How To's</li>
</ul>
</li>
<li>
Contact Us
<ul class="fallback">
<li>Contact Details</li>
<li>Your Voice Matters</li>
<li>The Environment</li>
</ul>
</li>
<li>
Products
<ul class="fallback">
<li>Sound Deadening</li>
<li>Wiring</li>
<li>Connections</li>
</ul>
</li>
<li>
Need Help?
<ul class="fallback">
<li>Need Help</li>
<li>FAQ's</li>
<li>Contact Us</li>
</ul>
</li>
<li>
Cookies?
</li>
</li>
</ul>
<!-- END menu-nav -->
</nav> <!-- END nav.site-nav -->
</form>
<form id="frmDuy" name="frmDuy" method="post" action="">
<input type="hidden" id="ONLINE_HELP" name="ONLINE_HELP" value=""/>
</form>
</body>
</html>
I've spent quite a lot of time trying to get this to work with little success so any information is highly appreciated.
Thanks.
Update:
Now attempting to use layout structure:
<head>
<script> $(function({ $("#header").load("PageHeader.html"); }); </script>
</head>
<body>
<div id="header">
</div>
<div id="content">
<div id="pageNavigation">a
</div>
<div id="contentFrames">b
</div>
<div id="pageHelp">c
</div>
</div>
<div id="footer">
<h3>footer</h3>
</div>
</body>
</html>
I receive the following error:
SyntaxError: missing : after property id
$(function({ $("#header").load("PageHeader.html"); });
Which points to ("#header"
Update:
Tried this:
<body>
<div id="header">
<script> $(function({ $("#header").load("PageHeader.html"); }); </script>
</div>
<div id="content">
<div id="pageNavigation">a
</div>
<div id="contentFrames">b
</div>
<div id="pageHelp">c
</div>
</div>
<div id="footer">
<h3>footer</h3>
</div>
</body>
Still receiving the following error:
SyntaxError: missing : after property id
$(function({ $("#header").load("PageHeader.html"); });
Which points to ("#header"
Here a solution in jquery: http://viewsboard.com/boards/view/discussion/2/550
Here some example with code: http://deluxe-menu.com/cross-frame-mode-sample.html
Here a simple workaround: http://www.telerik.com/support/kb/aspnet-ajax/menu/can-radmenu-expand-over-other-frames-if-it-is-in-a-frame-itself.aspx
here another example: http://www.sothink.com/product/dhtmlmenu/store/crossframe/twomenus/
here another one: http://www.zzzxo.com/q/answers-drop-down-menu-over-frames-14560398.html
This problem seems old, old as frames, can I suggest you to eliminate frames?
Edit:
Excluding the tables layout (it was abandoned years ago), you should consider that frame are deprecated in html5.. In your place I should start with some layout, or also just like this:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="javascript/modernizr-2.6.2.min.js"></script>
<link type="text/css" href="css/redesign-main.css" rel="stylesheet">
<style>
div{
border-radius:20px; /*for border rounded*/
}
#header{
height:150px;
background-color:#FF0;
min-width:800px;
margin: 0 auto;
}
#pageNavigation{
min-height:450px;
margin: 0 auto;
width:20%;
background-color:#666;
float:left;
min-width:100px;
}
#contentFrames{
min-height:450px;
width:58%;
margin-left: 2px;
margin-right: 2px;
margin: 0 auto;
background-color:#03C;
float:left;
}
#pageHelp{
min-height:450px;
width:20%;
margin: 0 auto;
background-color:#3F0;
float:left;
min-width:100px;
}
#content{
margin: 0 auto;
width:90%;
min-width:720px;
}
#footer{
height:100px;
background-color:#FF0;
min-width:800px;
margin: 0 auto;
clear:both;
}
</style>
</head>
<body onload="docOnLoad()">
<div id="header">
<? //include('pageHeader.html'); ?>
<h1>header</h1>
</div>
<div id="content">
<div id="pageNavigation">a
</div>
<div id="contentFrames">b
</div>
<div id="pageHelp">c
</div>
</div>
<div id="footer">
<h3>footer</h3>
</div>

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