A div will not appear when i click a trigger - javascript

I am making an OS called JSOS and in the bottom
corner is a start button i have some jquery to make the menu appear when i click the button
but it wont appear... heres the code:
JQuery:
$("#startbutton").click(function () {
$("#startmenu").toggle("blind");
});
CSS:
.startmenu {
color:gray;
width:400;
height:650;
}
HTML:
<div id="startmenu" class="startmenu"></div>
<footer id="taskbar" class="taskbar">
<div id="startbutton" style="width:25px; height:25px;">
<img src="start.png" id="startbutton" style="width:25px; height:25px;"></img>
</div>
</footer>


I make you a couple of demos on jsFiddle, it's Windows based Start menu and here's a Fiddle
HTML
<footer id="taskbar" class="taskbar">
<div id="startbutton">
<img src="start.png" alt="Start"/>
</div>
</footer>
CSS
#startmenu {
background: #666;
position: absolute;
display: none;
bottom: 25px;
left: 0;
color: gray;
width: 400px;
height: 650px;
}
#taskbar {
background: #444;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
#startbutton {
background: #ccc;
width: 50px;
height: 25px;
cursor: pointer;
}
jQuery
// DEMO 1
$(function() {
$('#startbutton').click(function() {
$('#startmenu').fadeIn('slow');
});
$('#startmenu').mouseleave(function() {
$(this).fadeOut('slow');
});
});
// DEMO 2
$(function() {
$('#startmenu').css({ height: '0', display: 'block' });
$('#startbutton').click(function() {
$('#startmenu').stop().animate({ height: '650px' }, 600 );
});
$('#startmenu').mouseleave(function() {
$(this).stop().animate({ height: '0' }, 600 );
});
});


1.- To start with you have to have unique IDs. You have #startbutton to both div and img elements.
2.- You need to have visible content in the div you want to show/hide, or add some height/width/border, etc with CSS so you can actually see it. otherwise its there but you don't see it.
<div id="startmenu" class="startmenu">CONTENT</div>, by adding text one can see it; and/or give it height/width/background-color/border with CSS.
Demo here


Try this
Add this to your css display:none; so as to hide the div on the page load and then you can try your code,it works
Working DEMO
Cleaned Code
<html>
<head>
<title>Desktop</title>
<link rel="stylesheet" href="dotluv.css" />
</head>
<body>
<style>
.taskbar {
background-image: linear-gradient(bottom, #1F5E3E 32%, #1BC27A 66%, #0CC9C9 83%);
background-image: -o-linear-gradient(bottom, #1F5E3E 32%, #1BC27A 66%, #0CC9C9 83%);
background-image: -moz-linear-gradient(bottom, #1F5E3E 32%, #1BC27A 66%, #0CC9C9 83%);
background-image: -webkit-linear-gradient(bottom, #1F5E3E 32%, #1BC27A 66%, #0CC9C9 83%);
background-image: -ms-linear-gradient(bottom, #1F5E3E 32%, #1BC27A 66%, #0CC9C9 83%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.32, #1F5E3E),
color-stop(0.66, #1BC27A),
color-stop(0.83, #0CC9C9)
);
width:100%;
height:25px;
position: fixed;
bottom: 0px;
cursor:pointer;
}
.background {
background-image: linear-gradient(bottom, #F08C11 22%, #21FCFC 61%);
background-image: -o-linear-gradient(bottom, #F08C11 22%, #21FCFC 61%);
background-image: -moz-linear-gradient(bottom, #F08C11 22%, #21FCFC 61%);
background-image: -webkit-linear-gradient(bottom, #F08C11 22%, #21FCFC 61%);
background-image: -ms-linear-gradient(bottom, #F08C11 22%, #21FCFC 61%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.22, #F08C11),
color-stop(0.61, #21FCFC)
);
width:1350;
height:628;
}
.window {
width:640;
height:530;
color:aqua;
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}
#startmenu{
display:none;
}
.startmenu {
background:gray;
width:400;
height:650;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#welcomedialog" ).dialog({
height: 140,
modal: true,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#internetwindow" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#internetopener" ).click(function() {
$( "#internetwindow" ).dialog( "open" );
});
$( "#startbutton" ).click(function() {
$( "#startmenu" ).toggle( "blind" );
});
});
</script>
<div id="background" class="background">
<div id="welcomedialog" title="Welcome">
<span style="color:#cf00ff;">H</span><span style="color:#d727c3;">e</span><span style="color:#df4e87;">l</span><span style="color:#e6744b;">l</span><span style="color:#ee9b0f;">o</span><span style="color:#f2b40b;"> </span><span style="color:#f7cd08;">a</span><span style="color:#fbe604;">n</span><span style="color:#ffff00;">d</span><span style="color:#bfff00;"> </span><span style="color:#80ff00;">w</span><span style="color:#40ff00;">e</span><span style="color:#00ff00;">l</span><span style="color:#00ff40;">c</span><span style="color:#00ff80;">o</span><span style="color:#00ffbf;">m</span><span style="color:#00ffff;">e</span><span style="color:#00bfff;"> </span><span style="color:#0080ff;">t</span><span style="color:#0040ff;">o</span><span style="color:#0000ff;"> </span><span style="color:#4000bf;">J</span><span style="color:#800080;">S</span><span style="color:#bf0040;">O</span><span style="color:#ff0000;">S</span>
</div>
<div id="startmenu" class="startmenu"></div>
</div>
<footer id="taskbar" class="taskbar"><div id="startbutton" style="width:25px; height:25px;"><img src="start.png" style="width:25px; height:25px;"></img></div></footer>
</body>
</html>

Related

Single line with multiple colors based on time in using jquery

I need to generate a graph like I have shown here
Single line with multiple colors over time
The X axis will be time series . Can anyone suggest a JQuery plugin to generate such a graph ?
Thanks

Try below chart and change as per your requirement
var graph = (function(){
var urgentTitle = "Urgent",
$graph = $('.graph'),
$barContainer = $graph.find('.graph-bars'),
$markers = $('.markers'),
$graphTitles = $('.graph-titles'),
max = null,
limit = null;
var init = function(data){
max = getMaxValue(data);
limit = max + Math.ceil(max * 0.05);
$barContainer.empty();
$markers.empty();
$graphTitles.empty();
$('#urgent-title').text(urgentTitle);
setMarkers($markers, limit);
if (data.length) buildTeamRows($barContainer, $graphTitles, data, limit);
else buildUserRows($barContainer, $graphTitles, data, limit);
};
// return a values percentage in relation to the limit
var getPercentage = function(value, limit) {
return value / limit * 100 + "%";
};
var getMaxValue = function(data) {
var largest = 0;
var sum = 0;
if (data.length) {
for (x=0;x<data.length;x++) {
sum = data[x].active + data[x].newCount + data[x].newFromBatch;
if (sum > largest) {
largest = sum;
}
}
} else {
largest = Math.max(data.active, data.newCount, data.newFromBatch);
}
return largest;
};
var setMarkers = function($selector, limit) {
var increment = limit / 5;
var value = 0;
var values = [];
var leftOffset = 0;
// Create array of marker values
while(value < limit) {
values.push(Math.round(value));
value += increment;
}
values.push(limit);
for (var x=0;x<values.length;x++) {
var $markerTmpl = $('<div class="marker"><span class="marker-number"></span></div>');
leftOffset = getPercentage(values[x], limit);
$markerTmpl.css({ 'left': leftOffset }).find('.marker-number').text(values[x]);
$selector.append($markerTmpl);
}
$selector.addClass('loaded');
};
//Build each individual graph based on selector, data, and max value
var buildTeamRows = function($barSelector, $titleSelector, data, limit) {
var percentage;
// Loop through data
for (var x=0;x<data.length;x++) {
var titleClass = null;
var titleCount = 0;
var $graphBar = $('<div class="graph-bar"></div>')
.attr('id', 'userGraph-' + data[x].userId);
$barSelector.append($graphBar);
// Render each fragment
renderFragment($graphBar, 'urgent', data[x].urgent, limit);
renderFragment($graphBar, 'active', data[x].active - data[x].urgent, limit);
renderFragment($graphBar, 'newCount', data[x].newCount, limit);
renderFragment($graphBar, 'newFromBatch', data[x].newFromBatch, limit);
// Calculate largest fragment value
var largest = 0;
$.each(data[x], function(index, value){
if ($.isNumeric(value)){
if (value > largest) {
largest = value;
titleClass = index;
titleCount = value;
}
}
});
// If Active is greatest value, Check if urgent portion of active is greater than active
if (titleClass === 'active' && data[x].urgent >= (data[x].active - data[x].urgent)) {
titleClass = 'urgent';
titleCount = data[x].urgent;
}
// Render row meta-data
var $titleSet = $('<div class="graph-title"><div class="graph-title-name"></div><div class="graph-title-count"></div></div>');
$titleSet.find('.graph-title-name').text(data[x].userName);
$titleSet.find('.graph-title-count').addClass(titleClass).text(titleCount);
$titleSelector.append($titleSet);
}
};
var renderFragment = function($selector, type, value, limit) {
var $rowFragmentTmpl = $('<div class="graph-bar-fragment"></div>');
var percentage = getPercentage(value, limit);
$rowFragmentTmpl.attr('data-value', value);
$selector.append($rowFragmentTmpl.addClass(type));
setTimeout(function(){
$rowFragmentTmpl.css({'width': percentage});
}, 1);
};
var buildUserRows = function($barSelector, $titleSelector, data, limit) {
renderUserRow($barSelector, $titleSelector, 'urgent', data.urgent, limit, urgentTitle);
renderUserRow($barSelector, $titleSelector, 'active', data.active, limit, 'Active');
renderUserRow($barSelector, $titleSelector, 'newCount', data.newCount, limit, 'New');
renderUserRow($barSelector, $titleSelector, 'newFromBatch', data.newFromBatch, limit, 'New From Batch');
};
var renderUserRow = function($barSelector, $titleSelector, type, value, limit, title) {
var percentage = getPercentage(value, limit);
var $graphBar = $('<div class="graph-bar graph-bar-single"></div>').attr({'id' : 'userGraph-' + type, 'data-value': value});
$barSelector.append($graphBar);
setTimeout(function(){
$graphBar.css({'width': percentage}).addClass(type);
},1);
var $titleSet = $('<div class="graph-title"><div class="graph-title-name"></div><div class="graph-title-count"></div></div>');
$titleSet.find('.graph-title-name').text(title);
$titleSet.find('.graph-title-count').addClass(type).text(value);
$titleSelector.append($titleSet);
};
return {
init: init
}
})();
// Document ready
$(function(){
// Dummy Data
var dataSet = [
{
active: 5,
newCount: 4,
newFromBatch: 40,
urgent: 1,
userId: "molly",
userName: "Molly"
},
{
active: 21,
newCount: 2,
newFromBatch: 5,
urgent: 10,
userId: "jack",
userName: "Jack"
},
{
active: 25,
newCount: 4,
newFromBatch: 3,
urgent: 20,
userId: "tracy",
userName: "Tracy"
},
{
active: 10,
newCount: 24,
newFromBatch: 4,
urgent: 2,
userId: "nolan",
userName: "Nolan"
},
];
var dataSingle = {
active: 25,
newCount: 4,
newFromBatch: 3,
urgent: 20,
userId: "ryan",
userName: "Ryan Scofield"
};
// Initialize Graph
graph.init(dataSet);
$('#teamGraph').on('click', function(e){
graph.init(dataSet);
});
$('#userGraph').on('click', function(e){
graph.init(dataSingle);
});
});
body {
padding: 20px;
}
/* Opportunity Graphs */
.graph-titles {
display: inline-block;
width: 200px;
vertical-align: top;
margin: 20px 0 20px;
padding: 0;
}
.graph-title {
margin-bottom: 1em;
width: 100%;
line-height: 30px;
overflow: hidden;
}
.graph-title-name {
float: left;
}
.graph-title-count {
float: right;
padding: 0 10px;
height: 30px;
border-radius: 20px;
color: #fff;
}
.graph {
display: inline-block;
position: relative;
margin: 20px 20px 20px 10px;
padding: 0;
width: 500px;
}
.graph-bar {
display: block;
overflow: hidden;
margin-bottom: 1em;
}
.graph-bar-fragment {
width: 0;
height: 30px;
float: left;
background-color: #ccc;
-webkit-transition: width .4s ease-in;
}
.graph-bar-single {
height: 30px;
background-color: #ccc;
-webkit-transition: width .4s ease-in;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.graph-bar-fragment:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.urgent {
background: #c9575e;
background: -moz-linear-gradient(top, #c9575e 0%, #c12e41 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c9575e), color-stop(100%, #c12e41));
background: -webkit-linear-gradient(top, #c9575e 0%, #c12e41 100%);
background: -o-linear-gradient(top, #c9575e 0%, #c12e41 100%);
background: -ms-linear-gradient(top, #c9575e 0%, #c12e41 100%);
background: linear-gradient(to bottom, #c9575e 0%, #c12e41 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9575e', endColorstr='#c12e41',GradientType=0 );
}
.active {
background: #d6ac6e;
background: -moz-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d6ac6e), color-stop(100%, #cc9e52));
background: -webkit-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%);
background: -o-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%);
background: -ms-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%);
background: linear-gradient(to bottom, #d6ac6e 0%, #cc9e52 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6ac6e', endColorstr='#cc9e52',GradientType=0 );
}
.newCount {
background: #6db683;
background: -moz-linear-gradient(top, #6db683 0%, #569b6d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6db683), color-stop(100%, #569b6d));
background: -webkit-linear-gradient(top, #6db683 0%, #569b6d 100%);
background: -o-linear-gradient(top, #6db683 0%, #569b6d 100%);
background: -ms-linear-gradient(top, #6db683 0%, #569b6d 100%);
background: linear-gradient(to bottom, #6db683 0%, #569b6d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db683', endColorstr='#569b6d',GradientType=0 );
}
.newFromBatch {
background: #7f8cc4;
background: -moz-linear-gradient(top, #7f8cc4 0%, #6477ac 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7f8cc4), color-stop(100%, #6477ac));
background: -webkit-linear-gradient(top, #7f8cc4 0%, #6477ac 100%);
background: -o-linear-gradient(top, #7f8cc4 0%, #6477ac 100%);
background: -ms-linear-gradient(top, #7f8cc4 0%, #6477ac 100%);
background: linear-gradient(to bottom, #7f8cc4 0%, #6477ac 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f8cc4', endColorstr='#6477ac',GradientType=0 );
}
.markers {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .4s ease-in;
}
.markers.loaded {
visibility: visible;
opacity: 1;
}
.marker {
-webkit-box-sizing: border-box;
position: absolute;
bottom: -2em;
top: 0;
border-left: 2px solid #e6e6e6;
}
.marker-number {
position: absolute;
padding-left: .5em;
bottom: 0;
text-align: right;
}
.marker:last-child .marker-number {
right: 0;
padding-left: 0;
padding-right: .5em;
}
.graph-key {
margin: 20px 0 0 210px;
}
.graph-key-item {
display: inline-block;
margin-right: 1.5em;
}
.graph-key-dot {
display: inline-block;
width: 1em;
height: 1em;
border-radius: 50%;
margin-right: .5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="graph-container">
<div class="graph-titles">
<!-- Populated -->
</div>
<div class="graph">
<div class="graph-bars">
<!-- Populated -->
</div>
<div class="markers">
<!-- Populated -->
</div>
</div>
<div class="graph-key">
<div class="graph-key-item">
<span class="graph-key-dot urgent"></span><span id="urgent-title">Urgent</span>
</div>
<div class="graph-key-item">
<span class="graph-key-dot active"></span><span>Active</span>
</div>
<div class="graph-key-item">
<span class="graph-key-dot newCount"></span><span>New</span>
</div>
<div class="graph-key-item">
<span class="graph-key-dot newFromBatch"></span><span>New From Batch</span>
</div>
</div>
</div>
<button id="teamGraph">Team Graph</button>
<button id="userGraph">User Graph</button>

Try below chart and change value as per your requirement
var chart = new Chartist.Bar('#chart01',
{
labels: ['C-Level', 'Executive', 'Director', 'Manager', 'Professional', 'Other'],
series: [
[3,9,5,8,4,2],
[2,8,4,19,25,6],
[2,16,6,53,57,12]
]
},
{
stackBars: true,
seriesBarDistance: 10,
reverseData: false,
horizontalBars: true,
low: 0,
fullWidth: true,
chartPadding: {
right: 30,
left: 30
},
axisX: {
showGrid: true,
showLabel: true
},
axisY: {
showGrid: false,
showLabel: true,
offset: 60,
onlyInteger: true,
labelInterpolationFnc: function(value) {
return value;
}
}
});
$('#chart01').on('click', '.ct-chart-bar .ct-labels foreignobject', function(evt) {
var index = $(this).index();
var label = $(this).find('span.ct-label').text();
graphClicked(index, label, null);
});
$('#chart01').on('mouseover', '.ct-chart-bar .ct-series-a line, .ct-chart-bar .ct-series-b line, .ct-chart-bar .ct-series-c line', function(evt) {
var index = $(this).index();
$(this).closest('.ct-chart-bar').find('.ct-labels foreignobject:nth-child('+(index+1)+') span').addClass('hover');
});
$('#chart01').on('mouseleave', '.ct-chart-bar .ct-series-a line, .ct-chart-bar .ct-series-b line, .ct-chart-bar .ct-series-c line', function(evt) {
var index = $(this).index();
$(this).closest('.ct-chart-bar').find('.ct-labels foreignobject:nth-child('+(index+1)+') span').removeClass('hover');
});
$('#chart01').on('click', '.ct-chart-bar .ct-series-a line, .ct-chart-bar .ct-series-b line, .ct-chart-bar .ct-series-c line', function(evt) {
var index = $(this).index();
var label = $(this).closest('.ct-chart-bar').find('.ct-labels foreignobject:nth-child('+(index+1)+') span').text();
var value = $(this).attr('ct:value');
graphClicked(index, label, value);
});
function graphClicked(index, label, value) {
console.log('---');
console.log('index:', index);
console.log('label:', label);
alert('Index: '+index+', Label: '+label+', Value: '+value);
}
html {
background-color: lightgrey;
}
.chart-wrapper {
width: 50%;
margin: 1rem auto;
background-color: white;
padding: 0.1rem 0.5rem 1rem 0.5rem;
}
h3 {
text-align: center;
}
h4 {
text-align: center;
}
.center-link {
text-align: center;
display: block;
font-size: 0.7rem;
}
.ct-line {
stroke-dasharray: 2000;
stroke-dashoffset: 2000;
}
.ct-series-a .ct-line {
animation: dash 5s linear forwards;
animation-delay: 1s;
}
.ct-series-a .ct-line, .ct-series-a .ct-point, .ct-series-a .ct-bar {
stroke: #5b9bd5;
}
.ct-series-b .ct-line {
animation: dash 5s linear forwards;
animation-delay: 2s;
}
.ct-series-b .ct-line, .ct-series-b .ct-point, .ct-series-b .ct-bar {
stroke: #ed7d31;
}
.ct-series-c .ct-line {
animation: dash 5s linear forwards;
animation-delay: 3s;
}
.ct-series-c .ct-line, .ct-series-c .ct-point, .ct-series-c .ct-bar {
stroke: #a5a5a5;
}
.chart-title {
text-align: center;
color: #555;
margin-bottom: 0.5rem;
}
.key {
font-size: 0.7rem;
color: #555;
padding: 0 30px 0 90px;
}
.key .key-element {
width: 32%;
display: inline-block;
padding-left: 22px;
box-sizing: border-box;
position: relative;
}
.key .key-element:before {
content: "";
display: block;
width: 16px;
height: 16px;
position: absolute;
top: -2px;
left: 0;
}
.key .key-element.key-series-a:before {
background-color: #5b9bd5;
}
.key .key-element.key-series-b:before {
background-color: #ed7d31;
}
.key .key-element.key-series-c:before {
background-color: #a5a5a5;
}
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end {
display: block;
position: relative;
left: -50%;
text-align: center;
}
.ct-chart-bar .ct-labels foreignobject {
cursor: pointer;
}
.ct-chart-bar .ct-labels foreignobject span {
text-decoration: none;
}
.ct-chart-bar .ct-labels foreignobject span:hover, .ct-chart-bar .ct-labels foreignobject span.hover {
text-decoration: underline;
}
.ct-chart-bar .ct-series line {
cursor: pointer;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.7/chartist.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.7/chartist.min.css" rel="stylesheet" />
<div class="chart-wrapper">
<h4>Click on the bars to get their index, label and value</h4>
<div id="chart01" class="ct-chart ct-chart01 ct-octave"></div>
<div class="key">
<div class="key-element key-series-a">Account Topic Score</div>
<div class="key-element key-series-b">#Unique Contacts</div>
<div class="key-element key-series-c">#Interactions</div>
</div>
</div>

how to add CSS to -webkit-slider-runnable-track using Javascript

I am trying to change the range slider lower color depends upon the slide. Using below code.
<head>
</head>
<input type="range" min="1" max="100" step="1" value="15"id="myrange" class="myrange">
CSS:
input[type="range"] {
width: 100%;
height: 28px;
-webkit-appearance: none;
outline: none;
border: 0; /*for firefox on android*/
padding: 0 8px; /*for IE*/
margin: 8px 0;
}
/*chrome and opera*/
input[type="range"]::-webkit-slider-runnable-track {
height: 8px;
border-radius: 4px;
transition: 0.3s;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, orange),
color-stop(0.15, #C5C5C5)
);
}
.myrange::-webkit-slider-runnable-track {
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, orange),
color-stop(0.15, #C5C5C5)
);
height: 8px; /*trackHeight*/
border-radius: 4px; /*trackHeight*/
transition: 0.3s;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background: orange;
width: 28px;
height: 28px;
border-radius: 50%;
margin-top: -12px;
cursor: pointer;
border: 4px solid #fff;
transition: 0.3s;
}
javascript:
var style = $("<style>", {type:"text/css"}).appendTo("head");
$(function() {
$('input[type="range"]').on('input change', function() {
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
style.text('.myrange::-webkit-slider-runnable-track{background-image:-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', orange), '+ 'color-stop(' + val + ', gray);}');
});
});
I would like to update the CSS for input[type="range"]::-webkit-slider-runnable-track while using the slider.
I have verified the previous post how to call range::-webkit-slider-runnable-track? on same topic and edited my code accordingly. Really appreciate if someone can help me to identify the issue with code
Fiddle : https://jsfiddle.net/fwmscany/1/

This is working now. Here is the update I made to Javascript
$(function() {
var style = $("<style>", {type:"text/css"}).appendTo("head");
$('input[type="range"]').on('input change', function() {
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
$('<style type="text/css"></style>').text('input[type="range"]::-webkit-slider-runnable-track { background-image:-webkit-gradient(linear, left top, right top, color-stop('+val+', orange), color-stop('+val+', #C5C5C5));}').appendTo('head');
});
});

How to correct retrieve $(object).css(“margin”) and apply this value in .animate() in different browsers?

In jQuery API written what .css() return String. This String have view like value without quotes.
If I'll put $(object).css(“margin”) in my code like this:
condition: this != object
$(this).animate({
width: "toggle",
margin: $(object).css("margin"),
padding: ($(object).css("padding"))
}, time, "linear");
"Chrome" work out perfectly, but "IE 11" and last "Edge" work out incorrect.
If I'll add to $(object).css(“margin”) quotes, all browser work identically.
How identically, You can see in code below.
Eventually I need code which independent of content. How to fix it ?
$(document).ready(function() {
var time = 200;
var delay = time + 100;
$(".icon-language").click(function() {
slide($(".rightBlockMenu i"), $(this), time);
$(".hidden").delay(delay).animate({
width: "show"
}, time, "linear");
});
$(".icon-search-1").click(function () {
slide($(".rightBlockMenu i"), $(this), time);
});
$(".icon-user-o").click(function () {
slide($(".rightBlockMenu i"), $(this), time);
});
$(".icon-basket").click(function () {
slide($(".rightBlockMenu i"), $(this), time);
});
})
function slide(selector, object, time) {
if (selector.not(object).css("display") != "none") {
selector.not(object).animate({
width: "hide",
margin: "0px -1px",
padding: "9px 0px"
}, time, "linear");
$(object).animate({
margin: "0"
}, time).addClass("active_i");
}
if (selector.not(object).css("display") == "none") {
selector.each(function (){
if ($(this).is(selector.last())) {
$(this).animate({
width: "show",
margin: "0 0 0 6px",
padding: "\"" + $(object).css("padding") + "\""
}, time, "linear");
$(this).removeClass("active_i");
} else {
$(this).animate({
width: "show",
margin: "0 6px",
padding: "9px 18px"
}, time, "linear", function() {
if ($(this).is(selector.first())) {
$(this).css("margin-left", "0");
}
});
$(this).removeClass("active_i");
}
});
}
}
.header_top {
height: 100px;
position: relative;
}
.rightBlock {
max-height: 100%;
padding-right: 10px;
float: right;
right: 0;
text-align: right;
}
.rightBlockMenu {
color: hsla(0, 0%, 80%, 1);
font-size: 2.7em;
vertical-align: middle;
display: inline-block;
}
.rightBlockMenu i:last-child {
margin-right: 0;
}
.rightBlockMenu i:first-child {
margin-left: 0;
}
.rightBlockMenu i:hover {
color: hsla(0, 70%, 45%, 1);
cursor: pointer;
}
.rightBlockMenu i {
padding: 9px 18px;
margin: 0 6px;
vertical-align: bottom;
border: 1px solid hsla(0, 0%, 80%, 1);
display: inline-block;
}
.active_i {
color: hsla(0, 70%, 45%, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header_top">
<div class="rightBlock">
<div class="rightBlockMenu">
<i class="icon-language">aaa</i>
<i class="icon-search-1" >bbb</i>
<i class="icon-user-o" >ccc</i>
<i class="icon-basket" >ddd</i>
</div>
</div>
</div>

I tested your code on Firefox, Chrome and Edge and it seemed fine. Maybe clarify more what you are trying to achieve. In any case, your code seems a needlessly complicated.
Find below a shorter version of your code:
$(document).ready(function() {
var time = 200;
var delay = time + 100;
$(".rightBlockMenu i").click(function() {
var currentElement = jQuery(this);
var margin = "0 6px";
var padding = "9px 18px";
var toggle = "show";
if (!currentElement.hasClass("active_i")) {
currentElement.addClass("active_i")
margin = "0";
padding = "9px 0";
toggle = "hide";
}
currentElement.siblings().each(function(index, elemenet) {
jQuery(elemenet).removeClass("active_i").animate({
width: toggle,
margin: margin,
padding: padding
}, time, "linear", function() {
// Show element after it was hidden
if (currentElement.hasClass("icon-language")) {
setTimeout(function() {
jQuery(elemenet).animate({
width: "show",
margin: "0 6px",
padding: "9px 18px"
});
}, delay);
}
if (toggle == 'show')
$(".rightBlockMenu i").removeClass("active_i");
});
});
});
});
.header_top {
height: 100px;
position: relative;
}
.rightBlock {
max-height: 100%;
padding-right: 10px;
float: right;
right: 0;
text-align: right;
}
.rightBlockMenu {
color: hsla(0, 0%, 80%, 1);
font-size: 2.7em;
vertical-align: middle;
display: inline-block;
}
.rightBlockMenu i:last-child {
margin-right: 0;
}
.rightBlockMenu i:first-child {
margin-left: 0;
}
.rightBlockMenu i:hover {
color: hsla(0, 70%, 45%, 1);
cursor: pointer;
}
.rightBlockMenu i {
padding: 9px 18px;
margin: 0 6px;
vertical-align: bottom;
border: 1px solid hsla(0, 0%, 80%, 1);
display: inline-block;
}
.active_i {
color: hsla(0, 70%, 45%, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header_top">
<div class="rightBlock">
<div class="rightBlockMenu">
<i class="icon-language">aaa</i>
<i class="icon-search-1">bbb</i>
<i class="icon-user-o">ccc</i>
<i class="icon-basket">ddd</i>
</div>
</div>
</div>

I would like to change these image's title tags into div tags

as you can see at www.thetotempole.ca/javascriptproject2/ I have title attribute's that pop out when hovering over my table's image tags. Instead of titles I need div. Any help will be amazingly appreciated. Thanks guys!
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<meta charset="utf-8">
<title>Arrays</title>
<script>
$(function() {
$( document ).tooltip();
});
</script>
<style>
#tbl img {
-webkit-transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
}
#tbl td:hover img {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
td {text-align: center;}
</style>
</head>
<body>
<center><table id="tbl" border="1">
<tr>
<th>Product Name</th>
<th>Product Description</th>
<th>Product Images</th>
</tr>
</table>
<script>
var products = [
{
name: "Apple",
description: "It might be fruit, or it might be an iPhone",
imageUrl: "images/apple.jpg",
title: "www.apple.com/ca/iphone"
}, {
name: "Dell",
description: "Buy this one online at dell.com",
imageUrl: "images/dell.jpg",
title: "www.dell.com/ca/p/laptops"
}, {
name: "IBM",
description: "If you want a mainframe they still have some",
imageUrl: "images/ibm.jpg",
title: "oldcomputers.net/ibm5150.html"
}, {
name: "Toshiba",
description: "Get a discount through SAIT (maybe)",
imageUrl: "images/toshiba.jpg",
title: "www.toshiba.com/us/computers"
}, {
name: "Atari",
description: "Try a classic gaming machine",
imageUrl: "images/atari.jpg",
title: "www.nintendosforsale.com/"
}, {
name: "Commodore",
description: "64k should be enough for anyone",
imageUrl: "images/commodore.jpg",
title: "http://oldcomputers.net/c64.html"
}
];
var table = document.getElementById("tbl");
products.forEach(function(product) {
var row = document.createElement("tr");
row.appendChild(createCell(product.name));
row.appendChild(createCell(product.description));
row.appendChild(createImageCell(product.imageUrl, product.title));
table.appendChild(row);
});
function createCell(text) {
var cell = document.createElement("td");
cell.innerText = text;
return cell;
}
function createImageCell(url,title){
var image = document.createElement("img");
image.setAttribute("src", url);
image.setAttribute("title",title);
var cell = document.createElement("td");
cell.appendChild(image);
return cell;
}
</script>
<script>
// Table background color
$("tr:even").css("backgroundColor" , "yellow");
$("tr:odd").css("backgroundColor" , "violet");
$("th").css("backgroundColor" , "green");
<!-- End of jquery styling -->
</script>
</center>
</body>
</html>

You can use this at the end of your javascript.
$('td:last-child').hover(function(){
var link = $(this).find('img').attr('title')
var div = $('<div class="tooltip">'+link+'');;
$(this).append(div);
},function(){
$('.tooltip').remove();
});
Now all you have to do is to style div class tooltip (hovered 'td' is his parent).
http://jsfiddle.net/v6tA8/16/

Not quite sure what you are needing to do with having a div wrapped around the title but this solution might help you as it lets you style the title as you wish.
CSS
a {
color: #900;
text-decoration: none;
}
a:hover {
color: red;
position: relative;
}
a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
Demo http://jsfiddle.net/tDQWN/
Answer by Andres Ilich / steveax at How to change the style of Title attribute inside the anchor tag?

Animate multiple elemts from middle to top with jQuery

i'm trying to move divs(actually they are AlwaysVisibleControls) from center-screen to the top of the page after a few seconds.
This is what i have:
$(document).ready(function() {
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(PageLoaded)
});
var ScrollTopTimeOuts = [];
function PageLoaded(sender, args) {
$('.PanelNotificationBox').click(function () {
$(this).fadeOut('slow', function () {
$(this).remove();
});
});
while (ScrollTopTimeOuts.length != 0) {
clearTimeout(ScrollTopTimeOuts[ScrollTopTimeOuts.length - 1]);
ScrollTopTimeOuts.length--;
}
ScrollTopTimeOuts[ScrollTopTimeOuts.length] = setTimeout(function () {
$('.PanelNotificationBox').animate({ top: 0 }, 'slow');
}, 3000);
}
This works, but the problem is that there can be more than one notification($('.PanelNotificationBox').size()>1). Then they will overlap each other after the animation.
Q: How can i animate elements so that the first element will be on top and the next elements will keep their positions relative to the others?
Edit: After i added the notification-div(s) to a container-div and try to animate that, it won't be animated at all. This is the generated HTML/CSS(note: the outer div is an UpdatePanel):
<div id="ctl00_UpdNotifier"
<div style="top: 0px;" id="ctl00_Notifier1_PnlNotification" class="NotificationContainer">
<div style="left: 292px; top: 398px; display: none; visibility: visible; position: absolute; cursor: pointer; opacity: 1;" id="ctl00_Notifier1_InfoMsg2" class="PanelNotificationBox PanelInfo AutoHide" title="click to close notification">
<span>Test-Notification(Info)</span>
</div>
<div style="left: 292px; top: 463px; visibility: visible; position: absolute; cursor: pointer; opacity: 1;" id="ctl00_Notifier1_ErrorMsg1" class="PanelNotificationBox PanelError" title="click to close notification">
<span>Test-Notification(RMA-Error)</span>
</div>
</div>
</div>
CSS-File:
.PanelNotificationBox
{
visibility:hidden;
z-index:9999;
width: 50%;
font-weight: bold;
font-size:small;
border: 1px solid;
margin: 10px auto;
padding: 20px 20px 20px 60px;
background-repeat: no-repeat;
background-position: 8px center;
box-shadow: 2px 2px 3px #3A4F63;
border-radius: 4px;
}
.PanelInfo {
color:Black;
background-color: InfoBackground;
background-image: url('../images/info-icon.png');
}
.PanelError {
color:White;
background-color: red;
background-image: url('../images/error-icon.png');
}

I suggest to place all your messages in a div, and set this div on abosule position on the top of the page and animate this div that holds all the messages. I think that you can even just place all your element in this div, and they arrange by him self the one afther the other.
<style type="text/css">
.Containerv {
position:absolute;
left:10px;
top:10px;
width:230px;
}
</style>
<div id="ContainerID" class="Container">
<div>First element</div>
<div>Second element</div>
<div>.... next elements</div>
</div>
and your javascript
$(document).ready(function() {
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(PageLoaded)
});
var ScrollTopTimeOuts = [];
function PageLoaded(sender, args)
{
// keep this to indivitual close messages
$('.PanelNotificationBox').click(function () {
$(this).fadeOut('slow', function () {
$(this).remove();
});
});
clearTimeout(ScrollTopTimeOuts);
ScrollTopTimeOuts = setTimeout(function () {
$('#ContainerID').animate({ top: 0 }, 'slow');
}, 3000);
}

The approaches from #Yoshi and #Aristos had the disadvatage of breaking the AlwaysVisibleControls js-functionality. Thank you anyway :)
I ended with this solution what is working fine(leaving out the timer part):
var first=$('.PanelNotificationBox:first');
$('.PanelNotificationBox').each(function (index) {
$(this).animate({ top: '-=' + first.offset().top }, 'slow');
});

Categories

Resources