if(!CSS.supports('cursor', 'url(cursor.png), pointer')) {
var myCursor = document.createElement('img');
myCursor.src = 'cursor.png';
myCursor.style.position = 'absolute';
document.body.appendChild(myCursor);
document.addEventListener('mousemove', function(e) {
myCursor.style.left = e.pageX+'px';
myCursor.style.top = e.pageY+'px';
}, false);
}
body{
padding:0;
margin:0;
background-color: #19321D;
color: #53CC66;
line-height: 1.5;
font-family: FreeMono, monospace;
cursor: url(cursor.png), pointer;
}
a{
text-decoration: none;
color: #53CC66;
}
ul{
text-decoration: none;
list-style-type: none;
}
#header{
text-align: center;
border-bottom: 3px solid #53CC66;
margin-bottom: 100px;
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
line-height: 1;
}
h1, h2, h3{
color: #53CC66;
font-family: FreeMono, monospace;
font-size: 15px;
}
a{
cursor: url(cursor.png), pointer;
}
a:hover {
cursor: url(cursor.png), pointer;
color: #19321D;
}
li:hover{
background-color:#53CC66;
color: #19321D;
}
li:hover a{
color: #19321D;
}
<html>
<head>
<title>Getrate|Command promph </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles15.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>DAVID SECRET INDUSTRIES UNVERIFIED SYSTEM</h1>
<h2>COPYRIGHT 2015 - 2050 ALL RIGHT RESERVED</h2>
<h3>- SERVER #1 -</h3>
</div>
<ul>
<li>[CONZOLE] > -TOP SECRET- . PAGE //stripslash 1.3.8.9.84.113.21.73</li>
<li>[CONZOLE] > -TOP SECRET- . PAGE //stripslash 1.4.8.9.84.113.21.74</li>
<li>[CONZOLE] > -TOP SECRET- . PAGE //stripslash 1.5.8.9.84.113.21.75</li>
<li>[CONZOLE] > -TOP SECRET- . PAGE //stripslash 1.6.8.9.84.113.21.76</li>
<li>[CONZOLE] > -TOP SECRET- . PAGE //stripslash 1.7.8.9.84.113.21.77</li>
</ul>
</div>
</body>
<script src="wow.js"></script>
</html>
I just thought, is there any possible way, to make custom cursor, that works on microsoft edge? On my website, i used this:
body{ cursor: url(cursor.png), pointer;}
but in microsoft edge, it is not working...
Any ideas how to solve this?/Is there any other way?
So.... after small recode, my website looks like this, see the fiddle and try, it is not working yet...
This property is not supported yet : http://caniuse.com/#search=cursor
This property is now supported : caniuse.com:cursor:url()
As Charaf mentioned: the property isn't yet supported in Edge. If your project requires a solution, you can sort of mimic the behavior with JavaScript.
JavaScript:
if(!CSS.supports('cursor', 'url(cursor.png), pointer')) {
var myCursor = document.createElement('img');
myCursor.src = 'cursor.png';
myCursor.style.position = 'absolute';
document.body.appendChild(myCursor);
document.addEventListener('mousemove', function(e) {
myCursor.style.left = e.pageX+'px';
myCursor.style.top = e.pageY+'px';
}, false);
}
I made a library called CursorJS for you. You can check it out here. If you scroll to the bottom of the JavaScript code, you can find initializing code:
/* Enable lib with cursor image src */
CursorJS.enable('http://files.softicons.com/download/toolbar-icons/plastic-mini-icons-by-deleket/png/32x32/Cursor-01.png');
CursorJS.addEl(document.querySelector('.myElement1'));
CursorJS.addEl(document.querySelector('.myElement3'));
In your case just do the following:
/* Enable lib with cursor image src */
CursorJS.enable('./cursor.png');
CursorJS.addEl(document.body);
Customization
CursorJS has a mouseOffset variable. It repesents difference of mouse position and position of image. For example, if I set it to
mouseOffset: {
x: 50,
y: 50
},
The mouse will be 50px off. The reason why I made this variable is that custom mouse was kind of "blinking", try to set it to {x:1,y:1} ;)
Live example
var CursorJS = {
img: new Image(),
els: [],
mouseOffset: {
x: 5,
y: 5
},
addedImg: false,
checkForIE: function() {
return (/MSIE/i.test(navigator.userAgent)
|| /rv:11.0/i.test(navigator.userAgent));
},
setDisplay: function() {
this.img.style.display =
this.els.indexOf(true) > -1 ? null : 'none';
},
getMouseCoords: function(e) {
var mx = 0, my = 0;
if (this.checkForIE())
mx = event.clientX + document.body.scrollLeft,
my = event.clientY + document.body.scrollTop;
else
mx = e.pageX,my = e.pageY;
if (mx < 0) mx = 0;
if (my < 0) my = 0;
return [mx, my];
},
mouseOver: function(e, id) {
this.els[id] = true;
this.setDisplay();
var coords = this.getMouseCoords(e);
this.img.style.left =
(coords[0]+this.mouseOffset.x) + 'px';
this.img.style.top =
(coords[1]+this.mouseOffset.y) + 'px';
},
mouseOut: function(e, id) {
this.els[id] = false;
this.setDisplay();
},
mouseMove: function(e) {
var coords = this.getMouseCoords(e);
this.img.style.left =
(coords[0]+this.mouseOffset.x) + 'px';
this.img.style.top =
(coords[1]+this.mouseOffset.y) + 'px';
},
addEvent: function(el, name, func, bool) {
if (el == null || typeof name != 'string'
|| typeof func != 'function'
|| typeof bool != 'boolean')
return;
if (el.addEventListener)
el.addEventListener(name, func, false);
else if (el.attachEvent)
el.attachEvent('on' + name, func);
else
el['on' + name] = func;
},
addEl: function(el) {
var evts = ['over','out','move'],
id = this.els.length;
this.els.push(false);
this.el = el;
this.addEvent(el, 'mouseover', function(e) {
this.mouseOver(e, id) }.bind(this), false);
this.addEvent(el, 'mouseout', function(e) {
this.mouseOut(e, id) }.bind(this), false);
this.addEvent(el, 'mousemove', function(e) {
this.mouseMove(e) }.bind(this), false);
if (typeof el['style'] != 'undefined')
el.style.cursor = 'none';
},
enable: function(src) {
this.img.src = src;
this.img.style.display = 'none';
this.img.style.position = 'absolute';
this.img.style.cursor = 'none';
this.addEvent(this.img, 'mousemove', function(e) {
this.mouseMove(e) }.bind(this), false);
if (!this.addedImg)
document.body.appendChild(this.img),
this.addedImg = true;
}
}
/*** INITIALIZE ***/
CursorJS.enable('http://files.softicons.com/download/toolbar-icons/plastic-mini-icons-by-deleket/png/32x32/Cursor-01.png');
CursorJS.addEl(document.querySelector('.myElement1'));
CursorJS.addEl(document.querySelector('.myElement3'));
.myElement1, .myElement2, .myElement3 {
width: 150px;
height: 150px;
border: 1px solid gray;
display: inline-block;
}
<div class="myElement1">added</div>
<div class="myElement2">not added</div>
<div class="myElement3">added</div>
Hope that worked! Have a nice day :)
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>
Follwing is a image for the horizontal scroll bar menu , i am trying to achieve with angular js.
Using $swipe service of angular js to perform this action.
Able to achieve the function calls at directives ng-swipe-left and ng-swipe-right.
As i have set the overflow-x:hidden for the items in the starting , how do i change the css or make the menu scrollable at the ng-swipe-left or ng-swipe-right.
Any other better suggestion to perform this action is welcomed.
Trying to make this happen by this Example . on ng-swipe-left and ng-swipe-right , incereasing /decreasing the counter below , indeed have to make the menu bar scroll.
<div ng-swipe-left="prev($event)" ng-swipe-right="next($event)">
Thanks in advance.
You could use ng-class to add the scroll effect and to show the menu you could use the $scope.index too.
I've added a boolean to change how the menu opens because I'm not sure how you'd like to open the menu.
If var openDirRight is true then index of the menu selection goes from 0 to 3 (3 = length of menu array). If it's false it goes from 0 to -3.
Later you could add $state.go('page' + index_with_formatting) to transition to the menu item.
Please have a look at the demo below or in this fiddle.
(The buttons are just for debugging on desktop because I'm not sure how to trigger the swipe on desktop.)
var app = angular.module('myapp', ['ngTouch']);
app.controller('MyCtrl', function MyCtrl($scope) {
var openDirRight = true; // true = swipe left to right shows menu index > 0
// false = swipe right to left shows menu index < 0
var stopActions = function ($event) {
if ($event.stopPropagation) {
$event.stopPropagation();
}
if ($event.preventDefault) {
$event.preventDefault();
}
$event.cancelBubble = true;
$event.returnValue = false;
};
// Carousel thing
$scope.index = 0;
// Hide menu
$scope.showMenu = false;
// Links
$scope.navigation = [{
title: "Page A",
href: "#pageA"
}, {
title: "Page B",
href: "#pageB"
}, {
title: "Page C",
href: "#pageC"
}];
$scope.checkMenuVisibility = function() {
$scope.showMenu = openDirRight ? $scope.index > 0 : $scope.index < 0;
};
$scope.isActive = function(index) {
return ( (openDirRight ? 1: -1 ) * $scope.index - 1 ) === index;
};
// Increment carousel thing
$scope.next = function ($event) {
stopActions($event);
$scope.index++;
// limit index
if ( openDirRight ) {
if ( $scope.index > $scope.navigation.length)
$scope.index = $scope.navigation.length;
}
else {
if ( $scope.index > 0)
$scope.index = 0;
}
$scope.checkMenuVisibility();
};
// Decrement carousel thing
$scope.prev = function ($event) {
stopActions($event);
$scope.index--;
// limit index
console.log($scope.index);
if ( !openDirRight ) {
if ($scope.index < -$scope.navigation.length) {
console.log('limited to -3');
$scope.index = -$scope.navigation.length;
}
}
else if ( $scope.index < 0 ) {
$scope.index = 0;
}
$scope.checkMenuVisibility();
};
});
html, body, #page {
height: 100%;
min-height: 100%;
}
.box {
background-color: #EFEFEF;
box-shadow: 0 1px 2px #dedede;
border: 1px solid #ddd;
border-radius: 4px;
}
.menu {
/*float: left;*/
/*min-height:100%;*/
/*width: 98%;*/
}
.menu ul {
}
.menu_item {
display: inline-block;
line-height:2;
}
.menu_link {
display:block;
padding-left:1em;
}
.menu_link:hover {
background: #DEDEDE;
}
.menu-grip {
float:right;
height:5em;
line-height:.5;
padding-top:2em;
text-align:center;
width:1em;
}
h1 {
background:black;
color:white;
font-size:1.1em;
line-height:1.3;
}
.big-swiper {
font-size: 5em;
height:3em;
line-height:3;
margin:.5em auto;
text-align:center;
width:3em;
}
.big-swiper:before {
content:'<\a0';
color:#dedede;
font-weight:700;
}
.big-swiper:after {
content:'\a0>';
color:#dedede;
font-weight:700;
}
.active {
background-color: blue;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-touch.js"></script>
<div id="page" ng-cloak ng-app='myapp' ng-controller="MyCtrl" ng-swipe-left="">
<h1>Angular Swipe Menu</h1>
<div class="menu-grip box" ng-show="!showMenu" ng-click="showMenu = true">.<br />.<br />.</div>
<nav class="menu box" ng-show="showMenu"> <!-- ng-swipe-right="showMenu = false">-->
<ul>
<li class="menu_item" ng-repeat='nav in navigation track by $index'><a class="menu_link" ng-href="{{nav.href}}" ng-class="{'active': isActive($index)}">{{nav.title}}{{$index}}</a>
</li>
</ul>
</nav>
<!-- buttons for testing on desktop -->
<button ng-click="next($event)">swipe right</button>
<button ng-click="prev($event)" class="pull-right">swipe left</button>
<div class="big-swiper box" ng-swipe-right="next($event)" ng-swipe-left="prev($event)">{{index}}</div>
</div>
I'm using PhantomJS to create a png with the following html and I want my hideMe class to be hidden when the png is generated. Unfortunately creating a PDF hides it, but won't for jpg or png. How can I hide the following div with the media query print?
var page = require('webpage').create(),
system = require('system'),
address, output, size;
if (system.args.length < 3 || system.args.length > 5) {
console.log('Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]');
console.log(' paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"');
console.log(' image (png/jpg output) examples: "1920px" entire page, window width 1920px');
console.log(' "800px*600px" window, clipped to 800x600');
phantom.exit(1);
} else {
address = system.args[1];
output = system.args[2];
page.viewportSize = { width: 600, height: 600 };
if (system.args.length > 3 && system.args[2].substr(-4) === ".pdf") {
size = system.args[3].split('*');
page.paperSize = size.length === 2 ? { width: size[0], height: size[1], margin: '0px' }
: { format: system.args[3], orientation: 'portrait', margin: '1cm' };
} else if (system.args.length > 3 && system.args[3].substr(-2) === "px") {
size = system.args[3].split('*');
if (size.length === 2) {
pageWidth = parseInt(size[0], 10);
pageHeight = parseInt(size[1], 10);
page.viewportSize = { width: pageWidth, height: pageHeight };
page.clipRect = { top: 0, left: 0, width: pageWidth, height: pageHeight };
} else {
console.log("size:", system.args[3]);
pageWidth = parseInt(system.args[3], 10);
pageHeight = parseInt(pageWidth * 3/4, 10); // it's as good an assumption as any
console.log ("pageHeight:",pageHeight);
page.viewportSize = { width: pageWidth, height: pageHeight };
}
}
if (system.args.length > 4) {
page.zoomFactor = system.args[4];
}
page.open(address, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
phantom.exit(1);
} else {
page.evaluate(function() {
document.body.bgColor = 'white';
});
window.setTimeout(function () {
page.render(output);
phantom.exit();
}, 200);
}
});
}
<html>
<style type="text/css">
#test1 {
height: 250px;
width: 500px;
background-color:red;
}
#test2 {
height: 250px;
width: 500px;
background-color: blue;
}
#media print {
.hideMe {
display: none !important;
}
}
</style>
<body>
<div id="test1">Test div 1</div>
<div id="test2">Test div 2</div>
<div class="hideMe">This should be hidden</div>
</body>
</html>
I have a problem with a script for a image gallery. The problem seems to only occur on Safari and Chrome, but if I refresh the page I get it to work correctly - weird!
Correct function:
The gallery has a top bar, which if you hover over it, it will display a caption. Below sits the main image. At the bottom there is another bar that is a reversal of the top bar. When you hover over it, it will display thumbnails of the gallery.
The problem:
In Safari and Chrome, the thumbnail holder will not display. In fact, it doesn't even show it as an active item (or a rollover). But oddly enough, if you manually refresh the page it begins to work correctly for the rest of the time you view the page. Once you have left the page and return the same error occurs again and you have to go through the same process.
Here's one of the pages to look at:
link text
Here's the CSS:
#ThumbsGutter {
background: url(../Images/1x1.gif);
background: url(/Images/1x1.gif);
height: 105px;
left: 0px;
position: absolute;
top: 0px;
width: 754px;
z-index: 2;
}
#ThumbsHolder {
display: none;
}
#ThumbsTable {
left: 1px;
}
#Thumbs {
background-color: #000;
width: 703px;
}
#Thumbs ul {
list-style: none;
margin: 0;
padding: 0;
}
#Thumbs ul li {
display: inline;
}
.Thumbs ul li a {
border-right: 1px solid #fff;
border-top: 1px solid #fff;
float: left;
left: 1px;
}
.Thumbs ul li a img {
filter: alpha(opacity=50);
height: 104px;
opacity: .5;
width: 140px;
}
.Thumbs ul li a img.Hot {
filter: alpha(opacity=100);
opacity: 1;
}
Here is the javascript:
//Variables
var globalPath = "";
var imgMain;
var gutter;
var holder;
var thumbs;
var loadingImage;
var holderState;
var imgCount;
var imgLoaded;
var captionHolder;
var captionState = 0;
var captionHideTimer;
var captionHideTime = 500;
var thumbsHideTimer;
var thumbsHideTime = 500;
$(document).ready(function() {
//Load Variables
imgMain = $("#MainImage");
captionHolder = $("#CaptionHolder");
gutter = $("#ThumbsGutter");
holder = $("#ThumbsHolder");
thumbs = $("#Thumbs");
loadingImage = $("#LoadingImageHolder");
//Position Loading Image
loadingImage.centerOnObject(imgMain);
//Caption Tab Event Handlers
$("#CaptionTab").mouseover(function() {
clearCaptionHideTimer();
showCaption();
}).mouseout(function() {
setCaptionHideTimer();
});
//Caption Holder Event Handlers
captionHolder.mouseenter(function() {
clearCaptionHideTimer();
}).mouseleave(function() {
setCaptionHideTimer();
});
//Position Gutter
if (jQuery.browser.safari) {
gutter.css("left", imgMain.position().left + "px").css("top", ((imgMain.offset().top + imgMain.height()) - 89) + "px");
} else {
gutter.css("left", imgMain.position().left + "px").css("top", ((imgMain.offset().top + imgMain.height()) - 105) + "px");
}
//gutter.css("left", imgMain.position().left + "px").css("top", ((imgMain.offset().top + imgMain.height()) - 105) + "px");
//gutter.css("left", imgMain.offset().left + "px").css("top", ((imgMain.offset().top + imgMain.height()) - gutter.height()) + "px");
//Thumb Tab Event Handlers
$("#ThumbTab").mouseover(function() {
clearThumbsHideTimer();
showThumbs();
}).mouseout(function() {
setThumbsHideTimer();
});
//Gutter Event Handlers
gutter.mouseenter(function() {
//showThumbs();
clearThumbsHideTimer();
}).mouseleave(function() {
//hideThumbs();
setThumbsHideTimer();
});
//Next/Prev Button Event Handlers
$("#btnPrev").mouseover(function() {
$(this).attr("src", globalPath + "/Images/GalleryLeftButtonHot.jpg");
}).mouseout(function() {
$(this).attr("src", globalPath + "/Images/GalleryLeftButton.jpg");
});
$("#btnNext").mouseover(function() {
$(this).attr("src", globalPath + "/Images/GalleryRightButtonHot.jpg");
}).mouseout(function() {
$(this).attr("src", globalPath + "/Images/GalleryRightButton.jpg");
});
//Load Gallery
//loadGallery(1);
});
function loadGallery(galleryID) {
//Hide Holder
holderState = 0;
holder.css("display", "none");
//Hide Empty Gallery Text
$("#EmptyGalleryText").css("display", "none");
//Show Loading Message
$("#LoadingGalleryOverlay").css("display", "inline").centerOnObject(imgMain);
$("#LoadingGalleryText").css("display", "inline").centerOnObject(imgMain);
//Load Thumbs
thumbs.load(globalPath + "/GetGallery.aspx", { GID: galleryID }, function() {
$("#TitleHolder").html($("#TitleContainer").html());
$("#DescriptionHolder").html($("#DescriptionContainer").html());
imgCount = $("#Thumbs img").length;
imgLoaded = 0;
if (imgCount == 0) {
$("#LoadingGalleryText").css("display", "none");
$("#EmptyGalleryText").css("display", "inline").centerOnObject(imgMain);
} else {
$("#Thumbs img").load(function() {
imgLoaded++;
if (imgLoaded == imgCount) {
holder.css("display", "inline");
//Carousel Thumbs
thumbs.jCarouselLite({
btnNext: "#btnNext",
btnPrev: "#btnPrev",
mouseWheel: true,
scroll: 1,
visible: 5
});
//Small Image Event Handlers
$("#Thumbs img").each(function(i) {
$(this).mouseover(function() {
$(this).addClass("Hot");
}).mouseout(function() {
$(this).removeClass("Hot");
}).click(function() {
//Load Big Image
setImage($(this));
});
});
holder.css("display", "none");
//Load First Image
var img = new Image();
img.onload = function() {
imgMain.attr("src", img.src);
setCaption($("#Image1").attr("alt"));
//Hide Loading Message
$("#LoadingGalleryText").css("display", "none");
$("#LoadingGalleryOverlay").css("display", "none");
}
img.src = $("#Image1").attr("bigimg");
}
});
}
});
}
function showCaption() {
if (captionState == 0) {
$("#CaptionTab").attr("src", globalPath + "/Images/CaptionTabHot.jpg");
captionHolder.css("display", "inline").css("left", imgMain.position().left + "px").css("top", imgMain.position().top + "px").css("width", imgMain.width() + "px").effect("slide", { "direction": "up" }, 500, function() {
captionState = 1;
});
}
}
function hideCaption() {
if (captionState == 1) {
captionHolder.toggle("slide", { "direction": "up" }, 500, function() {
$("#CaptionTab").attr("src", globalPath + "/Images/CaptionTab.jpg");
captionState = 0;
});
}
}
function setCaptionHideTimer() {
captionHideTimer = window.setTimeout(hideCaption,captionHideTime);
}
function clearCaptionHideTimer() {
if(captionHideTimer) {
window.clearTimeout(captionHideTimer);
captionHideTimer = null;
}
}
function showThumbs() {
if (holderState == 0) {
$("#ThumbTab").attr("src", globalPath + "/Images/ThumbTabHot.jpg");
holder.effect("slide", { "direction": "down" }, 500, function() {
holderState = 1;
});
}
}
function hideThumbs() {
if (holderState == 1) {
if (jQuery.browser.safari) {
holder.css("display", "none");
$("#ThumbTab").attr("src", globalPath + "/Images/ThumbTab.jpg");
holderState = 0;
} else {
holder.toggle("slide", { "direction": "down" }, 500, function() {
$("#ThumbTab").attr("src", globalPath + "/Images/ThumbTab.jpg");
holderState = 0;
});
}
}
}
function setThumbsHideTimer() {
thumbsHideTimer = window.setTimeout(hideThumbs,thumbsHideTime);
}
function clearThumbsHideTimer() {
if(thumbsHideTimer) {
window.clearTimeout(thumbsHideTimer);
thumbsHideTimer = null;
}
}
function setImage(image) {
//Show Loading Image
loadingImage.css("display", "inline");
var img = new Image();
img.onload = function() {
//imgMain.css("background","url(" + img.src + ")").css("display","none").fadeIn(250);
imgMain.attr("src", img.src).css("display", "none").fadeIn(250);
setCaption(image.attr("alt"));
//Hide Loading Image
loadingImage.css("display", "none");
};
img.src = image.attr("bigimg");
}
function setCaption(caption) {
$("#CaptionText").html(caption);
//alert($("#CaptionText").html());
/*
if (caption.length > 0) {
$("#CaptionText")
.css("display", "inline")
.css("left", imgMain.position().left + "px")
.css("top", imgMain.position().top + "px")
.css("width", imgMain.width() + "px")
.html(caption);
$("#CaptionOverlay").css("display", "inline")
.css("height", $("#CaptionText").height() + 36 + "px")
.css("left", imgMain.position().left + "px")
.css("top", imgMain.position().top + "px")
.css("width", imgMain.width() + "px");
} else {
$("#CaptionText").css("display", "none");
$("#CaptionOverlay").css("display", "none");
}
*/
}
Please if anyone could help, it would be greatly appreciated!
Thanks in advance.
Justin
I'm using Chrome 4.1.249.1064 and the top bar works perfect, I see the caption without refreshing the page.
The same in Firefox 3.6.3, all works perfect
Same with Safari 4.0.3, all works perfect
I am having a Html hyperlink. I need to link this hyperlink to another page.When I place the mouse over the link. It should show the image.
how to do this
That depends on where you need to display the image. If you are looking for something along the lines of an icon next to or behind the link, you could accomplish this through CSS using a background image on the hover state of the link:
a:link
{
background-image:none;
}
a:hover
{
background-image:url('images/icon.png');
background-repeat:no-repeat;
background-position:right;
padding-right:10px /*adjust based on icon size*/
}
I did this off the top of my head, so you may need to make some minor adjustments.
If you wanted to show an image somewhere else on the page, you could accomplish that using javascript to hide/show the image on the link's mouseover event.
If this doesn't solve your problem, maybe you could supply some additional information to help guide everybody to the right answer.
You can do this easily with jquery:
$("li").hover(
function () {
$(this).append($("<img src="myimage.jpg"/>"));
},
function () {
$(this).find("img:last").remove();
}
);
Some more comprehensive examples which are actually tested:
http://docs.jquery.com/Events/hover
you can do this using javascript..
This will create a square that follows your mouse on div or element hover.
Create a .js file with those contents here:
var WindowVisible = null;
function WindowShow() {
this.bind = function(obj,url,height,width) {
obj.url = url;
obj.mheight = height;
obj.mwidth = width;
obj.onmouseover = function(e) {
if (WindowVisible == null) {
if (!e) e = window.event;
var tmp = document.createElement("div");
tmp.style.position = 'absolute';
tmp.style.top = parseInt(e.clientY + 15) + 'px';
tmp.style.left = parseInt(e.clientX + 15) + 'px';
var iframe = document.createElement('iframe');
iframe.src = this.url;
iframe.style.border = '0px';
iframe.style.height = parseInt(this.mheight)+'px';
iframe.style.width = parseInt(this.mwidth)+'px';
iframe.style.position = 'absolute';
iframe.style.top = '0px';
iframe.style.left = '0px';
tmp.appendChild(iframe);
tmp.style.display = 'none';
WindowVisible = tmp;
document.body.appendChild(tmp);
tmp.style.height = parseInt(this.mheight) + 'px';
tmp.style.width = parseInt(this.mwidth) + 'px';
tmp.style.display = 'block';
}
}
obj.onmouseout = function() {
if (WindowVisible != null) {
document.body.removeChild(WindowVisible);
WindowVisible = null;
}
}
obj.onmousemove = function(e) {
if (!e) e = window.event;
WindowVisible.style.top = parseInt(e.clientY + 15) + 'px';
WindowVisible.style.left = parseInt(e.clientX + 15) + 'px';
}
}
}
Then in your html do the following:
Include the .js file <script type="text/javascript" src="myfile.js"></script>
Put in your web page:
<script type="text/javascript">
var asd = new WindowShow();
asd.bind(document.getElementById('go1'),'IMAGE URL HERE!',400,480);
</script>
Here is a full implementation in a HTML:
<html>
<head>
<title>test page</title>
<style>
div.block { width: 300px; height: 300px; background-color: red; }
iframe { border: 0px; padding: 0px; margin: 0px; }
</style>
<script type="text/javascript" src="window_show.js"></script>
</head>
<body>
<div id="go1" style="background-color: red; width: 200px; height: 200px;"></div>
<script type="text/javascript">
var asd = new WindowShow();
asd.bind(document.getElementById('go1'),'IMAGE URL HERE!',400,480);
</script>
</body>
bye bye!