The user needs to be limited to open only 5 tab-panes (Max) although multiple tab buttons are available. After 6th tab is clicked, user needs to be alerted.
function addTab(title, url){
var tabs=$(".tabs"),
tabsContent=tabs.children("a");
if(tabsContent.find(".easyui-linkbutton").length===4)
{
alert("Maximum 5 Tabs are allowed");
}
else if ($('#tt').tabs('exists', title))
{
$('#tt').tabs('select', title);
}
else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
$('#tt').tabs('add',{
title:title,
content:content,
closable:true
});
}
}
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<div style="margin-bottom:10px" class="tabs">
tab1
tab2
tab3
tab4
tab5
tab6
tab7
</div>
<div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
<div title="Home">
</div>
</div>
Expect that only 5 Tab-panes open although user tries to open using 6th button. User need to be alerted with a message.
There is one minor change in your code
I changed this line
if($('.tabs-wrap').find('ul').children().length===4)
to this
if($('.tabs-wrap').find('ul').children().length > 5)
and it worked
here is your example
function addTab(title, url) {
var tabs = $(".tabs"),
tabsContent = tabs.children("a");
if ($('.tabs-wrap').find('ul').children().length > 5)
alert("Maximum 5 Tabs are allowed");
else if ($('#tt').tabs('exists', title))
$('#tt').tabs('select', title);
else {
var content = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>';
$('#tt').tabs('add', {
title: title,
content: content,
closable: true
});
}
}
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<div style="margin-bottom:10px" class="tabs">
tab1
tab2
tab3
tab4
tab5
tab6
tab7
</div>
<div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
<div title="Home">
</div>
</div>
hope it works
Related
I want to load some options via ajax request and show them into select tag HTML. After I get data and create a select tag manually, the HTML file doesn't show the select tag. I used jquery and put the codes in other files.
I try to put ajax request in both $(document).ready() and function but it doesn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- META SECTION -->
<title>Atlant - Responsive Bootstrap Admin Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<!-- END META SECTION -->
<!-- CSS INCLUDE -->
<link rel="stylesheet" type="text/css" id="theme" href="/public/css/theme-default.css"/>
<!-- EOF CSS INCLUDE -->
</head>
<body onload="onLoadCenterName()">
<!-- START PAGE CONTAINER -->
<div class="page-container">
<!-- PAGE CONTENT -->
<div class="page-content ">
<!-- PAGE CONTENT WRAPPER -->
<div class="page-content-wrap">
<div class="row">
<div class="col-md-12">
<form id="addSiteForm" class="form-horizontal"
style="margin-top: 20px;margin-left: 50px;margin-right: 50px">
<div class="panel panel-default">
<div class="panel-heading ">
<h3 class="panel-title "><strong>Add New Site</strong></h3>
</div>
<div class="panel-body">
</div>
<div class="panel-body">
<div class="form-group">
<label class="col-md-3 col-xs-12 control-label">Select User Type</label>
<div class="col-md-6 col-xs-12">
<select id="addSiteSelectCenterInput" class="form-control select">
</select>
<span class="help-block">Select type of the user account </span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- END PAGE CONTENT WRAPPER -->
</div>
<!-- END PAGE CONTENT -->
</div>
<!-- END PAGE CONTAINER -->
<!-- START PRELOADS -->
<audio id="audio-alert" src="/public/audio/alert.mp3" preload="auto"></audio>
<audio id="audio-fail" src="/public/audio/fail.mp3" preload="auto"></audio>
<!-- END PRELOADS -->
<!-- START SCRIPTS -->
<!-- START PLUGINS -->
<script type="text/javascript" src="/public/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/public/js/plugins/jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="/public/js/plugins/bootstrap/bootstrap.min.js"></script>
<!-- END PLUGINS -->
<!-- START THIS PAGE PLUGINS-->
<script type='text/javascript' src='/public/js/plugins/icheck.js'></script>
<script type="text/javascript" src="/public/js/plugins/jquery/jquery.mCustomScrollbar.js"></script>
<!-- END THIS PAGE PLUGINS-->
<!-- START TEMPLATE -->
<!-- <script type="text/javascript" src="/public/js/settings.js"></script>-->
<script type='text/javascript'
src='/public/js/plugins/validationengine/languages/jquery.validationEngine-en.js'></script>
<script type='text/javascript' src='/public/js/plugins/validationengine/jquery.validationEngine.js'></script>
<script type="text/javascript" src="/public/js/plugins/bootstrap/bootstrap-select.js"></script>
<script type='text/javascript' src='/public/js/plugins/noty/jquery.noty.js'></script>
<script type='text/javascript' src='/public/js/plugins/noty/layouts/topCenter.js'></script>
<script type='text/javascript' src='/public/js/plugins/noty/layouts/topLeft.js'></script>
<script type='text/javascript' src='/public/js/plugins/noty/layouts/topRight.js'></script>
<script type='text/javascript' src='/public/js/plugins/noty/themes/default.js'></script>
<script type="text/javascript" src="/public/js/plugins.js"></script>
<script type="text/javascript" src="/public/js/actions.js"></script>
<script type="text/javascript" src="/public/js/addSite.js"></script>
<!-- END TEMPLATE -->
<!-- END SCRIPTS -->
</body>
</html>
addSite.js
function onLoadCenterName() {
$.ajax({
type: 'GET',
url: '/centers/getAllCenters',
dataType: 'json',
contentType: 'application/json',
success: function (data) {
console.log("SUCCESS : ", data);
let selectList = document.getElementById("addSiteSelectCenterInput");
$.each(data, function (key, value) {
console.log(key, value._id, value.centerName);
const option = document.createElement("option");
option.value = value._id;
option.text = value.centerName;
selectList.appendChild(option);
// $('#addSiteSelectCenterInput')
// .append($("<option></option>")
// .attr("value", )
// .text(value.centerName));
});
console.log(selectList);
noty({
text: 'Successful load centers ',
layout: 'topRight',
type: 'success',
timeout: true
}).setTimeout(5000);
$.mpb("update", {
value: 100, speed: 5, complete: function () {
$(".mpb").fadeOut(200, function () {
$(this).remove();
});
}
});
},
error: function (e) {
console.log("ERROR : ", e);
noty({
text: 'There was an error',
layout: 'topRight',
type: 'error',
timeout: true
}).setTimeout(5000);
$.mpb("update", {
value: 100, speed: 5, complete: function () {
$(".mpb").fadeOut(200, function () {
$(this).remove();
});
}
});
}
});
}
in chrom console, result is here:
<select id="addSiteSelectCenterInput" class="form-control select" style="display: none;">
<option value="5d0f86f0a2b7a41bdcd3c91f">sdf</option><option value="5d0f9c4067731820fcabf1eb">scaasdad</option></select>
According to your console result, the <select> is not visible because it has the attribute style="display: none;".
There is nothing in the code that you have provided that would add that attribute, so you obviously haven't given us all the relevant code.
So you either need to remove that attribute... or don't hide the control in the first place.
To show it via jQuery use .show()...
$("#addSiteSelectCenterInput").show()
Or in vanilla JS change the style.display property...
document.getElementById("addSiteSelectCenterInput").style.display = "";
I am trying to add a draggable to the frames but it is not working and throwing the below exception
created the Frames using iframe but could not apply the draggable for my frames.Please help me to solve my problem.
Uncaught ReferenceError: HSplitter is not defined at HTMLDivElement.onmousedown
Please find my code below:
var HSplitter = {
mouseDown: function (_split, event)
{
if(!this.isToggle)
{
this.parent = _split.parentNode.parentNode; //td
this.currentSplit = _split;
this.splitterWidth = $(this.currentSplit).getWidth();
this.splitPointX = Event.pointerX(event);
this.drag = true;
this.splitDiv = $(this.parent).getElementsByClassName("HSplitDiv")[0];
//min width of a parent container couldn't be less than splitter width.
if( this.minWidth < this.splitterWidth )
this.minWidth = this.splitterWidth;
this.mouseOver(_split, event);
$(this.splitDiv).setStyle({paddingRight: '0px'}); //reset padding
this._splitDivOverflow(true); //set overflow to ON
}
},
mouseUp: function (split, event)
{
if(!this.isToggle)
{
this.drag = false;
this._setDynamicOverflow();
}
},
};
<head>
<link href="/Work/css/tab_style.css" type="text/css" rel="stylesheet"/>
<link href="D:/cnsdi-projects/style.css" type="text/css" rel="stylesheet"/>
<link rel="stylesheet" href="/Work/css/1.10.19/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="/Work/css/1.10.19/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script type="text/javascript" src="/Work/js/3.3.7/bootstrap.min.js">
</script>
</head>
<body>
<div class="tab-content" >
<div id="sectionA" class="tab-pane fade in active" style="overflow:visible;">
<iframe scrolling="yes" src="pg1.html" name="leftside" style="position:absolute;top:140px;left:0%;width:25%;height:100%;border: none;" ></iframe>
<div class="split1" onselect="return false;" unselectable="on" onmouseup="HSplitter.mouseUp(this, event);" onmousedown="HSplitter.setMaxMinWidth('-1','-1'); HSplitter.mouseDown(this, event);" style="left: auto;">
<span class="collapse l-splt-btn" onclick="HSplitter.splitToggle(this);"></span>
</div>
<iframe src="pg2.html" name="rightside" scrolling="yes" style="position:absolute;top:140px;left:25%;width:75%;height:50%;border: none;"></iframe>
<div class="split"><div class="vcollapse d-splt-btn" onclick="VSplitter.splitToggle(this);" toppaneheight="50%" id="idx1320192_vspltbtn"></div></div>
<iframe src="pg3.html" name="rightside" scrolling="yes" style="position:absolute;top:450px;left:25%;width:75%;height:30%;border: none;"></iframe>
</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/utils/Draggable.min.js"></script>
Please input this code in your site header and if it doesn't work , let me know.
Thank you!
So I hope I'm asking this correctly.
I have content from a php file being loaded into an html page. The php file contains the info for a collapsible set. The popup does not work for the data sent back from the php file once i change the html of the popup div.
Is this because the content did not exist when the page was initially loaded? If this is the case, how do I go about loading this content. I'm really trying to keep the php off the main html pages if at all possible. Although I'm starting to realize this may not be possible. Any help with this would be greatly appreciated.
Here's my html page (this page is loaded after an initializing page is submitted)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>theClipboard: Count</title>
<link rel="stylesheet" href="../inc/stylez.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"/>
</head>
<body>
<div id="container">
<div data-role="page" data-theme="b" id="countStartedPage">
<div data-role="header" data-position="fixed" class="ui-grid-c">
<div class="ui-block-a">
<a href="#categoryMenu" data-rel="popup" data-transition="slidedown"
class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a">category</a>
<div id="loadCatMenuHere">
<!--<div id="categoryMenu" data-role="popup" data-theme="b">
<p>is it working</p>
</div>-->
</div>
</div>
<div class="ui-block-b">
<p>location menu</p>
</div>
<div class="ui-block-c">
Go Back
</div>
<div class="ui-block-d">
<p>validate counts</p>
</div>
</div>
<div data-role="main" id="countPageContent">
<h3> content goes here</h3>
</div>
<div data-role="footer" data-position="fixed">
<p class="centerText">copyright 2016 tosco(rs)2 all rights reserved</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<!--
<script src="countJS.js"></script>
-->
<script>
$(document).ready(function(){
console.log("page 2 loaded");
getCategoryMenu();
function getCategoryMenu() {
var getCatMenu = $.post('categoryMenu.php');
getCatMenu.done(function (data) {
console.log("received cat menu #categoryMenu.html: " + $('#categoryMenu').html());
$('#loadCatMenuHere').html(data);
console.log("#category menu data: " + data);
});
getCatMenu.fail(function (data) {
console.log("failed at getting cat menu:");
});
}
})
</script>
</body>
</html>
here's my php file i'm pulling from
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"/>
<?php
include("../inc/connect.php");
session_start();
$buildFamMenu = $conn->prepare("select familyName from familyTbl order by familyPriority");
$buildFamMenu->execute();
$buildFamMenu->store_result();
$buildFamMenu->bind_result($family);
$buildCatMenu = $conn->prepare("select categoryID, categoryName from categoryTbl where family = ? order by categoryPriority");
$buildCatMenu->bind_param("s", $family);
$buildCatMenu->execute();
$buildCatMenu->store_result();
$buildCatMenu->bind_result($categoryID, $categoryName);
echo "<div id='categoryMenu' data-role='popup' data-theme='b'>";
echo "<div data-role='collapsibleset'>";
while ($buildFamMenu->fetch()) {
echo "<div data-role='collapsible'>
<h3>" .$family ."</h3>
<ul><li>test</li><li>test2</li><li>test3</li></ul>
</div>";
}
echo "</div></div>";
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
I believe that this may be due to the document object you're trying to reference not yet being loaded at the time of your reference.
I would wrap the $.post in a protective 'if != undefined' block with an else statement that recalls the function after an interval.
(some pseudo code):
if (myDiv is not undefined) { do stuff } else
{ setInterval(thisSameFunction, 2000); }
I have a working code to embed a Wowza manifest.mpd live video stream into a MPEG-dash player on a website but in order for it to work, you have to put in the URL to the manifest file and then click connect.
I need to get rid of the input box and just have it load the manifest file automatically on page load.
I've tried adding the src to the video tag as the manifest URL but it doesn't load. I'm guessing that when clicking connects to load the manifest file the script is also doing something else but with no scripting knowledge I don't know what.
Can anyone suggest what I would change the code to so that it will load the script as it does when you click connect but automatically on page load?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>MPEG-DASH Player - Live Video Streaming</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/wowza.css" type="text/css" />
<!-- Libraries -->
<script src="app/lib/jquery/js/jquery-1.8.3.min.js"></script>
<script src="app/lib/jquery/js/jquery-ui-1.9.2.custom.min.js"></script>
<!-- https://github.com/kriskowal/q -->
<script src="app/lib/q.js"></script>
<!-- https://github.com/creynders/dijon-framework -->
<script src="app/lib/dijon.js"></script>
<!-- Misc Libs -->
<script src="app/lib/xml2json.js"></script>
<script src="app/lib/objectiron.js"></script>
<script src="app/lib/long.js"></script>
<script src="app/lib/Math.js"></script>
<!-- Player -->
<script src="app/js/streaming/MediaPlayer.js"></script>
<script src="app/js/streaming/Context.js"></script>
<script src="app/js/streaming/ErrorHandler.js"></script>
<script src="app/js/streaming/Capabilities.js"></script>
<script src="app/js/streaming/Debug.js"></script>
<script src="app/js/streaming/VideoModel.js"></script>
<script src="app/js/streaming/vo/SegmentRequest.js"></script>
<script src="app/js/streaming/ManifestLoader.js"></script>
<script src="app/js/streaming/ManifestUpdater.js"></script>
<script src="app/js/streaming/ManifestModel.js"></script>
<script src="app/js/streaming/MediaSourceExtensions.js"></script>
<script src="app/js/streaming/SourceBufferExtensions.js"></script>
<script src="app/js/streaming/VideoModelExtensions.js"></script>
<script src="app/js/streaming/BufferExtensions.js"></script>
<script src="app/js/streaming/FragmentController.js"></script>
<script src="app/js/streaming/AbrController.js"></script>
<script src="app/js/streaming/FragmentLoader.js"></script>
<script src="app/js/streaming/Stream.js"></script>
<script src="app/js/streaming/BufferController.js"></script>
<script src="app/js/streaming/rules/SwitchRequest.js"></script>
<script src="app/js/streaming/rules/DownloadRatioRule.js"></script>
<script src="app/js/streaming/rules/InsufficientBufferRule.js"></script>
<script src="app/js/streaming/rules/LimitSwitchesRule.js"></script>
<script src="app/js/streaming/rules/BaseRulesCollection.js"></script>
<!-- Metrics -->
<script src="app/js/streaming/vo/MetricsList.js"></script>
<script src="app/js/streaming/MetricsModel.js"></script>
<script src="app/js/streaming/vo/metrics/BufferLevel.js"></script>
<script src="app/js/streaming/vo/metrics/HTTPRequest.js"></script>
<script src="app/js/streaming/vo/metrics/PlayList.js"></script>
<script src="app/js/streaming/vo/metrics/RepresentationSwitch.js"></script>
<script src="app/js/streaming/vo/metrics/TCPConnection.js"></script>
<script src="app/js/streaming/vo/metrics/DroppedFrames.js"></script>
<!-- Dash -->
<script src="app/js/dash/Dash.js"></script>
<script src="app/js/dash/DashContext.js"></script>
<script src="app/js/dash/vo/Segment.js"></script>
<script src="app/js/dash/DashParser.js"></script>
<script src="app/js/dash/DashHandler.js"></script>
<script src="app/js/dash/BaseURLExtensions.js"></script>
<script src="app/js/dash/FragmentExtensions.js"></script>
<script src="app/js/dash/DashManifestExtensions.js"></script>
<script src="app/js/dash/DashMetricsExtensions.js"></script>
<script src="app/js/dash/DashMetricsConverter.js"></script>
<!-- App -->
<!--script src="app/js/main.js"></script-->
<!-- Framework CSS -->
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/wowza.css" type="text/css" />
<script>
function supports_media_source()
{
"use strict";
var hasWebKit = (window.WebKitMediaSource !== null && window.WebKitMediaSource !== undefined),
hasMediaSource = (window.MediaSource !== null && window.MediaSource !== undefined);
return (hasWebKit || hasMediaSource);
}
</script>
</head>
<body>
<div class="container">
<!-- HEADER -->
<div class="span-18">
<h1>Live Video Streaming</h1>
<h2>MPEG-DASH Player</h2>
</div>
<div class="span-6 last">
<img src="img/wowza-logo_1024.png" class="logo" style="height:72px;width:205px" />
</div>
<hr class="heading">
<!-- END HEADER -->
<!-- EXAMPLE PLAYER: WIDTH of this player should be 630px, height will vary depending on the example-->
<div class="span-16">
<div id="supported" style="display:none">
<div>
<style>
video {
background-color: #000000;
}
</style>
<video id="videoObj" x-webkit-airplay="allow" controls alt="Example File" width="630" height="354" onerror="failed(event)" src="http://undergroundsoundz.com:1935/uszlive/myStream/manifest.mpd"></video>
</div>
<table>
<tr>
<td>
<button id="playObj" type="button" style="width:50px" onclick="JavaScript:playControl()" disabled="disabled">Pause</button>
</td>
</tr>
<tr>
<td align="right">
<b>Stream:</b>
</td>
<td>
<input id="connectStr" size = "56" type="text" placeholder="" value="http://undergroundsoundz.com:1935/uszlive/myStream/manifest.mpd"/>
<button id="connectObj" type="button" style="width:80px" onclick="JavaScript:connect()">Connect</button>
</td>
</tr>
<tr>
<td align="right">
<b>Status:</b>
</td>
<td>
<label id="statusStr" size = "100" type="text" placeholder="" value="">Disconnected</label>
</td>
</tr>
</table>
</div>
<div id="debug_log" style="height: 425px; width: 630px; overflow: auto; clear: both;">
</div>
<script>
if ( supports_media_source() ) {
supported.style.display="";
videoObj.style.display="";
}
else {
notsupported.style.display="";
}
var player;
function connect()
{
if(connectObj.textContent == "Disconnect") {
if(player!=null)
player.stop();
videoObj.src = null;
videoObj.load();
connectObj.textContent = "Connect";
playObj.disabled = "disabled";
playObj.textContent = "Pause";
statusStr.textContent = "Disconnected";
}
else {
connectObj.textContent = "Disconnect";
playObj.disabled = "";
playObj.textContent = "Pause";
statusStr.textContent = "Playing";
var video = document.querySelector("video"),
context = new Dash.di.DashContext();
player = new MediaPlayer(context);
player.startup();
debug = player.debug;
//debug.init(console);
player.autoPlay = true;
player.attachView(video);
player.setIsLive(true);
player.attachSource(connectStr.value);
}
}
function playControl() {
if (videoObj.paused == false) {
videoObj.pause();
statusStr.textContent = "Paused";
playObj.textContent = "Play";
}
else {
videoObj.play();
statusStr.textContent="Playing";
playObj.textContent = "Pause";
}
}
function failed(e) {
// video playback failed - show a message saying why
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
statusStr.textContent='You aborted the video playback.';
break;
case e.target.error.MEDIA_ERR_NETWORK:
statusStr.textContent='A network error caused the video download to fail part-way.';
break;
case e.target.error.MEDIA_ERR_DECODE:
statusStr.textContent='The video playback was aborted due to a corruption problem or because the video used features your browser did not support.';
break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
statusStr.innerHTML= 'The video could not be loaded, either because the server or network failed or because the format is not supported.<br/>';
statusStr.innerHTML+= '<span style="color:red;">Please close all tabs and then try running the appropriate <span style="font-style:italic;">LaunchDashPlayer</span> script for your system in your \"examples/LiveVideoStreaming/MPEGDASHPlayer\" folder.</span>';
break;
default:
statusStr.textContent = 'An unknown error occurred.';
break;
}
}
</script>
</div>
</div>
</body>
OK, so here's my issue (it must be simple, but I still cannot figure this one out)...
I've got a sample HTML code like the one below :
<!-- New Website #1 -->
<!DOCTYPE html>
<html style='min-height:0px;'>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile.min.css" />
<link rel="stylesheet" href="custom.css" />
<link rel="stylesheet" href="dev.css" />
</head>
<body id="jqm-website-6926" class="" >
<!-- New Page #1 -->
<div data-role="page" comp-id="jqm-page-6271" id="jqm-page-6271" class="" data-add-back-btn="false" data-back-btn-text="" data-back-btn-theme="" data-dom-cache="false" data-theme="" data-title="" >
<!-- New Header #1 -->
<div data-role="header" comp-id="jqm-header-364" id="jqm-header-364" class="" data-position="" data-fullscreen="false" data-theme="" >
<h1></h1>
</div>
<!-- / New Header #1 -->
<!-- New Content #1 -->
<div data-role="content" comp-id="jqm-content-3537" id="jqm-content-3537" class="" data-theme="" >
<!-- New Button #1 -->
<div comp-id="jqm-button-1547" >
<a data-role="button" id="jqm-button-1547" class="" data-corners="true" data-icon="" data-iconpos="left" data-iconshadow="true" data-inline="false" data-mini="false" data-shadow="true" data-theme="" href="#" data-transition="(null)">
</a>
</div>
<!-- / New Button #1 -->
</div>
<!-- / New Content #1 -->
</div>
<!-- / New Page #1 -->
<!-- New Page #1 -->
<div data-role="page" comp-id="jqm-page-9207" id="jqm-page-9207" class="" data-add-back-btn="false" data-back-btn-text="" data-back-btn-theme="" data-dom-cache="false" data-theme="" data-title="" >
</div>
<!-- / New Page #1 -->
<script src="jquery.min.js"></script>
<script src="jquery.mobile.min.js"></script>
<script src="custom.js"></script>
<script src="dev.js"></script>
</body>
</html>
<!-- / New Website #1 -->
All I want to do is when a specific element, with the comp-id attribute set, is clicked - we highlight (by adding the msp-selected class) just that specific element.
However, this is not working...
This is what I've tried :
function removeAll()
{
$("[comp-id]").each(function() {
if ($(this)!==undefined) {
$(this).removeClass("msp-selected");
}
});
}
$(document).ready( function() {
$('[comp-id]:not(.msp-selected)').on('click', function(e) {
removeAll();
$(this).addClass('msp-selected');
});
});
However, here's the problem :
When clicking on the button (comp-id="jqm-button-1547")
It highlights : a) first the button, b) then jqm-content-3537, c) then jqm-page-6271
In a few words, in the end, the 'page' is highlighted, instead of the button.
Any ideas?
And here's a fiddle : http://jsfiddle.net/CTZD3/
Maybe you can stop the event to be propagated to parents elements with event.stopPropagation();
$(document).ready( function() {
$('[comp-id]:not(.msp-selected)').on('click', function(e) {
removeAll();
e.stopPropagation();
$(this).addClass('msp-selected');
});
});