I know this question already have asked before and i also tried the answer and it almost worked for me but there is one issue which i can't able to sort i tried plenty of ways but all in wain.
This is the div i want to hide
<div class="price-box" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<p class="price"><span class="special-price" style="display: none;">
<span class="amount">$43.50</span>
</span>
</p>
</div>
when this div is not empty
<div class="single_variation"><span class="price"><span class="amount">$43.50</span></span></div>
This is what i implement
jQuery(document).ready(function() {
if( jQuery('.single_variation').is(':empty') ){
alert('hi');
jQuery('.price-box').show();
}
});
and also
if($('.price').length) {
$('.price-box').hide();
}
:empty select elements that have no children.
What you need to check is ":visible" :
$(document).ready(function() {
if($('.single_variation').is(':visible') ){
alert('hi');
$('.special-price').hide();
}
});
Also I replaced show by hide.
Edit :
What is this ?
if($('.category').length){
$('.filter').hide();
}
There is no class like category or filter in your example. Not useful in your question !
Related
I have 3 paper-toggle-buttons that I would like to have disabled until I click an "edit" button (makes sense to do that).
I have cobbled this together in a long-winded form, however I wanted to know if there was a way in PolymerJS that you could use either the this.$.ID-NAME or the this.$$('CLASS-NAME') to select all of the paper-toggle-buttons, assuming that I gave them all the same ID and CLASS names (bad practise to duplicate ID's I know).
Any help is appreciated. I know that it's currently working, but I just want to know if there's an easier way.
I am currently working with the following (the toggle will occur when clicking a button with on-click event "editMode"):
HTML
<div class="detail info horizontal layout">
<div class="bodyHeaderText flex">Active User</div>
<paper-toggle-button class="toggle" id="toggle" checked$="{{isActive}}" disabled></paper-toggle-button>
</div>
<div class="detail info horizontal layout">
<div class="bodyHeaderText flex">Operator</div>
<paper-toggle-button class="toggle" id="toggle" checked$="{{isOperator}}" disabled></paper-toggle-button>
</div>
<div class="detail info horizontal layout">
<div class="bodyHeaderText flex">Manager</div>
<paper-toggle-button class="toggle" id="toggle" checked$="{{isManager}}" disabled></paper-toggle-button>
</div>
PolymerJS
editMode : function() {
toggle1 = this.$.toggle1;
toggle2 = this.$.toggle2;
toggle3 = this.$.toggle3;
if( EditDiv.style['display'] == 'none' )
{
toggle1.toggleAttribute('disabled');
toggle2.toggleAttribute('disabled');
toggle3.toggleAttribute('disabled');
}
else
{
toggle1.toggleAttribute('disabled');
toggle2.toggleAttribute('disabled');
toggle3.toggleAttribute('disabled');
}
}
You could take a look to Polymer DOM API, there're a lof of functions to interact with the DOM. I think you're looking for Polymer.dom(this.root).querySelectorAll('.toggle')
$$ returns the first node in the local DOM that matches selector.
you can do
Array
.from(Polymer.dom(this.root).querySelectorAll('.foo'))
.forEach($0 => /* do something */)
;
Then, just a note, your snippet doesn't make much sense because you are performing the same operation in if and else statements:
if(expression) {
toggle1.toggleAttribute('disabled')
} else {
toggle1.toggleAttribute('disabled')
}
// is equal to:
toggle1.toggleAttribute('disabled')
your code could definitely look like:
{
editMode() {
return [
this.$.toggle1,
this.$.toggle2,
this.$.toggle3
]
.forEach($0 => $0.toggleAttribute('disabled'))
}
}
I'm trying to detect which div box was clicked with JQuery and I'm not sure what I am doing wrong. I'm aware that I can approach this in a different method by directly calling functions if a div box is clicked, but I wish to do it this way by first determining what was clicked.
$(document).ready(function() {
$(document).click(function(event){
var id = event.target.id; //looks for the id of what was clicked
if (id != "myDivBox"){
callAFunction();
} else {
callSomeOtherFunction();
}
});
});
Thank you for any suggestions!
You could use the closest function to get the first ancestor element with tag div, see following example:
$(document).ready(function() {
$(document).click(function(event){
var parentDiv = $(event.target).closest("div");
console.log(parentDiv.prop("id"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
<span id="span1">Test1</span>
</div>
<div id="div2">
<span id="span2">Test2</span>
</div>
I hope it helps you. Bye.
No matter what you click, you will always know the element that was clicked:
$("#myDiv").click(function(e){
alert("I was pressed by " + e.target.id);
});
Knowing that you don't want to add this to every div, and you have your click on your document, you'll need to figure out what divs can be reported as "clicked".
In order to do this you'll either need a strict hierarchy of elements in your DOM (which is anoyingly bad) or you can decorate "clickable" div's with a specific class.
Fiddle - similar to below. https://jsfiddle.net/us6968Ld/
I would use closest in Jquery to get the result you want.
$(document).ready(function() {
$(document).click(function(event){
var id = event.target.id;
var clickDiv = $(event.target).closest('div[class="clickable"]');
alert(clickDiv[0].id);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="clickable" id="clickable1">
<span id="foo"> click me - Foo - clickable 1</span>
</div>
<div id="notClickable1">
<div class="clickable" id="clickable2">
<span id="span1">
Click Me Inside Span 1 - clickable 2
</span>
</div>
<div class="clickable" id="clickable3">
<div id="notClickable2">
<div id="notClickable3">
<span id="click me">Click Me - clickable 3</span>
</div>
</div>
</div>
</div>
try this:
$('div').click(function() {
alert($(this).attr('id'));
});
https://jsfiddle.net/1ct0kv55/1/
Right now this function hides all shown answers. I need it to only hide the answer that belongs to a particular question that is clicked a second time. I am very new to JQuery so there is probably a simple solution to this, but any help would be great.
$(document).ready(function() {
$(".question").click(function () {
$('.answer').hide(); // hides open answers before showing a new answer
if ($(this).next().is(":hidden")) { // check the visibility of the next element in the DOM
$(this).next().show(); // show it
} else {
$(this).next().hide(); // hide it
}
});
});
Since there's no HTML to go off of, I've mocked up an example here:
HTML
<span class="question">What is your name?</span>
<span class="answer">Chase</span>
<br/>
<label class="question">How old are you?</label>
<span class="answer">25</span>
<br/>
<label class="question">What is your favorite color?</label>
<span class="answer">Blue</span>
<br/>
<label class="question">Do you like cheese?</label>
<span class="answer">Duh</span>
JavaScript / jQuery
$(document).ready(function() {
$(".question").click(function () {
$(this).next("span.answer").fadeToggle();
});
});
I'm using the next method to get the following .answer of the clicked question.
am i doing any silly mistake in this ? i tried closest and next but its not supporting in this liberary. and i cant change liberay as well.
i want the function generaic so that i can use this icon multiple times
<span style="position:relative" class="iconblock">
<img class="queicon" src="images/question_icon.gif" alt="icon" />
<span class="helpPopup hidden">test test test</span>
$(".iconblock").mouseover(function()
{
var sachin = $(this).find("hidden");
alert(sachin);
});
$(this).find(".hidden");
You forgot . before hidden.
You can use a short cut too specifying the context $(".hidden",this)
$(".iconblock").mouseover(function()
{
$(".hidden",this).removeClass('hidden');
});
http://jsfiddle.net/cJbVY/
If your intend is to show and hide on mouseover/mouse out you can try this
http://jsfiddle.net/ze6Xy/
$(".iconblock").hover(function()
{
$(".helpPopup",this).toggleClass('hidden');
});
Just trying to help here, Do you really need to use JS/Jquery, for this?
HTML:
<span style="position:relative" class="iconblock">
<img class="queicon" src="images/question_icon.gif" alt="icon" />
<span class="helpPopup hidden">test test test</span>
And in CSS, something like:
.iconblock .hidden {
display:none;
}
.iconblock:hover .hidden {
display:block;
}
I have seen lot of questions but none of them seems to have answer for this. I need this help desperately. I am hosted on Magentogo so have no acceess to the core files, however with the help of jquery I want to hide .00 from my store. My codes look like this for example. The price of the item of Rs. is also in HTML could not paste as
<div class="price-block"
<p> The price of this item is
<span class="price" id="oldprice">
<span class="WebRupee"> Rs. </span>3,795.00 </span></p>
</span>
</div>
<script>
$('#price-block').html($('#price-block').html().replace(".00",""));
</script>
</body>
</html>
You have it as a class in your div
<div class="price-block" // <-- also missing >
use the class selector .
$('.price-block')
http://jsfiddle.net/WBsjA/
I think you'll need to loop each .price-block rather than trying to run it on the whole code mat once.
$('.price-block').each(function(){
$(this).html($(this).html().replace(".000","").replace(".00","").replace(".0",""));
});
Also you need to fix up your HTML markup
<div class="price-block">
<p> The price of this item is
<span class="price" id="oldprice">
<span class="WebRupee"> Rs. 3,795.000</span>
</span>
</p>
</div>
http://jsfiddle.net/daCrosby/XK48G/
Here's one approach. Since your price isn't wrapped in its own unique HTML <span> to make it easy to locate and replace, you need to parse the parent element, separate the child nodes from the text nodes, and rebuild it:
var newval;
$('.price').each(function(j, pr) {
// trick to remove the webRupee element for later
var $webRupee = $(pr).find('.WebRupee').remove().wrap('<div>').parent().html();
$(pr).contents().each(function(i, el) {
if (el.nodeType === 3 && el.nodeValue.match(/\.00/)) {
newval = el.nodeValue.replace(/\.00/, '');
}
});
$(pr).html($webRupee + newval);
});
http://jsfiddle.net/mblase75/r2V6r/