I have a table which is copied verbatim from one div to another. I did this so that I could have a fixed table header with a scrollable body. The first div id is #headdiv and the second div class is .bodydiv, and the contents of #headdiv are duplicated into .bodydiv with this function:
$('.bodydiv').html($('#headdiv').html());
And then I modify the display/visibility properties of the two divs to make them look like one table. See here for the html and css: http://jsfiddle.net/jbswetnam/KNnAd/5/
Now, what I want to do is make some help text appear when the user hovers over cells in the table. I can do this with the following functions using element id's:
//Copied and modified from https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Closures
function showInfo(info, display) {
document.getElementById('infoBox').innerHTML = info;
document.getElementById('infoBox').style.display = display;
}
function makeInfoCallback(info, display) {
return function() {
showInfo(info, display);
};
}
function setupInfo() {
var infoText = [
{'id': 'header', 'info': 'Header Row'},
{'id': 'alpha', 'info': 'Alpha'}
];
for (var i = 0; i < infoText.length; i++) {
var item = infoText[i];
document.getElementById(item.id).onmouseover =
makeInfoCallback(item.info, "");
document.getElementById(item.id).onmouseout =
makeInfoCallback("", "none");
}
}
setupInfo();
As you can see at http://jsfiddle.net/jbswetnam/KNnAd/5/, when you hover over the table header, the text "Header Row" appears. What I'm trying to do is make the text "Alpha" appear when you hover over the cell that says "Alpha".
I know why the function works in the header and not the body. The header has an id which is referenced in the function above, whereas the body cells that you see are copied from #headdiv and therefore their id's are not valid. But I don't know enough about Javascript to know how to fix the problem. Using classes instead of id's doesn't work. I have a feeling that I can refactor the whole script using this and perhaps calling the function out of each cell, but I just don't know how to do that.
Any help would be appreciated!
Got it done with this code:
function makeInfo() {
$('.info').hover(
function() {
$('#infoBox').html($(this).attr('info'));
$('#infoBox').css('display', '');
},
function() {
$('#infoBox').css('display', 'none');
});
}
makeInfo();
You can see the updated HTML at the same jsfiddle.
Related
I need to filter DIVs with cards inside by their categories.
In my issue it works only with letters. I think problem is in Javascript, but I cant see it.
Do you know what it is?
I created 5 buttons with exact categories 'a', 'b' 'c' etc.
If I want to show only category 'A', I'll use data-cat="a" in div.
If inside div is only one letter, it work fine, but If I put div with cards and images inside and tag them as data-cat="a", their visibility is changing to "none". So, if I press button to filter category A I can see only letters without a card inside it. If you don't understand what I mean try Live Preview: http://filter.8u.cz
I want to see shopping card when I click on exact category.
<!--This one works-->
<div class="portfolio-item" data-cat="a">A</div>
If I put another div with card inside, it's not visible.
var Portfolio = {
sort: function (items) {
Portfolio.hideAll($('#portfolio-content *'));
Portfolio.showAll(items);
},
showAll: function (items) {
items.fadeIn(700);
},
hideAll: function (items) {
items.hide();
},
doSort: function () {
$('div', '.button-group').on('click', function () {
var $a = $(this);
if (!$a.is('#all')) {
var items = $('div[data-cat=' + $a.data('cat') + ']', '#portfolio-content');
Portfolio.sort(items);
} else {
var items = $('#portfolio-content *');
Portfolio.hideAll(items);
Portfolio.showAll(items);
}
});
}
};
Portfolio.doSort();
Change $("#portfolio-content *") to $("#portfolio-content .portfolio-item").
With *, you are referencing EVERY child element, no matter if it is an image, span or anything else.
By referencing .portfolio-item, you will only hide the wrappers, instead of hiding its children.
I have a page where I have a table with a class. This table sometimes occurs multiple times on the page. I need to do the same jquery function on each instance. How do I achieve that with jquery...???
Here is my jquery:
jQuery(window).load(function () {
if(jQuery('.ezfc-summary-table tr:eq(2) td:eq(1)').text()=='1 layer'){
jQuery('.ezfc-summary-table tr:eq(5)').hide();
jQuery('.ezfc-summary-table tr:eq(6)').hide();
jQuery('.ezfc-summary-table tr:eq(8)').hide();
}
});
#devlin carnate - i'm trying to do another thing, which is to take the text from one of the td's and append it to another class (product-title), which also appears multiple times. Here is what i have tried, but it only takes the text from the first td it finds, and appends it to all the following classes.
$(document).ready(function() {
$('.ezfc-summary-table').each(function(i, obj) {
var table = $(this);
if (table.find('tr').eq(2).find('td').eq(1).text() == '1 layer') {
table.find('tr').eq(5).hide();
table.find('tr').eq(6).hide();
table.find('tr').eq(8).hide();
var getpartname = $('.ezfc-summary-table tr:eq(0) td:eq(1)').text();
$('.product-title').append('<span style="padding-left: 5px;">'+getpartname+'</span>');
}
});
});
Could you help me solve this problem also...???
Thanks in advance
You can iterate over the class assigned to the tables using jQuery $.each() and hide the rows based on whether the '1 layer' text condition is met:
$(document).ready(function() {
$('.ezfc-summary-table').each(function(i, obj) {
var table = $(this);
if (table.find('tr').eq(2).find('td').eq(1).text() == '1 layer') {
table.find('tr').eq(5).hide();
table.find('tr').eq(6).hide();
table.find('tr').eq(8).hide();
}
});
});
Here is a Fiddle Demo : https://jsfiddle.net/zephyr_hex/f45umhkp/2/
I may be going in the completely wrong direction with what I'm trying to do, so I wanted to ask for help.
Background / Overview
I need to display a paragraph of text and allow a user to select one or more words from the paragraph and save their highlighted text to a database, for just their profile. Actually, hat selection of text will eventually be (1) stored with the highlight AND (2) linked up to another set of highlighted text from another paragraph (basically, I'm tying a phrase from one source to a reference source)
What I've tried...
I have tried to put each word of the paragraph into a DIV (and a unique ID) with each DIV set to float left, so that the display looks okay.
<style>
div { float: left}
</style>
and...using an example:
<div id="GEN_1_1">
<div id="GEN_1_1_1">In</div>
<div id="GEN_1_1_2">the</div>
<div id="GEN_1_1_3">beginning</div>
<div id="GEN_1_1_4">God</div>
<div id="GEN_1_1_5">created</div>
<div id="GEN_1_1_6">the</div>
<div id="GEN_1_1_7">heaven</div>
<div id="GEN_1_1_8">and</div>
<div id="GEN_1_1_9">the</div>
<div id="GEN_1_1_10">earth</div>.
</div>
Which looks like: In the beginning God created the heaven and the earth. (minus the bold)
So far, I have used the
window.getSelection()
function to determine/grab the words that have been highlighted.
I then tried using this:
if (window.getSelection)
{
selected_len = window.getSelection().toString().length;
if (window.getSelection().toString().length>0)
{
div_id = window.getSelection().getRangeAt(0).commonAncestorContainer.parentNode.id;
}
}
to get the ID's for each DIV selected, BUT I only get a single DIV ID returned right now.
Help Request:
Is there are slick way to get the ID for each DIV selected and put it into an Array, so that I can construct a SQL query to put it into the database (the query is easy)? The selected words could total up to several hundred, if not a thousand words, so I need to make sure the solution will work with a ton of words selected.
UPDATE: JSFIDDLE DEMO
I modified the code again. See if it works for you now.
$(document).ready(function () {
$(document).on('mouseup keyup', '.checked', function () {
console.log(window.getSelection());
if (window.getSelection().toString().length>0) {
var count = window.getSelection();
var arr = [];
$('.checked span').each(function(){
var span = $(this)[0];
var isT = window.getSelection().containsNode(span, true);
if(isT){
arr.push($(this).attr('id'));
}
});
console.log(arr,count.toString());
alert(arr);
alert(count.toString());
}
});
});
I created a fiddle for solution. Check it out here: http://jsfiddle.net/lotusgodkk/GCu2D/18/
Also, I used span instead of div for the text selection. I hope that won't be an issue for you. So the code works as you want. It will return the id of the parent span in which text is selected. You can modify it to save the ID into array or as per your needs.
$(document).ready(function () {
$(document).on('mouseup', '.checked', function () {
if (window.getSelection) {
var i = getSelectionParentElement();
console.log(i);
alert('parent selected: ' + i.id);
}
});
});
function getSelectionParentElement() {
var parent = null, selection;
if (window.getSelection) {
selection = window.getSelection();
if (selection.rangeCount) {
parent = selection.getRangeAt(0).commonAncestorContainer;
if (parent.nodeType != 1) {
parent = parent.parentNode;
}
}
} else if ((selection = document.selection) && selection.type != "Control") {
parent = selection.createRange().parentElement();
}
return parent;
}
Within a div wrapper with a class of "section", I have dozens of HTML elements repeated across the page that look like this:
<div class="section">
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
</div>
And each contains certain information inside. Now, what I'm trying to do is once the page loads, show only the first 5, hide the rest in a new div inserted with jQuery, and when this new div is clicked it will display the next five , and then the next five on click again, and so on until the end. The idea is that this new div will function as a button that will always be positioned at the end of the page and will respond to these orders I just mentioned. So far I've got this down:
$('.section').each(function () {
var $this = $(this),
$allArticles = $this.find('.article');
if ($allArticles.length > 5) {
$('<div/>').addClass('hidden-articles').appendTo(this).append($allArticles.slice(5));
$('.hidden-articles .article').hide();
}
});
And that hides all but the first five. But now for the rest of the process, I can't get it to work. I don't seem to be able to select properly those hidden div with class "article" and manipulate them to function the way I described above. I would appreciate it a lot if someone more experienced with jQuery could guide me in the right direction and maybe offer a snippet. Many thanks in advance!
You can use the :hidden and :lt selectors to get the functionality you are looking for..
$('.section').each(function() {
var $this = $(this),
$allArticles = $this.find('.article');
if ($allArticles.length > 5) {
$('<div/>').addClass('hidden-articles')
.appendTo(this).append($allArticles.slice(5));
$this.find('.hidden-articles .article').hide();
}
});
$('#show').on('click',function() {
var $hidden = $('.hidden-articles .article:hidden:lt(5)');
$hidden.show();
});
UPDATE
// If one one element to search
var elem = '.section' ;
hideArticles(elem);
// If Multiple Elements on the page...
$('.section').each(function() {
hideArticles(this);
});
$('#show').on('click', function() {
var $hidden = $('.hidden-articles .article:hidden:lt(5)');
$hidden.show();
});
function hideArticles(elem) {
var $this = $(elem),
$allArticles = $this.find('.article');
if ($allArticles.length > 5) {
$('<div/>').addClass('hidden-articles')
.appendTo(this).append($allArticles.slice(5));
$this.find('.hidden-articles .article').hide();
}
}
Check Fiddle
I'm currently working on a "template" creation system with html, jQuery and PHP. So the interface is very basic, buttons that currently add divs, these divs are to have content such as buttons, textareas, checkboxes and such.
When I click a button, the div is added; now i also want to store this new div ID into an array with jQuery and at the same time output this array into a separate div with the ID of overview.
My current script looks like this:
function getSteps() {
$("#template").children().each(function(){
var kid = $(this);
//console.log(kid.attr('id'));
$('div.overview').append(kid.attr('id'))
});
}
$('button').on('click', function() {
var btnID = $(this).attr('id');
$('<div></div>', {
text: btnID,
id: btnID,
class: item,
}).appendTo('div.template');
});
$(document).ready(function() {
getSteps();
});
Now, the function getSteps is where I want to retrieve the ID's of all my divs and store them into an array. When I click one of my buttons, I want them to add a div with an ID into my #template div.
I get an error in my console in chrome:
Uncaught ReferenceError: item is not defined
(anonymous function)createtemplate.php:111
f.event.dispatchjquery.min.js:3
f.event.add.h.handle.i
I'm a bit lost and would love a push into the right direction. Thank you.
You could do (to retrieve the ID's of all the divs and store them into an array. )
function getSteps() {
var ids = [];
$("#template").children().each(function(){
ids.push(this.id);
});
return ids;
}
$(document).ready(function() {
var arrayOfIds = getSteps();
});
You get that error because you're trying to use a variable called item that doesn't exist. I guess you want to give a class called item, in which case you should write
class:"item",
Also, you're appending the new divs to a element with class "template", and your getSteps function is searching for an element with id "template".
Think that with your code, the getSteps function executes once, when the DOM is ready. If you want to refresh the list of id's every time you add a div, you should do it inside your code for click event:
function getSteps() {
$('div.overview').empty();
$(".template").children().each(function(){
var kid = $(this);
//console.log(kid.attr('id'));
$('div.overview').append(kid.attr('id'))
});
}
$(document).ready(function() {
$('button').on('click', function() {
var btnID = $(this).attr('id');
$('<div></div>', {
text: btnID,
id: btnID,
class: 'item',
}).appendTo('div.template');
getSteps();
});
});