Click on button to toggle display of another div - javascript

I have a code that works perfectly to move elements from top, left, right or bottom sides, but seems to be, that it doesn't work with display property, here's my javascript code:
$('#icon-for-search').click(function () {
var targetValue;
if ($('#search-wrapper').css('top') == "0px") {
targetValue = '55px';
} else {
targetValue = '0px';
}
$("#search-wrapper").animate({
top: targetValue
}, 500);
});
I have a button with an id called "icon-for-search" and it toggles perfectly the top value of the #search-wrapper if it's clicked, but if I change it to display: block / none it doesn't work. Any particular reason? could someone explain me?
$('#icon-for-search').click(function () {
var targetValue;
if ($('#search-wrapper').css('display') == "none") {
targetValue = 'block';
} else {
targetValue = 'none';
}
$("#search-wrapper").animate({
display: targetValue
}, 500);
});

jQuery.animate works only with numeric CSS properties. You can just toggle element:
$('#icon-for-search').click(function () {
$('#search-wrapper').fadeToggle('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="icon-for-search">Search Icon</div>
<div id="search-wrapper">Search Wrapper</div>

Related

Close menu on click outside - Vanilla JS

I created a side menu, which displays and hides when clicking the menu button. Now, I would like that the menu closes when I click outside the menu, but I cannot figure out how to do it.
I have tried adding a clicklistener to the body, but this disables the menu completely. I also thougt about getting the ID of the clicked element anywhere in the body and close the menu if clickedElement != sideBar && sideBar.style = "200px", but I cannot get it to work. Can someone help me out here? I would like to find a solution without JQuery.
menuBtn.addEventListener("click", function () {
if (sideBar.style.width == "200px") {
sideBar.style.width = "0px";
setTimeout(function () {
menuItems.style.display = "none";
}, 1000);
} else {
sideBar.style.width = "200px";
menuItems.style.display = "block";
}
});
You can add an event listener to the parent container and check if the click's target is inside the element or not, something like:
document.addEventListener("click", (e) => {
if (box.contains(e.target)) {
result.innerHTML = "inside";
} else {
result.innerHTML = "outside";
}
});
#box {
width: 100px;
height: 100px;
background-color: dodgerblue;
}
<div id="box"></div>
<div id="result"></div>

Cannot hyperlink an image in a slideshow for some reason

I have a javascript slideshow. I added to my page and it works great. I'm not a javascript developer and got the solution online. However I need each image to link somewhere and despite how simple it should be, I cannot get it to work. When I add a tag the image disappears...can anyone help? Maybe add an additional config parameter to the javascript code where a URL could be entered?
(function($) {
"use strict";
$.fn.sliderResponsive = function(settings) {
var set = $.extend({
slidePause: 5000,
fadeSpeed: 800,
autoPlay: "off",
showArrows: "on",
hideDots: "on",
hoverZoom: "on",
titleBarTop: "off"
},
settings
);
var $slider = $(this);
var size = $slider.find("> div").length; //number of slides
var position = 0; // current position of carousal
var sliderIntervalID; // used to clear autoplay
// Add a Dot for each slide
$slider.append("<ul></ul>");
$slider.find("> div").each(function() {
$slider.find("> ul").append('<li></li>');
});
// Put .show on the first Slide
$slider.find("div:first-of-type").addClass("show");
// Put .showLi on the first dot
$slider.find("li:first-of-type").addClass("showli")
//fadeout all items except .show
$slider.find("> div").not(".show").fadeOut();
// If Autoplay is set to 'on' than start it
if (set.autoPlay === "on") {
startSlider();
}
// If showarrows is set to 'on' then don't hide them
if (set.showArrows === "on") {
$slider.addClass('showArrows');
}
// If hideDots is set to 'on' then hide them
if (set.hideDots === "on") {
$slider.addClass('hideDots');
}
// If hoverZoom is set to 'off' then stop it
if (set.hoverZoom === "off") {
$slider.addClass('hoverZoomOff');
}
// If titleBarTop is set to 'on' then move it up
if (set.titleBarTop === "on") {
$slider.addClass('titleBarTop');
}
// function to start auto play
function startSlider() {
sliderIntervalID = setInterval(function() {
nextSlide();
}, set.slidePause);
}
// on mouseover stop the autoplay
$slider.mouseover(function() {
if (set.autoPlay === "on") {
clearInterval(sliderIntervalID);
}
});
// on mouseout starts the autoplay
$slider.mouseout(function() {
if (set.autoPlay === "on") {
startSlider();
}
});
//on right arrow click
$slider.find("> .right").click(nextSlide)
//on left arrow click
$slider.find("> .left").click(prevSlide);
// Go to next slide
function nextSlide() {
position = $slider.find(".show").index() + 1;
if (position > size - 1) position = 0;
changeCarousel(position);
}
// Go to previous slide
function prevSlide() {
position = $slider.find(".show").index() - 1;
if (position < 0) position = size - 1;
changeCarousel(position);
}
//when user clicks slider button
$slider.find(" > ul > li").click(function() {
position = $(this).index();
changeCarousel($(this).index());
});
//this changes the image and button selection
function changeCarousel() {
$slider.find(".show").removeClass("show").fadeOut();
$slider
.find("> div")
.eq(position)
.fadeIn(set.fadeSpeed)
.addClass("show");
// The Dots
$slider.find("> ul").find(".showli").removeClass("showli");
$slider.find("> ul > li").eq(position).addClass("showli");
}
return $slider;
};
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="why">
<div class="slider" id="slider1">
<div style="background-image:url(https://via.placeholder.com/150/0000FF); background-color: #e0e1dd;"></div>
<div style="background-image:url(https://via.placeholder.com/150/FF0000); background-color: #e0e1dd;"></div>
<div style="background-image:url(https://via.placeholder.com/150/00FF00); background-color: #e0e1dd;"></div>
<div style="background-image:url(https://via.placeholder.com/150/000000); background-color: #e0e1dd;"></div>
<i class="left" class="arrows" style="z-index:2; position:absolute;"><img src="cps-images/home-circle-left.png" id="lefticon"></i>
<i class="right" class="arrows" style="z-index:2; position:absolute;"><img src="cps-images/home-circle-right.png" id="righticon"></i>
</div>
<script src="cps-js/nbi-home-promo-slider.js"></script>
</div>
You can add this to the bottom of your page, before the </body> tag:
<script>
function visit(url){
window.open(url, '_self');
}
</script>
Then you can add your links to the div like this:
<div style="background-image:url(cps-images/home-slider1a.png); background-color: #e0e1dd;" onclick="visit('https://www.google.com')"></div>
Other solution would be to delete the background-images and just use regular "img" elements inside the "div" and then wrap them both inside "a" element.
In this case "img" should have the following styling:
img {
width: 100%;
height: 100%;
background-size: cover;
}

Why can I only change the css style once in javascript?

I want to be able to change the backgroundColor of a box between multiple colors using js but I cannot seem to find a way. Is it possible?
window.onload = function() {
var example=document.getElementById("example");
var click=0;
example.addEventListener("click", func);
function func(){
if (click===0){
example.style.backgroundColor=("red");
click=1;
}
if (click===1){
example.style.backgroundColor=("blue");}
click=0;
}
}
Your code checks to see if the value is zero. When it is, it sets it to one. Right after that if statement you see if it is one and set it back to zero.
You need to use else if or just else so it does not evaluate the next if statement.
function func(){
if (click === 0){
example.style.backgroundColor = "red";
click = 1;
}
//else if (click === 1) {
else {
example.style.backgroundColor = "blue";
click = 0;
}
}
Personally I would just toggle a class
var elem = document.querySelector("#test")
elem.addEventListener("click", function () {
elem.classList.toggle("on");
});
div.example {
background-color: blue;
}
div.example.on {
background-color: lime;
}
<div id="test" class="example">Click Me</div>

Javascript/JQuery Nested if statements not working correctly

JSFiddle demonstrating problem (pretty hard to see with the corner box)
I have 4 elements that are linked to each button. When the button corresponding with the section is pressed, it should check that none of the other 3 elements are visible. If another section is visible, it should slide it up before sliding down the desired section.
I thought the best way to do this was nested if statements (if b is visible then if c is visible and so on). At the moment, it works for the first 2 elements, this being because the first if statement corresponds to each of them. However for the others, it's as if it doesn't even get past the first statement and just slides down the section anyway, resulting in multiple sections being open.
Am i using nested if statements incorrectly or is it something that isn't compatible? I don't know if it would be better to hide the sections using jquery instead of css, but i assumed it would work regardless. If I've missed anything out, feel free to ask.
Thanks
(Javascript Code)
$(document).ready(function(){
$("#web-design").click(function(){
if ($("#graphic-design-slide").css("visibility") == "hidden") {
if ($("#branding-slide").css("visibility") == "hidden") {
if ($("#film-production-slide").css("visibility") == "hidden") {
$("#web-design-slide").slideDown();
} else {
$("#film-production-slide").slideUp();
$("#web-design-slide").slideDown();
}
} else {
$("#branding-slide").slideUp();
$("#web-design-slide").slideDown();
}
} else {
$("#graphic-design-slide").slideUp();
$("#web-design-slide").slideDown();
}
});
$("#graphic-design").click(function(){
if ($("#web-design-slide").css("visibility") == "hidden") {
if ($("#branding-slide").css("visibility") == "hidden") {
if ($("#film-production-slide").css("visibility") == "hidden") {
$("#graphic-design-slide").slideDown();
} else {
$("#film-production-slide").slideUp();
$("#graphic-design-slide").slideDown();
}
} else {
$("#branding-slide").slideUp();
$("#graphic-design-slide").slideDown();
}
} else {
$("#web-design-slide").slideUp();
$("#graphic-design-slide").slideDown();
}
});
$("#branding").click(function(){
if ($("#web-design-slide").css("visibility") == "hidden") {
if ($("#graphic-design-slide").css("visibility") == "hidden") {
if ($("#film-production-slide").css("visibility") == "hidden") {
$("#branding-slide").slideDown();
} else {
$("#film-production-slide").slideUp();
$("#branding-slide").slideDown();
}
} else {
$("#graphic-design-slide").slideUp();
$("#branding-slide").slideDown();
}
} else {
$("#web-design-slide").slideUp();
$("#branding-slide").slideDown();
}
});
$("#film-production").click(function(){
if ($("#web-design-slide").css("visibility") == "hidden") {
if ($("#graphic-design-slide").css("visibility") == "hidden") {
if ($("#branding-slide").css("visibility") == "hidden") {
$("#film-production-slide").slideDown();
} else {
$("#branding-slide").slideUp();
$("#film-production-slide").slideDown();
}
} else {
$("#graphic-design-slide").slideUp();
$("#film-production-slide").slideDown();
}
} else {
$("#web-design-slide").slideUp();
$("#film-production-slide").slideDown();
}
});
$("#contactFormTitle").click(function(){
if ($("#contactFormArea").css("visibility") == "hidden") {
$("#contactFormArea").slideDown();
} else {
$("#contactFormArea").slideUp();
}
});
});
Your should add class to your container and before showing the desired container, hide all container with that class.
Example
<div class="accordion">
Content
</div>
<div class="accordion">
Content
</div>
<div class="accordion">
Content
</div>
$('.accordion').click(function() {
$('.accordion').slideUp();
$(this).slideDown();
});
Your example
$("#web-design").click(function(){
$(".div-to-hide").slideUp();
$("#web-design-slide").slideDown();
});
$("#graphic-design").click(function(){
$(".div-to-hide").slideUp();
$("#graphic-design-slide").slideDown();
});
<div class = "serviceSliderFilmProduction div-to-hide" id = "film-production-slide">
div-to-hide class is added to your container
Add a slider class (or any other) to each container and link the container with button using data attribute:
Button:
<button class="serviceButton displayed" data-id="#web-design-slide">Find Out More!</button>
Container:
<div class="slider serviceSliderWebDesign" id="web-design-slide">
...
</div>
Script:
$(".serviceButton").click(function(){
// grab the container id from data-id attribute of the button:
var el_id = $(this).data('id');
$('.slider:not('+el_id+')').slideUp('slow', function(){
$(el_id).slideDown();
});
});
DEMO
If you want to also toggle container on click, use slideToggle():
$(".serviceButton").click(function () {
var el_id = $(this).data('id');
$('.slider:not(' + el_id + ')').slideUp();
$(el_id).slideToggle();
});
DEMO

Switch animation through 'If Statement' in jQuery

I have some code in jQuery in which I want to make a switch animate on or off by clicking on a div. Here is the code. When I test it, it doesn't work. However if I remove toggle = true on line 7, it just works one way and I can't turn it back off.
$(document).ready(function () {
$("#switch").click(function () {
var toggle = false;
if (toggle == false) {
$("#circle").css("left", "27px");
$("#white_rect").attr("src", "green_rect.png");
toggle = true;
}
if (toggle == true) {
$("#circle").css("left", "1px");
$("#white_rect").attr("src", "white_rect.png");
toggle = false;
}
});
});
You need to declare the toggle variable outside of the click handler... else in every click call the variable will get reinitialized so the value of the variable will always be false.
$(document).ready(function () {
//declare it here
var toggle = false;
$("#switch").click(function () {
if (toggle == false) {
$("#circle").css("left", "27px");
$("#white_rect").attr("src", "green_rect.png");
toggle = true;
//also don't use a separate if block here as it will be affected by the execution of the above if block
} else {
$("#circle").css("left", "1px");
$("#white_rect").attr("src", "white_rect.png");
toggle = false;
}
});
});
$(document).ready(function () {
//declare it here
var toggle = false;
$("#switch").click(function () {
if (toggle) {
$("#circle").css("left", "1px");
$("#white_rect").attr("src", "white_rect.png");
} else {
$("#circle").css("left", "27px");
$("#white_rect").attr("src", "green_rect.png");
}
toggle = !toggle;
});
});
It is better to strictly divide appearance and logic. So use .classes and backgounded <div>s instead of <img>. Then you won't need any state variables and code shall be more simple.
HTML:
<div class="container">
<div class="switch off"></div>
</div>
CSS:
.container {
width:100%; height:100px; padding:40px; text-align:center;
}
.container .switch {
width:94px; height: 27px; display:inline-block; background-color:pink; cursor:pointer;
}
.container .switch.on {
background: url('http://squad.pw/tmp/img/01-on.png') no-repeat 0 0;
}
.container .switch.off {
background: url('http://squad.pw/tmp/img/01-off.png') no-repeat 0 0;
}
JS:
$('.switch').click(function() {
// Do visual logic
$(this).toggleClass('on');
$(this).toggleClass('off');
// Do business logic
window.toggle = !window.toggle;
});
Here is FIDDLE

Categories