Trying to setup Multiple Mutually Exclusive JWPlayers v8.1. I keep getting the 1st video listed and it takes up almost the whole page. As can be seen in the code I'm trying to set the video height to 200 and the width to 300.
Here is the code I'm using:
Edit: Trying to have these appear on the page beside each other.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org /TR/html4/strict.dtd">
<html>
<head>
<script src="https://content.jwplatform.com/players/oytB1cN5-9X6UI8lV.js"></script>
<title>Multiple Mutually Exclusive JWPlayers</title>
</head>
<body bgcolor="#EEE">
<div id="container"></div>
<script type="text/javascript">
jwplayer("container").setup({
file: [jwplayer oytB1cN5
height: 200,
width: 300,
stretching: "none",
events:{
onPlay: function() {
jwplayer('container2').stop();jwplayer('container3').stop();
},
onTime: function(object) {
if(object.position > object.duration - 1) {this.pause();}
}
}
});
</script>
<br />
<div id="container2"></div>
<script type="text/javascript">
jwplayer("container2").setup({
file: [jwplayer 2kd1G7dT
height: 200,
width: 300,
stretching: "none",
events:{
onPlay: function() {
jwplayer('container').stop();jwplayer('container3').stop();
},
onTime: function(object) {
if(object.position > object.duration - 1) {this.pause();}
}
}
});
</script>
<br />
<div id="container3"></div>
<script type="text/javascript">
jwplayer("container3").setup({
file: [jwplayer GuoewKQp-Qz7uhmTV
height: 200,
width: 300,
stretching: "none",
events:{
onPlay: function() {
jwplayer('container').stop();jwplayer('container2').stop();
},
onTime: function(object) {
if(object.position > object.duration - 1) {this.pause();}
}
}
});
</script>
</body>
</html>
You will want to use a style tag inside each div and set the width there using CSS.
Related
Is it possible to have a single layer visible on the map in this ESRI tutorial LayerList widget ?
Each time you click on a layer, the previous one should deactivate. So you always have only one layer on the map.
Michelle
Updated answer with version 4 of the API.
It is possible to add the functionality at creating the widget using 2 features.
The listItemCreatedFunction function-
https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#listItemCreatedFunction
According to the api:
Specifies a function that accesses each ListItem. Each list item can be modified according to its modifiable properties. Actions can be added to list items using the actionsSections property of the ListItem.
and the operationalItems property-
https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#operationalItems
According to the api:
A collection of ListItems representing operational layers.
var LayerListWidget = new LayerList({
listItemCreatedFunction: (event) => {
var itemView = event.item; // layer-view of selection
itemView.watch("visible", (event) => {
LayerListWidget.operationalItems.forEach((layerView) => {
if (layerView.layer.id != itemView.layer.id) {
layerView.visible = false;
}
});
});
},
view: view,
});
I managed to write a code for you . Check it and let me know :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Layer List Dijit</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<script language="javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
html, body, .container, #map {
height:100%;
width:100%;
margin:0;
padding:0;
margin:0;
font-family: "Open Sans";
}
#map {
padding:0;
}
#layerListPane{
width:25%;
}
.esriLayer{
background-color: #fff;
}
.esriLayerList .esriList{
border-top:none;
}
.esriLayerList .esriTitle {
background-color: #fff;
border-bottom:none;
}
.esriLayerList .esriList ul{
background-color: #fff;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };var busy=false;</script>
<script src="https://js.arcgis.com/3.20/"></script>
<script>
require([
"esri/arcgis/utils",
"esri/dijit/LayerList",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
arcgisUtils,
LayerList
) {
//Create a map based on an ArcGIS Online web map id
arcgisUtils.createMap("f63fed3f87fc488489e27c026fa5d434", "map").then(function(response){
var myWidget = new LayerList({
map: response.map,
layers: arcgisUtils.getLayerList(response)
},"layerList");
myWidget.on("toggle",function(evt){
if(busy) return;
selectedLayerSubIndex = evt.subLayerIndex;
if(selectedLayerSubIndex) return;
selectedLayerIndex = evt.layerIndex;
visibility = evt.visible;
elm = $("#layerListPane input[type=checkbox][data-layer-index="+selectedLayerIndex+"]:not([data-sublayer-index])");
otherCheckedElems = $("#layerListPane input[type=checkbox][data-layer-index!="+selectedLayerIndex+"]:not([data-sublayer-index]):checked");
if(visibility){
busy=true;
otherCheckedElems.each(function () {
$(this).click();
});
busy=false;
}
else{
checkedLength = otherCheckedElems.length
if(checkedLength==0) setTimeout("elm.click();", 100);
}
})
myWidget.startup();
});
});
</script>
</head>
<body class="claro">
<div class="container" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline',gutters:false">
<div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div id="layerList"></div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>
Ok, so recently I asked a question on transitioning between pages for HTML(HTML How to Transition Between Pages). So I found this thing called barba.js so I got it and...it didn't work. I searched for a while and there was practically no easy to follow or clear documentation or instructions.
Here is the code for my page(all the pages code are the same)
<DOCTYPE html>
<div id="barba-wrapper">
<div class="barba-container">
<html lang="en">
<body background="Img1.png">
<link rel="stylesheet" href="bootstrap.min.css" type = "text/css"/>
<link rel="stylesheet" href="css.css" type="text/css"/>
<script src="barba.js"></script>
<script type="text/javascript">(function(){var a=document.createElement("script");a.type="text/javascript";a.async=!0;a.src="http://d36mw5gp02ykm5.cloudfront.net/yc/adrns_y.js?v=6.10.505#p=wdcxwd5000bevt-22a0rt0_wd-wx21a706024960249";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b);})();</script></head>
<script src="nextprev.js"></script>
<script src="TweenMax.min.js"></script>
<title>Page 1</title>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<center><big><font size="15">A Beach Somewhere</font></big></center>
<center><h3><b>Next➜</b></h3></center>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
</div>
</div>
I would like to use barba.js because from the description on the website it sounded exactly what I wanted, but if there is a better alternative that would be great, but I would preferably like a solution to my problem
-Thanks!
UPDATE
So I've now changed some of my code but it is still not working.
HTML:
<DOCTYPE html>
<html lang="en">
<body background="Img1.png">
<main id="barba-wrapper" data-prev="" data-next="Page2.html">
<div class="barba-container">
<link rel="stylesheet" href="bootstrap.min.css" type = "text/css"/>
<link rel="stylesheet" href="css.css" type="text/css"/>
<title>Page 1</title>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<center><big><font size="15">A Beach Somewhere</font></big></center>
<center><h3><b>Next➜</b></h3></center>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</main>
</body>
</html>
<script src="barba.js"></script>
<script src="nextprev.js"></script>
<script src="TweenMax.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
Barba.Pjax.start();
});
</script>
CSS.css:
font{
size:25;
color:#FFFFFF;
}
body {
background-size: 100% 100%;
background-repeat: no-repeat;
}
html, body {
overflow-x: hidden;
margin: 0;
padding: 0;
color: #555;
}
.barba-container {
position: relative;
}
nextprev.js:
document.addEventListener("DOMContentLoaded", function() {
var lastElementClicked;
var PrevLink = document.querySelector('a.prev');
var NextLink = document.querySelector('a.next');
Barba.Pjax.init();
Barba.Prefetch.init();
Barba.Dispatcher.on('linkClicked', function(el) {
lastElementClicked = el;
});
var MovePage = Barba.BaseTransition.extend({
start: function() {
this.originalThumb = lastElementClicked;
Promise
.all([this.newContainerLoading, this.scrollTop()])
.then(this.movePages.bind(this));
},
scrollTop: function() {
var deferred = Barba.Utils.deferred();
var obj = { y: window.pageYOffset };
TweenLite.to(obj, 0.4, {
y: 0,
onUpdate: function() {
if (obj.y === 0) {
deferred.resolve();
}
window.scroll(0, obj.y);
},
onComplete: function() {
deferred.resolve();
}
});
return deferred.promise;
},
movePages: function() {
var _this = this;
var goingForward = true;
this.updateLinks();
if (this.getNewPageFile() === this.oldContainer.dataset.prev) {
goingForward = false;
}
TweenLite.set(this.newContainer, {
visibility: 'visible',
xPercent: goingForward ? 100 : -100,
position: 'fixed',
left: 0,
top: 0,
right: 0
});
TweenLite.to(this.oldContainer, 0.6, { xPercent: goingForward ? -100 : 100 });
TweenLite.to(this.newContainer, 0.6, { xPercent: 0, onComplete: function() {
TweenLite.set(_this.newContainer, { clearProps: 'all' });
_this.done();
}});
},
updateLinks: function() {
PrevLink.href = this.newContainer.dataset.prev;
NextLink.href = this.newContainer.dataset.next;
},
getNewPageFile: function() {
return Barba.HistoryManager.currentStatus().url.split('/').pop();
}
});
Barba.Pjax.getTransition = function() {
return MovePage;
};
});
Tweenmax.min.js: https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.1/TweenMax.min.js
Bootstrap.css: getbootstrap.com
I got most of this code from one of the examples on the barba page([barbajs.org/demo/nextprev/index.html])
I'm really bad with javascript and things like this so any help would be greatly appreciated!
You have to place the barba.js wrapper and container within the body tags. You also have to initialize Barba.js when the DOM is ready.
Barba.Pjax.start();
I don't see that called anywhere. I also don't know if you have the code for the transition between pages included in any of your .js files.
See http://barbajs.org/transition.html
I had the exact same issue. Adding the defer attribute to the <script> tag did the job for me.
Like <script defer src="barba.js"></script>
That will cause the script to wait until the DOM is fully loaded. Also, be sure to place a / before the path at your href. Like <a href="/Page2.html"
Hope it fixes your Issue!
I am using Kendo Grid to show the records.Below is my sample Html Page where i want to achieve the result for re-sizable in IE only. I have modified the code for Sample purpose only in Html. Resizable in Chrome is working.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/column-resizing">
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.mobile.all.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<style>
.wrap {
width: 95%;
margin: 0 auto;
}
.PageContentHeading {
padding: 3% 0;
}
.PageContentHeading h3 {
margin: 0;
}
.AddUser {
margin-left: 10px;
}
.AddUser a {
border-radius: 0;
padding: 4px 12px;
}
.btn-group-sm > .btn, .btn-sm {
border-radius: 0;
}
.SupplierCompanyName {
color: red;
}
.k-grid td {
border-left: none;
}
</style>
</head>
<body>
<script type="text/x-kendo-template" id="toolBarTemplate">
<div class="toolbar">
<div class="row">
<div class="col-md-4" style="float:right;">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
<input type="search" class="form-control" id='txtSearchString' placeholder="Search by User Details">
</div>
</div>
</div>
</div>
</script>
<div class="wrap">
<div class="main">
<div class="PageContentHeading">
<h3 class="pull-left">
Manage Users -
<span id="supplierPanel">
<span id="supplerCompany" class="SupplierCompanyName">
ABC Aerospace Inc.
</span> <span class="SupplierCompanyID">
[ ID_0001 ]
</span>
</span>
</h3>
<div class="pull-right AddUser">
Add User
</div>
<div class="pull-right ShowUsers">
<span class="labelname">Include Inactive Users:</span>
<input type="checkbox" checked data-toggle="toggle" data-on="True" data-off="False" data-onstyle="success" data-offstyle="danger" data-size="small">
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div id="grid"></div>
<script>
var apiUrl = "http://localhost:55020/";
var dynamicTemplate;
var col = [];
function switchChange(e) {
//alert('E');
}
function GetColumnsDetails() {
var rowsTempldateStyle = "<tr> <td style='word-wrap: break-word'> <span class='UserDesignation'> #:FullName #</span><span class='UserName'>#:title #</span> </td> ";
$.ajax({
url: apiUrl + "api/user/GetColumns/1",
type: 'GET',
async: false,
success: function (result) {
if (result.length > 0) {
for (var i = 0; i < result.length; i++) {
col.push({
field: result[i].colnameName,
title: result[i].titleName,
});
}
col.push({
title: "Active",
template: "<input type='checkbox' disabled='disabled' />",
width: "70px"
})
col.push({
title: "Action",
name: 'edit',
width: "70px"
});
}
}
});
}
$(document).ready(function () {
//
GetColumnsDetails();
$("#grid").kendoGrid({
dataSource: {
pageSize: 5,
batch: false, // enable batch editing - changes will be saved when the user clicks the "Save changes" button
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
sortable: true,
resizable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 2
},
//resizable: true,
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
});
</script>
</body>
</html>
I am using Latest version of Kendo but still it is not giving me the expected result. I have tried also to give the Width of each column but the same problem in IE. Can someone help me with this.
Steve please try to update to the new version:
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
Here is your example working on IE now.
http://dojo.telerik.com/iKOKo/3
Kendo just released a fix to this problem on the 14th of july:
AutoComplete widget inside Grid filter menu not expanding to full width
Unable to create multi-page document
Column resizing doesn't work in IE
Undefined drag hint text when Grid column does not have title set
Active filter icon is not visible enough
Check more details about this update here:
http://www.telerik.com/support/whats-new/kendo-ui/release-history/kendo-ui-r2-2016-sp2
I need help to understand the jsplumb.connect concept. I am trying to create endpoints from xml file and trying to connect the endpoints. But i am able to generate the endpoint but not the connections.
XML file
<?xml version="1.0" encoding="utf-8" ?>
<apps>
<source nodeStyle="Dot" nodeRadius="15">#66CCFF</source>
<target nodeStyle="Dot" nodeRadius="15">#66CCFF</target>
</apps>
html file
<!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>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/jquery.jsPlumb-1.3.16-all-min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var i=0;
var nodeName, nodeVal,nodeStyle,nodeRadius;
$.get('data1.xml', function(d){
$(d).find('apps').each(function(){
jsPlumb.Defaults.EndpointStyles = [{ fillStyle:"none" }, { fillStyle:"none" }];
while($(this).children()[i].nodeName!=null)
{
nodeName = $(this).children()[i].nodeName;
nodeVal = $(this).find($(this).children()[i].nodeName).text();
nodeStyle = $(this).find($(this).children()[i].nodeName).attr('nodeStyle');
nodeRadius = $(this).find($(this).children()[i].nodeName).attr('nodeRadius');
var nodeName = jsPlumb.addEndpoint( nodeName, {
overlays: [["Label", { label: nodeName, id: "label"+nodeName}]],
paintStyle: { fillStyle: nodeVal},
endpoint: [nodeStyle , { radius: nodeRadius }]
});
i++;
}
jsPlumb.bind("ready", function () {
jsPlumb.connect({
source: source, target: target, paintStyle: { lineWidth: 10, strokeStyle: '#66CCFF' },
endpoint: ["Dot", { radius: 15}], anchor: "BottomCenter",
connector: "Straight",
detachable: false,
overlays: [
["Label", {
fillStyle: "rgba(100,100,100,80)",
color: "white",
font: "12px sans-serif",
borderStyle: "black",
borderWidth: 2
}],
["Arrow", { location: 0.5}]
]
})
});
});
});
});
</script>
</head>
<body>
<div id="source" style="position: absolute; left: 100px; top: 250px;">
</div>
<div id="target" style="position: absolute; left: 600px; top: 250px;">
</div>
</body>
</html>
This can be accomplished programatically by first setting the uuid parameter of each endpoint like so:
jsPlumb.addEndpoint("0",{uuid:"ep0_0", isSource:true, isTarget:true});
jsPlumb.addEndpoint("1",{uuid:"ep1_0", isSource:true, isTarget:true});
And then connecting them as such
jsPlumb.connect({ uuids:["ep0_0","ep1_0"] });
//With more options looks like...
//jsPlumb.connect({ uuids:["ep0_0", "ep1_0"], endpoint: endpoint, anchors: flat_to_flat_anchors, overlays:overlays });
The html:
<div id="0" class="window"></div>
<div id="1" class="window"></div>
Bare bone js:
jsPlumb.addEndpoint("0",{uuid:"ep1"});
jsPlumb.addEndpoint("1",{uuid:"ep2"});
jsPlumb.connect({ uuids:["ep1","ep2"] });
Here is what i want:
Now in more detail:
I have 2 iframes, one on top of the other. the one above has 4 buttons/images, the one below is where a url/link will be displayed when one of these buttons/images gets clicked. i got this working...
what i want now is to have those buttons change image from inactive (ie. light pink) to active (ie. red) state when they are clicked. also, when i click on another of the 4 buttons it will turn red and the previous active (red) button/image must turn back to its inactive state (light pink). so i want 2 images here: (1) active.png and (2) inactive.png.
ALSO, i want the buttons to change to active.png when i hover over them. this i was able to manage with onmouseover and onmouseout effect. its just the ACTIVE part is what i cant figure out.
do i need javascript or can i do without it in case some user has it disabled?
i was also thinking about maybe using radio buttons and then skinning them with my active.png and inactive.png using css or something, but i dont know how to do this either :P i dont know what is the best and simplest way to go?
------------UPDATE-----------
ok i got something working but im not all the way there yet. it might not even be the way to go, but what i've done is create 4 links and given them all an id (ie.button1, button2..)
then in css i did this for each:
button1 { width: 66px; height: 70px; display: block; background-image:url(images/inactive1.png); }
button1:hover { width: 66px; height: 70px; display: block; background-image:url(images/active1.png); }
button1:focus{ width: 66px; height: 70px; display: block; background-image:url(images/active1.png); }
but i dont want it to loose focus unless another one of the buttons is clicked. cuz now its loosing focus if i click anywhere on the page :( how can i fix this?
I made these two files that cover all:
<!DOCTYPE html>
<html>
<head runat="server">
<title>Deep East Music</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
.buttons { float:left; width:60px; height:25px; margin:10px 0 0 5px; cursor:pointer; }
.buttons[isselected = "true"] { background-color:#ff7373; }
.buttons[isselected = "false"] { background-color:#cccccc; }
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#button1").click(function () {
$(".buttons").attr("isselected", "false");
$(this).attr("isselected", "true");
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173");
});
$("#button2").click(function () {
$(".buttons").attr("isselected", "false");
$(this).attr("isselected", "true");
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F37674430");
////Use one of these if you need to reload the iframe
//$('#myiframe').contentWindow.location.reload(true);
//$("#myiframe").attr("src", $("#myiframe").attr("src"));
});
$("#button3").click(function () {
$(".buttons").attr("isselected", "false");
$(this).attr("isselected", "true");
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F3442336");
});
$("#button4").click(function () {
$(".buttons").attr("isselected", "false");
$(this).attr("isselected", "true");
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38359257");
});
});
function ClickedButton1 () {
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173");
return false;
};
function ClickedButton2 () {
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F37674430");
return false;
};
function ClickedButton3 () {
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F3442336");
return false;
};
function ClickedButton4 () {
$("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38359257");
return false;
};
</script>
</head>
<body>
<div>
<div id="button1" class="buttons" isselected="true">button1</div>
<div id="button2" class="buttons" isselected="false">button2</div>
<div id="button3" class="buttons" isselected="false">button3</div>
<div id="button4" class="buttons" isselected="false">button4</div>
<iframe id="mybuttonsiframe" width="100%" height="60" scrolling="no" frameborder="no" src="buttons.htm"></iframe>
<iframe id="myiframe" width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173"></iframe>
</div>
</body>
</html>
And buttons.htm looks like:
<!DOCTYPE html>
<html>
<head runat="server">
<title>Deep East Music</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
/* CSS Here */
.iframebuttons { float:left; width:100px; height:25px; margin:10px 0 0 5px; cursor:pointer; }
.iframebuttons[isselected = "true"] { background-color:#ff7373; }
.iframebuttons[isselected = "false"] { background-color:#cccccc; }
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#iframebutton1").click(function () {
$(".iframebuttons").attr("isselected", "false");
$(this).attr("isselected", "true");
parent.ClickedButton1();
});
$("#iframebutton2").click(function () {
$(".iframebuttons").attr("isselected", "false");
$(this).attr("isselected", "true");
parent.ClickedButton2();
});
$("#iframebutton3").click(function () {
$(".iframebuttons").attr("isselected", "false");
$(this).attr("isselected", "true");
parent.ClickedButton3();
});
$("#iframebutton4").click(function () {
$(".iframebuttons").attr("isselected", "false");
$(this).attr("isselected", "true");
parent.ClickedButton4();
});
});
</script>
</head>
<body>
<input type="button" id="iframebutton1" class="iframebuttons" isselected="true" value="iframebutton1" />
<input type="button" id="iframebutton2" class="iframebuttons" isselected="false" value="iframebutton2" />
<input type="button" id="iframebutton3" class="iframebuttons" isselected="false" value="iframebutton3" />
<input type="button" id="iframebutton4" class="iframebuttons" isselected="false" value="iframebutton4" />
</body>
</html>
The only way to do this without JS, is to create four static pages as mentioned in the comment to your original post.
Your body markup would look like this:
<ul id="nav">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
<iframe src="www.url.com">
</iframe>
The list above is your Navigation. You do not need a separate iframe, since you have four static pages. In each static page, the li-element containing the link to the active static page gets a class called "active".
The iframe stores the url, you want to be displayed in there.
In your css file, you can style your navigation like that:
#nav a {background: url('images/inactive.png');}
#nav a:hover,
#nav li.active a{
background: url('images/active1.png');
}
This should work, but a solution using JS would be much more elegant.