Develop Reference

Need to remove one meter box using HTML,CSS and Javascript

I have a code For HTML,CSS and JavaScript for a meter.Now the issue is for this code I am getting two same meters just one after another from top to bottom where as I need only one.I am not be able to understand how to resolve this issue.My code is given below:
Edit html
<DIV id=Gauge style="HEIGHT: 150px; WIDTH: 200px"></DIV><SPAN id=calcValue><SpotfireControl id="fd2a50e39d384ff2b5c0c9bb03d15137" /></SPAN>
Javascript
//define your javascript libraries
resource=[
"//cdn.jsdelivr.net/raphael/2.1.0/raphael-min.js",
"//cdn.jsdelivr.net/justgage/1.0.1/justgage.min.js"
]
//add scripts to head
$.getScript(resource[0],function(){
$.getScript(resource[1],init)
})
//start your widget
init=function(){
var g = new JustGage({
id: "Gauge",
value: parseInt($("#fd2a50e39d384ff2b5c0c9bb03d15137").text()),
min: -1000,
max: 1000,
title: "Operating Margin%"
});
//refresh gauge when calcvalue changes
$(calcValue).on('DOMSubtreeModified',function(){
g.refresh($(this).text())
})
}
How to resolve this issue so that I am getting only one meter box instead of two?

Javascript hover function

i am trying out raphael with javascript and trying to get the hang of it. At the moment i am trying to get it so that when the user hovers over a circle in raphael which i have drawn it will create a simmple hover messge like hi. However i am stuck to an end on this part, i cant seem to do anything about, any help on this would be great.
Javascript:
window.onload= function (){
var paper = new Raphael( 0, 0, 400, 400);
var backGround = paper.rect(0, 0, 400, 400);
backGround.attr({ fill: "orange"});
var face = paper.circle(200,200,100);
face.attr({ fill: "Red"});
};
HTML
<div class= "bot">
<p>Hi there</p>
</div>

Just use the Element.hover() function, as documented on the Raphael website.
Update: The code snippet posted below works if you copy it onto your own computer and run it locally. However, to actually run this snippet on Stack Overflow, it only works on some browsers (e.g. it works on Firefox, but not on Chrome), probably due to the different browsers allowing or not allowing the code snippets to load external libraries, like Raphael.js, as required in this code snippet.
window.onload = function() {
var paper = new Raphael(0, 0, 400, 400);
var backGround = paper.rect(0, 0, 400, 400);
backGround.attr({
fill: "orange"
});
var face = paper.circle(200, 200, 100);
face.attr({
fill: "Red"
});
face.hover(hoverHandler);
};
function hoverHandler() {
alert("hi");
}
<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
<div class="bot">
<p>Hi there</p>
</div>

How do I encode HTML characters within Javascript functions?

to all Javascript experts this question might be just basics. I'm using jQuery and I am working on a tooltip created with jQuery.flot.
The following is a part of my javascript function within an html file and this is exactly what I need to have the tooltip div to be rendered correctly:
$('<div id="tooltip">' + contents + '</div>').css( {
Because the div is not shown I used Firebug to look for the reason and the line of code from above shows the special characters < and > encoded as html entities < and > as you can see here:
$('<div id="tooltip">' + contents + '</div>').css( {
I was searching several online sources for a solution and tried things like .replace(/lt;/g,'<') or .html().text() and it took me more than three hours but nothing was helpful.
I works fine on localhost.
Full Source Code:
<script language="javascript" type="text/javascript" src="../JavaScript/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="../JavaScript/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../JavaScript/flot/jquery.flot.categories.js"></script>
<![CDATA[
<script type="text/javascript">
$(function () {
var data = [ ]]>{e1Array}<![CDATA[ ];
$.plot($("#placeholder1"), [ data ], {
series: {
bars: {
show: true,
barWidth: 1,
align: "center"
}
},
grid: {
hoverable: true,
clickable: true
},
xaxis: {
mode: "categories",
tickLength: 0
},
yaxis: {
min: 0,
max: 1,
ticks: 0
}
} );
});
var previousPoint = null;
$("#placeholder1").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#tooltip1").remove();
showTooltip(item.pageX, item.screenY, item.series.data[item.dataIndex][0] + ': ' + item.series.data[item.dataIndex][1] + ' Einträge');
}
} else {
$("#tooltip1").remove();
previousPoint = null;
}
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: 100,
left: x,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
opacity: 0.80
}).appendTo("#e1-container").fadeIn(0);
}
</script>
]]>
<div class="e1-container" id="e1-container">
<div id="placeholder1" class="e1"></div>
</div>

<![CDATA[
<script type="text/javascript">
This seems to be your problem, or at least the reason why FireBug does show html entities in your code. If you want to use cdata at all, you should place it inside of the <script> tags.
On why the tooltip is not shown at all, I can only guess, but for text content I'd recommend to use
$('<div id="tooltip"></div>').text(contents)
instead of using it as a html string.

You use appendTo(), which is fine.
You append the node only when the plothover flot event is fired.
This is correct, too.
So your code looks fine, you should probably look into this:
Jquery Flot "plothover" event not working
EDIT: You also can put the JS <script> after the HTML.

Do not directly add the contents inside the selector.
1) Create your DOM : var k = $('<div id="tooltip"></div>');
2) Fill your DOM :
// Add after
k.append(contents);
// Replace
k.html(contents);
// Replace and the content is just some text
k.text(contents);
3) Set the CSS : k.css({ ... })
4) Add the DOM to your page k.appendTo('#container');. You can also use $('#container').html(k); to replace the container contents and avoid to have a duplicate
In short :
var k = $('<div id="tooltip"></div>')
.append(contents)
.css({})
.appendTo('#container');
NOTE: The best way is to already create your tooltip div and just fill the elements to avoid to create two div with same ID, ... If you are afraid it perturbs the page, add display : none; to the CSS before to edit it, then change the classes when you edit it.
You will need to create div on 2 conditions :
The pages is created on load with variable number of components
You want to dynamically load CSS or JS.

Raphael animation

I am new to Raphael and am trying to do something very simple, but failing miserably.
I am trying to replicate the animation at this link This is the code I have so far:
<html>
<head><title></title>
<script src="raphael-min.js"></script>
<script src=" src="jquery-1.7.2.js"></script>
</head>
<body>
<div id="draw-here-raphael" style="height: 200px; width: 400px; background: #666;">
</div>
<script type="text/javascript">
//all your javascript goes here
var r = new Raphael("draw-here-raphael", 400, 200),
// Store where the box is
position = 'left',
// Make our pink rectangle
rect = r.rect(20, 20, 50, 50).attr({"fill": "#fbb"});
// Note JQuery is adding the mouseover. SVG == html nodes
$(rect.node).mouseover(function () {
if (position === 'left') {
rect.animate({x: 300, y: 100}, 400, "<>");
position = 'right';
} else {
rect.animate({x: 20, y: 20 }, 800, "bounce");
position = 'left';
}
});
// Make that sucker rotate
setInterval(function () {
rect.rotate(1);
}, 10);
</script>
</body>
</html>
I have downloaded jquery and have it in the same folder as the Raphael. The code that isn't working is the commented code talking about jquery adding the mouseover. When I add that code the rectangle doesn't rotate anymore. It is just stationary. If someone can please help me with this animation I would appreciate it.
Thanks

You have an error in your code:
<script src=" src="jquery-1.7.2.js"></script>
Change it to:
<script src="jquery-1.7.2.js"></script>
That should correct your problem with jQuery.

How to get logo out of twitter widget

I am using the Twitter widget from Twitter itself.
You can download it at http://twitter.com/about/resources/widgets/widget_profile
Now i get this code:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 180,
height: 320,
theme: {
shell: {
background: '#6e6e6e',
color: '#ffffff'
},
tweets: {
background: '#fefefe',
color: '#545454',
links: '#b05c5c'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('SchmidtGlobal').start();
</script>
When I embed this in my website I get my logo at the top left side.
Is there any possibility to get this out?
It's refereing to this script: http://widgets.twimg.com/j/2/widget.js
Any help would be appreciated.
Thanks

The easiest way would be to use CSS. Create a CSS document and link it to your web page. In the css paste:
.twtr-hd, .twtr-ft{display: none;}
This will remove the header and footer. Hope this helps!

In the full source the location of the logo is defined here:
var logo = isHttps ? 'https://twitter-widgets.s3.amazonaws.com/i/widget-logo.png' : 'http://widgets.twimg.com/i/widget-logo.png';
and embedded in HTML here:
<a target="_blank" href="http://twitter.com"><img alt="" src="' + logo + '"></a>
So you should just drop that part and you're done.
That said, I wonder if this isn't against the license agreement.
UPDATE: Above method indeed removes the Twitter logo, as the OP suspected, but it is not that difficult to remove the profile image. A look at the resulting widget (using 'Test Settings') shows me that the image's markup is
<a class="twtr-profile-img-anchor" href="http://twitter.com/***" target="_blank">
<img src="http://a1.twimg.com/profile_images/***/***.jpg" class="twtr-profile-img" alt="profile">
</a>
so it's just a matter of finding code that sets class twtr-profile-img-anchor in the source code. And look, it's there:
/**
* #public
* #param {string}
* sets the profile image source to display in the widget
* #return self
*/
setProfileImage: function(url) {
this._profileImage = url;
this.byClass('twtr-profile-img', 'img').src = isHttps ? url.replace(httpsImageRegex, httpsImageReplace) : url;
this.byClass('twtr-profile-img-anchor', 'a').href = 'http://twitter.com/' + this.username;
return this;
}
I highly suspect that removing the line that calls setProfileImage will suffice:
this.setProfileImage(resp[0].user.profile_image_url);
The only thing you'll notice is that the header will now be too far to the right. You'll have to override this CSS rule:
.twtr-widget-profile h3, .twtr-widget-profile h4 {
margin: 0 0 0 40px !important;
}

find twtr-hd in the script, add
style="display:none"
find twtr-ft in the script, add
style="display:none"
this should do it.
inspired by the Queen of Nerds' solution