Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I'm trying to create a feature using either jQuery or vanilla JS. My feature should be able to show/hide content on click. The initial task is easy enough and I'm able to show my hidden div using jQuery toggle, but I would also like to be able to switch my FA icon as well as the link text from 'Show content' to 'Hide content'.
Use
.toggleClass(`.fa-check .fa-cross')
add one as the default.
Toggle text can be handled by either not using .toggle (using .show/.hide) instead or by including a span for each text and toggling those. Or by having 2 buttons and toggling those.
Example snippet (needs fa icons)
$(".toggle").click(function() {
$(this).toggleClass("collapsed expanded")
$(this).find("i").toggleClass("fa-chevron-up fa-chevron-down")
});
.wrapper { border: 1px solid #CCC; width: 200px; }
.wrapper .details { border-top: 1px solid #CCC; }
.wrapper .toggle.collapsed > div.details { display:none; }
.wrapper .toggle.expanded > .more { display:none; }
.wrapper .toggle.collapsed > .less { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>
<div class='toggle collapsed'><i class='fa fa-chevron-up'></i>
<div class='more'>more</div><div class='less'>less</div>
<div class='details'>details</div>
</div>
</div>
You can apply the same logic for the text to the icon as well if preferred (include 2 <i class='fa...) and then use css to show/hide them based on the class on the parent.
You can also add some css transition so it's less jumpy, or you can use $(this).find(".more,.less").slideToggle() instead of just toggle to add an effect.
There are dozens of ways to do it. Below is a step-by-step tutorial.
This should work, assuming you have already included jQuery.
<img id="imgtog" onclick="toggle()" src="someimg1.png">
<div id="content" hidden="">content</div>
<script>
var tog = false;
function toggle()
{
if(tog == false)
{
$('#content').removeAttr('hidden');
$('#imgtog').attr('src', 'otherimage2.png');
tog = true;
}
else
{
$('#content').attr('hidden', '');
$('#imgtog').attr('src', 'someimg1.png');
tog = false;
}
}
</script>
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 months ago.
Improve this question
I hope everyone's doing well.
I'm trying to create a grayscale button that changes the background of my whole website to grey, and when I click this button again, it returns to the original colour of the website.
I'm using JavaScript, HTML & CSS.
I've tried creating two functions in a button, which also didn't work out.
My code below
<button onclick="grayscale()">Grayscale</button>
<style>
body
{
-webkit-filter: grayscale(0);
filter: none;
}
</style>
<script>
function myFunction() {
document.getElementById("myImg").style.filter = "grayscale(100%)";
else function myFunction(){
document.getElementById("myImg").style.filter = "grayscale(0%)";
}
}
</script>
</button>
function grayscale() {
let img = document.getElementById("myImg");
img.classList.toggle("grey");
}
.grey {
filter: grayscale(100%);
/* other styles if I want to add them */
}
<button onclick="grayscale()">Grayscale</button>
<img src="https://picsum.photos/500" id="myImg" />
the better, simple way is to use .classList.toogle() (this make you not using if/else)
it will do the checking automatically for you. and also you can add more styling inside the class selector, and basically have more control (for example adding transitions or complex keyframe animation with the minimal js possible)
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList?retiredLocale=it
Using an image to demonstrate the grayscale effect from Freepik
<!-- Grayscale button -->
<button onclick="grayscale()">Grayscale</button>
<!-- An image to demonstrate the grayscale effect -->
<hr>
<img src="https://img.freepik.com/free-vector/abstract-colorful-fluid-background_23-2148901720.jpg?w=2000" width="200">
<!-- CSS -->
<style>
/* Remove the following three lines to remove animation */
body {
transition: filter 1s; /* Change "1s" to any time you'd like */
}
body.grayscale {
/* grayscale(1) makes the website grayscale */
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
</style>
<!-- JavaScript -->
<script>
// Grayscale function
function grayscale() {
// Toggling the class "grayscale" on the body
document.body.classList.toggle("grayscale");
}
</script>
just use one function and use an if satement
function myFunction() {
if(document.getElementById("myImg").style.filter == 'grayscale(100%)')
document.getElementById("myImg").style.filter = "grayscale(0%)";
else document.getElementById("myImg").style.filter = "grayscale(100%)";
}
body
{
-webkit-filter: grayscale(0);
filter: none;
}
<button onclick="myFunction()">Grayscale</button>
<img id='myImg' src="https://www.fillmurray.com/640/360">
Use the classList.toggle to toggle a class on and off.
function toggleGrey() {
document.getElementById("myImg").classList.toggle("greyscale");
}
.greyscale {
filter: grayscale(1);
}
<button type="button" onclick="toggleGrey()">Grayscale</button>
<br><img id="myImg" src="https://placekitten.com/200/287" alt="">
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 months ago.
Improve this question
I have a full-page menu that opens on a button click with two different sections. The content in #terms doesn't change, but the content in #links does, based on which button you click. The code itself works fine, but the jQuery feels incredibly bulky and I was wondering if anyone could suggest any ways to make it a bit cleaner. Also, the HTML structure has to pretty well stay as-is because its kind of finnicky with the styling.
I should also note that I'm not the most experienced with jQuery, so...
This is the code in question and the relevant HTML (the buttons at the top are in another part of the HTML, but I included them here to see how they're structured):
$("#codes-launch, #gfx-launch, #tuts-launch, #menu-close").click(function() {
$("#menu").slideToggle("slow");
$("body").toggleClass("scroll-lock");
});
$("#codes-launch").click(function() {
$("#codes").show();
$("#gfx, #tuts").hide();
});
$("#gfx-launch").click(function() {
$("#gfx").show();
$("#codes, #tuts").hide();
});
$("#tuts-launch").click(function() {
$("#tuts").show();
$("#codes, #gfx").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="codes-launch">Codes</button>
<button id="gfx-launch">Graphics</button>
<button id="tuts-launch">Resources</button>
<div id="menu">
<div id="terms">SOME STUFF</div>
<div id="links">
<button id="menu-close">Close</button>
<div id="codes">Codes</div>
<div id="gfx">Graphics</div>
<div id="tuts">Resources</div>
</div>
</div>
Using a data attribute and a common selector, you can replace all the clicks into one.
$("button[data-toggles]").on("click", function(evt) {
evt.preventDefault();
$("#links > div").hide();
const selector = $(this).data('toggles');
$(selector).show();
$("#menu").slideDown("slow");
$("body").addClass("scroll-lock");
});
$("#menu-close").on("click", function() {
$("#menu").slideUp("slow");
$("body").removeClass("scroll-lock");
});
#menu {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="codes-launch" data-toggles="#codes">Codes</button>
<button id="gfx-launch" data-toggles="#gfx">Graphics</button>
<button id="tuts-launch" data-toggles="#tuts">Resources</button>
<div id="menu">
<div id="terms">SOME STUFF</div>
<div id="links">
<button id="menu-close">Close</button>
<div id="codes">Codes</div>
<div id="gfx">Graphics</div>
<div id="tuts">Resources</div>
</div>
</div>
I see your not on style, probably something there that can be addressed as a separate question - probably just some odd CSS with an easy fix.
Here I used classes and did some minor structure changes to facilitate some "grouping" - I set and clear a data value to make the code slightly less and not impact the page DOM as much as it does not toggle classes (often messes with style a bit when toggled)
Totally out of scope but I added a Show/Hide just for fun that can be clicked also and set an initial state for "Show" to be hidden on that.
I also note there is no "initial" filter/group but left that out and made a comment in the code to illustrate it being set on page load.
$("#lanchers, #menu-close").on('click', function() {
$("#menu").slideToggle("slow");
$("body").toggleClass("scroll-lock");
var h = $(".up-down").filter(":hidden");
h.show();
$(".up-down").not(h).hide();
});
// just to set up the initial state
$("#lanchers").find(".up-down").first().hide();
// we could trigger on one of these on startup to set some initial target as the "visible" one
$("#lanchers").on('click', '.launcher-thing', function() {
const $targ = $(this.dataset.target);
$(".target-thing").not($targ).each(function(event) {
this.dataset.show = "nope";
});
$targ.get(0).dataset.show = "yep";
});
.scroll-lock {
border: 1px solid lime;
}
#links {
border: solid blue 1px;
background-color: #ffeeee;
}
[data-show="yep"] {
display: block;
}
[data-show="nope"] {
display: none;
}
.up-down {
background-color: #eeffee;
padding: 0.5em;
display: inline-block;
border: solid 1px #ccffcc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="lanchers">
<button class="launcher-thing" data-target="#codes">Codes</button>
<button class="launcher-thing" data-target="#gfx">Graphics</button>
<button class="launcher-thing" data-target="#tuts">Resources</button>
<span class="toggle-thing">
<span class="up-down">Show</span>
<span class="up-down">Hide</span></span>
</div>
<div id="menu">
<div id="terms">SOME STUFF</div>
<div id="links">
<button id="menu-close">Close</button>
<div id="codes" class="target-thing">Codes</div>
<div id="gfx" class="target-thing">Graphics</div>
<div id="tuts" class="target-thing">Resources</div>
</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
JS code:
function showCaption() {
var captionVis = $('.grey-box-caption-text').css('display');
if(captionVis = "none") {
$('.grey-box-caption-text').width(0);
$(this).find('.grey-box-caption-text').show().animate({'width': '464px'},750);}
} else {
$(this).find('.grey-box-caption-text').animate({'width': '0'},750,
function(){$(this).hide();});
}
};
$('.caption-container').click(function() {
showCaption();
return false;
}
);
HTML code:
<div class="one-half column home-three-img">
<div class="caption-container">
<div class="grey-box-caption">
</div>
<div class="grey-box-caption-text">This is a caption test - Hopefully this works
</div>
</div>
<img src="images/3.jpg">
</div>
This won't work and I'm a JS noob. Please help.
I'm trying to get the caption section to slide out from the left to the right. When i click on the parent container nothing happens. I'm expecting the caption to shoot out and hide when I click again.
I have Jquery loaded properly and have a document.ready function that works.
Link to the WIP http://clients.pivotdesign.com/dev/annual_report_2014/index.html
A big problem is that the value of this won't be set in your "showCaption" function. Add a return false; to the end of that function:
function showCaption(){
var captionVis = $('.grey-box-caption-text').css('display');
if (captionVis == "none") {
$('.grey-box-caption-text').width(0);
$(this).find('.grey-box-caption-text').show().animate({'width': '464px'},750);
}
else {
$(this).find('.grey-box-caption-text').animate({'width': '0'},750, function(){
$(this).hide();
});
}
};
and then change the handler assignment to:
$('.caption-container').click(showCaption);
Also note that your test in that if statement was incorrect: use == or === for comparison.
I modified the CodePen from Pointy a bit and it should do the same with less code.
Why the gray box increases the height here in the SO demo, I don't know. In this CodePen it works with-out this "bug".
function showCaption() {
var $graybox = $('.grey-box-caption-text');
$graybox.animate({
width: 'toggle',
opacity: 'toggle'
}, 'slow');
};
$(function(){
$("#wrapper").on("click", showCaption);
});
.grey-box-caption {
min-height: 3em;
min-width: 20px;
background-color: #bbb;
display: inline-block;
}
.grey-box-caption-text {
display: none;
padding: 1em;
font-family: sans-serif;
white-space: nowrap;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class=grey-box-caption>
<div class=grey-box-caption-text>
Hello World this is some text.
</div>
</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I wanted to make similar menu bar like this
But the logic stuff is kinda hard. >.<
I'm using jquery script
Here's my sample and it sucks lol..
demo
html:
<html>
<!--- to float menubar and stay on top animation XD --->
<script src="jquery.min.js"></script>
<script>
var num = 200; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});
</script>
<style>
.menu {
background:#555555;
color:#FFF;
height:50px;
position:absolute;
top:200px;
border-bottom: 10px solid #e6e6ce;
width:1100px;
margin-left:100px;
margin-right:100px;
}
.fixed {
position:fixed;
top:0;
}
</style>
<div class="menu">
Home   about  
</div>
You might also would like to look at this. Personally I found this jQuery solution quite fancy
add style="display:none;" in menu class
Then just hide and show the menu with .hide() and .show() method.
var num = 200; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menu').addClass('fixed');
$('.menu').show();
} else {
$('.menu').hide();
$('.menu').removeClass('fixed');
}
});
http://jsfiddle.net/dGVY8/
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
i have a simple sms interface written in javascript and every time i click on a call button, a calling bar will(something like a progress bar that never stops or status bar). i still have no code for it because im still a beginner..please help
i have here a link http://jsfiddle.net/XBppR/22/
function openPage()
{
if(some conditon)
opener.document.location = "http://www.google.com";
}
else{
// nothing, this else not required
}
}
this code is not working..don't mind this..for posting purposes only..
Warning: The following answer contains jQuery
So what you need to do is make two images, a foreground image to set the style:
(Can't see it very well, put it on a black background)
And a background image to create an animation effect:
Next, you must superimpose the FG on the BG.
HTML:
<div class="callbar">
<div class="callbarbg" style="width: 200px;"></div>
<div class="callbarfg"></div> <!-- later elements have higher z-index -->
</div>
CSS:
.callbarbg {
height: 20px;
background-repeat: repeat-x;
background-image: url("http://s9.postimage.org/4oij09p7j/sliding_Progress_Bar_BG.png");
background-position:right top;
}
.callbarfg {
position:relative;
top:-20px;
width: 200px;
height: 20px;
background-image: url("http://s9.postimage.org/bg8y34e73/sliding_Progress_Bar_FG.png");
}
.callbar {
overflow:hidden;
width:200px;
height:20px;
}
Finally, you must move the background image in order to make the fade in/out animation in each dot:
JS:
window.setInterval(function(){
var obj = $("parent of .callbar").find(".callbarbg");
if(!obj.data("width"))
obj.data("width", 200);
var w = obj.data("width") + 3;
obj.data("width", w).css("width", w);
var h = w%200;
if(h == 0 || h == 1 || h == 2){
obj.data("width", 200);
}
}, 33);
working jQuery jsFiddle with crude API: http://jsfiddle.net/pitaj/K25U8/6/
EDIT:
jQuery-free jsfiddle now up!
working jQuery-free jsFiddle with crude API: http://jsfiddle.net/pitaj/GpGE2/