Targeting data value issue - javascript

Having this error on on a Shopify app.Trying to get dark grey toolbar to be hidden when the second thumbnail image is clicked on. Getting the error stated in the title.
$(function() {
$('[data-target="1"]').click(function() {
document.getElementById('toolbar').style.opacity = '0';
});
});
<div class="editor_thumbnail">
<ul id="side-switcher">
<li class="thumb product-switch"><img data-target="0" src="https://upload.wikimedia.org/wikipedia/commons/0/09/Icon_1_%28set_basic%29.png" alt="" class="tooltip img_switcher img d_block tooltipstered"></li>
<li class="thumb product-switch"><img data-target="1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Icon_2_blue.svg/1024px-Icon_2_blue.svg.png"></li>
</ul>
</div>
<ul id="toolbar">
<li id="tab-ref-add_image" class="tab-link" data-tab="add_image"><i class="material-icons">add_a_photo</i><span class="icon-text txtLang">Add Art</span></li>
<li id="tab-ref-add_text" class="tab-link" data-tab="add_text"><i class="material-icons">font_download</i><span class="icon-text txtLang">Add Text</span></li>
<li id="tab-ref-add_layer" class="tab-link" data-tab="view_layer"><i class="material-icons">layers</i><span class="icon-text txtLang">Layers</span></li>
<li id="tab-ref-save_data" class="tab-link" data-tab="save_data"><i class="material-icons">save</i><span class="icon-text txtLang">Save Product</span></li>
<li id="tab-ref-load_saved" class="tab-link" data-tab="load_saved"><i class="material-icons">assignment_turned_in</i><span class="icon-text txtLang">Load</span></li>
</ul>

select $('[data-target="1"]') withot use "" in attribute value as $('[data-target=1]')
(use Jquery to set css)
$(function() {
$('[data-target=1]').click(function() {
$('#toolbar').css("opacity",'0');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="editor_thumbnail">
<ul id="side-switcher">
<li class="thumb product-switch"><img data-target="0" src="https://upload.wikimedia.org/wikipedia/commons/0/09/Icon_1_%28set_basic%29.png" alt="" class="tooltip img_switcher img d_block tooltipstered"></li>
<li class="thumb product-switch"><img data-target="1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Icon_2_blue.svg/1024px-Icon_2_blue.svg.png"></li>
</ul>
</div>
<ul id="toolbar">
<li id="tab-ref-add_image" class="tab-link" data-tab="add_image"><i class="material-icons">add_a_photo</i><span class="icon-text txtLang">Add Art</span></li>
<li id="tab-ref-add_text" class="tab-link" data-tab="add_text"><i class="material-icons">font_download</i><span class="icon-text txtLang">Add Text</span></li>
<li id="tab-ref-add_layer" class="tab-link" data-tab="view_layer"><i class="material-icons">layers</i><span class="icon-text txtLang">Layers</span></li>
<li id="tab-ref-save_data" class="tab-link" data-tab="save_data"><i class="material-icons">save</i><span class="icon-text txtLang">Save Product</span></li>
<li id="tab-ref-load_saved" class="tab-link" data-tab="load_saved"><i class="material-icons">assignment_turned_in</i><span class="icon-text txtLang">Load</span></li>
</ul>

Related

How to make one element of a list go to the top on page load?

I need one particular element of an unordered list to appear at the top of the list on page load, but not at the top of the page.
My code below works on Firefox and Safari, but not on Chrome or Opera. I use Javascript only.
Note that if I remove location.replace('#'); , the element will jump to the top of the page on page load, which is unwanted.
location.replace('#e');
location.replace('#');
#e {
color:#fff;
background:red;
}
#list {
overflow:auto;
height:100vh;
border:1px solid #000;
}
<div>LOGO</div>
<ul id="list">
<li id="a">Link a</li>
<li id="b">Link b</li>
<li id="c">Link c</li>
<li id="d">Link d</li>
<li id="e">Link e</li>
<li id="f">Link f</li>
<li id="g">Link g</li>
<li id="h">Link h</li>
<li id="i">Link i</li>
<li id="j">Link j</li>
<li id="k">Link k</li>
<li id="l">Link l</li>
<li id="m">Link m</li>
<li id="n">Link n</li>
<li id="o">Link o</li>
<li id="p">Link p</li>
<li id="q">Link q</li>
<li id="r">Link r</li>
<li id="s">Link s</li>
<li id="t">Link t</li>
<li id="u">Link u</li>
<li id="v">Link v</li>
<li id="w">Link w</li>
<li id="x">Link x</li>
<li id="y">Link y</li>
<li id="z">Link z</li>
<li id="aa">Link aa</li>
<li id="ab">Link ab</li>
<li id="ac">Link ac</li>
<li id="ad">Link ad</li>
<li id="ae">Link ae</li>
<li id="af">Link af</li>
<li id="ag">Link ag</li>
<li id="ah">Link ah</li>
<li id="ai">Link ai</li>
<li id="aj">Link aj</li>
<li id="ak">Link ak</li>
<li id="al">Link al</li>
<li id="am">Link am</li>
<li id="an">Link an</li>
<li id="ao">Link ao</li>
<li id="ap">Link ap</li>
<li id="aq">Link aq</li>
<li id="ar">Link ar</li>
<li id="as">Link as</li>
<li id="at">Link at</li>
<li id="au">Link au</li>
<li id="av">Link av</li>
<li id="aw">Link aw</li>
<li id="ax">Link ax</li>
<li id="ay">Link ay</li>
<li id="az">Link az</li>
</ul>
Although there is probably a smoother way to do it, here is the javascript that solves my issue:
location.replace('#e');
setTimeout(function() {
location.replace('#');
}, 1);

Anyone knows How to Auto Select an option from <Li> Javascript HTML

Here is the element I got from a ebsite
I want to make a script that I can use to auto select a size (Like 12).
<div class="select-size select-size-detail" id="sizeOptions" style="display: block;">
<div></div>
<ul class="select-box-size">
<li currupc="00886737650974">6.5</li>
<li currupc="00886737650981">7</li>
<li currupc="00886737659267">7.5</li>
<li currupc="00886737659274">8</li>
<li currupc="00886737659281">8.5</li>
<li currupc="00886737659304">9</li>
<li currupc="00886737659328">9.5</li>
<li currupc="00886737659335">10</li>
<li currupc="00886737659342">10.5</li>
<li currupc="00886737659359">11</li>
<li currupc="00886737659397">12</li>
</ul>
</div>
</div>
$('li').click(function(){
$('li').each(function(){ $(this).css({'border-style':'none'}); });
$(this).css({'border-style':'solid','border-width':'2px','border-color':'gray'});
alert('Select '+$(this).text() );
});
function click_li_by_value(_value){
$('li').each(function(){
var li_text=$(this).text();
if(li_text==_value){
$(this).click();
}
});
}
click_li_by_value('12'); //or '11' or '10.5'
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="select-size select-size-detail" id="sizeOptions" style="display: block;">
<div>
<ul class="select-box-size">
<li currupc="00886737650974">6.5</li>
<li currupc="00886737650981">7</li>
<li currupc="00886737659267">7.5</li>
<li currupc="00886737659274">8</li>
<li currupc="00886737659281">8.5</li>
<li currupc="00886737659304">9</li>
<li currupc="00886737659328">9.5</li>
<li currupc="00886737659335">10</li>
<li currupc="00886737659342">10.5</li>
<li currupc="00886737659359">11</li>
<li currupc="00886737659397">12</li>
</ul>
</div>
</div>

Pull the active list node item in 2nd position

I have a list of items. I have node id of the 'active' class.
I want to get the active flex node_id and pull the active list item to the center position. I want to match the active_slide node_id with list item class and pull the item to center position.
eg: 233 is 'active_slide'. I want to compare the node_id and pull the list item and pull the item to center position like 69,233,299
jQuery(document).ready(function($){
setTimeout(function(){
var node_id = $('.flex-active-slide .node_id').text();
$('.thumbnailIcon').each(function(index, item){
$('.'+node_id+'li:eq(1)').before($('.thumbnailIcon li:eq(2)'));
});
},1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parent flex-active-slide">
<div class="node_id"><span>233</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>
<li class="parent">
<div class="node_id"><span>222</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>
<a href="#" class="flex-next">click<a>
<li class="parent">
<div class="node_id"><span>333</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>
You could use the item element you already get from each and then re-order the li by insertAfter:
See a Fiddle here:
jQuery(document).ready(function($){
setTimeout(function(){
var node_id = $('.flex-active-slide .node_id').text();
$('.thumbnailIcon').each(function(index, item){
$(item).find('.'+node_id).insertAfter($(item).find('li:eq(2)'));
});
},1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parent flex-active-slide">
<div class="node_id"><span>233</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>
<li class="parent">
<div class="node_id"><span>222</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>
<a href="#" class="flex-next">click<a>
<li class="parent">
<div class="node_id"><span>333</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>

Show / Hide UL based on link clicked

I would like to show / hide UL's based on what link is clicked, not sure if this is the best way?
JS Fiddle: http://jsfiddle.net/zangief007/rj8g0yh4/1/
HTML:
<ul class="category-1 group">
<li class="name">JOHN Smithe QC</li>
<li class="call">DDI <span>09 333 4545</span></li>
<li class="call">MOB <span>027 545 6987</span></li>
<li>david.heaney#heaneypartners.com</li>
</ul>
<ul class="category-3 group">
<li class="name">Barry White</li>
<li class="call">DDI <span>021 487 5896</span></li>
<li class="call">MOB <span>024 787 9854</span></li>
<li>susan.thodey#heaneypartners.com</li>
</ul>
<ul class="category-2 group">
<li class="name">Peter Pan</li>
<li class="call">DDI <span>231234</span></li>
<li class="call">MOB <span>234234</span></li>
<li>23423423423</li>
</ul>
JS:
$(document).ready(function () {
$(function() {
var curPage="";
$("#selectMe-desk li a").click(function() {
if (curPage.length) {
$("#"+curPage).hide();
}
curPage=$(this).data("category-");
$(""+curPage).show();
});
});
});
You had several errors in both your JS and HTML. I also simplified bits of your code. Here is the fixed version: http://jsfiddle.net/rj8g0yh4/2/
HTML:
<ul class="filter-desk" id="selectMe-desk">
<li class="category-1"><a class="active" href="#" data-page="category-1">Partners</a></li>
<li class="category-2"><a class="" href="#" data-page="category-2">Consultants</a></li>
<li class="category-7"><a class="" href="#" data-page="category-7">Senior Associates</a></li>
<li class="category-8"><a class="" href="#" data-page="category-8">Associates</a></li>
<li class="category-9"><a class="" href="#" data-page="category-9">Solicitors</a></li>
<li class="category-10"><a class="" href="#" data-page="category-10">Management</a></li>
<li class="category-3"><a class="" href="#" data-page="category-3">PA's</a></li>
</ul>
<ul class="category-1 group">
<li class="name">JOHN Smithe QC</li>
<li class="call">DDI <span>09 333 4545</span></li>
<li class="call">MOB <span>027 545 6987</span></li>
<li>david.heaney#heaneypartners.com</li>
</ul>
<ul class="category-3 group">
<li class="name">Barry White</li>
<li class="call">DDI <span>021 487 5896</span></li>
<li class="call">MOB <span>024 787 9854</span></li>
<li>susan.thodey#heaneypartners.com</li>
</ul>
<ul class="category-2 group">
<li class="name">Peter Pan</li>
<li class="call">DDI <span>231234</span></li>
<li class="call">MOB <span>234234</span></li>
<li>23423423423</li>
</ul>
JS:
$(function() {
$('.group').hide();
$('.category-1').show();
$("#selectMe-desk li a").click(function() {
var $a = $(this);
$(".group").hide().filter("."+$a.data("page")).show();
});
});

Variable width for second level ul in Nicemenu (Drupal)

I have a menu structure like the below in Drupal 7. This is a part of the Nicemenu module in Drupal. I am applying a width to the second level ul - the sub menu ul, and this gets applied to all the second level ul. What I need is a variable width for the second level ul's. All these HTML sre dynamically generated by Drupal and I may not be able to hard code any classes or ID to these second level uls. I targeted these using pseudo-classes but didn't achieve what I want.
Here's the HTML
<ul class="menu">
<li class="first leaf"><a class="active" href="">Menu 1</a></li>
<li class="expanded"><a title="" href="">Menu 2</a>
<ul class="menu"> <!--This should have width of 200px-->
<li class="first leaf">Menu 2a</li>
<li class="last leaf">Menu 2b</li>
</ul>
</li>
<li class="expanded"><a title="" href="">Menu 3</a>
<ul class="menu"><!-- Width should be 350px-->
<li class="first leaf">Menu 3a</li>
<li class="leaf">Menu 3b</li>
<li class="leaf">Menu 3c</li>
<li class="leaf">Menu 3d</li>
<li class="leaf">Menu 3e</li>
<li class="leaf">Menu 3f</li>
<li class="leaf">Menu 3g</li>
<li class="last leaf">Menu 3h</li>
</ul>
</li>
<li class="expanded"><a title="" href="">Menu 4</a>
<ul class="menu"><!-- Width should be 200px-->
<li class="first expanded"><a title="" href="">Menu 4a</a><ul class="menu">
<li class="first last leaf">Menu 4a-1</li>
</ul>
</li>
<li class="last leaf">Menu 4b</li>
</ul>
</li>
<li class="leaf">Menu 5</li>
<li class="expanded"><a title="" href="">Menu 5a</a>
<ul class="menu"><!-- Width should be 150px-->
<li class="first last leaf">Menu 5b
</li>
</ul>
</li>
<li class="leaf">Menu 6</li>
<li class="leaf">Menu 7</li>
<li class="expanded"><a title="" href="">Menu 8</a>
<ul class="menu"><!-- Width should be 200px-->
<li class="first leaf">Menu 8</li>
<li class="last leaf">Menu 9</li>
</ul></li>
<li class="last leaf">Contact Us</li>
</ul>
You really need id attributes in your <ul> elements, so you can use CSS to set the widths for each id. This is the most convenient and robust way to style separate HTML elements.
Add html ID to content field shows a solution how to add these id attributes.

Categories