Here is the css code :
.big-square {
position:relative;
height:768px;
width:768px;
border:1px solid black;
background-color:#007da9;
text-align:center;
display:table-cell;
-webkit-transition:all 0.3s linear;
}
and here the html:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css">
<script>
function showmenu() {
$(document).ready(function() {
$("#big-square").removeClass("big-square");
});
}
</script>
</head>
<body>
<div id="big-square" onclick="showmenu();" class="big-square">1</div>
<div id="big-square" onclick="showmenu();" class="big-square">2</div>
The problem is when I click on anyone of square, just the first dissapear and I want to make it dissapear separately. For example, if I click on the 2nd square, just the second squuare dissapear.
id must be unique in the whole DOM. (and the relevant functions return only the first one)
What you want is
$(document).ready(function() {
$(".big-square").on('click', function() {
$(this).removeClass("big-square");
});
});
.big-square {
position: relative;
height: 768px;
width: 768px;
border: 1px solid black;
background-color: #007da9;
text-align: center;
display: table-cell;
-webkit-transition: all 0.3s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="big-square">1</div>
<div class="big-square">2</div>
It is illegal HTML to have id's not be unique. Use a class instead if you plan to have 2 or more elements of similar 'stuff'. Then, you shouldn't nest the ready statement in a function. Next, you shouldn't use onclick, instead opting to listen to the event click. Additionally, the css .class does not match an id of your html. Finally to target 1 item only, I would use the jQuery object $(this).
So, all that said, I would re-write your code as:
<script>
$(document).ready(function() {
$(".big-square").click(function() {
$(this).removeClass("big-square");
});
});
</script>
</head>
<body>
<div class="big-square" id="square1">1</div>
<div class="big-square" id="square2">2</div>
That's newbie coding. Let's try to fix it:
1 - Different id's for each element (as user Vic pointed out already)
2 - $(document).ready doesn't need to be nested
3 - onclick="showmenu();" is completely unnecesary and including scripts in the html is bad practice in modern web development
I won't post any code because I see you already have answers with code :)
Related
Basically what I want to do is adding the .ani class to the clicked element and removing the .ani from all, but I also need to remove the .ani from the element which already have it on second click.
As you can see the regular add and removing is working fine but I can not remove the .ani on existing element. How can I fix this?
$(".list").on('click', function() {
$('.list').removeClass("ani");
if ($(this).hasClass('ani')) {
$(this).toggleClass("ani");
} else {
$(this).addClass("ani");
}
});
.list {
height: 60px;
width: 160px;
background: yellow;
margin: 4px;
cursor: pointer;
}
.ani {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
It looks like you are over complicating this task. Take a look at the code below (posting only the JS as HTML and CSS are the same):
$(".list").on('click', function() {
$(this).toggleClass("ani").siblings().removeClass("ani");
});
A breakdown of what this does:
use toggleClass on the item clicked to add remove the class on the
item
get all siblings of the clicked item and remove the class from them
How this works:
The bit of code in the example above uses something called method chaining where you execute multiple methods on the same jQuery Object. This is possible because most jQuery methods return a jQuery Object, post-execution. This makes it easier and faster to run a bunch of operations on the same set of elements. One thing that you need to be mindful about when chaining is the sequence of method calls - changing the order of methods that you use may result in adverse effects (i.e: most traversal methods in jQuery returns a different set of elements).
Fiddle: http://jsfiddle.net/darshanags/kz2wdo09/
Check this one. Just update onclick method. All other code is the same. I posted one is single line code and one if-else code which is commented. You can use which one is more comfortable for you. You are first removing ani class that was a bug in your code.
$(".list").on('click', function() {
$(this).toggleClass("ani").siblings().removeClass("ani");
/*if($(this).hasClass("ani")){
$(".list").removeClass("ani");
} else {
$(".list").removeClass("ani");
$(this).addClass("ani");
}*/
});
.list {
height: 60px;
width: 160px;
background: yellow;
margin: 4px;
cursor: pointer;
}
.ani {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
In this code:
$(".list").on('click', function() {
$('.list').removeClass("ani");
if ($(this).hasClass('ani')) {
$(this).toggleClass("ani");
} else {
$(this).addClass("ani");
}
});
You're removing the class of every .list element, therefore the $(this).hasClass('ani') will always be false (you just removed the ani class of every single .list element, including the clicked one), so the line $(this).addClass("ani") will always be executed.
The solution is simple. Check if the clicked element has the ani class and if so, remove it, otherwise add it:
$(".list").on('click', function() {
if ($(this).hasClass('ani')) {
$(this).removeClass("ani");
}
else {
$('.list').removeClass("ani");
$(this).addClass("ani");
}
});
you want to remove class ani on all the elements except the clicked one. You can use not()
$(".list").on('click', function(evt) {
$(".list").not($(evt.currentTarget)).removeClass("ani");
$(evt.currentTarget).toggleClass("ani");
});
.list {
height: 60px;
width: 160px;
background: yellow;
margin: 4px;
cursor: pointer;
}
.ani {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
This question already has answers here:
jQuery not working with my HTML at all?
(3 answers)
Closed 4 years ago.
This code to append to a to-do list works in the editor in a Codecademy tutorial, but using the same code in CodePen, nothing happens when I type text into the form box and hit submit (whereas in Codecademy, the entered text is added below the form box). It's not just an issue with CodePen, either; the same thing happened after entering it into Atom.
To see how it works you can view my CodePen, but I'll also enter the code used below for convenience.
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>To Do</title>
<link rel="stylesheet" href="stylesheet.css"/>
<script src="script.js"></script>
</head>
<body>
<h2>To Do</h2>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div class="button">Add</div>
<br>
<div class="list"></div>
</body>
</html>
And the JavaScript:
$(function() {
$('.button').click(function() {
let toAdd = $('input[name=checkListItem]').val();
// inserts specified element as last child of target element
$('.list').append('<div class="item">' + toAdd + '</div>');
});
$(document).on('click', '.item', function() {
$(this).remove();
});
});
Why the discrepancy? Is something wrong with the code?
You need to enable jQuery. Also, if you want to clear the input field after adding a new item you can do this:
$('input[name=checkListItem]').val('');
Here's a working solution!
$(function() {
$('.button').click(function() {
let toAdd = $('input[name=checkListItem]').val();
console.log(toAdd);
// inserts specified element as last child of target element
$('.list').append('<div class="item">' + toAdd + '</div>');
$('input[name=checkListItem]').val('');
});
$(document).on('click', '.item', function() {
$(this).remove();
});
});
h2 {
font-family: Helvetica;
color: grey;
}
form {
/* needed for the same property/value to work to display the button next to form */
display: inline-block;
}
input[type=text] {
border: 1px solid #ccc;
height: 1.6em;
width: 15em;
}
.button {
/* makes button display next to form */
display: inline-block;
vertical-align: middle;
box-shadow: inset 0px 1px 0 0 #fff;
/* starts at top, transitions from left to right */
background: linear-gradient(#f9f9f9 5%, #e9e9e9 100%);
border: 1px solid #ccc;
color: #666;
background-color: #c00;
font-size: 0.7em;
font-family: Arial;
font-weight: bold;
border-radius: 0.33em;
/* padding is space between element's content and border. First value sets top and bottom padding; second value sets right and left */
padding: 0.5em 0.9em;
text-shadow: 0 1px #fff;
text-align: center;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>To Do</h2>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div class="button">Add</div>
<br>
<div class="list"></div>
Uncaught ReferenceError: $ is not defined
at pen.js:1
Blockquote
Hey, Its always advisable to look at browser console to check what the error is. 60% of your problems will be solved by just looking at console. and next 40 % be be solved by debugging the javascript code using chrome browser. This is the error that is thrown along with other few errors. It means that you have not included Jquery library in your html. Please import it using this cdn link
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
or as mention by Andrey Petrov
You have to add jQuery support to your CodePen snippet. Click on "settings" in JavaScript window, then pick "jQuery" from "Quick-add" dropdown in the bottom of "Pen Settings" window.
You will have to link to jQuery dependency manually so your code can work flawless outside sandboxes like Codeacademy, CodePen, JSFiddle etc.
Here is how to use jQuery from CDN: http://jquery.com/download/#using-jquery-with-a-cdn
Basically, you will end up adding something like this:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
before the <script src="script.js"></script> line.
I have a situation where I need to apply Styles on a POPUP based on if "Opener window" of that POP has a style class defined on it.
<html>
<body class="myClass">
<input type="button" onClick="Open('xyz.html')"/>
</body>
</html>
Now on xyz.html I want to have a CSS selector which can toggle some style based on if parent.html has class="myClass".
Is it possible without Jquery?
If not: what alternatives I have for this including Jquery and Javascript?
Please note: parent.html is opening xyz.html they are both separate windows.
You don't need to use jQuery to check it. You can make use of simple CSS for it. Check the code below. Here, if container has the class my-class. The property of background-color will be applied to the popup. Otherwise, it won't. Check the code and try using the same with and without the my-class in the container.
$('button').on('click', function() {
$('.popup').toggleClass('active')
})
.popup {
padding: 10px;
border: 1px solid #ddd;
opacity: 0;
transition: all 0.8s ease;
}
.popup.active {
opacity: 1;
}
.container.my-class .popup {
background-color: red;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container my-class">
<button>Click</button>
<div class="popup"> HAI </div>
</div>
I'm trying to accomplish something as simple as putting to div's side by side. The thing is I'm very capable in CSS, however the solutions I'm trying to use do not work as intended, here is the problem.
I'ved used: (so both divs is laying side by side)
display: block; float: left; margin-right: 15px;
And it work flawlessly LOCALLY, the thing is I'm creating this as a template solution which the html & css are being build into a system and after that will be generated to a javascript tag. The javascript tag will then be thrown into different websites and therefore, it's very important it acts alike in all browsers.
Then i tryed position the div (the one laying on the side) to: absolute and using left to position it on the side... That don't work either because its absolute to where the tag is implemented, meaning it would show up different places depending which site the tag is implemented.
So my question is, is there a way i can use either css or javascript so my divs are side by side no matter where i implement the tag?
Below is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Sidekick</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/sidekick.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="eas_sidekick_divs">
<div id="eas_sidekick">
<div class="eas_sidekick_open">x</div>
</div>
<div id="eas_sidekick_container"></div>
</div>
</body>
</html>
CSS:
.eas_sidekick_divs div
{
display: block;
float: left;
margin-right:15px;
}
#eas_sidekick
{
width:300px;
height:600px;
background: #ccc;
}
#eas_sidekick_container
{
width: 850px;
height:600px;
background: #ccc;
}
This solution works locally as said, but not after i generate this to a tag. You can see the example here:
http://yoursource.eu/stuff/Templates/sidekick/300x250/javascript.html
Look in the different browsers like: IE & Chrome and see the difference and how weird it acts.
Click on the button of the little banner to the right stating: "exiting me" and you'll see the div expand, the expanded div is the one i want to position to right at all times.
Hope u can help me out! :)
You can use display:inline-block; or display:block; both will work but as you mention "#eas_sidekick_container" width should be equal or should not exceed with parent Element width please correct "#eas_sidekick_container" width.
Here is the corrected code
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.eas_sidekick_divs div
{
float: left;
margin-right:15px;
}
#eas_sidekick
{
width:300px;
height:600px;
background: #ccc;
}
#eas_sidekick_container
{
width: 300px;
height:600px;
background: #ccc;
}
</style>
</head>
<body>
<div class="eas_sidekick_divs">
<div id="eas_sidekick">
<div class="eas_sidekick_open">x</div>
</div>
<div id="eas_sidekick_container"></div>
</div>
</body>
</html>
I've figured out myself a javascript solution for fixing my issue.
I've used position absolute to fix it in all browsers and then created a javascript that depending on the width of the site, it position itself always 10 pixels to the right of my container.
Below is my code:
$(document).ready(function() {
var cssWidth = 1024;
var cssPos = 10;
$("#eas_sidekick_container").hide();
$("#eas_sidekick_container").css(
{
width: '0px',
position: 'absolute',
top: '0px',
left: cssWidth + cssPos
});
$(".eas_sidekick_open").click(
function() {
$("#eas_sidekick_container").show();
$("#eas_sidekick_container").animate({
width: '850px'
});
$('html, body').animate({
scrollLeft: '850'
});
});
$(".eas_sidekick_close").click(
function() {
$("#eas_sidekick_container").animate({
width: '0px'
});
setTimeout( function(){
$("#eas_sidekick_container").css(
'display' , 'none'
);
}, 350);
});
});
this is probably very simple using javascript or jquery, but I cannot wrap my head around it. I am providing a sample using a simple css box with a :hover applied in a different color. I want the box to go about the hover as it normally would, but then want the hover to last a set amount of time, regardless of mouse movement after hover. After the set time has finished, I would like the hover to reset as normal. Also if the user were to accidentally hover over the #box while the hover is being held it will not reset, it will continue to hold until after the set time has finished.
here is my html and css
#box {
width: 200px;
height:300px;
background-color: #00CCFF;
}
#box:hover {
width: 200px;
height:300px;
background-color: #669933;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="box" </div>
</body>
CSS
.box-normal {
width: 200px;
height:300px;
background-color: #00CCFF;
}
.box-hover {
width: 200px;
height:300px;
background-color: #669933;
}
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="box" class="box-normal"> dsfdsf</div>
</body>
JQuery
$(function() {
var delayms = 2000;
$("#box").mouseenter(function(){
if ($("#box").hasClass('box-normal'))
{
$("#box").removeClass('box-normal').addClass('box-hover');
window.setTimeout(function() {
$("#box").removeClass('box-hover').addClass('box-normal');
}, delayms);
}
});
});
You can change the "delayms" variable. ( 2000 means 2 seconds)
Working example: http://jsfiddle.net/jqT7d/1/
Also jfriend00 suggests a simpler version: http://jsfiddle.net/jfriend00/jqT7d/3/
ul.navigator-wrap-inner li.thumbnail_resize:hover {
border-color:#184ACD;
-moz-transition: border-color 0.4s ease-in-out 0s;
}