I have a button on my website that when you click expand some text. And I need to make so when you hover mouse over that button, text changes to "Expand" and when text is expanded, and you hover over same button, text needs to be changed to "collapse".
Here is my code:
HTML:
<button id="btnSlideUp" class="btn btn-outline-success btn-sm title">
<h1 class="jumbotron-heading" id="title">TEXT</h1>
</button>
<p class="lead text-muted" id="p1">TEXT</p>
Css:
#p1{
display:none;
}
jQuery:
var isUp=true;
$('#btnSlideUp').click(function() {
if(isUp){
$('#p1').slideDown(1000);
isUp=false;
}else{
$('#p1').slideUp(1000);
isUp=true;
}
});
Thank you very much for any help given!
Rather than using jQuery events you can handle this with CSS using classes and the hover selector.
Something like:
button.expanded::before {
content: 'Expanded';
}
button.expanded:hover::before {
content: 'Collapse';
}
button::before {
content: 'Collapsed';
}
button:hover::before {
content: 'Expand';
}
Then you can just apply your classes with jQuery and you the CSS takes care of it 😁
How about using .hover on $('#btnSlideUp')?
var isUp = true;
$('#btnSlideUp').hover(
function() {
if (isUp) {
$(this).find('h1').text('Expand');
} else {
$(this).find('h1').text('Collapse');
}
},
function() {
$(this).find('h1').text('TEXT');
}
)
$('#btnSlideUp').click(function() {
if(isUp){
$('#p1').slideDown(1000);
isUp=false;
}else{
$('#p1').slideUp(1000);
isUp=true;
}
});
#p1{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnSlideUp" class="btn btn-outline-success btn-sm title">
<h1 class="jumbotron-heading" id="title">TEXT</h1>
</button>
<p class="lead text-muted" id="p1">TEXT</p>
Well just as you used the .click event listener, you can use the .hover function
$('#btnSlideUp').hover(function() { /*do whatever you need here */ });
https://api.jquery.com/hover/
You can add an hover event to toggle this, I am using a flag to set the hover text for the button, if its c the button should say collapse else expand.
var isUp=true, button = $('title'), text = $('#p1'), mode;
$('#btnSlideUp').click(function() {
if(isUp){
text.slideDown(1000);
isUp=false;
setTimeout(function(){mode = 'c'}, 1000);
}else{
text.slideUp(1000);
isUp=true;
setTimeout(function(){mode = 'e'}, 1000);
}
});
$('#btnSlideUp').hover(function() {
if(mode === 'c'){
$(this).children().html('Collapse');
}else{
$(this).children().html('Expand');
}
}, function(){$(this).children().html('TEXT');});
#p1{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnSlideUp" class="btn btn-outline-success btn-sm title">
<h1 class="jumbotron-heading" id="title">TEXT</h1>
</button>
<p class="lead text-muted" id="p1">TEXT</p>
Related
I have 3 buttons 'click me', 'disable', 'enable'. Basically when I click on 'click me' it triggers an alert but when I click on 'disable' it should disable the 'click me' button and change the button background colour and similarly, when i click 'enable it should enable 'click me' and change the background colour to original. It should be without using 'disabled' attribute
This GIF will give clear idea of what I want basically : https://gfycat.com/ickygloriousadouri
I tried using pointercancel but it didn't help.
function disableButton() {
var a = document.getElementById('clickme');
a.addEventListener("pointercancel", function() {})
}
function enableButton() {
var b = document.getElementById('clickme');
b.addEventListener("pointerover", function() {
b.style.backgroundColor = '#E2343F';
})
}
<div class="container">
<button id="clickme">Click Me</button>
<div class="">
<button onclick="disableButton()" class="disable">Disable Button</button>
<button onclick="enableButton()" class="enable">Enable Button</button>
</div>
</div>
And moreover if I can toggle the ID to change the css values.
It will be very helpful if someone can help me overcome this issue.
this should work:
.no-click {
pointer-events: none;
}
Just add this class to your UI:
<button class="no-click">
EDIT: If you want to toggle it instead of just disable it:
function disableButton() {
var a = document.getElementById('clickme');
a.css('pointer-events', 'none');
}
function enableButton() {
var b = document.getElementById('clickme');
a.css('pointer-events', '');
b.addEventListener("pointerover", function() {
b.style.backgroundColor = '#E2343F';
})
}
One way is by adding and removing event listeners.
const showAlert = () => alert('Hi');
const addListener = () => {
const btn = document.querySelector('#clickme');
clickListener = btn.addEventListener('click', showAlert);
btn.classList.remove('disabled');
};
document.addEventListener('DOMContentLoaded', () => {
addListener();
});
function disableButton() {
const btn = document.querySelector('#clickme');
document.querySelector('#clickme').removeEventListener('click', showAlert);
btn.classList.add('disabled');
}
function enableButton() {
addListener();
}
button {
cursor: pointer;
}
#clickme {
background-color: #E2343F;
}
#clickme.disabled {
cursor: auto;
background-color: grey;
}
<div class="container">
<button id="clickme">Click Me</button>
<div class="">
<button onclick="disableButton()" class="disable">Disable Button</button>
<button onclick="enableButton()" class="enable">Enable Button</button>
</div>
</div>
Try this...
function disableButton() {
document.getElementById('clickme').disabled = true;
}
function enableButton() {
document.getElementById('clickme').disabled = false;
}
<div class="container">
<button id="clickme">Click Me</button>
<div class="">
<button onclick="disableButton()" class="disable">Disable Button</button>
<button onclick="enableButton()" class="enable">Enable Button</button>
</div>
</div>
I am trying to make two buttons stand side by side
when clicked on one should say "im right" and the other says "no im right!"
<button id="right" type="button">Click Me!</button>
<button id="wrong" type="button">Click Me!</button>
This is my Html.
I am new to Javascript so I am having some trouble putting this together in a function.
document.getElementById("right").addEventListener("click", function(){
alert("I am Right!");
});
document.getElementById("wrong").addEventListener("click", function(){
alert("No,I'm Right!");
});
rather than have an alert I want to have the button's change to that text when clicked on.
<script>
function myFunction(isRight) {
if(isRight) {
alert('It is right button');
} else {
alert('It is left button');
}
}
</script>
<button class="left" onclick="myFunction(false)">Left</button>
<button class="right" onclick="myFunction(true)">Right</button>
You could use something like that for the sample.
But I recommend look to addEventLister and Event Object it will looks good.
function swapText(buttonClicked){
var button1 = document.getElementById('button1');
var btn1Output = document.getElementById('btn1Output');
var btn2Output = document.getElementById('btn2Output');
if (buttonClicked == button1){
btn1Output.innerHTML = "I'm right.";
btn2Output.innerHTML = "No, I'm right.";
} else {
btn1Output.innerHTML = "No, I'm right.";
btn2Output.innerHTML = "I'm right.";
}
}
button, div {
display: inline-block;
width: 45%;
height: 50px;
}
<button onclick="swapText(this)" id="button1">Click</button>
<div id="btn1Output"></div>
<button onclick="swapText(this)" id="button2">Click</button>
<div id="btn2Output"></div>
I'd like to make the header paragraph disappear at a certain width (say 1024px width) when the menu button is toggled.
As soon as I add the Jquery code the browser returns an error (ReferenceError: openSide is not defined) that doesn't exist if I comment the Jquery code.
I don't now if Jquery has been written thoroughly, but so far I cannot go through this issue
html:
<div id="header">
<header id="title">
<h1 style="font-size: 70px; font-weight: 600">The Nest</h1>
<p style="font-size: 40px">The hostel where your journey should start</p>
<button type="button" class="btn btn-lg" id="menu-btn" onclick="openSide()">
<span class="glyphicon glyphicon-list"></span>
</button>
</header>
</div>
<div id="sidebar">
×
Accomodations
Services
Merchandising
About us
</div>
Javascript:
function openSide() {
document.getElementById("sidebar").style.width = "350px";
//document.getElementById("header").style.backgroundPosition = "-250px";
document.getElementById("title").style.marginRight = "350px";
//document.getElementById("header").style.background = "linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5))";
}
function closeSide() {
document.getElementById("sidebar").style.width = "0";
//document.getElementById("header").style.backgroundPosition = "0px";
document.getElementById("title").style.marginRight = "0px";
}
var main = function() {
if (max-width = 1024px) {
$("#menu-btn").click(function() {
$("#title p").hide();
});
}
}
$(document).ready(main);
thx for your help
Your using the assignment operator instead of the equal operator. Your code should be:
$(document).ready(() => {
// Your condition here
if (true) {
$('#menu-btn').click(function() {
$('#title').hide();
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="menu-btn">Hide content</button>
<div id="title">foo</div>
Btw, in the code that you posted, the variable max-width is not a valid variable name and also you are not defining it.
I am working on a interactive map, which triggers an overlay image (which highlights the selected area)
But now I add classes to an div and I want to delete them if I highlight an other area. First I tried the starts with indicator to remove classes which starts with hl- this is my js file:
$('.btn-pointer').click(function() {
$('.highlight-layer').removeClass('[class^="hl-"]');
});
$('.btn-sp').click(function() {
$('.highlight-layer').addClass('hl-sp');
$('.popover').not(this).popover('hide');
});
$('.btn-vp').click(function() {
$('.highlight-layer').addClass('hl-vp');
$('.popover').not(this).popover('hide');
});
$('.btn-sl').click(function() {
$('.highlight-layer').addClass('hl-sl');
$('.popover').not(this).popover('hide');
});
$('.btn-ec').click(function() {
$('.highlight-layer').addClass('hl-ec');
$('.popover').not(this).popover('hide');
});
And here is the html:
<div>
<img src="../img/map/map-full.jpg" alt="">
<button class="btn btn-sp btn-pointer" data-container="body" data-toggle="popover" data-placement="top" data-content="<h2>Safaripark</h2>">Safaripark</button>
<button class="btn btn-vp btn-pointer" data-container="body" data-toggle="popover" data-placement="top" data-content="<h2>Vakantiepark</h2>">Vakantiepark</button>
<button class="btn btn-sl btn-pointer" data-container="body" data-toggle="popover" data-placement="top" data-content="<h2>Speelland</h2>">Speelland</button>
<button class="btn btn-ec btn-pointer" data-container="body" data-toggle="popover" data-placement="top" data-content="<h2>Event Center</h2>">Event Center</button>
<div class="highlight-layer hl-ec"></div>
</div>
I tried to create a Fiddle but never added external Resources so the error it gives me is the following: Uncaught Error: Bootstrap's JavaScript requires jQuery
You could use the callback for removeClass to filter out the classes you want to remove based on a starting string etc
$('.highlight-layer').removeClass(function(i, klass) {
var remove = 'hl-';
return klass.split(/\s/).filter(function(k) {
return k.indexOf(remove) === 0;
}).join(' ');
});
removeClass doesn't accept a selector, it accepts a space-delimited series of classes to remove. So just list the ones you want to remove:
$('.highlight-layer').removeClass('hl-sp hl-vp hl-sl hl-ec');
It's fine if one (or indeed all) of them aren't on any given element; the one(s) that is/are will be removed.
Example:
$("input[type=button]").on("click", function() {
$(".highlight-layer").removeClass("hl-sp hl-vp hl-sl hl-ec");
});
.hl-sp {
color: red;
}
.hl-vp {
color: green;
}
.hl-sl {
color: blue;
}
.hl-ec {
color: grey;
}
<div>
<input type="button" value="Remove">
<div class="highlight-layer hl-sp">Starts out with hl-sp</div>
<div class="highlight-layer hl-vp">Starts out with hl-vp</div>
<div class="highlight-layer hl-sl">Starts out with hl-sl</div>
<div class="highlight-layer hl-ec">Starts out with hl-ec</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Working Fiddle.
You have just to change one line in your code and it will works check the code below that remove all the classes and keep just the essential one highlight-layer :
$('.btn-pointer').click(function() {
$('.highlight-layer').removeClass().addClass('highlight-layer');
});
Like this the element classes are always two highlight-layer and clicker button class.
Hope this helps.
You can add extension to jQuery which would loop through elements returned from selector and remove list.
Following is a basic example:
JSFiddle.
$.fn.removeClasses = function(regex) {
Array.prototype.forEach.call(this, function(el) {
var class_list = el.classList;
var filtered_list = Array.prototype.filter.call(class_list, function(c) {
return regex.test(c);
});
console.log(filtered_list);
$(el).removeClass(filtered_list.join(" "))
});
}
$(".foo").on("click", function() {
var reg = /^test/;
$(this).removeClasses(reg);
});
.test {
background: #333;
}
.test1 {
color: #fff;
}
.test2 {
border: 1px solid gray;
}
.test3 {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="test test1 test2 test3 foo">
Test
</div>
I have a signup page with two buttons. When one button is clicked, the corresponding container displays. When a button is clicked the bg color changes and sticks, even after I select the other button. Then, if I select the button again it goes back to its unselected/inactive color.
I want the clicked button to maintain its active color, but only if the other button is not clicked. If the other button is clicked, I want the first button to go back to its original bg color.
Here is the js:
<script type = "text/javascript">
function displayForm(c) {
if (c.value == "1") {
document.getElementById("container1").style.display = 'inline';
document.getElementById("container2").style.display = 'none';
} else if (c.value == "2") {
document.getElementById("container1").style.display = 'none';
document.getElementById("container2").style.display = 'inline';
} else {}
}
</script>
And here are the buttons (sorry for formatting issues):
<!--SELECTION BUTTONS-->
<form>
<div class="control-group">
<label class="control-label">Are you a:</label>
<div class="controls">
<p><div id="account-type" name="account-type" class="btn-group selection-buttons" data-toggle="buttons-radio">
<button value="1" type="button" name="formselector" onClick="displayForm(this)" id="button1" class="btn btn-info">
Buttons1</button>
<button value="2" type="button" name="formselector" onClick="displayForm(this)" id="button2" class="btn btn-info">Button2</button>
</div></p>
</div>
</div>
</form>
Here is the CSS (using Bootstrap):
/* SWITCH BUTTONS */
.selection-buttons button{
width: 140px;
height: 60px;
color: #FFF;
background-color: #FFB10D;
border-color: #fff; /* e59f0b */
}
.selection-buttons .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info {
color: #FFF;
background-color: #00CC66;
border-color: #fff; /* 00b75b */
}
Thank you!!
A pretty simple potential solution. In your JS just add the following lines:
function displayForm(c) {
for (var i = 1; i <= number_of_buttons; i++) {
if (document.getElementById("button"+i) {
document.getElementById("button"+i).className = "active";
} else {
document.getElementById("button"+i).className = "inactive";
}
}
}
Then just use your CSS file to set the formatting you want for the active and inactive classes. If you don't have 1000+ buttons, this will be efficient enough for your needs.