I have a dropdown of image icons. Now I want to change the dropdown's default page load icon to one selected by the user, using javascript. I am new to javascript but can not do it. FYI,I have included jquery files too. Please help.
<li>
<div class="dropdown choose-theme" id="theme">
<a class="#" data-toggle="dropdown" href="#"><img src="img/theme/blue.png" alt="Blue"> Blue</a>
<ul class="dropdown-menu" role="menu">
<li role="menuitem"><img src="img/theme/green.png" alt="Green" value="img/theme/green.png"> Green</li>
<li role="menuitem"><img src="img/theme/grey.png" alt="Grey" value="img/theme/grey.png"> Grey</li>
<li role="menuitem"><img src="img/theme/red.png" alt="Red" value="img/theme/red.png"> Red</li>
<li role="menuitem"><img src="img/theme/orange.png" alt="Orange" value="img/theme/orange.png"> Orange</li>
<li role="menuitem"><img src="img/theme/blue.png" alt="Blue" value="img/theme/blue.png"> Blue</li>
</ul>
</div>
</li>
Custom javascript I was trying
$(function()
{
$('#theme ul li').click(function({
var $a = $(this).find('a');
$(this).parents('#theme').children('a').replaceWith($a);
});
Try this
$(document).ready(function(){
$('#theme ul li a').click(function(){
$(this).parents('#theme').children('a').html($(this).html());
});
});
You were missing a couple of parentheses and curlies there:
$(function(){
$('#theme ul li').click(function(){
var $a = $(this).find('a');
$('#theme').children('a').replaceWith( $a.clone() );
});
});
I replaced $(this).parents('#theme') with just $('theme') (it's an ID, you should always one and don't need to traverse to find it).
Also did $a.clone();, otherwise the clicked link would actually be removed from the list.
Related
Here is my code and it's not selecting the value of the drop down list.
I tried many different ways but not working
<div class="container" style="height: 0;">
<ul class="psh__dpdw ">
<li class="button-dropdown">
<a class="dropdown-toggle">
something <!-- here should be desplayed the dropdown-menu list when i click -->
<img src="{{theme_url}}/assets/images/arrow-down.png" alt="arrow-down">
</a> {{ content:categories category_group_id="57" class="dropdown-menu" id=""}}
{{special}} {{ /content:categories }}
<!--<ul class="dropdown-menu">
<li>
Soemthing
</li>
</ul> -->
</li>
</ul>
</div>
<script>
$('.dropdown-menu li').find('a').change(function() {
var dropdown = $(this).closest('.dropdown-toggle');
var radioname = $(this).attr('name');
var checked = 'a[name=' + radioname + ']:checked';
//update the text
var checkedtext = $(checked).closest('.dropdown-menu li').text();
dropdown.find('a').text(checkedtext);
//retrieve the checked value, if needed in page
var thisvalue = dropdown.find(checked).val();
alert(thisvalue);
});
</script>**
The button where you click on the drop-down menu, I want to display the value on the button part. Also, I am using the CMS code so, any suggestion?
How can I solve this?
First you need to get container div using closest() and use find to get dropdown-toggle using find().
And also you have used wrong method for a tag, you need to use click instead of change like this
$('.dropdown-menu li a').click(function() {});
DEMO
$('.dropdown-menu li a').click(function() {
var dropdown = $(this).closest(".container").find('.dropdown-toggle');
dropdown.text($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="height: 0;">
<ul class="psh__dpdw ">
<li class="button-dropdown">
<a class="dropdown-toggle">
<img src="{{theme_url}}/assets/images/arrow-down.png" alt="arrow-down">
</a> {{ content:categories category_group_id="57" class="dropdown-menu" id=""}}
{{special}} {{ /content:categories }}
<br><br>
<ul class="dropdown-menu">
<li>
Prishtinë
</li>
<li>
Gjilan
</li>
<li>
Prizren
</li>
<li>
Pejë
</li>
<li>
Mitrovicë
</li>
<li>
Gjakovë
</li>
<li>
Ferizaj
</li>
</ul>
</li>
</ul>
</div>
How can I filter the content of a div using data-filter and highlight current link at same time?
In this example the 'Item A' should be loaded as current item. The current item should have the text-bold class.
jsFiddle
<ul class="menu">
<li class="menu-list">
<a class="menu-list-link js-menu-list-link" href="#" data-filter="1">Item A</a>
</li>
<li class="menu-list js-menu-list">
<a class="menu-list-link js-menu-list-link" href="#" data-filter="2">Item B</a>
</li>
<li class="menu-list">
<a class="menu-list-link js-menu-list-link" href="#" data-filter="3">Item C</a>
</li>
</ul>
try this code:-
$(function(){
//this is for first page load
$('a[data-filter="1"]').addClass('text-bold');
filter(1);
//when click on anchor tag
$('.menu-list a').click(function(){
$('.menu-list a').removeClass('text-bold');
$(this).addClass('text-bold');
var data=$(this).data('filter');
filter(data);
});
});
and create a function:-
function filter(filter){
$('.container [data-filter]').hide();
$('.container [data-filter="'+filter+'"]').show();
}
Demo
I'm trying to make multiple dropdown menu's on my website and I am using this jQuery for this:
$(function() {
var pull = $('#pull');
menu = $('#nav');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});
Here's the html part:
<nav class="container">
<a href="#" id="pull" style="display:block;">
<h3>Menu</h3>
</a>
<ul id="nav" style="display:none;">
<li>Pizza</li>
<li>Pasta</li>
<li>Burger</li>
<li>Specials</li>
<li>Drinks</li>
</ul>
</nav>
It works wonderful if I only have one drop down menu but as soon as I add another one, only one of them (doesn't matter if it's two, three or more then) is actually dropping down.
I gave every Menu it's own ID and copied the code every time and replaced the ID's but this doesn't work.
Already looked into this (using the same function of different events ) or this (Jquery - use the same function for multiple requests) and other threads but i can't figure out how to apply this on my code...
Here's my Jsfiddle on what I'm trying to do: https://jsfiddle.net/thwdyccr/2/
Use classes instead of ids, and then you can make the same code work for all cases (fiddle):
$(function () {
var pull = $('.pull');
$(pull).on('click', function (e) {
e.preventDefault();
var menu = $(this).next();
menu.slideToggle();
});
});
<nav class="container"> <a href="#" class="pull" style="display:block;">
<h3>Menu1</h3>
</a>
<ul class="nav" style="display:none;">
<li>Pizza
</li>
<li>Pasta
</li>
<li>Burger
</li>
<li>Specials
</li>
<li>Drinks
</li>
</ul>
</nav>
<nav class="container"> <a href="#" class="pull" style="display:block;">
<h3>Menu2</h3>
</a>
<ul class="nav" style="display:none;">
<li>Pizza
</li>
<li>Pasta
</li>
<li>Burger
</li>
<li>Specials
</li>
<li>Drinks
</li>
</ul>
</nav>
Try this:
https://jsfiddle.net/thwdyccr/5/
Rather than using IDs - consider using a class instead - this'll save you lots of duplication in your code (as essentially it's all doing the same thing).
You can specify the target selector (e.g. the element you want to show) by traversing your structure with .parent() .children() or .find()
If you're wondering why I am storing $(this) in var element - it is because the browser has to figure out what $(this) is each time you use it - so it's good practice to store it in a variable.
HTML
<nav class="container">
<a href="#" class="pull" style="display:block;">
<h3>Menu1</h3>
</a>
<ul class="nav" style="display:none;">
<li>Bear</li>
<li>Pasta</li>
<li>Burger</li>
<li>Specials</li>
<li>Drinks</li>
</ul>
</nav>
<nav class="container">
<a href="#" class="pull" style="display:block;">
<h3>Menu2</h3>
</a>
<ul class="nav" style="display:none;">
<li>Fish</li>
<li>Pasta</li>
<li>Burger</li>
<li>Specials</li>
<li>Drinks</li>
</ul>
</nav>
JS
$(function() {
$(".pull").click(function(e) {
e.preventDefault();
var element = $(this);
element.parent('nav.container').children("ul.nav").slideToggle();
});
});
You shouldn't use id's for pull. Here's an updated fiddle https://jsfiddle.net/thwdyccr/2/.
Try utilizing Attribute Starts With Selector [name^="value"] [id^=pull] , e.target.parentElement.nextElementSibling to select next ul to call .slideToggle() on
$(function() {
var pull = $("[id^=pull]")
, menu = $("[id^=nav]")
, menuHeight = menu.height();
pull.on("click", function(e) {
e.preventDefault();
$(e.target.parentElement.nextElementSibling).slideToggle();
});
});
jsfiddle https://jsfiddle.net/wpvok7gy/1/
Im pretty sure this is possible, I think Im on the right track, yet it still isn't working for me;
I have this as the jquery, have imported the latest jquery file - what I want is for each colour list item, the content that they contain will be used as their background colour.
If anyone can help me, as I have tried for tens of hours with no success, thank you.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$( "$li.selected-color" ).each(function(element) { var colorlinkcontent = $(element).html(); $(element).css("background-color", colorlinkcontent); });
</script>
<ul class="colors">
<li class="selected-color">#f334568
<li class="selected-color">#f334568
<li class="selected-color">#f334568
<li class="selected-color">#f334568
</ul>
<hr/>
<span class="title">Selected criteria:</span>
<ul class="selected-criteria">
<li>yolo
<li class="selected-color">#f334568
<li>Website
</ul>
Some issues:
No li closing tags.
No script opening tag.
The hex colour codes have too many digits.
The script tag needs to wait until the DOM is loaded or go after the list elements.
You need to read how .each() works as the first argument of the callback function is the index not the element.
The selector should be li.selected-color rather than $li.selected-color.
<ul class="colors">
<li class="selected-color">#f33456</li>
<li class="selected-color">#f33456</li>
<li class="selected-color">#f33456</li>
<li class="selected-color">#f33456</li>
</ul>
<hr/>
<span class="title">Selected criteria:</span>
<ul class="selected-criteria">
<li>yolo</li>
<li class="selected-color">#f33456</li>
<li>Website</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$( "li.selected-color" ).each( function() {
var $el = $(this);
$el.css( "background-color", $el.text() );
});
</script>
<ul>
<li class="active"><a href="#block1">1<a/> </li>
<li><a href="#block2">2<a/> </li>
<li>3</li>
<ul>
<div id="block1">
Block1
</div>
<div id="block2">
Block2
</div>
$('ul li:has(a)').on('click', function(e){
$(this).closest('li').addClass('active').siblings('li').removeClass('active');
$('*[id^="block"]').hide();
.filter(this.hash).show(); //WRONG//
e.preventDefault();
});
ONLINE SAMPLE
I know this would be easy to make the jQuery to just click on a tag and .filter(this.hash).show(); ,
$('ul li a').on('click', function(){
$('*[id^="block"]').hide().filter(this.hash).show();
}
but I want to know & learn if there is another method to make this works. Thanks!
Your HTML is incorrect, which causes a lot of problems:
You are using <a/> instead of </a>.
You are using <ul> instead of </ul>.
You are using $('*[id^="tab"]').hide(); to try to hide the elements, but the identities are block1 are block2, not tab1 and tab2.
You are using closest("a") to try to find the link, but the link is inside the list item, not surrounding it.
Corrected HTML:
<ul>
<li class="active">1 </li>
<li>2 </li>
<li>3</li>
</ul>
<div id="block1">
Block1
</div>
<div id="block2">
Block2
</div>
Corrected Javascript:
$('*[id^="block"]').hide();
$('*[id^="block"]:first').show();
$('ul li:has(a)').on('click', function (e) {
$(this).addClass('active').siblings('li').removeClass('active');
$('*[id^="block"]').hide();
$($(this).find("a").attr('href')).show();
e.preventDefault();
});
Demo: http://jsfiddle.net/Y2TaT/2/