I am trying to create a toggling highlight effect using addClass and removeClass.
<head>
<style>
.box-highlight {
border: 2px solid yellow;
}
</style>
<script type="text/javascript" src="javascript/vendor/jquery-2.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#box').bind('click', function() {
if ($(this).hasClass('box-highlight')) {
$(this).removeClass('box-highlight');
}
$(this).addClass('box-highlight');
});
});
</script>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; background-color: silver">
</div>
</body>
The addClass is working properly, but removeClass does not. I know there is a toggleClass method but I am just wondering what is wrong with this code.
You're removing the class, then adding it back with no delay, before the UI can be redrawn. You need to do one or the other, which suggests an else:
if ($(this).hasClass('box-highlight')) {
$(this).removeClass('box-highlight')
} else {
$(this).addClass('box-highlight')
}
The problem with your code is that it runs very quickly, and you won't see the effect :).
To make such effect, you can use a timer or delay. For example, you can do like this:
$("#box").addClass("box-highlight")
.delay(300).queue(function(next){
$(this).removeClass("box-highlight");
next();
});
Try this................
$(document).ready(function() {
$('#box').bind('click', function() {
if ($(this).hasClass('box-highlight')) {
$(this).removeClass('box-highlight');
}else{
$(this).addClass('box-highlight');
}
});
});
Related
So, I have written JavaScript code that uses the JQuery library to swap classes on hover.
$("#workBG").on({
mouseenter : function() {
$("#workplay").addClass("workBG", 200);
$("#workplay").removeClass("diagR", 200);
}
,
mouseleave : function() {
$("#workplay").addClass("diagR", 200);
$("#workplay").removeClass("workBG", 200);
}
})
This code works but I would like to have the class fadeIn and fadeOut considering that it swaps background images but it does so harshly without the fadeIn and fadeOut. I have seen similar questions but they were all from five or six years ago and I would like to know if there is any better way to do this now.
From one of the older questions, I saw that they had answered with
.addClass("workBG", 200);
where the 200 is the time for the class to fadeIn. As far as I can tell, this does not work now or I am doing something wrong. I did check the JQuery documentation and there was nothing about this under the addClass API documentation.
In Addition:
HTML code:
<div id="workplay" class ="row text-center mt-5 diagR">
<div class ="col-sm-6 align-self-center changework">
<p id= "workBG" class ="display-1 font-weight-bold text-warning">WORK.</p>
</div>
<div class ="col-sm-6 align-self-center">
<p id= "playBG" class ="display-1 font-weight-bold">PLAY.</p>
</div>
</div>
This is the html code that is related to the JS and the backgrounds are applied through the classes.
just add transition property on your element don't use 2nd parameter with addClass / removeClass function
$("#workBG").on({
mouseenter: function() {
$("#workplay").addClass("workBG");
$("#workplay").removeClass("diagR");
},
mouseleave: function() {
$("#workplay").addClass("diagR");
$("#workplay").removeClass("workBG");
}
})
#workplay {
transition: 2s;
}
.workBG {
background: red;
}
.diagR {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="workBG">
<div id="workplay">asdasdasd</div>
</div>
/* This is working fine for me, Please try this solution */
$("#workplay").on({
mouseenter: function() {
$("#workplay").fadeIn("slow", function() {
$("#workplay").addClass("workBG");
$("#workplay").removeClass("diagR");
});
},
mouseleave: function() {
$("#workplay").fadeIn("slow", function() {
$("#workplay").addClass("diagR");
$("#workplay").removeClass("workBG");
});
}
});
/* You can run this file as it is (It is working fine) */
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#workplay").on({
mouseenter: function() {
$("#workplay").fadeIn("slow", function() {
$("#workplay").addClass("workBG");
$("#workplay").removeClass("diagR");
});
},
mouseleave: function() {
$("#workplay").fadeIn("slow", function() {
$("#workplay").addClass("diagR");
$("#workplay").removeClass("workBG");
});
}
})
});
</script>
<style>
#workplay {
transition: 2s;
}
.workBG {
background: red;
}
.diagR {
background: blue;
}
</style>
</head>
<body>
<div id="workplay">
Please move cursor on me.
</div>
</body>
</html>
can someone tell me the difference between using
$(function() {
$("#tab_1").click(function() {
$('.loadContent').load('page1.html');
});
});
and
$("#tab_2").click(function() {
$('.loadContent').load('page2.html');
});
they both achieve the same result and i don't know which is the best practices. Thanks
The $(function () {}) is called DOM Ready. When you want to access an element, for example #tab_2, you should wait for browser to load DOM successfully.
In your second example, the code won't work if you put it in the head section (before your element which you want to access it).
This example won't work:
because DOM isn't ready yet, the script is executed before #elem
#elem {
background: red;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('#elem').on('click', function () {
$(this).css('background', 'green');
});
</script>
<div id="elem"></div>
This example will work: because DOM is ready, the script is executed after #elem
#elem {
background: red;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="elem"></div>
<script>
$('#elem').on('click', function () {
$(this).css('background', 'green');
});
</script>
SO, you can:
Put your script before </body> to ensure DOM is ready for accessing elements.
Put your script in <head> section and wrap all your code within $(function () { });.
In the second way, our first example will be:
#elem {
background: red;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function () {
$('#elem').on('click', function () {
$(this).css('background', 'green');
});
});
</script>
<div id="elem"></div>
That works correctly, as the script inside $(function () {}), will be executed after DOM ready,
so the #elem is defined.
You might want to use function loadpage1() { so you can call the function on other events too though. That would be why you'd use a function there. Generally I'd put that inside a $(document).read(function() { function if you're putting it in the header, otherwise you should be fine.
So I'm making a image-toggling function that can toggle between two images. More specifically, it toggles the background images of a div.
I'm using the jquery .data() function as a counter where one = first image and two = toggled image.
Here's the algorithm I'm using:
click button to start function.
When I click on the div, if the data is equal to "one", replace image and set data to "two".
When I click the image again, set the image back to the original image and set data equal to "one" so that the function can repeat itself.
It seems to replace the image on the first try, as in the first "if", but it doesn't replace the image again on the second try (the else part). It seems to never reach the else part, even though the first if should return false and then go to the else.
Any help will be appreciated. Also, I know there is a .toggle() function and other image-toggling methods, but I must use this one because this is only a small, edited chunk of a larger program.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="mouseovertestlayout.css" />
<script>
function startEdit()
{
$("div").click(function ()
{
if (($(this).data('kangaroo')) == "one")
{
$(this).css('background-image', "url(image2.png)");
$(this).data('kangaroo',"two");
}
else
{
(this).css('background-image', "url(image1.png)");
$(this).data('kangaroo',"one");
}
});
}
</script>
</head>
<body>
<div class="container" data-kangaroo="one" ></div>
<button onclick="startEdit()"> </button>
</body>
</html>
Here's my .css
.container
{
width: 20px;
height: 20px;
line-height: 0;
border-style:solid;
border-width:1px;
border-color:red;
padding: 20px;
background-repeat:no-repeat;
background-image:url('image1.png');
}
You have a typo in your "else" first line is the $ missing at (this)
You are missing a $ in else clause.
Fixed:
function startEdit() {
$("div").click(function ()
{
if (($(this).data('kangaroo')) == "one")
{
$(this).css('background-image', "url(image2.png)");
$(this).data('kangaroo',"two");
}
else
{
$(this).css('background-image', "url(image1.png)");
$(this).data('kangaroo',"one");
}
});
}
Try like this
if (($(this).attr("data-kangaroo")) == "one") //Here is the edit
{
$(this).css('background-image', "url(image2.png)");
$(this).data('kangaroo',"two");
}
else
{
$(this).css('background-image', "url(image1.png)"); //Here put "$" before (this)
$(this).data('kangaroo',"one");
}
What you want to do can be done much shorter if you use a class and toggleClass.
Demo: http://jsbin.com/anazoq/1/edit
HTML:
<div class="container"></div>
<button>Toggle</button>
CSS:
div {
...
background: url(image1.png) no-repeat;
}
.switch {
background-image: url(image2.png);
}
JavaScript:
$('button').click(function() {
$('div').toggleClass('switch');
});
To change selector so it only show/hides when i click the image i put spoiler/ popdown menu directly after .OS image. Right now the popdown is a child of the .OS container, so clicks on it are passed to the .OS click handler.
But the code isn't perfect because when i click the 1st MAC both spoilers are opened.
But I want that spoilers are opened one at a time
But the main problem is that I can't fix the javascript code properly inside these types of spoilers (dokuwiki class) inside <td> tags:
This is the javascript code I use :
<div class="dokuwiki">
<div class="right_page">
<div class="entry-content">
<script type="text/javascript" src="./zzzz_files/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".nonjs").removeAttr( "href"); //href is needed for users without JS
$('.OS').click(function(){
if($(".details").is(":visible"))
{
$(".details").not(":hidden").hide("slow");
return true;
}
else
{
$(".OS").not(this).each(function(i) {
$(".details").hide("slow");
});
$(".details").show("slow");
return false;
}
});
});
</script>
<style type="text/css">
<!--
.details {
display: none;
clear: both;
padding: 2px;
}
.nonjs{
cursor:pointer;
}
img {
border: 0px;
}
-->
</style>
I thought about doing a video to better explain the problem and provide the local version of files for testing code:
Thanks in advance
This code works:
$(document).ready(function(){
$(".nonjs").removeAttr( "href");
//href is needed for users without JS
$('.OS').click(function(e){
if(!$(e.target).parents('.details').length){
if($(this).find('.details').is(":visible"))
{
$(this).find('.details').not(":hidden").hide("slow");
return true;
}
else
{
$(this).find('.details').show("slow");
return false;
}
}
});
});
I don't know what you're asking but here is what I think you want:
When clicking on an image, show the details below it and hide all others. If the details are already visible, hide them. Clicking something inside the details should not affect anything.
Demo
$(document).ready(function(){
$(".nonjs").removeAttr( "href"); //href is needed for users without JS
$('.OS').click(function(){
var details = $(this).next(".details");
$(".details").hide("slow");
if(details.is(":hidden")) {
details.show("slow");
}
});
});
I've got a small page with two links that load content into a div dependant upon which link is pressed.
Question is fairly obvious, i'd like to highlight the current content link with a different color and toggle the color according to which link is pressed.
I'm attempting to do this with my current function using the following however it isn't working:
Pretty simply question so i'm obviously being dumb. Any help would be much appreciated.
Thanks!
<script type="text/javascript">
function loadContent(id) {
$("#video").load("streams.php?o="+id+"");
$('active').removeClass('active');
$(this).addClass('active');
}
</script>
Full code:
<html>
<head>
<title>beam</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
</script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function loadContent(id) {
$("#video").load("streams.php?o="+id+"");
$('active').removeClass('active');
$(this).addClass('active');
}
</script>
<style>
* { margin:0; padding:0; }
img{ border-style:none; }
html { height: 100%; }
body { height: 100%; font-family: "Tahoma", "Arial", sans-serif; font-size:15px; font-weight: bold;}
a {
color:#fff;
text-decoration: none;
}
.active {
color:#00d2ff;
}
.container {
position:absolute;
background:url("images/video-bg.jpg") no-repeat;
width:520px;
height:576px;
}
#video {
position:relative;
background:#000;
top:275px;
left:55px;
width:400px;
height:222px;
}
#stream-controller {
position:relative;
left:55px;
top:285px;
width:200px;
}
</style>
</head>
<body onLoad="loadContent(1);">
<div id="fb-root"></div>
<div class="container">
<div id="video">
</div>
<div id="stream-controller">
<p>STREAM 1 | STREAM 2</p>
</div>
</div>
</body>
</html>
One issue is your selector for the active link:
$('active').removeClass('active');
should be:
$('.active').removeClass('active');
The other issue, though I haven't tested this yet, is that I don't believe using href="javascript:loadContent(1);" will set the value of this in the function to the appropriate a element. If you're working with jQuery, you'd be better off setting the handler with jQuery, and passing the variable through the tag, something like:
<a class="stream active" href="streams.php?o=1">STREAM 1</a>
with the jQuery code:
$(function() {
$('a.stream').click(function(e) {
var $this = $(this);
$("#video").load($this.attr('href'));
$('.active').removeClass('active');
$this.addClass('active');
// prevent default link click
e.preventDefault();
})
});
Why don't you just do it in CSS?
a {
color:#fff;
text-decoration: none;
}
a:active {
color:#00d2ff;
}
editing out a part of my solution : ninja'd and a much better one from nrabinowitz
To toggle the "active" class to the link pressed, I would do this:
var $a = $("a");
$a.click(function() {
$a.removeClass("active");
$(this).addClass("active");
});