I'm close but no cigar.
I'm creating a "slide show" with accompanying text.
I'm able to select new photos and text but am missing something simple when it comes to selecting the navDiv which selects the photos/text.
I've created a jsfiddle but in essence its:
$('.sectionGraphics').hide(); // Hide the existing photos
$('.sectionNav div').click(function(){
$('.sectionGraphics:visible').hide(); // Hide current visible section
var selected = $(this).data('target'); // Show selected section
$('#slideShow > #'+selected).show();
$('#test').html(selected).attr('class','').addClass(selected); // Show accompanying text
//BUT NOW I WANT TO MAKE SELECTED NAV BOX WHITE AND CAN'T SEEM TO SELECT IT
if (selected=="aaa"){
$('#aaa').attr('class','').css("background-color","white");
}
// $('.sectionNav div > .'+selected).css('background-color','white');
}).first().click();
The jsfiddle is here: http://jsfiddle.net/MAYO/S63wy/6/
(I didn't upload the photos - but it shouldn't matter - I changed the size to give a visual clue.)
EDIT: Updated my jsfiddle to remove duplicate div names
You can use $(this) to get the currently clicked element.
I added these two lines:
$('.sectionNav div').css('background-color', '');
$(this).css('background-color', 'white');
http://jsfiddle.net/5gqAH/
The first line removes the background color from all of the div elements, and the second line adds it again to the current element.
I think your code could use a bit of tidying up though, the above is just an example and classes might work better. You have some duplicate ids.
Updated Fiddle
jQuery
$(function(){
$('.sectionGraphics').hide();
$('.sectionNav div').click(function(){
var nav=$(this);
$('.sectionGraphics:visible').hide(); // Hide current visible section
var selected = $(this).data('target'); // Show selected section
$('#slideShow > #'+selected).show();
$('#test').html(selected).attr('class','').addClass(selected); // Show accompanying text
//WANT TO MAKE SELECTED NAV BOX WHITE
$('.sectionNav div').removeClass('selected');
nav.addClass('selected');
// $('.section_header div > .'+selected).css('background-color','red');
// $('#slideNav4').css('background-color','red');
// $('.section_header div > #SN-'+selected).html("aaa");
}).first().click();
});
CSS
.on {
background-color: white
}
.aaa {
background-color: gray
}
.bbb {
background-color: red
}
.ccc {
background-color: blue
}
.box {
display:inline-block;
width:15px;
height:15px;
border:solid 1px #000000;
margin:2px;
background-color:#CCCCCC;
}
.box:hover, .box.selected {
background-color:#FFFFFF;
}
Within your click handler, $(this) will refer to the button (div) that has just been clicked.
Updated JSFiddle here (added lines 13–14 in JS, 21-23 in CSS)
Added JS:
$(".sectionNav div").removeClass("box-selected"); // remove the white from all buttons
$(this).addClass("box-selected"); // make the clicked button white
and added CSS:
.box-selected {
background-color: #FFFFFF;
}
To be honest I could not really understand the problem.
If you want to check which small red box was clicked then you can use $(this) as in
$(this).siblings().each(function(){ $(this).css('background-color','red') });
$(this).css('background-color','white');
$(this).siblings() bit puts all the backgrounds to red or whatever colour you want.
Let me know if that was not what you wanted.
Related
I have the following code where after 3rd item I want to hide the extra items until the user clicks "Show More". When Show More is clicked "Show Less" will replace the Show More and when Show Less is clicked with will again go back to display only 3 items and display "show more". Currently its adding show more for every items and not hiding the extra items.
Here is my code and Fiddle
//SHOW ONLY 2 RESULT INITIALLY ANS HIDE the REST UNTIL USER CLICKS SHOW MORE and when SHOW LESS is clicked display show more with the 3 items.
$("div.item-b").has("div:nth-child(5)").append('<p class="showhide">Show More</p>');
$("div.item-b").click(function () {
var $this = $(this), $cards = $(this).closest('.item-b');
$cards.toggleClass('open');
$this.text($cards.hasClass('open') ? 'Show less' : 'Show more')
});
i updated your fiddle - i added a counter to each element as a id
<div id="item_'+ID+'"></div>
http://jsfiddle.net/n7305445/52/
hope it helps ;)
Check out my JSFiddle. Hopefully this can help:
The basic idea is to add your "Show More" and "Show Less" divs within the list of items and then hide the "Show Less" div. These could be links or buttons also, but I decided to use divs. Use what fits your needs.
HTML
<div class="item-b">
<div>Stuff inside 1</div>
<div>Stuff inside 2</div>
<div>Stuff inside 3</div>
<div>Stuff inside 4</div>
<div>Stuff inside 5</div>
<div class="show more">Show More</div>
<div class="show less">Show Less</div>
</div>
So next, you want to hide all the divs after the 3rd one in your list, excluding the show more/less divs, so in CSS you could do:
CSS
/* Hide the show more/less divs */
.show {
display: none;
color: blue;
}
.show:hover {
cursor: pointer;
}
/* Hide 4th div and all the ones after it */
.item-b div:nth-child(n+4) {
display: none;
}
And then in your JS, you will want to apply two click handlers (you could refactor it into one click handler if you wanted to), one for the .show.more div and one for the .show.less div. This will toggle the back and forth.
Let me know if you need further clarification.
$(document).ready(function() {
var threshold = 3;
if ($("div.item-b").children().not(".show").length > threshold) {
$(".show.more").css("display", "block");
}
$(".show.more").on("click", function() {
$(this).parent().children().not(".show").css("display", "block");
$(this).parent().find(".show.less").css("display", "block");
$(this).hide();
});
$(".show.less").on("click", function() {
$(this).parent().children(":nth-child(n+" + (threshold + 1) + ")").not(".show").hide();
$(this).parent().find(".show.more").css("display", "block");
$(this).hide();
});
});
Things have gotten out of hand for me. What started off as the simplest solution has ballooned to the point where it is no longer manageable. I need to come up with a way to simplify a process.
Currently I have a map with pins denoting specific countries world-wide. As the mouse hovers over a pin, a hidden div appears. When you mouse over another one, the previous div disappears and a new one opens. I started with like 5 of these and it wasn't an issue but I keep getting requests for more and want to manage the script in a different way now.
$('#PH1').mouseenter(function () {
$('#BO2').hide();
$('#US2').hide();
$('#UK2').hide();
$('#CH2').hide();
$('#BZ2').hide();
$('#QC2').hide();
$('#OT2').hide();
$('#VA2').hide();
$('#RU2').hide();
$('#JT2').hide();
$('#HK2').hide();
$('#SH2').hide();
$('#BJ2').hide();
$('#XI2').hide();
$('#BE2').hide();
$('#AT2').hide();
$('#FR2').hide();
$('#MX2').hide();
$('#PH2').show();
});
$('#PH1').click(function (e) {
e.stopPropagation();
});
$('#mint').click(function () {
$('#PH2').hide();
});
In this instance div id #PH1 is the pin, when the mouse enters the div it hides all of the other div's #**2 and displays the one related to #PH1, which is #PH2
This list is repeated for each DIV. Every time I need to add a new DIV I need to make each existing list longer as well as create a new one. How can this process be made much simpler?
Thats not a right way to do this, you should use classes for this. But their is a wayaround for this all you need to is add a class add class ele1 to all #**1 and ele2 to all #**2:
then
$('.ele1').mouseenter(function () {
$(".ele2").hide();
var id = this.id;
var newId = id.substring(0,2)+"2";
$("#"+newId).show();
});
Make a loop:
var all= ['#BO2', '#US2', '#UK2', '#CH2', '#BZ2', '#QC2', '#OT2', '#VA2', '#RU2', '#JT2', '#HK2', '#SH2', '#BJ2', '#XI2' , '#BE2', '#AT2', '#FR2', '#MX2', '#PH2']
all.forEach(function (i){
$(i).hide();
});
Use a class selector on all of the DIVs you want to hide/show instead of an ID.
First, add a shared class to all DIVs so we target all of them by class.
HTML: class="hidden-divs"
jQuery: $('.hidden-divs').hide();
Then show the relevant DIV.
$('#PH2').show();
Using your first example, it would look like this:
$('#PH1').mouseenter(function () {
$('.hidden-divs').hide();
$('#PH2').show();
});
You can use jquery to hide multiple divs if you can select them. For example, suppose you have a common class ".map_divs" on all your divs, you could easily do:
$(".map_divs").hide();
On a side-note, you could solve all this on CSS, using :hover. For example:
.map_divs:hover {
display: block;
}
If you can edit the div's yourself (if it is not generated by a library) I would do it like this.
Add a common class to all your divs. Then on each div, add a data attribtue to the related id.
<div class="pin" id="PH1" data-rel="PH2"></div>
Then you can have a simple function like this:
$(".pin").mouseenter(function() {
var relatedId = $(this).data("rel");
$(".pin[id$='2']").hide(); // Hide all pins with id ending in 2
$("#" + relatedId).show() //show PH2
})
Using classes might be a better option here. You can then just attach the mouseenter event on document ready to all pins. This will work for an infinite number of pins too.
$('.pin').mouseenter(function () {
$('.popup').removeClass('show');
var id = this.id.split('_')[1];
$('#popup_' + id).addClass('show');
});
.pin {
width:30px;
height:30px;
margin-bottom:20px;
background-color:red;
}
.popup {
display:none;
width:100px;
height:100px;
margin-bottom:20px;
background-color:blue;
}
.popup.show {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pin_1" class="pin"></div>
<div id="popup_1" class="popup"></div>
<div id="pin_2" class="pin"></div>
<div id="popup_2" class="popup"></div>
If your div element is ordered like below, you can get the same result using css only, which will increase speed and overall experience (especially on phones and tablets).
When "hover" the yellow squares, the popup will be visibible even when "hover" the popup.
.pin {
width:30px;
height:30px;
margin-bottom:20px;
background-color:red;
}
.popup {
display:none;
width:100px;
height:100px;
margin-bottom:20px;
background-color:blue;
}
.pin:hover + .popup {
display:block;
}
.pin.type2 {
background-color:yellow;
}
.pin.type2:hover .popup {
display: inline-block;
margin-top: 30px;
}
<div id="pin_1" class="pin"></div>
<div id="popup_1" class="popup"></div>
<div id="pin_2" class="pin"></div>
<div id="popup_2" class="popup"></div>
<div id="pin_3" class="pin type2"><div id="popup_3" class="popup"></div></div>
<div id="pin_4" class="pin type2"><div id="popup_4" class="popup"></div></div>
I am using <select> element to display a container with info. Using JQuery I display the selected container and hide the rest. In the container I have three <div> elements.
Description
Measurement in CM
Measurement in Inches.
The user has the ability to select which measurement unit to see by clicking on the different tabs. So far it all works great. It does display the info as wanted, however when I re-select different size I can not see any of the tabs info unless I click on one of them. In other words to re-create the issue:
Select size
Change the measurement units
Re-select size
Unless clicked none of the tab will show the info
To make it easier to understand I've created JSFIDDLE.
Can someone possibly have an idea how to keep the cm tab open by default even after the size was re-selected?
Try this: Its working.
http://jsfiddle.net/realdeepak/yjaoccmb/2/
$(function () {
$('#community').change(function () {
var option = $(this).find('option:selected');
var valuer = $(this).val();
$("#tabs-" + valuer).prop('checked', true);
$('#size-single1').toggle(option.hasClass('show1'));
$('#size-single2').toggle(option.hasClass('show2'));
}).change();
});
I added some new class to the input checkbox tag (.cm and .in respectively)
<div class="d-tab"><input checked="checked" id="tab-6" class="cm" name="tab-group-2" type="radio" /> <label for="tab-6"> Centimeters </label>
I also added a new function when selecting on the select size. This function to keep track which measurement is active.
$(".cm, .in").click(function(){
$(".cm, .in").removeClass("active");
if($(this).hasClass("cm")){
$(".cm").addClass("active");
else
$(".in").addClass("active");
});
Lastly I tweaked the css to show the active state
[type=radio]:checked ~ label,
.cm.active ~ label,
.in.active ~ label{
background: #dbd7d7;
z-index: 2;
}
[type=radio]:checked ~ label ~ .measurement-content,
.cm.active ~ label ~ .measurement-content,
.in.active ~ label ~ .measurement-content{
z-index: 1;
opacity: 1;
}
DEMO http://jsfiddle.net/a1jnLq49/
<span id="english">Yes</span>
<span id="spanish">Sí</span>
How can I hover over any of these and change background color to yellow on both. I can't use onmouseout() because the background color changes dynamically due to other scripts.
I'm aware that I can add a class skipping the use of jQuery -although it's a valid choice if all else fails- by using something like:
document.getElementById(id).className += " yellow";
and the css would be:
.yellow {
background-color: yellow
}
My previous solution that included onmouseout() was:
function chbg(color, id1, id2) {
document.getElementById(id1).style.backgroundColor = color;
document.getElementById(id2).style.backgroundColor = color;
}
and the HTML:
<span id="english" onmouseover="chbg('yellow', 'english', 'spanish')" onmouseout="chbg('white','english', 'spanish')">Yes</span>
<span id="spanish" onmouseover="chbg('yellow', 'english', 'spanish')" onmouseout="chbg('white','english', 'spanish')">Sí</span>
Use JQuery hover function instead.
Try this:
$(document).ready(function(){
$("span").hover(
function(){
$('span').css('background', 'yellow');
},
function(){
$('span').css('background', 'white');
});
});
JSFiddle Demo #1 (With Class)
JSFiddle Demo #2 (Without Class)
UPDATE #1
Use toggleClass() function instead.
$(document).ready(function(){
$("span").hover(function(){
$('span').toggleClass('highlight');
});
});
JSFiddle Demo
UPDATE #2
Assign a class to all the span that needs to be highlighted. For example: class="highlight". Using toggleClass() to toggle a class from CSS will add another class now. This way only span with .highlight change color.
JSFiddle Demo
This can be done with only CSS, by adjusting your HTML a bit:
<span id="bghover">
<span>Yes</span>
<span>Sí</span>
</span>
And for the CSS:
#bghover span
{
background-color: white;
}
#bghover:hover span
{
background-color: yellow;
}
So you wrap the two spans into a span or div with id bghover, which is only used as a trigger for CSS :hover. If there's no hover, all spans within #bghover are white, if there is a hover (similar to onmouseover), all spans within #bghover are white.
I am currently building a menu bar that consists of icons that show a contextual submenu when hovered over. Essentially, when hovering over an icon a popup menu/tooltip appears (with more options), but the icon itself should be clickable as well.
So far, I use the following HTML construct and jQuery for each menu item:
<div id="profile" class="menu-item">
<div id="profile-tip" class="tip">
**insert profile menu options**
</div>
</div>
<div id="search" class="menu-item">
<div id="search-tip" class="tip">
**insert search menu options**
</div>
</div>
and
$(".menu-item").hover(function() {
$(this).find("div").fadeIn("fast").show(); //add 'show()'' for IE
$(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element
$(this).find("div").hide();
});
});
What I wish to do is to change the HTML to look as follows (so I can apply an onClick link to the "profiles" div):
<div id="profile" class="menu-item" onclick="window.location = 'profile.php'"></div>
<div id="profile-tip" class="tip">
**insert menu options**
</div>
However, I don't know how to modify the jQuery to find the matching div to display when hovered over. The associated tooltip/popup menu div will always be xxxx-tip (where xxx is the name of the parent div).
As an example, I imagine it will look something like this (keep in mind I know very little about jQuery so I'm well aware this will look stupid):
$(".menu-item").hover(function() {
$.find("div").attr('id'+"-tip").fadeIn("fast").show(); //add 'show()'' for IE
$(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element
$.find("div").attr('id'+"-tip").hide();
});
});
To summarise: I need the jQuery modified to show the div based on the parent div's ID + the string "-tip"
Hopefully that isn't too confusing. Any help GREATLY appreciated :)
Not sure I understand completely what you want, but maybe try something a little more like this:
$(".menu-item").hover(
function() {
$(this).find(".tip").fadeIn("fast").show(); //add 'show()'' for IE
},
function() { //hide tooltip when the mouse moves off of the element
$(this).find(".tip").hide();
}
);
Edit: If the tip element is not a child of the menu item div, this could work:
$(".menu-item").hover(
function() {
$('#' + this.id + '-tip').fadeIn("fast").show(); //add 'show()'' for IE
},
function() { //hide tooltip when the mouse moves off of the element
$('#' + this.id + '-tip').hide();
}
);
Instead of finding the name of the div in the PARENT of the thing you're hovered over, use jQuery to find the tooltip that is a CHILD of the thing you're hovered over...search down the DOM, instead of UP.
Use jQuery's $(this) operator...
$('.menu-item').hover(function(){
$(this).find('.tip).fadeIn();
},
function() {
$(this).find('.tip).fadeOut();
});
I'm not 100% clear on the goal here but you can get your div by ID as shown here:
$(".menu-item").hover(function()
{
$(this).find(".tip").fadeIn("fast").show();
});
Or in CSS:
.menu-item .tip
{
display: none;
}
.menu-item .tip:hover,
.menu-item:hover .tip
{
display: auto;
}