Jquery to Javascript: Toggle class on click

Jquery to Javascript: Toggle class on click - javascript

$(document).ready(function() {
$(".show_on_hover").click(function() {
$(".show_on_hover.hover").not(this).removeClass("hover");
$(this).toggleClass("hover");
});
});
Any clever JavaScript person know how to write the above as plain JavaScript? Thanks in advance :)
Here's the intended behavior: https://jsfiddle.net/kevadamson/fr8usm19/

Here is your original (using jQuery):
$(document).ready(function() {
$(".show_on_hover").click(function() {
$(".show_on_hover.hover").not(this).removeClass("hover");
$(this).toggleClass("hover");
});
});
div {
display: inline-block;
width: 100px;
height: 100px;
margin: 3px;
background-color: rgb(255, 0, 0);
cursor: pointer;
}
.show_on_hover {
opacity: 0.3;
}
.show_on_hover:hover,
.show_on_hover.hover {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show_on_hover"></div>
<div class="show_on_hover"></div>
<div class="show_on_hover"></div>
<div class="show_on_hover"></div>
<div class="show_on_hover"></div>
Here is the same setup, with jQuery translated into javascript:
// Equivalent to $(".show_on_hover")
let showOnHoverDivs = [...document.getElementsByClassName('show_on_hover')];
const showHideDivs = (event) => {
for (let showOnHoverDiv of showOnHoverDivs) {
// Equivalent to .not(this)
if (showOnHoverDiv === event.target) continue;
// Equivalent to .removeClass("hover")
showOnHoverDiv.classList.remove('hover');
}
// Equivalent to $(this).toggleClass("hover")
event.target.classList.toggle('hover');
}
// Equivalent to $(".show_on_hover").click(function() { [...] }
for (let showOnHoverDiv of showOnHoverDivs) {
showOnHoverDiv.addEventListener('click', showHideDivs, false);
}
div {
display: inline-block;
width: 100px;
height: 100px;
margin: 3px;
background-color: rgb(255, 0, 0);
cursor: pointer;
}
.show_on_hover {
opacity: 0.3;
}
.show_on_hover:hover,
.show_on_hover.hover {
opacity: 1;
}
<div class="show_on_hover"></div>
<div class="show_on_hover"></div>
<div class="show_on_hover"></div>
<div class="show_on_hover"></div>
<div class="show_on_hover"></div>

Add click listener only for the first element with class .show_on_hover:
const btn = document.querySelector('.show_on_hover');
btn.addEventListener('click', () => {
if (btn.classList.contains('hover')) {
btn.classList.remove('hover');
} else {
btn.classList.add('hover');
}
})
Add click listener for each element with class .show_on_hover:
const btns = document.querySelectorAll('.show_on_hover');
btns.forEach(el => el.addEventListener('click', () => {
if (btn.classList.contains('hover')) {
el.classList.remove('hover');
} else {
el.classList.add('hover');
}
}));

you can use classList
you can do toggle, remove, add, and also with condition
var btn = document.querySelector('.show_on_hover')
btn.classList.toggle('hover);

Related

Check if DOM elements are present inside a DIV then run functions assigned to those elements in order

i'm trying to develop a game using html, css and js. At the moment I'm focusing on manipulating DOM elements without using the canvas tag. My idea is to create a pseudo graphical programming language, similar to the Blockly environment. So far I have inserted 3 clickable elements inside #toolbox that create their copies in #workspace.
Now, I am trying to assign functions to the elements present in #workspace, which once pressed the Run button are executed in order of appearance, so as to create a queue of commands that is able to move the pink square inside #output_section.
Therefore I cannot understand how to write the function that is able to verify the presence of the elements and then be able to perform the different functions assigned to these elements.
Any ideas? :D
I'm using Jquery 3.3.1
function addRed() {
var redWorkspace = document.createElement("DIV");
redWorkspace.className = "remove-block block red";
document.getElementById("workspace").appendChild(redWorkspace);
};
function addBlue() {
var blueWorkspace = document.createElement("DIV");
blueWorkspace.className = "remove-block block blue";
document.getElementById("workspace").appendChild(blueWorkspace);
};
function addGreen() {
var greenWorkspace = document.createElement("DIV");
greenWorkspace.className = "remove-block block green";
document.getElementById("workspace").appendChild(greenWorkspace);
};
$("#clear_workspace").click(function () {
$("#workspace").empty();
});
$(document).on("click", ".remove-block", function () {
$(this).closest("div").remove();
});
html,
body {
margin: 0;
padding: 0;
}
#workspace {
display: flex;
height: 100px;
padding: 10px;
background: black;
}
#toolbox {
display: flex;
padding: 10px;
width: 300px;
}
#output_section {
height: 500px;
width: 500px;
border: solid black;
margin: 10px;
position: relative;
}
#moving_square {
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 100px;
background: pink;
}
.block {
height: 100px;
width: 100px;
}
.red {
background: red;
}
.blue {
background: cyan;
}
.green {
background: green;
}
.grey {
background: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<div id="workspace"></div>
<div id="workspace-menu">
<button id="run_workspace">Run</button>
<button id="clear_workspace">Clear</button>
</div>
<div id="toolbox" class="grey">
<div onclick="addRed()" class="block red">Left</div>
<div onclick="addBlue()" class="block blue">Up</div>
<div onclick="addGreen()" class="block green">Right</div>
</div>
<div id="output_section">
<div id="moving_square"></div>
</div>
</body>
</html>

Completely untested but run button does something along the lines of:
$("#run_workspace").click(function() {
$("#workspace .block").each(function(elem) {
if (elem.hasClass("red")) {
moveObjectLeft();
} else if (elem.hasClass("green")) {
moveObjectRight();
} else if (elem.hasClass("blue")) {
moveObjectUp();
}
});
});

Commonly, it's a good idea to store all required information in arrays and objects, and use HTML only to display your data.
Also, if you are already using jQuery - use it for all 100%)
Made some improvements:
let mobs = {
pinky: {
node: $('#moving_square'),
coors: { top: 400, left: 400 },
step: 30,
moveQueue: [],
// moveTimeout ???
},
}; // storing here all created objects, that must move.
/* Each [moveQueue] array will store the chain of moves, like ["up", "up", "left"]
You can take each "key-word" of move, and get required function buy that key,
from the 'move' object */
let move = { // Think about how to simlify this object and functions. It's possible!)
left: function (obj) {
let left = obj.coors.left = (obj.coors.left - obj.step);
obj.node.css('left', left + 'px');
},
up: function (obj) {
let top = obj.coors.top = (obj.coors.top - obj.step);
obj.node.css('top', top + 'px');
},
right: function (obj) {
let left = obj.coors.left = (obj.coors.left + obj.step);
obj.node.css('left', left + 'px');
}
};
let stepTimeout = 1000;
let running = false;
let timeouts = {}; // store all running timeouts here,
// and clear everything with for( key in obj ) loop, if required
$('#toolbox .block').on('click', function () {
let color = $(this).attr('data-color');
let workBlock = '<div class="remove-block block ' + color + '"></div>';
$('#workspace').append(workBlock);
mobs.pinky.moveQueue.push( $(this).text().toLowerCase() ); // .attr('data-direction');
// instead of pinky - any other currently selected object
// $(this).text().toLowerCase() — must be "left", "up", "right"
});
$('#run_workspace').on('click', function () {
running = true;
runCode();
function runCode() {
for (let obj in mobs) { // mobile objects may be multiple
// Inside the loop, obj == mobs each key name. Here it's == "pinky"
let i = 0;
let pinky = mobs[obj];
localRun();
function localRun() {
let direction = pinky.moveQueue[i]; // getting direction key by array index.
move[direction](pinky); // calling the required function from storage.
if (pinky.moveQueue[++i] && running ) {
// self-calling again, if moveQueue has next element.
// At the same time increasing i by +1 ( ++i )
timeouts[obj] = setTimeout(localRun, stepTimeout);
}
}
}
}
});
$("#clear_workspace").click(function () {
$("#workspace").empty();
});
$('#workspace').on("click", ".remove-block", function () {
$(this).closest("div").remove();
});
html,
body {
margin: 0;
padding: 0;
}
#workspace {
display: flex;
height: 100px;
padding: 10px;
background: black;
}
#toolbox {
display: flex;
padding: 10px;
width: 300px;
}
#output_section {
height: 500px;
width: 500px;
border: solid black;
margin: 10px;
position: relative;
}
#moving_square {
position: absolute;
top: 400px;
left: 400px;
width: 100px;
height: 100px;
background: pink;
}
.block {
height: 100px;
width: 100px;
}
.red {
background: red;
}
.blue {
background: cyan;
}
.green {
background: green;
}
.grey {
background: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="workspace"></div>
<div id="workspace-menu">
<button id="run_workspace">Run</button>
<button id="clear_workspace">Clear</button>
</div>
<div id="toolbox" class="grey">
<div data-color="red" class="block red">Left</div>
<div data-color="blue" class="block blue">Up</div>
<div data-color="green" class="block green">Right</div>
</div>
<div id="output_section">
<div id="moving_square"></div>
</div>
But... jQuery was used only for clicks... Translation to JS:
let mobs = {
pinky: {
node: document.getElementById('moving_square'),
coors: { top: 400, left: 400 },
step: 30,
moveQueue: [],
},
};
let move = {
left: function (obj) {
let left = obj.coors.left = (obj.coors.left - obj.step);
obj.node.style.left = left + 'px';
},
up: function (obj) {
let top = obj.coors.top = (obj.coors.top - obj.step);
obj.node.style.top = top + 'px';
},
right: function (obj) {
let left = obj.coors.left = (obj.coors.left + obj.step);
obj.node.style.left = left + 'px';
}
};
let stepTimeout = 1000;
let running = false;
let timeouts = {};
let blocks = document.querySelectorAll('#toolbox .block');
let workSpace = document.getElementById('workspace');
blocks.forEach(function(block){
block.addEventListener('click', function(){
let color = this.dataset.color;
let workBlock = '<div class="remove-block block ' + color + '"></div>';
workSpace.insertAdjacentHTML('beforeend', workBlock);
mobs.pinky.moveQueue.push( this.textContent.toLowerCase() );
});
});
document.getElementById('run_workspace').addEventListener('click', function () {
running = true;
runCode();
function runCode() {
for (let obj in mobs) { // mobile objects may be multiple
// Inside the loop, obj == mobs each key name. Here it's == "pinky"
let i = 0;
let pinky = mobs[obj];
localRun();
function localRun() {
let direction = pinky.moveQueue[i]; // getting direction key by array index.
move[direction](pinky); // calling the required function from storage.
if (pinky.moveQueue[++i] && running ) {
// self-calling again, if moveQueue has next element.
// At the same time increasing i by +1 ( ++i )
timeouts[obj] = setTimeout(localRun, stepTimeout);
}
}
}
}
});
document.getElementById("clear_workspace").addEventListener('click', function () {
workSpace.textContent = "";
});
workSpace.addEventListener('click', function (e) {
if( e.target.classList.contains('remove-block') ){
e.target.remove();
}
});
html,
body {
margin: 0;
padding: 0;
}
#workspace {
display: flex;
height: 100px;
padding: 10px;
background: black;
}
#toolbox {
display: flex;
padding: 10px;
width: 300px;
}
#output_section {
height: 500px;
width: 500px;
border: solid black;
margin: 10px;
position: relative;
}
#moving_square {
position: absolute;
top: 400px;
left: 400px;
width: 100px;
height: 100px;
background: pink;
}
.block {
height: 100px;
width: 100px;
}
.red {
background: red;
}
.blue {
background: cyan;
}
.green {
background: green;
}
.grey {
background: #ccc;
}
<div id="workspace"></div>
<div id="workspace-menu">
<button id="run_workspace">Run</button>
<button id="clear_workspace">Clear</button>
</div>
<div id="toolbox" class="grey">
<div data-color="red" class="block red">Left</div>
<div data-color="blue" class="block blue">Up</div>
<div data-color="green" class="block green">Right</div>
</div>
<div id="output_section">
<div id="moving_square"></div>
</div>

Like and Dislike button in jQuery

I have tried making a like and dislike button in jquery with a basic toggle function, as shown here:
$('.rating-button').click(function () {
var f = !$(this).data("toggleFlag");
if (f) {
$(this).removeClass('text-white').addClass('text-dark')
} else {
$(this).removeClass('text-dark').addClass('text-white')
}
$(this).data("toggleFlag", f);
});
It's working fine, but how can I make it so if I click one button while the other button is clicked, the other button unclicks?
Example gif

Try this.
var likeEl = $('.like');
let likeSpanEl = likeEl.find('span');
var dislikeEl = $('.dislike');
let dislikeSpanEl = dislikeEl.find('span');
$('.rating-button').click(function() {
// remove all selected class
$('.rating-button').removeClass('selected');
if ($(this).hasClass('dislike')) {
changeLikes();
changeDisLikes(true);
} else {
changeLikes(true);
changeDisLikes();
}
// add selected to current el
$(this).addClass('selected');
});
function changeLikes(add) {
let likes = parseInt(likeSpanEl.text());
$(likeSpanEl).text(add ? likes + 1 : likes - 1);
}
function changeDisLikes(add) {
let dislikes = parseInt(dislikeSpanEl.text());
$(dislikeSpanEl).text(add ? dislikes + 1 : dislikes - 1);
}
.container {
display: flex;
}
.rating-button {
border-bottom: 1px solid blue;
padding-bottom: 0.5em;
}
.rating-button:hover {
cursor: pointer;
}
.like,
.dislike {
font-weight: bold;
}
.dislike {
padding-left: 2em;
}
icon {
margin-right: 0.1m;
}
.selected {
color: blue;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class="container">
<div class="like rating-button selected">
<icon></icon>
<span>10</span>
</div>
<div class="dislike rating-button">
<icon></icon>
<span>20</span>
</div>
</div>

Javascript tabs, Adding active class to element

I want to add active class to the one element and remove that class from all other 'article' elements, hide them. Just normal javascript tabs.
I'm new in JS and can't resolve this problem.
Here is my Fiddle: https://jsfiddle.net/a8bvp0fn/
SOLVED: https://jsfiddle.net/y8sa3e0c/
thx
<style>
.article-1, .article-2, .article-3 {
width: 100px;
height: 200px;
display: none;
}
.article-1 {
background: red;
}
.article-2 {
background: green;
}
.article-3 {
background: blue;
}
.active {
display: inline-block;
}
</style>
<h2 class="output" data-tab="1">BUTTON 1</h2>
<h2 class="output" data-tab="2">BUTTON 2</h2>
<h2 class="output" data-tab="3">BUTTON 3</h2>
<div class="article-1"></div>
<div class="article-2"></div>
<div class="article-3"></div>
<script>
var output = document.querySelectorAll('.output');
output.forEach(function(item) {
item.onclick = function(){
var datas = this.dataset.tab;
var elem = document.querySelector('.article-' + datas);
elem.classList.toggle('active');
}
});
</script>

var output = document.querySelectorAll('.output');
output.forEach(function(item) {
item.onclick = function() {
var datas = this.dataset.tab;
var elem = document.querySelector('.article-' + datas);
let AllElems = document.querySelector('.active');
if (AllElems) {
AllElems.classList.remove('active');
}
elem.classList.add("active");
}
});
.article-1,
.article-2,
.article-3 {
width: 100px;
height: 200px;
display: none;
}
.article-1 {
background: red;
}
.article-2 {
background: green;
}
.article-3 {
background: blue;
}
.active {
display: inline-block;
}
<h2 class="output" data-tab="1">BUTTON 1</h2>
<h2 class="output" data-tab="2">BUTTON 2</h2>
<h2 class="output" data-tab="3">BUTTON 3</h2>
<div class="article-1"></div>
<div class="article-2"></div>
<div class="article-3"></div>

One solution would be to get all the article elements with:
var articles = document.getElementsByClassName('article');
And then in the onclick method, remove the active class from all articles other than the one you clicked:
for (let i = 0; i< articles.length; i++) {
if (articles[i] !== elem) {
articles[i].classList.remove('active');
} else {
articles[i].classList.toggle('active');
}
}

var output = document.querySelectorAll('.output');
function hideAll(){
//Function to hide all active divs
var allActive = document.querySelectorAll('.active');
allActive.forEach(function(item) {
item.classList.remove('active')
})
}
output.forEach(function(item) {
//Adding click listener on articles
item.onclick = function(){
var datas = this.dataset.tab;
var elem = document.querySelector('.article-' + datas);
if(elem.classList.contains('active')){
//If already active remove
elem.classList.remove('active')
}
else{
//If not already active, before add active remove all
hideAll()
elem.classList.add('active')
}
}
});
.article-1, .article-2, .article-3 {
width: 100px;
height: 200px;
display: none;
}
.article-1 {
background: red;
}
.article-2 {
background: green;
}
.article-3 {
background: blue;
}
.active {
display: inline-block;
}
<h2 class="output" data-tab="1">BUTTON 1</h2>
<h2 class="output" data-tab="2">BUTTON 2</h2>
<h2 class="output" data-tab="3">BUTTON 3</h2>
<div class=" article-1"></div>
<div class=" article-2"></div>
<div class=" article-3"></div>

Easiest solution: Just remove the class for all elements, then add like you did.
var output = document.querySelectorAll('.output');
output.forEach(function(item)
{
item.onclick = function()
{
var datas = this.dataset.tab;
// ---------------- so just add this bit..
var alltabs=document.getElementsByTagName("div");
for(var i=0;i<alltabs.length;i++)
{
alltabs[i].classList.remove('active');
}
// ---------------- and then go on like you did.. (only don't toggle, just add)
var elem = document.querySelector('.article-' + datas);
elem.classList.add('active');
}
});

Make navigation clickable in fullpage script

I have a simple project based on one variation of fullpage script. Everything works perfect except for one annoying thing - I can't understand how to make my right navigation bullets clickable (to an appropriate section). My js knowledge is not too good at the moment so I'd really appreciate any help, guys. Thanks!
$.fullPage = function(option) {
var defaultOpt = {
box: "#fullPageBox", // 滚屏页父元素
page: ".fullPage", // 滚屏页面
index: true, // 是否显示索引
duration: 1000, // 动画时间
direction: "vertical", // 滚屏方向 horizontal or vertical
loop: true // 是否循环
},
This = this,
index = 0,
over = true;
this.option = $.extend({}, defaultOpt, option || {});
this.box = $(this.option.box);
this.pages = $(this.option.page);
this.duration = this.option.duration;
// 绑定鼠标滚轮事件
$(document).on("mousewheel DOMMouseScroll", function(ev) {
var dir = ev.originalEvent.wheelDelta || -ev.originalEvent.detail;
if (over === false) return;
dir < 0 ? nextPage() : prevPage();
});
if (this.option.index) {
initPagination();
};
function initPagination() {
var oUl = $("<ul id='fullPageIndex'></ul>"),
liStr = "";
for (var i = 0, len = This.pages.length; i < len; i++) {
liStr += "<li></li>";
};
$(document.body).append(oUl.append($(liStr)));
$("#fullPageIndex li").eq(index).addClass("active").siblings().removeClass("active");
};
function nextPage() {
if (index < This.pages.length - 1) {
index++;
} else {
index = 0;
}
scrollPage(index, This.pages.eq(index).position());
};
function prevPage() {
if (index === 0) {
index = This.pages.length - 1;
} else {
index--;
}
scrollPage(index, This.pages.eq(index).position());
};
function scrollPage(index, position) {
over = false;
var cssStr = This.option.direction === "vertical" ? {
top: -position.top
} : {
left: -position.left
};
This.box.animate(cssStr, This.duration, function() {
over = true;
})
$("#fullPageIndex li").eq(index).addClass("active").siblings().removeClass("active");
};
}
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
overflow: hidden;
}
.pageBox {
position: relative;
height: 100%;
}
.main {
width: 100%;
height: 500%;
min-width: 1200px;
position: absolute;
left: 0;
top: 0;
color: #fff;
}
.main .fullPage {
height: 25%;
}
.bg1 {
background-color: #27AE60;
}
.bg2 {
background-color: #3498DB;
}
.bg3 {
background-color: #C0392B;
}
.bg4 {
background-color: #4FC2E5;
}
.bg5 {
background-color: #8E44AD;
}
#fullPageIndex {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
#fullPageIndex li {
width: 10px;
height: 10px;
list-style: none;
background-color: black;
margin: 6px 0;
border-radius: 50%;
}
#fullPageIndex li.active {
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="pageBox">
<div class="main" id="fullPageBox">
<div class="fullPage bg1">jQuery fullPage.js</div>
<div class="fullPage bg2">Section 2</div>
<div class="fullPage bg3">Section 3</div>
<div class="fullPage bg4">Section 4</div>
<div class="fullPage bg5">Section 5</div>
</div>
</div>
<script>
$.fullPage();
</script>
</body>

Add an id attribute to you divs and add an anchor to the list elements that navigate to the desired sections. As follows:
<body>
<div class="pageBox">
<div class="main" id="fullPageBox">
<div id="section1" class="fullPage bg1">jQuery fullPage.js</div>
<div id="section2" class="fullPage bg2">Section 2</div>
<div id="section3" class="fullPage bg3">Section 3</div>
<div id="section4" class="fullPage bg4">Section 4</div>
<div id="section5" class="fullPage bg5">Section 5</div>
</div>
</div>
<script>
$.fullPage();
</script>
</body>
Update your js where you render the list items to look like this:
function initPagination() {
var oUl = $("<ul id='fullPageIndex'></ul>"),
liStr = "";
for (var i = 0, len = This.pages.length; i <= len; i++) {
var sectionNum = i + 1;
liStr += '<li></li>';
};
$(document.body).append(oUl.append($(liStr)));
$("#fullPageIndex li").eq(index).addClass("active").siblings().removeClass("active");
};
Read more here
EDIT:
Since you asked for a smooth scroll as well you could add this to your JS:
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
Source for the snippet can be found on this page.

there is some mistake in your script.
First, remove below code from your HTML file:
<script>
fullPage();
</script>
Second is, you've created wrong function (method) define. I'am replace $.fullpage = function(option) { with var fullpage = function(options) {
and for the last is: since we have removed your fullpage() initiator, so we need to call this method again. for example at end line of your JS file,
P.S:
In Javascript you can create function in several ways. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions for more detail.
See fixed code below:
var fullPage = function(option) {
var defaultOpt = {
box: "#fullPageBox", // 滚屏页父元素
page: ".fullPage", // 滚屏页面
index: true, // 是否显示索引
duration: 1000, // 动画时间
direction: "vertical", // 滚屏方向 horizontal or vertical
loop: true // 是否循环
},
This = this,
index = 0,
over = true;
this.option = $.extend({}, defaultOpt, option || {});
this.box = $(this.option.box);
this.pages = $(this.option.page);
this.duration = this.option.duration;
// 绑定鼠标滚轮事件
$(document).on("mousewheel DOMMouseScroll", function(ev) {
var dir = ev.originalEvent.wheelDelta || -ev.originalEvent.detail;
if (over === false) return;
dir < 0 ? nextPage() : prevPage();
});
if (this.option.index) {
initPagination();
};
function initPagination() {
var oUl = $("<ul id='fullPageIndex'></ul>"),
liStr = "";
for (var i = 0, len = This.pages.length; i < len; i++) {
liStr += "<li></li>";
};
$(document.body).append(oUl.append($(liStr)));
$("#fullPageIndex li").eq(index).addClass("active").siblings().removeClass("active");
};
function nextPage() {
if (index < This.pages.length - 1) {
index++;
} else {
index = 0;
}
scrollPage(index, This.pages.eq(index).position());
};
function prevPage() {
if (index === 0) {
index = This.pages.length - 1;
} else {
index--;
}
scrollPage(index, This.pages.eq(index).position());
};
function scrollPage(index, position) {
over = false;
var cssStr = This.option.direction === "vertical" ? {
top: -position.top
} : {
left: -position.left
};
This.box.animate(cssStr, This.duration, function() {
over = true;
})
$("#fullPageIndex li").eq(index).addClass("active").siblings().removeClass("active");
};
}
fullPage();
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
overflow: hidden;
}
.pageBox {
position: relative;
height: 100%;
}
.main {
width: 100%;
height: 500%;
min-width: 1200px;
position: absolute;
left: 0;
top: 0;
color: #fff;
}
.main .fullPage {
height: 25%;
}
.bg1 {
background-color: #27AE60;
}
.bg2 {
background-color: #3498DB;
}
.bg3 {
background-color: #C0392B;
}
.bg4 {
background-color: #4FC2E5;
}
.bg5 {
background-color: #8E44AD;
}
#fullPageIndex {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
#fullPageIndex li {
width: 10px;
height: 10px;
list-style: none;
background-color: black;
margin: 6px 0;
border-radius: 50%;
}
#fullPageIndex li.active {
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<body>
<div class="pageBox">
<div class="main" id="fullPageBox">
<div class="fullPage bg1">jQuery fullPage.js</div>
<div class="fullPage bg2">Section 2</div>
<div class="fullPage bg3">Section 3</div>
<div class="fullPage bg4">Section 4</div>
<div class="fullPage bg5">Section 5</div>
</div>
</div>
</body>

Javascript change color of button by hovering OUTSIDE it

I can hover on the button using jquery. Can someone please point me to the right direction on how to hover on the
function setColor(btn, color) {
var property = document.getElementById(btn);
if (window.getComputedStyle(property).BackgroundColor == 'rgb(0, 0, 0)') {
property.style.backgroundColor = color;
} else {
property.style.backgroundColor = "#000";
}
}
function setColor(btn, color) {
var property = document.getElementById(btn);
if (window.getComputedStyle(property).backgroundColor == 'rgb(244, 113, 33)') {
property.style.backgroundColor = color;
} else {
property.style.backgroundColor = "#f47121";
}
}
document.addEventListener('onclick', function(e) {
if (!(e.id === 'btnHousing')) {
document.getElementById('btnHousing').property.style.backgroundColor = '#FFF'
}
});
$(document).ready(function() {
$("button").hover(function() {
$(this).css("backgroundColor", "#fff");
}, function() {
$(this).css("backgroundColor", "#9d9d9d");
});
});
div {
height: 100px;
width: 300px;
background-color: black;
}
button {
height: 50px;
width: 150px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown" id="notification-dropdown" onclick="setColor('btnBell','#9d9d9d');">
<button type="button" id="btnBell">
</button>
</div>
area also and make the button white on hover?
Please check!
https://jsfiddle.net/obw6ec9v/

There is no need of javascript just css will do.
Also if you want to retain the color, on click you can use a additional class like
jQuery(function($) {
$('#notification-dropdown').click(function() {
$(this).find('button').addClass('clicked');
})
})
div {
height: 100px;
width: 300px;
background-color: black;
}
button {
height: 50px;
width: 150px;
position: relative;
background-color: #9d9d9d;
}
#notification-dropdown:hover button {
background-color: #fff;
}
#notification-dropdown button.clicked {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown" id="notification-dropdown" onclick="setColor('btnBell','#9d9d9d');">
<button type="button" id="btnBell"></button>
</div>
With javascript
$(document).ready(function() {
$("#notification-dropdown").hover(function(e) {
var $btn = $('button', this);
if (!$btn.hasClass('clicked')) {
$btn.css("backgroundColor", e.type == 'mouseenter' ? "#fff" : '#9d9d9d');
}
}).click(function() {
$('button', this).addClass('clicked').css("backgroundColor", 'red');
})
});
div {
height: 100px;
width: 300px;
background-color: black;
}
button {
height: 50px;
width: 150px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown" id="notification-dropdown">
<button type="button" id="btnBell"></button>
</div>

You can also replace onclick with onmouseover
<div class="dropdown" id="notification-dropdown" onmouseover="setColor('btnBell','#9d9d9d');">
See JSFiddle

You can just change the target you're listen for hover to that div, then use $("#btnBell") instead of $(this) to change the button's color.
function setColor(btn,color){
var property=document.getElementById(btn);
if (window.getComputedStyle(property).backgroundColor == 'rgb(244, 113, 33)') {
property.style.backgroundColor=color;
}
else {
property.style.backgroundColor = "#f47121";
}
}
document.addEventListener('onclick', function(e){
if(!(e.id === 'btnHousing')){
document.getElementById('btnHousing').property.style.backgroundColor = '#FFF'
}
});
$(document).ready(function(){
$("div").hover(function(){
$("#btnBell").css("backgroundColor", "#fff");
}, function(){
$("#btnBell").css("backgroundColor", "#9d9d9d");
});
});
div{
height:100px;
width:300px;
background-color:black;
}
button{
height:50px;
width:150px;
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="dropdown" id="notification-dropdown" onclick="setColor('btnBell','#9d9d9d');">
<button type="button" id="btnBell" >
</button>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Jquery to Javascript: Toggle class on click - javascript

you can use classList you can do toggle, remove, add, and also with condition var btn = document.querySelector('.show_on_hover') btn.classList.toggle('hover);

Related

Check if DOM elements are present inside a DIV then run functions assigned to those elements in order

Like and Dislike button in jQuery

Javascript tabs, Adding active class to element

Make navigation clickable in fullpage script

Javascript change color of button by hovering OUTSIDE it

Categories

Resources