We Keep Coding

mouse wheel button function on a whole class made clickable

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>

Toggling or accordian effect using Angular

First of all i am new to angular, so i can't able to figure out how to achieve the below scenario.
On click I can able to show/Hide the relevant div for each row. But if the tooltip is open (let's say on 1st row it is opened) in one row and i am clicking on another row (let's say i am clicking on 3rd row ) then the open tooltip (from 1st row ) is not hiding. Please help me on this.
Below is my code,
<div ng-repeat="breakdown in CallFullbreakdown" class="list-items-row">
<div class="mob-number"><a data-ng-click="toggleDetails = !toggleDetails">{{breakdown.number}}</a></div>
<div class="call-date"><a data-ng-click="toggleDetails = !toggleDetails">{{breakdown.dateandtime}}</a></div>
<div class="call-cost text-align-right"><a data-ng-click="toggleDetails = !toggleDetails">£{{breakdown.cost}} <span class="chevron-style icon-up-chevron"></span></a></div>
<!-- Start Call Breakdown Tooltip -->
<div class="row position-relative call-breakdown" data-ng-show="toggleDetails">
<span class="sprite arrow grey-arrow call-breakdown-arrow"></span>
<div class="mob-number">
<span class="bolder">Call type</span>
<span>{{breakdown.callType}}</span>
</div>
<div class="call-date">
<span class="bolder">Destination</span>
<span>{{breakdown.destination}}</span>
</div>
<div class="call-cost text-align-right">
<span class="bolder">Duration</span>
<span>{{breakdown.duration}}</span>
</div>
</div>
<!-- End Call Breakdown Tooltip -->
</div>

Just switching one toggleDetails variable for all cannot close one while opening the other. Instead, create a reference to the breakdown curently opened in your controller.
Then, make toggleDetails a function taking the breakdown to toggle as an argument. That function can then control which breakdown is currently showing ist Details.
In your BreakdownController:
(...)
var activeBreakdown;
$scope.toggleDetails = function(breakdown) {
if (breakdown === activeBreakdown) {
// Breakdown is defined, so activeBreakdown must be as well
activeBreakdown.showDetails = !activeBreakdown.showDetails;
} else {
if (activeBreakdown) {
// Make sure the currently active breakdown is closed
activeBreakdown.showDetails = false;
}
// If a new breakdown is selected, it needs to be opened
breakdown.showDetails = true;
// And put on activeBreakdown so it can be closed on the next toggle
activeBreakdown = breakdown;
}
};
(...)
html:
<div ng-repeat="breakdown in callFullBreakdown" class="list-items-row">
<!-- Breakdown row stuff here... -->
<!-- Start Call Breakdown Tooltip -->
<div class="row position-relative call-breakdown" style="background-color: #a0a0a0" ng-show="breakdown.showDetails">
<!-- Details/tooltip here -->
</div>
<!-- End Call Breakdown Tooltip -->
<hr />
</div>
See this Plunk
Also, to save on ng-clicks (and therefore also reduce the amount of potential error when changing something), see if you can wrap the row part (number, dateandtime, cost) in another element and put the ng-click there.

This is the first thing that bumped into my eyes:
data-ng-show="toggleDetails" data-ng-hide="!toggleDetails"
ng-show serves the purpose of showing AND hidding and element, depending on the boolean value of the variable assigned to it.
Using both on the same element is just a mess.
Also, you've spread the ng-show/hide all over the place. Couldn't it be done at the container level?
Ideally, you should give us a working sample on jsfiddle and we'll fix it from there.

How to bring different elements into the viewport with jquery?

I have 3 elements that show/hide their contents when clicked on.
What I am aiming for: Click on element 1, brings the entire div into view. If I then click on element 2, the second div is brought into view.
What happens currently: Click on element 1, brings the entire div into view. Scroll down a bit and click on element 2, it scrolls back up to display the entire first div instead of the second div.
I believe the issue is that I have .content as the parameter in the scrollTop function but I haven't been able to figure out what I should put in there to address the issue.
My jquery/javascript is here:
$(document).ready(function(){
$(".flippy1").click(function(){
$(this).parent().children(".content").slideToggle(); //toggles the content
setTimeout(function(){
$('body').animate({scrollTop:$('.content').offset().top},200)
}, 200); //delay of 200 ms to let the entire slidetoggle animation finish, then scrolls to the top of the div
});
});
HTML:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="flippy1">
<h2>Experience</h2>
</div>
<div class="content">
content goes here
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="flippy1">
<h2>Dogs</h2>
</div>
<div class="content">
contents goes here
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="flippy1">
<h2>Cats</h2>
</div>
<div class="content">
more content
</div>
</div>
</div>
</div>

The solution for me has been to use $("html,body") when animating scrollTop property. Some browsers do not play nicely with $("body") alone, although I have no proper explanation for this.
Second problem is you're referencing $(".content") in your timeout function. This animates scrollTop to the first occurrence of .content, not necessarily the clicked occurrence. But, we can do one better:
Third, and not a problem but a better way to handle, is to use the callback function of slideToggle: this function is code that gets executed only after slideToggle finishes. Do this rather than set a timeout. Timeout length is arbitrary, for example in a very old, very slow browser, 200ms may not be long enough duration to wait.
See the updates below:
$(document).ready(function(){
$(".flippy1").click(function(){
$(this).parent().children(".content").slideToggle( function(){
$('body,html').animate({scrollTop: $(this).offset().top},200);
});
});
});
If you want to scroll to the top including the headline, simply grab the parent again and use its offset instead.
This line:
$('body,html').animate({scrollTop: $(this).offset().top},200);
becomes:
$('body,html').animate({scrollTop: $(this).parent().offset().top},200);
Example here: https://jsfiddle.net/nb0fvu3u/
Parent example here: https://jsfiddle.net/nb0fvu3u/1/

Setting `a href` elements dynamically

I have two buttons that are essentially "next" and "previous" buttons for my tabbed form with bootstrap. The code works when you go from the introduction tab to the applicant tab just fine the way it is. The only problem is there are 11 "tabs" in the element. I am needing essential parts in this <a> to change on each tab.
What I am needing to change is the href , .style.width , and the two classNames at the end of the `onclick' function each time the user progresses through the form.
Previous
Next
The sections that need to correspond with the buttons are identified with an id that is different for all 11 sections.
<div class="tab-pane" id="confirmation">
So for example when the users clicks the button "next" from the introduction tab I need the above to change to: (and vise versa for the previous button)
Previous
Next
and so on throughout the tab-panes.
I am figuring I could do something like, I just really don't know how to start it and how to change just the specific onclick elements like I am needing to.
if(this tab-pane is something?)
{
document.getelementById('previous').href="";
document.getelementById('previous').style.width="";
document.getelementById('previous').className="";
}
As Requested in the comments the tabs are laid out like so:
<div class="tab-content">
<div class="tab-pane" id="introduction">
//content here
</div>
<div class="tab-pane" id="applicant"> //and so on just like this for all 11 tabs.
//content here
</div>
</div>

Here you go...
This is using Twitter bootstrap and Jquery...
Hopefully its helpful to you...
The progress bar is a bit of a hack, but its a start and Im sure you can figure things out from there...
The only thing that sucks is that the tabs are clickable, and that isn't what you wanted, since you want them to progress through the form without being able to click on the tabs....But the nuts and bolts are here
DEMO HERE
$(document).ready(function(){
//Progress bar calculation
function setProgress(){
var length = $tabs.length;
var index = ($('li').index($(".active")))+1;
var width = (index/length)*100;
$('#progressBar').css('width', width+'%');
}
var $tabs = $('#tab_bar li');
setProgress();
$('#prevtab').on('click', function () {
$tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
setProgress();
});
$('#nexttab').on('click', function () {
$tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
setProgress();
});
$tabs.click(function () {
setTimeout(setProgress, 200)
});
});
Then your HTML, I dunno what you had for < ul > , cuz you didn't provide that part... so I just hacked something up...but this should be similar to your structure
<ul class="nav nav-tabs" id="tab_bar">
<li class="active">Intro</li>
<li>SecondTab</li>
<li>Third</li>
<li>Fourth</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="introduction">
asdasdasdas
</div>
<div class="tab-pane" id="secondtab">
asdasdsagreteryterythhgh
</div>
<div class="tab-pane" id="thirdtab">
rthrthrthrthrt
</div>
<div class="tab-pane" id="fourthtab">
yujghjuyjyujedgjhegj
</div>
</div>
<a class="btn" id="prevtab" type="button">Prev</button>
<a class="btn" id="nexttab" type="button">Next</button>
DEMO HERE

YUI menu change page content not whole page

I have divided html page into :
<body>
<div class="menu_container">
<!-- added menu here -->
</div>
<div class="content">
<!-- body content here -->
</div>
</body>
I want to change the content of "content" div when I select menu item.
ie depending on menu item selection div content should change, like what happens in Tabviews.
How can I do so?

The latest versions of YUI include the concept of Pjax which uses History and Ajax to update the page. It's really easy to set up and it'll keep your URLs working. Check out the User Guide: http://yuilibrary.com/yui/docs/pjax/.
You only need to add the yui3-pjax class to each menu that updates the page, apply the Menu plugin, plug the Pjax plugin and have your server return the right HTML content.
<div id="menu-1" class="yui3-menu">
<div class="yui3-menu-content">
<ul>
<li class="yui3-menuitem">
<a class="yui3-menuitem-content yui3-pjax" href="/some-page.html">Some page</a>
</li>
</ul>
</div>
</div>
<div id="content">
<!-- here goes the page content -->
</div>
<script type="text/javascript">
YUI().use('node-menunav', 'pjax-plugin', function (Y) {
Y.one('#menu-1').plug(Y.Plugin.NodeMenuNav);
Y.one('#content').plug(Y.Plugin.Pjax);
});
</script>

This should do the trick:
Y.one('.menu_container').on('click', function(e) {
Y.one('.content').setHTML("<h1>Hello, <em>World</em>!</h1>");
});
Depending on the selector used instead of menu_container, you can update the content accordingly.
EDIT: In fact, delegate is probably better for your needs:
Y.one('.menu_container').delegate('click', onClick, '.menu-item');
http://jsfiddle.net/olan/w2jfh/