I can't hide my div using some i.e. explode effect in jquery ui, It always slides down (or something like that), whatever effect I put as parameter in my code.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/1.8rc3/ui/jquery-ui.js"></script>
$(document).ready(function(){
$('.rozwin').click(function(){
$('#main').hide('explode');
$('#main').show('explode');
});
<a href="" class="rozwin>hide and show</a>
<div id='main'>...</div>
There's quite a bit wrong with this code.
This script src is missing the http:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/1.8rc3/ui/jquery-ui.js"></script>
You do not start your javascript with a <script type="text/javascript">, so all of your jQuery is interpreted as plain text.
$(document).ready(function(){
You are not preventing the default action of the click.
$('.rozwin').click(function(){
$('#main').hide('explode');
$('#main').show('explode');
});
You do not enclose your .ready()...
Your anchor tag's class has no closing quote.
<a href="" class="rozwin>hide and show</a>
<div id='main'>...</div>
Here's the snippet with all the fixes it needs.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc3/ui/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.rozwin').click(function(e){
e.preventDefault();
$('#main').hide('explode');
$('#main').show('explode');
});
});
</script>
hide and show
<div id='main'>...</div>
Keep in mind that your show events won't work as expected because they're triggering too quickly, since you're not using it in the callback of .hide().
http://jsfiddle.net/zq2Hz/
first line missed http:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
and missed the end of $(document).ready(function(){
$(document).ready(function(){
$('.rozwin').click(function(){
$('#main').hide('explode');
$('#main').show('explode');
});
}); //at the end
you missed closing braces and close quotes for class
$(document).ready(function(){
$('.rozwin').click(function(){
$('#main').hide('explode');
$('#main').show('explode');
});
});
hide and show
Related
Okay... obviously this is because I am so new. I don't understand why this does not work. I thought this is because the argument its not inside a function but I don't really know.
<head>
<title>Documento sin tÃtulo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
$(function(){
$("p").hide();
});
</script>
</head>
<body>
<p>hi</p>
</body>
It should look like this:
<script src="jquery.js"></script>
<script>
$(function() {
$('p').hide();
});
</script>
First you must load the external Javascript file (like jquery.js) in its own script tags. Then you include your Javascript (or jQuery for this case) in its own script tags.
Your code works!
However, you need to load the JS file first. The function to hide the p should be in its own <script> tag (different one from loading the script)
$(function() {
$("p").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<p>hi</p>
<div>world!</div>
I'm trying to figure out why my jQuery isn't working. I've got jQuery linked to, and then after that, I try to bind to the textarea content. I've used name=content and name=#content both.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$('input[name=content]').bind('keyup',function(){
$('#desctag').val($(this).length)
});
</script>
Why isn't it working?
Code is now:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[name=#content]').bind('keyup',function(){
$('#desctag').val($(this).length)
})})
</script>
You need to put it in a document.ready function so it executes when the DOM is ready.
$(document).ready(function() {
$('input[name=content]').bind('keyup',function(){
$('#desctag').val($(this).length);
});
});
I'm playing around with Twitter Bootstrap's Tooltips, but am having problems since they moved away from Twipsy. The correect JavaScript is included in the page.
Let's say I have the following:
<p>hover on me</p>
What is the exact JavaScript I need to use to make the tooltip appear?
Thanks in advance!
Vanessa
You need to explicitly run .tooltip() for all elements that have to have tooltip. For example, this will work:
<span rel="tooltip" title="tooltip text">some text</span>
...
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("[rel=tooltip]").tooltip();
});
</script>
For your example it will just be:
$('a').tooltip();
but according to the documentation, you should use the title attribute, not data-original-title. That attribute is added by Bootstrap's tooltip code. Also there is no need for rel="tooltip".
Your code should be:
HTML:
hover on me
JS:
$("a").tooltip(); // this will trigger a tooltip on all <a> elements
In Bootstrap, We need to manually initialize Tooltips
its mentioned in their Documentation also.
<script type="text/javascript">
$(function () {
$("[data-toggle='tooltip']").tooltip();
});</script>
you need exactly to
<script src="bootstrap-tooltip.js "></script>
<script>
$(function (){
$('a').tooltip();
});
I do something like this:
$("#id1").html(data);
I refill a div with html but when I try to get the html of a child of this refilled div I get an empty string although it has, it's like the old child is still there but without html.
Edit:
I tried to reproduce my problem, here is the html: (click 2x times on refill and after click open you will see that nothing is going to happen)
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/dot-luv/jquery-ui.css"/>
</head>
<body>
<script type="text/javascript">
$(function(){
$("#r1").click(function(){
var x = $("#main").html();
$("#main").html(x);
});
});
</script>
refill
<div id="main">
<a id="a1" href="#" >open</a>
<script type="text/javascript">
$(function(){
$("#a1").click(function(){$("#forDialog").dialog();});
$("#a2").click(function(){$("#forDialog").dialog('close');});
});
</script>
<div id="forDialog">
hi
<a id="a2" href="#" >close</a>
</div>
</div>
</body>
</html>
I'm generating this javascript dynamically so the scripts that register a1.click and a2.click need to be inside the main div
I'm not quite sure as to the exact goal of your code, but I can make 3 general suggesions:
Use .delegate() to attach to once and future elements.
You can .hide() the HTML for you dialog box.
You can prevent the page from refreshing when a link is clicked using event.preventDefault(); in the click handler of that link.
Applying those suggestions to your code results in the following working code:
<script type="text/javascript">
$("body").delegate("#a1", "click", function(){
$("#forDialog").dialog();
});
$("body").delegate("#a2", "click", function(){
$("#forDialog").dialog('close');
});
$(function(){
// Hide HTML for the dialog.
$("#forDialog").hide();
$("#r1").click(function(event){
var x = $("#main").html();
$("#main").html(x);
// If you don't want the page to refresh by clicking
// on this A element, use the following:
event.preventDefault();
});
});
</script>
refill
<div id="main">
<a id="a1" href="#" >open</a>
<div id="forDialog">
hi
<a id="a2" href="#" >close</a>
</div>
</div>
jsFiddle example
The old sub-DOM under the element will be gone after you reset its content with .html(stuff). It may exist floating around in memory somewhere, but it's detached from the DOM and you can't get at it.
The following jQuery example should put some text into the div, but it doesn't. I tried Firefox, Google Chrome and Internet Explorer.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" language="javascript"></script>
<script language="javascript">
$(window).load(function() {
$('adiv').html('<p>hello world</p>');
alert('done');
});
</script>
</head>
<body>
<div id="adiv">
</div>
</body>
</html>
Sorry, this might be stupid, but I'm stuck.
change $('adiv').html('<p>hello world</p>');to
$('#adiv').html('<p>hello world</p>');
You're not actually selecting anything in your select function
Directly after your $( opening, you need to use a CSS3 valid selector. Just a string won't select anything unless it's a HTML element (table, div, h2)
You need to preface it with a . or a # to signal either a class or ID name.
$('adiv') should be $('#adiv').
Unlike Prototype, in jQuery you specify a CSS selector, not just a string that is implicitly inferred to be an ID. I find myself forgetting this from time to time.
As e-turhan already mentioned you need # in front of adiv in your $() otherwise this is not a id selector. Also it's always better to call these .load() events inside the .ready() jQuery event whose famous shortcut is $(function() { //execute when DOM is ready }); . In your case:
$(function(){
$(window).load(
function(){
$('#adiv').html('<p>hello world</p>');
}
);
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" language="javascript"></script> <script language="javascript"> $(window).load(function() { $('#adiv').html('<p>hello world</p>'); alert('done'); }); </script> </head> <body> <div id="adiv"> </div> </body> </html>
Paste this code instead ur query
It Will Work
Try $(document).ready(function()... instead of $(window).load(function()...