HTML:
<ul id="column">
<li id="widget8">
<div class="testhub"></div>
</li>
</ul>
JS:
if ($("#widget8").parent("#dock")) {
$(".testhub").html("<p>dock</p>");
}
else {
$(".testhub").html("<p>not dock</p>");
}
CSS:
#dock {
width: 90%;
height: 100px;
background-color: blue;
}
#column {
width: 90%;
height: 100px;
background-color: red;
}
#widget8 {
width: 90%;
height: 50px;
background-color: yellow;
}
.testhub {
width 50%;
height: 25px;
background-color: black;
color: white;
}
http://jsfiddle.net/zVx8s/1/
All i am trying to do is get the ul that the li is in and if it is on #dock then write something to testhub. But doesn't seem to work, check the jsfiddle.
I presume i am using parent incorrectly.
Try this: Working demo http://jsfiddle.net/268mh/
Please note you can never have same id's in DOM. SO I have made widget8 to class instead!
Rest hope demo helps the cause! :)
code
$(".widget8").each(function() {
if ($(this).parent().prop("id") == "dock") {
$(this).find(".testhub").html("<p>dock</p>");
}
else {
$(this).find(".testhub").html("<p>not dock</p>");
}
});
HTML
<ul id="dock">
<li class="widget8">
<div class="testhub"></div>
</li>
</ul>
<ul id="column">
<li class="widget8">
<div class="testhub"></div>
</li>
</ul>
The first problem is that on your fiddle you use 2 uls with the same id. Use class instead.
You have to loop thrue your lis and check parent's length.
$(".widget8").each(function) {
var $element = $(this).parent("#dock");
if($element.length > 0) {
var message = 'dock';
}
else {
var message = 'not dock';
}
$($element, this).html('<p>' + message + '</p>');
});
demo
So if you just want to test if has id you just have to use the right selector.
$('#dock .widget8').html('<p>dock</p>');
The selector above get elements which are inside #dock and has class .widget8.
demo
You forgot length to check if it actually exists.
if ($("#widget8").parent("#dock").length)
---^---
The problem is that this expression:
$("#widget8").parent("#dock")
evaluates to a jQuery object, and objects are always "true" values in JavaScript. (Always. Even new Boolean(false) is a "true" value.)
To see if the above jQuery object contains any actual elements, you can use the .length property:
if ($("#widget8").parent("#dock").length) {
(But I agree with jeff that it's more clear to write parent().is("#dock"): get the parent, check if it's #dock, rather than get the parent-if-it's-#dock, see if it exists.)
If you're trying to test the parent id, you can use this:
if ($("#widget8").parent().is("#dock")) {
$(".testhub").html("<p>dock</p>");
}
else {
$(".testhub").html("<p>not dock</p>");
}
Related
I'm using document.querySelector and I need it to select all divs that contains the class "test". So far querySelector selects the first div only.
How do I do that with my current JavaScript?
var removeCurveStroke = document.querySelector('.test');
if(removeCurveStroke.classList.contains('card-decorator-stroke')){
removeCurveStroke.classList.remove("card-decorator-stroke");
removeCurveStroke.classList.add("brand-curve-stroke");
}
Any help is gladly appreciated.
Thanks
Use document.querySelectorAll('.test');
Documetnation for querySelectorAll
document.querySelectorAll('.card-decorator-stroke').forEach(function(removeCurveStroke) {
removeCurveStroke.classList.remove("card-decorator-stroke");
removeCurveStroke.classList.add("brand-curve-stroke");
});
.test{
height: 1rem;
background: blue;
}
.card-decorator-stroke {
background: red;
}
.brand-curve-stroke {
background: green;
}
<div class="test"></div>
<div class="test card-decorator-stroke"></div>
not recommendable but try document.getElementsByClassName("test")
You can try with jquery
$(".test .card-decorator-stroke").addClass("brand-curve-stroke").removeClass("card-decorator-stroke");
I would like to expand a div, filters, when filtertoggle is clicked. I would like to do this by adding the class on to filters. Then, when the user clicks anywhere else on the page, I would like to remove the on class, thereby closing filters.
Here is the code I have attempted:
jQuery(document).ready(function($) {
$('body').click(function(evt) {
if (evt.target.attr('class').includes('filtertoggle')) {
$(this).toggleClass('on');
$('.filters').slideToggle(200);
return;
} else {
$(this).element.className = element.className.replace(/\bon\b/g, "");
return;
});
As it stands, filters does not open.
Your logic has a couple of issues. Firstly, evt.target is an Element object, not a jQuery object, so it has not attr() method. You need to wrap it in a jQuery object to make that work. Then you can use hasClass() to check what class is on the target.
Also a jQuery object has no element property, so element.className will cause a syntax error. You can just use removeClass() in that case. Try this:
$('body').click(function(evt) {
if ($(evt.target).hasClass('filtertoggle')) {
$('.filtertoggle').addClass('on');
$('.filters').slideToggle(200);
} else {
$('.filtertoggle').removeClass('on');
$('.filters').slideUp(200);
}
});
body, html { height: 100%; }
.on { color: #C00; }
.filters { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtertoggle">
FilterToggle
</div>
<div class="filters">
Filters...
</div>
You should also note that it may be possible to achieve this in CSS alone, depending on how your HTML is structured. You can use the :focus selector to do it, like this:
body, html { height: 100%; }
.filtertoggle { outline: 0; }
.filters {
opacity: 0;
transition: opacity 0.3s;
}
.filtertoggle:focus { color: #C00; }
.filtertoggle:focus + .filters { opacity: 1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtertoggle" tabindex="1">
FilterToggle
</div>
<div class="filters">
Filters...
</div>
I'm trying to add a class to a element when mouse hovers over it and then remove it when mouse leaves. It works currently only with giving it direct style in js.
As shown below I tried various ways to do this, all had some problems. Only the direct style change worked. On mouse leave I do the same but remove the class. The mouse over and leave checks canvas element.
poly.on('mouseover', function () {
this.opacity(1);
layer.draw();
$('.' + this.name()).css({ backgroundColor: "#ffcc00" });
//$('.' + this.name()).classList.add("textboxhighlight");
//$('.' + this.name()).className += " textboxhighlight";
//$('.' + this.name()).addClass("textboxhighlight");
//$('.' + this.name()).setAttribute("class", "textboxhighlight");
});
I'm not sure what the problem is as I tired various methods in adding class all of them with different problems. Using just this.addClass wont work as it needs to start with $('.' + this.name()) or nothing works in the code not even forcing the style part. $('.' + this.name()) refers to a class name in element with the same name as poly.
In css:
.textboxhighlight {
background-color: #ffcc00;
}
Thanks for any help.
May be you have to use in your css class background-color: #red !important. See working example here
It would be easier if you provided more code to work with. The example below will illustrate on how to add a class on hover and remove a class on leaving the element.
$('#element').hover(function(e) {
$(this).addClass('selected');
}, function(a) {
$(this).removeClass('selected');
});
.selected {
background-color: green;
}
<div id='element'>
element
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Hard to say what is wrong with your code when you don't show the mouseenter/leave parts of your code. But here is an example with classes:
https://codepen.io/andeersg/pen/MOGqPQ
$('.el').mouseenter(function() {
$(this).addClass('el-hover');
});
$('.el').mouseleave(function() {
$(this).removeClass('el-hover');
});
You can use toggleClass on hover event
$(".hoverclass").hover(function () {
$(this).toggleClass("hoverclass_toggle");
});
.hoverclass {
height: 72px;
width: 100%;
border: 1px solid #000;
}
.hoverclass_toggle {
background-color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverclass">
<div class="item">
<div id="item1"> <i class="icon"></i>Test</div>
</div>
<div>
Otherwise you can do that type :
$(".hoverclass").hover(
function () {
$(this).addClass("result_hover");
},
function () {
$(this).removeClass("result_hover");
}
);
.hoverclass {
height: 72px;
width: 100%;
border: 1px solid #000;
}
.result_hover {
background-color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverclass">
<div class="item">
<div id="item1">
<i class="icon"></i>Test
</div>
</div>
<div>
So my HTML looks like this :
<section id="nav-wrapper">
<div class="container">
<ul id="ul-main_wrapper">
<li class="item_1""></li>
<li class="item_2"></li>
<li class="item_3"></li>
<li class="item_4"></li>
<li class="item_5"></li>
<li class="item_6"></li>
<li class="item_7"></li>
<li class="item_8"></li>
<li class="item_9"></li>
<li class="item_10"></li>
<li class="close_clear">Back</li>
</ul>
</div>
</section>
I have a list that sits all onto one line so the CSS looks like :
#nav-wrapper {
width: 100%!important;
height: auto!important;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
overflow-x: scroll;
bottom: 80px;
}
#ul-main_wrapper li {
height: 20px;
width: 20px;
margin: 2px;
display: inline-block;
}
onClick of the last item in the list that is back i'm trying to get the list to scroll back to the first item. But can't find anything that works.
EDIT :
Here's a JSFiddle : https://jsfiddle.net/svuh0mvj/1/
Just use scrollTop():
$('.close_clear').on('click', function() {
$(window).scrollTop($('.item_1').offset().top);
})
DEMO
Or with animate:
$('.close_clear').on('click', function() {
var body = $("html, body");
body.stop().animate({scrollTop:$('.item_1').offset().top}, '500');
})
DEMO
To scroll to the left within your #nav-header div, use:
$('.close_clear').on('click', function() {
var nav = $("#nav-wrapper");
nav.animate({scrollLeft: $('.item_1').offset().left}, '500');
})
DEMO
If you are not using jquery, or don't want to use it, you could try to use .scrollIntoView()
MSDN: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
"The Element.scrollIntoView() method scrolls the current element into the visible area of the browser window."
though this is not implemented the same way in all the different browsers we got these days.
document.getElementsByClassName('item_1')[0].scrollIntoView();
Or you could assign an id to the first item, or pass this id: 'ul-main_wrapper' and pass it to this example function
function scrollToAnchor(anchor) {
var scrollLocation = document.location.toString().split('#')[0];
document.location = scrollLocation + '#' + anchor;
}
which will do the scrolling for you.
If you do use jquery, use the solution by mmm
I been trying to build an image slider from scratch that will slide automatically but then go to a certain slide when the corresponding dot at the bottom is clicked.
When I isolate and test each of my event delegation click functions individually, they work great to get the different photos to slide back and forth. But when all functions are together only the 3rd function works. Can you help?
To demonstrate I made a simple mock-up slider here which includes the following JavaScript/jQuery:
'use strict';
$(document).ready(function () {
//DOM cache
var $slider = $('section');
var $slideContainer = $slider.find('ul');
var $windowWidth = $slider.css('width');
var $windowWidthUnitless = $slider.width();
var $dot1 = $slider.find('#dot-1');
var $dot2 = $slider.find('#dot-2');
var $dot3 = $slider.find('#dot-3');
//config
var width = $windowWidth;
var doubleWidth = $windowWidthUnitless * 2;
$($slider).on('click',$dot1,function() {
$slideContainer.css('margin-left', 0);
$dot1.addClass('filled');
$dot2.removeClass('filled');
$dot3.removeClass('filled');
})
$($slider).on('click',$dot2,function() {
$slideContainer.css('margin-left', '-' +width);
$dot1.removeClass('filled');
$dot2.addClass('filled');
$dot3.removeClass('filled');
})
$($slider).on('click',$dot3,function() {
$slideContainer.css('margin-left', "-" +doubleWidth +"px");
$dot1.removeClass('filled');
$dot2.removeClass('filled');
$dot3.addClass('filled');
})
});
Acting on this html:
<section>
<ul>
<li>
<div id="slide-1"></div>
</li>
<li>
<div id="slide-2"></div>
</li>
<li>
<div id="slide-3"></div>
</li>
<li>
<div id="slide-1"></div>
</li>
</ul>
<div class="selected" id="dot-1"></div>
<div id="dot-2"></div>
<div id="dot-3"></div>
and CSS
* {
margin: 0;
padding: 0;
} /* just my default */
section {
overflow: hidden;
width:400px;
height:400px;
}
section ul {
width:1600px;
}
section li {
list-style-type: none;
display: inline;
float: left;
}
[id*="slide-"] {
height: 400px;
width: 400px;
}
[id*="dot-"] {
float:left;
height: 40px;
width: 40px;
border-radius: 20px;
position: relative;
bottom: 45px;
}
(if this helps, here's a more exact but still simplified version of my slider, that actually slides automatically as well and is meant to stop and go to a certain slide when a dot is clicked. Again, it only goes to the last slide.)
In each of the $($slider).on('click',$dotNumber,function() {...} lines, replace $dotNumber with '#dot-number'.
Example: $($slider).on('click','#dot-1',function() {...}
I don't know if there's a particular way to pass a jQuery object to specify a child element to target, but I do know that adding the CSS selector as the second parameter will do it. According to the man page, the second parameter (if it's not the callback) is a string.