I need help converting a Jquery code into a javascript code where it changes the border radius of a div when hovering over it.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="SampleQ3.css" />
</head>
<body>
<div>
<h4>Pasta</h4>
</div>
<script src="SampleJavaScript.js"></script>
</body>
</html>
JS
$(document).ready(function () {
$("div").hover(function () {
$(this).css("border-radius", "0%");
}, function () {
$(this).css("border-radius", "200px 200px 200px 200px");
});
});
You can do all of that only using css, but I will provide both solution js and css.
javascript code:
let divs = document.getElementsByTagName("div");
for(div of divs) {
div.addEventListener("mouseenter", function( event ) {
event.target.style.borderRadius = 0%;
}, false);
div.addEventListener("mouseover", function( event ) {
event.target.style.borderRadius = '200px';
}, false);
}
To do the same with css you can add a class to make it easer to target.
// css
<style>
.div-round {
border-radius: 200px;
}
.div-round:hover {
border-radius: 0%;
}
</style>
//add class to div
<div class='div-round'>...</div>
Related
Is it possible to catch an event from the window after HTML is loaded, but before the actual painting happens? Or to access DOM nodes prior to painting to the screen? I'd like to change the style of an element before painting to avoid a visual flicker.
This is the closest I've gotten, but if you refresh the page, you can see the box for a split second before the height change is applied.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#container {
width: 200px;
height: 200px;
border: solid;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
window.addEventListener("DOMContentLoaded", () => {
document.getElementById("container").style.height = 0;
});
</script>
</body>
</html>
If you didn't want to mess with the CSS you could create the element with Javascript and synchronously add it in.
window.addEventListener("DOMContentLoaded", () => {
let container = document.createElement("div");
container.id = "container";
container.style.height = 0;
document.body.appendChild(container);
});
So I wanted to make a webpage in which on button click, the background color changes.
Its showing TypeError on loading in browser but its working fine after pasting same JavaScript on console.
Code snippet
var colors = ["#0af5fa", "#0ab1fa", "#0a3efa", "#560afa", "#b70afa", "#fa0ad9", "#fa0a65", "#fa0a1e", "#fa5e0a", "#facc0a", "#cbfa0a", "#69fa0a", "#0afa1b", "#0afa77", "#0afae5", "#0a8efa"];
var flag = 0,
blinkCount = 0;
function blink() {
if (blinkCount == 15) {
blinkCount = 0;
blink();
} else {
var h1 = document.querySelector("h1");
var body = document.querySelector("body");
h1.style.color = colors[blinkCount];
body.style.background = colors[blinkCount];
blinkCount++;
}
}
var button = document.querySelector("button");
button.addEventListener("click", blink);
button {
width: 50%;
height: 100px;
background: black;
margin-top: 300px;
margin-left: 300px;
}
h1 {
color: #0af5fa;
}
body {
background: #0af5fa;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<script src="../JavaScript/ex153.js"></script>
<link href="../css/ex153.css" rel="stylesheet">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="">
<button><h1>Click Me</h1></button>
</div>
</body>
</html>
In Browser [Error]
TypeError: button is null[Learn More] ex153.js:25:1
You're running the script before the document has been fully parsed - see how the <script> is above the <body> and its <button>?
Either give the script tag the defer attribute:
<script defer src="..
Or move it to the bottom of the body:
</div>
<script src="../JavaScript/ex153.js"></script>
</body>
</html>
Or wrap the whole script in a DOMContentLoaded listener:
document.addEventListener('DOMContentLoaded', function() {
var colors;
// other code
});
I'm trying to use javascript to toggle the size of a div. In order to understand the basic idea of how to do this I tried replicating this example: Toggling Div (JSFiddle)
But for some reason it is not working, despite me having copied it from the working JSFiddle. Why is that? Here is my replicate:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style type="text/css">#topbar {
background: orange;
color: white;
height: 10px;
text-align:center;
}</style>
<script type="text/javascript">
$("#topbar").click((function() {
var i = 0;
return function() {
$(this).animate({
height: (++i % 2) ? 40 : 10
}, 200);
}
})());
</script>
</head>
<body>
<div id='topbar'>toggle me</div>
</body>
</html>
Wow! You haven't added jQuery at all! Add this in your <head> before you call the script.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You must have got this error in the console:
Reference Error: $ not defined.
You are using this not in context. When you put it inside a function, then it gets screwed up. Do it this way:
$(function () {
$("#topbar").click(function () {
var i = 0;
$(this).animate({
height: (++i % 2) ? 40 : 10
}, 200);
return false;
});
});
The this you used, will be taking your inner function as its context. And since your <div> comes after the <script>, please enclose it inside the $(function () {}).
Here's a sample gallery:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Slideshow</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#large {width:448px; height:336px; background:#000 url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg) no-repeat center;}
#thumbs {padding-top:12px; overflow:auto; white-space:nowrap; width:448px;}
img {padding:1px; width:80px; height:60px;}
img:hover {background:#00F;}
</style>
</head>
<body>
<div id="large"></div>
<div id="thumbs">
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg)';">
<img src="http://lh3.googleusercontent.com/-JU5a-eDnOSg/Thc7g5UkwLI/AAAAAAAAABI/9aCyCMixWb4/s800/thumb2.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg)';">
<img src="http://lh4.googleusercontent.com/-TdbbNGFbDNk/Thc7g0IBSsI/AAAAAAAAABM/pxpntZaTVoQ/s800/thumb3.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg)';">
</div>
</body>
</html>
I wonder how I can highlight the active thumbnail so its background remains blue until I click another one.
Thanks in advance!
Mike
Here's a simple solution in pure JavaScript that is in tune with what you're already doing:
http://jsfiddle.net/drNqx/3/
Add this simple function in the <head> of the document:
<script type="text/javascript">
function reset()
{
var imgs = document.getElementsByTagName('img');
for(var i = 0; i < imgs.length; i++)
{
imgs[i].style.backgroundColor = '#fff';
}
}
</script>
The place this in front of what you already have in the onclick for each thumbnail image:
reset();this.style.backgroundColor='#00f';
To highlight the first thumbnail as the default, add this below the reset() function:
function init()
{
document.getElementById('img1').style.backgroundColor='#00F';
}
window.onload = init;
Here is the working fiddle:
http://jsfiddle.net/DEn6r/2/
Jquery code to add:
$('img').click(function() {
$('img').not(this).removeClass('active');
$(this).addClass('active');
});
CSS to add:
img.active{background:#00f;}
/* You need to add class to active thumb image using Jquery . make sure to add jquery path*/
$(document).ready(function(e){
$("#thumbs img").click(function(){
$("#thumbs img").removeClass("selected");/* this will remove selected class from all images*/
$(this).addClass("selected"); /* this will add 'selected' class to particular image where you clicked */
});
});
in css you can give whatever style you want to give using css
<style>
#thumbs img.selected
{
border:2px solid blue;
background-color:#eee;
}
#thumbs img
{
padding:5px;
}
</style>
basically I'm trying to get #toggle_box to slide down using Jquery, the code below works if I'm just using document.body as the selector however it doesn't seem to work when #toggle is the selector! Any ideas why?
<html>
<head>
<title>JQuery Testage</title>
<style>
#toggle_box {
display: none;
}
#toggle {
background-color: #FFF000;
border: solid;
}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$("#toggle").click(function () {
if ($("#toggle_box").is(":hidden")) {
$("#toggle_box").slideDown("slow");
} else {
$("#toggle_box").hide();
}
});
</script>
<div id="toggle">Toggle</div>
<div id="toggle_box">This should silde using the Jquery library 1.4.2</div>
</body>
</html>
Give the click handler a $(document).ready(... wrap, and it should work:
$(document).ready(function() {
// your click handler and anything else that
// should run when the DOM is ready
});
Modify your code thus:
<script type="text/javascript">
$(document).ready(function() {
$("#toggle").click(function () {
if ($("#toggle_box").is(":hidden")) {
$("#toggle_box").slideDown("slow");
} else {
$("#toggle_box").hide();
}
});
});
</script>
The problem is that the javascript is loaded and executed before the toggle_box element is loaded. It works for the document body as that is loaded before the javascript.
Could it be because the DOM isn't ready yet?
Try wrapping your script in the following piece of code:
$(function() {
// your code here
});
That's a short code for $(document).ready(function(){ ...}); and may just be what's missing?