Change Toggle(); from Display:none to Visibility:hidden - javascript

This code is working successfully on the project that I am working on. The problem with this is that the elements that this code affects are positioned absolutely. When .field-name-field-pin-point it clicked the element .group dealer is hidden, but the .field-name-field-pin-point moves off of the page. Ideally, I would like the visibility to be set at none upon page load, but it would probably be easier to do that part in CSS. Here is what I am currently using:
jQuery(document).ready(function () {
jQuery('.node-202 .field-name-field-pin-point').click(function() {
jQuery(this).siblings('.group-dealer').toggle();
});
});
There will be more nodes that will be positioned differently so the full class name I provided is necessary. The markup (generally speaking) is as follows:
<div class="node-202">
<div class="group-dealer">...</div>
<div class="field-name-field-pin-point">...</div>
</div>
I am basically creating points on a map that when clicked, bring up a small window with more information about that location.
Here is a reference to my last post if you are looking for more information: Toggle Class Visibility by Clicking on another Class

I suggest your best approach is to add a css rule and just toggle a class on the elements
CSS
.group-dealer.hidden{ visibility:hidden}
JS
jQuery('.node-202 .field-name-field-pin-point').click(function() {
jQuery(this).siblings('.group-dealer').addClass('hidden');/* use toggleClass if more appropriate*/
})

Just toggle the visibility then
jQuery(document).ready(function () {
jQuery('.node-202 .field-name-field-pin-point').click(function() {
jQuery(this).siblings('.group-dealer').css('visibility', function(_,vis) {
return vis == 'hidden' ? 'visible' : 'hidden';
});
});
});

Try:
$('.node-202 .field-name-field-pin-point').click(function () {
if ($(this).siblings().css('visibility') == 'visible') {
$(this).siblings().css('visibility', 'hidden');
} else {
$(this).siblings().css('visibility', 'visible');
}
});
DEMO here.

Related

Javascript onclick menu change background colors

I have my menu like this:
https://jsfiddle.net/23r4q610/
And my code to change the selected menu button like below:
$('#bluebutton').click(function () {
$('.testul li').removeClass('selectedred selectedpurple selectedgreen selectedorange');
$('#bluebutton').addClass('selectedblue');
});
$('#redbutton').click(function () {
$('.testul li').removeClass('selectedblue selectedpurple selectedgreen selectedorange');
$('#redbutton').addClass('selectedred');
});
$('#purplebutton').click(function () {
$('.testul li').removeClass('selectedblue selectedred selectedgreen selectedorange');
$('#purplebutton').addClass('selectedpurple');
});
$('#greenbutton').click(function () {
$('.testul li').removeClass('selectedblue selectedred selectedpurple selectedorange');
$('#greenbutton').addClass('selectedgreen');
});
$('#orangebutton').click(function () {
$('.testul li').removeClass('selectedblue selectedred selectedpurple selectedgreen ');
$('#orangebutton').addClass('selectedorange');
});
Ofcourse this is bad code since it could be written much shorter. Should I go about this using just numbers so I can do some foreach, or is there a better way to do this?
This can be condensed by adding a generic click event on all buttons by using [id*="button"]. Then grab the relevant color from the nested anchor.
$('[id*="button"]').click(function(){
$('.testul li').removeClass();
$(this).addClass('selected'+$('a',this).attr('class'));
});
or
$('li').click.../*this would be the same as above*/
fiddle
In this particular case, there doesn't appear to be a good reason to add and remove classes. Just change the background color instead of adding and removing a class to do so.
$(this).css("background-color", "red");
I would avoid hard-coding the color names into the HTML IDs. Rather use a CSS class name like "selected" and describe in your CSS what that should look like. Example:
<li id="home-button" class="color-button">Home
CSS:
#home-button.selected,
#home-button:hover {
background: -webkit-linear-gradient(#78b1ff, #4881dc);
}
JS:
$('.color-button').click(function () {
$(this).toggleClass("selected").siblings(".color-button").removeClass("selected");
}
This way color information (presentation) is separated from semantic information (like "home") and JS code is daramtically shorter.
Note: this is just an advice, I have not tested it but should give you a good point to start.
You can reduce the code to only 1 click binding. Where when an element is clicked, class from all the li's is removed and then on the current clicked li, selected class is added.
$(".testul > li").click(function(){
$('.testul li').removeClass('selectedred selectedpurple selectedgreen selectedorange selectedblue');
var color = $(this).attr("id").replace("button","");
$('#'+color+'button').addClass('selected'+color);
});
Here is the updated fiddle - https://jsfiddle.net/23r4q610/2/

How to change CSS pseudo-class element using JavaScript

I want to change this image using javascript:
dance:active { background-image: url("myImage.png") }
You can use
document.getElementById(element).style.backgroundImage = url(image);
to change
#element {background-image: url(image)}
I would like to change the image of when the element is active using javascript. Thanks!
I figured it out!
You can have multiple classes in your CSS :
element.dance1 { stuff }
element.dance1:active { active stuff }
element.dance2 { stuff 2 }
element.dance2:active { active stuff 2 }
and then change the class of the element in javascript:
document.getElementById(element).className = dance1/dance2
You can try using jQuery to achive what you want. dance: active is CSS Pseudo-classes. Learn more about Pseudo-class.
The demo change the div color when mouse down and switch the color back when mouse up. Leave comments if this is not what you want.
$("#dance").on("mousedown", function () {
$("#dance").css("background", "blue");
}).on("mouseup", function(){
$("#dance").css("background", "black");
});
https://jsfiddle.net/x_li/5nkvms8q/
and jQuery can also do the following
$('#damce:checked').val();

JQuery div display, collapse

I am not a jquery specialist but I have managed to make this script working on my website:
<script>
$(document).ready(function() {
$('#open_#div_hidden_1').click(function() {
if ($('#div_hidden_1').is(':hidden')) {
$('#div_hidden_1').show(500);
$('#div_hidden_1').hide(500);
} else {
$('#div_hidden_1').hide(500);
}
});
});
</script>
Basicly it displays and collapses a div (distinguished by id), I have many divs on my wbesite that are displayed this way(its an inline code, for each div separate code) What I would like to do with it is to close all other divs (e.g. from the same class) when I open another one. Could please someone help me to modify this code so that it will collapse all other divs form the same class?
If you have multiple DIVs and class like below,
<div class="divClass">A</div>
<div class="divClass">B</div>
<div class="divClass">C</div>
then, you need to use like,
$(".divClass").click(function(){
$(".divClass").hide(500); //hiding all the element with divClass
$(this).show(500); // showing up the clicked element.
});
This might be able to you
Reference
Just a part of code
$(".header").click(function () {
$(".header").not(this).text('Expand').next().slideUp();
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function () {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});

Javascript Collapsible Menu (hide the other elements)

I have the following working Javascript function:
function collapsible(zap) {
if (document.getElementById) {
var abra = document.getElementById(zap).style;
if (abra.display == "block") {
abra.display = "none";
} else {
abra.display = "block";
}
return false;
} else {
return true;
}
}
When I use the following in html code it displays or hides the "element" div:
<li>Element</li>
Thats working fine. But the problem is, that I want to use the function for multiple links, and then the other elements, that were clicked before, stay, open.
How can I reprogram the code, so that only one div stays open and the other gets closed if i click on another link?
Thanks beforehand!
If you could use jQuery and more importantly jQueryUI accordion I think it would accomplish exactly what you're looking for.
However, without using those two, here is how I would structure it. Like mentioned above, I would use classes to modify the styles of the divs you want shown or hidden. Then the js code can just toggle those classes on each of your elements. The slightly more difficult part (without jquery) is modifying class values since in your final application you may have lots of classes on each div. This is just a very crude example to get you going.
Working JSFiddle Example
Sample DOM
<div >
<li>Element1</li>
<div id='elem1' class='myelem visible'>
Element 1 contents
</div>
</div>
<div >
<li>Element2</li>
<div id='elem2' class='myelem'>
Element 2 contents
</div>
</div>
<div >
<li>Element3</li>
<div id='elem3' class='myelem'>
Element 3 contents
</div>
</div>
Sample JS
window['collapsible'] = function(zap) {
if (document.getElementById)
{
var visDivs = document.getElementsByClassName('visible');
for(var i = 0; i < visDivs.length; i++)
{
visDivs[i].className = visDivs[i].className.replace('visible','');
}
document.getElementById(zap).className += " visible";
return false;
}
else
return true;
}
Sample CSS:
.myelem {
display: none;
}
.visible {
display: block;
}
The way to go is to create a class(or maybe two), like collapsible and active or open that has this style(display: block or none) and then you working adding or removing the class.
The logic would be:
Links that has the class collapsible when clicked would add the active or open class which would give the behavior that remains opens(or active) by css.
If you want to hide others elements you would look for the elements with the class collapsible and then remove the active(or open) class if has any.
Here is my solution: http://jsfiddle.net/g5oc0uoq/
$('.content').hide();
$('.listelement').on('click', function(){
if(!($(this).children('.content').is(':visible'))){
$('.content').slideUp();
$(this).children('.content').slideDown();
} else {
$('.content').slideUp();
}
});
show() and hide() can be used instead of slideUp() and slideDown() if you have performance issues.

One div visible and other hidden

I am no expert on programing with jQuery but I have a little bit knowledge about the language, the thing is that I want one div to be visible and the other one hidden, as soon as you click the other div it should slide down and the first one should be hidden.
The bug is that if you press one div atm is messes up.
$(document).ready(function () {
$('#link').click(function () {
if ($('.todo-post').is(":hidden")) {
$('#date-visible').slideUp("slow");
$('#date-hidden').slideDown("slow");
$('#tick-hidden').slideDown("slow");
$('.todo-post').slideDown("slow");
} else {
$('.todo-post').slideUp("slow");
$('#date-hidden').slideUp("slow");
$('#tick-hidden').slideUp("slow");
$('#date-visible').slideDown("slow");
}
});
});
That's the code I'm using at the moment, It works for one div there is text everywhere if I add another div, it gets messy. I believe that the code can be re-made so it works properly but sadly I do not know how and I have been searching the web for a while now.
LINK TO MY WEBSITE
You can do this with less code
$(document).ready(function () {
$('#link').on('click', function () {
$('#date-visible, #date-hidden, #tick-hidden, .todo-post').slideToggle("slow");
});
});
Basically what is happening is that our elements have position absolute so if you add this css it will work:
div.todo-avatar-date-hidden {
position: static;
}
div.todo-tick {
position: static;
}
div.todo-post {
position: static;
}
Also you need to put it relatively near the bottom of your css or it will be overridden by the previous code so I advise to go to each element in the css that I have shown and removing the line that makes the element absolute
Edit
$('#link').click(function () {
if($('#date-visible').is(':hidden')) {
if(!($('#date-visible-2').is(':hidden'))) {
$('#date-visible-2, #date-hidden-2, #tick-hidden-2, .todo-post-2').slideToggle("slow");
}
}
$('#date-visible, #date-hidden, #tick-hidden, .todo-post').slideToggle("slow");
});
$('#link-2').on('click', function () {
if($('#date-visible-2').is(':hidden')) {
if(!($('#date-visible').is(':hidden'))) {
$('#date-visible, #date-hidden, #tick-hidden, .todo-post').slideToggle("slow");
}
}
$('#date-visible-2, #date-hidden-2, #tick-hidden-2, .todo-post-2').slideToggle("slow");
});
IDs should be unique, no two elements can have the same id in a same page. You are using same id like "date-visible" in your HTML page. Change them and then code accordingly.

Categories