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>
Related
What I need
I need when user click on link data is shown.
link disappear after click.
I have tried code
<a href="javascript:void(0);" class="viewdetail more"
style="color:#8989D3!important;">view details
<div class="speakers dis-non">
</div>
</a>
jquery code
$('.viewdetail').click(function() {
$(this).find('.speakers').show();
$(this).find('.viewdetail').hide();
});
problem
when I click on view detail link data is shown on div.
link doesn't disappear.
if I put anchor before div then data is not shown on speaker class div.
any suggestion are most welcome.
jsfiddle: http://jsfiddle.net/fw3sgc21/
Since the div is inside the anchor, the div will also be hidden if you hide the anchor. You need to put the div next to the anchor to make it work. Use next() method to select the div.
HTML
view detail
<div class="speakers dis-non" style="display: none">
test data to be shown
</div>
JS
$('#viewdetail').on('click', function(){
// show div with speakers class next to the anchor
$(this).next('div.speakers').show();
// hide the anchor
$(this).hide();
});
JSFiddle: http://jsfiddle.net/fw3sgc21/2/
EDIT
If you want to wrap the speakers div inside another div as below
view detail
<div class="12u">
<div class="speakers dis-non">
test data to be shown
</div>
</div>
with the following CSS
.dis-non
{
display: none;
}
Here's the JS that should show the speakers div and hide the clicked anchor
$('#viewdetail').on('click', function(){
$(this).next().children('div.speakers').show();
$(this).hide();
});
JSFiddle: http://jsfiddle.net/fw3sgc21/6/
EDIT 2
If you want to put the anchor inside two divs as below
<div class="a">
<div class="b">
view detail
</div>
</div>
<div class="12u">
<div class="speakers dis-non">
test data to be shown
</div>
</div>
Use .parent() method twice to select <div class="a">, then use .next().children('div.speakers').show() to show the speakers div
$('#viewdetail').on('click', function(){
$(this).parent().parent().next().children('div.speakers').show();
$(this).hide();
});
JSFiddle: http://jsfiddle.net/fw3sgc21/8/
Try the following:
$('.viewdetail').click(function()
{
$('.speakers').show();
$(this).hide();
});
$(this) refers to the .viewdetail so you don't need the find it again
Pull the div outside the hyperlink
HTML:
view details
<div class="speakers dis-non"></div>
try this
html
<a href="javascript:void(0);" id="viewdetail" style="color:green">view detail
</a>
<div class="speakers dis-non">
test
</div>
js
$('#viewdetail').click(function() {
$('.speakers').show();
$(this).hide();
});
http://jsfiddle.net/fw3sgc21/1/
First of all this in your code refers to to the clicked link itself.
So this line $(this).find('.viewdetail').hide(); doesn't work, because there is no .viewdetail inside of link. It should be
$('.viewdetail').on('click',function(e) {
var self = $(this);
self.find('.speakers').show();
self.hide();
});
But, if you hide your link, the .speakers will be also hidden, because it's inside of your link. If you want it to be visible, you should place it outside of link
For example:
view details
<div class="speakers dis-non"></div>
And JS:
$('.viewdetail').on('click',function(e) {
var self = $(this);
e.preventDefault(); // prevent link from working the way it should
self.next('.speakers').show();
self.hide();
});
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 am trying to create a group of links or buttons that will change the content of a div
<p><button>EMPLOYEE NAME HERE</button></p>
<p><button>EMPLOYEE NAME HERE</button></p>
<p><button>EMPLOYEE NAME HERE</button></p>
<p><button>EMPLOYEE NAME HERE</button></p>
Each employee has a different image and description but each div are the same size, the first employee will be shown by default as so to have no empty space but when the other 3 are selected the div is filled with the respective div according to it, then you can cycle through the profiles as you wish. Here is my div structure
<div id="employee">
</div>
<div id="employee1">
</div>
<div id="employee2">
</div>
<div id="employee3">
</div>
<div id="employee4">
</div>
Here is the javascript im trying to use
<script type="text/javascript" charset="utf-8">
$('button').bind('click', function() {
$('div#employee').html($('div#employee' + ($(this).index()+1)).html());
});
</script>
All the help i can get would be really appreciated, im not that great at java script and really need a hand with this. Im not sure i explained myself very well but i did try.
Just to confirm, all the divs are hidden until the button is pressed, then the div for that employee will appear, except the first profile which will appear by default on load.
Thanks for your help in advance.
James
Here's a pretty simplified example. It may or may not be the most efficient, but it should do what you want. This is assuming that you're pre-loading all of the content into the divs, but just hiding it at the beginning. If you are wanting to dynamically load the content, then you'll want to use some ajax
HTML
<p><button id="button1">EMPLOYEE One</button></p>
<p><button id="button2">EMPLOYEE Two</button></p>
<p><button id="button3">EMPLOYEE Three</button></p>
<p><button id="button4">EMPLOYEE Four</button></p>
<p><button id="button5">EMPLOYEE Five</button></p>
<br/><br/>
<div id="employee1" class="employeeInfo">
Employee1 is a good employee
</div>
<div id="employee2" class="employeeInfo">
Emloyee2 is an alright employee
</div>
<div id="employee3" class="employeeInfo">
Emloyee3 is the best employee ever!
</div>
<div id="employee4" class="employeeInfo">
Employee4 is not a very good employee
</div>
<div id="employee5" class="employeeInfo">
Employee5 is about to be fired
</div>
Javascript
$(function(){
$("#employee1").show();
$("button").on("click", function(){
$(".employeeInfo").hide();
$("#employee"+String($(this).attr("id").substring(6))).show();
// OR if you don't want to have to give IDs to the buttons
// $("#employee"+String($("button").index($(this))+1)).show();
});
});
CSS
.employeeInfo {
display: none;
}
JSFiddle
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/
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;})