I'm trying to display a few images based on the categories they fall in. Every image falls into more than one category. I have links above the images representing each of the categories, and the idea is that when people click one of the links the images in that category are displayed and the others are hidden.
I have the following code for the category links:
<a class="cat-title" href="#" data-filter="cat-102">Category name</a>
<a class="cat-title" href="#" data-filter="cat-2">Category name</a>
<a class="cat-title" href="#" data-filter="cat-17">Category name</a>
<a class="cat-title" href="#" data-filter="cat-151>Category name</a>
Then for the images:
<a data-tags="cat-2, cat-3, cat-17, cat-101, cat-102, cat-132, cat-151" href="link">
<img src="src">
</a>
<a data-tags="cat-2, cat-102, cat-151" href="link">
<img src="src">
</a>
etc.
Now the problem is I don't know a lot about jquery, but I tried Googling for help. The problem is that I would need to filter the images not only for one tag, but for more tags (so that the image displays if any of the categories it belongs to are selected). I wasn't able to find any example online of this situation.
Any help is appreciated!
Use classes instead of data-tags.
<a class="filtered-image cat-2 cat-3 cat-17 cat-101"><img src="src"></a>
Then when the user clicks on a filter, you can do:
$(".cat-title").click(function() {
$(".filtered-image." + $(this).data("filter")).show();
return false; // Prevent default link action
});
You can do it this way:
$('.cat-title').on('click', function (e) {
e.preventDefault();
var filter = $(this).data('filter');
$('[data-tags]')
.hide()
.filter('[data-tags*="' + filter + ',"],[data-tags$="' + filter + '"]')
.show();
});
https://jsfiddle.net/b2cz2k6a/1/
Related
I have the following HTML code:
<div class="pack1">
<a class="optionButton">First option</a>
<a class="optionButton">Second option</a>
<a class="optionButton">Third option</a>
</div>
<div class="pack2">
<a class="optionButton">First option</a>
<a class="optionButton">Second option</a>
<a class="optionButton">Third option</a>
</div>
<div class="pack3">
<a class="optionButton">First option</a>
<a class="optionButton">Second option</a>
<a class="optionButton">Third option</a>
</div>
[...]
<div class="pack10">
<a class="optionButton">First option</a>
<a class="optionButton">Second option</a>
<a class="optionButton">Third option</a>
</div>
Using jQuery I would like to trigger an event on clicking the a tag with the optionButton class but I don't know how to limit the event to the div that the a tag resides in.
For example right now I have something like:
$(document).ready(function(){
$('.optionButton').click(function() {
$(".optionButton").removeClass('checked');
$(this).addClass('checked');
});
});
It works fine for the first selection, lets say when I click the First option in the pack1 div, but if I make another selection, lets say Third option in the pack3 div, the first one will disapear.
Also, there must be only one selected option for each pach.
You need to narrow down the selection of your removeClass, as right now it's selecting every occurrence of optionButton.
$(document).ready(function(){
$('.optionButton').click(function() {
$(this).siblings('.optionButton').removeClass('checked');
$(this).addClass('checked');
});
});
This will narrow it down by selecting siblings of the clicked element that have the class optionButton.
JSFiddle
EDIT: Woops, put the wrong class in there. Should be patched up now.
Because exact DOM structure is highly subject to change, your best bet is to almost always go to the parent and search your way down like so:
1) $(this).parent().find(".optionButton").removeClass("checked");
or you can simplify the selector results set (and make your code slightly more efficient) by saying:
2) $(this).parent().find(".checked").removeClass("checked");
You can also use the selector context parameter like so:
3) $(".checked", $(this).parent()).removeClass("checked");
The difference between 2 and 3 is purely syntactic. jQuery will convert 3 into 2 behind the scenes
I think this could work
$(document).ready(function(){
$('.optionButton').click(function() {
var parent = $(this).closest("div");//getting the parent content
parent.find(".optionButton").removeClass('checked');//remove the checked
$(this).addClass('checked');
});
});
I'm wanting to swap the second class of Bootstraps 'glyphicon' span, but instead of toggling the class, It's adding it behind, thus not changing the class at all.
I'm new(ish) to jQuery / Javascript and I just can't get my head around this.
Heres the
<nav class="navbar navbar-top" style="position:fixed; width:100%;">
<a class="navbar-brand" href="#">Project name</a>
<a class="navbar-brand" href="#" style="float:right;">
<span class="glyphicon glyphicon-tasks" id="whiter"></span>
</a>
And the script is below:
$('.glyphicon').click(function(){
$(this).toggleClass('glyphicon-chevron-up');
I get all the classes instead of just glyphicon-chevron-up, Im getting:
<span class="glyphicon glyphicon-tasks glyphicon-chevron-up"></span>
Removing the glyphicon-tasks class on Element inspect displays the Chevron, so some how it is being blocked and the tasks glyph isnt being swapped.
I think you want to swap glyphicon-tasks and glyphicon-chevron-up. You need to toggle both class like following.
$(this).toggleClass('glyphicon-tasks glyphicon-chevron-up');
This is because your function is set to class, which mean all elements with the given class.
To focus a specific element, provide, for example, an unique ID.
Here, you already got one.
$('#whiter').click(function() {
$(this).toggleClass('glyphicon-chevron-up');
});
I guess this can help
$('.glyphicon').click(function(){
$(this).removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-up');
}
If you want to have a bit more control, use jQuery to its fullest, apply a data variable to multiple glyphicons (chances are that you'll be checkboxes, folder icons, tree icons):
<nav class="navbar navbar-top" style="position:fixed; width:100%;">
<a class="navbar-brand" href="#">Project name</a>
<a class="navbar-brand" href="#" style="float:right;">
<span><i class="glyphicon glyphicon-tasks" data-tasks="firstCollection" data-mycolor="white" data-icontype="taskIcon"></i></span>
</a>
...plus, elsewhere in your page, another glyphicon, for example (this will not be used, affect or be affected by our code):
<i class="glyphicon glyphicon-unchecked" id="checkbox_Analytics" data-foldername="group_Analytics" data-icontype="groupCheckbox"></i>
...while, on the other hand, this will be affected by our code (because of foldername match):
<i class="glyphicon glyphicon-check" data-foldername="2014" data-icontype="childCheckbox"></i>
...and in JS, toggle their values without affecting each and every other glyphicon:
$('i[data-icontype="taskIcon"]').on('click', function() {
$('i[data-tasks="firstCollection"]').toggleClass('glyphicon-tasks glyphicon-chevron-up');
console.log("current state now displays CHEVRON UP (true/false)? ["+$(this).hasClass('glyphicon-chevron-up')+"]");
});
...
$('i[data-icontype="childCheckbox"]').on('click', function() {
$('i[data-foldername="2014"]').toggleClass('glyphicon-check glyphicon-unchecked');
// Notice that you can also access the `data-foldername` variable directly for each element which has it
var layerFolderName = $(this).closest('i').data('foldername');
console.log("Changed glyphicon chevron in: "+layerFolderName);
});
NOTE1: one style of using glyphicons, places them inside <i> tags and references them directly thusly.
NOTE2: "white" is not, in general, a good idea for an id. I recommend another data variable, data-mycolor, which might in turn be germane to your code's logic. In this example, it is set, but not really used.
I want to allow the user to change the 'theme' of the website when he clicks on theme 1 it loads a different CSS file then when the user clicks on theme 2. How is this possible?
This is what I have tierd to do with so far.
<script type="text/javascript">
window.onload = function() {
var fontButton = document.getElementById('changeFont');
fontButton.addEventListener('click', function(){
document.write('<link rel="stylesheet" type="text/css" href="/France2014/css/test.css">');
});
}
</script>
This loads the file when I click on the button, but it removes everything else inside the website and just leaves the HTML tag and CSS file, I know this because I launch the development tool inside of Google chrome.
What can I do? Is there a better way to implement this feature?I am open to suggestions.
Changing a theme is usually done by loading in another class with JQuery.
For example:
HTML:
<body id='skin' class="skin-blue">
JQuery:
$('#skin').addClass('skin-red').removeClass('skin-blue');
To change a font-size easily, consider something like this for example:
var size = 20;
function setFontSize(s) {
size = s;
$('#sidebar-menu').css('font-size', '' + size + 'px');
$('#content').css('font-size', '' + size + 'px');
}
function increaseFontSize() {
setFontSize(size + 5);
}
function decreaseFontSize() {
if(size > 5)
setFontSize(size - 5);
}
$('#inc').click(increaseFontSize);
$('#dec').click(decreaseFontSize);
setFontSize(size);
and for example a + and - button
<li class="dropdown tasks-menu">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-fw fa-plus" id="inc"></i>
</a>
</li>
</li>
<li class="dropdown tasks-menu">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-fw fa-minus" id="dec"></i>
</a>
</li>
</li>
i suggest you to add id or class onclick to <body> tag, You will have two sets of styles:
.menu{
color:black}
and after click you will add <body id="greenTheme">
#greenTheme .menu{
color:green}
i think you should have to change just the href value of stylesheet on every button click .Doing that ,will load the new CSS file without affecting the DOM elements . Hope I am clear to you .
Thanks !!
I would try the following link as a quick working example...
enter link description here
You can see it in action here...
enter link description here
Even though your attempted solution is pure JavaScript and you might not actually need it I feel the need to mention jQuery.
It should help you write less code that should be cross browser friendly too, it actually makes writing JavaScript less painful
You can put a div before the link tag and use getElementById.innerHTML and change the contents to your desired css
I want to use this two functions for one link.
onclick="toggle_visibility('form')" and
onclick="loadXMLDoc('cd_catalog.xml')"
like
<a href="#" onclick="loadXMLDoc('cd_catalog.xml')" onclick="loadXMLDoc('cd_catalog.xml')" style="text-decoration:none">
onclick="toggle_visibility('form'); loadXMLDoc('cd_catalog.xml');"
Should do the trick!
I have a link. Like this:
I want remove this title and put the title text in a data attribute. As data-title. How can i make this with jquery.
So remove the title element. And place the text of the title element. In a new title data element.
Thanks
// you'd probably wanna give an unique id to your anchor to more easily identify it
var anchor = $('a');
var title = anchor.attr('title');
anchor.removeAttr('title');
anchor.attr('data-title', title);
// set title data-title to value of title
$("a").attr("data-title", $("a").attr("title"))
// clear title
$("a").attr("title", "");
Also I would give your link a class, so this action doesn't run on every a on the entire page.
Try:
$("a").attr("data-title", $("a").attr("title"));
$("a").removeAttr("title");
User attr method to set the attribute of element. And removeAttr method to remove the attribute
$("a").attr("data-title", $("a").attr("title"));
$("a").attr("title", "");
// or
$("a").removeAttr("title");
PS: Would suggest a unique id or a class for the anchor element
<a id="1" href="#" title="Title from this link 1"></a>
<a id="2" href="#" title="Title from this link 2"></a>
var t = $("a[title='Title from this link 1']").attr("title");
$("#2").attr("title", t);
jsfiddle link : http://jsfiddle.net/NEBh4/
you can see the changes happen to the links in the result window by using firebug or any other dev tool
$(document).ready(function(){
//example code one
var tempLink = $('#link');//cash the jquery object for performance
tempLink.attr('data-title', tempLink.attr('title')).removeAttr('title');
/*In above example I used an id to capture the html element, which mean u can only do above step only for one element. If you want to apply above step for many links you can use the following code. In this case I'm using a class name for the link element*/
//example code two
$('.link').each(function(){
$(this).attr('data-title', $(this).attr('title')).removeAttr('title');
});
});
HTML for the above example
<!-- for example code one -->
<a id="link" class="link" href="#" title="Title from this link"></a>
<!-- for example code two -->
<a class="link" href="#" title="Title from this link 1"></a>
<a class="link" href="#" title="Title from this link 2"></a>
<a class="link" href="#" title="Title from this link 3"></a>