I am working on a interactive map, which triggers an overlay image (which highlights the selected area)
But now I add classes to an div and I want to delete them if I highlight an other area. First I tried the starts with indicator to remove classes which starts with hl- this is my js file:
$('.btn-pointer').click(function() {
$('.highlight-layer').removeClass('[class^="hl-"]');
});
$('.btn-sp').click(function() {
$('.highlight-layer').addClass('hl-sp');
$('.popover').not(this).popover('hide');
});
$('.btn-vp').click(function() {
$('.highlight-layer').addClass('hl-vp');
$('.popover').not(this).popover('hide');
});
$('.btn-sl').click(function() {
$('.highlight-layer').addClass('hl-sl');
$('.popover').not(this).popover('hide');
});
$('.btn-ec').click(function() {
$('.highlight-layer').addClass('hl-ec');
$('.popover').not(this).popover('hide');
});
And here is the html:
<div>
<img src="../img/map/map-full.jpg" alt="">
<button class="btn btn-sp btn-pointer" data-container="body" data-toggle="popover" data-placement="top" data-content="<h2>Safaripark</h2>">Safaripark</button>
<button class="btn btn-vp btn-pointer" data-container="body" data-toggle="popover" data-placement="top" data-content="<h2>Vakantiepark</h2>">Vakantiepark</button>
<button class="btn btn-sl btn-pointer" data-container="body" data-toggle="popover" data-placement="top" data-content="<h2>Speelland</h2>">Speelland</button>
<button class="btn btn-ec btn-pointer" data-container="body" data-toggle="popover" data-placement="top" data-content="<h2>Event Center</h2>">Event Center</button>
<div class="highlight-layer hl-ec"></div>
</div>
I tried to create a Fiddle but never added external Resources so the error it gives me is the following: Uncaught Error: Bootstrap's JavaScript requires jQuery
You could use the callback for removeClass to filter out the classes you want to remove based on a starting string etc
$('.highlight-layer').removeClass(function(i, klass) {
var remove = 'hl-';
return klass.split(/\s/).filter(function(k) {
return k.indexOf(remove) === 0;
}).join(' ');
});
removeClass doesn't accept a selector, it accepts a space-delimited series of classes to remove. So just list the ones you want to remove:
$('.highlight-layer').removeClass('hl-sp hl-vp hl-sl hl-ec');
It's fine if one (or indeed all) of them aren't on any given element; the one(s) that is/are will be removed.
Example:
$("input[type=button]").on("click", function() {
$(".highlight-layer").removeClass("hl-sp hl-vp hl-sl hl-ec");
});
.hl-sp {
color: red;
}
.hl-vp {
color: green;
}
.hl-sl {
color: blue;
}
.hl-ec {
color: grey;
}
<div>
<input type="button" value="Remove">
<div class="highlight-layer hl-sp">Starts out with hl-sp</div>
<div class="highlight-layer hl-vp">Starts out with hl-vp</div>
<div class="highlight-layer hl-sl">Starts out with hl-sl</div>
<div class="highlight-layer hl-ec">Starts out with hl-ec</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Working Fiddle.
You have just to change one line in your code and it will works check the code below that remove all the classes and keep just the essential one highlight-layer :
$('.btn-pointer').click(function() {
$('.highlight-layer').removeClass().addClass('highlight-layer');
});
Like this the element classes are always two highlight-layer and clicker button class.
Hope this helps.
You can add extension to jQuery which would loop through elements returned from selector and remove list.
Following is a basic example:
JSFiddle.
$.fn.removeClasses = function(regex) {
Array.prototype.forEach.call(this, function(el) {
var class_list = el.classList;
var filtered_list = Array.prototype.filter.call(class_list, function(c) {
return regex.test(c);
});
console.log(filtered_list);
$(el).removeClass(filtered_list.join(" "))
});
}
$(".foo").on("click", function() {
var reg = /^test/;
$(this).removeClasses(reg);
});
.test {
background: #333;
}
.test1 {
color: #fff;
}
.test2 {
border: 1px solid gray;
}
.test3 {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="test test1 test2 test3 foo">
Test
</div>
Related
I have two buttons: without background and green, I need them to change when i click on them (from green to that one with dashed border-bottom)
Here is my html:
<div class="btns">
<button type="button" class="btn btn-success">Муж</button>
<button type="button" class="btn btn-link btn-simple">Жен</button>
</div>
I've written script just like this :
$('.btn').click(function() {
var $this = $(this);
if ($this.hasClass('btn-success')) {
$this.removeClass().addClass('btn-simple');
} else if ($this.hasClass('btn-simple')) {
$this.removeClass('btn-simple').addClass('btn-success');
}
});
but it doesn't work.
and here is what I added to css file:
.btn-simple {
border-bottom: 1px dashed #000;
color: #000;
}
nothing else because these are bootstrap buttons.
you should add code in document.ready method.
$(document).ready(function () {
$('.btn').click(function () {
var $this = $(this);
if ($this.hasClass('btn-success')) {
$this.removeClass().addClass('btn-simple');
} else if ($this.hasClass('btn-simple')) {
$this.removeClass('btn-simple').addClass('btn-success');
}
});
});
You need to add the class you want to remove, for example: $this.removeClass('btn-success'). In the link below I've made an example.
$('.btn').click(function(){
var $this = $(this);
if (!$this.hasClass('btn-success')) {
$('.btn').removeClass('btn-success')
$this.addClass('btn-success');
}
})
https://codepen.io/jmejia1221/pen/qMwLQP
You were not removing one of the btn-success class. Also, I think you should add btn-link class. Also wrap this entire piece in document.ready
$(document).ready(function () {
$('.btn').click(function() {
var $this = $(this);
if ($this.hasClass('btn-success')) {
$this.removeClass('btn-success').addClass('btn-simple');
} else if ($this.hasClass('btn-simple')) {
$this.removeClass('btn-simple').addClass('btn-link').addClass('btn-success');
}
});
});
Assuming you want to toggle between buttons within a shared container..
/* longer version for demonstration purposes */
$('.btn').click(function() {
var thisParent = $(this).closest('.btns');
$(thisParent).find('.btn-success').addClass('btn-simple')
$(thisParent).find('.btn-success').removeClass('btn-success');
$(this).removeClass('btn-simple');
$(this).addClass('btn-success');
})
/* shorter version
$('.btn').click(function() {
$(this).closest('.btns').find('.btn-success').addClass('btn-simple').removeClass('btn-success');
$(this).removeClass('btn-simple').addClass('btn-success');
})
*/
* { outline: 0; } button { border-style: none; cursor: pointer; padding: 5px; } button::-moz-focus-inner { border: 0; }
/* ignore above */
.btn-simple {
border-bottom: 1px dashed #000;
color: #000;
}
.btn-success {
background-color: hsla(96, 92%, 37%, 1);
border-radius: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btns">
<button type="button" class="btn btn-success">Муж</button>
<button type="button" class="btn btn-link btn-simple">Жен</button>
</div>
<div class="btns">
<button type="button" class="btn btn-success">Муж</button>
<button type="button" class="btn btn-link btn-simple">Жен</button>
<button type="button" class="btn btn-link btn-simple">три</button>
</div>
fiddle
https://jsfiddle.net/Hastig/bjkchu5L/
A solution suggested by #musicnothing in an older thread displays a content div below the row of inline divs, this works good when the div.wrapblock is clicked itself.
http://jsfiddle.net/SYJaj/7/
function placeAfter($block) {
$block.after($('#content'));
}
$('.wrapblock').click(function() {
$('#content').css('display','inline-block');
var top = $(this).offset().top;
var $blocks = $(this).nextAll('.wrapblock');
if ($blocks.length == 0) {
placeAfter($(this));
return false;
}
$blocks.each(function(i, j) {
if($(this).offset().top != top) {
placeAfter($(this).prev('.wrapblock'));
return false;
} else if ((i + 1) == $blocks.length) {
placeAfter($(this));
return false;
}
});
});
The issue I'm having.
I need to trigger the same effect, but by adding the click event to a link within the wrapblock itself.
My code is nearly identical.
What I have changed is the click event handle, from $('.wrapblock').click(function() to $('.more').on('click', function() I also needed to add .closest(".wrapblock") for the content div to position itself outside of the wrapblock.
$('.more').on('click', function() {
...
if ($blocks.length == 0) {
placeAfter($(this).closest(".wrapblock"));
return false;
}
Everything can be seen and tested http://jsfiddle.net/7Lt1hnaL/
Would be great if somebody could shed some light on how I can calculate which block it needs to follow with the offset method, thanks in advance.
As you can see in the latest fiddle example, the content div is not displaying below the row of divs.
I also apologise, I wanted to post on the thread in discussion but I only have a minor posting reputation which doesn't let me, thanks.
var $chosen = null;
var $allBlocks = [];
$(function(){
$allBlocks = $('.wrapblock');
})
$(window).on('resize', function() {
if ($chosen != null) {
$('#content').css('display','none');
$('body').append($('#content'));
$chosen.trigger('click');
}
});
$('.more').on('click', function() {
$chosen = $(this);
var position = $chosen.parent('.wrapblock').position();
$('#content').css('display','inline-block');
$allBlocks.filter(function(idx, ele){
return $(ele).position().top == position.top;
})
.last()
.after($('#content'));
});
.wrapblock
{
background: #963a3a;
display: inline-block;
width: 90px;
height: 90px;
color: white;
font-size: 14px;
text-align: left;
padding: 10px;
margin: 10px;
vertical-align:top;
position:relative;
}
#content
{
display:none;
vertical-align:top;
width:100%;
background: #5582c1;
font-size: 12px;
color: white;
padding: 10px;
}
.more {
position:absolute;
bottom:15px;
right:15px;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="wrapblock">1
<span class="more" data-ref="1">more</span>
</div>
<div class="wrapblock">2
<span class="more" data-ref="2">more</span>
</div>
<div class="wrapblock">3
<span class="more" data-ref="3">more</span>
</div>
<div class="wrapblock">4
<span class="more" data-ref="4">more</span>
</div>
<div class="wrapblock">5
<span class="more" data-ref="5">more</span>
</div>
<div class="wrapblock">6
<span class="more" data-ref="6">more</span>
</div>
<div class="wrapblock">7
<span class="more" data-ref="7">more</span>
</div>
<div class="wrapblock">8
<span class="more" data-ref="8">more</span>
</div>
<div class="wrapblock">9
<span class="more" data-ref="9">more</span>
</div>
<div id="content">Some Content</div>
Seems to do what you want. Basically, it just filters down the set of all blocks to the row of the block you clicked on using the assumption that they'll all have the same vertical offset (top), then takes the last one, because jQuery will keep them in document order, so that'll be the last one in the layout row.
Oh, and I updated the fiddle http://jsfiddle.net/7Lt1hnaL/1/
I have a button on my website that when you click expand some text. And I need to make so when you hover mouse over that button, text changes to "Expand" and when text is expanded, and you hover over same button, text needs to be changed to "collapse".
Here is my code:
HTML:
<button id="btnSlideUp" class="btn btn-outline-success btn-sm title">
<h1 class="jumbotron-heading" id="title">TEXT</h1>
</button>
<p class="lead text-muted" id="p1">TEXT</p>
Css:
#p1{
display:none;
}
jQuery:
var isUp=true;
$('#btnSlideUp').click(function() {
if(isUp){
$('#p1').slideDown(1000);
isUp=false;
}else{
$('#p1').slideUp(1000);
isUp=true;
}
});
Thank you very much for any help given!
Rather than using jQuery events you can handle this with CSS using classes and the hover selector.
Something like:
button.expanded::before {
content: 'Expanded';
}
button.expanded:hover::before {
content: 'Collapse';
}
button::before {
content: 'Collapsed';
}
button:hover::before {
content: 'Expand';
}
Then you can just apply your classes with jQuery and you the CSS takes care of it 😁
How about using .hover on $('#btnSlideUp')?
var isUp = true;
$('#btnSlideUp').hover(
function() {
if (isUp) {
$(this).find('h1').text('Expand');
} else {
$(this).find('h1').text('Collapse');
}
},
function() {
$(this).find('h1').text('TEXT');
}
)
$('#btnSlideUp').click(function() {
if(isUp){
$('#p1').slideDown(1000);
isUp=false;
}else{
$('#p1').slideUp(1000);
isUp=true;
}
});
#p1{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnSlideUp" class="btn btn-outline-success btn-sm title">
<h1 class="jumbotron-heading" id="title">TEXT</h1>
</button>
<p class="lead text-muted" id="p1">TEXT</p>
Well just as you used the .click event listener, you can use the .hover function
$('#btnSlideUp').hover(function() { /*do whatever you need here */ });
https://api.jquery.com/hover/
You can add an hover event to toggle this, I am using a flag to set the hover text for the button, if its c the button should say collapse else expand.
var isUp=true, button = $('title'), text = $('#p1'), mode;
$('#btnSlideUp').click(function() {
if(isUp){
text.slideDown(1000);
isUp=false;
setTimeout(function(){mode = 'c'}, 1000);
}else{
text.slideUp(1000);
isUp=true;
setTimeout(function(){mode = 'e'}, 1000);
}
});
$('#btnSlideUp').hover(function() {
if(mode === 'c'){
$(this).children().html('Collapse');
}else{
$(this).children().html('Expand');
}
}, function(){$(this).children().html('TEXT');});
#p1{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnSlideUp" class="btn btn-outline-success btn-sm title">
<h1 class="jumbotron-heading" id="title">TEXT</h1>
</button>
<p class="lead text-muted" id="p1">TEXT</p>
Here is simple code to change the display of a div on the button action using switch case.
Please have a look at it i am not getting where i went wrong.
Link: https://jsfiddle.net/r6nkuwvc/
javascipt code:
$(document).on('click', ".change", function() {
var $input = $(this);
$(".same").each(function() {
if ($(this).css("display") == "block") {
$(this).css("display", "none");
}
});
switch ($input.attr("id")) {
case "b1":
$("#abc").css("display", "block");
break;
case "b2":
$("#xyz").css("display", "block");
break;
}
});
As has been pointed out in the comments, your code works as is. You just forgot to add the jQuery library, and the selectors #hello and #bye didn't exist. Next to that, you are also over-complicating your code. In jQuery you do not have to check if an element is visible before hiding it, you can just hide it. And when using a class selector you do not have to run .each against it for jQuery's own internal functions such as hide(); jQuery will hide all elements with this class.
https://jsfiddle.net/r6nkuwvc/5/
$(document).on('click', ".change", function() {
$(".same").hide();
switch ($(this).attr("id")) {
case "b1":
$("#abc").show();
break;
case "b2":
$("#xyz").show();
break;
}
});
You can make it even much simpler using an object. Store the reference to the
selector in an object this way you can avoid the switch case. Although use show() and hide() methods to show and hide the elements.
// object which holds the reference
var sel = {
b1: "#abc",
b2: "#xyz"
};
$(document).on('click', ".change", function() {
// hide all elements initially there is no need to iterate over them
$(".same").hide();
// get selector from object using id and show the element
$(sel[this.id]).show();
})
$(document).on('click', ".change", function() {
var sel = {
b1: "#abc",
b2: "#xyz"
};
$(".same").hide();
$(sel[this.id]).show();
})
.same {
display: none;
width: 400px;
height: 200px;
border: 1px solid;
}
#abc {
display: block;
}
#xyz {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="abc" class="same">
Hello
</div>
<div id="xyz" class="same">
Bye
</div>
<button id="b1" class="change">b1</button>
<br>
<button id="b2" class="change">b2</button>
</body>
You have not put up proper id's. Also I think you forget to set JQuery link in your code, that is why it is giving reference error.
Here is the updated code:
$(document).on('click', ".change", function(){
var $input = $(this);
$(".same").each(function(){
if($(this).css("display")=="block"){
$(this).css("display","none");
}
})
switch($input.attr("id")){
case "b1" : $("#abc").css("display", "block");
break;
case "b2" : $("#xyz").css("display","block");
break;
}
})
.same{
display: none;
width: 400px;
height: 200px;
border: 1px solid;
}
#abc{
display: block;
}
#xyz{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div id="abc" class="same">
Hello
</div>
<div id="xyz" class="same">
Bye
</div>
<button id="b1" class="change">b1</button><br>
<button id="b2" class="change">b2</button>
</body>
Here is the jsfiddle https://jsfiddle.net/r6nkuwvc/6/
In case you want to control what to show/hide from html, than I suggest this approach:
$('body').on('click', '[data-hide]', function(e) {
$($(this).data('hide')).hide();
});
$('body').on('click', '[data-show]', function(e) {
$($(this).data('show')).show();
});
.same {
display: none;
width: 100%;
height: 100px;
border: 1px solid black;
}
#abc {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="abc" class="same">
Hello
</div>
<div id="xyz" class="same">
Bye
</div>
<p>
<button data-hide=".same" data-show="#abc">Show Hallo</button>
</p>
<p>
<button data-hide=".same" data-show="#xyz">Show Bye</button>
</p>
I've created a custom function goToNext() it's just supposed to alert the id of the next element that i've clicked on.
I want to call this custom function inside another click function.
For now when I click on first element it alerts id_2 (next from the first, so it's ok) but if you click the second element it doesn't return id_3 (like it's supposed to be) but it return id_2 same if you click on the last element (supposed to alert the first)
this is my jsfiddle example here
function goToNext() {
var get_next_id = $('.btn').next().attr("id");
alert(get_next_id);
}
$('.btn').click(function() {
goToNext();
});
.btn {
width: 50px;
height: 50px;
margin: 10px auto;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="btn" id="id-1">
1
</div>
<div class="btn" id="id-2">
2
</div>
<div class="btn" id="id-3">
3
</div>
Try this
function goToNext($btn){
var get_next_id = $btn.next().attr("id");
alert(get_next_id);
}
$('.btn').click(function(){
goToNext($(this));
});
You have to use this
function goToNext(thisObj){
var get_next_id = $(thisObj).next().attr("id");
if(get_next_id!=undefined)
alert(get_next_id);
else
alert($(thisObj).parents().find("div:first").attr("id"));
}
$('.btn').click(function(){
goToNext(this);
});
.btn{
width:50px;
height:50px;
margin:10px auto;
background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="btn" id="id-1">
1
</div>
<div class ="btn" id="id-2">
2
</div>
<div class ="btn" id="id-3">
3
</div>
You need to use reference this
function goToNext(e){
var get_next_id = $(e).next().attr("id");
alert(get_next_id);
}
$('.btn').click(function(){
goToNext(this);
});
Updated Fiddle