First of all this is how the script works: jsfiddle
The 'searchList' setting specifies the content that will be searched. In this case it is searchable tr. Finally, the 'searchItem' setting allows to dive in and specify an individual element to search. In this case, I use 'td'.
In this fiddle
I have a list of thumbnail images with some informations, what I want to do is to be able to search for "something" and then to show the image and the text related to that specific thumbnail.
Hope you understand what I'm trying to achieve.
Out on a limb, but your selector for searchList looks wrong:
'searchList' : '.imgscontainer portfolio-v6-items ',
Surely that second class should have a dot before it, and they're on the same element, so no space:
class="imgscontainer portfolio-v6-items"
Related
I'm using the Web Scraper tool from webscraper.io.
I'm trying to scrape all of the issues from Marvel and add child selectors to scrape the issues, characters, illustrators, etc.
http://www.comicbookdb.com/publisher.php?ID=4#A
When I click on one of the titles, it instead clicks on the entire left side of the page (titles from A-M).
How do I modify the CSS selector in order to only choose specific titles? I tried changing the start URL but it didn't work.
Here is what they have:
table:nth-of-type(2)
td:nth-of-type(1)
a:nth-of-type(n+2)
You would iterate through each a inside the parenting table. You would then be able to look at the first letter of the html inside the a element. You can do something with that letter, not sure if you want to only select A-M or if that's what it's doing. If you only want titles with a, you would simple compare the first char to 'a' and if it matches, then select that element, otherwise don't.
I'm doing a project using Wikipedia API. Typing a word in seach bar displays a list of items. Like in the picture below.
When a user hover over "more" div an additional content is dispalyed below. like that.
However some items in blue color do not containany information, that is, empty. So i want for those items which do not contain any additional information do not show "more" div. So i have written a code. But unfortunately it does not work.
if ($('.list-container>div.titleDesc>p').is(':empty')) {
$(".show-more").hide();
}
Cannot figure out what is wrong so will appreciate any help. If you need more information please refer to my project in Codepen.
jQuery :empty() is a selector; hence, it works on jQuery elements. So, you need to update this line:
$(this).text().is(':empty')
With this line:
$(this).is(':empty')
Here is a Working Demo, I have just updated this JS line, and add a container div element.
You can use like this
$('.list-container>div.titleDesc>p').each(function() {
if ($(this). text() == "" ) {
$(this). hide() ;
}
} )
You need to use this code after printing searching results
I have a JSON feed and I extract the values to populate a select menu with product sizes, colours/thumbnails, and get the values in an object, on submit.
What I need is to select an image by default, if its title is matching a value of a variable declared and initialised at the top (e.g. var initialColour = "Wheat";). So if initialColour is "Brown", the image with the title "Brown" should be selected by default and the sizes in the dropdown menu should reflect the selection.
This is what I am trying:
if(mainImg.attr('title') == initialColour) {
$(this).addClass("active");
}
This is on line 27 on jsfiddle link below.
JSFIDDLE COMPLETE DEMO
p.s. I would also appreciate any hints with regards the structure, I know its a mess.
Is this fiddle does what you want?
I changed some code in two places, I left the original lines there as a reference.
Basically, I assigned the image directly to mainImg. Then use that when adding the class too. Also, you missed a couple of 's in the image html here:
$("<img src="+constructImageURL(mainImgID)+" id="+mainImgID+" class='colourThumb' title="+colour+" data-value='"+colour+"'> ")
Part of the issue is that you're trying to set the active thumbnail within the for loop, when instead, a JQuery attribute selector can be used:
$("#colourId .colourThumb[title='"+initialColour+"']").each(function() {
$(this).addClass("active");
});
I've updated the original Fiddle showing that once all dynamic elements have been created, the statement above will do the trick. (Line 87)
In terms of style, it may be worth looking at one of the data binding/templating frameworks (e.g. KnockoutJS) which will make things a lot clearer in the code. There's a learning curve, but it is worth it for what you're doing.
My main mission: Is to get the text of the next and the previous objects to the chosen object - To display the image (and its titles) Previous & Next.
Before that I have a problem: to get text of a selected object, from an index to a variable.
The problem: Every time I pick a random object, the variable does not change but the text is added to the existing text in the index.
I made a DEMO, would appreciate your help.
$(document).ready(function hintProject(){
$('#nextProject, #prevProject').click(function(){
subtitle = null;
subtitle = $('#client-sub.active').justtext();
$('#next_target_title').text(subtitle);
alert (' text::: ' + subtitle );
});
});
It looks like jQuery simply can't find the objects you're specifying. I don't think the problem is with the snippet in the question. I think the problem is with your document ready function.
To debug, try simplifying your problem by cutting out all of the additional complexity of the setup script and just set up an HTML page that is in the state you want. It's much easier to understand 1 problem than 2 or more.
Also, try simplifying how you're specifying an active item: a single class on the portfolio item would make your life easier. Then you can specify css and such based on the parent instead of adding multiple classes to multiple things inside the each portfolio item.
I'm trying to create a tooltip for a few radio button options on a page. I've got the tooltips displaying the [title] attribute easily enough, but I want to selectively format the tooltip text in a couple elements. I know I can provide content as HTML, and I've created some classes to style the content, but now the tooltips are no longer showing. I think my problem is that I am not specifying the "items" option properly. In fact, I'm not quite sure how to define my html "content" option as an item at all. Halp plays!
JS
$('#tooltip').tooltip({
tooltipClass: "tooltip-class"
items: what do?
content: "<div class="tooltip-header">header</div><div class="tooltip-description">text</div>"
});
HTML selected by JS
Thanks for reading. :)
UPDATE:
Ok! I figured it out... kinda. I was encasing my strings improperly: "<>"bad code"<>" . The solution to my problems with the content option was to put my html inside a variable and set it to content. JQuery seems to have liked that much better. My styles are showing up properly for the tooltip, but for some reason it is only working on one of three items selected for tooltips. There's nothing in the console that indicates it shouldn't work. No syntax errors, I'm selecting the correct id. I'm so confused.
I think I know what you are running into. When you use the content option you still have to include the title attribute on the element OR specify the items option as something different.
I have NO IDEA why the jQuery team decided to do this, as it seems the selector you are applying the tooltip to, would be the same thing used for the items option. Quite duplicative.
Anyway, you can change the content but make sure the element you are applying a tooltip to has the title attribute or you specify the items option with a selector which could simply match the selector you are applying the tooltip to. Odd indeed.
Example:
$('#selector').tooltip({ content: 'your content', items: '#selector' });
when you have problems with quotes, you have many options, like you said:
use another variable as you finally did
escape the "inner" qoutes with backslashes like this:
$('#tooltip').tooltip({
tooltipClass: "tooltip-class",
items: "what do?",
content: "<div class=\"tooltip-header\">header</div><div class=\"tooltip-description\">text</div>"
});
combine single and double quotes:
$('#tooltip').tooltip({
tooltipClass: "tooltip-class",
items: "what do?",
content: '<div class="tooltip-header">header</div><div class="tooltip-description">text</div>'
});
you second problem after UPDATE:
if you have created your link with id and you are applying tooltip with id selector
there can be only one link with same id in one html page! so if you declared more links with the same id, most likely it wont work.
content: "<div class="tooltip-header">header</div><div class="tooltip-description">text</div>"
This produces a syntax error.
Please do the following:
learn how to use your browser’s JS error console
learn the absolute basics of the JS syntax, and how to operate with strings/text literals