Related
I am creating a yellow hover area, when the mouse hovers around this area, event: a tab appear in exactly this hover area. But when I put the mouse there, the tab starts to appear and shaking
But I don't know how to make the shaking error go away
here is my code
$(document).ready(function () {
$('#demo').mouseleave(function(event) {
$('.tab').stop().animate({
opacity : '0.5',
marginLeft: '190px',
width:'0px'
}, 600, function() { //animation complete
$('#demo').addClass('hovered');
});
});
$('#demo').mouseover(function(event) {
$('.tab').stop().animate({
opacity : '1',
marginLeft: '0px', width:'190px'
}, 300, function() { //animation complete
$('#demo').removeClass('hovered');
});
});
});
#demo {
padding: 5px;
font-size: 18px;
text-align: center;
background-color: #555;
color: white;
border: solid 1px #666;
border-radius: 3px;
position:absolute;
margin-left: 10px;
width:190px;
height:100%;
opacity: 0.5;
background-color: yellow;
}
#demo.hovered {
backgound-color: #000;
}
.tab {
margin-left: 190px;
width: 0px;
height:100%;
opacity: 0.5;
background-color: #876;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="demo">Hover here!</button>
<div class="tab">First Panel</div>
anyone help me with this? I am a javascript beginner
Instead of firing mouseleave event on #demo, i fire mouseleave event on .tab
$(document).ready(function() {
$('.tab').mouseleave(function(event) {
$('.tab').stop().animate({
opacity: '0.5',
marginLeft: '190px',
width: '0px'
}, 600, function() { //animation complete
$('#demo').addClass('hovered');
});
});
$('#demo').mouseover(function(event) {
$('.tab').stop().animate({
opacity: '1',
marginLeft: '0px',
width: '190px'
}, 300, function() { //animation complete
$('#demo').removeClass('hovered');
});
});
});
#demo {
padding: 5px;
font-size: 18px;
text-align: center;
background-color: #555;
color: white;
border: solid 1px #666;
border-radius: 3px;
position: absolute;
margin-left: 10px;
width: 190px;
height: 100%;
opacity: 0.5;
background-color: yellow;
}
#demo.hovered {
backgound-color: #000;
}
.tab {
margin-left: 190px;
width: 0px;
height: 100%;
opacity: 0.5;
background-color: #876;
position: absolute;
}
`
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="demo">Hover here!</button>
<div class="tab">First Panel</div>
it's because you trigger the hover only on the yellow rectangle and when the tab appears you stop hover the yellow rectangle. In my solution, you need to trigger the mouseleave() event also on the .tab.
$(document).ready(function() {
$('#demo').mouseleave(function(event) {
$('.tab').mouseleave(function(event) { //add this line
$('.tab').stop().animate({
opacity: '0.5',
marginLeft: '190px',
width: '0px'
}, 600, function() { //animation complete
$('#demo').addClass('hovered');
});
}); //add this line
});
$('#demo').mouseover(function(event) {
$('.tab').stop().animate({
opacity: '1',
marginLeft: '0px',
width: '190px'
}, 300, function() { //animation complete
$('#demo').removeClass('hovered');
});
});
});
#demo {
padding: 5px;
font-size: 18px;
text-align: center;
background-color: #555;
color: white;
border: solid 1px #666;
border-radius: 3px;
position: absolute;
margin-left: 10px;
width: 190px;
height: 100%;
opacity: 0.5;
background-color: yellow;
}
#demo.hovered {
backgound-color: #000;
}
.tab {
margin-left: 190px;
width: 0px;
height: 100%;
opacity: 0.5;
background-color: #876;
position: absolute;
}
`
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="demo">Hover here!</button>
<div class="tab">First Panel</div>
Do you want any user interaction on the tab?
If not, then I would add pointer-events: none; property to your .tab class.
Then the mouseleave event won't trigger, but you wouldn't be able to use any mouse events inside your tab element.
$(function() {
$('.forminput input[type="text"]').on('input propertychange', function() {
var $this = $(this);
var visible = Boolean($this.val());
$this.siblings('.glyphicon').toggleClass('hidden', !visible);
}).trigger('propertychange'); //nema potrebe za njim
$('.glyphicon').click(function() {
$(this).siblings('input[type="text"]').val('')
.trigger('propertychange').focus();
$('.results').empty();
});
$('.forminput').on('submit', function(event) {
event.preventDefault();
var typed = $('.nice').val();
$.getJSON('http://en.wikipedia.org/w/api.php?callback=?', {
action: 'query',
srsearch: typed,
format: 'json',
list: 'search'
}, function(data) {
$('.results').empty();
console.log(data);
$.each(data.query.search, function(index, item) {
$('.results').append("<a class='append' href='http://en.wikipedia.org/wiki/" + encodeURIComponent(item.title) + "'>" + "<div class='appendsearch'><h1>" + item.title + "</h1><p>" + item.snippet + "</p></div></a>")
})
})
})
})
body {
background: rgb(9, 43, 64);
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
height: 90vh;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.container {
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.glyphicon {
color: #B2DFDB;
}
.textbox {
text-align: center;
}
.randomArticle {
color: #B2DFDB;
font-size: 1.4em;
}
.randomArticle:hover {
text-decoration: none;
color: pink;
cursor: pointer;
}
.randomArticle:link {
text-decoration: none;
color: #B2DFDB;
}
form {
margin-top: 30px;
margin-bottom: 30px;
}
form .nice {
width: 300px;
border-radius: 10px;
border: 5px solid orange;
background: transparent;
color: white;
padding: 7px 15px;
}
form .nice:focus {
outline: none;
}
.button {
border-radius: 10px;
border: 5px solid orange;
padding: 7px 15px;
margin-left: 20px;
background: transparent;
color: #B2DFDB;
}
.button:hover {
background: #00897B;
}
.button:focus {
outline: none;
}
.append {
color: black;
}
.append:hover {
text-decoration: none;
}
.appendsearch {
background: rgb(230, 230, 231);
margin: 20px 70px 20px 70px;
padding: 10px 20px;
color: black;
border-left: 4px solid rgb(9, 43, 64);
font-weight: 500;
}
.appendsearch h1 {
font-size: 20px;
font-weight: bold;
}
.appendsearch p {
font-size: 15px;
}
.appendsearch:hover {
border-left: 4px solid orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class='container'>
<div class='wrapper'>
<div class='textbox'>
<a class='randomArticle' href='https://en.wikipedia.org/wiki/Special:Random' target='_blank'>Click here for a random article</a>
<form class='forminput'>
<input class='nice' type='text'>
<span class='glyphicon glyphicon-remove hidden'></span>
<input class='button' type='submit' value='Search'>
</form>
</div>
<div class='results'></div>
</div>
</div>
</body
I cant get elements to be vertically centered before and after search results are inserted. I tried a lot of options but all I get is situation where search box is inserted on the left side of search result.
Here is the sample > http://codepen.io/Todorovic/pen/PGrqOp
What I did to make this work, is to add some line of code with jQuery.
To to center div horizontally and vertically change css:
$('.textbox').css({
'position' : 'absolute',
'left' : '50%',
'top' : '50%',
'margin-left' : function() {return -$(this).outerWidth()/2},
'margin-top' : function() {return -$(this).outerHeight()/2}
});
For working with dimensions if you are not familiar check:
http://api.jquery.com/outerwidth/
http://api.jquery.com/outerheight/
And down in your code after submit form change again css of div to put it on top of page:
$('.textbox').css({
'position' : 'absolute',
'left' : '50%',
'top':'0%',
'margin-top' : '30px',
'margin-left' : function() {return -$(this).outerWidth()/2},
});
After append results add margin-top for div:
$('.results').css({
'margin-top': $('.textbox').height()
})
})
Here is CodePen example:
http://codepen.io/anon/pen/NRZwEJ
Hope the elements are not dynamic, and you have a fixed structure of elements around the search box. After finalizing the element structure and the styling of them you have to identify the height of the textbox element. At the moment it is 47px. We will use this value in the following css.
Next add the following styles into the css.
.textbox {
text-align: center;
position: absolute;
top: 50%;
margin-top: -23px;
}
Please note that the value of the margin-top is half of the 47px( half of the textbox element. )
Edit
Add the following line into your jquery code.
$('.forminput').on('submit', function(event) {
$('.textbox').addClass('pull-up');
After that, update you css with the following additional styles.
.textbox {
text-align: center;
position: absolute;
top: 50%;
margin-top: -23px;
}
.textbox.pull-up {
position: relative;
top: auto;
}
I have these 2 objects in my HTML:
//1st object
<span class="ui-slider-handle" tabindex="0" style="left: 15.3153%;"></span>
//2nd object
<div id="waveform">
<wave style="display: block; position: relative; user-select: none; height: 50px; overflow-x: auto; overflow-y: hidden;">
<canvas></canvas>
<wave style="position: absolute; z-index: 2; left: 0px; top: 0px; bottom: 0px; overflow: hidden; width: 0px; display: block; box-sizing: border-box; border-right: 1px solid rgb(255, 255, 255);"><canvas width="350" height="50" style="width: 350px;"></canvas></wave>
</wave>
</div>
Is it possible using Javascript/jQuery connect the percentage of the "left" css attribute of the ui-slider-handle class to the width of the inner wave and triggering all the time the percentage (of the 1st object) change?
My 1st try
$(document).ready(function(){
var playlist = [{
title:"Hidden",
artist:"Miaow",
mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg",
poster: "https://i.imgur.com/sCbrzQa.png"
},{
title:"Cro Magnon Man",
artist:"The Stark Palace",
mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg",
poster: "https://i.imgur.com/lXvsuBu.png"
},{
title:"Bubble",
m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg",
poster: "https://i.imgur.com/klJKSVZ.jpg"
}];
var cssSelector = {
jPlayer: "#jquery_jplayer",
cssSelectorAncestor: ".music-player"
};
var options = {
swfPath: "http://cdnjs.cloudflare.com/ajax/libs/jplayer/2.6.4/jquery.jplayer/Jplayer.swf",
supplied: "ogv, m4v, oga, mp3",
volumechange: function(event) {
$( ".volume-level" ).slider("value", event.jPlayer.options.volume);
},
timeupdate: function(event) {
$( ".progress" ).slider("value", event.jPlayer.status.currentPercentAbsolute);
}
};
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
var PlayerData = $(cssSelector.jPlayer).data("jPlayer");
// Create the volume slider control
$( ".volume-level" ).slider({
animate: "fast",
max: 1,
range: "min",
step: 0.01,
value : $.jPlayer.prototype.options.volume,
slide: function(event, ui) {
$(cssSelector.jPlayer).jPlayer("option", "muted", false);
$(cssSelector.jPlayer).jPlayer("option", "volume", ui.value);
}
});
// Create the progress slider control
$( ".progress" ).slider({
animate: "fast",
max: 100,
range: "min",
step: 0.1,
value : 0,
slide: function(event, ui) {
var sp = PlayerData.status.seekPercent;
if(sp > 0) {
// Move the play-head to the value and factor in the seek percent.
$(cssSelector.jPlayer).jPlayer("playHead", ui.value * (100 / sp));
} else {
// Create a timeout to reset this slider to zero.
setTimeout(function() {
$( ".progress" ).slider("value", 0);
}, 0);
}
}
});
$( ".ui-slider-range" ).slider({
change: function( event, ui ) {
$('wave').css('width', ui.value)
}
});
});
*, *:before, *:after {
box-sizing: border-box;
}
html {
min-height: 100%;
}
body {
background: #eee;
font-family: "Open Sans", sans-serif;
}
.music-player {
position: relative;
width: 350px;
height: 370px;
margin: 50px auto;
box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
border-radius: 10px;
background: #222;
overflow: hidden;
z-index: 0;
}
.music-player img {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
z-index: -1;
display: block;
width: 100% !important;
height: 100% !important;
-webkit-filter: blur(2px);
filter: blur(2px);
}
.music-player .info {
width: 100%;
height: 100px;
background: #222;
background: rgba(0, 0, 0, 0.8);
text-align: center;
position: relative;
}
.music-player .info .jp-playlist li {
display: none;
}
.music-player .info .jp-playlist li a {
font-size: 30px;
font-weight: 300;
text-decoration: none;
color: #fff;
color: rgba(225, 225, 225, 0.4);
}
.music-player .info .jp-playlist li a span {
font-size: 14px;
display: block;
margin-top: 10px;
}
.music-player .info .jp-playlist li.jp-playlist-current {
display: block;
}
.music-player .info .jp-playlist li .jp-free-media, .music-player .info .jp-playlist li .jp-playlist-item-remove {
display: none;
}
.music-player .info .left, .music-player .info .right {
width: 25px;
position: absolute;
top: 30px;
left: 30px;
}
.music-player .info .right {
left: auto;
right: 30px;
}
.music-player .info [class^="icon-"] {
margin: 0 0 10px;
}
.music-player .info .center {
padding: 20px 0 0;
}
.music-player .progress, .music-player .volume-level {
width: 100%;
height: 5px;
display: block;
background: #ccc;
position: absolute;
bottom: 0px;
cursor: pointer;
border: none;
}
.music-player .progress .ui-slider-range, .music-player .volume-level .ui-slider-range {
display: block;
background: #ed553b;
height: 5px;
border-radius: 0;
}
.music-player .progress .ui-slider-handle, .music-player .volume-level .ui-slider-handle {
position: absolute;
top: -8px;
width: 8px;
height: 22px;
background: url("//i.imgur.com/tsqwz1N.png") no-repeat center;
border: none;
outline: none;
margin: 0 0 0 -3px;
cursor: move;
}
.music-player .controls {
text-align: center;
width: 100%;
height: 190px;
background: #982e4b;
background: rgba(152, 46, 75, 0.6);
}
.music-player .controls .current {
font-size: 48px;
color: #fff;
color: rgba(225, 225, 225, 0.4);
padding: 15px 0 20px;
}
.music-player .controls .play-controls a {
display: inline-block;
width: 35px;
height: 40px;
margin: 0 30px;
}
.music-player .controls .volume-level {
position: relative;
bottom: auto;
width: 200px;
height: 2px;
margin: 30px auto 0;
background: rgba(225, 225, 225, 0.3);
}
.music-player .controls .volume-level .ui-slider-range {
height: 2px;
}
.music-player .controls .volume-level .ui-slider-handle {
top: -8px;
margin-left: -9px;
width: 22px;
height: 22px;
background-image: url("http://image.flaticon.com/icons/svg/106/106874.svg");
}
.music-player .controls .volume-level .icon-volume-up, .music-player .controls .volume-level .icon-volume-down {
position: absolute;
right: -34px;
top: -8px;
width: 22px;
}
.music-player .controls .volume-level .icon-volume-down {
right: auto;
left: -27px;
}
[class^="icon-"] {
width: 18px;
height: 18px;
background: url("//i.imgur.com/E09T8tf.png") no-repeat center;
display: block;
}
.icon-shuffle {
background-image: url("http://image.flaticon.com/icons/svg/148/148739.svg");
}
.icon-heart {
background-image: url("http://image.flaticon.com/icons/svg/126/126499.svg");
}
.icon-repeat {
background-image: url("http://image.flaticon.com/icons/svg/137/137485.svg");
}
.icon-share {
background-image: url("http://image.flaticon.com/icons/svg/189/189676.svg");
}
.icon-previous {
background-image: url("http://image.flaticon.com/icons/svg/137/137518.svg");
}
.icon-play {
background-image: url("http://image.flaticon.com/icons/svg/148/148744.svg");
}
.icon-pause {
background-image: url("http://image.flaticon.com/icons/svg/189/189639.svg");
}
.icon-next {
background-image: url("http://image.flaticon.com/icons/svg/137/137517.svg");
}
.icon-volume-up {
background-image: url("http://image.flaticon.com/icons/svg/149/149139.svg");
}
.icon-volume-down {
background-image: url("http://image.flaticon.com/icons/svg/109/109699.svg");
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jplayer/2.6.4/jquery.jplayer/jquery.jplayer.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jplayer/2.6.4/add-on/jplayer.playlist.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.0.52/wavesurfer.min.js"></script>
</head>
<div class="music-player">
<div style="background-image: url(https://image.freepik.com/free-vector/welcome-summer-badge-on-blurry-background_23-2147511412.jpg);" class="album"></div>
<div class="info">
<div class="left">
</div>
<div class="center">
<div class="jp-playlist">
<ul>
<li></li>
</ul>
</div>
</div>
<div class="right">
</div>
<div class="progress"></div>
</div>
<div class="demo">
<div id="waveform">
</div>
<script>
var ctx = document.createElement('canvas').getContext('2d');
var linGrad = ctx.createLinearGradient(0, 64, 0, 200);
linGrad.addColorStop(0.5, 'rgba(255, 255, 255, 1.000)');
linGrad.addColorStop(0.5, 'rgba(183, 183, 183, 1.000)');
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: linGrad,
progressColor: 'hsla(200, 100%, 30%, 0.5)',
cursorColor: '#fff',
normalize: true,
backend: 'MediaElement',
height:50,
barWidth: 3
});
//Set peaks
wavesurfer.backend.peaks = [0.0218, 0.0183, 0.0165, 0.0198, 0.2137, 0.2888, 0.2313, 0.15, 0.2542, 0.2538, 0.2358, 0.1195, 0.1591, 0.2599, 0.2742, 0.1447, 0.2328, 0.1878, 0.1988, 0.1645, 0.1218, 0.2005, 0.2828, 0.2051, 0.1664, 0.1181, 0.1621, 0.2966, 0.189, 0.246, 0.2445, 0.1621, 0.1618, 0.189, 0.2354, 0.1561, 0.1638, 0.2799, 0.0923, 0.1659, 0.1675, 0.1268, 0.0984, 0.0997, 0.1248, 0.1495, 0.1431, 0.1236, 0.1755, 0.1183, 0.1349, 0.1018, 0.1109, 0.1833, 0.1813, 0.1422, 0.0961, 0.1191, 0.0791, 0.0631, 0.0315, 0.0157, 0.0166, 0.0108];
//Draw peaks
wavesurfer.drawBuffer();
</script>
</div>
<div class="controls">
<div class="current jp-current-time">00:00</div>
<div class="play-controls">
</div>
<div class="volume-level">
</div>
</div>
<div id="jquery_jplayer" class="jp-jplayer"></div>
</div>
UPDATE
The code above creates 2 different slider selector, also the slider affect the width of the wave object. Instead of I need something like this:
I am assuming you're using the UI Slider from jQuery. Once you initialise it, you can use the change event as follows:
$( ".ui-slider-handle" ).slider({
change: function( event, ui ) {
$('wave').first().next().css('width', ui.value)
}
});
Edit: I just realised you wanted the second wave so I added .next()
What you are looking for is MutationObserver(). It allows you to register any change in element's attribute and act on it.
Be sure to check browser support, as it is very likely that it does not include what you actually need.
<style>
.moveAble {
position: absolute;
display:none;
}
a:hover + div.moveAble {
display: block;
}
.moveAble .qtip {
background-color: #FFF;
background-color: rgba(255,255,255,.95);
border-color: #ccc;
padding: 10px;
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.qtip-default {
border-width: 1px;
border-style: solid;
border-color: #f1d031;
background-color: #ffffa3;
color: #555;
}
.qtip, .qtip {
max-width: 280px;
min-width: 50px;
font-size: 10.5px;
line-height: 12px;
direction: ltr;
}
#nytmm .qtip-content {
border-color: #999;
color: #000;
padding: 4px 7px;
text-align: center;
}
.qtip-content {
position: relative;
padding: 5px 9px;
overflow: hidden;
text-align: left;
word-wrap: break-word;
}
.moveAble .qtip-content h5 {
font: 300 20px/22px "nyt-cheltenham",Georgia,"Times New Roman",serif;
color: #000;
margin: 0;
}
.moveAble .qtip-content h6 {
font: 300 13px/16px 'nyt-franklin',Arial,Helvetica,sans-serif;
margin: 0;
}
</style>
<img src="http://s.jeff.io/img/gifts.png" />
<div class="moveAble">
<div id="qtip-0" class="qtip qtip-default qtip-pos-tr" style="z-index: 15001;">
<div class="qtip-content" id="qtip-0-content">
<h5>Dining Gifts »</h5>
<h6>Pug Muddlers</h6>
</div>
</div>
</div>
<script>
$(document).ready(function(){
var $moveable = $('.moveAble');
$(document).mousemove(function(e){
$('.moveAble').css({'top': e.pageY,'left': e.pageX-(e.pageX/2)});
});
});
</script>
The code above is working but when I move mouse pointer over the image in that div, it is flickering too much. I don't know why it is happening. What should be the change in the code that make it work properly?
DEMO Here
This is how you should have done it. Demo :http://jsfiddle.net/wUAGP/468/
Note adding 'left' : e.pageX+20 makes it even more smoother. Play around.
So, check out a cool .gif I made for you all. Interactive isn't it?
This is because of the gap between the .moveAble and the cursor, so they don't clash.
$(document).ready(function() {
$(document).hover(
//Mouse-over
function(e) {
$(this).mousemove(function(e) {
$('.moveAble').css({
'position' : 'absolute',
'top' : e.pageY,
'left' : e.pageX+20
}).show();
});
},
//Mouse-out
function() {
$('.moveAble').fadeOut(1300);
}
);
}, 'a img' );
All you need to do is change 'left': e.pageX - (e.pageX/2) to just a static number like 10 or 5.
Pretty Demo :)
Javascript:
$(document).ready(function () {
var $moveable = $('.moveAble');
$(document).on({
mouseenter: function () {
$moveable.show();
$(this).on('mousemove', function (evt) {
var e = evt || window.event;
$moveable.css({
top: e.pageY,
left: e.pageX + 5
});
});
},
mouseleave: function () {
$moveable.hide();
}
}, 'a img');
});
CSS (cleaned up and optimized for you):
.qtip {
max-width: 280px;
min-width: 50px;
font-size: 10.5px;
line-height: 12px;
direction: ltr;
background-color: #FFF;
background-color: rgba(255, 255, 255, .95);
border-color: #ccc;
padding: 10px;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.qtip-default {
border-width: 1px;
border-style: solid;
border-color: #f1d031;
background-color: #ffffa3;
color: #555;
}
.qtip-content {
border-color: #999;
color: #000;
position: relative;
padding: 5px 9px;
overflow: hidden;
text-align: left;
word-wrap: break-word;
}
.qtip-content h5 {
font: 300 20px/22px"nyt-cheltenham", Georgia, "Times New Roman", serif;
color: #000;
margin: 0;
}
.qtip-content h6 {
font: 300 13px/16px'nyt-franklin', Arial, Helvetica, sans-serif;
margin: 0;
}
HTML (added inline CSS for hiding and position):
<img src="http://s.jeff.io/img/gifts.png" />
<div class="moveAble" style="display: none;position: absolute;">
<div id="qtip-0" class="qtip qtip-default qtip-pos-tr" style="z-index: 15001;">
<div class="qtip-content" id="qtip-0-content">
<h5>Dining Gifts »</h5>
<h6>Pug Muddlers</h6>
</div>
</div>
</div>
PS - use updated jQuery to avoid possible deprecation/removed components in the future.
Please add some margin between mouse pointer and moveable div, because when mouse inter within moveable div, a:hover not works and moveable div display become "none".
$(document).ready(function(){
var $moveable = $('.moveAble');
$(document).mousemove(function(e){
$moveable.css({'top': e.pageY + 5,'left': e.pageX + 5});
});
});
I tried everything but with no luck. I dont know what i did wrong. Please help me!
All I wanted to do is to create a button that can scroll right and left of the schedule-background-container.
Thank you in advance for any help
html
<div id="schedule-background">
<div id="schedule-heading-container">
<div id="schedule-button-right"></div>
<div id="schedule-button-left"></div>
<div id="schedule-background-overall">
<div class="schedule-background-container">
<h2 class="schedule-date">July 23</h2>
<ul class="schedule-ul">
<li class="schedule-title">Homework
</li>
<li class="schedule-other">10:00AM</li>
<li class="schedule-title">Firework
</li>
<li class="schedule-other">11:00AM</li>
<li class="schedule-title">Dexter
</li>
<li class="schedule-other">12:00PM</li>
</ul>
</div>
<div class="schedule-background-container">
<h2 class="schedule-date">July 24</h2>
<ul class="schedule-ul">
<li class="schedule-title"> hello
</li>
<li class="schedule-other">9:30am</li>
</ul>
</div>
</div>
</div>
CSS
#schedule-button-right {
background-color: grey;
position: absolute;
width: 9px;
height: 8px;
margin-top: 10px;
margin-left: 145px;
cursor: pointer;
z-index: 2;
}
#schedule-button-left {
background-color: grey;
position: absolute;
width: 9px;
height: 8px;
margin-top: 10px;
margin-left: 5px;
cursor: pointer;
z-index: 2;
}
#schedule-background {
background-color: white;
position: absolute;
margin-top: 120px;
margin-left: 10px;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
width:160px;
height: 600px;
float: left;
overflow: hidden;
}
#schedule-heading-container {
background: #088a26;
width: 160px;
height: 25px;
}
#schedule-background-overall {
min-width: 320px;
float: left;
position:relative;
}
.schedule-background-container {
width:160px;
height:600px;
float: left;
position:relative;
}
.schedule-date {
color: #ffffff;
text-align: center;
margin-top: 0;
padding-top: 3px;
font: Calibri;
font-size: 18px;
}
.schedule-title {
font-size: 14px;
font-weight: bold;
text-align: left;
}
.schedule-other {
font-size: 12px;
padding-bottom: 3px;
}
.schedule-ul {
position:relative;
margin-top:10px;
height:550px;
list-style:none;
padding-left: 10px;
}
.schedule-ul li a {
text-decoration: none;
color:#0d5887;
}
.schedule-ul li a:hover {
text-decoration:underline;
}
Javascript
$(document).ready(function () {
var $item = $('div#schedule-background-overall');
$('div#schedule-button-right').click(function () {
$item.animate({
'left': '-=160px'
}, 'slow');
});
$('div#schedule-button-left').click(function () {
$item.animate({
'left': '+=160px'
}, 'slow');
});
});
To make it easier here is the code in jsfiddle.net
Again, Thank you!!!
--------------------------Solved---------------------
Didnt load library! Thanks for your help everyone!
I think there are two errors from what I can see. One is the $ symbol missing in the below line:
var $item = ('div#schedule-background-overall');
Change it to: var $item = $('div#schedule-background-overall');
Other is the capital "L" in the below:
$('div#schedule-button-right').click(function () {
$item.animate({
'Left': '-=160px' // Change it to left in all lower-case
}, 'slow');
});
Try by adding $ as
var $item = $('div#schedule-background-overall');
Try assiging margins
$item.animate({'margin-Left': '160px'},slow);
and it should be
var $item = $('div#schedule-background-overall');