<!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>
<title>My Videos</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">
function loadVideo(playerUrl, autoplay) {
swfobject.embedSWF(
playerUrl + '&rel=1&border=0&fs=1&autoplay=' +
(autoplay?1:0)+'&version=3', 'player', '585', '355', '9.0.0', false,
false, {allowfullscreen: 'true'});
/*Parse the facebook like button*/
$('#like').html('<fb:like href="'+playerUrl+'" layout="button_count" show_faces="false" width="65" action="like" font="segoe ui" colorscheme="light" />')
if (typeof FB != "undefined"){
FB.XFBML.parse(document.getElementById('like'))
}
}
function showMyVideos(data) {
var feed = data.feed;
var entries = feed.entry || [];
var html = ['<ul class="videos">'];
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var title = entry.title.$t.substr(0, 20);
var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
var playerUrl = entries[i].media$group.media$content[0].url;
var videoId = playerUrl.substr(playerUrl.indexOf('v/')+2, 11);
playerUrl = "http://www.youtube.com/v/" + videoId;
html.push('<li onclick="loadVideo(\'', playerUrl, '\', true)">',
'<img src="',
thumbnailUrl, '" width="94" height="58"/> </span>', title, '</li>');
}
html.push('</ul>');
document.getElementById('videos').innerHTML = html.join('');
if (entries.length > 0) {
loadVideo(entries[0].media$group.media$content[0].url, false);
}
}
$(function(){
$.ajax({
type: "GET",
url: "http://gdata.youtube.com/feeds/api/standardfeeds/most_viewed_Autos?time=today&alt=json-in-script&max-results=5&format=5",
cache: false,
dataType:'jsonp',
success: function(data){
showMyVideos(data);
},
error: function(XMLHttpRequest, textStatus, errorThrown, data){
alert("Not able to fetch the data due to feed unavailability!!!");
}
});
})
</script>
<style>
body {
background:#fff;
color:silver;
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
line-height:1.125em;
}
#videoContainer {
font-size:.75em;
overflow:hidden;
position:absolute;
left:0;
top:0;
margin-left:40px;
margin-top:5px;
}
#like {
height:15px;
margin-top:10px;
text-align:right;
}
object {
-moz-box-shadow:5px 5px 5px #ccc;
-webkit-box-shadow:5px 5px 5px #ccc;
box-shadow:5px 5px 5px #ccc;
}
ul.videos {
list-style:none;
margin-bottom:1em;
margin-left:0;
padding-left:0;
}
ul.videos li {
cursor:pointer;
display:inline;
margin-bottom:1em;
padding-right:28px;
color:blue;
}
</style>
</head>
<body>
<div id="videoContainer">
<div id="playerContainer">
<div id="player">
</div>
<div id="like">
</div>
<div id="videos">
</div>
</div>
</div>
</body>
</html>
Can someone please tell me how to position the title of the small thumbnails.
Thank's
Seems like you have a closing span tag in your output, but no starting span tag.
Related
Our videos use the lower third of the page for introductions, etc. much like TV News stations do. When captions are on, they're blocking all of that, thus creating a LOT of complaints from the communities that need the captions. I've tried tinkering with the CSS, but with a responsive layout, resizing the player wreaks havoc, often putting them out of sight altogether.
Is there a setting that can be changed, or technique to use, that will keep the captions at the top and in view when resized, OR in an external container?
Problem: the JW player 608 live captions are not formatted cleanly.
To solve this, disable the JW caption display and format our own window, named "ccbuffer"
<style type="text/css">
.jw-captions {
display: none !important;
}
#ccbuffer {
border: 2px solid white !important;
border-radius: 4px;
background-color: black !important;
display: flex;
height: 120px;
margin-top: 6px;
font: 22px bold arial, sans-serif;
color: white;
justify-content: center;
align-items: center;
}
</style>
Here is where I show the player, and ccbuffer is a div right below it
<div id="myPlayer">
<p style="color: #FFFFFF; font-weight: bold; font-size: x-large; border-style: solid; border-color: #E2AA4F">
Loading video...
</p>
</div>
<div id="ccbuffer" />
DOMSubtreeModified is deprecated. Use MutationObserver, which is less stressful on the client.
Let's hook the 'captionsChanged' event from JW. if track is 0 then no captions are selected and we disconnect the observer. If captions are selected, then we use jquery to pull the text out of the jw-text-track-cue element, and format it into a nice 3 line display in our ccbuffer window.
<script>
var observer;
jwplayer().on('captionsChanged', function (event) {
if (event.track == 0) {
observer.disconnect();
$('#ccbuffer').hide('slow');
}
else {
$('#ccbuffer').show('slow');
// select the target node
var target = document.querySelector('.jw-captions');
// create an observer instance
observer = new MutationObserver(function(mutations) {
$('.jw-text-track-cue').each(function(i) {
if (i == 0)
$('#ccbuffer').html( $(this).text() );
else
$('#ccbuffer').append("<br/>" + $(this).text() );
});
});
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true }
// pass in the target node, as well as the observer options
observer.observe(target, config);
}
});
$(document).ready(function () {
$('#ccbuffer').hide();
});
</script>
So when the user enables captions, the ccbuffer window will slide open and display a clean 3 line representation of the CC text.
Final Solution: External Captions that are draggable/resizable
All credit to #Basildane, I worked out how to extenalize the captions with VOD, and to make them draggable and resizable, with CSS experimentation for ADA consideration:
<!DOCTYPE html>
<html>
<head>
<title>JW External Captions</title>
<meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Lang" content="en">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="/jwplayer/v8.10/jwplayer.js"></script>
<style type="text/css">
#myPlayer {
margin-bottom:5px;
}
.jw-captions {
display: none !important;
}
#ccbuffer {
color: white;
background-color: black;
opacity:.7;
font: 22px bold san-serif;
width: 100%;
padding: 15px;
height: 100%;
position:relative;
}
.night {
color:silver !important;
background-color: black !important;
opacity:1 !important;
border-color:silver !important;
}
.highcontrast {
color:white ! important;
background-color: black !important;
opacity:1 !important;
border-color:white !important;
}
.highcontrast2 {
color:black !important;
background-color: yellow !important;
opacity:1 !important;
border-color:black !important;
}
.highcontrast3 {
color:yellow !important;
background-color: black !important;
opacity:1 !important;
border-color:yellow !important;
}
#ccContainer {
position: absolute;
z-index: 9;
border: 1px solid inherit;
overflow: hidden;
resize: both;
width: 640px;
height: 180px;
min-width: 120px;
min-height: 90px;
max-width: 960px;
max-height: 300px;
}
#ccContainerheader {
padding: 3px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
border:1px solid;
}
</style>
</head>
<body>
<h3>JW Draggable Captions Container</h3>
<div id="PlayerContainer" style="width:401px;">
<div id="myPlayer">Loading video...</div>
</div>
<div id="ccContainer">
<!-- Include a header DIV with the same name as the draggable DIV, followed by "header" -->
<div style="float:right;">
<form id="myform">
<select id="ccFontFamily">
<option value="sans-serif">Default Font</option>
<option value="serif">Serif</option>
<option value="monospace">Monospace</option>
<option value="cursive">Cursive </option>
</select>
<select id="ccFontSize" style="">
<option value="22">Default Size</option>
<option value="14">14</option>
<option value="18">18</option>
<option value="24">24</option>
<option value="32">32</option>
</select>
<select id="ccContrast" style="">
<option value="ccdefault">Default Contrast</option>
<option value="night">Night</option>
<option value="highcontrast">High Contrast</option>
<option value="highcontrast2">Black/Yellow</option>
<option value="highcontrast3">Yellow/Black</option>
</select>
<button id="ccFontReset">Reset</button>
</form>
</div>
<div id="ccContainerheader">
Captions (click to move)
</div>
<div id="ccbuffer"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
jwplayer.key = 'xxxxxxxxxxxxxxxxxxx';
jwplayer('myPlayer').setup({
width: '100%', aspectratio: '16:9', repeat: 'false', autostart: 'false',
playlist: [{
sources: [ { file: 'https:www.example.com/video.mp4'}],
tracks: [ { file: 'https:www.example.com/video-captions.vtt', kind: 'captions', label: 'English', 'default': true } ]
}]
})
// External CC Container
$('#ccContainer').hide();
var position = $('#myPlayer').position();
var width = $('#PlayerContainer').outerWidth();
ccTop = position.top;
ccLeft = (width+50)+'px'
$('#ccContainer').css({'top':ccTop, left:ccLeft });
var observer;
jwplayer().on('captionsList', function (event) {
ccObserver(event);
});
jwplayer().on('captionsChanged', function (event) {
ccObserver(event);
});
videoplayer.on('fullscreen', function(event){
if(event.fullscreen){
$('.jw-captions').css('display','block');
}else{
$('.jw-captions').css('display','none');
}
});
$("#ccFontFamily").change(function() {
$('#ccbuffer').css("font-family", $(this).val());
});
$("#ccFontSize").change(function() {
$('#ccbuffer').css("font-size", $(this).val() + "px");
});
$("#ccContrast").change(function() {
$('#ccContainer').removeClass("night highcontrast highcontrast2 highcontrast3").addClass( $(this).val() );
$('#ccContainerheader').removeClass("night highcontrast highcontrast2 highcontrast3").addClass( $(this).val() );
$('#ccbuffer').removeClass("night highcontrast highcontrast2 highcontrast3").addClass( $(this).val() );
$('select').removeClass("night highcontrast highcontrast2 highcontrast3").addClass( $(this).val() );
$('#ccFontReset').removeClass("night highcontrast highcontrast2 highcontrast3").addClass( $(this).val() );
});
$('#ccFontReset').click(function() {
ccFontReset();
});
function ccFontReset(){
$("#ccFontFamily").val($("#ccFontFamily option:first").val()).trigger('change');
$("#ccFontSize").val($("#ccFontSize option:first").val()).trigger('change');
$("#ccContrast").val($("#ccContrast option:first").val()).trigger('change');
}
ccFontReset();
});
function ccObserver(event){
if (event.track == 0) {
$('#ccContainer').hide('slow');
$('.jw-captions').css('display','block'); // VERY important
if (observer != null){
observer.disconnect();
}
}
else {
$('#ccContainer').show('slow');
$('.jw-captions').css('display','none'); // VERY important
var target = document.querySelector('.jw-captions');
observer = new MutationObserver(function(mutations) {
$('.jw-text-track-cue').each(function(i) {
if (i == 0)
$('#ccbuffer').html( $(this).text() );
else
$('#ccbuffer').append("<br/>" + $(this).text() );
});
});
var config = { attributes: true, childList: true, characterData: true }
observer.observe(target, config);
}
}
// External CC Container - Make the DIV element draggable:
dragElement(document.getElementById("ccContainer"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
</body>
</html>
I have created one AngularJs directive to clear the input field. I want the "close" icon to be placed inside the respective input element. But its going out of input field.
Here is the plnkr -
https://plnkr.co/edit/WHjRviyuYfFVfg2TnVUP?p=preview
Note: Please check the plnkr preview by resizing it.
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
$scope.fname = "Hello!!"
$scope.lname = "World";
})
.directive('clearField', function($compile) {
return {
restrict: 'A',
scope: {
model: '=ngModel'
},
link: function(scope, element, attr) {
// Add wrapper to the element
scope.model = (scope.model == undefined) ? "" : scope.model;
element.wrap('<span class="wrapper"></span>')
.addClass('pr14')
.after('<span class="clear">×</span>');
var clearInputElement = angular.element(element.next());
clearInputElement.bind('click', function() {
scope.$apply(scope.model = "");
});
scope.$watch('model', function() {
if (scope.model.length > 0) {
clearInputElement.css("visibility", "visible");
} else {
clearInputElement.css("visibility", "hidden");
}
});
}
}
});
.wrapper {
position: relative;
display: inline-block
}
.pr14 {
padding-right: 17px;
}
.clear {
position: absolute;
right: 7px;
color: grey;
font-size: 17px;
}
.clear:hover {
cursor: pointer;
color: blue;
}
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="MyController">
<label>Name: </label>
<input type="text" ng-model="fname" clear-field>
<textarea ng-model="lname" id="" cols="30" rows="10" clear-field></textarea>
</body>
</html>
As input tags are not container tag, you need to wrap input tag and close tag in a div.
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
$scope.fname = "Hello!!"
$scope.lname = "World";
})
.directive('clearField', function($compile) {
return {
restrict: 'A',
scope: {
model: '=ngModel'
},
link: function(scope, element, attr) {
// Add wrapper to the element
scope.model = (scope.model == undefined) ? "" : scope.model;
element.wrap('<span class="wrapper"></span>')
.addClass('pr14')
.after('<span class="clear">×</span>');
var clearInputElement = angular.element(element.next());
clearInputElement.bind('click', function() {
scope.$apply(scope.model = "");
});
scope.$watch('model', function() {
if (scope.model.length > 0) {
clearInputElement.css("visibility", "visible");
} else {
clearInputElement.css("visibility", "hidden");
}
});
}
}
});
.wrapper {
position: relative;
}
.pr14 {
padding-right: 17px;
}
.clear {
position: absolute;
right: 7px;
color: grey;
font-size: 17px;
}
.clear:hover {
cursor: pointer;
color: blue;
}
.wrap{position:relative;}
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="MyController">
<div class="wrap">
<label>Name: </label>
<input type="text" ng-model="fname" clear-field>
</div>
<br>
<div class="wrap">
<textarea ng-model="lname" id="" cols="30" rows="10" clear-field></textarea>
</div>
</body>
</html>
Change your .wrapper class like this:
.wrapper {
position: relative;
display: inline-block;
}
I've got a super simple site I'm experimenting with jquery. I've a CSS stylesheet but some of the properties are just getting ignored. For example, I'm setting the padding and border-radius properties. I checked the browser (firefox, though chrome is the same):
Error in parsing value for 'padding'. Declaration dropped. stylesheet.css:26:12
Error in parsing value for 'border-radius'. Declaration dropped. stylesheet.css:28:15
Error in parsing value for 'border-radius'. Declaration dropped. stylesheet.css:33:15
Error in parsing value for 'width'. Declaration dropped. stylesheet.css:40:7
Error in parsing value for 'height'. Declaration dropped.
Even width and height, which I've actually managed to set for some other divs! It seems totally random, some properties just don't get parsed, such as the border-radius.
So the result (snippet below) looks like this:
google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawBasic);
$(document).ready(function() {
$('.square').mouseenter(function() {
$(this).animate({
width: '+=30px'
});
});
$('.square').mouseleave(function() {
$(this).animate({
width: '-=30px'
});
});
$('.square').click(function() {
$(this).toggle(1000);
});
var size = 10;
var graphData = [new Array(size),new Array(size)];
var column1 = graphData[0];
var column2 = graphData[1];
column1[0] = "Data1";
column2[0] = "Data2";
for (i = 1; i < column1.length; i++) {
column1[i] = i;
column2[i] = 2*i;
}
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['Data set 1'].concat(column1),
['Data set 2'].concat(column2)
],
types: {
'Data set 1': "step",
'Data set 2': "step"
}
}
});
});
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
var size = 40;
var column1 = new Array(size);
var last = 0;
for (i = 0; i < column1.length; i++) {
var newn = last + (0.5 - Math.random());
column1[i] = [i,newn];
last = newn;
}
data.addRows(column1);
var options = {
hAxis: {
title: 'Time2'
},
vAxis: {
title: 'Popularity'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
#CHARSET "ISO-8859-1";
#red {
background-color:#FF0000;
}
#blue {
background-color:#0000FF;
}
#yellow {
background-color:#E2BE22;
}
#green {
background-color:#008800;
}
.blockspace {
height:70px;
width:400px;
margin-left:auto;
margin-right:auto;
padding:10;
border-radius:10;
background-color:#c8d8e8;
}
.square {
border-radius:10;
height:50px;
width:50px;
display: inline-block;
}
.chart {
width:350;
height:300;
display:inline-block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Hello World!</title>
<!-- Load c3.css -->
<!-- <link rel="stylesheet" type="text/css" href="libraries/bootstrap-3.3.5-dist/css/bootstrap.css">-->
<link rel="stylesheet" type="text/css" href="libraries/c3-0.4.10/c3.css">
<link rel="stylesheet" type="text/css" href="libraries/nvd3-master/build/nv.d3.min.css">
<link rel="stylesheet" type="text/css" href="style/stylesheet.css"/>
<!-- Load d3.js and c3.js -->
<!-- <script src="libraries/c3-0.4.10/d3.v3.min.js" charset="utf-8"></script> -->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="libraries/c3-0.4.10/c3.min.js"></script>
<script src="libraries/nvd3-master/build/nv.d3.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<!-- Load jquery and script -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="script/script.js"></script>
</head>
<body>
<h1>A big hello</h1>
<p>Why don't you enjoy these coloured squares:</p>
<div class="blockspace">
<div class="square" id="red"></div>
<div class="square" id="blue"></div>
<div class="square" id="yellow"></div>
<div class="square" id="green"></div>
</div>
<div class="chartExperiments">
<div class="chart" id="chart"></div>
<div class="chart" id="chart_div"></div>
</div>
</body>
</html>
You forget to define the unit of measure, so just add the unit of measure and the issue will be resolved.
.chart {
width:350px; <--px unit of measure
height:300px; <--px unit of measure
display:inline-block;
}
.square {
border-radius:10px; <--px unit of measure
height:50px;
width:50px;
display: inline-block;
}
I am new to this Google web translator. I want to add flags in front of each language I am using here.
Here is my code:
<div id="google_translate_element">
</div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ar,de,en,fr,ru,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, multilanguagePage: true}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>
How to add flags to the google web translator please?
<style type="text/css">
.translation-links {
text-align:right;
position:absolute;
right:0px;
top:3px;
}
.translation-links img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
cursor: pointer;
margin-right:8px;
height:24px;
width:24px;
}
.translation-links img:hover {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
}
</style>
<div class="translation-links">
<a class="english" data-lang="English"><img alt="English" title="English" src="En_flag.png"></a>
<a class="spanish" data-lang="Spanish"><img alt="Spanish" title="Spanish" src="Es_flag.png"></a>
<a class="french" data-lang="French"><img alt="French" title="French" src="Fr_flag.png"></a>
<a class="german" data-lang="German"><img alt="German" title="German" src="De_flag.png"></a>
</div>
<div id="google_translate_element" style="display:none;"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', autoDisplay: false}, 'google_translate_element'); //remove the layout
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
function triggerHtmlEvent(element, eventName)
{
var event;
if(document.createEvent) {
event = document.createEvent('HTMLEvents');
event.initEvent(eventName, true, true);
element.dispatchEvent(event);
}
else {
event = document.createEventObject();
event.eventType = eventName;
element.fireEvent('on' + event.eventType, event);
}
}
<!-- Flag click handler -->
var jq = $.noConflict();
jq('.translation-links a').click(function(e)
{
e.preventDefault();
var lang = jq(this).data('lang');
jq('#google_translate_element select option').each(function(){
if(jq(this).text().indexOf(lang) > -1) {
jq(this).parent().val(jq(this).val());
var container = document.getElementById('google_translate_element');
var select = container.getElementsByTagName('select')[0];
triggerHtmlEvent(select, 'change');
}
});
});
</script>
I have a JQuery select component and a javascript function to handle the stop event:
<script type="text/javascript">
$("#selectable").selectable({
stop: function() {
$(".ui-selected", this).each(function(i, selected) {
if ($(selected).text() == "Google") {
$("#openid_identifier").val("https://www.google.com/accounts/o8/id");
}
else if ($(selected).text() == "Yahoo") {
$("#openid_identifier").val("http://yahoo.com/");
}
});
}
});
</script>
The script works fine in firefox and chrome but not in IE7/8. It is normally supposed to send a string to the openid_identifier textbox once the google or yahoo select box is clicked.
Any ideas how to get this to work in IE?
right I took another look at the code, and I realised I made a bit of a mistake oops!
This is some cleaner code for you, it just removes all white space:
<script type="text/javascript">
$(function() {
$("#selectable").selectable({
stop: function(event, ui) { $(".ui-selected", this).each(function(i, selected) {
if($(selected).html().replace(/\s/g, "") == "Google") {
alert("https://www.google.com/accounts/o8/id");
}
else if ($(selected).html().replace(/\s/g, "") == "Yahoo") {
alert("http://yahoo.com/");
}
});
}
});
});
</script>
Looks like Text isnt liked by IE
try this instead:
<script type="text/javascript">
$("#selectable").selectable({
stop: function() {
$(".ui-selected", this).each(function(i, selected) {
if ($(selected).html() == "Google") {
$("#openid_identifier").val("https://www.google.com/accounts/o8/id");
}
else if ($(selected).html() == "Yahoo") {
$("#openid_identifier").val("http://yahoo.com/");
}
});
}
});
</script>
That worked for me when I tried your code
EDIT:
here is the code I used to test with
<html>
<head>
<html>
<head>
<meta charset="UTF-8" />
<title>make layout</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<style type="text/css">
.testdiv { background: silver; float:left;margin:0;padding:0;}
</style>
</head>
<body>
<style type="text/css">
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script type="text/javascript">
$(function() {
$("#selectable").selectable({
stop: function(event, ui) { $(".ui-selected", this).each(function(i, selected) {
alert($(selected).html());
if($(selected).text() == "Google") {
alert("https://www.google.com/accounts/o8/id");
}
else if ($(selected).text() == "Yahoo") {
alert("http://yahoo.com/");
}
});
}
});
});
</script>
<div class="demo">
<ol id="selectable">
<li class="ui-widget-content">Google</li>
<li class="ui-widget-content">Yahoo</li>
</ol>
</div>
</body>
</html>
It looks like the issue was $(selected).html() returned "Google " (with a space) in ie7 but returned "Google" in ie8, firefox and chrome.
Background: I tried the exact html as James Studdart's answer which worked under ie8 but under IE7 the if($(selected).html() == "Google") statement returned false every time and even after trying .text, .val, .html etc... and different machines/configs. I then tried creating a variable with the .html value as such: var chosen = $(selected).html(). This returned "Google " in IE7. To fix this mysterious IE7 space character I modified the script to ensure the space didn't affect the result:
<script type="text/javascript">
$("#selectable").selectable({
stop: function() {
$(".ui-selected", this).each(function(i, selected) {
var chosen = $(selected).html();
var subSection = chosen.substring(4, 0);
if (subSection == "Goog") {
$("#openid_identifier").val("https://www.google.com/accounts/o8/id");
}
else if (subSection == "Yaho") {
$("#openid_identifier").val("http://yahoo.com/");
}
});
}
});