I use a click event in jQuery in my windows sidebar project that doesn't work in the sidebar (i don't think it's binded), but it works on a browser (even IE7). Here is a simple example from my project that doesn't work in my sidebar, and I hope somebody can tell me why, because I couldn't figure it out.
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function(){
$('#clickable_div').click(function(){
$('#textContent').append($('<h4 />').text('change'));
});
});
</script>
</head>
<body style="width: 200px; height: 250px; border: 1px solid black;">
<div id="clickable_div" style="width: 50px; height: 50px;border:1px solid black;">Click the div</div>
<div id="textContent"></div>
</body>
</html>
I found a solution for my problem, even if I don't know why it does not work with jQuery's click method.
I used javascript's onclick, and it's working now.
Related
I am learning to build websites and at the moment I am coding in visual-studio code insiders, with most jQuery plugins installed.
When I open this url :
" http://www.completewebdevelopercourse.com/content/4-jquery/4.3.html "
which has identical source code as the code below,
I get two different results.
one, In which the java-script is working (this is the page from the link), and in the other(stored in a local folder and opened inside VScode), it is not.
I have consulted the VS-code website and forums. No luck and my problem is not mentioned at all. Only that there does not seem to be a good plugin for jQuery but snippet-packages, which I have installed.
And normal google-ling gives me all the same results in which people are asking for jQuery plugins as mentioned above
How can this be? And how do I fix it?
[code]
<!DOCTYPE html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
#circle {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: green;
margin: 10px;
}
.square {
width: 150px;
height: 150px;
background-color: red;
margin: 10px;
}
</style>
</head>
<body>
<div id="circle"></div>
<div class="square"></div>
<div class="square"></div>
<script type="text/javascript">
$("div").click(function() {
alert("a div was clicked!");
});
</script>
</body>
Make sure that you downloaded the jquery.min.js file (you should place it in the same folder of the html page), otherwise it would go 404.
I have embeded the following code onto my sharepoint online site. The image appears in the bottom right hand corner and once clicked it takes me to the top of the page, as coded; however the Jquery javascript code doesn't appear to work... The image just stays visible regardless of how many pixels are scrolled.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"><\script>
<script>
$(window).scroll(function() {
if ($(this).scrollTop()>100) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
</script>
<div id="toTop">
<a style="position: fixed; bottom:20px;left:5px;" href="#ctl00_onetidHeadbnnr2" title="Back to Top"><img style="border: none; height: 37.5px; width:50.5px" src="backtotop-1.png" ></a>
</div>
The above code encompasses both suggested solutions and still doesn't appear to work! The image is visible regardless of how much the page is scrolled, yet once clicked the image disappears. The code appears to work completely fine in a plain .html file.
Please help! Thank you very much in advance.
Current Console Error:
Check the jsfiddle link of your code. It works perfectly well. You just need to check the below line if the jquery 1.6.4.min.js:
<script type="text/javascript" src="http://code.jquery.com/jquery 1.6.4.min.js"></script>
This should be the right one: http://code.jquery.com/jquery-3.3.1.js
yeah, its your jquery source. have u seen a "space" in jquery src line, also you forget to close the tag. and for future dont forget to check the browser console for errors.
you can use the following fixed code in your source file.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(window).scroll(function() {
if ($(this).scrollTop()>100) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
</script>
<style>
body{
border: 1px dotted red;
min-height: 1000px;
}
</style>
<div id="toTop">
<a style="position: fixed; bottom:20px;left:5px;" href="#ctl00_onetidHeadbnnr2" title="Back to Top">
<img style="border:1px solid red; height: 37px; width:50px" src="https://i.imgur.com/WkCCy7L.jpg" >
</a>
</div>
let me know if this fixes your error now.
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
height: 250px;
width: 250px;
overflow: auto;
}
#content {
height: 800px;
width: 2000px;
background-color: coral;
}
</style>
</head>
<body>
<p>Scroll inside the div element to display the number of pixels the content of div is scrolled horizontally and vertically.</p>
<div id="myDIV">
<div id="content">Scroll inside me!</div>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener('scroll', function (e) {
alert("scroll");
});
document.getElementById("myDIV").addEventListener('click', function (e) {
alert("click");
});
</script>
Why its not working in IE I played this same code in w3 try it yourself page, it works in IE but not if I tried it as a separate file, so confused. Even if some one downvote this please tell me what I am missing?
I found these things when I browse other answers:
pointing to window.scroll but I need on a particular element
Use overflow-x: scroll; overflow-y: hidden; or vice versa.(which didn't work and also I need scroll on both ways)
NOTE:
This code works clearly in other browsers.
Its my bad. May be helpful for someone like me, Please enable scripting in your IE. :_(
A thing to note here is, Although script is not enabled it w3 school exercises exercises worked because of iframe?. If so how?
This is a bit of a simplification of my code, but I think the example works. Basically, what I want to do is to use jQuery to automatically highlight a selected div-element.
At the moment, the div-element only seems "active" once I hold down on the element (the background becomes orange).
<html>
<head>
<title>Samuels HTML-inlämning!</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js">
</script>
<script type="text/javascript">
$('.test').click(function(){
$('.test').removeClass("active");
$(this).addClass("active");
});
</script>
<style type="text/css">
div.test{
background: grey;
}
div.test:hover{
background: yellow;
}
div.test.active{
background: orange;
}
</style>
</head>
<body>
<div class="test">
Stuff
</div>
<div class="test">
Other stuff
</div>
<div class="test">
More Stuff
</div>
</body>
</html>
Does anyone know why this doesn't work? The complete example works basically the same, but I an ID to select the class to be un-highlighted rather than (.test) all classes. But that code produces the same result.
UPDATE:
Tried making this change in CSS:
div.test.active{
background: orange;
}
Now it doesn't highligt at all however. Did I miss something?
Thats because you are setting the property in your CSS as a pseudo-class, Try this:
div.test.active{
background: orange;
}
You're mixing classes and state selectors. :active is a state (that means you're currently mouse-down on it) while .active is any random class (it could be .xyz). Here's more information on states: http://css-tricks.com/almanac/selectors/a/active/
I'm sure I am missing something obvious and I have checked the other questions regarding this but none seem to have exactly my issue. I am new to Javascript but I'm sure this is a very simple script to implement on a website. If I can get it to work I can edit it from there and see how it works to further enhance it or remove from it.
Here is my code so that you can see exactly how i have it in the .html file
<!DOCTYPE>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="css/nanoscroller.css">
<script rel="text/javascript" src="js/jquery.nanoscroller.min.js"></script>
<style type="text/css">
/* START NanoSlider */
.nano { background: #bba; width: 500px; height: 500px; }
.nano .content { padding: 10px; }
.nano .pane { background: #888; }
.nano .slider { background: #111; }
/* END NanoSlider */
</style>
<script>
$(document).ready(function(){
$(".nano").nanoScroller();
});
</script>
</head>
<body>
<div id="about" class="nano">
<div class="content">
This is the content box and it should be scrolling but it is not!! =/.
</div>
</div>
</body>
</html>
Here is a JSFiddle: http://jsfiddle.net/fcJr3/1/
Maybe I am linking in or refering to required files wrong? or possibly NOT linking in or referring to all the files I am suppose to?
As you can see in the JSFiddle I only get the box. I don't get the scroll bar or any of the effects. Your help is greatly appreciated, thanks!
EDIT: this is the nanoSlider here: http://jamesflorentino.github.io/nanoScrollerJS/
You need to include the jQuery library itself. You can download it or run it straight from the google cdn i.e.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
In your fiddle you need to include jquery using the dropdown top left i.e.
http://jsfiddle.net/fcJr3/2/