I am using SimpleTip to generate a tooltip when the user hovers over a cell in a table. The tooltip shows, but it expands the size of the cell. How can I make it hover over the cell without changing its size?
Here's what I currently have:
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.simpletip-1.3.1.js"></script>
</head>
<body>
<table border="1">
<tr><td id="test">foobar</td></tr>
</table>
<script type="text/javascript">
$("#test").simpletip({
fixed: true,
content: 'hello world!'
});
</script>
</body>
</html>
I recommend you using qTip (the successor to Simpletip) and it works with your case
Try this:
http://jsfiddle.net/ynhat/PydCK/
Looks like you're using "simpletip" and not qTip in your code. That may be the reason why. What browser are you using? It's possible you might be using IE and without the right doctypes your page won't display properly.
I'll have to run your code and test it.
The reason is that SimpleTip does not use use a holder element like most other libraries. It rather puts the tooltip inside the tooltipped element. This works for some basic layouts but it does not work for others – especially ones that use relative/absolute positioning of elements.
So the solution is as proposed: Try it, if it doesn't work with your layout, try some other library.
Actually I have forked a tooltip based on SimpleTip 1.3.1 which has this issue fixed. I will be releasing it in a while. You probably have solved your problem in the meantime, though. :)
Related
Please I need help. I found really cool code: https://codepen.io/chris-creditdesign/pen/cypJf but after I put the code into one HTML file, I can only see the output as tables (there should be a graph)
What is wrong with the code ?
I saved the code from page into a single HTML file as shown below:
<!DOCTYPE html>
<html>
<body>
HTML CODE HERE
<style>
CSS CODE HERE
</style>
<script>
JS CODE HERE
</script>
</body>
</html>
but my result are tables (I expect graphs:)
You need add to project additional library.
in your case it's
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://d3js.org/d3.v3.min.js
input these libraries before your code - in the head where the style also belongs
P.S.
In the future don't forget to watch the setting of pen project
I am new to CSS, HTML, and JS but I hope to learn more as I progress through developing my portfolio site. Currently I am trying to put custom buttons I designed on my site, that link to another page. I have the button zero and click state working, but I'm not 100% sure how to make it so that button can be used to link to another page on my site.
Here is the code so far.
<html>
<head><title>button</title>
<style>
div.butn{
background-image:url("https://static1.squarespace.com/static/54da7941e4b0e25dc3648a4f/t/59640885b3db2b282c21c56e/1499728005971/zero_state%40300x-8.png#import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:700");
width:555px;
height:170px;}
div.butn:active{
background-image:url("https://static1.squarespace.com/static/54da7941e4b0e25dc3648a4f/t/5964090b6b8f5bf77b28504f/1499728139538/hover_state%40300x-8.png");
width:555px;
height:170px;}
</style>
</head>
<body>
<div class="butn"></div>
</body>
</html>
Any help is appreciated, sorry in advance for any noobie mistakes xD
I'd advise you to stick with semantic HTML, i.e. use proper tags for what you are trying to convey. In your example you want a button to act like a hyperlink to another URL, so why don't you use the anchor tag which was made for exactely that purpose?
Let's see how we can improve things a bit:
<html>
<head>
<meta charset="utf-8">
<title>button</title>
<style>
.butn {
background-image:url(.../plain.image");
width:555px;
height:170px;
}
.butn:active{
background-image:url("../active.image");
}
</style>
</head>
<body>
<p><a class="butn" href="https://..." title="Show this text on hover">Go to YouTube</a></p>
</body>
</html>
So, what has changed besides the use of the anchor tag? Quite a lot, actually:
I chose a proper character set (UTF-8 should be fine for most about everything)
I lowered your CSS rule's specificity (you may read up on as to why this is !important (no pun intended) on Smashing magazine)
I used an anchor tag <a> to properly mark up the hyperlink
I got rid off the superfluous CSS properties within the .btn:active rule (see CSS-Tricks to learn all about how styles are cascaded)
and last but not least, I properly aligned your code (call me pedantic but missaligned code makes it more difficult to read and hinders your thought process)
There's a lot more ground to cover but this should be enough to keep you occupied for the next two weeks. Keep asking!
I have an autogenerated layout looking like this created by the jQuery.PrettyTextDiff-plugin:
<head>
<script type="text/jaascript" src="the jquery library"></script>
</head>
<body>
<div class="diff">
<span>
<br/>
</span>
Continuing layout...
</div>
<script type="text/javascript" src="diff_match_patch.js"></script>
<script type="text/javascript" src="jquery.pretty-text-diff.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.diff span:first-child').remove(); // As of my last try
});
</script>
</body>
I wish to remove the first span inside the 'diff'-layout in runtime but I can't get it to work. I've tried several solutions found here at SO after a thorough research.
$('.diff').closest('span').remove();
$('.diff span').first().remove(); //recommended solution by the jQuery Foundation - yet it won't work
$('.diff span').remove();
$('.diff').find('span:gt(0)').remove();
Nothing seems to remove the span. How should I do to remove it?
Try like this…
$('.diff').each(function(){
$(this).find('span').eq(0).remove();
});
The statements you have provided should work:
$(".diff").remove("span");
fiddle
I believe that the code you're talking about is generated dynamically. You need to wait until is rendered and remove the span tags after it.
You could also fix the problem in the plugin itself, or ask the author of the library to fix the issue for you.
Did you wrapp your jQuery code like:
$(document).ready(function () {
$('.diff span').remove();
});
this should work.
UPDATE:
To remove only the first child do:
$('.diff span:first-child').remove();
Fiddle
try with this$(".diff").find("span").html("");
Click here.
Somewhere I saw a rapid comment suggesting that I could use CSS to solve this - so I did. It works as a charm.
.diff span {
display: none;
}
I am trying create a web page with sidr plugin & jquery. When someone click on a list item it will do something like saying which item is it.
I've created a basic html file like:
http://pastebin.com/hc4QyxW6
with calling jquery and sidr library as you can see. My css file is the one provided by sidr.
When I click on the ones on body, no problem. But when I click the items on the sidebar it jquery won't activates the click activity? How can I make the ones in sidebar work? I am looking for a solution for 5 hours. Please help :D
Thank you.
Here is My file
A few tips: your doctype is very old html5 is plainer and suited for jquery. use this:
<!doctype html>
<html>
</html>
secondly all of your css for jquery comes before the script to call jquery.and the script to actually use the jquery should be in the head of your document. if you are using jquery and jquery ui jquery must be listed first or the ui wont work. after that you should be able to link everything with the id's (the #'s withnames). like this:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/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>
<style>
after that the javescript selectors ($document.ready function) or css id's ( #id_name {whatever-style :attribute;} ) get applied to what your want the to by id'ing them in the element you want them used in ( like div id="#demoheader" or div data-role="content" id "demoheader" or whatever.) i hope this helps.
How can I auto click on the link on page load? I have been trying for ages but id does not work.
<link rel="stylesheet" type="text/css" href="leightbox.css" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="leightbox.js"></script>
</head>
<body>
<div class="content">
<p> Click here to activate leightbox popup.</p>
</div>
<!----------// POPUP (ON CLICK) //---------->
<div id="pop02" class="leightbox">
×
<div class="scrollbox">
<h1>This popup loads upon clicking a trigger link.</h1>
text</div>
</div>
</body>
You haven't provided your javascript code, but the usual cause of this type of issue is not waiting till the page is loaded. Remember that most javascript is executed before the DOM is loaded, so code trying to manipulate it won't work.
To run code after the page has finished loading, use the $(document).ready callback:
$(document).ready(function(){
$('#some-id').trigger('click');
});
First i tried with this sample code:
$(document).ready(function(){
$('#upload-file').click();
});
It didn't work for me. Then after, tried with this
$(document).ready(function(){
$('#upload-file')[0].click();
});
No change. At last, tried with this
$(document).ready(function(){
$('#upload-file')[0].click(function(){
});
});
Solved my problem. Helpful for anyone.
$(document).ready(function(){
$('#some-id').trigger('click');
});
did the trick.
$(document).ready(function(){
$('.lbOn').click();
});
Suppose this would work too.
In jQuery you can trigger a click like this:
$('#foo').trigger('click');
More here:
http://api.jquery.com/trigger/
If you want to do the same using prototype, it looks like this:
$('foo').simulate('click');
You are trying to make a popup work maybe? I don't know how to emulate click, maybe you can try to fire click event somehow, but I don't know if it is possible. More than likely such functionality is not implemented, because of security and privacy concerns.
You can use div with position:absolute to emulate popup at the same page. If you insist creating another page, I cannot help you. Maybe somebody else with more experience will add his 15 cents.