I am an absolute beginner in this field. I have written the following code but it's not working. Can someone explain where is the error?
<script type="text/javascript">
$("button").click(function(){
$("div").show("slow");
});
</script>
<button>show</button>
<div style="min-height:300px; min-width:400px; border:10px solid grey; display:none;"></div>
this is a link
You execute the jQuery before the button is there. So at the point jQuery is executed, the button is not existent.
The solution is to use $(document).ready(...).
All elements on a page (HTML) are parsed to the DOM of that page. The DOM is a hierarchical collection of all elements. You can select elements out of it using jQuery.
However, obviously the DOM needs to be fully there before you can select the elements. In your case, you first select the button, and create it afterwards. That does not work. At the time of the selector the button does not exist yet.
Using jQuery's $(document).ready(), you can defer the function containing selectors until the DOM is fully loaded and parsed - at which time the selector works because the elements are there.
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function(){
$("div").show("slow");
});
});
</script>
<button>show</button>
<div style= "min-height:300px; min-width:400px; border:10px solid grey; display:none;"></div>
this is a link
You may be trying to listen for the click event before the button exists. Try waiting for the page contents to load:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function(){
$("div").show("slow");
});
});
</script>
<button>show</button>
<div style= "min-height:300px; min-width:400px; border:10px solid grey; display:none;"></div>
this is a link
As you can see from the fiddle here http://jsfiddle.net/bQUFE/ your code works (the div is shown when you click)
If you don't have this result always check:
1)that you loaded jquery before your script
2)Always use $(document).ready() like this:
$(document).ready(function(){
$("button").click(function(){
$("div").show("slow");
});
});
the javascript is executed before the document has loaded, so the click-handler can't be attached to the button. to avoid this, wrap your code into a domready-function like this:
$(document).ready(function() {
$("button").click(function(){
$("div").show("slow");
});
}
It probably is working but as your <div></div> is empty you might notice it.
Also make sure you only run your JQuery script AFTER the div has been added to your HTML.
May I also suggest to use better identifiers, because you might eventually have many div's and buttons on your page.
Example:
<button id="btn1">Click me</button>
<div id="hidden_div" style="display: none">
Hello there!
</div>
<script type="text/javascript">
$('button#btn1').click(function() {
$('div#hidden_div').show('slow');
});
</script>
You code runs before the button is created so it cannot bind the event.
So you need to put your code in the document.ready event. In jQuery this is handled by $(document).ready(handler) or $(handler).
Documentation at http://api.jquery.com/ready/
Fix to your code to make it work
$(function(){
$("button").click(function(){
$("div").show("slow");
});
});
demo at http://jsfiddle.net/gaby/vkrzt/
you need to give your elements "id"
so:
<button id="mybutton"></button>
and
<div id="mydiv"></div>
Then you'll use $("#mybutton") or $("#mydiv") to call these
Related
I have the following function:
$(document).ready(function(){
$('section').mouseenter(function(){
var id = $(this).attr('id');
$('a').removeClass('colorAdded');
$("[href=#"+id+"]").addClass('colorAdded');
});
});
For some reason, the mouseenter function does not seem to be working. When the mouse scrolls over one of the sections (which have the section tag), the corresponding link (which have the a tag) in the top right corner should gain a green background color. However, it is unresponsive.
You just need to change your JS to:
$(document).ready(function(){
$('section').mouseenter(function(){
var id = $(this).attr('id');
$('a').removeClass('colorAdded');
$("a[href='#"+id+"']").addClass('colorAdded');
});
});
It was an issue with not including quotations in selecting the a tag with the href targeting.
I'm actually don't know why your codepen example is not working, I didn't look into your code carefully, but I tried to create simple code like bellow and it worked.
the thing you probably should care about is how you import JQuery into your page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
hopefully this following codes can help you.
$(document).ready(function(){
$('button').mouseenter( function() {
console.log('hahaha');
})
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="test">
<button class="test-button" > test button </button>
</div>
</body>
</html>
Trying to change the class of an item with jQuery, but I can't seem to make it work. For some reason, nothing at all is happening.
Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$("#theSpinner").click(function() {
$("#theSpinner").toggleClass("spinning");
});
</script>
<a href="#" id="reload">
<img src="spinbut.png" style="width:100px;height:100px;" id="theSpinner" class="notspinning">
</a>
I've tried with:
$("#theSpinner").click(function() {
$("#theSpinner").removeClass("notspinning");
$("#theSpinner").addClass("spinning");
});
aswell as $("#reload") instead of $("#theSpinner"), and with an onClick="" to a javascript function containing the addClass / removeClass part.
I really don't know what's the problem, but any way around this bull would make me very happy.
Try wrapping your jQuery code within a "document-ready" block to ensure that jQuery has been loaded prior to calling your function :
<script>
// Example of a document ready function
$(function(){
// When jQuery has loaded, wire up this function
$("#theSpinner").click(function() {
$(this).toggleClass("spinning");
});
});
</script>
Example
You can see a working example of this in action here and demonstrated below :
Here you go
<img src="spinbut.png" style="width:100px;height:100px;" id="theSpinner" class="notspinning">
<script type="text/javascript">
$("#theSpinner").click(function() {
$(this).toggleClass("notspinning spinning");
});
</script>
<div class="show_hide panel-header" rel="#panel">
<h4>Disclaimer</h4>
</div>
<div id="panel" class="panel">
<p>Lorem ipsum</p>
</div>
Above is my HTML ... a simple div for the header (event handler) and the hidden div to show/hide. Works perfectly for a simple show/hide, but I may have several panels on screen at once and I don't want to explicitly ID each one and give it it's own function. How can I use the this selector to achieve dynamic interactions?
My JQuery currently:
<script type="text/javascript">
$(document).ready(function(){
$(".panel").hide();
$(".show_hide").show(); //Probably don't need this line...
$('.show_hide').click(function(){
$(this).children("div").slideToggle();
});
});
</script>
Any help is appreciated. I'm new to JS/JQuery and having some trouble understanding the different selectors. Thanks!
Your div isn't a child, it's the next div in line:
$(this).next("div.panel").slideToggle();
you can try this
<script type="text/javascript">
$(document).ready(function(){
$(".panel").hide();
$('.show_hide').click(function(){
$(this).next(".panel").slideToggle();
});
});
</script>
I have this code :
HTML
Show Agency
<div id="invisibleDiv">
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/CompanyProfile" data-id="1035" data-format="inline" data-related="false"></script>
</div>
jQuery
$("#showDiv").click(function () {
$("#invisibleDiv").show();
});
CSS
#invisibleDiv
{
display:none;
}
When I load the page, I see the scripts loaded from external source, also if the div is hidden. The scripts call with some API and generate HTML/Javascript.
Well, what I'm looking for is to force the script to be unloaded if the parent is hidden; than, when I'll show it (through the link), load the script inside the div.
How can I do it? I'll avoid AJAX.
UPDATED:
DEMO: http://jsfiddle.net/HqeD2/
Show Agency
<div id="invisibleDiv">
<script type="IN/CompanyProfile" data-id="1035" data-format="inline" data-related="false"></script>
</div>
$(function() {
$("#showDiv").click(function() {
$.getScript("http://platform.linkedin.com/in.js");
});
});
If I understand it correctly, you just want to delay the running of arbitrary scripts that are provided by the third party? Would something like this work?
<div id="invisibleDiv" style="display:none">Please wait while we load some stuff from Facebook...</div>
$("#showDiv").click(function(){
$("#invisibleDiv").show().load("http://facebook.com/whatever/andStuff");
});
Has the downside that you can't pre-fetch the HTML content, but I don't see any other way.
EDIT: ok, it looks like you edited the question whle I was typing this up... so YOU control the content of invisibleDiv, but you want to delay the loading of in.js? try this...
$("#showDiv").click(function(){
$("#pleaseWaitDiv").show();
$.getScript("http://platform.linkedin.com/in.js", function(){
$("#pleaseWaitDiv").hide();
$("#invisibleDiv").show();
});
});
Again, you have to make the user wait while the script downloads, hence my addition of pleaseWaitDiv
More edit:
New up a script node and append it.
var scriptNode = $("<script></script>")
.attr("type","IN/CompanyProfile")
.attr("data-id","1035")
.attr("data-format","inline")
.attr("data-related","false");
$("#invisibleDiv").append(scriptNode);
$.getScript("http://platform.linkedin.com/in.js", function(){
$("#pleaseWaitDiv").hide();
$("#invisibleDiv").show();
});
You can bind it to your showDiv click function, inline scripts are processed right away...the only other thing I can think of is to have the script be loaded via ajax which you don't want.
Try this :
http://jsfiddle.net/sXJa6/6/
Is it possible to copy javascript with javascript? For example:
<div class="copyThis">
<script language="javascript">
$(function()
{
$("#click").click(function(e){
$('.copyThis').clone().appendTo('#copyArea');
e.preventDefault();
});
});
</script>
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
<div style="width: 200px; height: 50px; background-color: gray;">
<a id="click" href="">click here to copy</a>
</div>
<div id="copyArea">
Put here:
</div>
</div>
But this doesn't copy the tag and its content. At least, not that I know of.
NOTE:
I came upon this question in relationship to a different question I had posted here: Infinite-loop question: Is it possible to make a "Copy this code to share", with a "copy this code to share" inside of it?
I hope it's ok to post this question separately as it's sort of a curiosity thing.
EDIT: I think this is what you want. This (demo) will fill a textarea for easy copying:
<div id="copyThis">
<script language="javascript">
$(function()
{
$("#click").click(function(e){
$('#copyArea').val($('#copyThis').html());
e.preventDefault();
});
});
</script>
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
<div style="width: 200px; height: 50px; background-color: gray;">
<a id="click" href="">click here to copy</a>
</div>
<textarea rows="10" cols="40" id="copyArea"></textarea>
</div>
You were doing DOM manipulation before ready. Use:
<script language="javascript">
$(function()
{
$("#click").click(function(e){
$('#copyThis').clone().appendTo('#copyArea');
e.preventDefault();
});
});
</script>
See the demo.
I think in a round about way what your trying to do is covered by jquery's live methods.
<div class="copy">
<a class="click-me">click me</click>
</div>
<script type="text/javascript">
$('.click-me').live('click',function(e){
$(e).parent().clone().appendTo('#copyArea');
})
</script>
Using Live will re-bind the new element to the click handler without having to copy a javascript block
If you want the click event to be cloned also, you need to set the withDataAndEvents argument to true in clone
$('.copyThis').clone(true).appendTo('#copyArea');
Note: this answer is to a question different from the one actually asked :-) I'll leave it here as a historical curiosity however.
The problem is very likely to be that your <script> tags are just not being executed. If what you want to happen is that your cloned <div> have the same "click" handler, however, you should really go about it in a totally different way:
Use a "class" instead of an "id" to mark the <div> elements that should be affected; say, "cloneMe"
Use the jQuery .live() or (better) .delegate() facilities to set up the handler so that it operates off of bubbled events, and can therefore handle clicks on cloned <div> blocks.
(then in your Javascript somewhere: )
$(function() {
$('body').delegate("div.cloneMe", "click", function(ev) {
$(this).clone().appendTo('#copyArea');
ev.preventDefault();
});
});
Now you should be able to clone to your heart's content, and you don't have to worry about that bad old Javascript jammed so obtrusively into your code.
edit — ah - I now see that I was completely confused about what it was that was getting clicked. If the clicking is happening on a separate button (or <a> or whatever), then there's really no need to have the script stuck in the middle of the page at all; the whole thing should just be a simple event handler setup.