Could you help me plaese!
I had to use next jQuery functionality.
elem.parents('.CanvasRoot:first').unbind('click').click(function(){
...
}
<div class="CanvasRoot">
...
</div>
But now, I should add area inside the current div. And I don't need to that area called click js function.
<div class="CanvasRoot">
<table class="notForClick">
</table>
</div>
How can I prevent that area from clicking?
Thanks!
$(".notForClick").click(function (e) {
e.stopPropagation();
})
<div onClick="return false;">
Hi this is an unclickable area..
It will not respond to ur click's
</div>
<-- Using Jquery-->
<div id="unclick">
Hi unclickable...
</div>
$("#unclick").on('click',function(){return false;})
Related
I found this code:
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".blurb_click").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
});
</script>
Here is the Html part of the code
<div class="et_pb_blurb et_pb_module et_pb_bg_layout_darket_pb_text_align_center carre-blurb-homeet_pb_blurb_0et_pb_blurb_position_top">
<div class="et_pb_blurb_content"> <div class="et_pb_blurb_container"> <h4>
Coaching sportifpersonnel</h4> </div> </div> <!-- .et_pb_blurb_content --> </div>
to make a whole class clickable.
I found it here : https://divilover.com/clickable-blurb-module-in-divi-theme/
But when I click on the mouse wheel button (not on the icon or the link to the blurb made clickable) to open a new tab, it activates the all scroll option.
How could we fix this, please?
Thank you,
Nicolas.
If You are trying to make the whole Class clickable . Then
there's just one mistake in your code that you forgot to include the class in the div Just Add that class 'blurb_click' in the div and code will work fine
<div class="blurb_click et_pb_blurb et_pb_module et_pb_bg_layout_darket_pb_text_align_center carre-blurb-homeet_pb_blurb_0et_pb_blurb_position_top">
<div class="et_pb_blurb_content"> <div class="et_pb_blurb_container"> <h4>
Coaching sportifpersonnel</h4> </div> </div>
I have structure like this in jquery modal .so i want to perform events on the image either mouseover or click event.
In the div () black () are increment number at the end of the class name.so how do i perform event actions on this type of classes? pls help me im new to jquery.
<div class="myTag">
<div class=tag1>
<img class=close1>
<div class=tag-bax1>
</div>
</div>
<div class=tag2>
<img class=close2>
<div class=tag-bax2>
</div>
</div>
</div>
You can use:
$('img[class*=close]').click(function() {
...
});
This will select every img element which has close in their classname.
Try this
$("img[class*=wl-item]").mouseover(function(){
console.log($(this).attr("class").slice(-1));
});
I'm developing a simple webpage using Twitter Bootstrap.
At the sidebar I have 3 buttons. Each of this buttons calls a function to show one div and hide the others.
The HTML code is something like:
<div>
<div class="row" id="general" style="display:none">
Text1
</div>
<div class="row" id="medication" style="display:none">
Text2
</div>
<div class="row" id="diet" style="display:none">
Text3
</div>
</div>
And this is one of JS functions that hide/show the DIVs:
function showGeneral(){
document.getElementById('general').style.display = 'block';
document.getElementById('medication').style.display = 'none';
document.getElementById('diet').style.display = 'none';
}
I update the code with #ChaoticNadirs answer but still does not work.
Here is my code at Bootply
The problem is that the function works properly but once it finish all DIVs became hidden again (as default).
I feel the problem could be in any transition due to Twitter Bootstrap framework.
Does anyone how to solve this?
Bootstrap provides a .hidden class. You can use this rather than the display style to hide and show elements.
Check this bootply for an example: http://www.bootply.com/uY7kHe3Nw7
HTML:
<button class="btn btn-default" id="show-general">Show General</button>
<div>
<div class="row hidden" id="general">
Text1
</div>
<div class="row" id="medication">
Text2
</div>
<div class="row" id="diet">
Text3
</div>
</div>
JS:
$("#show-general").on('click', showGeneral);
function showGeneral(){
$('#general').removeClass('hidden');
$('#medication').addClass('hidden');
$('#diet').addClass('hidden');
}
EDIT:
In your new example you are firing the event on a <div> click inside an <a> tag. You can do something like this to prevent the default action:
JS:
$('#showGeneral').on('click', showGeneral);
function showGeneral(e){
e.preventDefault();
$('#general').removeClass('hidden');
$('#medication').addClass('hidden');
$('#diet').addClass('hidden');
$('#workout').addClass('hidden');
}
Here's a new bootply: http://www.bootply.com/3RkAbPX6d0
You might want to try using the "visibility" attribute... https://developer.mozilla.org/en-US/docs/Web/CSS/visibility you can read more about it here.
Usually I apply a class to an element I would like to hide. This way it prevents using inline styles. If you don't care about inline styling you could also use jQuery's show(),hide(), or toogle() methods.
I do not think that the issue is with Bootstrap.
Problem is following. So, I have this HTML
<div class="sitemap">
<div class="collapse-all">
[alles Ausklappen / Einklappen]
</div>
<div class="collapse-list"> <!-- 1. box -->
<div class="collapse-box">
<h2>
Logo
</h2>
<!-- This "in" class for some reason helps us to keep all boxes closed -->
<div class="collpase-container collapse in" id="first-select-box">
<ul>
<li >
And I need to add class, lets say "active" to an element collapse-box when user clicks on div "collapse-all". I hope I made it clear.
Here is small screenshot from DOM.
LINK TO screenshot:
http://i62.tinypic.com/r8e8zs.jpg
pls try to edit this fiddle:
http://jsfiddle.net/ufe8n/1/
You can do this:
$(".collapse-all a").click(function(e){
e.preventDefault();
$(this).closest(".collapse-all").next().find('.collapse-box').addClass('active');
});
Is this you want.
You can use this code in click handler of .collapse-all div:
$(".collapse-all").click(function(){
$(this).next().find('.collapse-box').addClass('active');
});
$(".collapse-all").click(function(){
$(".collapse-box").addClass("active");
});
$(".collapse-all").live("click",function(){
$(".collapse-box").addClass("active");
});
I'm having a little trouble here and hopefully someone can give me a hint on what I'm doing wrong. The object within the main div is hidden and I need it show when I click the button within the secondary div. I'm getting the secondary div to "close" after the button is clicked but I just can't seem to figure out how to make the "checked" object to show.
Here is the HTML:
<div class="separate">
<div class="main">
<h1>Mechanical Room</h1>
<object class="checked"></object>
</div>
<div class="secondary">
<div class="heading">
<h2>Mechanical Room</h2>
<button class="check-in">Check In</button>
<object></object>
</div>
</div>
</div>
And here is my jQuery code:
$(document).ready(function() {
$(".check-in").click(function () {
$(this).closest(".separate").children(".secondary").fadeOut(200);
$(this).closest(".separate").children(".main").find("object").show();
});
});
If your div is set to hidden by visibility then show() method won't show demo
You need to set .css('visibility','visible'); then.
$(document).ready(function() {
$(".check-in").click(function () {
$(this).closest(".separate").children(".secondary").fadeOut(200);
$(this).closest(".separate").children(".main").find("object").css('visibility','visible');
});
});
It is working just fine in my fiddle.
Did you style your object?
Did you make sure it's hidden initially?
$("object").hide();
I added [THE OBJECT] as it's content to see it.
<object class="checked">[THE OBJECT]</object>
Demo: http://jsfiddle.net/u6x84/