I need to add informational popups to several menu items, and Im using jQuery .hover to do so. However this only works in Firefox and does not work in Safari, Chrome or Opera.
var Main = function() {
//other functions...
function _setPopups() {
$(".dt_event_title a").hover(
function(){
$(".info_popup",this).css({"display":"block"});
//$(".info_popup",this).fadeTo("normal",1);
//$(".info_popup",this).fadeIn("normal");
//$(this).find(".info_popup").fadeIn("normal");
},
function(){
$(".info_popup",this).css({"display":"none"});
//$(".info_popup",this).fadeTo("normal",0);
//$(".info_popup",this).fadeOut("normal");
//$(this).find(".info_popup").fadeIn("normal");
}
);
}
return {
//other methods...
"setPopups" : function(){ _setPopups(); }
};
}();
$(document).ready(function(){
//other method calls...
Main.setPopups();
});
My other methods are working in the context so my closure is fine. The commented-out jQuery lines represent other transformations I tried that produced the same results: works in Firefox, but not others. I'm not sure what I could be doing wrong.
FYI the .info_popup div is given a css style display:none in an external style sheet to hide it.
Any help would be appreciated.
***Here is some of the html... note this represents the output, the html is largely generated by php
<tr class="dt_event_title">
<td>
<a class="dt_event_link" href="...php generated link...">
<span class="info_icon"></span>
<span class="event_title">Title of Event</span>
</a>
<div class="info_popup">
...some php generated content
</div>
<div class="dt_event_date">
09-15-2010 02:00 pm - 02:00 pm
</div>
</td>
</tr>
Ok Here is the latest rearrangement of my code. The HTML now looks like this:
<tr>
<td>
<div class="dt_event_title">
<a class="dt_event_link" href="php generated link">
<span class="info_icon"></span>
<span class="event_title">php generated title</span>
</a>
<div class="dt_event_date">php generated date</div>
<div class="info_popup">
<div class='popup_title'>php generated title</div>
<div class='popup_date'>php generated date</div>
<div class='popup_time'>php generated time</div>
<div class='popup_arrow'></div>
</div>
</div>
</td>
</tr>
And the javascript looks like this:
var Main = function() {
function _setPopups() {
$(".dt_event_title").hover(
function(){
$(".info_popup",$(this)).fadeIn("fast");
},
function(){
$(".info_popup",$(this)).fadeOut("fast");
}
);
}
return {
"setPopups" : function(){ _setPopups(); }
};
}();
$(document).ready(function(){
Main.setPopups();
});
And still the same problem.
(Edited to use your html)
Since you are specifying a selector context (adding ,this to your selector), the .info_popup element must be inside the this element. Notice how the info_popup div is inside the a element. I'm not sure that's what you want, but it matches your code. Since your info_popup is outside the a element, use $(this).parent() as your selector.
I tossed this into a jsFiddle for you. I am using it in Chrome and it works.
Code below also:
HTML
<table>
<tr class="dt_event_title">
<td>
<a class="dt_event_link" href="...php generated link...">
<span class="info_icon"></span>
<span class="event_title">Title of Event</span>
</a>
<div class="info_popup">
...some php generated content
</div>
<div class="dt_event_date">
09-15-2010 02:00 pm - 02:00 pm
</div>
</td>
</tr>
</table>
CSS
.info_popup { display:none; }
JS
var Main = function() {
//other functions...
function _setPopups() {
$(".dt_event_title a").hover(
function(){
$(".info_popup",$(this).parent()).show(); //switched to .show() and $(this).parent()
//$(".info_popup",this).fadeTo("normal",1);
//$(".info_popup",this).fadeIn("normal");
//$(this).find(".info_popup").fadeIn("normal");
},
function(){
$(".info_popup",$(this).parent()).hide(); //switched to .hide() and $(this).parent()
//$(".info_popup",this).fadeTo("normal",0);
//$(".info_popup",this).fadeOut("normal");
//$(this).find(".info_popup").fadeIn("normal");
}
);
}
return {
//other methods...
"setPopups" : function(){ _setPopups(); }
};
}();
$(document).ready(function(){
//other method calls...
Main.setPopups();
});
Related
I need some help. As you will see in my fiddle, I am attempting to use buttons to populate a single container div with content from multiple hidden divs, depending on which button is clicked. The problem I am having is, I don't know how to access the actual content in the hidden divs to populate the container div. As of now, I am using the id attributes for the hidden divs to demonstrate which div content I would like to display in the container.
I've seen a few other posts with link <a> attributes referencing hidden content, but none so far using a button element with click functionality to change div content.
jQuery(function ($) {
$('#button1').click(function () {
$('#info').empty();
$('#info').prepend('#option1');
});
$('#button2').click(function () {
$('#info').empty();
$('#info').prepend('#option2');
});
$('#button3').click(function () {
$('#info').empty();
$('#info').prepend('#option3');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-panel">
<ul id="button-column" style="list-style: none;">
<li class="buttons"><button id="button1">Button 1</button></li>
<li class="buttons"><button id="button2">Button 2</button></li>
<li class="buttons"><button id="button3">Button 3</button></li>
</ul>
</div>
<div id="info-div">
<div id="info"></div>
</div>
<div id="hiddenDivs" style="display:none;">
<div class="info" id="option1">Box</div>
<div class="info" id="option2">Google Drive</div>
<div class="info" id="option3">Box</div>
</div>
Here is my fiddle
Here's a version that uses jquery data attributes. It reduces the redundancy and complexity and can be configured easily.
<body>
<div class="button-panel">
<ul id="button-column" style="list-style: none;">
<li class="buttons"><button id="button1" data-link="option1">Button 1</button></li>
<li class="buttons"><button id="button2" data-link="option2">Button 2</button></li>
<li class="buttons"><button id="button3" data-link="option3">Button 3</button></li>
</ul>
</div>
<div id="info-div">
<div id="info">
</div>
</div>
<div id="hiddenDivs" style="display:none;">
<div class="info" id="option1">Box</div>
<div class="info" id="option2">Google Drive</div>
<div class="info" id="option3">Box</div>
</div>
</body>
<script>
$('.buttons button').click(function (){
$('#info').empty();
$('#info').html($("#" + $(this).data('link')).html());
});
</script>
Example : https://jsfiddle.net/yvsu6qfw/3/
It sounds like maybe you were looking for using the button itself to populate data built into the button with a data attribute or something? If so you can do something like this:
HTML
<div class="button-panel">
<ul id="button-column" style="list-style: none;">
<li class="buttons"><button data-info="Box">Button 1</button></li>
<li class="buttons"><button data-info="Google Drive">Button 2</button></li>
<li class="buttons"><button data-info="Box">Button 3</button></li>
</ul>
</div>
<div id="info-div">
<div id="info"></div>
</div>
jQuery
$(document).ready(function (){
$('#button-column button').click(function (){
$('#info').html($(this).attr('data-info'));
});
});
If you want the first button to load the content from the first hidden div etc. without relying upon using the id attributes, you can use the .index() method. When you pass this as an argument it will return the index value of the click event target in the collection $("#button-column .buttons :button"). Afterwards you can pass the index value to the .get() method to retrieve the corresponding element from the collection of hidden divs $("#hiddenDivs .info").
$().ready(function(){
$("#button-column .buttons :button").on("click", function(){
$('#info').empty();
var clickedIndex = $("#button-column .buttons :button").index(this);
var hiddenInfo = $("#hiddenDivs .info").get(clickedIndex);
$('#info').prepend( $(hiddenInfo).text() );
});
});
you can use html function, without parameter gets the content of the element
with parameter replaces the content with the string parameter
$(document).ready(function (){
$('#button1').click(function (){
$('#info').html( $('#option1').html() );
});
$('#button2').click(function (){
$('#info').html( $('#option2').html() );
});
$('#button3').click(function (){
$('#info').html( $('#option3').html() );
});
});
In your code example, you do for example:
$('#info').prepend('#option1');
What you instruct to do here, is adding a text string '#option1' to an element with ID info.
What you intend to do is prepending the content of ID option1 to the element with ID info. You could do something like this instead:
$('#info').prepend($('#option1').html());
Another approach could be (but I don't know if that's relevant for you) to not clone content (since it costs you repaints) but toggle the specific elements instead. For example:
$('#option1,#option2').hide();
$('#option3').hide();
And yet another one: use data-attributes on your buttons:
Button 1
Button 2
<div id="info">
</div>
And the JS:
$('.button').on('click', function(event) {
event.preventDefault();
$('#info').html($(event.currentTarget).attr('data-text'));
});
Don't repeat yourself! To get the number out of an ID replace with "" all that is not a number using RegExp \D.
Using number from ID
Than, to get the actual content you can use $("#option"+ num).html() or $("#option"+ num).text() methods:
jsFiddle demo
jQuery(function ($) {
$('.buttons button').click(function () {
var num = this.id.replace(/\D/g,"");
$("#info").html( $("#option"+ num).html() );
});
});
Target element using data-* attribute
Alternatively you can store inside a data-* attribute the desired target selector ID:
<button data-content="#option1" id="button1">Button 1</button>
and than simply:
jsFiddle demo
jQuery(function ($) {
$("[data-content]").click(function () {
$("#info").html( $(this.dataset.content).html() );
});
});
http://api.jquery.com/html/
http://api.jquery.com/text/
If the expectation is to get same indexed hidden div content, Then the below code should work.
$(document).ready(function (){
$('.buttons button').click(function (){
$('#info').empty();
var index = $('.buttons button').index($(this));
$('#info').html($('.info:eq('+index+')').html());
});
});
I'm building a skilltree composed by node containing an hidden description
the single node is like this
<div class="node inactive-node root">
Example Skill
<div class="info">
<p class="cost">30</p>
<div class="dropdown">
<b class="caret"></b>
<div class="dropdown-menu">
Example description
</div>
</div>
</div>
</div>
the following script make obviusly show all the dropdown-menu in the page
var main = function() {
$('.dropdown-toggle').click( function() {
$('.dropdown-menu').toggle();
});
};
but the fix i tried
var main = function() {
$('.dropdown-toggle').click( function() {
$(this).children('.dropdown-menu').toggle();
});
};
is ineffective and i cant figure why.I'm tryng to select the single dropdown-menu under the clicked dropdown-toggle, but i'm failing to understand how.
It's not a child element. It's a sibling. Try using next().
$(this).next().toggle();
Or
$(this).parent().find('.dropdown-menu').toggle();
$('+.dropdown-menu',this).toggle();
Or
$('+.dropdown-menu',this).slideToggle();
I have two sections, each with 3 divs, opening on slideToggle. How can I close the other 2 divs in each section when 1 is open?
https://jsfiddle.net/koteva/mdx20uqe/2/
<div id="stage1">
<h2 id="location-1">Location</h2>
<div id="location-1t">grjryjj</div>
<h2 id="jersey-1">JERSEY </h2>
<div id="jersey-1t" style="display: none;"> ighlgkiuluil </div>
<h2 id="details-1">details</h2>
<div id="details-1t" style="display: none;">fykyuk </div>
</div>
<div id="stage2">
<h2 id="location-2">Location2</h2>
<div id="location-2t">grjryjj</div>
<h2 id="jersey-2">JERSEY2 </h2>
<div id="jersey-2t" style="display: none;"> ighlgkiuluil </div>
<h2 id="details-2">details2</h2>
<div id="details-2t" style="display: none;">fykyuk </div>
</div>
With your jsFiddle, you could replace all your js code with
$('h2').click(function(event){
var $this = $(event.target),
id = $this.attr('id');
if($('#'+id+'t').is(':visible')){ // To not slide up and down if clicking an already open element.
$this.parent().children('div').slideUp();
} else {
$this.parent().children('div').slideUp();
$('#'+id+'t').slideToggle();
}
});
as seen in this jsFiddle. This hides the content inside the same stage when you click a header, assuming you follow the same naming convention throughout your entire html code.
I would however recommend, if you can, to perhaps clean up your html a little.
Look at this jsFiddle for an example.
Unless your code has to have your current structure, I would recommend refactoring it into using similar classes and as such be able to write cleaner code.
$('.header').click(function(event){
var $this = $(event.target);
$this.siblings().slideToggle();
$this.parent().siblings().children('.content').slideUp();
});
Would with the structure in the jsFiddle html provide you with the functionality you want.
If you want to do it in simple way. You can do it as follows. its just one function written. But it is simple and line of code will be increased
$( "#details-2" ).click(function() {
$( "#location-2t").hide( "slow");
$( "#jersey-2t").hide( "slow");
$("#details-2t").show("slow");
});
For more complex div structure and the Ids are in the same format as you have specified in your sample code following code will be very useful.
<script>
$(document).ready(function(){
$("div h2").click(
function() {
var thisId = $(this).attr("id");
$("#"+thisId+"t").show("slow");
$(this).siblings("div").not($("#"+thisId+"t")).hide("slow");
});
});
</script>
I'm not sure the best way to word this, so hopefully this makes sense.
Currently, on my page, all my elements fadeIn on click. What I would like is for a few select elements in an id (#seqFade below) to fade in on their own when that parent fadeIn class is clicked.
I've figured out how to make both of these effects work on separate pages, but I can't figure out how to have them both occur on the same page / combine the two.
Here is more or less how my page is designed, and below is what I have so far for code.
HTML
<div id="content">
<div class="fadeIn">
<p>Hello</p>
</div>
<div class="fadeIn" id="seqFade">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div class="fadeIn">
Bye.
</div>
</div>
SCRIPT
$(document).ready(function(){
//hides all fadeIns
$('.fadeIn').hide();
$(document).on('click',function() {
if('#seqFade') {
//sequential fadeIn function (works)
$('span').each(function(i) {
$(this).delay(i*300).fadeIn('slow');
});
}
//fadeIn on click (works)
$('.fadeIn:hidden:first').fadeIn('slow');
})
.click();
Thank you so much in advance.
JSfiddle of full page //
JSFiddle of both effects working
Try this, just add a class on hidden at the beginning for the spans
$(document).ready(function() {
var timeOuts = new Array();
var eT=200;
function myFadeIn(jqObj) {
jqObj.fadeIn('slow');
}
function clearAllTimeouts() {
for (key in timeOuts) {
clearTimeout(timeOuts[key]);
}
}
$(document).on('click',function() {
$('#seqFade span').hide().each(function(index) {
timeOuts[index] = setTimeout(myFadeIn, index*eT, $(this));
});
});
});
http://jsfiddle.net/h67vk02w/2/
HTML
<div id="content">
<div class="fadeIn">
<p>Hello</p>
</div>
<div class="fadeIn" id="seqFade">
<span>L</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
<span>.</span>
<span>.</span>
<span>.</span>
</div>
<div class="fadeIn" id="bye">
Bye.
</div>
Javascript
$(function() {
$('.fadeIn').find('span').toggle();
$('#hello, #bye').toggle();
$(document).click(function() {
$('#hello').fadeIn('slow');
$('span').each(function(i) {
$(this).delay(i*300).fadeIn('slow', function() {
$(document).unbind('click')
.bind('click', () => $('#bye').delay(300).fadeIn('slow'));
});
});
});
});
JSFiddle: http://jsfiddle.net/6mLgu3om/3/
Or like that?
Use the classes for this (add some fade/noFade classes to elements). ID must be unique. And after that just check if the element has that class like this. Now you have basically unlimited options to do this. Just add more classes / check and do something.
$(".class_of_element").hasClass("your_class")
i have been trying to resize two windows simultaneously but for some reason it doesnt work.
i tried to catch errors but nothing.
Note: i dont want to use jquery resize since it doesnt have a fast inteval for checking resizes
JAVASCRIPT:
function _u(e){
try {
e.parent('.boss').find('.first').width( e.width() ); //tried with parent('.boss').next('.first') or directy with prev('.first')
} catch(err){alert(err);}
}
$(document).ready(function(){
$(".data").each(function(){
var resizerint;
$(this).mousedown(function(){
try {
var eee = $(this);
var resizerint = setInterval(function(){
try {
_u( eee );
} catch(err){alert(err);}
},10); // i need it 10ms
} catch(err){alert(err);}
$('.test').html('<font style="position:absolute;top:0;right:0;color:red;"> mouse DOWN </font>');
}).mouseup(function(){
try{
clearInterval(resizerint);
} catch(err){alert(err);}
$('.test').html('<font style="position:absolute;top:0;right:0;color:green;"> mouse UP </font>');
});
});
});
and HTML:
<div class="boss">
<div class="first">
<table>
<tr>
<td>
<div class="title">ONEEEEE</div>
</td>
</tr>
</table>
</div>
<div class="second">
<textarea class="data" > ONEEE TEXTY TESTY NJAMMM! </textarea>
</div>
</div>
<div class="boss">
<div class="first">
<table>
<tr>
<td>
<div class="title">TWOOOOOO</div>
</td>
</tr>
</table>
</div>
<div class="second">
<textarea class="data" > TWOOO TEXTY TESTY NJAMMM! </textarea>
</div>
</div>
<div class="text"></div>
Thank you in advance for any help you can provide.
JSFIDDLE (IF YOU SEE , THE BLUE DOESNT RESIZE WHEN MOUSEDOWN at the TEXTAREA )
http://jsfiddle.net/2sfFW/
My first answer was that there was a missing "$" but it didn't fix the problem.
Got it working to some extent, but you have to click into the text field first before it will initialize. I used your blue version as a visualizer.
The proper jquery traversal is
e.parent().parent('.boss').find('.first')
or
e.parents('.boss').find('.first')
You have to use the plural version because there are two parent divs above it. Using parent().parent() is more specific but probably not necessary in this case.
http://jsfiddle.net/aQKVD/1/
If you remove the mouseup/mousedown handlers it will initialize at document.ready instead, which I think might be what you want. You don't necessarily need to do the clearing of the variable unless you have some other need for it, since .each() creates a separate instance of the function tied to the specific div in question. Here's a version like that:
http://jsfiddle.net/aQKVD/2/
Doesn't fix it in JSfiddle, but for starters you've left off a "$". I've set up a JSfiddle link so other people can try it. http://jsfiddle.net/aQKVD/
function _u(e){
try {
e.parent('.boss').find('.first').width( e.width() ); //tried with parent('.boss').next('.first') or directly with prev('.first')
} catch(err){alert(err);}
}
$(document).ready(function(){
(".data").each(function(){
last line should be
$(".data").each(function(){